# 퍼피스팟 (PuppySpot) 전체 화면 설계서 v2.0

**작성**: 기획자 에이전트 | **기준**: Gate 3 IA 확정본 | **날짜**: 2026-06-15

---

## 전역 공통 정의

| 항목 | 정의 |
|------|------|
| GNB | 없음 (앱 바 없음, 각 화면별 상단바 정의) |
| 하단 탭바 | 홈 / 발바닥 / 마이페이지 (3탭) — 로그인 불필요, 발바닥 탭 접근 시 로그인 유도. 탭 전환 시 콘텐츠는 좌우 방향(홈0·발바닥1·마이페이지2 순서 기준)으로 슬라이드 인, 탭바는 고정 |
| 탭바 화면 하단 여백 | 탭바가 있는 화면(홈·발바닥·마이페이지)의 스크롤 영역은 하단에 탭바 높이만큼 여백을 둬 마지막 항목이 가리지 않도록 함 |
| 토스트 | 최하단에서 탭바 위로 노출, 3초 자동 소멸. 노출/소멸이 현재 화면 스크롤 위치를 바꾸지 않음(재렌더 시 스크롤 유지) |
| 로딩 인디케이터 | 전체화면 Skeleton UI (이미지 영역: shimmer, 텍스트 영역: shimmer bar) |
| 네트워크 오류 공통 문구 | "연결이 불안정해요. 잠시 후 다시 시도해주세요." + [BTN-Secondary] 재시도 |
| 마스코트 캐릭터 | 뽀삐 (기본형 / sad형 2종) |

---

### [SC-01] 홈 — 리스트 탭

**진입 경로**: 앱 최초 실행 / 하단 탭바 [홈] 탭 탭 / SC-08~13 뒤로가기 / SC-04 필터 초기화 후
**진출 경로**: SC-02 (지도 탭 세그먼트 탭 탭), SC-03 (필터 버튼 탭), SC-08 (카드 탭), SC-06 (위치 아이콘 탭)
**권한**: 비로그인

#### 레이아웃 구성

| 순서 | 컴포넌트 | 역할 | UI 패턴 |
|------|---------|------|---------|
| 1 | 상단 검색바 | 키워드 검색 입력 영역, 상단 고정(Sticky) | [INPUT-Search] 전너비, 좌측 위치 아이콘 + 우측 필터 아이콘 |
| 2 | 위치 칩 | 현재 설정된 지역 표시 | [CHIP-Location] — "내 위치" 또는 선택 지역명 + 드롭다운 화살표 |
| 3 | 뷰 전환 세그먼트 탭 | 리스트/지도 탭 전환 | [TAB-Segment] — 리스트 (활성) / 지도, 우측 정렬 |
| 4 | 정렬 드롭다운 | 카드 정렬 기준 변경 | [SELECT-Sort] — "거리순", "발바닥 많은 순", "신규순" |
| 5 | 카드 리스트 | 카페 카드 전체 노출 (1열 전체너비) | [CARD-Cafe] × N — 스크롤 영역 |
| 6 | 하단 탭바 | 홈 / 발바닥 / 사장님 등록 | [TABBAR-Bottom] |

**[CARD-Cafe] 상세 구성**:
- 썸네일: 4:3 비율 전너비 이미지
- 카페명: 타이틀 위계 텍스트
- 위치 + 거리: 보조 텍스트 (예: "서울 마포구 · 2.3km")
- Pill 태그 Row: 핵심 인프라 최대 4개 (실내/실외/수영장/견종분리/셀프목욕 중 해당 항목)
- 발바닥 카운트: 우측 하단 아이콘 + 숫자
- 입장 가능 체중 요약 칩: (예: "10kg 이하")

#### 기능 정의

| 기능 | 동작 | 조건 |
|------|------|------|
| 검색바 탭 | 키워드 입력 모드 전환, 소프트 키보드 활성 | 항상 |
| 필터 아이콘 탭 | SC-03 필터 바텀시트 오픈 | 항상 |
| 위치 칩 탭 | 위치 권한 확인 후 SC-06 또는 SC-07 오픈 | 항상 |
| 지도 탭 탭 | SC-02 전환 (세그먼트 탭) | 항상 |
| 카드 탭 | SC-08 카페 상세 진입 | 항상 |
| 정렬 변경 | 선택 기준으로 카드 리스트 재정렬 | 항상 |
| 스크롤 다운 | 무한 스크롤 (20개 단위 페이지네이션) | 데이터 20개 초과 시 |
| 검색어 입력 + 엔터 | SC-04 검색결과 화면으로 전환 | 검색어 1자 이상 |
| 필터 적용 상태 표시 | 필터 아이콘에 뱃지(숫자) 표시 | 필터 적용된 조건이 1개 이상 |

#### 에러/상태 매트릭스

| 상황 | 처리 방식 | 노출 문구 |
|------|---------|---------|
| 로딩 중 | Skeleton UI (카드 3개 shimmer) | — |
| 카드 데이터 없음 | SC-05 Empty State로 전환 | — |
| 네트워크 오류 | 전체 카드 영역에 에러 배너 + 재시도 버튼 | "연결이 불안정해요. 잠시 후 다시 시도해주세요." |
| 이미지 로드 실패 | 기본 이미지 Placeholder 표시 | — |
| 위치 정보 없음 | 거리 표시 영역 "—" 처리 | — |

#### 인터랙션 정의
- 앱 진입 → 위치 권한 확인 → 권한 있으면 내 위치 기준 카드 로드 → 없으면 위치 칩 "지역 설정" 표시 후 SC-07 드롭다운 유도
- 스크롤 최하단 도달 → 로딩 인디케이터 → 다음 20개 카드 append
- 필터 적용 후 홈 복귀 시 → 필터 아이콘 뱃지 유지 + 적용된 조건 기준 카드 목록 유지

