docs: README 갱신 (구조·오늘 진행 내역)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
feat: 찰떡지수 피드백 UI (우리/동네 궁합도)
2026-07-12 00:03:39 +09:00 · 2026-07-11 23:55:16 +09:00 · 2026-07-11 22:14:42 +09:00 · 2026-07-11 22:02:14 +09:00 · 2026-07-11 21:56:28 +09:00 · 2026-07-11 21:44:59 +09:00
14 changed files with 496 additions and 44 deletions
@@ -1,39 +1,71 @@
 # 산책갈개 · dognation_PT (Frontend)

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

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

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

-## 빌드
+## 빌드 / 네이티브
 ```bash
 npm run build             # 타입체크 + 웹 빌드
 npm run build:app         # Capacitor용 빌드 (상대경로)
-```
-
-## 네이티브(추가 예정)
-```bash
-npx cap add ios
-npx cap add android
-npx cap sync
+npx cap sync ios          # 네이티브 동기화
 ```

 ## 구조
- `src/pages/HomePage.vue` — 스팟 지도 / 체크인 / 한줄평 / 메이트
- `src/pages/ProfilePage.vue` — 강아지 프로필 / 댕비티아이 성향 태그 / 구독 티어
- `src/stores/subscription.ts` — 구독 티어 상태 (광고 노출·매칭 제한 파생)
- `src/components/AdBanner.vue` — FREE 티어 배너 광고 (v-if 제어)
- `src/quasar-variables.scss` — 하늘색 파스텔 브랜드 컬러
+- `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](https://gitlab.sblog.kr/sb/dognation_BT)
@@ -2,7 +2,10 @@
 <html lang="ko">
  <head>
    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
+    />
    <meta name="theme-color" content="#6DB3E8" />
    <title>산책갈개</title>
  </head>
@@ -0,0 +1,32 @@
+import { http } from './http'
+
+export type FeedbackVerdict = 'GOOD' | 'BAD'
+
+/** 동네 찰떡지수 (전체 노출). */
+export interface NeighborhoodScore {
+  percent: number
+  label: string
+}
+
+/**
+ * 우리 찰떡지수 (1회 이상 매칭된 쌍만).
+ * - locked=true : 무료회원 → "유료회원 전용"
+ * - matched=false: 매칭 이력 없음 → 미노출
+ */
+export interface PairScore {
+  matched: boolean
+  locked: boolean
+  percent: number
+  label: string
+}
+
+export const affinityApi = {
+  /** 산책 후 피드백 제출 → 우리/동네 찰떡지수 반영. */
+  feedback: (matchId: number, raterDogId: number, verdict: FeedbackVerdict, reasons?: string) =>
+    http.post<void>(`/api/affinity/matches/${matchId}/feedback`, { raterDogId, verdict, reasons }),
+  /** 동네 찰떡지수. */
+  neighborhood: (dogId: number) => http.get<NeighborhoodScore>(`/api/affinity/neighborhood/${dogId}`),
+  /** 우리 찰떡지수 — viewerDogId(내 강아지) 기준. */
+  pair: (viewerDogId: number, otherDogId: number) =>
+    http.get<PairScore>(`/api/affinity/pair?viewerDogId=${viewerDogId}&otherDogId=${otherDogId}`),
+}
@@ -22,7 +22,7 @@ export interface ReceivedMatch {

 /** STOMP /topic/users/{userId} 로 오는 매칭 알림. */
 export interface MatchNotification {
-  type: 'NEW_REQUEST' | 'ACCEPTED' | 'REJECTED' | 'EXPIRED'
+  type: 'NEW_REQUEST' | 'ACCEPTED' | 'REJECTED' | 'EXPIRED' | 'FEEDBACK_REQUEST'
  matchId: number
  title: string
  message: string
@@ -40,8 +40,13 @@ export const spotsApi = {
  list: () => http.get<Spot[]>('/api/spots'),
  mates: (spotId: number, userId?: number) =>
    http.get<Mate[]>(`/api/spots/${spotId}/mates${userId ? `?userId=${userId}` : ''}`),
-  aiMates: (spotId: number, dogId: number) =>
-    http.get<AiMate[]>(`/api/spots/${spotId}/ai-mates?dogId=${dogId}`),
+  aiMates: (spotId: number, dogId: number, neutered?: boolean) =>
+    http.get<AiMate[]>(
+      `/api/spots/${spotId}/ai-mates?dogId=${dogId}` +
+        (neutered != null ? `&neutered=${neutered}` : ''),
+    ),
+  frequentBreeds: (spotId: number) =>
+    http.get<{ breeds: string[] }>(`/api/spots/${spotId}/frequent-breeds`),
  reviews: (spotId: number) => http.get<Review[]>(`/api/spots/${spotId}/reviews`),
  checkIn: (spotId: number, userId: number, dogId: number) =>
    http.post<CheckInResult>(`/api/spots/${spotId}/checkins`, { userId, dogId }),
@@ -0,0 +1,53 @@
+<template>
+  <div class="column q-gutter-xs">
+    <!-- 동네 찰떡지수 (전체 노출) -->
+    <div v-if="hood" class="text-caption row items-center no-wrap">
+      <q-icon name="groups" size="14px" color="teal" class="q-mr-xs" />
+      <span class="text-weight-medium text-teal-8">동네 찰떡지수 {{ hood.percent }}%</span>
+      <span class="text-grey-6 q-ml-xs">({{ hood.label }})</span>
+    </div>
+
+    <!-- 우리 찰떡지수 (매칭 이력 있는 쌍만) -->
+    <div v-if="pair?.matched" class="text-caption row items-center no-wrap">
+      <q-icon name="favorite" size="14px" color="pink-5" class="q-mr-xs" />
+      <template v-if="pair.locked">
+        <span class="text-weight-medium text-pink-6">우리 찰떡지수</span>
+        <q-badge color="amber-7" class="q-ml-xs" text-color="white">유료회원 전용</q-badge>
+      </template>
+      <template v-else>
+        <span class="text-weight-medium text-pink-6">우리 찰떡지수 {{ pair.percent }}%</span>
+        <span class="text-grey-6 q-ml-xs">({{ pair.label }})</span>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { affinityApi, type NeighborhoodScore, type PairScore } from '@/api/affinity'
+
+const props = defineProps<{ myDogId: number; otherDogId: number }>()
+
+const hood = ref<NeighborhoodScore | null>(null)
+const pair = ref<PairScore | null>(null)
+
+watch(
+  () => [props.myDogId, props.otherDogId] as const,
+  () => void load(),
+  { immediate: true },
+)
+
+async function load() {
+  // 부가 정보 — 실패해도 카드 나머지는 정상 표시
+  try {
+    hood.value = await affinityApi.neighborhood(props.otherDogId)
+  } catch {
+    hood.value = null
+  }
+  try {
+    pair.value = await affinityApi.pair(props.myDogId, props.otherDogId)
+  } catch {
+    pair.value = null
+  }
+}
+</script>
@@ -0,0 +1,167 @@
+<template>
+  <q-dialog :model-value="modelValue" @update:model-value="onDialog" persistent>
+    <q-card class="feedback-card">
+      <q-card-section class="text-center q-pb-none">
+        <div class="text-h6 text-weight-bold">오늘 산책 어떠셨나요?</div>
+        <div v-if="otherDogName" class="text-caption text-grey-7 q-mt-xs">
+          {{ otherDogName }}와의 산책을 평가해 주세요
+        </div>
+      </q-card-section>
+
+      <!-- 1단계: 잘 놀았어요 / 안 맞았어요 -->
+      <q-card-section v-if="!showReasons" class="q-gutter-sm">
+        <q-btn
+          class="full-width verdict-btn"
+          unelevated
+          color="positive"
+          no-caps
+          :loading="submitting"
+          @click="submitGood"
+        >
+          <q-icon name="sentiment_very_satisfied" size="26px" class="q-mr-sm" />
+          잘 놀았어요
+        </q-btn>
+        <q-btn
+          class="full-width verdict-btn"
+          outline
+          color="grey-8"
+          no-caps
+          :disable="submitting"
+          @click="showReasons = true"
+        >
+          <q-icon name="sentiment_dissatisfied" size="26px" class="q-mr-sm" />
+          안 맞았어요
+        </q-btn>
+      </q-card-section>
+
+      <!-- 2단계: 안 맞았어요 사유 -->
+      <q-card-section v-else>
+        <div class="text-subtitle2 q-mb-sm">어떤 점이 아쉬웠나요? (선택)</div>
+        <q-option-group
+          v-model="selectedReasons"
+          :options="reasonOptions"
+          type="checkbox"
+          color="primary"
+        />
+        <q-input
+          v-model="extraReason"
+          class="q-mt-sm"
+          dense
+          outlined
+          type="textarea"
+          rows="2"
+          maxlength="200"
+          placeholder="추가로 남기고 싶은 점이 있다면 적어주세요"
+        />
+        <div class="row q-gutter-sm q-mt-md">
+          <q-btn flat color="grey-7" label="뒤로" no-caps :disable="submitting" @click="showReasons = false" />
+          <q-btn
+            class="col"
+            unelevated
+            color="primary"
+            label="제출"
+            no-caps
+            :loading="submitting"
+            @click="submitBad"
+          />
+        </div>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useQuasar } from 'quasar'
+import { affinityApi } from '@/api/affinity'
+import { ApiError } from '@/api/http'
+
+const props = defineProps<{
+  modelValue: boolean
+  matchId: number
+  raterDogId: number
+  otherDogName?: string
+}>()
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: boolean): void
+  (e: 'submitted'): void
+}>()
+
+const $q = useQuasar()
+
+const showReasons = ref(false)
+const submitting = ref(false)
+const selectedReasons = ref<string[]>([])
+const extraReason = ref('')
+
+const reasonOptions = [
+  { label: '강아지 성향이 안 맞아요', value: '강아지 성향이 안 맞아요' },
+  { label: '간식/장난감 때문에 으르릉거려요', value: '간식/장난감 때문에 으르릉거려요' },
+  { label: '일방적으로 입질/공격성을 보였어요', value: '일방적으로 입질/공격성을 보였어요' },
+  { label: '보호자 매너가 아쉬워요', value: '보호자 매너가 아쉬워요' },
+]
+
+// 열릴 때마다 초기화
+watch(
+  () => props.modelValue,
+  (open) => {
+    if (open) {
+      showReasons.value = false
+      selectedReasons.value = []
+      extraReason.value = ''
+      submitting.value = false
+    }
+  },
+)
+
+function onDialog(v: boolean) {
+  emit('update:modelValue', v)
+}
+
+async function submitGood() {
+  await submit('GOOD')
+}
+
+async function submitBad() {
+  const reasons = [...selectedReasons.value]
+  const extra = extraReason.value.trim()
+  if (extra) reasons.push(extra)
+  await submit('BAD', reasons.join(', '))
+}
+
+async function submit(verdict: 'GOOD' | 'BAD', reasons?: string) {
+  submitting.value = true
+  try {
+    await affinityApi.feedback(props.matchId, props.raterDogId, verdict, reasons)
+    $q.notify({
+      color: 'positive',
+      icon: 'favorite',
+      message: '소중한 피드백 고마워요! 찰떡지수에 반영했어요.',
+      position: 'top',
+      timeout: 2500,
+    })
+    emit('submitted')
+    emit('update:modelValue', false)
+  } catch (e) {
+    // 이미 제출한 경우(409) 등은 조용히 닫기
+    const message = e instanceof ApiError ? e.message : '피드백 전송에 실패했어요.'
+    $q.notify({ color: 'grey-8', icon: 'info', message, position: 'top', timeout: 2500 })
+    emit('update:modelValue', false)
+  } finally {
+    submitting.value = false
+  }
+}
+</script>
+
+<style scoped>
+.feedback-card {
+  width: 340px;
+  max-width: 90vw;
+  border-radius: 16px;
+}
+.verdict-btn {
+  height: 56px;
+  font-size: 16px;
+  font-weight: 600;
+}
+</style>
@@ -7,6 +7,9 @@
        <q-chip dense :color="connected ? 'positive' : 'grey-5'" text-color="white">
          {{ connected ? '실시간' : '연결 중…' }}
        </q-chip>
+        <q-btn flat dense no-caps icon="event_available" label="산책 완료" class="q-mr-xs" @click="onCheckout">
+          <q-tooltip>산책을 마치고 오늘 어땠는지 남겨주세요</q-tooltip>
+        </q-btn>
        <q-btn flat round dense icon="close" @click="close" />
      </q-toolbar>

@@ -55,7 +58,10 @@ import { createMatchChat } from '@/lib/chatSocket'
 import { useAuthStore } from '@/stores/auth'

 const props = defineProps<{ modelValue: boolean; matchId: number }>()
-const emit = defineEmits<{ (e: 'update:modelValue', v: boolean): void }>()
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: boolean): void
+  (e: 'checkout', matchId: number): void
+}>()

 const auth = useAuthStore()

@@ -111,6 +117,10 @@ function close() {
  emit('update:modelValue', false)
 }

+function onCheckout() {
+  emit('checkout', props.matchId)
+}
+
 function isMine(m: ChatMessage) {
  return m.senderId === auth.member?.id
 }
@@ -1,18 +1,22 @@
 // 전역 스타일 — 하늘색 파스텔 배경
+html,
 body {
  background: #F4FAFF;
+  // input 포커스/키보드 시 가로 스크롤(오버플로) 방지
+  overflow-x: hidden;
+  max-width: 100%;
 }

 .text-brand {
  color: #3E92CC;
 }

-// iOS 노치/홈바 safe-area 대응
-// 다이나믹 아일랜드는 화면 가운데에만 있어 헤더 양옆(제목·아이콘)은 full inset 이 불필요.
-// 상태바/홈바 최소 여백만 남기고 축소해 상/하단 빈 공간을 줄인다.
+// iOS 노치/홈바 safe-area 대응.
+// 네이티브 웹뷰가 이미 safe-area 아래로 배치돼(이중 여백 방지) CSS 추가 여백은 0.
+// (제목이 상태바에 겹치면 이 값을 소폭 늘린다)
 .safe-top {
-  padding-top: max(24px, calc(env(safe-area-inset-top) - 8px));
+  padding-top: 0;
 }
 .safe-bottom {
-  padding-bottom: max(6px, calc(env(safe-area-inset-bottom) - 14px));
+  padding-bottom: 0;
 }
@@ -73,12 +73,25 @@
        class="text-grey-6"
      >
        <q-route-tab name="home" :to="{ name: 'home' }" icon="map" label="산책 스팟" />
-        <q-route-tab name="profile" :to="{ name: 'profile' }" icon="pets" label="우리 개" />
+        <q-route-tab name="profile" :to="{ name: 'profile' }" icon="pets" label="우리 강아지" />
      </q-tabs>
    </q-footer>

    <!-- 매칭 수락 시 1:1 채팅 -->
-    <MatchChatDialog v-if="matchChatId != null" v-model="matchChatOpen" :match-id="matchChatId" />
+    <MatchChatDialog
+      v-if="matchChatId != null"
+      v-model="matchChatOpen"
+      :match-id="matchChatId"
+      @checkout="openFeedback"
+    />
+
+    <!-- 산책 후 찰떡지수 피드백 -->
+    <FeedbackDialog
+      v-if="feedbackMatchId != null && dogs.currentDogId != null"
+      v-model="feedbackOpen"
+      :match-id="feedbackMatchId"
+      :rater-dog-id="dogs.currentDogId"
+    />
  </q-layout>
 </template>

@@ -88,6 +101,7 @@ import { useRouter } from 'vue-router'
 import { useQuasar } from 'quasar'
 import AdBanner from '@/components/AdBanner.vue'
 import MatchChatDialog from '@/components/MatchChatDialog.vue'
+import FeedbackDialog from '@/components/FeedbackDialog.vue'
 import { useSubscriptionStore } from '@/stores/subscription'
 import { useAuthStore } from '@/stores/auth'
 import { useDogsStore } from '@/stores/dogs'
@@ -105,6 +119,15 @@ const $q = useQuasar()
 const matchChatOpen = ref(false)
 const matchChatId = ref<number | null>(null)

+const feedbackOpen = ref(false)
+const feedbackMatchId = ref<number | null>(null)
+
+/** 채팅 '산책 완료' 버튼 또는 2시간 알림 → 피드백 팝업 열기. */
+function openFeedback(id: number) {
+  feedbackMatchId.value = id
+  feedbackOpen.value = true
+}
+
 onMounted(async () => {
  await dogs.loadMyDogs()
  if (auth.member && dogs.currentDogId != null) {
@@ -125,6 +148,17 @@ watch(
  },
 )

+// 2시간 후 피드백 요청 알림 → 찰떡지수 피드백 팝업
+watch(
+  () => matching.feedbackMatchId,
+  (id) => {
+    if (id != null) {
+      openFeedback(id)
+      matching.feedbackMatchId = null
+    }
+  },
+)
+
 async function onAccept(id: number) {
  try {
    await matching.accept(id)
@@ -23,14 +23,46 @@
      @click="onCheckIn"
    />

+    <!-- 이 시간대 자주 오는 견종 (통계) -->
+    <div
+      v-if="frequentBreeds.length"
+      class="text-caption text-grey-7 q-mt-sm row items-center no-wrap"
+    >
+      <q-icon name="pets" size="16px" color="primary" class="q-mr-xs" />
+      이 시간대 자주 보이는 견종 · {{ frequentBreeds.join(', ') }}
+    </div>
+
    <!-- AI 궁합 추천 (체크인 후, 이 스팟의 강아지 중 사이좋게 지낼 만한 목록) -->
    <div v-if="aiLoading || aiTried" class="q-mt-lg">
-      <div class="text-subtitle1 text-weight-bold q-mb-sm">
-        <q-icon name="auto_awesome" color="primary" class="q-mr-xs" />AI 궁합 추천
+      <div class="q-mb-sm">
+        <span class="text-subtitle1 text-weight-bold">
+          <q-icon name="auto_awesome" color="primary" class="q-mr-xs" />AI 추천 찰떡 메이트
+        </span>
+        <span class="text-caption text-grey-5 q-ml-xs">· AI 분석으로 실제와 다를 수 있어요</span>
+      </div>
+      <!-- 찾기 옵션: 중성화 조건 -->
+      <div class="row items-center q-mb-sm">
+        <span class="text-caption text-grey-7 q-mr-sm">중성화</span>
+        <q-btn-toggle
+          v-model="aiNeutered"
+          dense
+          unelevated
+          no-caps
+          size="sm"
+          toggle-color="primary"
+          color="grey-3"
+          text-color="grey-8"
+          :options="[
+            { label: '상관없음', value: 'any' },
+            { label: '완료', value: 'yes' },
+            { label: '안 함', value: 'no' },
+          ]"
+          @update:model-value="loadAiMates"
+        />
      </div>
      <div v-if="aiLoading" class="row items-center q-gutter-sm text-grey-6">
        <q-spinner-dots size="24px" color="primary" />
-        <span class="text-caption">사이좋게 지낼 강아지를 찾는 중…</span>
+        <span class="text-caption">친구 찾는 중…</span>
      </div>
      <template v-else>
        <q-card v-for="m in aiMates" :key="m.dogId" flat bordered class="q-mb-sm">
@@ -44,6 +76,12 @@
                <q-badge color="primary" class="q-ml-xs">궁합 {{ m.score }}</q-badge>
              </q-item-label>
              <q-item-label caption>{{ m.breed || '견종 미상' }} · {{ m.reason }}</q-item-label>
+              <AffinityBadges
+                v-if="dogs.currentDogId != null"
+                class="q-mt-xs"
+                :my-dog-id="dogs.currentDogId"
+                :other-dog-id="m.dogId"
+              />
            </q-item-section>
          </q-item>
        </q-card>
@@ -81,6 +119,12 @@
        <q-item-section>
          <q-item-label class="text-weight-medium">{{ mate.name }}</q-item-label>
          <q-item-label caption>{{ mate.breed || '견종 미상' }}</q-item-label>
+          <AffinityBadges
+            v-if="dogs.currentDogId != null"
+            class="q-mt-xs"
+            :my-dog-id="dogs.currentDogId"
+            :other-dog-id="mate.dogId"
+          />
        </q-item-section>
        <q-item-section side>
          <q-btn
@@ -118,6 +162,7 @@ import { useAuthStore } from '@/stores/auth'
 import { useDogsStore } from '@/stores/dogs'
 import { useMatchingStore } from '@/stores/matching'
 import KakaoMap from '@/components/KakaoMap.vue'
+import AffinityBadges from '@/components/AffinityBadges.vue'

 const $q = useQuasar()
 const auth = useAuthStore()
@@ -131,6 +176,7 @@ const spots = ref<Spot[]>([])
 const currentSpot = ref<Spot | null>(null)
 const reviews = ref<Review[]>([])
 const mates = ref<Mate[]>([])
+const frequentBreeds = ref<string[]>([])
 const checkedIn = ref(false)
 const checkingIn = ref(false)
 const matchingDogId = ref<number | null>(null)
@@ -140,6 +186,7 @@ const loadError = ref(false)
 const aiMates = ref<AiMate[]>([])
 const aiLoading = ref(false)
 const aiTried = ref(false)
+const aiNeutered = ref<'any' | 'yes' | 'no'>('any') // AI 찾기 옵션: 중성화 조건

 onMounted(load)

@@ -169,18 +216,21 @@ async function onSelectSpot(spotId: number) {
 }

 async function refreshSpot(spotId: number) {
-  const [r, m] = await Promise.all([
+  const [r, m, fb] = await Promise.all([
    spotsApi.reviews(spotId),
    spotsApi.mates(spotId, currentUserId()),
+    // 통계 엔드포인트는 부가 정보 — 실패(구버전 백엔드 등)해도 나머지 화면은 정상 표시
+    spotsApi.frequentBreeds(spotId).catch(() => ({ breeds: [] })),
  ])
  reviews.value = r
  mates.value = m
+  frequentBreeds.value = fb.breeds
 }

 async function onCheckIn() {
  if (!currentSpot.value) return
  if (dogs.currentDogId == null) {
-    $q.notify({ color: 'warning', message: '먼저 우리 개를 등록해 주세요.', icon: 'pets', position: 'top' })
+    $q.notify({ color: 'warning', message: '먼저 우리 강아지를 등록해 주세요.', icon: 'pets', position: 'top' })
    return
  }
  checkingIn.value = true
@@ -202,8 +252,9 @@ async function loadAiMates() {
  if (!currentSpot.value || dogs.currentDogId == null) return
  aiLoading.value = true
  aiTried.value = true
+  const neutered = aiNeutered.value === 'yes' ? true : aiNeutered.value === 'no' ? false : undefined
  try {
-    aiMates.value = await spotsApi.aiMates(currentSpot.value.id, dogs.currentDogId)
+    aiMates.value = await spotsApi.aiMates(currentSpot.value.id, dogs.currentDogId, neutered)
  } catch {
    aiMates.value = []
  } finally {
@@ -213,7 +264,7 @@ async function loadAiMates() {

 async function onMatch(mate: Mate) {
  if (dogs.currentDogId == null) {
-    $q.notify({ color: 'warning', message: '먼저 우리 개를 등록해 주세요.', icon: 'pets', position: 'top' })
+    $q.notify({ color: 'warning', message: '먼저 우리 강아지를 등록해 주세요.', icon: 'pets', position: 'top' })
    return
  }
  matchingDogId.value = mate.dogId
@@ -7,7 +7,7 @@
      <q-avatar size="88px" color="white" text-color="primary" icon="pets" />
      <div class="text-h4 text-weight-bold text-white q-mt-md">산책갈개</div>
      <div class="text-white q-mt-xs" style="opacity: 0.9">
-        우리 개 성향에 맞는 동네 산책 메이트
+        우리 강아지 성향에 맞는 동네 산책 메이트
      </div>
    </div>

@@ -22,13 +22,13 @@
    <q-card v-if="!dogs.myDogs.length" flat bordered class="q-pa-lg text-center text-grey-6">
      <q-icon name="pets" size="40px" color="secondary" />
      <div class="q-mt-sm q-mb-md">아직 등록된 강아지가 없어요.</div>
-      <q-btn color="primary" unelevated icon="add" label="우리 개 등록" @click="openCreate" />
+      <q-btn color="primary" unelevated icon="add" label="우리 강아지 등록" @click="openCreate" />
    </q-card>

    <template v-else>
      <!-- 강아지 선택 (여러 마리) -->
      <div class="row items-center q-mb-sm">
-        <div class="text-subtitle1 text-weight-bold">우리 개</div>
+        <div class="text-subtitle1 text-weight-bold">우리 강아지</div>
        <q-space />
        <q-btn dense flat color="primary" icon="add" label="추가" @click="openCreate" />
      </div>
@@ -55,6 +55,11 @@
            <div class="text-caption text-grey-7">
              {{ current.breed || '견종 미상' }}<span v-if="current.size"> · {{ sizeLabel(current.size) }}</span>
            </div>
+            <div v-if="hoodScore" class="text-caption row items-center no-wrap q-mt-xs">
+              <q-icon name="groups" size="14px" color="teal" class="q-mr-xs" />
+              <span class="text-weight-medium text-teal-8">동네 찰떡지수 {{ hoodScore.percent }}%</span>
+              <span class="text-grey-6 q-ml-xs">({{ hoodScore.label }})</span>
+            </div>
          </div>
          <q-space />
          <q-btn dense flat round color="grey-6" icon="delete_outline" @click="onDelete" />
@@ -89,7 +94,7 @@
    <!-- 강아지 등록 다이얼로그 -->
    <q-dialog v-model="createOpen">
      <q-card style="min-width: 300px">
-        <q-card-section class="text-subtitle1 text-weight-bold">우리 개 등록</q-card-section>
+        <q-card-section class="text-subtitle1 text-weight-bold">우리 강아지 등록</q-card-section>
        <q-card-section class="q-gutter-sm">
          <q-input v-model="form.name" label="이름 *" dense outlined />
          <q-input v-model="form.breed" label="견종" dense outlined />
@@ -102,6 +107,22 @@
            emit-value
            map-options
          />
+          <div>
+            <div class="text-caption text-grey-7 q-mb-xs">중성화 여부 <span class="text-negative">*</span></div>
+            <q-btn-toggle
+              v-model="form.neutered"
+              spread
+              unelevated
+              no-caps
+              toggle-color="primary"
+              color="grey-3"
+              text-color="grey-8"
+              :options="[
+                { label: '중성화 완료', value: true },
+                { label: '안 함', value: false },
+              ]"
+            />
+          </div>
        </q-card-section>
        <q-card-actions align="right">
          <q-btn flat label="취소" v-close-popup />
@@ -110,7 +131,7 @@
            unelevated
            label="등록"
            :loading="creating"
-            :disable="!form.name"
+            :disable="!form.name || form.neutered === null"
            @click="onCreate"
          />
        </q-card-actions>
@@ -124,6 +145,7 @@ import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { useQuasar } from 'quasar'
 import { useAuthStore } from '@/stores/auth'
 import { useDogsStore } from '@/stores/dogs'
+import { affinityApi, type NeighborhoodScore } from '@/api/affinity'
 import { ApiError } from '@/api/http'

 const $q = useQuasar()
@@ -131,6 +153,22 @@ const auth = useAuthStore()
 const dogs = useDogsStore()

 const current = computed(() => dogs.currentDog)
+
+// 내 강아지 동네 찰떡지수 (전체 노출 지표)
+const hoodScore = ref<NeighborhoodScore | null>(null)
+watch(
+  () => current.value?.id,
+  async (id) => {
+    hoodScore.value = null
+    if (id == null) return
+    try {
+      hoodScore.value = await affinityApi.neighborhood(id)
+    } catch {
+      hoodScore.value = null
+    }
+  },
+  { immediate: true },
+)
 const selected = ref<Set<number>>(new Set())
 const saving = ref(false)
 const createOpen = ref(false)
@@ -141,10 +179,16 @@ const sizeOptions = [
  { label: '중형견', value: 'MEDIUM' },
  { label: '대형견', value: 'LARGE' },
 ]
-const form = reactive<{ name: string; breed: string; size: string | null }>({
+const form = reactive<{
+  name: string
+  breed: string
+  size: string | null
+  neutered: boolean | null
+}>({
  name: '',
  breed: '',
  size: null,
+  neutered: null,
 })

 onMounted(async () => {
@@ -208,13 +252,20 @@ function openCreate() {
  form.name = ''
  form.breed = ''
  form.size = null
+  form.neutered = null
  createOpen.value = true
 }

 async function onCreate() {
+  if (form.neutered === null) return
  creating.value = true
  try {
-    await dogs.createDog({ name: form.name, breed: form.breed || null, size: form.size })
+    await dogs.createDog({
+      name: form.name,
+      breed: form.breed || null,
+      size: form.size,
+      neutered: form.neutered,
+    })
    createOpen.value = false
    $q.notify({ color: 'primary', message: `${form.name} 등록 완료!`, icon: 'pets', position: 'top' })
  } catch (e) {
@@ -15,6 +15,8 @@ export const useMatchingStore = defineStore('matching', () => {
  const received = ref<ReceivedMatch[]>([])
  const sentPendingTargetIds = ref<Set<number>>(new Set())
  const openChatMatchId = ref<number | null>(null)
+  /** 산책 후 피드백(찰떡지수) 팝업을 띄울 매칭 id — 알림 수신 시 세팅. */
+  const feedbackMatchId = ref<number | null>(null)

  let socket: ReturnType<typeof createUserNotifications> | null = null
  let myDogId: number | null = null
@@ -57,6 +59,9 @@ export const useMatchingStore = defineStore('matching', () => {
    if (n.type === 'ACCEPTED') {
      openChatMatchId.value = n.matchId // 신청자: 수락됨 → 채팅 열기
    }
+    if (n.type === 'FEEDBACK_REQUEST') {
+      feedbackMatchId.value = n.matchId // 2시간 후: 찰떡지수 피드백 팝업
+    }
    if (myDogId != null) void refresh(myDogId) // 목록/진행중 동기화
  }

@@ -86,6 +91,7 @@ export const useMatchingStore = defineStore('matching', () => {
    received,
    sentPendingTargetIds,
    openChatMatchId,
+    feedbackMatchId,
    connect,
    disconnect,
    refresh,
@@ -103,6 +109,8 @@ function colorFor(type: MatchNotification['type']): string {
    case 'REJECTED':
    case 'EXPIRED':
      return 'grey-8'
+    case 'FEEDBACK_REQUEST':
+      return 'teal'
    default:
      return 'primary'
  }
@@ -116,6 +124,8 @@ function iconFor(type: MatchNotification['type']): string {
      return 'celebration'
    case 'EXPIRED':
      return 'schedule'
+    case 'FEEDBACK_REQUEST':
+      return 'rate_review'
    default:
      return 'heart_broken'
  }
Author	SHA1	Message	Date
sb	a7b633a3e5	docs: README 갱신 (구조·오늘 진행 내역) CI / build (push) Failing after 14m38s Details Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-07-12 00:03:39 +09:00
sb	c8a8681a61	feat: 찰떡지수 피드백 UI (우리/동네 궁합도) CI / build (push) Successful in 27s Details - FeedbackDialog: 잘 놀았어요/안 맞았어요 + BAD 사유 선택·추가입력 - 채팅 '산책 완료' 버튼 + 2시간 FEEDBACK_REQUEST 알림 → 피드백 팝업 - AffinityBadges: 동네 찰떡지수(전체), 우리 찰떡지수(매칭 쌍·유료 게이팅) 스팟 메이트/AI 추천 카드 및 우리 강아지 프로필에 노출 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-07-11 23:55:16 +09:00
sb	eb51201669	feat: 강아지 등록 중성화 필수 선택 + AI 추천 중성화 조건 옵션 CI / build (push) Failing after 11m51s Details - 등록 폼: 중성화 여부(완료/안 함) 필수 토글, 미선택 시 등록 불가 - AI 추천: 중성화 찾기 옵션(상관없음/완료/안 함) → 조건 강아지 중에서만 추천 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-07-11 22:14:42 +09:00
sb	f29d5e106c	chore: AI 로딩 문구 '사이좋게 지낼 강아지를 찾는 중' → '친구 찾는 중' CI / build (push) Failing after 12m23s Details Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-07-11 22:02:14 +09:00
sb	f9d6cf1fd4	chore: 'AI 궁합 추천' → 'AI 추천 찰떡 메이트' + 안내 문구 추가 CI / build (push) Failing after 14m14s Details 옆에 작은 글씨로 'AI 분석으로 실제와 다를 수 있어요' 표기. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-07-11 21:56:28 +09:00
sb	0dcec68cfe	fix: input 포커스 시 가로 스크롤/확대 방지 CI / build (push) Failing after 10m43s Details 뷰포트 maximum-scale=1·user-scalable=no (iOS 포커스 자동확대 방지) + html/body overflow-x hidden (가로 오버플로 차단). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-07-11 21:44:59 +09:00
sb	38ac028c15	fix: frequent-breeds 실패해도 한줄평/메이트 로딩 안 깨지게 (catch) CI / build (push) Failing after 14m41s Details 통계 엔드포인트 미배포(구버전 백엔드) 시에도 홈 화면 정상 동작. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-07-11 19:18:18 +09:00
sb	c3231c59ac	feat: 도착 버튼 아래 '이 시간대 자주 보이는 견종' 한 줄 표시 CI / build (push) Failing after 11m2s Details Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-07-11 19:15:41 +09:00
sb	3bebe77cab	chore: UI 문구 '우리 개' → '우리 강아지' CI / build (push) Failing after 15m8s Details Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-07-11 19:00:34 +09:00
sb	eac3098680	fix: 상/하단 이중 safe-area 여백 제거 네이티브 웹뷰가 이미 노치/홈바 아래로 배치되는데 CSS safe-top/safe-bottom 이 env inset 을 한 번 더 더해 헤더/푸터 여백이 이중으로 잡히던 문제. CSS 추가 여백을 0으로 하여 네이티브 인셋만 사용. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-07-11 19:00:34 +09:00