feat: 지도 카카오 → 네이버 전환 (NCP Maps)

- HomePage 지도 컴포넌트 KakaoMap → NaverMap - NaverMap 에 확대/축소 컨트롤 + 지도 클릭 시 최근접 스팟 선택 이식 (카카오에 있던 기능 동등하게) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
fix(layout): 상·하단 safe-area 적용 — 헤더/풋터가 상태바·내비바와 겹침 해소
2026-07-12 13:13:39 +09:00 · 2026-07-12 12:46:09 +09:00 · 2026-07-12 12:38:26 +09:00 · 2026-07-12 12:23:02 +09:00 · 2026-07-12 11:30:11 +09:00 · 2026-07-12 11:27:50 +09:00
22 changed files with 847 additions and 240 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)
@@ -1,7 +1,7 @@
 import type { CapacitorConfig } from '@capacitor/cli'

 const config: CapacitorConfig = {
-  appId: 'kr.sblog.dognation',
+  appId: 'com.dog.dognation',
  appName: '산책갈개',
  webDir: 'dist',
  ios: {
@@ -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>
@@ -12,6 +12,7 @@
        "@capacitor/app": "^8.0.0",
        "@capacitor/core": "^8.3.4",
        "@capacitor/geolocation": "^8.2.0",
+        "@capgo/capacitor-social-login": "^8.3.36",
        "@quasar/extras": "^1.16.12",
        "@stomp/stompjs": "^7.3.0",
        "pinia": "^2.3.0",
@@ -187,6 +188,18 @@
      "integrity": "sha512-/C1FUo8/OkKuAT4nCIu/34ny9siNHr9qtFezu4kxm6GY1wNFxrCFWjfYx5C1tUhVGz3fxBABegupkpjXvjCHrw==",
      "license": "ISC"
    },
+    "node_modules/@capgo/capacitor-social-login": {
+      "version": "8.3.36",
+      "resolved": "https://registry.npmjs.org/@capgo/capacitor-social-login/-/capacitor-social-login-8.3.36.tgz",
+      "integrity": "sha512-Y4HYjEJablzbHHwPBrbC2UvHVPsR0bAyCAqBzVBoUEOf0UFHAHyTP3gD9JUTKP/iERU8I+6IA2RWtLqDePCNuA==",
+      "license": "MPL-2.0",
+      "dependencies": {
+        "tslib": "^2.8.1"
+      },
+      "peerDependencies": {
+        "@capacitor/core": ">=8.0.0"
+      }
+    },
    "node_modules/@esbuild/aix-ppc64": {
      "version": "0.25.12",
      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz",
@@ -16,6 +16,7 @@
    "@capacitor/app": "^8.0.0",
    "@capacitor/core": "^8.3.4",
    "@capacitor/geolocation": "^8.2.0",
+    "@capgo/capacitor-social-login": "^8.3.36",
    "@quasar/extras": "^1.16.12",
    "@stomp/stompjs": "^7.3.0",
    "pinia": "^2.3.0",
@@ -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}`),
+}
@@ -16,6 +16,9 @@ export interface Dog {
  gender: string | null
  neutered: boolean
  imageUrl: string | null
+  prefGender: string
+  prefAge: string
+  prefNeutered: string
  traits: TraitTag[]
 }

@@ -27,6 +30,9 @@ export interface DogSaveRequest {
  gender?: string | null
  neutered?: boolean
  imageUrl?: string | null
+  prefGender?: string
+  prefAge?: string
+  prefNeutered?: string
  traitIds?: number[]
 }

@@ -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
@@ -42,6 +42,8 @@ export const spotsApi = {
    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}`),
