feat: 브랜드 목록 API 연결

[H-un1]

📌 관련 이슈번호

close : #117

🔍 구현한 내용

• 기기 검색 페이지의 브랜드 필터에 실제 API 연동
• 카테고리별 브랜드 필터링 기능 구현
• 하드코딩된 브랜드 옵션을 API 기반으로 전환

주요 변경사항

1. API 연결

• GET /api/brands 엔드포인트 연동
• 선택적 deviceType 쿼리 파라미터로 카테고리별 필터링 지원
• TanStack Query를 사용한 캐싱 및 상태 관리

2. 파일 변경

• 신규 파일: src/apis/devices/getBrands.ts
  • getBrands(): 브랜드 목록 조회 함수
  • useGetBrands(): React Query 훅
• 타입 정의: src/types/devices.ts
  • Brand: 브랜드 정보 타입
  • GetBrandsResponse: API 응답 타입
• 쿼리 키: src/constants/queryKey.ts
  • BRANDS: 'brands' 추가
• UI 적용: src/pages/devices/DeviceSearchPage.tsx
  • 하드코딩된 BRAND_OPTIONS 제거
  • API에서 조회한 브랜드 데이터를 FilterOption 형식으로 변환
  • 카테고리 변경 시 선택된 브랜드 초기화

3. 기능 개선

• 카테고리 선택 시 해당 기기 타입의 브랜드만 표시

• 카테고리 미선택 시 전체 브랜드 표시

• 카테고리 변경 시 브랜드 선택 자동 초기화

• 기기명이 2줄, 3줄 넘어갈 경우 기기 상세보기 모달에서 스펙 섹션을 기기 사진과 같은 라인으로 맞췄습니다.

📸 스크린샷 or 실행 영상

📢 리뷰어에게

테스트 계획

• 페이지 로드 시 브랜드 필터 정상 작동 확인
• 카테고리 선택 시 해당 카테고리의 브랜드만 표시
• 카테고리 변경 시 브랜드 선택 초기화
• 반응형 레이아웃 유지

[github-actions]

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

[github-actions]

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

[Seony777]

확인했습니다, 고생하셨어요!