Files
nuxt-claude/app/pages/purchases/[id].vue
NEW_GIL_HOME\hyeon e66321386a
Some checks failed
ci / ci (22, ubuntu-latest) (push) Failing after 25m52s
feat: nuxt-claude 프로젝트 초기 커밋
Made-with: Cursor
2026-03-08 16:36:13 +09:00

104 lines
3.6 KiB
Vue

<script setup lang="ts">
import { CATEGORY_LABELS } from '~/types/purchase'
import type { Purchase, PurchaseInsert, EquipmentCategory } from '~/types/purchase'
definePageMeta({ middleware: 'auth' })
const route = useRoute()
const { getPurchase, updatePurchase, deletePurchase } = usePurchases()
const purchase = ref<Purchase | null>(null)
const showEdit = ref(false)
purchase.value = await getPurchase(route.params.id as string)
if (!purchase.value) {
await navigateTo('/purchases')
}
async function handleUpdate(data: PurchaseInsert) {
if (!purchase.value) return
const updated = await updatePurchase(purchase.value.id, data)
if (updated) {
purchase.value = updated
showEdit.value = false
}
}
async function handleDelete() {
if (!purchase.value || !confirm('이 장비를 삭제하시겠습니까?')) return
await deletePurchase(purchase.value.id)
await navigateTo('/purchases')
}
function formatPrice(price: number) {
return price.toLocaleString('ko-KR') + '원'
}
</script>
<template>
<div v-if="purchase" class="p-6 space-y-6 max-w-2xl">
<!-- Header -->
<div class="flex items-center gap-4">
<NuxtLink to="/purchases">
<UButton icon="i-lucide-arrow-left" color="neutral" variant="ghost" />
</NuxtLink>
<div class="flex-1">
<h1 class="text-2xl font-bold text-gray-900 dark:text-white">{{ purchase.name }}</h1>
<p class="text-gray-500 dark:text-gray-400">
{{ CATEGORY_LABELS[purchase.category as EquipmentCategory] }}
</p>
</div>
<div class="flex gap-2">
<UButton icon="i-lucide-pencil" label="수정" color="neutral" variant="outline" @click="showEdit = true" />
<UButton icon="i-lucide-trash-2" label="삭제" color="error" variant="outline" @click="handleDelete" />
</div>
</div>
<!-- Details -->
<UCard>
<dl class="grid grid-cols-2 gap-4">
<div>
<dt class="text-sm text-gray-500 dark:text-gray-400">브랜드</dt>
<dd class="mt-1 font-medium text-gray-900 dark:text-white">{{ purchase.brand || '-' }}</dd>
</div>
<div>
<dt class="text-sm text-gray-500 dark:text-gray-400">구매가격</dt>
<dd class="mt-1 font-bold text-xl text-primary-600">{{ formatPrice(purchase.price) }}</dd>
</div>
<div>
<dt class="text-sm text-gray-500 dark:text-gray-400">구매일</dt>
<dd class="mt-1 font-medium text-gray-900 dark:text-white">{{ purchase.purchase_date }}</dd>
</div>
<div>
<dt class="text-sm text-gray-500 dark:text-gray-400">구매처</dt>
<dd class="mt-1 font-medium text-gray-900 dark:text-white">{{ purchase.store || '-' }}</dd>
</div>
<div>
<dt class="text-sm text-gray-500 dark:text-gray-400">보증기간 만료</dt>
<dd class="mt-1 font-medium text-gray-900 dark:text-white">{{ purchase.warranty_until || '-' }}</dd>
</div>
<div>
<dt class="text-sm text-gray-500 dark:text-gray-400">등록일</dt>
<dd class="mt-1 font-medium text-gray-900 dark:text-white">
{{ new Date(purchase.created_at).toLocaleDateString('ko-KR') }}
</dd>
</div>
<div class="col-span-2">
<dt class="text-sm text-gray-500 dark:text-gray-400">메모</dt>
<dd class="mt-1 font-medium text-gray-900 dark:text-white whitespace-pre-wrap">
{{ purchase.notes || '-' }}
</dd>
</div>
</dl>
</UCard>
<!-- Edit Modal -->
<PurchasesPurchaseModal
v-model:open="showEdit"
:initial="purchase"
@submit="handleUpdate"
/>
</div>
</template>