✨ feat: 구매 관리에 엑셀 업로드 및 중고 판매 등록 기능 추가

- usePurchases: user_id 필터링으로 타 사용자 데이터 접근 차단
- usePurchases: bulkCreatePurchases() 일괄 저장 메서드 추가
- PurchaseModal: submit 시 중복 닫힘 방지 (부모에서 제어)
- purchases/index: 엑셀 업로드 버튼 및 모달 연동
- purchases/index: 중고 판매 등록(태그 아이콘) 버튼 및 모달 연동
- purchases/index: 판매 상태 뱃지를 장비명 옆에 표시
- PurchaseExcelUpload: xlsx 파일 파싱 후 일괄 저장 컴포넌트 추가
- SellFromPurchaseModal: 구매 장비에서 중고 판매 등록 모달 추가
- xlsx 패키지 추가

app/pages/purchases/index.vue

@@ -1,46 +1,76 @@
 <script setup lang="ts">
+import type { TableColumn } from '@nuxt/ui'
 import { CATEGORY_LABELS, CATEGORY_OPTIONS } from '~/types/purchase'
 import type { Purchase, PurchaseInsert, EquipmentCategory } from '~/types/purchase'
+import type { SaleStatus } from '~/types/used-sale'
 
 definePageMeta({ middleware: 'auth' })
 
 const { purchases, totalSpent, categoryBreakdown, loading, error, fetchPurchases, createPurchase, updatePurchase, deletePurchase } = usePurchases()
+const { sales, fetchSales } = useUsedSales()
 
-await fetchPurchases()
+// 페이지가 렌더링된 후 데이터를 가져옴 (UTable loading 상태 활용)
+onMounted(() => {
+  fetchPurchases()
+  fetchSales()
+})
+
+// purchase_id → 가장 활성 상태인 판매 상태 매핑 (listing > reserved > sold > cancelled)
+const SALE_PRIORITY: Record<SaleStatus, number> = { listing: 4, reserved: 3, sold: 2, cancelled: 1 }
+
+const saleBadgeMap = computed(() => {
+  const map = new Map<string, SaleStatus>()
+  for (const sale of sales.value) {
+    if (!sale.purchase_id) continue
+    const existing = map.get(sale.purchase_id)
+    if (!existing || SALE_PRIORITY[sale.status] > SALE_PRIORITY[existing]) {
+      map.set(sale.purchase_id, sale.status)
+    }
+  }
+  return map
+})
 
 const showModal = ref(false)
+const showExcelUpload = ref(false)
+const showSellModal = ref(false)
 const editingPurchase = ref<Purchase | undefined>(undefined)
+const sellingPurchase = ref<Purchase | null>(null)
+
+function openSell(purchase: Purchase) {
+  sellingPurchase.value = purchase
+  showSellModal.value = true
+}
 const searchQuery = ref('')
-const selectedCategory = ref('')
+const selectedCategory = ref('all')
 
 const filterOptions = [
-  { value: '', label: '전체 카테고리' },
+  { value: 'all', label: '전체 카테고리' },
   ...CATEGORY_OPTIONS
 ]
 
-const filtered = computed(() => {
-  let items = purchases.value
+const filtered = computed<Purchase[]>(() => {
+  let items: Purchase[] = [...purchases.value]
   if (searchQuery.value) {
     const q = searchQuery.value.toLowerCase()
     items = items.filter(p =>
-      p.name.toLowerCase().includes(q) ||
-      p.brand?.toLowerCase().includes(q) ||
-      p.store?.toLowerCase().includes(q)
+      p.name.toLowerCase().includes(q)
+      || p.brand?.toLowerCase().includes(q)
+      || p.store?.toLowerCase().includes(q)
     )
   }
-  if (selectedCategory.value) {
+  if (selectedCategory.value !== 'all') {
     items = items.filter(p => p.category === selectedCategory.value)
   }
   return items
 })
 
-const columns = [
-  { key: 'name', label: '장비명' },
-  { key: 'category', label: '카테고리' },
-  { key: 'brand', label: '브랜드' },
-  { key: 'price', label: '가격' },
-  { key: 'purchase_date', label: '구매일' },
-  { key: 'actions', label: '' }
+const columns: TableColumn<Purchase>[] = [
+  { accessorKey: 'name', header: '장비명' },
+  { accessorKey: 'category', header: '카테고리' },
+  { accessorKey: 'brand', header: '브랜드' },
+  { accessorKey: 'price', header: () => h('div', { class: 'text-right' }, '가격') },
+  { accessorKey: 'purchase_date', header: '구매일' },
+  { id: 'actions', header: '' }
 ]
 
 function openCreate() {
@@ -79,7 +109,10 @@ function formatPrice(price: number) {
         <h1 class="text-2xl font-bold text-gray-900 dark:text-white">구매 관리</h1>
         <p class="text-gray-500 dark:text-gray-400 mt-1">총 {{ purchases.length }}개 장비 · {{ formatPrice(totalSpent) }}</p>
       </div>
-      <UButton icon="i-lucide-plus" label="장비 추가" @click="openCreate" />
+      <div class="flex gap-2">
+        <UButton icon="i-lucide-file-spreadsheet" color="neutral" variant="outline" label="엑셀 업로드" @click="showExcelUpload = true" />
+        <UButton icon="i-lucide-plus" label="장비 추가" @click="openCreate" />
+      </div>
     </div>
 
     <!-- Stats -->
@@ -114,19 +147,29 @@ function formatPrice(price: number) {
         :columns="columns"
         :loading="loading"
       >
+        <template #name-cell="{ row }">
+          <div class="flex items-center gap-2">
+            <span>{{ row.original.name }}</span>
+            <UsedSalesUsedSaleBadge
+              v-if="saleBadgeMap.has(row.original.id)"
+              :status="saleBadgeMap.get(row.original.id)!"
+            />
+          </div>
+        </template>
         <template #category-cell="{ row }">
           <UBadge color="neutral" variant="subtle">
             {{ CATEGORY_LABELS[row.original.category as EquipmentCategory] }}
           </UBadge>
         </template>
         <template #price-cell="{ row }">
-          <span class="font-semibold">{{ formatPrice(row.original.price) }}</span>
+          <div class="text-right font-semibold">{{ formatPrice(row.original.price) }}</div>
         </template>
         <template #actions-cell="{ row }">
           <div class="flex gap-1 justify-end">
             <NuxtLink :to="`/purchases/${row.original.id}`">
               <UButton icon="i-lucide-eye" size="sm" color="neutral" variant="ghost" />
             </NuxtLink>
+            <UButton icon="i-lucide-tag" size="sm" color="warning" variant="ghost" title="중고 판매 등록" @click="openSell(row.original)" />
             <UButton icon="i-lucide-pencil" size="sm" color="neutral" variant="ghost" @click="openEdit(row.original)" />
             <UButton icon="i-lucide-trash-2" size="sm" color="error" variant="ghost" @click="handleDelete(row.original.id)" />
           </div>
@@ -140,5 +183,18 @@ function formatPrice(price: number) {
       :initial="editingPurchase"
       @submit="handleSubmit"
     />
+
+    <!-- 엑셀 업로드 Modal -->
+    <PurchasesPurchaseExcelUpload
+      v-model:open="showExcelUpload"
+      @done="fetchPurchases"
+    />
+
+    <!-- 중고 판매 등록 Modal -->
+    <PurchasesSellFromPurchaseModal
+      v-model:open="showSellModal"
+      :purchase="sellingPurchase"
+      @done="fetchSales"
+    />
   </div>
 </template>