#### 디자이너 전달 노트
- 검색바: 스티키, 스크롤 시 상단 고정 유지
- CARD-Cafe: 1열 전너비. 썸네일 위 → 텍스트/태그 아래 수직 구조
- Pill 태그: 아이콘 + 레이블 조합, 최대 4개 노출 후 "+N" 처리
- 세그먼트 탭: 카드 리스트 상단 우측, 검색바 하단에 위치

---

### [SC-02] 홈 — 지도 탭

**진입 경로**: SC-01에서 세그먼트 탭 [지도] 탭 탭
**진출 경로**: SC-01 (리스트 탭 탭), SC-03 (필터 버튼), SC-08 (마커 탭 → 카드 탭), SC-06 (위치 아이콘 탭)
**권한**: 비로그인

#### 레이아웃 구성

| 순서 | 컴포넌트 | 역할 | UI 패턴 |
|------|---------|------|---------|
| 1 | 상단 검색바 | 키워드 검색, 지도 위 상단 고정 | [INPUT-Search] — 지도 위 플로팅 레이어 |
| 2 | 뷰 전환 세그먼트 탭 | 리스트/지도 전환 | [TAB-Segment] — 지도 활성 |
| 3 | 지도 뷰 | 전체 화면 지도 | [MAP-Full] |
| 4 | 카페 마커 | 지도 위 카페 위치 표시 | [MARKER-Cafe] — 기본/선택 2가지 상태 |
| 5 | 내 위치 버튼 | 현재 위치로 지도 이동 | [BTN-FAB] 우하단 고정 |
| 6 | 카페 미니 카드 (선택 시) | 마커 선택 시 하단 카드 노출 | [CARD-Mini] — 바텀에서 슬라이드업 |
| 7 | 하단 탭바 | — | [TABBAR-Bottom] |

#### 기능 정의

| 기능 | 동작 | 조건 |
|------|------|------|
| 마커 탭 | 해당 카페 미니 카드 하단 슬라이드업 | 마커 존재 시 |
| 마커 외 빈 영역 탭 | 미니 카드 닫기 | 미니 카드 노출 중 |
| "이 지역 검색" 버튼 | 현재 지도 뷰포트 기준 카페 재조회 | 지도 이동 후 |
| 내 위치 버튼 탭 | 현재 위치로 지도 센터 이동 | 위치 권한 있을 때 |
| 미니 카드 "상세 보기" 탭 | SC-08 진입 | 미니 카드 노출 중 |

#### 에러/상태 매트릭스

| 상황 | 처리 방식 | 노출 문구 |
|------|---------|---------|
| 마커 없음 | 지도 유지 + 하단 토스트 | "이 지역에 등록된 카페가 없어요" |
| 네트워크 오류 | 지도 로드 실패 배너 | "지도를 불러올 수 없어요." |

---

### [SC-03] 필터 바텀시트

**진입 경로**: SC-01/SC-02/SC-04 검색바 우측 필터 아이콘 탭
**진출 경로**: [BTN-Primary] "적용" → SC-04 / X 닫기 또는 딤드 영역 탭 → 원래 화면 복귀
**권한**: 비로그인

#### 레이아웃 구성

| 순서 | 컴포넌트 | 역할 | UI 패턴 |
|------|---------|------|---------|
| 1 | 딤드 오버레이 | 배경 클릭 시 닫기 | [OVERLAY-Dim] |
| 2 | 드래그 핸들 | 바텀시트 핸들 | [HANDLE-Drag] 상단 중앙 |
| 3 | 헤더 | "필터" 타이틀 + X 닫기 + "초기화" | [HEADER-Sheet] |
| 4 | 필터 카테고리 탭 | 4탭 (입장조건/공간시설/운영/가격) | [TAB-Filter] 수평 스크롤 가능 |
| 5 | 필터 옵션 영역 | 선택된 탭의 필터 옵션 | [FILTER-Content] 스크롤 |
| 6 | 하단 적용 버튼 | 필터 적용 + 화면 전환 | [BTN-Primary] "N개 결과 보기" 전너비 |

**탭별 필터 옵션**:
- [탭1] 입장조건: 체중(6단계 칩)/예방접종(체크박스)/중성화(3지선다 칩)/나이/품종
- [탭2] 공간시설: 실내외/견종분리/바닥재질/수용두수/수영장/셀프목욕
- [탭3] 운영: 예약방식/대관/주차
- [탭4] 가격: 인입장료(슬라이더)/견입장료(슬라이더)/음료의무/강아지메뉴유무

#### 기능 정의

| 기능 | 동작 | 조건 |
|------|------|------|
| 탭 전환 | 해당 탭 필터 옵션 영역 전환 | 항상 |
| 옵션 선택 | 선택 상태 강조 표시, 버튼 카운트 실시간 업데이트 | 항상 |
| 초기화 탭 | 전체 선택 해제 | 필터 있을 때 활성 |
| "N개 결과 보기" 탭 | 필터 저장 + SC-04 전환 | 항상 |
| 결과 0개 | 버튼 텍스트 "결과 없음 — 조건을 변경해보세요" | 결과 0개 시 |

---

### [SC-04] 검색결과 (필터 적용 후)

**진입 경로**: SC-03 필터 "N개 결과 보기" 탭 / SC-01 검색바 키워드 입력 + 엔터
**진출 경로**: SC-08 (카드 탭), SC-03 (필터 재조정), SC-01 (X 닫기), SC-05 (결과 없을 때)
**권한**: 비로그인

#### 레이아웃 구성

| 순서 | 컴포넌트 | 역할 | UI 패턴 |
|------|---------|------|---------|
| 1 | 상단 검색바 (키워드 채워진 상태) | 검색어 표시 + 수정 가능 | [INPUT-Search] — 뒤로가기 아이콘 추가 |
| 2 | 적용 필터 요약 칩 Row | 적용된 필터 항목 표시 | [CHIP-Filter] 수평 스크롤, 각 칩 × 아이콘으로 개별 제거 |
| 3 | 결과 수 + 정렬 | "N개 카페" 텍스트 + 정렬 드롭다운 | [TEXT-Count] + [SELECT-Sort] |
| 4 | 카드 리스트 | 필터 적용 결과 카드 | [CARD-Cafe] × N |
| 5 | 하단 탭바 | — | [TABBAR-Bottom] |

