48 lines
1.6 KiB
Vue
48 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
// 페이지 메타 설정
|
|
useHead({
|
|
title: '카운터 데모',
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<main class="min-h-screen bg-gray-50 px-4 py-12">
|
|
<div class="mx-auto max-w-2xl">
|
|
<!-- 페이지 헤더 -->
|
|
<div class="mb-10 text-center">
|
|
<h1 class="text-3xl font-bold text-gray-900 sm:text-4xl">카운터 데모</h1>
|
|
<p class="mt-2 text-gray-500">다양한 설정의 카운터 컴포넌트 예시입니다.</p>
|
|
</div>
|
|
|
|
<!-- 카운터 카드 목록 -->
|
|
<div class="flex flex-col gap-6">
|
|
<!-- 기본 카운터 -->
|
|
<section class="rounded-2xl bg-white p-6 shadow-sm">
|
|
<h2 class="mb-4 text-sm font-semibold uppercase tracking-widest text-gray-400">기본</h2>
|
|
<Counter label="기본 카운터" />
|
|
</section>
|
|
|
|
<!-- 수량 선택 -->
|
|
<section class="rounded-2xl bg-white p-6 shadow-sm">
|
|
<h2 class="mb-4 text-sm font-semibold uppercase tracking-widest text-gray-400">수량 선택</h2>
|
|
<Counter
|
|
label="장바구니 수량"
|
|
:initial-count="1"
|
|
:min="1"
|
|
:max="10"
|
|
/>
|
|
</section>
|
|
|
|
<!-- 점수판 -->
|
|
<section class="rounded-2xl bg-white p-6 shadow-sm">
|
|
<h2 class="mb-4 text-sm font-semibold uppercase tracking-widest text-gray-400">점수판</h2>
|
|
<div class="flex flex-col gap-4 sm:flex-row sm:justify-center">
|
|
<Counter label="팀 A" :min="0" :max="99" />
|
|
<Counter label="팀 B" :min="0" :max="99" />
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</template>
|