nuxt-claude/app/pages/used-sales/[id].vue

<script setup lang="ts">
import { STATUS_LABELS, PLATFORM_LABELS } from '~/types/used-sale'
import type { UsedSale, UsedSaleInsert, SaleStatus, SalePlatform } from '~/types/used-sale'

definePageMeta({ middleware: 'auth' })

const route = useRoute()
const { getSale, updateSale, deleteSale } = useUsedSales()

const sale = ref<UsedSale | null>(null)
const showEdit = ref(false)

sale.value = await getSale(route.params.id as string)

if (!sale.value) {
  await navigateTo('/used-sales')
}

async function handleUpdate(data: UsedSaleInsert) {
  if (!sale.value) return
  const updated = await updateSale(sale.value.id, data)
  if (updated) {
    sale.value = updated
    showEdit.value = false
  }
}

async function handleDelete() {
  if (!sale.value || !confirm('이 판매 등록을 삭제하시겠습니까?')) return
  await deleteSale(sale.value.id)
  await navigateTo('/used-sales')
}

function formatPrice(price?: number) {
  if (!price && price !== 0) return '-'
  return price.toLocaleString('ko-KR') + '원'
}
</script>

<template>
  <div v-if="sale" class="p-6 space-y-6 max-w-2xl">
    <div class="flex items-center gap-4">
      <NuxtLink to="/used-sales">
        <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">{{ sale.item_name }}</h1>
        <UsedSalesUsedSaleBadge :status="sale.status as SaleStatus" />
      </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>

    <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">
            {{ PLATFORM_LABELS[sale.platform as SalePlatform] }}
          </dd>
        </div>
        <div>
          <dt class="text-sm text-gray-500 dark:text-gray-400">판매 상태</dt>
          <dd class="mt-1">
            <UsedSalesUsedSaleBadge :status="sale.status as SaleStatus" />
          </dd>
        </div>
        <div>
          <dt class="text-sm text-gray-500 dark:text-gray-400">희망가격</dt>
          <dd class="mt-1 font-bold text-lg text-gray-900 dark:text-white">{{ formatPrice(sale.sale_price) }}</dd>
        </div>
        <div>
          <dt class="text-sm text-gray-500 dark:text-gray-400">최종 판매가</dt>
          <dd class="mt-1 font-bold text-lg text-primary-600">{{ formatPrice(sale.final_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">{{ sale.listed_at }}</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">{{ sale.sold_at || '-' }}</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">
            {{ sale.notes || '-' }}
          </dd>
        </div>
      </dl>
    </UCard>

    <UModal :open="showEdit" title="판매 수정" @update:open="showEdit = $event">
      <template #body>
        <UsedSalesUsedSaleForm
          :initial="sale"
          @submit="handleUpdate"
          @cancel="showEdit = false"
        />
      </template>
    </UModal>
  </div>
</template>