---

### [SC-05] Empty State

**진입 경로**: SC-01/SC-04 결과가 0개일 때 자동 렌더링
**진출 경로**: [BTN-Secondary] "필터 변경" → SC-03, [BTN-Text] "전체 초기화" → SC-01
**권한**: 비로그인

#### 레이아웃 구성

| 순서 | 컴포넌트 | 역할 | UI 패턴 |
|------|---------|------|---------|
| 1 | 상단 검색바 | 이전 상태 유지 | [INPUT-Search] |
| 2 | 필터 요약 칩 Row | 적용 필터 표시 | [CHIP-Filter] |
| 3 | 뽀삐 sad 일러스트 | Empty State 시각 피드백 | [ILLUST-Character] — 뽀삐 sad형 중앙 배치 |
| 4 | Empty 메시지 | "조건에 맞는 카페가 없어요" | [TEXT-Empty] |
| 5 | 서브텍스트 | "필터를 조정하면 더 많은 카페를 찾을 수 있어요" | [TEXT-Sub] |
| 6 | 필터 변경 버튼 | SC-03 바텀시트 재오픈 | [BTN-Primary] "필터 변경하기" |
| 7 | 전체 초기화 텍스트 버튼 | 모든 조건 초기화 후 SC-01 | [BTN-Text] "조건 전체 초기화" |
| 8 | 하단 탭바 | — | [TABBAR-Bottom] |

---

### [SC-06] 위치권한 바텀시트

**진입 경로**: SC-01/SC-02 위치 칩/아이콘 탭 (위치 권한 미부여 상태) / 앱 최초 실행 시 자동 노출
**진출 경로**: 허용 → OS 권한 요청 → 허용 시 SC-01 갱신 / 거부 → SC-07
**권한**: 비로그인

#### 레이아웃 구성

| 순서 | 컴포넌트 | 역할 | UI 패턴 |
|------|---------|------|---------|
| 1 | 딤드 오버레이 | 배경 | [OVERLAY-Dim] |
| 2 | 드래그 핸들 | — | [HANDLE-Drag] |
| 3 | 위치 아이콘 일러스트 | 시각 피드백 | [ILLUST-Icon] |
| 4 | 권한 요청 타이틀 | "내 위치 주변 카페를 찾아볼까요?" | [TEXT-Title] |
| 5 | 설명 서브텍스트 | "위치 정보를 사용하면 가까운 카페를 먼저 보여드려요" | [TEXT-Sub] |
| 6 | 허용 버튼 | OS 권한 요청 트리거 | [BTN-Primary] "내 위치 사용하기" 전너비 |
| 7 | 허용 안 함 버튼 | SC-07 지역 선택으로 이동 | [BTN-Secondary] "직접 지역 선택하기" 전너비 |

---

### [SC-07] 지역 선택 드롭다운

**진입 경로**: SC-06 "직접 지역 선택" / SC-01 위치 칩 탭 (권한 없는 상태)
**진출 경로**: 지역 선택 완료 → 바텀시트 닫기 + SC-01 해당 지역 기준 카드 갱신
**권한**: 비로그인

#### 레이아웃 구성

| 순서 | 컴포넌트 | 역할 | UI 패턴 |
|------|---------|------|---------|
| 1 | 딤드 오버레이 | 배경 닫기 | [OVERLAY-Dim] |
| 2 | 드래그 핸들 | — | [HANDLE-Drag] |
| 3 | 헤더 | "지역 선택" + X 닫기 | [HEADER-Sheet] |
| 4 | 시/도 선택 컬럼 | 좌측 시/도 리스트 | [LIST-Region] 스크롤 |
| 5 | 구/군 선택 컬럼 | 우측 구/군 리스트 | [LIST-District] 스크롤 |

**2컬럼 레이아웃**: 좌측(시/도) 선택 → 우측(구/군) 리스트 업데이트

---

### [SC-08] 카페 상세 — 기본정보/입장조건 앵커

**진입 경로**: SC-01/SC-02/SC-04 카드 탭 (카페 상세 최초 진입, 기본정보 앵커 기본 활성)
**진출 경로**: 뒤로가기 → 이전 화면 / 앵커 칩 클릭 → 동일 화면 내 해당 섹션으로 스크롤 이동 (무한스크롤 단일 화면) / 발바닥 FAB → SC-14
**권한**: 비로그인

#### 레이아웃 구성

| 순서 | 컴포넌트 | 역할 | UI 패턴 |
|------|---------|------|---------|
| 1 | 히어로 이미지 영역 | 카페 대표 이미지 슬라이더 | [CAROUSEL-Image] 4:3, 인디케이터 포함 |
| 2 | 상단 플로팅 바 | 뒤로가기 + 공유 + 발바닥 아이콘 | [APPBAR-Transparent] 이미지 위 플로팅 |
| 3 | 카페 기본정보 섹션 | 카페명 / 주소 / 전화 / 운영시간 / SNS | [SECTION-Info] |
| 4 | 앵커 칩 Row (Sticky) | 섹션 간 빠른 이동 | [ANCHOR-Chips] — 입장조건·공간시설·운영·가격·메뉴·안내 |
| 5 | 입장조건 섹션 | 체중/예방접종/중성화/나이/품종 | [SECTION-Admission] |
| 6 | 발바닥 찍기 FAB | 좋아요(발바닥) | [BTN-FAB] 우하단 고정 |

**입장조건 섹션 상세**:
- 체중: 최대 허용 체중 (예: "10kg 이하", 무제한 시 카드 칩은 "무게제한 없음") [TAG-Info]
- 예방접종: 필수 항목 체크 형태 (종합백신 ✓ / 광견병 ✓)
- 중성화: 필수/불필요/무관
- 나이: 최소 나이 제한
- 품종: 입장 불가 품종 또는 가능 품종

