dognation_PT/src/pages/HomePage.vue

<template>
  <q-page class="q-pa-md">
    <!-- 지도 영역 (추후 네이버/카카오 지도 SDK 연동 자리) -->
    <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">
          {{ 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"
    />

    <!-- 스팟 한줄평 (네이버 지도식 태그형) -->
    <div class="text-subtitle1 text-weight-bold q-mt-lg q-mb-sm">
      {{ currentSpot ? currentSpot.name : '스팟' }} · 오늘의 한줄평
    </div>
    <div v-if="reviews.length" class="row q-gutter-sm">
      <q-chip
        v-for="review in reviews"
        :key="review.id"
        color="secondary"
        text-color="accent"
        icon="tag"
      >
        {{ 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>
    <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.breed || '견종 미상' }}</q-item-label>
        </q-item-section>
        <q-item-section side>
          <q-btn
            dense
            unelevated
            color="primary"
            icon="favorite"
            label="매칭"
            :loading="matchingDogId === mate.dogId"
            @click="onMatch(mate)"
          />
        </q-item-section>
      </q-item>
    </q-card>
  </q-page>
</template>

<script setup lang="ts">
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)

onMounted(load)

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)
  }
}

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>

<style scoped>
.map-placeholder {
  height: 240px;
  background: linear-gradient(160deg, #eaf5fe 0%, #d7ecfb 100%);
}
</style>