+  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>
@@ -1,147 +0,0 @@
-<template>
-  <q-dialog :model-value="modelValue" @update:model-value="$emit('update:modelValue', $event)" maximized>
-    <q-card class="column no-wrap">
-      <q-toolbar class="bg-primary text-white">
-        <q-icon name="chat" class="q-mr-sm" />
-        <q-toolbar-title>{{ spotName }} 채팅</q-toolbar-title>
-        <q-chip dense :color="connected ? 'positive' : 'grey-5'" text-color="white">
-          {{ connected ? '실시간' : '연결 중…' }}
-        </q-chip>
-        <q-btn flat round dense icon="close" @click="close" />
-      </q-toolbar>
-
-      <!-- 메시지 목록 -->
-      <q-scroll-area ref="scrollArea" class="col q-pa-md" style="background: #f4faff">
-        <div v-if="!messages.length" class="text-center text-grey-5 q-mt-lg">
-          첫 메시지를 남겨보세요. 이 스팟에 체크인한 이웃들과 대화해요.
-        </div>
-        <div
-          v-for="m in messages"
-          :key="m.id"
-          class="q-mb-sm row"
-          :class="isMine(m) ? 'justify-end' : 'justify-start'"
-        >
-          <div :class="isMine(m) ? 'msg mine' : 'msg'">
-            <div v-if="!isMine(m)" class="text-caption text-weight-medium text-accent">
-              {{ m.senderNickname }}
-            </div>
-            <div>{{ m.content }}</div>
-            <div class="text-caption text-grey-6 text-right">{{ time(m.createdAt) }}</div>
-          </div>
-        </div>
-      </q-scroll-area>
-
-      <!-- 입력 -->
-      <div class="row q-pa-sm q-gutter-sm bg-white items-center">
-        <q-input
-          v-model="draft"
-          class="col"
-          dense
-          outlined
-          placeholder="메시지 입력…"
-          maxlength="1000"
-          :disable="!connected"
-          @keyup.enter="send"
-        />
-        <q-btn round color="primary" icon="send" :disable="!connected || !draft.trim()" @click="send" />
-      </div>
-    </q-card>
-  </q-dialog>
-</template>
-
-<script setup lang="ts">
-import { nextTick, onBeforeUnmount, ref, watch } from 'vue'
-import { QScrollArea, useQuasar } from 'quasar'
-import { chatApi, type ChatMessage } from '@/api/chat'
-import { createSpotChat } from '@/lib/chatSocket'
-import { useAuthStore } from '@/stores/auth'
-
-const props = defineProps<{ modelValue: boolean; spotId: number; spotName: string }>()
-const emit = defineEmits<{ (e: 'update:modelValue', v: boolean): void }>()
-
-const $q = useQuasar()
-const auth = useAuthStore()
-
-const messages = ref<ChatMessage[]>([])
-const draft = ref('')
-const connected = ref(false)
-const scrollArea = ref<QScrollArea | null>(null)
-let chat: ReturnType<typeof createSpotChat> | null = null
-
-watch(
-  () => props.modelValue,
-  async (open) => {
-    if (open) await start()
-    else stop()
-  },
-)
-
-onBeforeUnmount(stop)
-
-async function start() {
-  messages.value = []
-  try {
-    messages.value = await chatApi.history(props.spotId)
-    scrollToBottom()
-  } catch {
-    // 히스토리 실패해도 실시간 연결은 시도
-  }
-  chat = createSpotChat(
-    props.spotId,
-    (m) => {
-      messages.value.push(m)
-      scrollToBottom()
-    },
-    (c) => (connected.value = c),
-  )
-  chat.activate()
-}
-
-function stop() {
-  chat?.deactivate()
-  chat = null
-  connected.value = false
-}
-
-function send() {
-  const text = draft.value.trim()
-  if (!text || !chat) return
-  chat.send(text)
-  draft.value = ''
-}
-
-function close() {
-  emit('update:modelValue', false)
-}
-
-function isMine(m: ChatMessage) {
-  return m.senderId === auth.member?.id
-}
-
-function time(iso: string) {
-  const d = new Date(iso)
-  return d.toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit' })
-}
-
-function scrollToBottom() {
-  nextTick(() => {
-    const el = scrollArea.value
-    if (el) el.setScrollPercentage('vertical', 1, 150)
-  })
-}
-</script>
-
-<style scoped>
-.msg {
-  max-width: 76%;
-  padding: 8px 12px;
-  border-radius: 12px;
-  background: #ffffff;
-  border: 1px solid #e3eef7;
-  word-break: break-word;
-}
-.msg.mine {
-  background: #d7ecfb;
-  border-color: #cfe8fb;
-}
-</style>
@@ -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
 }