#### 기능 정의

| 기능 | 동작 | 조건 |
|------|------|------|
| 대표 이미지 슬라이더 | 좌우 스와이프(터치)/드래그(포인터)/좌우 탭존으로 이미지 전환, 하단 인디케이터 동기화 | 이미지 다중 등록 시 (데모: 동일 디폴트 이미지 3장) |
| 앵커 칩 탭 | 해당 섹션으로 부드러운 스크롤 이동 | 항상 |
| 스크롤 중 앵커 자동 업데이트 | 뷰포트 섹션에 해당하는 앵커 칩 활성 전환 | 스크롤 중 |
| 전화번호 탭 | OS 전화 앱 연결 | 전화번호 등록 시 |
| 공유 버튼 탭 | 현재 URL 클립보드 복사 + 토스트 "URL이 복사되었습니다" | 항상 (데모) |
| 발바닥 FAB 탭 (미저장) | SC-14 오버레이 노출 (세션 1회) → 이후 즉시 저장 토글 | 세션 1회 미노출 시 |
| 발바닥 FAB 탭 (이미 저장) | 오버레이 없이 즉시 발바닥 해제, 라벨 "발바닥 지우기"/아이콘 채움(흰색) | 저장 상태 |
| 발바닥 버튼 탭 | 발바닥 저장 (비로그인 → SC-16), 저장 시 토스트 "발바닥을 찍었어요!" / 해제 시 Undo 토스트 "발바닥이 지워졌어요" | 항상 |

---

### [SC-09] SC-08 내 [공간시설] 섹션 (별도 화면 없음, SC-08 무한스크롤 내 구성)

**진입 경로**: SC-08 앵커 칩 [공간시설] 탭 / 스크롤로 해당 섹션 도달
**권한**: 비로그인

**공간시설 섹션**: 실내외/견종분리/바닥재질/수용두수/수영장/셀프목욕 — 각 항목 [TAG-Info]

---

### [SC-10] SC-08 내 [운영] 섹션 (별도 화면 없음, SC-08 무한스크롤 내 구성)

**진입 경로**: SC-08 앵커 칩 [운영] 탭 / 스크롤로 해당 섹션 도달
**권한**: 비로그인

**운영 섹션**: 예약방식 [TAG-Info] / 운영시간(요일별 표) / 대관(가능+문의방법) / 주차(있음/없음+대수)

---

### [SC-11] SC-08 내 [가격] 섹션 (별도 화면 없음, SC-08 무한스크롤 내 구성)

**진입 경로**: SC-08 앵커 칩 [가격] 탭 / 스크롤로 해당 섹션 도달
**권한**: 비로그인

**가격 섹션**: 인입장료 [TEXT-Price] / 견입장료 / 음료의무+최저가 [TAG-Info] / 강아지메뉴종류+가격대

---

### [SC-12] SC-08 내 [메뉴] 섹션 (별도 화면 없음, SC-08 무한스크롤 내 구성)

**진입 경로**: SC-08 앵커 칩 [메뉴] 탭 / SC-11 "메뉴 전체 보기" 탭 / 스크롤
**권한**: 비로그인

**메뉴 섹션**: [CARD-Menu] 2열 그리드 — 이미지(1:1)/메뉴명/가격/설명/알레르기[TAG-Warning]

---

### [SC-13] SC-08 내 [안내/규정] 섹션 (별도 화면 없음, SC-08 무한스크롤 내 구성)

**진입 경로**: SC-08 앵커 칩 [안내] 탭 / 스크롤 최하단
**권한**: 비로그인

**안내 섹션**: 기저귀 착용/간식 반입/발정기 제한 등 자유텍스트 + 정보 오류 신고 [BTN-Text]

---

### [SC-14] 발바닥 찍기 Overlay

**진입 경로**: SC-08~13 발바닥 FAB 탭 (세션 1회 미노출 상태)
**진출 경로**: 발바닥 선택 또는 X 탭 → 오버레이 닫기 + 카페 상세 복귀
**권한**: 비로그인

#### 레이아웃 구성

| 순서 | 컴포넌트 | 역할 | UI 패턴 |
|------|---------|------|---------|
| 1 | 딤드 오버레이 | 배경 | [OVERLAY-Dim] |
| 2 | 오버레이 카드 | 중앙 모달 | [MODAL-Center] |
| 3 | 발바닥 아이콘 (대형) | 메인 시각 요소 | [ILLUST-Paw] — 스탬프 찍는 애니메이션 |
| 4 | 타이틀 | "이 카페가 마음에 드셨나요?" | [TEXT-Title] |
| 5 | 서브텍스트 | "발바닥을 찍으면 내 발바닥 목록에 저장돼요" | [TEXT-Sub] |
| 6 | 발바닥 찍기 버튼 | 발바닥 목록에 저장 | [BTN-Primary] "발바닥 찍기" |
| 7 | 닫기 버튼 | 오버레이 닫기 | [BTN-Text] "다음에 할게요" |

---

### [SC-15] 발바닥 목록

**진입 경로**: 하단 탭바 [발바닥] 탭 탭 (로그인 상태) / SC-16 로그인 완료 후
**진출 경로**: 카드 탭 → SC-08 (SC-08에서 뒤로가기 시 발바닥 목록으로 복귀) / 스와이프 발바닥 지우기 → Undo 토스트
**권한**: 로그인

#### 레이아웃 구성

| 순서 | 컴포넌트 | 역할 | UI 패턴 |
|------|---------|------|---------|
| 1 | 상단 앱바 | "발바닥 목록" 타이틀 | [APPBAR-Default] |
| 2 | 발바닥 카드 리스트 | 저장한 카페 카드 | [CARD-Cafe] × N (발바닥 아이콘 채움 상태) |
| 3 | Empty State (발바닥 없음) | 뽀삐 기본형 + "아직 발바닥 찍은 카페가 없어요" | [EMPTY-Bookmark] |
| 4 | 하단 탭바 | — | [TABBAR-Bottom] (발바닥 활성) |

