refactor: 기기 검색 페이지

[H-un1]

📌 관련 이슈번호

close : #150

🔍 구현한 내용

808줄의 DeviceSearchPage.tsx를 관심사 분리 원칙에 따라 리팩토링하여 261줄로 축소했습니다.
기능과 디자인은 100% 동일하게 유지하며, 유지보수성과 재사용성을 크게 개선했습니다.

🔄 Changes

1. 상수 및 유틸리티 분리

• src/constants/deviceMapping.ts (신규)
  • 카테고리 ID → API deviceType 매핑
  • 정렬 옵션 → API sortType 매핑
• src/utils/mapSearchDevice.ts (신규)
  • SearchDevice → Product 타입 변환 로직

2. 커스텀 훅 추출 (3개)

• src/hooks/useDeviceSearch.ts (신규)

  • 검색/필터 상태 관리 (searchQuery, selectedCategory, sortOption, selectedPrice, selectedBrand)
  • 브랜드 API 호출 및 옵션 변환
  • 무한 스크롤 (useInfiniteQuery + Intersection Observer)
  • 카테고리 변경 시 브랜드 자동 초기화

• src/hooks/useScrollState.ts (신규)

  • 스크롤 위치 감지 (isAtBottom, showTopButton)
  • Top 버튼 표시 기준점 계산
  • 페이지 마운트 시 최상단 이동

• src/hooks/useAddToCombination.ts (신규)

  • 모달 상태머신 (device → combination → combinationDetail)
  • 인증/온보딩 상태 확인 및 버튼 텍스트 동적 생성
  • 조합 담기 mutation 로직
  • 저장 완료 모달 fade 애니메이션
  • Body 스크롤 잠금

3. 모달 컴포넌트 분리 (4개)

• src/components/DeviceSearch/DeviceDetailModal.tsx
  • 기기 상세 정보 (이미지, 스펙, 가격)
  • 내 조합에 담기 버튼
• src/components/DeviceSearch/CombinationSelectModal.tsx
  • 조합 목록 표시 및 선택
• src/components/DeviceSearch/CombinationDetailModal.tsx
  • 조합 내 기기 그리드
  • 전체보기/간략히 보기 토글
  • 조합에 담기 최종 확인
• src/components/DeviceSearch/SaveCompleteModal.tsx
  • 저장 완료 오버레이 (fade 애니메이션)

4. DeviceSearchPage.tsx 변경사항

• 라인 수: 808줄 → 261줄
• 구조: 3개 훅 호출 + 레이아웃 + 4개 모달 컴포넌트
• 개선사항:
  • 카테고리 버튼 재클릭 시 선택 해제 (토글 기능)
  • placeholderData 추가로 페이지 전환 시 깜빡임 방지

📁 File Structure (변경내용)

src/
├── constants/
│ └── deviceMapping.ts 매핑 함수
├── utils/
│ └── mapSearchDevice.ts 타입 변환
├── hooks/
│ ├── useDeviceSearch.ts 검색/필터 로직
│ ├── useScrollState.ts 스크롤 감지
│ └── useAddToCombination.ts 조합 담기 플로우
├── components/DeviceSearch/ (추가)
│ ├── DeviceDetailModal.tsx
│ ├── CombinationSelectModal.tsx
│ ├── CombinationDetailModal.tsx
│ └── SaveCompleteModal.tsx
└── pages/devices/
└── DeviceSearchPage.tsx [REFACTORED] 808 → 261줄

📢 리뷰어에게

검색/필터

• 기기명 검색 입력
• 카테고리 선택/해제 (재클릭 시 초기화)
• 카테고리 변경 시 브랜드 필터 자동 초기화
• 가격대 필터 (다중 선택)
• 브랜드 필터 (단일 선택)
• 정렬 옵션 변경
• 무한 스크롤 (하단 도달 시 다음 페이지 로드)
• 페이지 전환 시 깜빡임 없음 (placeholderData)

모달

• 기기 클릭 → 상세 모달 표시
• 모달 열림 시 body 스크롤 잠금
• X 버튼 / 배경 클릭으로 닫기
• URL 파라미터 (?productId=123) 연동

조합 담기 플로우

• 로그아웃 → "로그인하고 내 조합에 담기" → 로그인 페이지
• 온보딩 미완료 → "맞춤 설정하고 담기" → 온보딩 페이지
• 조합 1개 → 바로 저장 → 저장 완료 모달 (fade)
• 조합 2개+ → 조합 선택 모달 → 상세 → 담기
• 뒤로가기 버튼 (조합 상세 ← 조합 선택 ← 기기 상세)
• 이미 담긴 기기 → "이미 담은 상품입니다" 비활성화

[github-actions]

✅ PREVIEW https://device-life-frontend-lkff-ltu4u7nx0-yuminparks-projects.vercel.app