산책갈개 · dognation_PT (Frontend)

우리 강아지 성향에 맞는 동네 산책 메이트를 안전하게 찾는 iOS/AOS 앱의 프론트엔드.

스택

• Vue 3 + TypeScript
• Quasar (UI, 하늘색 파스텔 테마)
• Vite (번들러)
• Pinia (상태관리 · 구독 티어 · 매칭)
• Capacitor (iOS/AOS 네이티브 패키징, SPM)
• 카카오 지도 · STOMP(실시간 알림/채팅)

시작하기

npm install
cp .env.example .env      # VITE_API_BASE_URL, VITE_KAKAO_MAP_KEY 설정
npm run dev               # 웹 개발 서버 (http://localhost:9000)
npm run typecheck         # vue-tsc 타입체크

빌드 / 네이티브

npm run build             # 타입체크 + 웹 빌드
npm run build:app         # Capacitor용 빌드 (상대경로)
npx cap sync ios          # 네이티브 동기화

구조

• src/pages/HomePage.vue — 지도 / 체크인 / 자주 오는 견종 / AI 추천 찰떡 메이트 / 한줄평 / 스팟 메이트
• src/pages/ProfilePage.vue — 강아지 프로필(중성화 필수) / 댕비티아이 성향 태그 / 동네 찰떡지수
• src/layouts/MainLayout.vue — 헤더(알림 벨) / 탭바 / 매칭 채팅·피드백 다이얼로그
• src/components/
  • KakaoMap.vue — 카카오 지도(마커·최근접 스팟 선택·확대/축소)
  • MatchChatDialog.vue — 매칭 1:1 채팅 + '산책 완료' 체크아웃
  • FeedbackDialog.vue — 산책 후 피드백(잘 놀았어요/안 맞았어요 + 사유)
  • AffinityBadges.vue — 동네/우리 찰떡지수 배지(유료 게이팅)
  • AdBanner.vue — FREE 티어 배너 광고
• src/stores/ — subscription(티어) · matching(알림/진행중/피드백) · dogs · auth
• src/api/ — spots · matches · affinity · dogs · chat

---

오늘 진행 내역 (2026-07-11 ~ 07-12)

지도 · 스팟

• 지도 네이버 → 카카오 전환(네이버 코드 유지), 확대/축소, 지도 클릭 시 최근접 스팟 선택
• 체크인 후 AI 추천 찰떡 메이트 표시 (AI 궁합 추천 → AI 추천 찰떡 메이트, 안내 문구 추가)
• 도착 버튼 아래 '이 시간대 자주 보이는 견종' 한 줄 표시(실패해도 화면 안 깨짐)
• 로딩 문구 → '친구 찾는 중'

매칭 · 채팅

• 매칭 플로우 UI — 진행중 표시 · 실시간 알림 · 수락/거절 · 1:1 채팅
• 체크인 옆 스팟 채팅 버튼 제거(매칭 1:1 채팅만 유지)

찰떡지수 피드백 (신규)

• FeedbackDialog — 잘 놀았어요/안 맞았어요, BAD 시 사유 선택 + 추가입력
• 채팅 '산책 완료' 버튼 & 2시간 FEEDBACK_REQUEST 알림 → 피드백 팝업
• AffinityBadges — 동네 찰떡지수(전체 노출) · 우리 찰떡지수(매칭 쌍, 무료회원은 "유료회원 전용") 스팟 메이트·AI 추천 카드 및 우리 강아지 프로필에 노출

강아지 프로필

• 등록 시 중성화 여부 필수 선택, AI 추천에 중성화 조건 옵션 연동
• UI 문구 '우리 개' → '우리 강아지'

UI · 네이티브 정리

• 로그인 화면 QLayout 래핑(빈 화면 수정)
• iOS 상/하단 이중 safe-area 여백 제거(contentInset never), 광고 배너를 footer 안으로
• input 포커스 시 가로 스크롤/확대 방지
• 관리자 콘솔을 별도 프로젝트(dognation_AT)로 분리 — PT에서 관리자 코드 제거

백엔드: dognation_BT