**스와이프**: 좌측 스와이프 → 우측에 "발바닥 지우기" 패널이 밀려 나오며(카드는 잘리지 않고 폭이 줄어듦) 애니메이션으로 전개 [BTN-Destructive]. 탭/우측 스와이프 시 닫힘. 지우기 실행 → Undo 토스트 "발바닥이 지워졌어요"

---

### [SC-16] 소셜 로그인 바텀시트

**진입 경로**: 하단 탭바 [발바닥] 탭 탭 (비로그인) / SC-08 발바닥 버튼 탭 (비로그인)
**진출 경로**: 로그인 성공 → SC-15 또는 이전 화면 / X → 이전 화면
**권한**: 비로그인

#### 레이아웃 구성

| 순서 | 컴포넌트 | 역할 | UI 패턴 |
|------|---------|------|---------|
| 1 | 딤드 오버레이 | 배경 | [OVERLAY-Dim] |
| 2 | 드래그 핸들 | — | [HANDLE-Drag] |
| 3 | 헤더 | X 닫기 | [HEADER-Sheet] |
| 4 | 타이틀 | "로그인하면 발바닥 목록을 저장할 수 있어요" | [TEXT-Title] |
| 5 | 서브 | "소셜 계정으로 3초만에 시작해요" | [TEXT-Sub] |
| 6 | 카카오 로그인 버튼 | 카카오 OAuth | [BTN-Social-Kakao] 전너비 |
| 7 | 구글 로그인 버튼 | 구글 OAuth | [BTN-Social-Google] 전너비 |
| 8 | 애플 로그인 버튼 (iOS) | 애플 Sign In | [BTN-Social-Apple] 전너비 (iOS 전용) |

**데모 동작**: 소셜 버튼 탭 시 실제 OAuth 없이 로그인 처리. 대기 중이던 액션(발바닥 저장 등)이 있으면 해당 결과 토스트를 우선 노출하고, 없으면 토스트 "데모 서비스입니다." 노출.

---

### [SC-17] 사장님 등록 1/4 — 기본정보

**진입 경로**: 하단 탭바 [사장님 등록] 탭 탭
**진출 경로**: [BTN-Primary] "다음" → SC-18 / X → 홈 (이탈 확인 모달)
**권한**: 사장님 (비로그인 시 SC-16 로그인 유도)

#### 레이아웃 구성

| 순서 | 컴포넌트 | 역할 | UI 패턴 |
|------|---------|------|---------|
| 1 | 상단 앱바 | X 닫기 | [APPBAR-Default] |
| 2 | 스텝 인디케이터 | 1/4 진행 상태 | [STEPPER] 4단계 수평 바 |
| 3 | 섹션 타이틀 | "기본 정보를 입력해주세요" | [TEXT-Section-Title] |
| 4 | 대표 이미지 업로더 | 카페 대표 사진 최대 5장 | [INPUT-ImageUpload] |
| 5 | 카페명 입력 (필수) | — | [INPUT-Text] |
| 6 | 주소 입력 (필수) | 주소 검색 연동 | [INPUT-Address] + [BTN-Secondary] "주소 검색" |
| 7 | 전화번호 입력 (선택) | — | [INPUT-Tel] |
| 8 | 운영시간 입력 (선택) | 요일별 시간 설정 | [INPUT-Hours] 요일 토글 + 시간 범위 |
| 9 | SNS/예약 링크 (선택) | — | [INPUT-URL] × 2 |
| 10 | 다음 버튼 | SC-18 이동 | [BTN-Primary] "다음" 전너비 하단 고정 |

**필수 항목**: 카페명, 주소 | **선택**: 이미지, 전화, 운영시간, SNS

---

### [SC-18] 사장님 등록 2/4 — 입장조건

**진입 경로**: SC-17 "다음" 탭
**진출 경로**: "이전" → SC-17 / "다음" → SC-19
**권한**: 사장님

#### 레이아웃 구성

| 순서 | 컴포넌트 | 역할 | UI 패턴 |
|------|---------|------|---------|
| 1 | 스텝 인디케이터 | 2/4 | [STEPPER] |
| 2 | 섹션 타이틀 | "입장 조건을 설정해주세요" | [TEXT-Section-Title] |
| 3 | 체중 제한 설정 | 최대 허용 체중 6단계 칩 | [INPUT-ChipSingle] |
| 4 | 예방접종 필수 설정 | 종합백신 / 광견병 각 토글 | [INPUT-Toggle] × 2 |
| 5 | 중성화 설정 | 필수 / 불필요 / 무관 3지선다 | [INPUT-RadioGroup] |
| 6 | 나이 제한 설정 | 최소 월령 숫자 입력 | [INPUT-Number] 단위: 개월 |
| 7 | 품종 제한 설정 | 입장 불가 품종 멀티셀렉트 | [INPUT-MultiSelect] 검색 포함 |
| 8 | 이전/다음 버튼 | — | [BTN-Secondary] "이전" + [BTN-Primary] "다음" 하단 고정 |

---

### [SC-19] 사장님 등록 3/4 — 공간/운영

**진입 경로**: SC-18 "다음" 탭
**진출 경로**: "이전" → SC-18 / "다음" → SC-20
**권한**: 사장님

#### 레이아웃 구성

