React 검색 기능 구현 프로젝트

📝 요구사항

1. 검색폼 구현

• 검색 상품명을 입력할 수 있는 폼 구현
• 검색어 존재 여부에 따른 X 버튼 토글
• 엔터 키 입력 시 검색 결과 표시
• X 버튼 클릭 또는 검색어 삭제 시 검색 결과 초기화

2. 검색 결과 구현

• 검색폼 하단에 검색 결과 표시
• 검색 결과 유무에 따른 화면 분기 처리
• X 버튼 클릭 시 검색폼 초기화 및 결과 제거

3. 탭 구현

• 검색폼 하단에 "추천 검색어"와 "최근 검색어" 탭 배치
• "추천 검색어" 탭을 기본값으로 설정
• 탭 클릭 시 해당 내용으로 화면 전환

4. 추천 검색어 구현

• 탭 하단에 번호와 추천 검색어를 목록으로 표시
• 검색어 클릭 시 해당 검색어의 결과 화면으로 이동

5. 최근 검색어 구현

• 탭 하단에 검색어, 검색 일자, 삭제 버튼을 목록으로 표시
• 검색어 클릭 시 해당 검색어의 결과 화면으로 이동
• 삭제 버튼(X)으로 개별 검색어 삭제 가능
• 새로운 검색 시 최근 검색어 목록에 자동 추가

🖼 구현 화면

1. 검색어 미입력 시

추천 검색어 탭

최근 검색어 탭

2. 검색어 입력 시

검색 결과 화면

3. 최근 검색어 관리

검색어 목록 확인

검색어 삭제