생활 서비스 통합 카탈로그 플랫폼

지역·이사유형·평수를 조합해 검색할 수 있는 세그먼트 검색바와 필터 칩, 반응형 카드 그리드로 다양한 이사 서비스를 한눈에 탐색할 수 있는 카탈로그 메인 화면을 구현합니다.

• sticky 포지셔닝과 검색바 세그먼트 3분할(지역/이사유형/평수) 컴포넌트 구현
• 필터 칩 가로 스크롤 컨테이너에 스냅 스크롤(scroll-snap) 적용
• CSS Grid 기반 2~4열 반응형 카드 그리드와 카드 hover scale 인터랙션 구현

검색 세그먼트와 필터 칩 상태를 URL 쿼리에 동기화해 특정 조건의 검색 결과를 그대로 공유할 수 있는 구조를 구현합니다.

카드 클릭 시 페이지 이동 없이 서비스 상세 정보(가격 범위·소요 절차·후기 요약)를 노출하는 퀵뷰 상세 화면을 제공합니다.

• 포커스 트랩과 ESC 키 닫기를 지원하는 접근성 고려 drawer 컴포넌트 구현
• drawer 진입 시 배경 스크롤 잠금과 슬라이드인 트랜지션 적용
• 상세 콘텐츠를 카드 데이터와 분리된 상세 스키마로 관리해 재사용성 확보

페이지 이동 없는 퀵뷰 패턴으로 검색 컨텍스트를 유지한 채 상세 정보를 확인할 수 있는 구조를 구현합니다.

이사 서비스와 동일한 카드 그리드 구조 위에 인터넷가입·렌탈·입주청소 등 생활 서비스 카테고리를 얹어 향후 서비스 확장을 시각적으로 보여줍니다.

• 카드 컴포넌트를 서비스 카테고리 비종속 스키마로 설계해 이사/생활 서비스 공통 렌더링
• 탭 전환 시 필터 칩 목록과 카드 데이터셋을 함께 교체하는 상태 관리 구현
• 카테고리별 아이콘 매핑 테이블을 분리해 신규 카테고리 추가 시 데이터만 확장

카드·필터 컴포넌트를 카테고리 비종속으로 설계해 신규 생활 서비스 카테고리를 코드 변경 없이 데이터 추가만으로 확장할 수 있는 구조를 구현합니다.

서비스 유형·평점 기준으로 필터링할 수 있는 후기 큐레이션 화면으로 방문 고객의 의사결정을 지원합니다. 후기 카드에 평점·이사유형·작성일을 노출하고, 정렬(최신순/평점순)과 이사유형 필터를 제공합니다.

• 평점순/최신순 정렬 토글과 이사유형 필터를 결합한 후기 리스트 컴포넌트 구현
• 후기 카드 그리드에 무한 스크롤(Intersection Observer) 적용
• 평점 분포를 시각화하는 간단한 바 차트 컴포넌트 구현

정렬·필터 조합과 평점 분포 시각화를 결합해 검색 카탈로그와 동일한 상호작용 패턴으로 후기 탐색 경험을 통일합니다.