| 순서 | 컴포넌트 | 역할 | UI 패턴 |
|------|---------|------|---------|
| 1 | 스텝 인디케이터 | 3/4 | [STEPPER] |
| 2 | [공간 시설] 서브 헤더 | — | [TEXT-Sub-Header] |
| 3 | 실내외 여부 | 실내/실외/실내+실외 3지선다 | [INPUT-RadioGroup] |
| 4 | 견종분리 | 소형/대형/분리없음 | [INPUT-RadioGroup] |
| 5 | 바닥재질 | 멀티셀렉트 칩 | [INPUT-ChipMulti] |
| 6 | 수용두수 | 숫자 입력 | [INPUT-Number] 단위: 마리 |
| 7 | 수영장 여부 | 토글 | [INPUT-Toggle] |
| 8 | 셀프목욕 여부 | 토글 | [INPUT-Toggle] |
| 9 | [운영] 서브 헤더 | — | [TEXT-Sub-Header] |
| 10 | 예약방식 | 예약필수/현장가능/혼합 | [INPUT-RadioGroup] |
| 11 | 대관 가능 여부 | 토글 | [INPUT-Toggle] |
| 12 | 대관 상세 (대관 ON 시) | 문의 방법 텍스트 (조건부 노출) | [INPUT-Textarea] |
| 13 | 주차 여부 | 토글 | [INPUT-Toggle] |
| 14 | 주차 상세 (주차 ON 시) | 주차 대수 또는 안내 (조건부 노출) | [INPUT-Text] |
| 15 | 이전/다음 버튼 | — | [BTN-Secondary] + [BTN-Primary] 하단 고정 |

---

### [SC-20] 사장님 등록 4/4 — 메뉴 등록

**진입 경로**: SC-19 "다음" 탭
**진출 경로**: [BTN-Primary] "등록 완료" → SC-21 / "이전" → SC-19
**권한**: 사장님

#### 레이아웃 구성

| 순서 | 컴포넌트 | 역할 | UI 패턴 |
|------|---------|------|---------|
| 1 | 스텝 인디케이터 | 4/4 | [STEPPER] |
| 2 | 섹션 타이틀 | "강아지 메뉴를 등록해주세요 (선택)" | [TEXT-Section-Title] |
| 3 | 등록된 메뉴 카드 리스트 | 이미지+메뉴명+가격 + 수정/삭제 아이콘 | [CARD-Menu-Registered] × N |
| 4 | 메뉴 추가 버튼 | 메뉴 추가 모달 오픈 | [BTN-Secondary] "+ 메뉴 추가" |
| 5 | 가격 정보 섹션 | 인입장료/견입장료/음료의무/최저가 | [SECTION-Price-Input] |
| 6 | 유의사항 입력 (선택) | 자유 텍스트 | [INPUT-Textarea] 최대 500자 |
| 7 | 이전/등록 완료 버튼 | — | [BTN-Secondary] "이전" + [BTN-Primary] "등록 완료" 하단 고정 |

---

### [SC-21] 등록 완료

**진입 경로**: SC-20 "등록 완료" API 성공 응답 후 자동 전환
**진출 경로**: "내 카페 확인하기" → SC-08 / "홈으로" → SC-01
**권한**: 사장님

#### 레이아웃 구성

| 순서 | 컴포넌트 | 역할 | UI 패턴 |
|------|---------|------|---------|
| 1 | 성공 일러스트 | 뽀삐 기본형 + 발바닥 스탬프 축하 | [ILLUST-Success] |
| 2 | 완료 타이틀 | "카페 등록이 완료됐어요!" | [TEXT-Title] |
| 3 | 서브 메시지 | "검토 후 24시간 이내에 카페가 게시됩니다." | [TEXT-Sub] |
| 4 | 내 카페 확인하기 버튼 | 등록된 카페 상세 SC-08 진입 | [BTN-Primary] 전너비 |
| 5 | 홈으로 버튼 | SC-01 이동 | [BTN-Secondary] 전너비 |

**주의**: 이 화면 진입 시 뒤로가기 스택에서 SC-17~20 제거 (등록 재진입 방지)

---

## IA 자가 검증 결과

| 체크 항목 | 결과 |
|----------|------|
| 동선 완결성: 모든 화면 진입/진출 정의 | ✅ SC-01~30 전 화면 |
| 데이터 연계성: 선행 데이터 후속 화면 연결 | ✅ 필터→결과, 등록스텝 누적, 위치→카드 |
| 예외/상태 처리: Empty/Error/Loading 전부 정의 | ✅ 전 화면 |
| 에러 핸들링 매트릭스 포함 | ✅ 전 화면 |

---

# 계정 유형 / 마이페이지 화면 (SC-22~30)

**전제 상태값**: `state.accountType` = `null`(비로그인) | `'general'`(일반회원) | `'owner'`(사장님) / `state.accountTypeChosen` = boolean (계정유형 선택 완료 여부, 세션 유지)

## 0. 전역 공통 정의

| 항목 | 기존 | 변경 |
|------|------|------|
| 하단 탭바 | 홈 / 발바닥 / **사장님 등록** (3탭) | 홈 / 발바닥 / **마이페이지** (3탭) — 아이콘·레이블만 교체, 탭 개수·순서·비로그인 접근 정책(발바닥 탭 로그인 유도) 불변 |
| 마이페이지 탭 진입 시 | — | 로그인 여부 무관 진입 가능(SC-23). 단, 하위 메뉴 중 로그인 필요 기능은 개별 게이팅 |
| 사장님 등록 진입점 | 탭바 3번째 탭 | **마이페이지 → 사장님 대시보드 카드** (SC-23 내, 사장님 계정만 노출) |

**개발 참고**: `tabbarHtml()` 3번째 버튼의 `data-nav="register"` → `data-nav="mypage"`로 변경, `renderScreen()` 스위치에 `case 'mypage'` 계열 신규 분기 추가 필요.

## 1. [SC-22] 계정 유형 선택 바텀시트

**진입 경로**: SC-16 소셜 로그인 성공 직후, `state.accountTypeChosen === false`일 때 자동 노출 (세션 최초 1회만). 이미 선택 완료된 사용자는 로그인 성공 시 이 화면을 건너뛰고 원래 진출 경로(SC-15 등)로 직행.
**진출 경로**: "일반회원으로 계속하기" 탭 → `accountType='general'` 저장 + 오버레이 닫힘 + 원목적지 복귀 / "사장님으로 가입하기" 탭 → 미니폼 확장 → 제출 완료 → `accountType='owner'` 저장 + 동일 목적지 복귀
**권한**: 로그인 완료 상태(비로그인 진입 불가)

