93 lines
2.8 KiB
Vue
93 lines
2.8 KiB
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">지도 영역 (스팟 앵커 표시 예정)</div>
|
||
|
|
</div>
|
||
|
|
</q-card>
|
||
|
|
|
||
|
|
<!-- 체크인 -->
|
||
|
|
<q-btn
|
||
|
|
color="primary"
|
||
|
|
class="full-width q-py-sm"
|
||
|
|
unelevated
|
||
|
|
icon="place"
|
||
|
|
:label="checkedIn ? '체크인 완료 · 여기 있어요!' : '나 지금 여기 도착!'"
|
||
|
|
@click="onCheckIn"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<!-- 스팟 한줄평 (네이버 지도식 태그형) -->
|
||
|
|
<div class="text-subtitle1 text-weight-bold q-mt-lg q-mb-sm">
|
||
|
|
한강공원 산책로 · 오늘의 한줄평
|
||
|
|
</div>
|
||
|
|
<div class="row q-gutter-sm">
|
||
|
|
<q-chip
|
||
|
|
v-for="review in spotReviews"
|
||
|
|
:key="review"
|
||
|
|
color="secondary"
|
||
|
|
text-color="accent"
|
||
|
|
icon="tag"
|
||
|
|
>
|
||
|
|
{{ review }}
|
||
|
|
</q-chip>
|
||
|
|
</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"
|
||
|
|
>
|
||
|
|
<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-section>
|
||
|
|
<q-item-section side>
|
||
|
|
<q-btn dense flat round color="primary" icon="chat_bubble_outline" />
|
||
|
|
</q-item-section>
|
||
|
|
</q-item>
|
||
|
|
</q-card>
|
||
|
|
</q-page>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref } from 'vue'
|
||
|
|
import { useQuasar } from 'quasar'
|
||
|
|
|
||
|
|
const $q = useQuasar()
|
||
|
|
const checkedIn = ref(false)
|
||
|
|
|
||
|
|
const spotReviews = ['진드기 많아요', '풀숲 무성함', '그늘 시원해요', '물그릇 있음']
|
||
|
|
|
||
|
|
const mates = [
|
||
|
|
{ name: '콩이 (말티즈)', traits: ['대형견 무서워함', '사회화 훈련 중'] },
|
||
|
|
{ name: '보리 (리트리버)', traits: ['터그놀이 매니아', '사람 좋아함'] },
|
||
|
|
]
|
||
|
|
|
||
|
|
function onCheckIn() {
|
||
|
|
checkedIn.value = !checkedIn.value
|
||
|
|
$q.notify({
|
||
|
|
color: checkedIn.value ? 'primary' : 'grey-6',
|
||
|
|
message: checkedIn.value ? '체크인 완료! 스팟 채팅이 열렸어요.' : '체크아웃 되었습니다.',
|
||
|
|
icon: checkedIn.value ? 'place' : 'logout',
|
||
|
|
position: 'top',
|
||
|
|
})
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.map-placeholder {
|
||
|
|
height: 240px;
|
||
|
|
background: linear-gradient(160deg, #eaf5fe 0%, #d7ecfb 100%);
|
||
|
|
}
|
||
|
|
</style>
|