@wondev/dotenv-example 1.0.0

package/.claude/README.md

@@ -0,0 +1,60 @@
+# .claude
+
+이 저장소는 Claude Code를 효과적으로 활용하기 위한 프롬프트 템플릿과 가이드라인을 제공합니다.
+
+## 디렉토리 구조
+
+```shell
+.claude/
+├── commands/ # Claude Code 명령어 모음
+└── README.md
+```
+
+## 시작하기
+
+1. 이 저장소를 클론하거나 다운로드합니다
+2. 필요한 프롬프트 템플릿을 선택합니다
+3. 프로젝트에 맞게 커스터마이징합니다
+
+## 주요 내용
+
+### `commands` 내용 정리
+
+#### .claude/commands/ 작업 순서
+
+1. setting-dev.md
+   - 기본적인 next.js 프레임워크와 로컬애서 DB를 다룰 수 있도록 폴더 구조를 정리했습니다.
+2. generate-prd.md
+   - 프로젝트 정의, 타겟 사용자, 핵심 기능(3~5개), 데이터 관리, 인증&권한, 결제&비즈니스, 부가 기능을 사용자에게 입력을 받고 prd를 생성합니다.
+   - 생각보다 작업 시간이 오래 걸려 클로드에서 진행하는 것이 좋을 수 도 있을 것 같습니다.
+3. tech-lead.md
+   - 생성한 prd를 기준으로 의존성과 핵심기능의 작업 순위를 정리하여 todo(task)를 생성합니다. -> 추후, taskmaster mcp와 같이 세세한 기능을 쪼개서 정리할 수 있도록 디벨롭할 예정입니다.
+4. business-logic.md
+   - 생성한 prd와 todo를 갖고, 비즈니스 로직을 생성합니다.
+5. playwright-install.md
+   - playwright MCP를 설치합니다.
+     **프론트 진행**
+
+---
+
+**프론트 완료 후** 6. user-flow.md
+
+- 생성한 프론트 코드베이스와 각 문서를 참고하여 DB생성에 도움이 되는 user-flow를 생성합니다.
+
+7. gotobackend.md
+   - 프론트를 전부 진행을 했다면, 로컬애서 supabase와 DrizzleORM을 사용하도록 생성한 모든 문서를 업데이트 하고, 폴더를 생성합니다. 이에 맞게 환경설정을 진행합니다.
+
+### CursorRules
+
+- Convert to CLAUDE.md
+
+https://github.com/seungwonme/rules-converter
+
+`npx rules-converter claude`
+
+- 커서룰을 claude memory에 넣는 작업
+- CLUADE.md 파일도 커서룰로 만들어서 깔끔하게 memory에 넣을 수 있도록 진행하면 좋을 것 같습니다.
+
+### SupabaseRules
+
+- 프론트 완료 후, .claude/commands/ 에서 'gotobackend'를 실행하고 사용하면 됩니다.

package/.claude/commands/business_logic.md

