refactor: 기기 검색 페이지

[H-un1]

📌 관련 이슈번호

close : #176

🔍 구현한 내용

기기검색페이지, 노션 평가 기반으로 리펙토링 진행하였습니다.
기기 검색 페이지(DeviceSearchPage)의 코드 품질, 성능, 접근성을 개선하는 리팩토링 작업입니다.
UI 변경 없이 내부 로직만 개선했습니다.

---

주요 변경사항

1. 코드 품질 개선

• 중복된 useLayoutEffect 통합

  • 2개의 스크롤 제어 useLayoutEffect를 1개로 통합
  • 13줄 → 8줄로 코드 간소화

• isModalOpen 로직 명확화

  • 복잡한 조건식 단순화
  • 의도를 명확히 하는 주석 추가

2. 성능 최적화

• useCallback으로 콜백 함수 최적화

  • useScrollState.ts: handleScroll, handleScrollToTop에 useCallback 적용
  • DeviceSearchPage.tsx: handleCategoryClick, handleProductClick 함수 생성 및 최적화
  • 콜백 함수의 불필요한 재생성 방지

• ProductCard 리스트 렌더링 최적화

  • ProductCard 컴포넌트에 React.memo 적용
  • 제품 리스트 변환 로직을 useMemo로 캐싱
  • map 내부의 mapSearchDeviceToProduct 중복 호출 제거

3. 접근성 개선

• 검색 Input에 aria-label 추가

  • 스크린 리더가 검색창의 용도를 정확히 인식할 수 있도록 개선

• 필터 아이콘 버튼에 aria-label 추가

  • 아이콘 버튼에 aria-label="필터 옵션 표시" 추가

• 모달에 ESC 키로 닫기 및 ARIA 속성 추가

  • ESC 키로 모달 닫기 기능 추가 (새로운 기능)
  • 각 모달에 적절한 aria-label 또는 aria-labelledby 설정

---

변경된 파일

src/hooks/useScrollState.ts
src/components/ProductCard/ProductCard.tsx
src/components/DeviceSearch/DeviceDetailModal.tsx
src/pages/devices/DeviceSearchPage.tsx

---

기대 효과

• 성능: 불필요한 리렌더링 방지로 렌더링 성능 개선
• 사용자 경험: ESC 키로 모달 닫기 기능 추가
• 유지보수성: 코드 중복 제거 및 가독성 향상

---

• UI 변경 없음: 시각적으로는 리팩토링 전과 완전히 동일합니다.
• 기능 추가: ESC 키로 모달 닫기 기능이 새로 추가되었습니다.

📸 스크린샷 or 실행 영상

📢 리뷰어에게

• 검색 기능 정상 동작
• 카테고리 선택/해제 정상 동작
• 필터(가격대, 브랜드) 정상 동작
• 정렬 기능 정상 동작
• 제품 카드 클릭 시 모달 열림
• ESC 키로 모달 닫기 동작
• X 버튼 / 배경 클릭으로 모달 닫기 동작
• 무한 스크롤 정상 동작
• Top 버튼 정상 동작
• Chrome DevTools Accessibility 검사 통과

[github-actions]

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