레이아웃: 딤드 오버레이(탭해도 안 닫힘, 필수 선택 강제) + 타이틀 "어떤 계정으로 시작할까요?" + 서브 "가입 후에도 마이페이지에서 계정 유형을 확인할 수 있어요" + 카드버튼 2개(일반회원/사장님, 각 보조설명) + 사장님 선택 시 미니폼(상호명 필수, 연락처 필수, "사장님으로 시작하기" Primary, "다른 유형으로 선택할게요" 텍스트버튼).

기능: 카드 탭 → 즉시 저장·복귀(일반) / 미니폼 확장(사장님). 미니폼 실시간 검증(상호명 1자+ / 연락처 10~11자리). 뒤로가기·딤드 탭은 무시(필수 선택 완료 전까지 안 닫힘).

에러/상태: Loading(제출중, 버튼 스피너) / 연락처형식오류(인라인 "연락처 형식을 확인해주세요") / 네트워크오류·타임아웃(토스트 "연결이 불안정해요. 잠시 후 다시 시도해주세요.") / Empty 해당없음.

인터랙션: 로그인 완료→accountTypeChosen 체크→false면 자동 오픈(SC-16 닫힘 직후 이어서). 카드 전환은 높이 트랜지션. 제출 성공 후 동일 세션 재노출 금지(계정 귀속 영구 플래그). 엣지케이스: 미니폼 작성 중 이탈 시 임시저장 없음(MVP 범위 제외).

디자이너 노트: SC-16과 톤 통일, X 닫기 버튼 없음(강제 선택 명확히). 미니폼은 SC-17 INPUT-Text/INPUT-Tel 재사용.

## 2. [SC-23] 마이페이지 메인

**진입 경로**: 하단 탭바 [마이페이지] 탭 (로그인 여부 무관)
**진출 경로**: 프로필(비로그인)→SC-16 / 발바닥→SC-15 / 카페추천등록→SC-24 / 내가추천한카페→SC-25 / 공지사항→SC-26 / 약관→SC-28 / FAQ→SC-29 / 고객센터→SC-30 / 사장님대시보드카드(사장님계정만)→SC-17
**권한**: 비로그인 진입 가능(하위 메뉴별 개별 게이팅)

레이아웃: 앱바 "마이페이지" + 프로필카드(비로그인: 로그인유도+버튼 / 일반회원: 닉네임+뱃지 / 사장님: 닉네임+뱃지+상호명) + 발바닥 바로가기("발바닥 N개") + 사장님 대시보드 카드(조건부, 사장님 계정만) + 하위메뉴 리스트(카페추천등록/내가추천한카페/공지사항/FAQ/약관/고객센터, 고정 순서) + 하단탭바.

기능: 프로필 탭(비로그인)→SC-16. 발바닥 바로가기→SC-15(비로그인시 SC-16 경유). 사장님카드→SC-17(accountType==='owner'만 노출). 카페추천등록/내가추천한카페 탭→로그인 게이팅.

에러/상태: Loading(프로필/발바닥수 Skeleton) / 네트워크오류(프로필영역만 "정보를 불러올 수 없어요"+재시도) / Empty(발바닥0개→"발바닥 0개" 그대로) / 서버타임아웃(재시도버튼).

인터랙션: 탭 진입마다 accountType 재조회(사장님카드 노출여부 매번 재평가). 로그인 직후 마이페이지 복귀시 프로필 즉시 갱신. 엣지케이스: 사장님인데 카페 미등록시 CTA "내 카페 등록하기"(등록이력 있으면 "내 카페 관리하기").

디자이너 노트: 사장님 대시보드 카드는 강조 스타일로 리스트 상단 별도 배치. 계정유형 뱃지는 색상+텍스트 병기 필수.

## 3. [SC-24] 카페 추천 등록 — "여기도 등록해주세요"

**진입 경로**: SC-23 하위메뉴 (로그인 필요, 비로그인시 SC-16 경유)
**진출 경로**: 제출완료→완료안내(동일화면 전환)→확인탭→SC-23 / 뒤로가기(입력값있음)→이탈확인모달→SC-23
**권한**: 로그인 필수

레이아웃: 앱바+뒤로가기 "여기도 등록해주세요" + 안내문 "우리 동네 강아지 동반 카페를 알려주세요" + 카페이름(필수) + 대략위치(필수, placeholder "예: 서울 마포구 연남동") + 참고URL(선택) + 하단고정 "제출하기" Primary. 완료상태: illust_puppy_default.png + "제보해주셔서 감사해요!" + "검토 후 등록됩니다. 결과는 [내가 추천한 카페 목록]에서 확인할 수 있어요." + 확인버튼 + "추천 목록 보기" 보조버튼.

기능: 필수값 실시간검증(카페이름1자+/대략위치1자+ 시 제출 활성). 제출→API전송→성공시 완료상태 전환(즉시게시 아님 명시). 뒤로가기(입력값있음)→이탈확인모달, (없음)→즉시복귀.

에러/상태: Loading(제출중 스피너) / 필수값누락("카페 이름을 입력해주세요"/"대략적인 위치를 입력해주세요") / URL형식오류(인라인 "올바른 링크 형식이 아니에요") / 네트워크오류·타임아웃(토스트).

인터랙션: 비로그인시 SC-23→SC-16→(최초1회면 SC-22)→로그인/계정유형선택 완료 후 이 화면(SC-24)으로 자동 복귀(원목적지 유지). 이탈확인모달: "작성 중인 내용이 사라져요" + [나가기]/[계속 작성].

디자이너 노트: 폼은 SC-17 INPUT-Text/INPUT-URL 재사용. 완료화면은 SC-21과 톤 통일하되 "검토 후 게시" 차이 명확히.

## 4. [SC-25] 내가 추천한 카페 목록

**진입 경로**: SC-23 하위메뉴 / SC-24 완료화면 "추천 목록 보기"
**진출 경로**: 뒤로가기→SC-23 / 카드탭(등록완료 상태만)→SC-08
**권한**: 로그인 필수

