feat: nuxt-claude 프로젝트 초기 커밋

Made-with: Cursor
2026-03-08 16:36:13 +09:00
commit e66321386a
44 changed files with 13058 additions and 0 deletions
--- a/.claude/settings.json
+++ b/.claude/settings.json
@@ -0,0 +1,26 @@
+{
+  "hooks": {
+    "Notification": [
+      {
+        "matcher": "",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "C:/Users/hyeon/AppData/Local/Programs/Python/Python312/python.exe C:/Users/hyeon/.claude/slack_notify.py notification"
+          }
+        ]
+      }
+    ],
+    "Stop": [
+      {
+        "matcher": "",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "C:/Users/hyeon/AppData/Local/Programs/Python/Python312/python.exe C:/Users/hyeon/.claude/slack_notify.py stop"
+          }
+        ]
+      }
+    ]
+  }
+}
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -0,0 +1,9 @@
+{
+  "permissions": {
+    "allow": [
+      "mcp__context7__resolve-library-id",
+      "mcp__context7__query-docs",
+      "Bash(npx nuxi@latest:*)"
+    ]
+  }
+}
--- a/.editorconfig
+++ b/.editorconfig
@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_size = 2
+indent_style = space
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -0,0 +1,34 @@
+name: ci
+
+on: push
+
+jobs:
+  ci:
+    runs-on: ${{ matrix.os }}
+
+    strategy:
+      matrix:
+        os: [ubuntu-latest]
+        node: [22]
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Install node
+        uses: actions/setup-node@v6
+        with:
+          node-version: ${{ matrix.node }}
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Lint
+        run: pnpm run lint
+
+      - name: Typecheck
+        run: pnpm run typecheck
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example
--- a/21
+++ b/21
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Nuxt UI Templates
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/README.md
+++ b/README.md
@@ -0,0 +1,60 @@
+# Nuxt Starter Template
+
+[![Nuxt UI](https://img.shields.io/badge/Made%20with-Nuxt%20UI-00DC82?logo=nuxt&labelColor=020420)](https://ui.nuxt.com)
+
+Use this template to get started with [Nuxt UI](https://ui.nuxt.com) quickly.
+
+- [Live demo](https://starter-template.nuxt.dev/)
+- [Documentation](https://ui.nuxt.com/docs/getting-started/installation/nuxt)
+
+<a href="https://starter-template.nuxt.dev/" target="_blank">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://ui.nuxt.com/assets/templates/nuxt/starter-dark.png">
+    <source media="(prefers-color-scheme: light)" srcset="https://ui.nuxt.com/assets/templates/nuxt/starter-light.png">
+    <img alt="Nuxt Starter Template" src="https://ui.nuxt.com/assets/templates/nuxt/starter-light.png" width="830" height="466">
+  </picture>
+</a>
+
+> The starter template for Vue is on https://github.com/nuxt-ui-templates/starter-vue.
+
+## Quick Start
+
+```bash [Terminal]
+npm create nuxt@latest -- -t github:nuxt-ui-templates/starter
+```
+
+## Deploy your own
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-name=starter&repository-url=https%3A%2F%2Fgithub.com%2Fnuxt-ui-templates%2Fstarter&demo-image=https%3A%2F%2Fui.nuxt.com%2Fassets%2Ftemplates%2Fnuxt%2Fstarter-dark.png&demo-url=https%3A%2F%2Fstarter-template.nuxt.dev%2F&demo-title=Nuxt%20Starter%20Template&demo-description=A%20minimal%20template%20to%20get%20started%20with%20Nuxt%20UI.)
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+pnpm install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+pnpm dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+pnpm build
+```
+
+Locally preview production build:
+
+```bash
+pnpm preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
--- a/app/app.config.ts
+++ b/app/app.config.ts
@@ -0,0 +1,8 @@
+export default defineAppConfig({
+  ui: {
+    colors: {
+      primary: 'green',
+      neutral: 'slate'
+    }
+  }
+})
--- a/app/app.vue
+++ b/app/app.vue
@@ -0,0 +1,24 @@
+<script setup>
+useHead({
+  meta: [
+    { name: 'viewport', content: 'width=device-width, initial-scale=1' }
+  ],
+  link: [
+    { rel: 'icon', href: '/favicon.ico' }
+  ],
+  htmlAttrs: {
+    lang: 'ko'
+  }
+})
+
+useSeoMeta({
+  title: 'CampGear - 캠핑 장비 관리',
+  description: '캠핑 장비 구매 정보 관리, 중고 판매 관리, AI 장비 추천'
+})
+</script>
+
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -0,0 +1,18 @@
+@import "tailwindcss";
+@import "@nuxt/ui";
+
+@theme static {
+  --font-sans: 'Public Sans', sans-serif;
+
+  --color-green-50: #EFFDF5;
+  --color-green-100: #D9FBE8;
+  --color-green-200: #B3F5D1;
+  --color-green-300: #75EDAE;
+  --color-green-400: #00DC82;
+  --color-green-500: #00C16A;
+  --color-green-600: #00A155;
+  --color-green-700: #007F45;
+  --color-green-800: #016538;
+  --color-green-900: #0A5331;
+  --color-green-950: #052E16;
+}
--- a/app/components/AppLogo.vue
+++ b/app/components/AppLogo.vue
@@ -0,0 +1,40 @@
+<template>
+  <svg
+    width="1020"
+    height="200"
+    viewBox="0 0 1020 200"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M377 200C379.16 200 381 198.209 381 196V103C381 103 386 112 395 127L434 194C435.785 197.74 439.744 200 443 200H470V50H443C441.202 50 439 51.4941 439 54V148L421 116L385 55C383.248 51.8912 379.479 50 376 50H350V200H377Z"
+      fill="currentColor"
+    />
+    <path
+      d="M726 92H739C742.314 92 745 89.3137 745 86V60H773V92H800V116H773V159C773 169.5 778.057 174 787 174H800V200H783C759.948 200 745 185.071 745 160V116H726V92Z"
+      fill="currentColor"
+    />
+    <path
+      d="M591 92V154C591 168.004 585.742 179.809 578 188C570.258 196.191 559.566 200 545 200C530.434 200 518.742 196.191 511 188C503.389 179.809 498 168.004 498 154V92H514C517.412 92 520.769 92.622 523 95C525.231 97.2459 526 98.5652 526 102V154C526 162.059 526.457 167.037 530 171C533.543 174.831 537.914 176 545 176C552.217 176 555.457 174.831 559 171C562.543 167.037 563 162.059 563 154V102C563 98.5652 563.769 96.378 566 94C567.96 91.9107 570.028 91.9599 573 92C573.411 92.0055 574.586 92 575 92H591Z"
+      fill="currentColor"
+    />
+    <path
+      d="M676 144L710 92H684C680.723 92 677.812 93.1758 676 96L660 120L645 97C643.188 94.1758 639.277 92 636 92H611L645 143L608 200H634C637.25 200 640.182 196.787 642 194L660 167L679 195C680.818 197.787 683.75 200 687 200H713L676 144Z"
+      fill="currentColor"
+    />
+    <path
+      d="M168 200H279C282.542 200 285.932 198.756 289 197C292.068 195.244 295.23 193.041 297 190C298.77 186.959 300.002 183.51 300 179.999C299.998 176.488 298.773 173.04 297 170.001L222 41C220.23 37.96 218.067 35.7552 215 34C211.933 32.2448 207.542 31 204 31C200.458 31 197.067 32.2448 194 34C190.933 35.7552 188.77 37.96 187 41L168 74L130 9.99764C128.228 6.95784 126.068 3.75491 123 2C119.932 0.245087 116.542 0 113 0C109.458 0 106.068 0.245087 103 2C99.9323 3.75491 96.7717 6.95784 95 9.99764L2 170.001C0.226979 173.04 0.00154312 176.488 1.90993e-06 179.999C-0.0015393 183.51 0.229648 186.959 2 190C3.77035 193.04 6.93245 195.244 10 197C13.0675 198.756 16.4578 200 20 200H90C117.737 200 137.925 187.558 152 164L186 105L204 74L259 168H186L168 200ZM89 168H40L113 42L150 105L125.491 147.725C116.144 163.01 105.488 168 89 168Z"
+      fill="var(--ui-primary)"
+    />
+    <path
+      d="M958 60.0001H938C933.524 60.0001 929.926 59.9395 927 63C924.074 65.8905 925 67.5792 925 72V141C925 151.372 923.648 156.899 919 162C914.352 166.931 908.468 169 899 169C889.705 169 882.648 166.931 878 162C873.352 156.899 873 151.372 873 141V72.0001C873 67.5793 872.926 65.8906 870 63.0001C867.074 59.9396 863.476 60.0001 859 60.0001H840V141C840 159.023 845.016 173.458 855 184C865.156 194.542 879.893 200 899 200C918.107 200 932.844 194.542 943 184C953.156 173.458 958 159.023 958 141V60.0001Z"
+      fill="var(--ui-primary)"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M1000 60.0233L1020 60V77L1020 128V156.007L1020 181L1020 189.004C1020 192.938 1019.98 194.429 1017 197.001C1014.02 199.725 1009.56 200 1005 200H986.001V181.006L986 130.012V70.0215C986 66.1576 986.016 64.5494 989 62.023C991.819 59.6358 995.437 60.0233 1000 60.0233Z"
+      fill="var(--ui-primary)"
+    />
+  </svg>
+</template>
--- a/app/components/TemplateMenu.vue
+++ b/app/components/TemplateMenu.vue
@@ -0,0 +1,49 @@
+<template>
+  <UDropdownMenu
+    v-slot="{ open }"
+    :modal="false"
+    :items="[{
+      label: 'Starter',
+      to: 'https://starter-template.nuxt.dev/',
+      color: 'primary',
+      checked: true,
+      type: 'checkbox'
+    }, {
+      label: 'Landing',
+      to: 'https://landing-template.nuxt.dev/'
+    }, {
+      label: 'Docs',
+      to: 'https://docs-template.nuxt.dev/'
+    }, {
+      label: 'SaaS',
+      to: 'https://saas-template.nuxt.dev/'
+    }, {
+      label: 'Dashboard',
+      to: 'https://dashboard-template.nuxt.dev/'
+    }, {
+      label: 'Chat',
+      to: 'https://chat-template.nuxt.dev/'
+    }, {
+      label: 'Portfolio',
+      to: 'https://portfolio-template.nuxt.dev/'
+    }, {
+      label: 'Changelog',
+      to: 'https://changelog-template.nuxt.dev/'
+    }]"
+    :content="{ align: 'start' }"
+    :ui="{ content: 'min-w-fit' }"
+    size="xs"
+  >
+    <UButton
+      label="Starter"
+      variant="subtle"
+      trailing-icon="i-lucide-chevron-down"
+      size="xs"
+      class="-mb-[6px] font-semibold rounded-full truncate"
+      :class="[open && 'bg-primary/15']"
+      :ui="{
+        trailingIcon: ['transition-transform duration-200', open ? 'rotate-180' : undefined].filter(Boolean).join(' ')
+      }"
+    />
+  </UDropdownMenu>
+</template>
--- a/app/components/ai/ChatMessage.vue
+++ b/app/components/ai/ChatMessage.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+const props = defineProps<{
+  role: 'user' | 'assistant'
+  content: string
+  streaming?: boolean
+}>()
+
+const isUser = computed(() => props.role === 'user')
+</script>
+
+<template>
+  <div class="flex gap-3" :class="isUser ? 'flex-row-reverse' : 'flex-row'">
+    <!-- Avatar -->
+    <div
+      class="shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-white text-sm font-bold"
+      :class="isUser ? 'bg-primary-500' : 'bg-gray-600'"
+    >
+      <UIcon v-if="!isUser" name="i-lucide-bot" class="text-base" />
+      <span v-else>나</span>
+    </div>
+
+    <!-- Message bubble -->
+    <div
+      class="max-w-[75%] rounded-2xl px-4 py-3 text-sm leading-relaxed whitespace-pre-wrap"
+      :class="isUser
+        ? 'bg-primary-500 text-white rounded-tr-sm'
+        : 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 border border-gray-200 dark:border-gray-700 rounded-tl-sm'"
+    >
+      {{ content }}
+      <span v-if="streaming" class="inline-block w-1 h-4 bg-current animate-pulse ml-0.5" />
+    </div>
+  </div>
+</template>
--- a/app/components/purchases/PurchaseForm.vue
+++ b/app/components/purchases/PurchaseForm.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { z } from 'zod'
+import type { FormSubmitEvent } from '@nuxt/ui'
+import { CATEGORY_OPTIONS } from '~/types/purchase'
+import type { Purchase, PurchaseInsert } from '~/types/purchase'
+
+const props = defineProps<{
+  initial?: Purchase
+}>()
+
+const emit = defineEmits<{
+  submit: [data: PurchaseInsert]
+  cancel: []
+}>()
+
+const schema = z.object({
+  name: z.string().min(1, '장비명을 입력하세요'),
+  category: z.string().min(1, '카테고리를 선택하세요'),
+  brand: z.string().optional(),
+  price: z.number().min(0, '가격을 입력하세요'),
+  purchase_date: z.string().min(1, '구매일을 입력하세요'),
+  store: z.string().optional(),
+  warranty_until: z.string().optional(),
+  notes: z.string().optional()
+})
+
+type Schema = z.output<typeof schema>
+
+const state = reactive({
+  name: props.initial?.name ?? '',
+  category: props.initial?.category ?? '',
+  brand: props.initial?.brand ?? '',
+  price: props.initial?.price ?? 0,
+  purchase_date: props.initial?.purchase_date ?? new Date().toISOString().split('T')[0],
+  store: props.initial?.store ?? '',
+  warranty_until: props.initial?.warranty_until ?? '',
+  notes: props.initial?.notes ?? ''
+})
+
+async function onSubmit(event: FormSubmitEvent<Schema>) {
+  const data: PurchaseInsert = {
+    name: event.data.name,
+    category: event.data.category as PurchaseInsert['category'],
+    brand: event.data.brand || undefined,
+    price: event.data.price,
+    purchase_date: event.data.purchase_date,
+    store: event.data.store || undefined,
+    warranty_until: event.data.warranty_until || undefined,
+    notes: event.data.notes || undefined
+  }
+  emit('submit', data)
+}
+</script>
+
+<template>
+  <UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
+    <UFormField label="장비명" name="name" required>
+      <UInput v-model="state.name" placeholder="예: MSR Hubba Hubba NX 2" class="w-full" />
+    </UFormField>
+
+    <div class="grid grid-cols-2 gap-4">
+      <UFormField label="카테고리" name="category" required>
+        <USelect v-model="state.category" :items="CATEGORY_OPTIONS" placeholder="선택..." class="w-full" />
+      </UFormField>
+
+      <UFormField label="브랜드" name="brand">
+        <UInput v-model="state.brand" placeholder="예: MSR" class="w-full" />
+      </UFormField>
+    </div>
+
+    <div class="grid grid-cols-2 gap-4">
+      <UFormField label="구매가격 (원)" name="price" required>
+        <UInput v-model.number="state.price" type="number" min="0" placeholder="0" class="w-full" />
+      </UFormField>
+
+      <UFormField label="구매일" name="purchase_date" required>
+        <UInput v-model="state.purchase_date" type="date" class="w-full" />
+      </UFormField>
+    </div>
+
+    <div class="grid grid-cols-2 gap-4">
+      <UFormField label="구매처" name="store">
+        <UInput v-model="state.store" placeholder="예: 아웃도어 월드" class="w-full" />
+      </UFormField>
+
+      <UFormField label="보증기간 만료일" name="warranty_until">
+        <UInput v-model="state.warranty_until" type="date" class="w-full" />
+      </UFormField>
+    </div>
+
+    <UFormField label="메모" name="notes">
+      <UTextarea v-model="state.notes" placeholder="추가 메모..." :rows="3" class="w-full" />
+    </UFormField>
+
+    <div class="flex justify-end gap-3 pt-2">
+      <UButton label="취소" color="neutral" variant="ghost" @click="emit('cancel')" />
+      <UButton type="submit" :label="initial ? '수정' : '저장'" color="primary" />
+    </div>
+  </UForm>
+</template>
--- a/app/components/purchases/PurchaseModal.vue
+++ b/app/components/purchases/PurchaseModal.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { Purchase, PurchaseInsert } from '~/types/purchase'
+
+const props = defineProps<{
+  open: boolean
+  initial?: Purchase
+}>()
+
+const emit = defineEmits<{
+  'update:open': [value: boolean]
+  submit: [data: PurchaseInsert]
+}>()
+
+const title = computed(() => props.initial ? '장비 수정' : '장비 추가')
+
+function handleSubmit(data: PurchaseInsert) {
+  emit('submit', data)
+  emit('update:open', false)
+}
+</script>
+
+<template>
+  <UModal :open="open" :title="title" @update:open="emit('update:open', $event)">
+    <template #body>
+      <PurchasesPurchaseForm
+        :initial="initial"
+        @submit="handleSubmit"
+        @cancel="emit('update:open', false)"
+      />
+    </template>
+  </UModal>
+</template>
--- a/app/components/purchases/PurchaseStats.vue
+++ b/app/components/purchases/PurchaseStats.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { CATEGORY_LABELS } from '~/types/purchase'
+import type { EquipmentCategory } from '~/types/purchase'
+
+const props = defineProps<{
+  totalSpent: number
+  categoryBreakdown: Record<string, number>
+  count: number
+}>()
+
+const sortedCategories = computed(() =>
+  Object.entries(props.categoryBreakdown)
+    .sort(([, a], [, b]) => b - a)
+    .slice(0, 5)
+)
+
+function formatPrice(price: number) {
+  return price.toLocaleString('ko-KR') + '원'
+}
+
+function getCategoryLabel(cat: string) {
+  return CATEGORY_LABELS[cat as EquipmentCategory] ?? cat
+}
+
+function getPercent(amount: number) {
+  if (props.totalSpent === 0) return 0
+  return Math.round((amount / props.totalSpent) * 100)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <div class="grid grid-cols-2 gap-4">
+      <UCard>
+        <div class="text-center">
+          <p class="text-sm text-gray-500 dark:text-gray-400">총 구매 금액</p>
+          <p class="text-2xl font-bold text-primary-600 mt-1">{{ formatPrice(totalSpent) }}</p>
+        </div>
+      </UCard>
+      <UCard>
+        <div class="text-center">
+          <p class="text-sm text-gray-500 dark:text-gray-400">총 장비 수</p>
+          <p class="text-2xl font-bold text-gray-900 dark:text-white mt-1">{{ count }}개</p>
+        </div>
+      </UCard>
+    </div>
+
+    <UCard title="카테고리별 지출">
+      <div class="space-y-3">
+        <div v-for="[cat, amount] in sortedCategories" :key="cat">
+          <div class="flex justify-between text-sm mb-1">
+            <span class="font-medium">{{ getCategoryLabel(cat) }}</span>
+            <span class="text-gray-600 dark:text-gray-400">{{ formatPrice(amount) }}</span>
+          </div>
+          <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
+            <div
+              class="bg-primary-500 h-2 rounded-full transition-all"
+              :style="{ width: getPercent(amount) + '%' }"
+            />
+          </div>
+        </div>
+        <p v-if="sortedCategories.length === 0" class="text-sm text-gray-400 text-center py-2">
+          데이터가 없습니다
+        </p>
+      </div>
+    </UCard>
+  </div>
+</template>
--- a/app/components/used-sales/UsedSaleBadge.vue
+++ b/app/components/used-sales/UsedSaleBadge.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { STATUS_LABELS, STATUS_COLORS } from '~/types/used-sale'
+import type { SaleStatus } from '~/types/used-sale'
+
+const props = defineProps<{
+  status: SaleStatus
+}>()
+
+const label = computed(() => STATUS_LABELS[props.status])
+const color = computed(() => STATUS_COLORS[props.status])
+</script>
+
+<template>
+  <UBadge :color="color as any" variant="subtle" :label="label" />
+</template>
--- a/app/components/used-sales/UsedSaleForm.vue
+++ b/app/components/used-sales/UsedSaleForm.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { z } from 'zod'
+import type { FormSubmitEvent } from '@nuxt/ui'
+import { PLATFORM_OPTIONS, STATUS_OPTIONS } from '~/types/used-sale'
+import type { UsedSale, UsedSaleInsert } from '~/types/used-sale'
+
+const props = defineProps<{
+  initial?: UsedSale
+}>()
+
+const emit = defineEmits<{
+  submit: [data: UsedSaleInsert]
+  cancel: []
+}>()
+
+const schema = z.object({
+  item_name: z.string().min(1, '장비명을 입력하세요'),
+  sale_price: z.number().min(0, '판매가격을 입력하세요'),
+  final_price: z.number().optional(),
+  platform: z.string().min(1, '판매 플랫폼을 선택하세요'),
+  status: z.string().min(1, '상태를 선택하세요'),
+  notes: z.string().optional(),
+  listed_at: z.string().min(1, '등록일을 입력하세요'),
+  sold_at: z.string().optional()
+})
+
+type Schema = z.output<typeof schema>
+
+const state = reactive({
+  item_name: props.initial?.item_name ?? '',
+  sale_price: props.initial?.sale_price ?? 0,
+  final_price: props.initial?.final_price ?? undefined as number | undefined,
+  platform: props.initial?.platform ?? '',
+  status: props.initial?.status ?? 'listing',
+  notes: props.initial?.notes ?? '',
+  listed_at: props.initial?.listed_at ?? new Date().toISOString().split('T')[0],
+  sold_at: props.initial?.sold_at ?? ''
+})
+
+async function onSubmit(event: FormSubmitEvent<Schema>) {
+  const data: UsedSaleInsert = {
+    item_name: event.data.item_name,
+    sale_price: event.data.sale_price,
+    final_price: event.data.final_price || undefined,
+    platform: event.data.platform as UsedSaleInsert['platform'],
+    status: event.data.status as UsedSaleInsert['status'],
+    notes: event.data.notes || undefined,
+    listed_at: event.data.listed_at,
+    sold_at: event.data.sold_at || undefined
+  }
+  emit('submit', data)
+}
+</script>
+
+<template>
+  <UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
+    <UFormField label="장비명" name="item_name" required>
+      <UInput v-model="state.item_name" placeholder="예: MSR Hubba Hubba NX 2" class="w-full" />
+    </UFormField>
+
+    <div class="grid grid-cols-2 gap-4">
+      <UFormField label="판매 플랫폼" name="platform" required>
+        <USelect v-model="state.platform" :items="PLATFORM_OPTIONS" placeholder="선택..." class="w-full" />
+      </UFormField>
+
+      <UFormField label="판매 상태" name="status" required>
+        <USelect v-model="state.status" :items="STATUS_OPTIONS" class="w-full" />
+      </UFormField>
+    </div>
+
+    <div class="grid grid-cols-2 gap-4">
+      <UFormField label="희망가격 (원)" name="sale_price" required>
+        <UInput v-model.number="state.sale_price" type="number" min="0" placeholder="0" class="w-full" />
+      </UFormField>
+
+      <UFormField label="최종 판매가 (원)" name="final_price">
+        <UInput v-model.number="state.final_price" type="number" min="0" placeholder="판매 완료 시 입력" class="w-full" />
+      </UFormField>
+    </div>
+
+    <div class="grid grid-cols-2 gap-4">
+      <UFormField label="등록일" name="listed_at" required>
+        <UInput v-model="state.listed_at" type="date" class="w-full" />
+      </UFormField>
+
+      <UFormField label="판매완료일" name="sold_at">
+        <UInput v-model="state.sold_at" type="date" class="w-full" />
+      </UFormField>
+    </div>
+
+    <UFormField label="메모" name="notes">
+      <UTextarea v-model="state.notes" placeholder="추가 메모..." :rows="3" class="w-full" />
+    </UFormField>
+
+    <div class="flex justify-end gap-3 pt-2">
+      <UButton label="취소" color="neutral" variant="ghost" @click="emit('cancel')" />
+      <UButton type="submit" :label="initial ? '수정' : '등록'" color="primary" />
+    </div>
+  </UForm>
+</template>
--- a/app/composables/useAiChat.ts
+++ b/app/composables/useAiChat.ts
@@ -0,0 +1,145 @@
+import type { AiConversation, AiMessage } from '~/types/ai'
+
+export function useAiChat() {
+  const client = useSupabaseClient()
+  const user = useSupabaseUser()
+
+  const conversations = ref<AiConversation[]>([])
+  const currentConversation = ref<AiConversation | null>(null)
+  const messages = ref<AiMessage[]>([])
+  const streamingContent = ref('')
+  const isStreaming = ref(false)
+  const loading = ref(false)
+
+  async function fetchConversations() {
+    if (!user.value) return
+    const { data } = await client
+      .from('ai_conversations')
+      .select('*')
+      .order('updated_at', { ascending: false })
+    conversations.value = (data as AiConversation[]) ?? []
+  }
+
+  async function createConversation(title: string = '새 대화') {
+    if (!user.value) return null
+    const { data, error } = await client
+      .from('ai_conversations')
+      .insert({ user_id: user.value.id, title })
+      .select()
+      .single()
+    if (error) return null
+    const conv = data as AiConversation
+    conversations.value.unshift(conv)
+    return conv
+  }
+
+  async function selectConversation(conv: AiConversation) {
+    currentConversation.value = conv
+    await fetchMessages(conv.id)
+  }
+
+  async function fetchMessages(conversationId: string) {
+    const { data } = await client
+      .from('ai_messages')
+      .select('*')
+      .eq('conversation_id', conversationId)
+      .order('created_at', { ascending: true })
+    messages.value = (data as AiMessage[]) ?? []
+  }
+
+  async function deleteConversation(id: string) {
+    await client.from('ai_conversations').delete().eq('id', id)
+    conversations.value = conversations.value.filter(c => c.id !== id)
+    if (currentConversation.value?.id === id) {
+      currentConversation.value = null
+      messages.value = []
+    }
+  }
+
+  async function sendMessage(content: string) {
+    if (!currentConversation.value || isStreaming.value) return
+
+    // Save user message to DB
+    const { data: userMsg } = await client
+      .from('ai_messages')
+      .insert({
+        conversation_id: currentConversation.value.id,
+        role: 'user',
+        content
+      })
+      .select()
+      .single()
+
+    if (userMsg) messages.value.push(userMsg as AiMessage)
+
+    // Start streaming
+    isStreaming.value = true
+    streamingContent.value = ''
+
+    try {
+      const response = await fetch('/api/ai/chat', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          conversationId: currentConversation.value.id,
+          messages: messages.value.map(m => ({ role: m.role, content: m.content }))
+        })
+      })
+
+      if (!response.ok) throw new Error('API 오류')
+
+      const reader = response.body!.getReader()
+      const decoder = new TextDecoder()
+
+      while (true) {
+        const { done, value } = await reader.read()
+        if (done) break
+        streamingContent.value += decoder.decode(value, { stream: true })
+      }
+
+      // Save assistant message to DB
+      const finalContent = streamingContent.value
+      const { data: assistantMsg } = await client
+        .from('ai_messages')
+        .insert({
+          conversation_id: currentConversation.value.id,
+          role: 'assistant',
+          content: finalContent
+        })
+        .select()
+        .single()
+
+      if (assistantMsg) messages.value.push(assistantMsg as AiMessage)
+
+      // Update conversation title if it's the first message
+      if (messages.value.length === 2) {
+        const title = content.slice(0, 30) + (content.length > 30 ? '...' : '')
+        await client
+          .from('ai_conversations')
+          .update({ title })
+          .eq('id', currentConversation.value.id)
+        const conv = conversations.value.find(c => c.id === currentConversation.value!.id)
+        if (conv) conv.title = title
+      }
+    } catch (e) {
+      console.error('Streaming error:', e)
+    } finally {
+      isStreaming.value = false
+      streamingContent.value = ''
+    }
+  }
+
+  return {
+    conversations: readonly(conversations),
+    currentConversation: readonly(currentConversation),
+    messages: readonly(messages),
+    streamingContent: readonly(streamingContent),
+    isStreaming: readonly(isStreaming),
+    loading: readonly(loading),
+    fetchConversations,
+    createConversation,
+    selectConversation,
+    deleteConversation,
+    sendMessage
+  }
+}
--- a/app/composables/usePurchases.ts
+++ b/app/composables/usePurchases.ts
@@ -0,0 +1,125 @@
+import type { Purchase, PurchaseInsert, EquipmentCategory } from '~/types/purchase'
+
+export function usePurchases() {
+  const client = useSupabaseClient()
+  const user = useSupabaseUser()
+
+  const purchases = ref<Purchase[]>([])
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+
+  const totalSpent = computed(() =>
+    purchases.value.reduce((sum, p) => sum + p.price, 0)
+  )
+
+  const categoryBreakdown = computed(() => {
+    const breakdown: Record<string, number> = {}
+    for (const p of purchases.value) {
+      breakdown[p.category] = (breakdown[p.category] ?? 0) + p.price
+    }
+    return breakdown
+  })
+
+  async function fetchPurchases() {
+    if (!user.value) return
+    loading.value = true
+    error.value = null
+    try {
+      const { data, error: err } = await client
+        .from('purchases')
+        .select('*')
+        .order('purchase_date', { ascending: false })
+      if (err) throw err
+      purchases.value = data as Purchase[]
+    } catch (e: unknown) {
+      error.value = e instanceof Error ? e.message : '오류가 발생했습니다'
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function createPurchase(payload: PurchaseInsert) {
+    if (!user.value) return
+    loading.value = true
+    error.value = null
+    try {
+      const { data, error: err } = await client
+        .from('purchases')
+        .insert({ ...payload, user_id: user.value.id })
+        .select()
+        .single()
+      if (err) throw err
+      purchases.value.unshift(data as Purchase)
+      return data as Purchase
+    } catch (e: unknown) {
+      error.value = e instanceof Error ? e.message : '저장에 실패했습니다'
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function updatePurchase(id: string, payload: Partial<PurchaseInsert>) {
+    loading.value = true
+    error.value = null
+    try {
+      const { data, error: err } = await client
+        .from('purchases')
+        .update(payload)
+        .eq('id', id)
+        .select()
+        .single()
+      if (err) throw err
+      const idx = purchases.value.findIndex(p => p.id === id)
+      if (idx !== -1) purchases.value[idx] = data as Purchase
+      return data as Purchase
+    } catch (e: unknown) {
+      error.value = e instanceof Error ? e.message : '수정에 실패했습니다'
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function deletePurchase(id: string) {
+    loading.value = true
+    error.value = null
+    try {
+      const { error: err } = await client
+        .from('purchases')
+        .delete()
+        .eq('id', id)
+      if (err) throw err
+      purchases.value = purchases.value.filter(p => p.id !== id)
+    } catch (e: unknown) {
+      error.value = e instanceof Error ? e.message : '삭제에 실패했습니다'
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function getPurchase(id: string): Promise<Purchase | null> {
+    try {
+      const { data, error: err } = await client
+        .from('purchases')
+        .select('*')
+        .eq('id', id)
+        .single()
+      if (err) throw err
+      return data as Purchase
+    } catch {
+      return null
+    }
+  }
+
+  return {
+    purchases: readonly(purchases),
+    loading: readonly(loading),
+    error: readonly(error),
+    totalSpent,
+    categoryBreakdown,
+    fetchPurchases,
+    createPurchase,
+    updatePurchase,
+    deletePurchase,
+    getPurchase
+  }
+}
--- a/app/composables/useUsedSales.ts
+++ b/app/composables/useUsedSales.ts
@@ -0,0 +1,132 @@
+import type { UsedSale, UsedSaleInsert, SaleStatus } from '~/types/used-sale'
+
+export function useUsedSales() {
+  const client = useSupabaseClient()
+  const user = useSupabaseUser()
+
+  const sales = ref<UsedSale[]>([])
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+
+  const totalRevenue = computed(() =>
+    sales.value
+      .filter(s => s.status === 'sold')
+      .reduce((sum, s) => sum + (s.final_price ?? s.sale_price), 0)
+  )
+
+  const byStatus = computed(() => {
+    const result: Record<SaleStatus, UsedSale[]> = {
+      listing: [],
+      reserved: [],
+      sold: [],
+      cancelled: []
+    }
+    for (const s of sales.value) {
+      result[s.status].push(s)
+    }
+    return result
+  })
+
+  async function fetchSales() {
+    if (!user.value) return
+    loading.value = true
+    error.value = null
+    try {
+      const { data, error: err } = await client
+        .from('used_sales')
+        .select('*')
+        .order('listed_at', { ascending: false })
+      if (err) throw err
+      sales.value = data as UsedSale[]
+    } catch (e: unknown) {
+      error.value = e instanceof Error ? e.message : '오류가 발생했습니다'
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function createSale(payload: UsedSaleInsert) {
+    if (!user.value) return
+    loading.value = true
+    error.value = null
+    try {
+      const { data, error: err } = await client
+        .from('used_sales')
+        .insert({ ...payload, user_id: user.value.id })
+        .select()
+        .single()
+      if (err) throw err
+      sales.value.unshift(data as UsedSale)
+      return data as UsedSale
+    } catch (e: unknown) {
+      error.value = e instanceof Error ? e.message : '저장에 실패했습니다'
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function updateSale(id: string, payload: Partial<UsedSaleInsert>) {
+    loading.value = true
+    error.value = null
+    try {
+      const { data, error: err } = await client
+        .from('used_sales')
+        .update(payload)
+        .eq('id', id)
+        .select()
+        .single()
+      if (err) throw err
+      const idx = sales.value.findIndex(s => s.id === id)
+      if (idx !== -1) sales.value[idx] = data as UsedSale
+      return data as UsedSale
+    } catch (e: unknown) {
+      error.value = e instanceof Error ? e.message : '수정에 실패했습니다'
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function deleteSale(id: string) {
+    loading.value = true
+    error.value = null
+    try {
+      const { error: err } = await client
+        .from('used_sales')
+        .delete()
+        .eq('id', id)
+      if (err) throw err
+      sales.value = sales.value.filter(s => s.id !== id)
+    } catch (e: unknown) {
+      error.value = e instanceof Error ? e.message : '삭제에 실패했습니다'
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function getSale(id: string): Promise<UsedSale | null> {
+    try {
+      const { data, error: err } = await client
+        .from('used_sales')
+        .select('*')
+        .eq('id', id)
+        .single()
+      if (err) throw err
+      return data as UsedSale
+    } catch {
+      return null
+    }
+  }
+
+  return {
+    sales: readonly(sales),
+    loading: readonly(loading),
+    error: readonly(error),
+    totalRevenue,
+    byStatus,
+    fetchSales,
+    createSale,
+    updateSale,
+    deleteSale,
+    getSale
+  }
+}
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+const route = useRoute()
+const supabase = useSupabaseClient()
+
+const navItems = [
+  { label: '대시보드', to: '/', icon: 'i-lucide-layout-dashboard' },
+  { label: '구매 관리', to: '/purchases', icon: 'i-lucide-shopping-cart' },
+  { label: '중고 판매', to: '/used-sales', icon: 'i-lucide-tag' },
+  { label: 'AI 추천', to: '/ai-chat', icon: 'i-lucide-bot' }
+]
+
+async function signOut() {
+  await supabase.auth.signOut()
+  await navigateTo('/login')
+}
+</script>
+
+<template>
+  <UApp>
+    <div class="flex h-screen overflow-hidden bg-gray-50 dark:bg-gray-950">
+      <!-- Sidebar -->
+      <aside class="flex flex-col w-64 shrink-0 border-r border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900">
+        <!-- Logo -->
+        <div class="flex items-center gap-3 px-6 py-5 border-b border-gray-200 dark:border-gray-800">
+          <UIcon name="i-lucide-tent" class="text-2xl text-primary-500" />
+          <span class="text-lg font-bold text-gray-900 dark:text-white">CampGear</span>
+        </div>
+
+        <!-- Navigation -->
+        <nav class="flex-1 px-3 py-4 space-y-1 overflow-y-auto">
+          <NuxtLink
+            v-for="item in navItems"
+            :key="item.to"
+            :to="item.to"
+            class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors"
+            :class="route.path === item.to || (item.to !== '/' && route.path.startsWith(item.to))
+              ? 'bg-primary-50 dark:bg-primary-950 text-primary-600 dark:text-primary-400'
+              : 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-white'"
+          >
+            <UIcon :name="item.icon" class="text-lg shrink-0" />
+            {{ item.label }}
+          </NuxtLink>
+        </nav>
+
+        <!-- User Section -->
+        <div class="px-3 py-4 border-t border-gray-200 dark:border-gray-800 space-y-2">
+          <UColorModeButton class="w-full justify-start" variant="ghost" />
+          <UButton
+            icon="i-lucide-log-out"
+            label="로그아웃"
+            variant="ghost"
+            color="neutral"
+            class="w-full justify-start"
+            @click="signOut"
+          />
+        </div>
+      </aside>
+
+      <!-- Main Content -->
+      <main class="flex-1 overflow-y-auto">
+        <slot />
+      </main>
+    </div>
+  </UApp>
+</template>
--- a/app/middleware/auth.ts
+++ b/app/middleware/auth.ts
@@ -0,0 +1,6 @@
+export default defineNuxtRouteMiddleware(() => {
+  const user = useSupabaseUser()
+  if (!user.value) {
+    return navigateTo('/login')
+  }
+})
--- a/app/pages/ai-chat/index.vue
+++ b/app/pages/ai-chat/index.vue
@@ -0,0 +1,193 @@
+<script setup lang="ts">
+definePageMeta({ middleware: 'auth' })
+
+const {
+  conversations,
+  currentConversation,
+  messages,
+  streamingContent,
+  isStreaming,
+  fetchConversations,
+  createConversation,
+  selectConversation,
+  deleteConversation,
+  sendMessage
+} = useAiChat()
+
+await fetchConversations()
+
+const inputText = ref('')
+const messagesContainer = ref<HTMLElement | null>(null)
+
+async function handleNewConversation() {
+  const conv = await createConversation()
+  if (conv) await selectConversation(conv)
+}
+
+async function handleSend() {
+  const text = inputText.value.trim()
+  if (!text || isStreaming.value) return
+  if (!currentConversation.value) {
+    const conv = await createConversation()
+    if (!conv) return
+    await selectConversation(conv)
+  }
+  inputText.value = ''
+  await sendMessage(text)
+}
+
+function handleKeydown(e: KeyboardEvent) {
+  if (e.key === 'Enter' && !e.shiftKey) {
+    e.preventDefault()
+    handleSend()
+  }
+}
+
+// Auto scroll to bottom
+watch([messages, streamingContent], async () => {
+  await nextTick()
+  if (messagesContainer.value) {
+    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
+  }
+}, { deep: true })
+</script>
+
+<template>
+  <div class="flex h-full">
+    <!-- Conversation Sidebar -->
+    <aside class="w-72 border-r border-gray-200 dark:border-gray-800 flex flex-col bg-gray-50 dark:bg-gray-900">
+      <div class="p-4 border-b border-gray-200 dark:border-gray-800">
+        <UButton
+          icon="i-lucide-plus"
+          label="새 대화"
+          class="w-full"
+          @click="handleNewConversation"
+        />
+      </div>
+
+      <div class="flex-1 overflow-y-auto p-2 space-y-1">
+        <div
+          v-for="conv in conversations"
+          :key="conv.id"
+          class="flex items-center gap-2 rounded-lg px-3 py-2.5 cursor-pointer group transition-colors"
+          :class="currentConversation?.id === conv.id
+            ? 'bg-primary-100 dark:bg-primary-950 text-primary-700 dark:text-primary-300'
+            : 'hover:bg-gray-200 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300'"
+          @click="selectConversation(conv)"
+        >
+          <UIcon name="i-lucide-message-square" class="shrink-0 text-sm" />
+          <span class="flex-1 text-sm truncate">{{ conv.title }}</span>
+          <UButton
+            icon="i-lucide-trash-2"
+            size="xs"
+            color="error"
+            variant="ghost"
+            class="opacity-0 group-hover:opacity-100 transition-opacity"
+            @click.stop="deleteConversation(conv.id)"
+          />
+        </div>
+
+        <div v-if="conversations.length === 0" class="text-center py-8 text-sm text-gray-400">
+          대화가 없습니다
+        </div>
+      </div>
+    </aside>
+
+    <!-- Chat Area -->
+    <div class="flex-1 flex flex-col">
+      <!-- Header -->
+      <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900">
+        <div class="flex items-center gap-3">
+          <UIcon name="i-lucide-bot" class="text-xl text-primary-500" />
+          <div>
+            <h2 class="font-semibold text-gray-900 dark:text-white">
+              {{ currentConversation?.title ?? 'AI 캠핑 장비 추천' }}
+            </h2>
+            <p class="text-xs text-gray-500">Claude Sonnet으로 구동</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- Messages -->
+      <div
+        ref="messagesContainer"
+        class="flex-1 overflow-y-auto p-6 space-y-4"
+      >
+        <!-- Welcome message when no conversation -->
+        <div v-if="!currentConversation" class="flex flex-col items-center justify-center h-full text-center">
+          <UIcon name="i-lucide-tent" class="text-6xl text-gray-300 dark:text-gray-700 mb-4" />
+          <h3 class="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-2">AI 캠핑 장비 전문 어시스턴트</h3>
+          <p class="text-gray-500 dark:text-gray-400 max-w-md">
+            캠핑 장비 추천, 브랜드 비교, 중고 구매 팁 등 모든 것을 물어보세요!
+          </p>
+          <div class="mt-6 grid grid-cols-2 gap-3 w-full max-w-lg">
+            <UButton
+              v-for="prompt in ['입문자용 텐트 추천해주세요', '4계절 침낭 비교해주세요', '백패킹 장비 리스트 알려주세요', '중고 장비 구매 시 주의사항']"
+              :key="prompt"
+              :label="prompt"
+              color="neutral"
+              variant="outline"
+              size="sm"
+              class="text-left text-xs"
+              @click="inputText = prompt"
+            />
+          </div>
+        </div>
+
+        <!-- Messages -->
+        <template v-if="currentConversation">
+          <AiChatMessage
+            v-for="msg in messages"
+            :key="msg.id"
+            :role="msg.role"
+            :content="msg.content"
+          />
+
+          <!-- Streaming message -->
+          <AiChatMessage
+            v-if="isStreaming && streamingContent"
+            role="assistant"
+            :content="streamingContent"
+            :streaming="true"
+          />
+
+          <!-- Thinking indicator -->
+          <div v-if="isStreaming && !streamingContent" class="flex gap-3">
+            <div class="w-8 h-8 rounded-full bg-gray-600 flex items-center justify-center">
+              <UIcon name="i-lucide-bot" class="text-white text-base" />
+            </div>
+            <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-2xl rounded-tl-sm px-4 py-3">
+              <div class="flex gap-1">
+                <span class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 0ms" />
+                <span class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 150ms" />
+                <span class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 300ms" />
+              </div>
+            </div>
+          </div>
+        </template>
+      </div>
+
+      <!-- Input Area -->
+      <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900">
+        <div class="flex gap-3 items-end">
+          <UTextarea
+            v-model="inputText"
+            placeholder="캠핑 장비에 대해 질문하세요... (Shift+Enter: 줄바꿈)"
+            :rows="1"
+            autoresize
+            :max-rows="5"
+            class="flex-1"
+            @keydown="handleKeydown"
+          />
+          <UButton
+            icon="i-lucide-send"
+            :loading="isStreaming"
+            :disabled="!inputText.trim() || isStreaming"
+            @click="handleSend"
+          />
+        </div>
+        <p class="text-xs text-gray-400 mt-2">Enter로 전송 · Shift+Enter로 줄바꿈</p>
+      </div>
+    </div>
+  </div>
+</template>
--- a/app/pages/confirm.vue
+++ b/app/pages/confirm.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+definePageMeta({ layout: false })
+
+const supabase = useSupabaseClient()
+const router = useRouter()
+
+onMounted(async () => {
+  const { data } = await supabase.auth.getSession()
+  if (data.session) {
+    await router.push('/')
+  } else {
+    await router.push('/login')
+  }
+})
+</script>
+
+<template>
+  <UApp>
+    <div class="min-h-screen flex items-center justify-center">
+      <div class="text-center space-y-4">
+        <UIcon name="i-lucide-loader-circle" class="text-5xl text-primary-500 animate-spin" />
+        <p class="text-gray-600 dark:text-gray-400">인증 처리 중...</p>
+      </div>
+    </div>
+  </UApp>
+</template>
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import { CATEGORY_LABELS } from '~/types/purchase'
+import { STATUS_LABELS, PLATFORM_LABELS } from '~/types/used-sale'
+import type { EquipmentCategory } from '~/types/purchase'
+import type { SaleStatus, SalePlatform } from '~/types/used-sale'
+
+definePageMeta({ middleware: 'auth' })
+
+const { purchases, totalSpent, fetchPurchases } = usePurchases()
+const { sales, totalRevenue, byStatus, fetchSales } = useUsedSales()
+
+await Promise.all([fetchPurchases(), fetchSales()])
+
+const recentPurchases = computed(() => purchases.value.slice(0, 5))
+const recentSales = computed(() => sales.value.slice(0, 5))
+
+const stats = computed(() => [
+  {
+    label: '총 구매금액',
+    value: totalSpent.value.toLocaleString('ko-KR') + '원',
+    icon: 'i-lucide-shopping-cart',
+    color: 'text-blue-500'
+  },
+  {
+    label: '보유 장비',
+    value: purchases.value.length + '개',
+    icon: 'i-lucide-tent',
+    color: 'text-green-500'
+  },
+  {
+    label: '판매 수익',
+    value: totalRevenue.value.toLocaleString('ko-KR') + '원',
+    icon: 'i-lucide-coins',
+    color: 'text-yellow-500'
+  },
+  {
+    label: '판매중',
+    value: byStatus.value.listing.length + '개',
+    icon: 'i-lucide-tag',
+    color: 'text-purple-500'
+  }
+])
+
+function formatPrice(price: number) {
+  return price.toLocaleString('ko-KR') + '원'
+}
+</script>
+
+<template>
+  <div class="p-6 space-y-6">
+    <div>
+      <h1 class="text-2xl font-bold text-gray-900 dark:text-white">대시보드</h1>
+      <p class="text-gray-500 dark:text-gray-400 mt-1">캠핑 장비 현황을 한눈에 확인하세요</p>
+    </div>
+
+    <!-- Stats -->
+    <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
+      <UCard v-for="stat in stats" :key="stat.label">
+        <div class="flex items-center gap-3">
+          <UIcon :name="stat.icon" class="text-2xl shrink-0" :class="stat.color" />
+          <div>
+            <p class="text-xs text-gray-500 dark:text-gray-400">{{ stat.label }}</p>
+            <p class="text-lg font-bold text-gray-900 dark:text-white">{{ stat.value }}</p>
+          </div>
+        </div>
+      </UCard>
+    </div>
+
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+      <!-- Recent Purchases -->
+      <UCard>
+        <template #header>
+          <div class="flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-gray-800">
+            <h3 class="font-semibold text-gray-900 dark:text-white">최근 구매 장비</h3>
+            <NuxtLink to="/purchases" class="text-sm text-primary-500 hover:text-primary-600">전체보기</NuxtLink>
+          </div>
+        </template>
+        <div class="divide-y divide-gray-100 dark:divide-gray-800">
+          <div
+            v-for="p in recentPurchases"
+            :key="p.id"
+            class="flex items-center justify-between py-3 px-4"
+          >
+            <div>
+              <p class="font-medium text-sm text-gray-900 dark:text-white">{{ p.name }}</p>
+              <p class="text-xs text-gray-500">
+                {{ CATEGORY_LABELS[p.category as EquipmentCategory] }} · {{ p.purchase_date }}
+              </p>
+            </div>
+            <span class="text-sm font-semibold text-gray-900 dark:text-white">
+              {{ formatPrice(p.price) }}
+            </span>
+          </div>
+          <p v-if="recentPurchases.length === 0" class="text-sm text-gray-400 text-center py-6">
+            구매한 장비가 없습니다
+          </p>
+        </div>
+      </UCard>
+
+      <!-- Recent Sales -->
+      <UCard>
+        <template #header>
+          <div class="flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-gray-800">
+            <h3 class="font-semibold text-gray-900 dark:text-white">중고 판매 현황</h3>
+            <NuxtLink to="/used-sales" class="text-sm text-primary-500 hover:text-primary-600">전체보기</NuxtLink>
+          </div>
+        </template>
+        <div class="divide-y divide-gray-100 dark:divide-gray-800">
+          <div
+            v-for="s in recentSales"
+            :key="s.id"
+            class="flex items-center justify-between py-3 px-4"
+          >
+            <div>
+              <p class="font-medium text-sm text-gray-900 dark:text-white">{{ s.item_name }}</p>
+              <p class="text-xs text-gray-500">
+                {{ PLATFORM_LABELS[s.platform as SalePlatform] }} · {{ s.listed_at }}
+              </p>
+            </div>
+            <UsedSalesUsedSaleBadge :status="s.status as SaleStatus" />
+          </div>
+          <p v-if="recentSales.length === 0" class="text-sm text-gray-400 text-center py-6">
+            판매 등록된 장비가 없습니다
+          </p>
+        </div>
+      </UCard>
+    </div>
+  </div>
+</template>
--- a/app/pages/login.vue
+++ b/app/pages/login.vue
@@ -0,0 +1,108 @@
+<script setup lang="ts">
+definePageMeta({ layout: false })
+
+const supabase = useSupabaseClient()
+const email = ref('')
+const loading = ref(false)
+const message = ref('')
+const error = ref('')
+
+async function sendMagicLink() {
+  if (!email.value) return
+  loading.value = true
+  error.value = ''
+  message.value = ''
+
+  const { error: err } = await supabase.auth.signInWithOtp({
+    email: email.value,
+    options: {
+      emailRedirectTo: `${window.location.origin}/confirm`
+    }
+  })
+
+  loading.value = false
+  if (err) {
+    error.value = err.message
+  } else {
+    message.value = `${email.value}로 로그인 링크를 전송했습니다. 이메일을 확인해주세요.`
+  }
+}
+
+async function signInWithGoogle() {
+  await supabase.auth.signInWithOAuth({
+    provider: 'google',
+    options: {
+      redirectTo: `${window.location.origin}/confirm`
+    }
+  })
+}
+</script>
+
+<template>
+  <UApp>
+    <div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-green-50 to-emerald-100 dark:from-gray-900 dark:to-gray-800 p-4">
+      <UCard class="w-full max-w-md">
+        <!-- Logo -->
+        <template #header>
+          <div class="text-center py-4">
+            <div class="flex items-center justify-center gap-2 mb-2">
+              <UIcon name="i-lucide-tent" class="text-4xl text-primary-500" />
+              <h1 class="text-3xl font-bold text-gray-900 dark:text-white">CampGear</h1>
+            </div>
+            <p class="text-gray-500 dark:text-gray-400">캠핑 장비 관리 앱</p>
+          </div>
+        </template>
+
+        <div class="space-y-4 py-2">
+          <!-- Magic Link -->
+          <div class="space-y-3">
+            <UFormField label="이메일" name="email">
+              <UInput
+                v-model="email"
+                type="email"
+                placeholder="your@email.com"
+                class="w-full"
+                @keyup.enter="sendMagicLink"
+              />
+            </UFormField>
+
+            <UButton
+              label="매직 링크로 로그인"
+              icon="i-lucide-mail"
+              class="w-full"
+              :loading="loading"
+              @click="sendMagicLink"
+            />
+          </div>
+
+          <!-- Divider -->
+          <USeparator label="또는" />
+
+          <!-- Google OAuth -->
+          <UButton
+            label="Google로 로그인"
+            icon="i-simple-icons-google"
+            color="neutral"
+            variant="outline"
+            class="w-full"
+            @click="signInWithGoogle"
+          />
+
+          <!-- Feedback -->
+          <UAlert
+            v-if="message"
+            color="success"
+            icon="i-lucide-check-circle"
+            :description="message"
+          />
+          <UAlert
+            v-if="error"
+            color="error"
+            icon="i-lucide-alert-circle"
+            :description="error"
+          />
+        </div>
+      </UCard>
+    </div>
+  </UApp>
+</template>
--- a/app/pages/purchases/[id].vue
+++ b/app/pages/purchases/[id].vue
@@ -0,0 +1,103 @@
+<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>
--- a/app/pages/purchases/index.vue
+++ b/app/pages/purchases/index.vue
@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import { CATEGORY_LABELS, CATEGORY_OPTIONS } from '~/types/purchase'
+import type { Purchase, PurchaseInsert, EquipmentCategory } from '~/types/purchase'
+
+definePageMeta({ middleware: 'auth' })
+
+const { purchases, totalSpent, categoryBreakdown, loading, error, fetchPurchases, createPurchase, updatePurchase, deletePurchase } = usePurchases()
+
+await fetchPurchases()
+
+const showModal = ref(false)
+const editingPurchase = ref<Purchase | undefined>(undefined)
+const searchQuery = ref('')
+const selectedCategory = ref('')
+
+const filterOptions = [
+  { value: '', label: '전체 카테고리' },
+  ...CATEGORY_OPTIONS
+]
+
+const filtered = computed(() => {
+  let items = 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)
+    )
+  }
+  if (selectedCategory.value) {
+    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: '' }
+]
+
+function openCreate() {
+  editingPurchase.value = undefined
+  showModal.value = true
+}
+
+function openEdit(purchase: Purchase) {
+  editingPurchase.value = purchase
+  showModal.value = true
+}
+
+async function handleSubmit(data: PurchaseInsert) {
+  if (editingPurchase.value) {
+    await updatePurchase(editingPurchase.value.id, data)
+  } else {
+    await createPurchase(data)
+  }
+  showModal.value = false
+}
+
+async function handleDelete(id: string) {
+  if (!confirm('이 장비를 삭제하시겠습니까?')) return
+  await deletePurchase(id)
+}
+
+function formatPrice(price: number) {
+  return price.toLocaleString('ko-KR') + '원'
+}
+</script>
+
+<template>
+  <div class="p-6 space-y-6">
+    <div class="flex items-center justify-between">
+      <div>
+        <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>
+
+    <!-- Stats -->
+    <PurchasesPurchaseStats
+      :total-spent="totalSpent"
+      :category-breakdown="categoryBreakdown"
+      :count="purchases.length"
+    />
+
+    <!-- Filters -->
+    <div class="flex gap-3 flex-wrap">
+      <UInput
+        v-model="searchQuery"
+        icon="i-lucide-search"
+        placeholder="장비명, 브랜드, 구매처 검색..."
+        class="flex-1 min-w-48"
+      />
+      <USelect
+        v-model="selectedCategory"
+        :items="filterOptions"
+        class="w-48"
+      />
+    </div>
+
+    <!-- Error -->
+    <UAlert v-if="error" color="error" :description="error" />
+
+    <!-- Table -->
+    <UCard>
+      <UTable
+        :data="filtered"
+        :columns="columns"
+        :loading="loading"
+      >
+        <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>
+        </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-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>
+        </template>
+      </UTable>
+    </UCard>
+
+    <!-- Modal -->
+    <PurchasesPurchaseModal
+      v-model:open="showModal"
+      :initial="editingPurchase"
+      @submit="handleSubmit"
+    />
+  </div>
+</template>
--- a/app/pages/used-sales/[id].vue
+++ b/app/pages/used-sales/[id].vue
@@ -0,0 +1,105 @@
+<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>
--- a/app/pages/used-sales/index.vue
+++ b/app/pages/used-sales/index.vue
@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import { STATUS_LABELS, PLATFORM_LABELS, STATUS_OPTIONS } from '~/types/used-sale'
+import type { UsedSale, UsedSaleInsert, SaleStatus, SalePlatform } from '~/types/used-sale'
+
+definePageMeta({ middleware: 'auth' })
+
+const { sales, totalRevenue, byStatus, loading, error, fetchSales, createSale, updateSale, deleteSale } = useUsedSales()
+
+await fetchSales()
+
+const showModal = ref(false)
+const editingSale = ref<UsedSale | undefined>(undefined)
+const activeTab = ref<SaleStatus | 'all'>('all')
+
+const tabOptions = [
+  { value: 'all', label: '전체' },
+  { value: 'listing', label: `판매중 (${byStatus.value.listing.length})` },
+  { value: 'reserved', label: `예약중 (${byStatus.value.reserved.length})` },
+  { value: 'sold', label: `판매완료 (${byStatus.value.sold.length})` },
+  { value: 'cancelled', label: `취소 (${byStatus.value.cancelled.length})` }
+]
+
+const filtered = computed(() => {
+  if (activeTab.value === 'all') return sales.value
+  return sales.value.filter(s => s.status === activeTab.value)
+})
+
+const columns = [
+  { key: 'item_name', label: '장비명' },
+  { key: 'platform', label: '플랫폼' },
+  { key: 'sale_price', label: '희망가' },
+  { key: 'final_price', label: '최종가' },
+  { key: 'status', label: '상태' },
+  { key: 'listed_at', label: '등록일' },
+  { key: 'actions', label: '' }
+]
+
+function openCreate() {
+  editingSale.value = undefined
+  showModal.value = true
+}
+
+function openEdit(sale: UsedSale) {
+  editingSale.value = sale
+  showModal.value = true
+}
+
+async function handleSubmit(data: UsedSaleInsert) {
+  if (editingSale.value) {
+    await updateSale(editingSale.value.id, data)
+  } else {
+    await createSale(data)
+  }
+  showModal.value = false
+}
+
+async function handleDelete(id: string) {
+  if (!confirm('이 판매 등록을 삭제하시겠습니까?')) return
+  await deleteSale(id)
+}
+
+async function markAsSold(sale: UsedSale) {
+  await updateSale(sale.id, {
+    status: 'sold',
+    final_price: sale.final_price ?? sale.sale_price,
+    sold_at: new Date().toISOString().split('T')[0]
+  })
+}
+
+function formatPrice(price?: number) {
+  if (!price && price !== 0) return '-'
+  return price.toLocaleString('ko-KR') + '원'
+}
+</script>
+
+<template>
+  <div class="p-6 space-y-6">
+    <div class="flex items-center justify-between">
+      <div>
+        <h1 class="text-2xl font-bold text-gray-900 dark:text-white">중고 판매 관리</h1>
+        <p class="text-gray-500 dark:text-gray-400 mt-1">
+          총 판매수익 {{ formatPrice(totalRevenue) }}
+        </p>
+      </div>
+      <UButton icon="i-lucide-plus" label="판매 등록" @click="openCreate" />
+    </div>
+
+    <!-- Status cards -->
+    <div class="grid grid-cols-4 gap-4">
+      <UCard v-for="opt in tabOptions.slice(1)" :key="opt.value">
+        <div class="text-center">
+          <p class="text-sm text-gray-500">{{ STATUS_LABELS[opt.value as SaleStatus] }}</p>
+          <p class="text-2xl font-bold mt-1">{{ byStatus[opt.value as SaleStatus].length }}</p>
+        </div>
+      </UCard>
+    </div>
+
+    <!-- Tabs -->
+    <div class="flex gap-2 flex-wrap">
+      <UButton
+        v-for="opt in tabOptions"
+        :key="opt.value"
+        :label="opt.label"
+        :color="activeTab === opt.value ? 'primary' : 'neutral'"
+        :variant="activeTab === opt.value ? 'solid' : 'ghost'"
+        size="sm"
+        @click="activeTab = opt.value as SaleStatus | 'all'"
+      />
+    </div>
+
+    <UAlert v-if="error" color="error" :description="error" />
+
+    <!-- Table -->
+    <UCard>
+      <UTable :data="filtered" :columns="columns" :loading="loading">
+        <template #platform-cell="{ row }">
+          {{ PLATFORM_LABELS[row.original.platform as SalePlatform] }}
+        </template>
+        <template #sale_price-cell="{ row }">
+          {{ formatPrice(row.original.sale_price) }}
+        </template>
+        <template #final_price-cell="{ row }">
+          {{ formatPrice(row.original.final_price) }}
+        </template>
+        <template #status-cell="{ row }">
+          <UsedSalesUsedSaleBadge :status="row.original.status as SaleStatus" />
+        </template>
+        <template #actions-cell="{ row }">
+          <div class="flex gap-1 justify-end">
+            <NuxtLink :to="`/used-sales/${row.original.id}`">
+              <UButton icon="i-lucide-eye" size="sm" color="neutral" variant="ghost" />
+            </NuxtLink>
+            <UButton
+              v-if="row.original.status === 'listing' || row.original.status === 'reserved'"
+              icon="i-lucide-check"
+              size="sm"
+              color="success"
+              variant="ghost"
+              title="판매완료"
+              @click="markAsSold(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>
+        </template>
+      </UTable>
+    </UCard>
+
+    <!-- Modal -->
+    <UModal :open="showModal" :title="editingSale ? '판매 수정' : '판매 등록'" @update:open="showModal = $event">
+      <template #body>
+        <UsedSalesUsedSaleForm
+          :initial="editingSale"
+          @submit="handleSubmit"
+          @cancel="showModal = false"
+        />
+      </template>
+    </UModal>
+  </div>
+</template>
--- a/app/types/ai.ts
+++ b/app/types/ai.ts
@@ -0,0 +1,15 @@
+export interface AiConversation {
+  id: string
+  user_id: string
+  title: string
+  created_at: string
+  updated_at: string
+}
+
+export interface AiMessage {
+  id: string
+  conversation_id: string
+  role: 'user' | 'assistant'
+  content: string
+  created_at: string
+}
--- a/app/types/purchase.ts
+++ b/app/types/purchase.ts
@@ -0,0 +1,55 @@
+export type EquipmentCategory =
+  | 'tent'
+  | 'sleeping'
+  | 'cooking'
+  | 'lighting'
+  | 'clothing'
+  | 'backpack'
+  | 'furniture'
+  | 'safety'
+  | 'electronics'
+  | 'other'
+
+export const CATEGORY_LABELS: Record<EquipmentCategory, string> = {
+  tent: '텐트',
+  sleeping: '침낭/매트',
+  cooking: '취사도구',
+  lighting: '조명',
+  clothing: '의류',
+  backpack: '배낭',
+  furniture: '가구',
+  safety: '안전장비',
+  electronics: '전자기기',
+  other: '기타'
+}
+
+export const CATEGORY_OPTIONS = Object.entries(CATEGORY_LABELS).map(([value, label]) => ({
+  value: value as EquipmentCategory,
+  label
+}))
+
+export interface Purchase {
+  id: string
+  user_id: string
+  name: string
+  category: EquipmentCategory
+  brand?: string
+  price: number
+  purchase_date: string
+  store?: string
+  warranty_until?: string
+  notes?: string
+  created_at: string
+  updated_at: string
+}
+
+export interface PurchaseInsert {
+  name: string
+  category: EquipmentCategory
+  brand?: string
+  price: number
+  purchase_date: string
+  store?: string
+  warranty_until?: string
+  notes?: string
+}
--- a/app/types/used-sale.ts
+++ b/app/types/used-sale.ts
@@ -0,0 +1,62 @@
+export type SaleStatus = 'listing' | 'reserved' | 'sold' | 'cancelled'
+export type SalePlatform = 'danggeun' | 'bunjang' | 'joonggo' | 'naver' | 'other'
+
+export const STATUS_LABELS: Record<SaleStatus, string> = {
+  listing: '판매중',
+  reserved: '예약중',
+  sold: '판매완료',
+  cancelled: '취소'
+}
+
+export const STATUS_COLORS: Record<SaleStatus, string> = {
+  listing: 'primary',
+  reserved: 'warning',
+  sold: 'success',
+  cancelled: 'neutral'
+}
+
+export const PLATFORM_LABELS: Record<SalePlatform, string> = {
+  danggeun: '당근마켓',
+  bunjang: '번개장터',
+  joonggo: '중고나라',
+  naver: '네이버 카페',
+  other: '기타'
+}
+
+export const PLATFORM_OPTIONS = Object.entries(PLATFORM_LABELS).map(([value, label]) => ({
+  value: value as SalePlatform,
+  label
+}))
+
+export const STATUS_OPTIONS = Object.entries(STATUS_LABELS).map(([value, label]) => ({
+  value: value as SaleStatus,
+  label
+}))
+
+export interface UsedSale {
+  id: string
+  user_id: string
+  purchase_id?: string
+  item_name: string
+  sale_price: number
+  final_price?: number
+  platform: SalePlatform
+  status: SaleStatus
+  notes?: string
+  listed_at: string
+  sold_at?: string
+  created_at: string
+  updated_at: string
+}
+
+export interface UsedSaleInsert {
+  purchase_id?: string
+  item_name: string
+  sale_price: number
+  final_price?: number
+  platform: SalePlatform
+  status: SaleStatus
+  notes?: string
+  listed_at: string
+  sold_at?: string
+}
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -0,0 +1,6 @@
+// @ts-check
+import withNuxt from './.nuxt/eslint.config.mjs'
+
+export default withNuxt(
+  // Your custom configs here
+)
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -0,0 +1,43 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  modules: [
+    '@nuxt/eslint',
+    '@nuxt/ui',
+    '@nuxtjs/supabase'
+  ],
+
+  devtools: {
+    enabled: true
+  },
+
+  css: ['~/assets/css/main.css'],
+
+  runtimeConfig: {
+    anthropicApiKey: process.env.ANTHROPIC_API_KEY,
+    public: {}
+  },
+
+  supabase: {
+    redirect: true,
+    redirectOptions: {
+      login: '/login',
+      callback: '/confirm',
+      exclude: ['/login']
+    }
+  },
+
+  routeRules: {
+    '/': { prerender: false }
+  },
+
+  compatibilityDate: '2025-01-15',
+
+  eslint: {
+    config: {
+      stylistic: {
+        commaDangle: 'never',
+        braceStyle: '1tbs'
+      }
+    }
+  }
+})
--- a/package.json
+++ b/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "nuxt-claude",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare",
+    "lint": "eslint .",
+    "typecheck": "nuxt typecheck"
+  },
+  "dependencies": {
+    "@anthropic-ai/sdk": "^0.39.0",
+    "@iconify-json/lucide": "^1.2.95",
+    "@iconify-json/simple-icons": "^1.2.72",
+    "@nuxt/ui": "^4.5.1",
+    "@nuxtjs/supabase": "^1.5.0",
+    "nuxt": "^4.3.1",
+    "tailwindcss": "^4.2.1",
+    "zod": "^3.24.2"
+  },
+  "devDependencies": {
+    "@nuxt/eslint": "^1.15.2",
+    "@types/node": "^22.13.10",
+    "eslint": "^10.0.2",
+    "typescript": "^5.9.3",
+    "vue-tsc": "^3.2.5"
+  },
+  "packageManager": "pnpm@10.30.3"
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -0,0 +1,6 @@
+ignoredBuiltDependencies:
+  - '@parcel/watcher'
+  - '@tailwindcss/oxide'
+  - esbuild
+  - unrs-resolver
+  - vue-demi
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/renovate.json
+++ b/renovate.json
@@ -0,0 +1,13 @@
+{
+  "extends": [
+    "github>nuxt/renovate-config-nuxt"
+  ],
+  "lockFileMaintenance": {
+    "enabled": true
+  },
+  "packageRules": [{
+    "matchDepTypes": ["resolutions"],
+    "enabled": false
+  }],
+  "postUpdateOptions": ["pnpmDedupe"]
+}
--- a/server/api/ai/chat.post.ts
+++ b/server/api/ai/chat.post.ts
@@ -0,0 +1,51 @@
+import Anthropic from '@anthropic-ai/sdk'
+
+const SYSTEM_PROMPT = `당신은 캠핑 장비 전문 AI 어시스턴트입니다.
+사용자의 캠핑 활동과 장비 선택에 대해 전문적인 조언을 제공합니다.
+
+주요 역할:
+- 브랜드별, 가격대별, 계절별 장비 추천
+- 장비 간 호환성 및 조합 제안
+- 중고 장비 구매/판매 관련 조언
+- 캠핑 스타일(백패킹, 오토캠핑, 글램핑 등)에 맞는 장비 선택
+- 유지보수 및 관리 방법 안내
+
+응답 스타일:
+- 한국어로 친절하고 전문적으로 답변
+- 구체적인 제품명, 가격대, 구매처 정보 포함
+- 사용자의 예산과 필요에 맞는 현실적인 추천 제공`
+
+export default defineEventHandler(async (event) => {
+  const config = useRuntimeConfig()
+  const body = await readBody(event)
+
+  const { messages } = body as {
+    conversationId: string
+    messages: Array<{ role: 'user' | 'assistant', content: string }>
+  }
+
+  const anthropic = new Anthropic({ apiKey: config.anthropicApiKey })
+
+  const stream = anthropic.messages.stream({
+    model: 'claude-sonnet-4-6',
+    max_tokens: 2048,
+    system: SYSTEM_PROMPT,
+    messages: messages.filter(m => m.content.trim())
+  })
+
+  const readableStream = new ReadableStream({
+    async start(controller) {
+      stream.on('text', (text) => {
+        controller.enqueue(new TextEncoder().encode(text))
+      })
+      stream.on('finalMessage', () => {
+        controller.close()
+      })
+      stream.on('error', (err) => {
+        controller.error(err)
+      })
+    }
+  })
+
+  return sendStream(event, readableStream)
+})
--- a/supabase-schema.sql
+++ b/supabase-schema.sql
@@ -0,0 +1,110 @@
+-- CampGear Supabase Schema
+-- Run this in Supabase SQL Editor
+
+-- Enable UUID extension
+CREATE EXTENSION IF NOT EXISTS "uuid-ossp";
+
+-- ENUM types
+CREATE TYPE equipment_category AS ENUM (
+  'tent', 'sleeping', 'cooking', 'lighting', 'clothing',
+  'backpack', 'furniture', 'safety', 'electronics', 'other'
+);
+
+CREATE TYPE sale_status AS ENUM ('listing', 'reserved', 'sold', 'cancelled');
+CREATE TYPE sale_platform AS ENUM ('danggeun', 'bunjang', 'joonggo', 'naver', 'other');
+
+-- purchases table
+CREATE TABLE purchases (
+  id UUID DEFAULT uuid_generate_v4() PRIMARY KEY,
+  user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE NOT NULL,
+  name TEXT NOT NULL,
+  category equipment_category NOT NULL,
+  brand TEXT,
+  price INTEGER NOT NULL DEFAULT 0,
+  purchase_date DATE NOT NULL,
+  store TEXT,
+  warranty_until DATE,
+  notes TEXT,
+  created_at TIMESTAMPTZ DEFAULT NOW() NOT NULL,
+  updated_at TIMESTAMPTZ DEFAULT NOW() NOT NULL
+);
+
+-- used_sales table
+CREATE TABLE used_sales (
+  id UUID DEFAULT uuid_generate_v4() PRIMARY KEY,
+  user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE NOT NULL,
+  purchase_id UUID REFERENCES purchases(id) ON DELETE SET NULL,
+  item_name TEXT NOT NULL,
+  sale_price INTEGER NOT NULL DEFAULT 0,
+  final_price INTEGER,
+  platform sale_platform NOT NULL,
+  status sale_status NOT NULL DEFAULT 'listing',
+  notes TEXT,
+  listed_at DATE NOT NULL,
+  sold_at DATE,
+  created_at TIMESTAMPTZ DEFAULT NOW() NOT NULL,
+  updated_at TIMESTAMPTZ DEFAULT NOW() NOT NULL
+);
+
+-- ai_conversations table
+CREATE TABLE ai_conversations (
+  id UUID DEFAULT uuid_generate_v4() PRIMARY KEY,
+  user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE NOT NULL,
+  title TEXT NOT NULL DEFAULT '새 대화',
+  created_at TIMESTAMPTZ DEFAULT NOW() NOT NULL,
+  updated_at TIMESTAMPTZ DEFAULT NOW() NOT NULL
+);
+
+-- ai_messages table
+CREATE TABLE ai_messages (
+  id UUID DEFAULT uuid_generate_v4() PRIMARY KEY,
+  conversation_id UUID REFERENCES ai_conversations(id) ON DELETE CASCADE NOT NULL,
+  role TEXT NOT NULL CHECK (role IN ('user', 'assistant')),
+  content TEXT NOT NULL,
+  created_at TIMESTAMPTZ DEFAULT NOW() NOT NULL
+);
+
+-- updated_at trigger function
+CREATE OR REPLACE FUNCTION update_updated_at()
+RETURNS TRIGGER AS $$
+BEGIN
+  NEW.updated_at = NOW();
+  RETURN NEW;
+END;
+$$ LANGUAGE plpgsql;
+
+-- Apply triggers
+CREATE TRIGGER purchases_updated_at BEFORE UPDATE ON purchases
+  FOR EACH ROW EXECUTE FUNCTION update_updated_at();
+
+CREATE TRIGGER used_sales_updated_at BEFORE UPDATE ON used_sales
+  FOR EACH ROW EXECUTE FUNCTION update_updated_at();
+
+CREATE TRIGGER ai_conversations_updated_at BEFORE UPDATE ON ai_conversations
+  FOR EACH ROW EXECUTE FUNCTION update_updated_at();
+
+-- Row Level Security
+ALTER TABLE purchases ENABLE ROW LEVEL SECURITY;
+ALTER TABLE used_sales ENABLE ROW LEVEL SECURITY;
+ALTER TABLE ai_conversations ENABLE ROW LEVEL SECURITY;
+ALTER TABLE ai_messages ENABLE ROW LEVEL SECURITY;
+
+-- RLS Policies: purchases
+CREATE POLICY "Users can manage own purchases" ON purchases
+  FOR ALL USING (auth.uid() = user_id);
+
+-- RLS Policies: used_sales
+CREATE POLICY "Users can manage own used_sales" ON used_sales
+  FOR ALL USING (auth.uid() = user_id);
+
+-- RLS Policies: ai_conversations
+CREATE POLICY "Users can manage own conversations" ON ai_conversations
+  FOR ALL USING (auth.uid() = user_id);
+
+-- RLS Policies: ai_messages (via conversation ownership)
+CREATE POLICY "Users can manage messages in own conversations" ON ai_messages
+  FOR ALL USING (
+    conversation_id IN (
+      SELECT id FROM ai_conversations WHERE user_id = auth.uid()
+    )
+  );
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "files": [],
+  "references": [
+    { "path": "./.nuxt/tsconfig.app.json" },
+    { "path": "./.nuxt/tsconfig.server.json" },
+    { "path": "./.nuxt/tsconfig.shared.json" },
+    { "path": "./.nuxt/tsconfig.node.json" }
+  ]
+}