✨ feat: 포스트 필터링 및 추천 포스트 구현

[jungmyunggi]

🔨 테스크

Issue

• close [FE] 최신 포스트 필터링 기능 추가 #365
• close [FE] 클라이언트 딴 추천 포스트 구현 #375

필터링 UI 수정

• 기존에 만들어둔 필터링의 경우 별도의 대분류 없이 모든 태그가 아무렇게나 나오고있었습니다.
• 이에 따라 각 필터별 대분류를 지정해두고 두번 타고 들어가서 태그를 선택하도록 수정했습니다.

export const CATEGORIES = [
  ["Frontend", "React", "Vue.JS", "TypeScript", "JavaScript"],
  ["Backend", "Nest.JS", "Express.JS", "Spring", "Java"],
  ["회고"],
  ["MySQL", "SQLite", "PostgreSQL", "MongoDB", "Redis"],
  ["Docker", "Infra"],
  ["Network", "OS", "Algorithm"],
];

export const CATEGORIES_KEY = ["FrontEnd", "BackEnd", "회고", "데이터베이스", "인프라", "CS"];
export const CATEGORIES_MAP = {
  FrontEnd: 0,
  BackEnd: 1,
  회고: 2,
  데이터베이스: 3,
  인프라: 4,
  CS: 5,
};

클라이언트 딴에서의 추천 시스템

• 현재 공부중인 내용중 하나가 로컬스토리지를 이용한 UX향상이었습니다. 크롬의 각 탭은 프로세스로 이루어져있으며 이 프로세스는 별도의 로컬스토리지 공간을 가집니다. 하지만 같은 origin을 사용하는 탭의 경우 이 로컬스토리지 및 세션스토리지, 쿠키 등이 공유된다는 사실을 얼마전에 알게되었고 로컬스토리지를 가지고 추천시스템을 만들 수 있지 않을까? 하는 생각에 진행해봤습니다.
• 실제로 무신사 서비스를 확인해보니 사용자가 마지막으로 본 상품의 종류 및 검색 기록 등을 로컬스토리지에 저장하고 사용하고 있더라고요 그거 따라서 비슷하게 만들어봤습니다!

📋 작업 내용

• 태그 필터링 구현

📷 스크린 샷