74 lines
2.4 KiB
Vue
74 lines
2.4 KiB
Vue
|
<template>
|
||
|
|
<q-page class="q-pa-md">
|
||
|
|
<!-- 강아지 프로필 카드 -->
|
||
|
|
<q-card flat bordered class="q-mb-md">
|
||
|
|
<q-card-section class="row items-center">
|
||
|
|
<q-avatar size="64px" color="secondary" text-color="accent" icon="pets" />
|
||
|
|
<div class="q-ml-md">
|
||
|
|
<div class="text-h6">몽이</div>
|
||
|
|
<div class="text-caption text-grey-7">푸들 · 3살 · 소형견</div>
|
||
|
|
</div>
|
||
|
|
</q-card-section>
|
||
|
|
</q-card>
|
||
|
|
|
||
|
|
<!-- 댕비티아이(성향 태그) -->
|
||
|
|
<div class="text-subtitle1 text-weight-bold q-mb-sm">댕비티아이 · 성향 태그</div>
|
||
|
|
<div class="row q-gutter-sm q-mb-lg">
|
||
|
|
<q-chip
|
||
|
|
v-for="trait in traits"
|
||
|
|
:key="trait.code"
|
||
|
|
:color="trait.selected ? 'primary' : 'grey-3'"
|
||
|
|
:text-color="trait.selected ? 'white' : 'grey-7'"
|
||
|
|
clickable
|
||
|
|
@click="trait.selected = !trait.selected"
|
||
|
|
>
|
||
|
|
{{ trait.label }}
|
||
|
|
</q-chip>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 구독 티어 전환 (개발용 데모) -->
|
||
|
|
<q-card flat bordered>
|
||
|
|
<q-card-section>
|
||
|
|
<div class="text-subtitle2 q-mb-sm">구독 티어 (데모)</div>
|
||
|
|
<q-btn-toggle
|
||
|
|
v-model="tier"
|
||
|
|
spread
|
||
|
|
no-caps
|
||
|
|
toggle-color="primary"
|
||
|
|
color="grey-3"
|
||
|
|
text-color="grey-8"
|
||
|
|
:options="[
|
||
|
|
{ label: 'FREE', value: 'FREE' },
|
||
|
|
{ label: '광고제거', value: 'AD_FREE' },
|
||
|
|
{ label: 'PREMIUM', value: 'PREMIUM' },
|
||
|
|
]"
|
||
|
|
@update:model-value="onTierChange"
|
||
|
|
/>
|
||
|
|
<div class="text-caption text-grey-6 q-mt-sm">
|
||
|
|
FREE 에서만 하단 배너 광고가 노출됩니다.
|
||
|
|
</div>
|
||
|
|
</q-card-section>
|
||
|
|
</q-card>
|
||
|
|
</q-page>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref } from 'vue'
|
||
|
|
import { useSubscriptionStore, type SubscriptionTier } from '@/stores/subscription'
|
||
|
|
|
||
|
|
const subscription = useSubscriptionStore()
|
||
|
|
const tier = ref<SubscriptionTier>(subscription.tier)
|
||
|
|
|
||
|
|
const traits = ref([
|
||
|
|
{ code: 'FEAR_BIG_DOG', label: '대형견 무서워함', selected: true },
|
||
|
|
{ code: 'TUG_LOVER', label: '터그놀이 매니아', selected: true },
|
||
|
|
{ code: 'SOCIALIZING', label: '사회화 훈련 중', selected: false },
|
||
|
|
{ code: 'LOVE_PEOPLE', label: '사람 좋아함', selected: true },
|
||
|
|
{ code: 'SHY', label: '낯가림 있음', selected: false },
|
||
|
|
])
|
||
|
|
|
||
|
|
function onTierChange(next: SubscriptionTier) {
|
||
|
|
subscription.setTier(next)
|
||
|
|
}
|
||
|
|
</script>
|