feat: 기기 검색 API 구현

[H-un1]

📌 관련 이슈번호

close : #128

🔍 구현한 내용

📝 변경 사항

1. 제품 이미지 표시 구현

구현 파일

• 컴포넌트: src/components/ProductCard/ProductCard.tsx
• 타입 활용: Product.image (이미지 URL)
• 사용처: DeviceSearchPage - Product Grid의 모든 제품 카드

주요 기능

• 이미지 렌더링: API로 받아온 imageUrl을 태그로 표시
• 정사각형 비율 유지: aspect-square + object-cover로 모든 이미지를 1:1 비율로 표시
• Fallback 처리: 이미지가 없을 경우 회색 플레이스홀더(bg-gray-200) 표시
• 반응형 대응: w-full h-full로 컨테이너 크기에 맞춰 자동 조정
• relative + absolute inset-0: 이미지를 부모 컨테이너에 정확히 맞춤
• object-cover: 이미지 비율을 유지하면서 컨테이너 채우기
• overflow-hidden: 이미지가 컨테이너 밖으로 넘치지 않도록 제한

==========================================

2. 브랜드명 중복 표시 문제 해결

구현 파일

• 페이지: src/pages/devices/DeviceSearchPage.tsx
• 함수: mapSearchDeviceToProduct() (Line 64-72)
• 타입: SearchDevice → Product 변환 로직

문제 상황

• Before: "Samsung Samsung Galaxy", "LG LG Gram" 등 브랜드명 중복 표시
• 원인: API의 device.name이 이미 브랜드명을 포함하는 경우가 있어, brandName + name 조합 시 중복 발생

해결 방법

이미 브랜드명 포함 시 그대로 사용
없으면 추가하여 표시

결과

• "Samsung Samsung Galaxy" → "Samsung Galaxy"
• "MacBook Pro 14" → "Apple MacBook Pro 14"
• 모든 제품명이 일관되고 자연스럽게 표시

==========================================

3. 검색 시 깜빡임 현상 해결

구현 파일

• 페이지: src/pages/devices/DeviceSearchPage.tsx
• 영향 범위: Product Grid 렌더링 로직 (Line 462-476)
• Hook: useSearchDevices (React Query)

문제 상황

• Before: 검색어/필터 변경 시마다 "로딩 중..." 메시지가 표시되며 화면 깜빡임
• 원인: isSearchLoading이 true일 때 기존 제품 목록을 숨기고 로딩 메시지만 표시

주요 개선 사항

• 초기 로딩: 데이터가 없을 때만 로딩 메시지 표시
• 백그라운드 로딩: 데이터가 있으면 기존 제품을 유지하면서 새 데이터를 백그라운드에서 로드
• 무한 스크롤: isFetchingNextPage 상태는 별도 처리하여 하단에 "더 불러오는 중..." 표시
• 에러 처리: 데이터가 있을 때는 에러가 나도 기존 데이터 유지

UX 개선 효과

• 필터/정렬 변경 시 화면이 깨끗하게 전환 (깜빡임 없음)
• 사용자가 이전 결과를 계속 볼 수 있어 맥락 유지

==========================================

🔗 API 연동

• 엔드포인트: GET /api/devices/search
• Hook: useSearchDevices (Infinite Query)
• 파라미터:
  • keyword: 검색어
  • deviceTypes: 선택된 카테고리
  • brandIds: 선택된 브랜드
  • sortType: 정렬 방식 (LATEST, NAME_ASC, PRICE_ASC, PRICE_DESC)
  • size: 페이지당 개수 (24개)

==========================================

PR 리뷰 반영 -> 로딩 상태 개선

• 초기 로딩 시 LoadingSpinner 컴포넌트 적용
• 무한 스크롤 추가 로딩은 텍스트 유지 ("더 불러오는 중...")

==========================================

추가 변경: 제품 상세 모달 스펙 정보 개선

API 데이터 연동:

• 충전방식: specifications.chargingPort API 데이터로 변경
  • 형식: USB_C → USB-C 변환
• 출시일: releaseDate API 데이터로 변경
  • 형식: 2025-09-19 → 2025년 9월 변환
• 화면 인치: specifications.screenInch 추가 표시
  • 스마트폰, 노트북, 태블릿에만 표시됨

UI 정리:

• 색상: API 미제공으로 행 삭제
• 라이프스타일 태그: 하드코딩된 #office #portability 삭제

조건부 렌더링:

• 데이터가 없는 스펙 행은 완전히 숨김 처리
  • 브랜드, 충전방식, 출시일, 화면 인치 → 데이터 있을 때만 표시
  • 헤드폰, 키보드 등은 충전방식/화면 인치 행이 자동으로 숨겨짐

==========================================

추가 발견사항: 제품 이미지 표시

• 제품 상세 모달에 API 이미지(imageUrl) 표시
• object-contain 사용하여 이미지 비율 유지
• 이미지가 있으면 배경 흰색, 없으면 회색으로 구분

==========================================

반응형 개선

• 페이지 루트 컨테이너에 max-w-[100vw] overflow-x-hidden 적용
• 1440~1920px 뷰포트에서 좌우 마진이 대칭적으로 작동

📸 스크린샷 or 실행 영상

📢 리뷰어에게

1. 이미지 표시

• API로 받은 이미지가 정상적으로 표시됨
• 이미지가 없는 제품은 회색 플레이스홀더 표시
• 이미지 비율이 정사각형으로 유지됨

2. 브랜드명

• 브랜드명이 중복되지 않고 표시됨
• 모든 제품명이 브랜드명을 포함함

3. 검색 UX

• 초기 진입 시 로딩 메시지 표시
• 검색어 입력 시 깜빡임 없이 부드럽게 전환
• 카테고리/필터 변경 시 기존 제품 유지 후 교체
• 무한 스크롤 동작 확인

4. 상세 모달

• 스마트폰 클릭 → 인치, 충전방식, 출시일, 이미지 표시 확인
• 노트북/태블릿 클릭 → 인치 표시 확인
• 헤드폰/키보드 클릭 → 충전방식/인치 행 숨겨짐 확인
• 이미지 없는 제품 → 회색 배경 표시 확인
• 반응형 동작 확인 (1440~1920px)

[github-actions]

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

[waldls]

확인했습니다.
현재 모달을 누르면 모달 내에는 기기 사진이 보이지 않는 것 같은데 맞을까요?

[waldls]

여기 <LoadingSpinner />로 연결하시면 될 거 같습니다.
아래 더 불러오는 중... 도 마찬가지입니다!

• 더 불러오는 중 의 경우 화면 맨 화면에 등장해서 사용자가 화면을 내릴 때 로딩스피너가 가운데 딱 뜨면 좀 어색할 것 같아서 이 부분만 반영해주시면 될 거 같아요!

[H-un1]

여기 <LoadingSpinner />로 연결하시면 될 거 같습니다. 아래 더 불러오는 중... 도 마찬가지입니다!

• 더 불러오는 중 의 경우 화면 맨 화면에 등장해서 사용자가 화면을 내릴 때 로딩스피너가 가운데 딱 뜨면 좀 어색할 것 같아서 이 부분만 반영해주시면 될 거 같아요!

463만 해결했습니다

[github-actions]

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

[H-un1]

확인했습니다. 현재 모달을 누르면 모달 내에는 기기 사진이 보이지 않는 것 같은데 맞을까요?

그거 확인하고 처리해놨습니다

[github-actions]

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

[Seony777]

확인했습니다. 고생 많으셨습니다!
일단은 구현이 되었으니 이대로 유지하고 기기 상세조회는 백엔드 사정 듣고 변경하든지 하면 될것 같습니다.