@@ -43,8 +43,18 @@ onMounted(async () => {
    map = new nv.maps.Map(mapEl.value, {
      center: new nv.maps.LatLng(center.lat, center.lng),
      zoom: 14,
+      // 확대/축소 +/- 컨트롤 (핀치 줌도 함께 동작)
+      zoomControl: true,
+      zoomControlOptions: { position: nv.maps.Position.RIGHT_CENTER },
    })
    infoWindow = new nv.maps.InfoWindow({ content: '', borderWidth: 0, disableAnchor: true })
+    // 지도 아무 곳이나 탭하면 가장 가까운 스팟 선택 (마커가 겹쳐도 선택 가능)
+    nv.maps.Event.addListener(map, 'click', (e: naver.maps.PointerEvent) => {
+      if (!e?.coord) return
+      const coord = e.coord as naver.maps.LatLng
+      const spot = nearestSpot(coord.lat(), coord.lng())
+      if (spot) emit('select', spot.id)
+    })
    renderMarkers(nv)
  } catch (e) {
    errorMsg.value = `${(e as Error).message} 지도 키(VITE_NAVER_MAP_CLIENT_ID)를 설정하세요.`
@@ -84,6 +94,23 @@ function firstCenter() {
  return withCoord ? { lat: withCoord.latitude!, lng: withCoord.longitude! } : DEFAULT_CENTER
 }

+/** 클릭 좌표에서 가장 가까운 스팟(위경도 제곱거리 최소). */
+function nearestSpot(lat: number, lng: number): Spot | null {
+  let best: Spot | null = null
+  let bestDist = Infinity
+  for (const s of props.spots) {
+    if (s.latitude == null || s.longitude == null) continue
+    const dLat = s.latitude - lat
+    const dLng = s.longitude - lng
+    const dist = dLat * dLat + dLng * dLng
+    if (dist < bestDist) {
+      bestDist = dist
+      best = s
+    }
+  }
+  return best
+}
+
 function renderMarkers(nv: typeof naver) {
  markers.forEach((m) => m.setMap(null))
  markers.clear()
@@ -1,18 +1,26 @@
 // 전역 스타일 — 하늘색 파스텔 배경
+html,
 body {
  background: #F4FAFF;
+  // input 포커스/키보드 시 가로 스크롤(오버플로) 방지
+  overflow-x: hidden;
+  max-width: 100%;
 }

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

-// iOS 노치/홈바 safe-area 대응.
-// 네이티브 웹뷰가 이미 safe-area 아래로 배치돼(이중 여백 방지) CSS 추가 여백은 0.
-// (제목이 상태바에 겹치면 이 값을 소폭 늘린다)
+// 토스트(Notify)가 상단 노치/상태바에 겹치지 않도록 safe-area 만큼 아래로.
+.q-notifications__list--top {
+  padding-top: env(safe-area-inset-top);
+}
+
+// 노치/상태바/홈바 safe-area 대응 (edge-to-edge 웹뷰).
+// 헤더는 상태바 높이만큼, 풋터는 홈 인디케이터 높이만큼 콘텐츠를 내부로 밀어 겹침 방지.
 .safe-top {
-  padding-top: 0;
+  padding-top: env(safe-area-inset-top);
 }
 .safe-bottom {
-  padding-bottom: 0;
+  padding-bottom: env(safe-area-inset-bottom);
 }
@@ -78,7 +78,20 @@
    </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)
@@ -24,42 +24,6 @@ function stompClient(onConnect: (c: Client) => void, onStatus?: (connected: bool
  return client
 }

-/**
- * 스팟 채팅용 STOMP 클라이언트.
- * connect 후 스팟 토픽을 구독하고, send 로 메시지를 전송한다.
- */
-export function createSpotChat(
-  spotId: number,
-  onMessage: (m: ChatMessage) => void,
-  onStatus?: (connected: boolean) => void,
-) {
-  const client = new Client({
-    brokerURL: wsUrl(),
-    connectHeaders: { Authorization: `Bearer ${tokenStore.get() ?? ''}` },
-    reconnectDelay: 3000,
-    onConnect: () => {
-      onStatus?.(true)
-      client.subscribe(`/topic/spots/${spotId}`, (msg: IMessage) => {
-        onMessage(JSON.parse(msg.body) as ChatMessage)
-      })
-    },
-    onDisconnect: () => onStatus?.(false),
-    onWebSocketClose: () => onStatus?.(false),
-  })
-
-  return {
-    activate: () => client.activate(),
-    deactivate: () => client.deactivate(),
-    send: (content: string) => {
-      client.publish({
-        destination: `/app/spots/${spotId}/chat`,
-        body: JSON.stringify({ content }),
-      })
-    },
-    isConnected: () => client.connected,
-  }
-}
-
 /** 매칭 수락으로 열린 1:1 채팅용 STOMP 클라이언트. */
 export function createMatchChat(
  matchId: number,
@@ -0,0 +1,51 @@
+import { Capacitor } from '@capacitor/core'
+import { SocialLogin } from '@capgo/capacitor-social-login'
+
+/**
+ * 네이티브(Capacitor) 구글 로그인.
+ * 웹뷰에서는 GIS(팝업/FedCM)가 동작하지 않으므로, 앱에서는 이 네이티브 흐름을 사용한다.
+ * 받은 ID 토큰은 웹 GIS 와 동일하게 백엔드 /api/auth/google 로 검증한다.
+ *  - Android: serverClientId(webClientId) 로 토큰을 받으므로 aud = 웹 클라 ID
+ *  - iOS: iOS 클라 ID 로 로그인 → aud = iOS 클라 ID (백엔드가 web/iOS 둘 다 허용)
+ */
+
+// iOS 구글 클라이언트 ID (공개값). iOS 네이티브 로그인용.
+const IOS_CLIENT_ID = '913571348421-5a9k5kosv2mfosskcc3tllv5h1h9nfrn.apps.googleusercontent.com'
+
+let initializedFor = ''
+
+/** 네이티브 플랫폼(iOS/Android) 여부 — 웹은 기존 GIS 사용. */
+export function isNativeGoogleAvailable(): boolean {
+  return Capacitor.isNativePlatform()
+}
+
+/**
+ * 네이티브 구글 로그인 → ID 토큰 반환.
+ * @param webClientId 백엔드가 aud 검증에 쓰는 웹 클라이언트 ID (serverClientId)
+ */
+export async function signInWithGoogle(webClientId: string): Promise<string> {
+  if (initializedFor !== webClientId) {
+    const google: {
+      webClientId: string
+      iOSClientId?: string
+      iOSServerClientId?: string
+    } = { webClientId }
+    if (Capacitor.getPlatform() === 'ios') {
+      google.iOSClientId = IOS_CLIENT_ID
+      google.iOSServerClientId = webClientId
+    }
+    await SocialLogin.initialize({ google })
+    initializedFor = webClientId
+  }
+  // scopes 를 넘기면 플러그인이 MainActivity 수정을 요구한다.
+  // 기본 로그인(Credential Manager)은 email·profile 이 ID 토큰에 포함되므로 scopes 불필요.
+  const res = await SocialLogin.login({
+    provider: 'google',
+    options: {},
+  })
+  const result = res.result as { idToken?: string | null }
+  if (!result?.idToken) {
+    throw new Error('구글 ID 토큰을 받지 못했습니다.')
+  }
+  return result.idToken
+}
@@ -2,7 +2,7 @@
  <q-page class="q-pa-md">
    <!-- 카카오 지도: 스팟 마커 표시, 마커 클릭 시 해당 스팟 선택 -->
    <q-card flat bordered class="q-mb-md overflow-hidden">
-      <KakaoMap :spots="spots" :selected-id="currentSpot?.id ?? null" @select="onSelectSpot" />
+      <NaverMap :spots="spots" :selected-id="currentSpot?.id ?? null" @select="onSelectSpot" />
    </q-card>

    <!-- 로딩 / 에러 -->
@@ -23,14 +23,29 @@
      @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="text-caption text-grey-6 q-mb-sm">
+        추천 조건은 <span class="text-primary">우리 강아지 &gt; AI 추천 조건</span>에서 설정해요
      </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 +59,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 +102,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
@@ -117,7 +144,8 @@ import { ApiError } from '@/api/http'
 import { useAuthStore } from '@/stores/auth'
 import { useDogsStore } from '@/stores/dogs'
 import { useMatchingStore } from '@/stores/matching'
-import KakaoMap from '@/components/KakaoMap.vue'
+import NaverMap from '@/components/NaverMap.vue'
+import AffinityBadges from '@/components/AffinityBadges.vue'

 const $q = useQuasar()
 const auth = useAuthStore()
@@ -131,6 +159,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)
@@ -169,12 +198,15 @@ 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() {
@@ -188,7 +220,7 @@ async function onCheckIn() {
    await spotsApi.checkIn(currentSpot.value.id, currentUserId(), dogs.currentDogId)
    checkedIn.value = true
    await refreshSpot(currentSpot.value.id)
-    $q.notify({ color: 'primary', message: '체크인 완료! 스팟 채팅이 열렸어요.', icon: 'place', position: 'top' })
+    $q.notify({ color: 'primary', message: '체크인 완료!', icon: 'place', position: 'top' })
    loadAiMates() // 체크인 후 AI 궁합 추천 (비동기)
  } catch (e) {
    notifyError(e)
@@ -197,7 +229,8 @@ async function onCheckIn() {
  }
 }

-/** 체크인 후 AI 궁합 추천 로드 — 이 스팟의 강아지 중 내 개와 사이좋게 지낼 만한 목록. */
+/** 체크인 후 AI 궁합 추천 로드 — 이 스팟의 강아지 중 내 개와 사이좋게 지낼 만한 목록.
+ *  추천 조건(성별/나이/중성화)은 내 강아지 프로필에 저장된 값을 백엔드가 사용한다. */
 async function loadAiMates() {
  if (!currentSpot.value || dogs.currentDogId == null) return
  aiLoading.value = true
@@ -12,8 +12,20 @@
    </div>

    <q-card flat class="login-card q-pa-lg">
-      <!-- 구글 로그인 버튼(GIS 렌더링 영역) -->
-      <div ref="googleBtn" class="flex flex-center q-mb-md"></div>
+      <!-- 구글 로그인: 앱(네이티브)은 버튼, 웹은 GIS 렌더링 -->
+      <q-btn
+        v-if="isNative"
+        class="full-width q-py-sm q-mb-md"
+        color="white"
+        text-color="grey-9"
+        unelevated
+        icon="mdi-google"
+        label="Google로 계속하기"
+        :loading="googleLoading"
+        :disable="!googleClientId"
+        @click="onGoogleNative"
+      />
+      <div v-else ref="googleBtn" class="flex flex-center q-mb-md"></div>
      <div v-if="googleError" class="text-caption text-negative text-center q-mb-md">
        {{ googleError }}
      </div>
@@ -63,6 +75,7 @@ import { useAuthStore } from '@/stores/auth'
 import { authApi } from '@/api/auth'
 import { ApiError } from '@/api/http'
 import { isAppleSignInAvailable, signInWithApple } from '@/lib/appleAuth'
+import { isNativeGoogleAvailable, signInWithGoogle } from '@/lib/googleAuth'

 const router = useRouter()
 const route = useRoute()
@@ -71,6 +84,9 @@ const auth = useAuthStore()

 const googleBtn = ref<HTMLElement | null>(null)
 const googleError = ref('')
+const googleClientId = ref('')
+const googleLoading = ref(false)
+const isNative = isNativeGoogleAvailable()
 const appleLoading = ref(false)
 const appleAvailable = isAppleSignInAvailable()
 const devLoading = ref(false)
@@ -85,6 +101,9 @@ async function initGoogle() {
      googleError.value = '구글 로그인이 아직 설정되지 않았습니다.'
      return
    }
+    googleClientId.value = clientId
+    // 앱(네이티브)은 버튼 클릭 시 네이티브 로그인 → GIS 초기화 불필요
+    if (isNative) return
    await loadGsi()
    const google = (window as unknown as { google: any }).google
    google.accounts.id.initialize({
@@ -124,6 +143,21 @@ function loadGsi(): Promise<void> {
  })
 }

+async function onGoogleNative() {
+  if (!googleClientId.value) return
+  googleLoading.value = true
+  try {
+    const idToken = await signInWithGoogle(googleClientId.value)
+    await auth.loginGoogle(idToken)
+    redirectAfterLogin()
+  } catch (e) {
+    if (isAppleCancel(e)) return
+    notifyError(e)
+  } finally {
+    googleLoading.value = false
+  }
+}
+
 async function onApple() {
  appleLoading.value = true
  try {
@@ -164,8 +198,10 @@ function redirectAfterLogin() {
 }

 function notifyError(e: unknown) {
-  const message = e instanceof ApiError ? e.message : '로그인에 실패했습니다.'
-  $q.notify({ color: 'negative', message, icon: 'error', position: 'top' })
+  let message = '로그인에 실패했습니다.'
+  if (e instanceof ApiError) message = e.message
+  else if (e instanceof Error && e.message) message = e.message // 네이티브 플러그인 오류 노출(진단용)
+  $q.notify({ color: 'negative', message, icon: 'error', position: 'top', timeout: 6000 })
 }
 </script>

@@ -53,7 +53,14 @@
          <div class="q-ml-md">
            <div class="text-h6">{{ current.name }}</div>
            <div class="text-caption text-grey-7">
-              {{ current.breed || '견종 미상' }}<span v-if="current.size"> · {{ sizeLabel(current.size) }}</span>
+              {{ current.breed || '견종 미상' }}<span v-if="current.size"> · {{ sizeLabel(current.size) }}</span
+              ><span v-if="current.gender"> · {{ genderLabel(current.gender) }}</span
+              ><span v-if="dogAge(current.birthDate)"> · {{ dogAge(current.birthDate) }}</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 />
@@ -75,11 +82,47 @@
          {{ tag.label }}
        </q-chip>
      </div>
+
+      <!-- AI 추천 조건 (원하는 메이트 조건 → AI 분석 반영) -->
+      <div class="text-subtitle1 text-weight-bold q-mb-xs row items-center">
+        <q-icon name="auto_awesome" color="primary" size="20px" class="q-mr-xs" />AI 추천 조건
+      </div>
+      <div class="text-caption text-grey-6 q-mb-sm">
+        AI 추천 찰떡 메이트를 찾을 때 이 조건을 반영해요
+      </div>
+      <div class="q-mb-sm">
+        <div class="text-caption text-grey-7 q-mb-xs">선호 성별</div>
+        <q-btn-toggle
+          v-model="prefGender"
+          spread dense unelevated no-caps size="sm"
+          toggle-color="primary" color="grey-3" text-color="grey-8"
+          :options="prefGenderOptions"
+        />
+      </div>
+      <div class="q-mb-sm">
+        <div class="text-caption text-grey-7 q-mb-xs">선호 연령</div>
+        <q-btn-toggle
+          v-model="prefAge"
+          spread dense unelevated no-caps size="sm"
+          toggle-color="primary" color="grey-3" text-color="grey-8"
+          :options="prefAgeOptions"
+        />
+      </div>
+      <div class="q-mb-md">
+        <div class="text-caption text-grey-7 q-mb-xs">선호 중성화</div>
+        <q-btn-toggle
+          v-model="prefNeutered"
+          spread dense unelevated no-caps size="sm"
+          toggle-color="primary" color="grey-3" text-color="grey-8"
+          :options="prefNeuteredOptions"
+        />
+      </div>
+
      <q-btn
        color="primary"
        unelevated
        icon="save"
-        label="성향 저장"
+        label="저장"
        :loading="saving"
        :disable="!dirty"
        @click="saveTraits"
@@ -93,15 +136,116 @@
        <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 />
-          <q-select
-            v-model="form.size"
-            :options="sizeOptions"
-            label="크기"
-            dense
-            outlined
-            emit-value
-            map-options
-          />
+
+          <div>
+            <div class="text-caption text-grey-7 q-mb-xs">크기</div>
+            <q-btn-toggle
+              v-model="form.size"
+              spread
+              unelevated
+              no-caps
+              toggle-color="primary"
+              color="grey-3"
+              text-color="grey-8"
+              :options="sizeOptions"
+            />
+          </div>
+
+          <div>
+            <div class="text-caption text-grey-7 q-mb-xs">성별</div>
+            <q-btn-toggle
+              v-model="form.gender"
+              spread
+              unelevated
+              no-caps
+              toggle-color="primary"
+              color="grey-3"
+              text-color="grey-8"
+              :options="[
+                { label: '남아', value: 'MALE' },
+                { label: '여아', value: 'FEMALE' },
+              ]"
+            />
+          </div>
+
+          <div>
+            <div class="text-caption text-grey-7 q-mb-xs">
+              연령<span v-if="ageText" class="text-primary q-ml-xs">· {{ ageText }}</span>
+            </div>
+            <div class="row q-col-gutter-sm">
+              <q-select
+                v-model="form.birthYear"
+                :options="yearOptions"
+                label="출생 연도"
+                class="col"
+                dense
+                outlined
+                emit-value
+                map-options
+              />
+              <q-select
+                v-model="form.birthMonth"
+                :options="monthOptions"
+                label="월"
+                class="col-5"
+                dense
+                outlined
+                emit-value
+                map-options
+              />
+            </div>
+          </div>
+
+          <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>
+
+          <!-- AI 추천 조건: 원하는 메이트 조건 (AI 분석에 반영) -->
+          <q-separator class="q-my-xs" />
+          <div class="text-subtitle2 row items-center">
+            <q-icon name="auto_awesome" color="primary" size="18px" class="q-mr-xs" />AI 추천 조건
+          </div>
+          <div class="text-caption text-grey-6 q-mb-xs">이런 친구를 찾아달라고 AI에게 알려줘요</div>
+          <div>
+            <div class="text-caption text-grey-7 q-mb-xs">선호 성별</div>
+            <q-btn-toggle
+              v-model="form.prefGender"
+              spread dense unelevated no-caps size="sm"
+              toggle-color="primary" color="grey-3" text-color="grey-8"
+              :options="prefGenderOptions"
+            />
+          </div>
+          <div>
+            <div class="text-caption text-grey-7 q-mb-xs">선호 연령</div>
+            <q-btn-toggle
+              v-model="form.prefAge"
+              spread dense unelevated no-caps size="sm"
+              toggle-color="primary" color="grey-3" text-color="grey-8"
+              :options="prefAgeOptions"
+            />
+          </div>
+          <div>
+            <div class="text-caption text-grey-7 q-mb-xs">선호 중성화</div>
+            <q-btn-toggle
+              v-model="form.prefNeutered"
+              spread dense unelevated no-caps size="sm"
+              toggle-color="primary" color="grey-3" text-color="grey-8"
+              :options="prefNeuteredOptions"
+            />
+          </div>
        </q-card-section>
        <q-card-actions align="right">
          <q-btn flat label="취소" v-close-popup />
@@ -110,7 +254,7 @@
            unelevated
            label="등록"
            :loading="creating"
-            :disable="!form.name"
+            :disable="!form.name || form.neutered === null"
            @click="onCreate"
          />
        </q-card-actions>
@@ -124,6 +268,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 +276,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 +302,66 @@ const sizeOptions = [
  { label: '중형견', value: 'MEDIUM' },
  { label: '대형견', value: 'LARGE' },
 ]
-const form = reactive<{ name: string; breed: string; size: string | null }>({
+
+// AI 추천 조건 선택지 (ANY = 상관없음)
+const prefGenderOptions = [
+  { label: '상관없음', value: 'ANY' },
+  { label: '남아', value: 'MALE' },
+  { label: '여아', value: 'FEMALE' },
+]
+const prefAgeOptions = [
+  { label: '상관없음', value: 'ANY' },
+  { label: '퍼피', value: 'PUPPY' },
+  { label: '성견', value: 'ADULT' },
+  { label: '노령', value: 'SENIOR' },
+]
+const prefNeuteredOptions = [
+  { label: '상관없음', value: 'ANY' },
+  { label: '완료', value: 'YES' },
+  { label: '안 함', value: 'NO' },
+]
+
+const form = reactive<{
+  name: string
+  breed: string
+  size: string | null
+  gender: string | null
+  birthYear: number | null
+  birthMonth: number | null
+  neutered: boolean | null
+  prefGender: string
+  prefAge: string
+  prefNeutered: string
+}>({
  name: '',
  breed: '',
  size: null,
+  gender: null,
+  birthYear: null,
+  birthMonth: null,
+  neutered: null,
+  prefGender: 'ANY',
+  prefAge: 'ANY',
+  prefNeutered: 'ANY',
+})
+
+// 프로필 화면에서 편집하는 현재 강아지의 AI 추천 조건
+const prefGender = ref('ANY')
+const prefAge = ref('ANY')
+const prefNeutered = ref('ANY')
+
+// 출생 연도(올해 ~ 20년 전) / 월 선택지
+const thisYear = new Date().getFullYear()
+const yearOptions = Array.from({ length: 21 }, (_, i) => {
+  const y = thisYear - i
+  return { label: `${y}년`, value: y }
+})
+const monthOptions = Array.from({ length: 12 }, (_, i) => ({ label: `${i + 1}월`, value: i + 1 }))
+
+// 선택한 출생 연·월 → 연령 텍스트 (예: 2살 3개월)
+const ageText = computed(() => {
+  if (form.birthYear == null || form.birthMonth == null) return ''
+  return ageFromBirth(form.birthYear, form.birthMonth)
 })

 onMounted(async () => {
@@ -155,20 +372,26 @@ onMounted(async () => {
  }
 })

-// 대표 강아지가 바뀌면 선택된 성향 동기화
+// 대표 강아지가 바뀌면 선택된 성향 + AI 추천 조건 동기화
 watch(
  current,
  (d) => {
    selected.value = new Set(d?.traits.map((t) => t.id) ?? [])
+    prefGender.value = d?.prefGender ?? 'ANY'
+    prefAge.value = d?.prefAge ?? 'ANY'
+    prefNeutered.value = d?.prefNeutered ?? 'ANY'
  },
  { immediate: true },
 )

-// 변경 감지(저장 버튼 활성화)
+// 변경 감지(저장 버튼 활성화) — 성향 태그 또는 AI 추천 조건 변경 시
 const dirty = computed(() => {
  const orig = new Set(current.value?.traits.map((t) => t.id) ?? [])
  if (orig.size !== selected.value.size) return true
  for (const id of selected.value) if (!orig.has(id)) return true
+  if (prefGender.value !== (current.value?.prefGender ?? 'ANY')) return true
+  if (prefAge.value !== (current.value?.prefAge ?? 'ANY')) return true
+  if (prefNeutered.value !== (current.value?.prefNeutered ?? 'ANY')) return true
  return false
 })

@@ -182,6 +405,18 @@ function sizeLabel(size: string) {
  return sizeOptions.find((o) => o.value === size)?.label ?? size
 }

+function genderLabel(gender: string) {
+  return gender === 'MALE' ? '남아' : gender === 'FEMALE' ? '여아' : gender
+}
+
+/** birthDate(YYYY-MM-DD) → 연령 텍스트. 없으면 빈 문자열. */
+function dogAge(birthDate: string | null): string {
+  if (!birthDate) return ''
+  const [y, m] = birthDate.split('-').map(Number)
+  if (!y || !m) return ''
+  return ageFromBirth(y, m)
+}
+
 async function saveTraits() {
  if (!current.value) return
  saving.value = true
@@ -194,9 +429,12 @@ async function saveTraits() {
      gender: current.value.gender,
      neutered: current.value.neutered,
      imageUrl: current.value.imageUrl,
+      prefGender: prefGender.value,
+      prefAge: prefAge.value,
+      prefNeutered: prefNeutered.value,
      traitIds: [...selected.value],
    })
-    $q.notify({ color: 'primary', message: '성향을 저장했어요.', icon: 'check', position: 'top' })
+    $q.notify({ color: 'primary', message: '저장했어요.', icon: 'check', position: 'top' })
  } catch (e) {
    notifyError(e)
  } finally {
@@ -208,13 +446,36 @@ function openCreate() {
  form.name = ''
  form.breed = ''
  form.size = null
+  form.gender = null
+  form.birthYear = null
+  form.birthMonth = null
+  form.neutered = null
+  form.prefGender = 'ANY'
+  form.prefAge = 'ANY'
+  form.prefNeutered = 'ANY'
  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 })
+    // 출생 연·월 → birthDate (해당 월 1일). 둘 다 선택해야 저장.
+    const birthDate =
+      form.birthYear != null && form.birthMonth != null
+        ? `${form.birthYear}-${String(form.birthMonth).padStart(2, '0')}-01`
+        : null
+    await dogs.createDog({
+      name: form.name,
+      breed: form.breed || null,
+      size: form.size,
+      gender: form.gender,
+      birthDate,
+      neutered: form.neutered,
+      prefGender: form.prefGender,
+      prefAge: form.prefAge,
+      prefNeutered: form.prefNeutered,
+    })
    createOpen.value = false
    $q.notify({ color: 'primary', message: `${form.name} 등록 완료!`, icon: 'pets', position: 'top' })
  } catch (e) {
@@ -224,6 +485,17 @@ async function onCreate() {
  }
 }

+/** 출생 연·월로 연령 텍스트 계산 (예: 2살 3개월 / 5개월). */
+function ageFromBirth(year: number, month: number): string {
+  const now = new Date()
+  let months = (now.getFullYear() - year) * 12 + (now.getMonth() + 1 - month)
+  if (months < 0) months = 0
+  const y = Math.floor(months / 12)
+  const mo = months % 12
+  if (y <= 0) return `${mo}개월`
+  return mo > 0 ? `${y}살 ${mo}개월` : `${y}살`
+}
+
 async function onDelete() {
  if (!current.value) return
  $q.dialog({
@@ -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	060b458eb9	feat: 지도 카카오 → 네이버 전환 (NCP Maps) CI / build (push) Failing after 11m59s Details - HomePage 지도 컴포넌트 KakaoMap → NaverMap - NaverMap 에 확대/축소 컨트롤 + 지도 클릭 시 최근접 스팟 선택 이식 (카카오에 있던 기능 동등하게) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-07-12 13:13:39 +09:00
ByungCheol	ce66565b04	fix(layout): 상·하단 safe-area 적용 — 헤더/풋터가 상태바·내비바와 겹침 해소 CI / build (push) Failing after 11m49s Details Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-07-12 12:46:09 +09:00
ByungCheol	08a88f9198	fix(login): 네이티브 구글 로그인 scopes 제거 (MainActivity 수정 요구 오류 해소) CI / build (push) Failing after 12m13s Details Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-07-12 12:38:26 +09:00
ByungCheol	8386974ec9	fix(login): 실제 오류 메시지 노출(진단용) + 토스트 노치 겹침 safe-area 처리 CI / build (push) Successful in 30s Details Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-07-12 12:23:02 +09:00
ByungCheol	d4839678d1	feat(auth): 네이티브 구글 로그인 iOS 클라이언트 ID 설정(iOSClientId/iOSServerClientId) CI / build (push) Failing after 13m33s Details Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-07-12 11:30:11 +09:00
sb	f2d29a838a	chore: createSpotChat 제거 (스팟 채팅 정리 후속) CI / build (push) Failing after 14m16s Details Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-07-12 11:27:50 +09:00
sb	8457f83f17	feat: 강아지 등록 개선(크기 토글·성별·연령) + AI 추천 조건 - 등록 폼: 크기 셀렉트→토글, 성별(남아/여아)·연령(출생 연·월) 추가 - 프로필/등록에 'AI 추천 조건'(선호 성별/연령/중성화) 섹션 - HomePage AI 섹션의 중성화 토글 제거 → 저장된 조건을 백엔드가 사용 - 체크인 완료 알림 문구에서 스팟 채팅 문구 제거 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-07-12 11:27:50 +09:00
sb	7dc13cbb24	chore: 스팟 채팅 잔여 코드 제거 (미사용 ChatDialog·createSpotChat) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-07-12 11:27:50 +09:00
ByungCheol	7dec505d08	chore(app): 앱 패키지 kr.sblog.dognation → com.dog.dognation (구글 OAuth Android 클라 일치) CI / build (push) Failing after 15m6s Details Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-07-12 11:15:33 +09:00
ByungCheol	7f18d18a11	feat(auth): 앱(네이티브) 구글 로그인 — @capgo/capacitor-social-login CI / build (push) Failing after 12m48s Details - 웹은 기존 GIS 유지, Capacitor 네이티브(APK)는 네이티브 구글 로그인 사용 (웹뷰에서 GIS 팝업/FedCM 미동작 대응) - 받은 ID 토큰은 기존과 동일하게 백엔드 /api/auth/google 로 검증 - src/lib/googleAuth.ts + LoginPage 네이티브/웹 분기 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-07-12 11:02:51 +09:00
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