@@ -0,0 +1,143 @@
+# Business Logic Prompt
+
+## 시스템 컨텍스트
+
+```markdown
+<expert_identity>
+당신은 Next.js 15 + React 19 바이브 코딩 전문가로, PRD와 Tasks를 기반으로 
+AI 코드 생성에 최적화된 간결한 비즈니스 로직을 작성하는 전문가입니다.
+
+**핵심 목표:**
+- PRD/Tasks → Server/Client Components 분류 및 AI 프롬프트 템플릿 생성
+- 로컬 Repository → Supabase 마이그레이션 고려한 타입 안전 설계
+- 바이브 코딩에 최적화된 2-5일 단위 구현 가능한 명세 작성
+</expert_identity>
+
+<technical_stack>
+Next.js 15 + TypeScript + Server Components 우선 + Server Actions 
++ shadcn/ui + TailwindCSS + 로컬 Repository 
+</technical_stack>
+```
+
+## 📋 입력 요구사항
+
+<input_structure>
+<prd_document>
+{docs/PRD.md 문서 내용}
+</prd_document>
+
+<tasks_list>
+{docs/TODO.md 문서 내용}
+</tasks_list>
+
+<target_phase>
+{Phase 1: 로컬 DB / Phase 2: UX 최적화}
+</target_phase>
+</input_structure>
+
+## 🎨 간결한 출력 형식
+
+<output_format>
+## 📋 Next.js 15 비즈니스 로직 명세서
+
+### 1. 핵심 기능 분류
+
+**Server Components (SEO/초기렌더링)**
+- [기능명]: src/app/[route]/page.tsx - [용도 설명]
+- [기능명]: src/components/features/[feature]/[component].tsx - [용도 설명]
+
+**Client Components (상호작용)**  
+- [기능명]: src/components/features/[feature]/[component].tsx - [상호작용 내용]
+- [기능명]: src/components/features/[feature]/[component].tsx - [상호작용 내용]
+
+**Server Actions (데이터 처리)**
+- [액션명]: src/actions/[feature]-actions.ts - [처리 내용]
+- [액션명]: src/actions/[feature]-actions.ts - [처리 내용]
+
+**Repository 패턴 (데이터 계층)**
+- [엔티티명]: src/lib/db/local/repositories/[feature]-repository.ts - [CRUD 작업]
+
+### 2. 비즈니스 플로우 (핵심만)
+
+**P0 Critical Flow:**
+```
+사용자 접속 → Server Component (초기 데이터) → Client Component (상호작용) 
+→ Server Action (처리) → Repository (저장) → UI 업데이트
+```
+
+**주요 비즈니스 규칙:**
+1. [규칙 1]: [간단한 설명]
+2. [규칙 2]: [간단한 설명] 
+3. [규칙 3]: [간단한 설명]
+
+### 3. 타입 안전성 전략
+
+**핵심 인터페이스:**
+- User, Post, Comment 등 주요 엔티티 타입 정의 필요
+- Server Actions는 ActionResult<T> 타입 반환 통일
+- Zod 스키마로 런타임 검증 (특히 폼 입력)
+
+**로컬 → Supabase 호환성:**
+- camelCase (로컬) → snake_case (Supabase) 필드명 매핑 고려
+- Date 타입 → ISO 문자열 변환 로직 필요
+
+### 4. AI 코드 생성 가이드
+
+**Server Component 생성 시:**
+"Next.js 15 Server Component로 [기능명] 구현. 서버에서 [데이터소스]로부터 데이터 페칭하여 [UI요소] 렌더링. 'use client' 없이 구현하고 TypeScript 타입 안전성 보장."
+
+**Client Component 생성 시:**
+"'use client' 지시어로 시작하는 [기능명] 컴포넌트 구현. [상호작용내용] 처리하고 [Server Action명] 호출. useState로 로딩/에러 상태 관리하며 shadcn/ui 컴포넌트 사용."
+
+**Server Action 생성 시:**
+"'use server' 지시어로 시작하는 [액션명] 구현. FormData 받아서 Zod로 검증 후 [비즈니스로직] 처리. Repository 패턴으로 데이터 저장하고 revalidatePath로 캐시 무효화."
+
+**Repository 생성 시:**
+"BaseRepository 확장하는 [엔티티명]Repository 구현. 로컬 스토리지 기반 CRUD 메서드와 [특화기능] 제공. Supabase 마이그레이션 고려한 인터페이스 설계."
+
+### 5. Phase별 구현 전략
+
+**Phase 1 (Week 1-8): 로컬 DB 기반**
+- 기본 Server Components + Client Components 구현
+- 로컬 Repository 패턴으로 빠른 프로토타이핑
+- 핵심 비즈니스 로직 검증
+
+**Phase 2 (Week 5-8): UX 최적화**  
+- 로딩 상태, 에러 처리, 반응형 디자인 강화
+- TanStack Query 도입으로 서버 상태 최적화
+- shadcn/ui 고급 컴포넌트 활용
+
+
+### 6. 개발 시 주의사항
+
+**필수 체크포인트:**
+- Server Components에 'use client' 사용 금지
+- Client Components에서 직접 DB 접근 금지  
+- Server Actions에서 반드시 타입 안전 에러 처리
+- 파일명 kebab-case, 컴포넌트명 PascalCase 준수
+
+**성능 고려사항:**
+- Server Components 우선 사용으로 번들 크기 최소화
+- Client Components는 상호작용 필수 요소만
+- 이미지 최적화 및 Core Web Vitals 기준 준수
+
+---
+
+**🎯 AI 코드 생성 준비 완료!** 
+위 가이드의 "AI 코드 생성 가이드" 섹션 프롬프트를 사용하여 
+각 컴포넌트/액션/Repository를 순차적으로 구현하세요.
+</output_format>
+
+## 💡 사용법
+
+### 입력 → 실행 → 활용
+1. **PRD + TODO 탐색** → 이 프롬프트 실행 → **간결한 비즈니스 로직 명세서** 생성
+2. **명세서의 "AI 코드 생성 가이드"** → AI 코딩 도구에 복붙 → **즉시 코드 생성**
+3. **Phase별 전략** → 점진적 구현 → **3개월 완성**
+
+### 자동 저장
+```bash
+# docs/business-logic.md 생성
+mkdir -p docs
+echo "# 📋 [프로젝트명] 비즈니스 로직 명세서" > docs/BUSINESS-LOGIC.md
+```

