Skip to content

Conversation

@donut74
Copy link
Collaborator

@donut74 donut74 commented Jan 11, 2026

⚙️ Related ISSUE Number

#104


📄 Work Description

검색 기능

개요

검색 기능은 사용자가 파티를 검색할 수 있는 화면으로, 검색어 입력, 최근 검색어 표시, 카테고리 필터링, 검색 결과 표시 및 무한 스크롤 기능을 제공합니다.

주요 기능

1. 검색바 (SearchBar)

  • 검색어 입력 필드
  • 뒤로가기 버튼
  • 검색어 삭제 버튼 (입력 중일 때만 표시)
  • 엔터 키 입력 시 검색 실행
  • 플레이스홀더에 사용자 위치 정보 표시 (예: "역삼동 근처에서 검색")

2. 최근 검색어 (RecentSearchList)

  • 검색어가 없을 때 최근 검색어 목록 표시
  • 최근 검색어 클릭 시 해당 검색어로 검색 실행
  • 개별 검색어 삭제 기능
  • 전체 삭제 기능
  • 최근 검색 내역이 없을 때 빈 상태 메시지 표시

3. 카테고리 필터 (MainCategory)

  • 검색 실행 후 카테고리 필터 표시
  • 전체, 배달, 장보기, 생활용품 카테고리 선택 가능
  • 카테고리 변경 시 해당 카테고리로 재검색

4. 검색 결과 리스트 (SearchResultList)

  • 검색 결과를 카드 형태로 표시
  • 검색 중일 때 로딩 메시지 표시
  • 검색 결과가 없을 때 빈 상태 메시지 표시
  • 검색 결과 아이템 클릭 시 파티 상세 페이지로 이동

5. 무한 스크롤

  • 스크롤을 끝까지 내리면 자동으로 다음 페이지 로드
  • 다음 페이지 로딩 중일 때 하단에 "더 불러오는 중..." 메시지 표시
  • 더 이상 불러올 데이터가 없으면 자동으로 중단

변경된 파일

1. app/search/search.tsx

  • 변경 내용: 검색 화면 메인 컴포넌트
  • 주요 기능:
    • 검색어 상태 관리 (searchText, searchQuery)
    • 사용자 위치 정보 조회 및 관리
    • useInfiniteQuery를 사용한 검색 결과 조회
    • 검색어 제출 시 검색 실행
    • 검색어 클리어 기능
    • 최근 검색어 클릭 시 검색 실행
    • 검색 결과 아이템 클릭 시 상세 페이지 이동
    • 검색어 유무에 따라 최근 검색 화면 또는 검색 결과 화면 표시

2. components/search/SearchBar.tsx

  • 변경 내용: 검색바 컴포넌트
  • 주요 기능:
    • 검색어 입력 필드
    • 뒤로가기 버튼 (선택적)
    • 검색어 삭제 버튼 (입력 중일 때만 표시)
    • 엔터 키 입력 시 검색 실행
    • 플레이스홀더 커스터마이징 가능

3. components/search/RecentSearchList.tsx

  • 변경 내용: 최근 검색어 리스트 컴포넌트
  • 주요 기능:
    • 최근 검색 로그 조회 및 표시
    • 최근 검색어 클릭 시 검색 실행
    • 개별 검색어 삭제 기능
    • 전체 검색어 삭제 기능
    • 빈 상태 처리

4. components/search/SearchResultList.tsx

  • 변경 내용: 검색 결과 리스트 컴포넌트
  • 주요 기능:
    • 검색 결과를 카드 형태로 표시
    • 로딩 상태 표시
    • 빈 상태 표시
    • 무한 스크롤 지원 (onEndReached, isFetchingNextPage)
    • 다음 페이지 로딩 중 표시

5. api/partyApi.ts (searchParties 함수)

  • 변경 내용: 없음 (기존 API 그대로 사용)
  • 참고사항:
    • 검색 API는 pagesize 파라미터를 받아 페이지네이션 지원
    • 응답에 hasNext 필드가 포함되어 있어 다음 페이지 존재 여부 확인 가능
    • 검색어(q), 카테고리(category), 위치(lat, lon) 파라미터 지원

6. api/partyApi.ts (getSearchLog, deleteSearchLog, deleteAllSearchLog 함수)

  • 변경 내용: 최근 검색어 관련 API 함수들
  • 주요 기능:
    • 최근 검색 로그 조회
    • 개별 검색 로그 삭제
    • 전체 검색 로그 삭제



📷 Screenshot



💬 To Reviewers

키보드가 autofocus 를 줬더니 화면 넘기는 모션이랑 키보드랑 겹쳐서 일단 주석 처리 해뒀습니다
이 부분은 추후에 키보드를 몇 초 이후에 띄우던지 수정해야할 것 같습니다...
IOS 그림자도 수정해두었습니다
중간에 헷갈려서 #105로 커밋한 부분이 있는데 참고해서 봐주세요... 죄송합니다ㅜㅜ

donut74 added 26 commits January 7, 2026 17:33
- 파티 검색
- 최근 검색 조회
- 최근 검색 모두 삭제
- 최근 검색 특정 삭제
@donut74 donut74 self-assigned this Jan 11, 2026
@donut74 donut74 requested a review from DandelionQZ January 11, 2026 13:31
@donut74 donut74 linked an issue Jan 11, 2026 that may be closed by this pull request
3 tasks
Copy link
Collaborator

@DandelionQZ DandelionQZ left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

확인했습니다 ~ 수고하셨어요!

Comment on lines +26 to +31
const { data: userMe } = useQuery({
queryKey: ["getUserMe"],
queryFn: getUserMe,
refetchOnMount: false,
refetchOnWindowFocus: false,
});
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이번에 채팅 기능 구현하면서 유저 정보 store 수정해뒀는데, 저희 pr 모두 반영되면, 추후에 store에서 값 참고하셔서 사용하는게 좋을거 같아요

@donut74 donut74 merged commit 524ddd7 into develop Jan 12, 2026
@donut74 donut74 deleted the feat/104-메인화면-검색-구현 branch January 12, 2026 09:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat: 메인화면 검색 구현

3 participants