가방 부품 디지털 쇼룸

가방 제품 이미지 위에 부품 영역을 표시하고, 바이어가 특정 부위를 클릭하면 해당 부품 상세로 즉시 이동합니다.

• SVG 오버레이와 백분율 좌표계로 반응형 화면에서도 핫스팟 위치를 정확히 유지하는 구조를 설계합니다
• React Query로 부품-핫스팟 매핑 데이터를 캐싱해 화면 전환 시 재요청 없이 빠른 탐색을 제공합니다
• 호버 시 부품 라벨 툴팁을 표시하고 클릭 시 상세 페이지로 라우팅하는 인터랙션을 구현합니다

이미지 좌표 기반 핫스팟 탐색 UI를 자체 구현하여, 별도 제품 목록 없이도 실물 이미지만으로 카탈로그를 탐색할 수 있는 구조를 설계합니다.

바스켓, 핸들, 버클 등 부품 유형별로 필터링된 카드 그리드에서 제품을 탐색합니다. 유형 필터 chips와 카드 그리드를 연동하고, URL 쿼리 파라미터로 필터 상태를 동기화합니다.

• 유형별 필터 chips 선택 시 URL 쿼리 파라미터를 갱신해 필터 상태를 공유 가능한 링크로 제공합니다
• 무한 스크롤과 Intersection Observer로 300여 종 제품을 점진적으로 로딩하는 구조를 구현합니다
• 카드 그리드는 CSS Grid 기반 반응형 컬럼(2~4열)으로 화면 너비에 맞춰 자동 조정합니다

부품 유형·소재·색상 다중 필터를 조합 가능한 카탈로그 탐색 구조를 설계하여 대량 제품군에서도 빠른 탐색을 지원합니다.

제품 이미지 갤러리와 명칭, 소재, 사이즈 등 사양 정보를 확인할 수 있는 상세 화면을 제공합니다. 이미지 갤러리 컴포넌트와 사양 테이블을 조합하고, 관련 부품 추천 영역을 함께 구성합니다.

• 이미지 갤러리에 썸네일 스와이프와 확대 보기를 적용해 소재·마감 디테일을 확인할 수 있게 구현합니다
• 사양 정보를 키-값 테이블 컴포넌트로 재사용 가능하게 설계해 제품 300여 종에 일괄 적용합니다
• 같은 가방에 사용된 다른 부품을 상세 하단 추천 영역에 연결해 탐색 흐름을 이어갑니다

제품 상세 컴포넌트를 데이터 기반으로 완전히 재사용 가능하게 설계하여 300여 종 제품에도 동일한 코드로 대응합니다.

제품 상세 화면에서 문의 버튼을 클릭하면 담당자 이메일로 바로 연결되는 문의 폼을 제공합니다. 문의 폼 제출 시 서버 API를 통해 이메일 발송 큐에 적재하고, 제품 정보를 자동으로 포함합니다.

• 문의 폼 제출 시 어떤 제품에서 문의했는지 자동으로 포함해 담당자가 맥락 없이도 응대할 수 있게 구현합니다
• 이메일 발송은 서버 API가 담당하고 발송 실패 시 재시도 로직을 적용합니다
• 폼 유효성 검증(이메일 형식, 필수 입력)을 클라이언트·서버 양쪽에 적용합니다

제품 컨텍스트가 자동으로 포함되는 문의 폼을 구현하여 바이어와 담당자 간 커뮤니케이션 단계를 단순화합니다.