package/.claude/commands/generate-prd.md

@@ -0,0 +1,175 @@
+# PRD prompt
+
+## 시스템 컨텍스트
+
+```markdown
+<system_context>
+당신은 15년 경험의 시니어 프로덕트 매니저이자 Next.js 15 바이브 코딩 전문가입니다.
+빠르게 실행 가능한 PRD 문서를 생성하여 docs/PRD.md로 저장하는 것이 목표입니다.
+
+<technical_environment>
+- 기술스택: Next.js 15 + React 19 + TypeScript + TailwindCSS v3 + shadcn/ui
+- 개발방식: 로컬 스토리지
+- 문서수준: 바이브 코딩용 실행 가능한 초안
+- 컨벤션: Server Components 우선, Analysis → Planning → Implementation
+</technical_environment>
+</system_context>
+```
+
+## 📋 핵심 정보 수집 (5분)
+
+### 🎯 7가지 필수 질문
+
+**Q1. 프로젝트 정의**
+- 프로젝트명: 
+- 핵심 목적: (1문장으로)
+- 타입: 블로그/쇼핑몰/대시보드/SNS/포트폴리오/기타
+
+**Q2. 타겟 사용자**  
+- 주요 사용자: 
+- 예상 규모: 
+
+**Q3. 핵심 기능 (Must-Have 3-5개)**
+- 기능1: 
+- 기능2: 
+- 기능3: 
+- 기능4: (선택)
+- 기능5: (선택)
+
+**Q4. 데이터 관리**
+- 주요 데이터: 
+- 데이터 관계: 
+
+**Q5. 인증 & 권한**
+- 회원 시스템: 예/아니오
+- 인증 방식: 
+- 권한 레벨: 
+
+**Q6. 결제 & 비즈니스**
+- 결제 기능: 예/아니오
+- 결제 대상: 
+- 수익 모델: 
+
+**Q7. 부가 기능 (Nice-to-Have 2-3개)**
+- 
+- 
+- 
+
+## 🎨 PRD 생성 템플릿
+
+<output_format>
+# 🚀 [프로젝트명] PRD 초안
+
+## 📋 프로젝트 개요
+
+| 항목 | 내용 |
+|------|------|
+| **프로젝트명** | [Q1 답변] |
+| **핵심 목적** | [Q1 답변] |
+| **타겟 사용자** | [Q2 답변] |
+| **예상 사용자 규모** | [Q2 답변] |
+| **작성일** | |
+| **개발방식** | Next.js 15 바이브 코딩 (3개월) |
+
+## 🎯 비즈니스 목표
+
+### 해결하려는 문제
+[Q1 핵심 목적 기반 문제 정의]
+
+### 솔루션 접근법
+[핵심 기능들을 통한 문제 해결 방안]
+
+### 성공 지표 (KPI)
+- 사용자: 회원가입 수, DAU/MAU
+- 기능: [핵심 기능] 사용률, 완료율
+- 비즈니스: [결제 시] 매출, 전환율
+
+## ⭐ 핵심 기능 (MVP)
+
+### 🔥 P0 (1-4주): [기능1]
+- **구현 방식**: Server Component / Client Component
+- **예상 공수**: X일
+- **핵심 가치**: [사용자에게 제공하는 가치]
+
+### 🔥 P1 (5-8주): [기능2]
+- **구현 방식**: Server Component / Client Component  
+- **예상 공수**: X일
+- **핵심 가치**: [사용자에게 제공하는 가치]
+
+### 🔥 P2 (9-12주): [기능3]
+- **구현 방식**: Server Component / Client Component
+- **예상 공수**: X일
+- **핵심 가치**: [사용자에게 제공하는 가치]
+
+## 🗄️ 데이터 아키텍처
+
+### 핵심 데이터 엔티티
+- **[주요 엔티티1]**: [설명 및 주요 필드]
+- **[주요 엔티티2]**: [설명 및 주요 필드]
+- **[주요 엔티티3]**: [설명 및 주요 필드]
+
+### 데이터 관계
+- [엔티티1] ↔ [엔티티2]: [관계 설명]
+- [엔티티2] ↔ [엔티티3]: [관계 설명]
+
+## 🔐 인증 & 권한
+
+### 권한 관리
+- **사용자 역할**: [Q5 답변]
+- **접근 제어**: 라우트 기반 권한 관리
+
+## 💳 결제 시스템
+
+### 결제 요구사항
+- **필요 여부**: [Q6 답변]
+- **결제 대상**: [Q6 답변]
+- **수익 모델**: [Q6 답변]
+
+### 기술 구현
+- **결제 게이트웨이**: Stripe / 토스페이먼츠
+- **구현 시점**: Phase 2-3
+
+## 📅 3개월 개발 일정
+
+### Phase 1: 기반 구축 (Week 1-4)
+- **Week 1-2**: Next.js 15 설정 + [기능1] 구현
+- **Week 3-4**: [기능2] + 기본 인증 시스템
+
+### Phase 2: 핵심 기능 (Week 5-8)  
+- **Week 5-6**: [기능3] + 데이터 관리
+- **Week 7-8**: UX 개선 + 테스트
+
+### Phase 3: 완성 & 배포 (Week 9-12)
+- **Week 9-12**:  배포 + 운영 준비
+
+## 🎯 성공 기준
+
+### 기술적 목표
+- [ ] 모든 핵심 기능 정상 작동
+- [ ] 반응형 디자인 90% 이상 완성
+- [ ] 페이지 로딩 3초 이내
+- [ ] SEO 기본 최적화
+
+### 사용자 경험 목표  
+- [ ] 신규 사용자 5분 내 핵심 기능 사용 가능
+- [ ] 직관적인 사용법
+- [ ] 명확한 에러 가이드
+
+### 비즈니스 목표
+- [ ] [결제 시] 결제 플로우 100% 완성
+- [ ] 안전한 데이터 관리
+- [ ] 확장 가능한 아키텍처
+
+## 💡 개발 가이드
+
+### Next.js 15 최적화
+- **Server Components 우선**: SEO + 성능 최적화
+- **Client Components 최소화**: 상호작용 필수 요소만
+- **Server Actions**: API Routes 대신 우선 사용
+
+### 바이브 코딩 전략
+- **로컬 우선**: 빠른 프로토타이핑으로 기능 검증
+- **점진적 개선**: 기본 기능 → UX 최적화 → 실서비스
+- **실시간 피드백**: 주간 데모로 방향 조정
+
+---