feat: 백엔드 API 연동 (HTTP 클라이언트 + 홈 화면 실데이터)

- VITE_API_BASE_URL 기반 fetch 클라이언트 및 ApiError 처리
- api/spots, api/matches 타입드 모듈
- HomePage: 스팟/한줄평/메이트 실제 로드, 체크인·매칭 신청 API 연동
- 임시 세션 스토어(인증 도입 전, userId/dogId)
- 로딩/에러/빈 상태 처리

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/pages/HomePage.vue

@@ -4,15 +4,25 @@
     <q-card flat bordered class="map-placeholder flex flex-center q-mb-md">
       <div class="text-center text-grey-6">
         <q-icon name="map" size="48px" color="secondary" />
-        <div class="q-mt-sm text-caption">지도 영역 (스팟 앵커 표시 예정)</div>
+        <div class="q-mt-sm text-caption">
+          {{ currentSpot ? currentSpot.name : '스팟 불러오는 중…' }}
+        </div>
       </div>
     </q-card>
 
+    <!-- 로딩 / 에러 -->
+    <q-banner v-if="loadError" dense class="bg-red-1 text-red-8 q-mb-md rounded-borders">
+      <template #avatar><q-icon name="wifi_off" /></template>
+      백엔드에 연결하지 못했습니다. (서버 실행 여부를 확인하세요)
+    </q-banner>
+
     <!-- 체크인 -->
     <q-btn
       color="primary"
       class="full-width q-py-sm"
       unelevated
+      :loading="checkingIn"
+      :disable="!currentSpot"
       icon="place"
       :label="checkedIn ? '체크인 완료 · 여기 있어요!' : '나 지금 여기 도착!'"
       @click="onCheckIn"
@@ -20,39 +30,43 @@
 
     <!-- 스팟 한줄평 (네이버 지도식 태그형) -->
     <div class="text-subtitle1 text-weight-bold q-mt-lg q-mb-sm">
-      한강공원 산책로 · 오늘의 한줄평
+      {{ currentSpot ? currentSpot.name : '스팟' }} · 오늘의 한줄평
     </div>
-    <div class="row q-gutter-sm">
+    <div v-if="reviews.length" class="row q-gutter-sm">
       <q-chip
-        v-for="review in spotReviews"
-        :key="review"
+        v-for="review in reviews"
+        :key="review.id"
         color="secondary"
         text-color="accent"
         icon="tag"
       >
-        {{ review }}
+        {{ review.tag || review.content }}
       </q-chip>
     </div>
+    <div v-else class="text-caption text-grey-5">아직 한줄평이 없어요.</div>
 
     <!-- 현재 체크인 중인 메이트 -->
     <div class="text-subtitle1 text-weight-bold q-mt-lg q-mb-sm">지금 이 스팟의 산책 메이트</div>
-    <q-card
-      v-for="mate in mates"
-      :key="mate.name"
-      flat
-      bordered
-      class="q-mb-sm"
-    >
+    <div v-if="!mates.length" class="text-caption text-grey-5">체크인 중인 메이트가 없어요.</div>
+    <q-card v-for="mate in mates" :key="mate.dogId" flat bordered class="q-mb-sm">
       <q-item>
         <q-item-section avatar>
           <q-avatar color="secondary" text-color="accent" icon="pets" />
         </q-item-section>
         <q-item-section>
           <q-item-label class="text-weight-medium">{{ mate.name }}</q-item-label>
-          <q-item-label caption>{{ mate.traits.join(' · ') }}</q-item-label>
+          <q-item-label caption>{{ mate.breed || '견종 미상' }}</q-item-label>
         </q-item-section>
         <q-item-section side>
-          <q-btn dense flat round color="primary" icon="chat_bubble_outline" />
+          <q-btn
+            dense
+            unelevated
+            color="primary"
+            icon="favorite"
+            label="매칭"
+            :loading="matchingDogId === mate.dogId"
+            @click="onMatch(mate)"
+          />
         </q-item-section>
       </q-item>
     </q-card>
@@ -60,27 +74,77 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useQuasar } from 'quasar'
+import { spotsApi, type Mate, type Review, type Spot } from '@/api/spots'
+import { matchesApi } from '@/api/matches'
+import { ApiError } from '@/api/http'
+import { useSessionStore } from '@/stores/session'
 
 const $q = useQuasar()
+const session = useSessionStore()
+
+const currentSpot = ref<Spot | null>(null)
+const reviews = ref<Review[]>([])
+const mates = ref<Mate[]>([])
 const checkedIn = ref(false)
+const checkingIn = ref(false)
+const matchingDogId = ref<number | null>(null)
+const loadError = ref(false)
 
-const spotReviews = ['진드기 많아요', '풀숲 무성함', '그늘 시원해요', '물그릇 있음']
+onMounted(load)
 
-const mates = [
-  { name: '콩이 (말티즈)', traits: ['대형견 무서워함', '사회화 훈련 중'] },
-  { name: '보리 (리트리버)', traits: ['터그놀이 매니아', '사람 좋아함'] },
-]
+async function load() {
+  loadError.value = false
+  try {
+    const spots = await spotsApi.list()
+    currentSpot.value = spots[0] ?? null
+    if (currentSpot.value) {
+      await refreshSpot(currentSpot.value.id)
+    }
+  } catch (e) {
+    loadError.value = true
+    console.error(e)
+  }
+}
 
-function onCheckIn() {
-  checkedIn.value = !checkedIn.value
-  $q.notify({
-    color: checkedIn.value ? 'primary' : 'grey-6',
-    message: checkedIn.value ? '체크인 완료! 스팟 채팅이 열렸어요.' : '체크아웃 되었습니다.',
-    icon: checkedIn.value ? 'place' : 'logout',
-    position: 'top',
-  })
+async function refreshSpot(spotId: number) {
+  const [r, m] = await Promise.all([spotsApi.reviews(spotId), spotsApi.mates(spotId)])
+  reviews.value = r
+  mates.value = m
+}
+
+async function onCheckIn() {
+  if (!currentSpot.value) return
+  checkingIn.value = true
+  try {
+    await spotsApi.checkIn(currentSpot.value.id, session.userId, session.dogId)
+    checkedIn.value = true
+    await refreshSpot(currentSpot.value.id)
+    $q.notify({ color: 'primary', message: '체크인 완료! 스팟 채팅이 열렸어요.', icon: 'place', position: 'top' })
+  } catch (e) {
+    notifyError(e)
+  } finally {
+    checkingIn.value = false
+  }
+}
+
+async function onMatch(mate: Mate) {
+  matchingDogId.value = mate.dogId
+  try {
+    await matchesApi.create(session.dogId, mate.dogId)
+    $q.notify({ color: 'positive', message: `${mate.name}에게 매칭을 신청했어요!`, icon: 'favorite', position: 'top' })
+  } catch (e) {
+    notifyError(e)
+  } finally {
+    matchingDogId.value = null
+  }
+}
+
+function notifyError(e: unknown) {
+  const message =
+    e instanceof ApiError ? e.message : '요청 중 오류가 발생했습니다. 서버 연결을 확인하세요.'
+  $q.notify({ color: 'negative', message, icon: 'error', position: 'top' })
 }
 </script>