✨ 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을 사용하는 탭의 경우 이 로컬스토리지 및 세션스토리지, 쿠키 등이 공유된다는 사실을 얼마전에 알게되었고 로컬스토리지를 가지고 추천시스템을 만들 수 있지 않을까? 하는 생각에 진행해봤습니다.
• 실제로 무신사 서비스를 확인해보니 사용자가 마지막으로 본 상품의 종류 및 검색 기록 등을 로컬스토리지에 저장하고 사용하고 있더라고요 그거 따라서 비슷하게 만들어봤습니다!

📋 작업 내용

• 태그 필터링 구현

📷 스크린 샷

[junyeokk]

고생 많으셨습니다 !

[junyeokk]

P5) filter와 filters의 차이는 어떤걸까요?

[jungmyunggi]

Filter는 전체 필터를 감싸는 최상위 컴포넌트고, Filters는 여러개의 필터 옵션을 받고 렌더링하는 하위 컴포넌트입니다.

[junyeokk]

P3) filter 구조가 잘 이해되지 않아서 그런데, categories_key에 있는 것들이 categories_map에 매핑되어 그게 categories에 각각 하나씩 매핑되는걸까요?

구조 자체는 작동하긴 하지만, 인덱스 기반 접근보다는 키-값 형태의 단순 객체로 관리하는 쪽이 더 명확하지 않을까 생각이 들어요.
혹시 이 구조가 필요한 이유나 다른 맥락이 있을까요?

[jungmyunggi]

카테고리 구조는 크게 3가지로 나눠서 구현했습니다.

1. CATEGORIES_KEY

• 화면에 보여질 대분류 문자열들의 배열

2. CATEGORIES_MAP

• 키와 CATEGORIES 배열 내 인덱스 매핑

3. CATEGORIES

• 각 인덱스별 세부분류 문자열 배열

현재 저희 필터가 별도의 아이콘이나 설명등이 필요없는 구조이므로 별도의 객체 리터럴로 관리하기보다 인덱스 기반구조가 더 단순하고 직관적이라고 생각했습니다.
또한 배열에 적힌 각 필터들은 절대 삭제되지 않고 추가될 때도 항상 배열 끝에만 붙기 때문에 index를 통한 key값 관리가 가능해지며 고유한 ID를 따로 생성할 필요가 없어 더 단순한 구현이 가능해지기 때문에 위와같은 구조로 구현했습니다

[junyeokk]

P4) 여기도 filters가 있군요 ..

[jungmyunggi]

여기서 filters는 useFilterStore에서 받아온 “현재 선택된 필터” 배열을 가리킵니다.
변수명이 컴포넌트 내부의 다른 filters(props)와 겹치기 때문에,
구조 분해 할당 시 filters: pickedFilter 형태로 별칭(alias) pickedFilter를 부여한 것입니다.