Skip to content

Frontend-Deepdive/react-search-recommendation

Repository files navigation

Topic #4 사용자 검색 기반 추천 사이드바 구현

이 프로젝트는 React의 상태 관리 기법을 학습하고 활용하는 것을 목표로 합니다.

목적

  • 상태 관리 도구를 활용하여 클라이언트 인터랙션 데이터를 효율적으로 저장하고 활용하는 방법을 학습합니다.
  • 최근 검색 이력을 기반으로 동적으로 사이드바를 구성하는 실전 UI 상태 관리 흐름을 학습합니다.

미션 구성

  1. 기본 검색 UI (검색 input + 검색 버튼) 구현
  2. 사용자가 검색한 키워드를 최근 순으로 저장하는 상태 구성
  3. 사이드바에 최근 검색 이력 표시 (중복 제거 및 최대 5개 유지)
  4. 최근 검색 이력을 기반으로 단순 추천 로직 구현 (예: "react" 검색 시 "next.js", "vite" 추천)
  5. 상태 관리 도구를 사용해 전체 상태 흐름 구현

미션 요구사항

  1. 검색 키워드 입력 후 버튼을 클릭하면 이력이 저장되고, 사이드바에 실시간 반영되어야 합니다.
  2. 같은 검색어는 중복 저장되지 않으며, 최근 검색 순서로 정렬됩니다.
  3. 사이드바에는 최대 5개의 검색어만 표시됩니다.
  4. 추천 항목은 최근 검색어 기준으로 2개 이상 표시되어야 하며, 간단한 추천 로직을 통해 출력합니다.
  5. 전체 상태는 하나의 상태관리 도구로 일관되게 관리되어야 하며, 상태 흐름을 알 수 있도록 주석 또는 문서로 설명이 포함되어야 합니다.

  • 미션 개시 : 4/21(월)
  • 미션 제출 : 4/24(목)
  • 미션 제출 방식 : 미션에 맞게 구현 후 pr 올리기

About

사용자 검색 기반 추천 사이드바 만들기

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published