레이아웃: 앱바+뒤로가기 + 카드리스트(카페이름/대략위치/제보일/상태뱃지 4종: 검토중·컨택중·등록완료·반려, 색상+텍스트병기, 반려시 사유 카드하단) + Empty State(illust_puppy_default.png, "아직 추천한 카페가 없어요"+"카페 추천하기" 버튼→SC-24) + 하단탭바.

기능: 카드탭(등록완료)→SC-08 / 그외 상태 반응없음. 스크롤 페이지네이션(20개 초과시).

에러/상태: Loading(Skeleton카드3개) / Empty(위 참조) / 네트워크오류·타임아웃(에러배너+재시도).

인터랙션: 상태값은 운영진(백오피스) 변경, 이 화면은 조회 전용. 상태변경 알림/푸시 연동은 스코프 밖.

디자이너 노트: 상태뱃지 색상 위계(등록완료>컨택중>검토중>반려), 텍스트 레이블 필수(색맹 고려). CARD-Recommend는 SC-15 CARD-Cafe보다 축약형.

## 5. 공지사항 / 약관 / FAQ / 고객센터 — 공통 리스트-상세 패턴

공통 패턴 [LIST-Static]목록+[DETAIL-Static]상세: 앱바+콘텐츠리스트(제목+신규뱃지+chevron)+Empty State / 상세는 앱바+본문스크롤. 공통기능: 항목탭→상세, 뒤로가기→목록/원경로. 공통 에러상태: Loading(Skeleton) / 데이터없음("등록된 내용이 없어요") / 네트워크오류·타임아웃(에러배너+재시도). 공통권한: 전항목 비로그인 접근 가능.

### [SC-26] 공지사항 목록
진입: SC-23 하위메뉴. 진출: 항목탭→SC-27 / 뒤로가기→SC-23. 델타: 등록일 보조텍스트+"N일이내 신규"뱃지, 최신순 정렬 고정.

### [SC-27] 공지사항 상세
진입: SC-26 항목탭. 진출: 뒤로가기→SC-26. 델타: 없음(공통패턴 그대로).

### [SC-28] 약관 (이용약관/개인정보처리방침)
진입: SC-23 하위메뉴. 진출: 항목탭(2건 고정)→각상세 / 뒤로가기→SC-23. 델타: 목록단계 없이 2건 고정, 상세는 정적텍스트+시행일자 앱바하단 고정.

### [SC-29] FAQ 목록
진입: SC-23 하위메뉴. 진출: 항목탭→아코디언 펼침(같은 화면, 별도 상세없음) / 뒤로가기→SC-23. 델타: [ACCORDION-FAQ] 패턴(공통 DETAIL-Static 미사용), 카테고리 필터칩(선택) 상단 배치 가능.

### [SC-30] 고객센터 (문의하기)
진입: SC-23 하위메뉴. 진출: 제출완료→완료안내→SC-23 / 뒤로가기→SC-23. 권한: 로그인시 이름/연락처 자동채움, 비로그인도 접근 가능.

레이아웃: 앱바 "고객센터" + 문의유형선택(라디오: 서비스이용/카페정보오류/사장님계정/기타) + 문의내용(textarea 최대1000자) + 연락처(이메일, 로그인시 자동채움) + 첨부이미지(선택, 최대3장) + "문의하기" Primary.

기능: 필수값검증(유형+내용10자+연락처). 제출→API전송→완료안내.

에러/상태: Loading(스피너) / 문의내용10자미만("문의 내용을 10자 이상 입력해주세요") / 연락처형식오류("올바른 연락처 형식을 입력해주세요") / 네트워크오류·타임아웃(토스트).

인터랙션: 제출완료시 "문의가 접수되었어요. 확인 후 [연락처]로 답변드릴게요" 후 SC-23 복귀(SC-24 완료 패턴과 톤 통일).

디자이너 노트: SC-26/27/28은 LIST-Static/DETAIL-Static 재사용, 상세 레이아웃 1종만 필요. SC-29는 아코디언 인터랙션(펼침/접힘 아이콘 회전) 별도 정의. SC-30은 SC-24/SC-17 폼 컴포넌트 재사용, 신규는 INPUT-ImageUpload(최대3장)뿐.

## 6. [SC-17] 사장님 등록 1/4 — 기본정보

**진입 경로**: **마이페이지(SC-23) → 사장님 대시보드 카드 탭** (accountType==='owner'일 때만 카드 자체가 노출)
**권한**: **사장님 계정 전용** (accountType!=='owner'면 진입 자체 차단)

레이아웃·기능정의·인터랙션(카페명/주소/전화번호/운영시간 입력 등)은 §1~4와 동일한 기본 폼 컴포넌트 사용.

에러/상태 매트릭스: 일반회원 URL 직접접근("사장님 계정에서만 이용할 수 있어요"+[마이페이지로 이동]) / 비로그인 URL 직접접근(SC-16 로그인 유도→accountType 확인→owner면 SC-17, general이면 권한없음 안내) / 로딩중(권한확인, 스켈레톤).

인터랙션: SC-17 진입시도마다 클라이언트/서버 양쪽 accountType==='owner' 재검증(딥링크 방어, 서버측 권한검증 필수). 일반회원 셀프 전환 CTA는 이번 스코프 미포함.

## SC 번호 요약

| SC ID | 화면명 |
|-------|--------|
| SC-17 | 사장님 등록 1/4 — 기본정보 |
| SC-22 | 계정 유형 선택 바텀시트 |
| SC-23 | 마이페이지 메인 |
| SC-24 | 카페 추천 등록 "여기도 등록해주세요" |
| SC-25 | 내가 추천한 카페 목록 |
| SC-26 | 공지사항 목록 |
| SC-27 | 공지사항 상세 |
| SC-28 | 약관 (이용약관/개인정보처리방침) |
| SC-29 | FAQ 목록 |
| SC-30 | 고객센터 (문의하기) |
| 탭바 | 사장님 등록 → 마이페이지 | 변경 |