Files
nuxt-claude/CLAUDE.md
hyeonggil 4f8e225727 🧑‍💻 dx: Claude Code 개발 환경 초기 설정
- 커스텀 에이전트 추가 (code-reviewer, development-planner, nextjs-app-developer, starter-cleaner, ui-markup-specialist, prd-generator, prd-validator)
- 커스텀 명령어 추가 (git: commit/branch/merge/pr, docs: update-roadmap)
- Slack 알림 훅 추가 (notification-hook.sh, stop-hook.sh)
- Claude Code 권한 및 MCP 서버 설정 업데이트
- CLAUDE.md 프로젝트 가이드 문서 추가
- Husky pre-commit 훅 설정 (lint-staged 연동)
2026-03-08 18:17:30 +09:00

2.1 KiB

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

프로젝트 개요

캠핑 장비 관리 앱 — 구매 이력, 중고 판매 관리, AI 캠핑 어시스턴트 기능을 제공한다.

주요 명령어

pnpm dev          # 개발 서버 실행 (http://localhost:3000)
pnpm build        # 프로덕션 빌드
pnpm preview      # 프로덕션 빌드 미리보기
pnpm lint         # ESLint 실행
pnpm typecheck    # TypeScript 타입 체크

기술 스택 (프로젝트 특정)

  • UI: @nuxt/ui v4 (글로벌 CLAUDE.md의 shadcn-vue 대신 Nuxt UI 사용)
  • 인증/DB: Supabase (@nuxtjs/supabase) — magic link + Google OAuth
  • AI: Anthropic Claude Sonnet 4.6 (@anthropic-ai/sdk) — streaming 방식
  • 아이콘: Lucide + Simple Icons (Iconify)
  • 검증: Zod

아키텍처

데이터 흐름

  • 인증: @nuxtjs/supabase 모듈이 자동으로 세션을 관리. app/middleware/auth.ts가 미인증 사용자를 /login으로 리다이렉트.
  • DB 접근: 컴포저블(useAiChat, usePurchases, useUsedSales)에서 useSupabaseClient()로 직접 Supabase 쿼리.
  • AI 채팅: 클라이언트 → POST /api/ai/chat → 서버에서 Anthropic SDK로 스트리밍 응답.

주요 타입

  • app/types/purchase.ts: EquipmentCategory, Purchase, PurchaseInsert
  • app/types/used-sale.ts: SaleStatus, SalePlatform, UsedSale, UsedSaleInsert
  • app/types/ai.ts: AiConversation, AiMessage

환경 변수

  • ANTHROPIC_API_KEYruntimeConfig.anthropicApiKey로 서버에서만 접근 (server-side only)
  • Supabase 설정은 @nuxtjs/supabase 모듈이 SUPABASE_URL, SUPABASE_KEY 환경변수를 자동으로 읽음

DB 스키마

supabase-schema.sql 참조. Supabase 프로젝트에 직접 적용 필요.

UI 테마

  • Primary 컬러: green (커스텀 팔레트 정의됨, app/assets/css/main.css)
  • Neutral: slate
  • 설정 위치: app/app.config.ts

CI

.github/workflows/ci.yml — push 시 lint + typecheck 자동 실행 (Node 22, pnpm).