콘텐츠로 이동

[공통] 매장 찾기 · 매장 상세

Screen ID Screen Title Screen Path
CMN-STORE-01 매장 찾기 /stores
CMN-STORE-02 매장 상세 /stores/[id]

전체 스토어 공통 매장 찾기 및 매장 상세 화면 정책. 매장은 지속적으로 추가되는 것을 전제로 설계하며, 스토어별 표시 범위와 매장 상세 화면 구성이 다르다.


스토어 표시 범위
WORKSOUT 전체 스토어(브랜드)의 모든 매장 표시. 왼쪽 매장 정보(스토어 필터)로 필터링
YETI 등 개별 스토어 해당 스토어 매장만 표시
  • 페이지 진입 시 브라우저 위치 권한 요청 (웹 표준 Geolocation API)
  • 권한 허용: 현재 위치 기준 가까운 순 정렬 + 지도 현재 위치 표시
  • 권한 거부 / 미지원: 기본 순서로 목록 노출
┌────────────────────────────────────────┐
│ [주소 검색 Input Field] │
├───────────────────┬────────────────────┤
│ 매장 목록 (좌) │ 지도 (우) │
│ - 매장명 │ │
│ - 주소 │ ← 매장 핀 표시 │
│ - 거리 │ │
│ (위치 허용 시) │ │
└───────────────────┴────────────────────┘
상태 동작
검색어 입력 입력값과 일치하는 매장 목록 + 지도 표시
결과 없음 “가까운 매장이 없습니다.” 문구 표시
검색어 없음(초기·초기화) 위치 권한 기준 기본 목록 표시

항목 설명
매장명
주소
운영시간
전화번호

매장 상세 화면 레이아웃은 스토어별로 다르다. 각 스토어 문서 참조.

스토어 구성 방식
WORKSOUT 썸네일 이미지 → 매장 정보 → 디테일 이미지 나열
YETI 히어로 이미지(매장명 오버레이) → 매장 정보 본문 → 디테일 이미지 나열

매장은 지속적으로 추가되는 것을 전제로 한다.

  • 매장 상세 URL은 /stores/[id] 동적 라우팅 방식으로 처리
  • 매장 데이터는 CMS 또는 어드민에서 관리 (방식은 미결)
  • 신규 매장 추가 시 별도 개발 배포 없이 데이터 등록만으로 노출 가능해야 함
  • 재고 확인 / 방문 예약 / 픽업 서비스

항목 내용
지도 연동 방식 카카오맵 / 네이버맵 / 구글맵 확정 필요
위치 거부 시 기본 정렬 기준 운영팀 확정 필요
매장 데이터 관리 방식 Strapi CMS vs 별도 어드민 확정 필요
모바일 레이아웃 목록·지도 탭 전환 vs 스크롤 구조 확정 필요

버전 날짜 변경 내용
v1.0 2026-07-08 최초 작성 (YETI store-locator에서 공통 분리)