---
description: Interactive project initialization for various tech stacks
---

# Project Initializer

프로젝트 타입과 기술 스택에 맞는 초기 세팅을 자동으로 수행합니다.

## Steps to follow:

### 1. Gather Project Information
사용자에게 다음 정보를 질문하세요:

#### 프로젝트 타입
다음 중 하나를 선택하도록 안내:
- **웹 프론트엔드**: React, Next.js, Vue, Svelte 등
- **웹 백엔드**: Express, NestJS, FastAPI, Spring Boot 등
- **모바일 앱**: React Native, Flutter 등
- **풀스택**: Next.js, MERN, T3 Stack 등

#### 기술 스택 세부 사항
프로젝트 타입에 따라 구체적인 기술 스택을 질문:

**프론트엔드의 경우:**
- 프레임워크: React, Next.js, Vue.js, Svelte, Vite 등
- 언어: TypeScript, JavaScript
- 스타일링: Tailwind CSS, styled-components, CSS Modules, Emotion 등
- 상태관리: Zustand, Redux, Recoil, Jotai (필요시)
- 추가 도구: ESLint, Prettier 포함 여부

**백엔드의 경우:**
- 프레임워크: Express, NestJS, Fastify, Koa (Node.js) / FastAPI, Django (Python) / Spring Boot (Java)
- 언어: TypeScript, JavaScript, Python, Java
- 데이터베이스: PostgreSQL, MySQL, MongoDB, Redis (필요시)
- ORM/ODM: Prisma, TypeORM, Mongoose 등
- 추가 도구: ESLint, Prettier 포함 여부

**모바일의 경우:**
- 프레임워크: React Native, Flutter
- 언어: TypeScript, JavaScript, Dart
- 상태관리: Zustand, Redux Toolkit 등
- 네비게이션: React Navigation, Expo Router 등

**풀스택의 경우:**
- 스택: Next.js Full Stack, MERN, T3 Stack, SvelteKit 등
- 데이터베이스: PostgreSQL, MongoDB 등
- ORM: Prisma, Drizzle 등

#### 프로젝트 이름
- 프로젝트 폴더명 (kebab-case 권장)

### 2. Execute Project Setup

수집한 정보를 바탕으로 다음 작업을 순서대로 수행:

#### A. 프로젝트 생성
선택한 스택에 맞는 CLI 도구 사용:

**프론트엔드:**
- Next.js: `npx create-next-app@latest [프로젝트명] --typescript --tailwind --app --eslint`
- Vite + React: `npm create vite@latest [프로젝트명] -- --template react-ts`
- Vue: `npm create vue@latest [프로젝트명]`
- Svelte: `npm create svelte@latest [프로젝트명]`

**백엔드:**
- Express: 수동 설정 (package.json 생성 후 필요 패키지 설치)
- NestJS: `npx @nestjs/cli new [프로젝트명]`
- FastAPI: 수동 설정 (venv 생성, requirements.txt)

**모바일:**
- React Native: `npx react-native init [프로젝트명]` 또는 `npx create-expo-app [프로젝트명]`
- Flutter: `flutter create [프로젝트명]`

#### B. 기본 설정 파일 생성

**모든 프로젝트 공통:**
1. `.gitignore` (아직 없다면 생성)
2. `.env.example` 파일 생성 (환경변수 템플릿)
3. `README.md` 업데이트 또는 생성:
   - 프로젝트 이름
   - 기술 스택 목록
   - 설치 및 실행 방법
   - 폴더 구조 설명

**TypeScript 프로젝트:**
- `tsconfig.json` (프레임워크에서 제공하지 않는 경우)

**Node.js 프로젝트:**
- `.eslintrc` (ESLint 선택 시)
- `.prettierrc` (Prettier 선택 시)

#### C. 폴더 구조 생성

프로젝트 타입에 맞는 기본 폴더 구조:

**프론트엔드:**
```
src/
├── components/      # 재사용 가능한 컴포넌트
├── pages/ or app/   # 페이지 (프레임워크에 따라)
├── styles/          # 전역 스타일
├── utils/           # 유틸리티 함수
├── hooks/           # 커스텀 훅 (React)
├── types/           # TypeScript 타입 정의
└── constants/       # 상수
```

**백엔드:**
```
src/
├── controllers/     # 컨트롤러
├── services/        # 비즈니스 로직
├── models/          # 데이터 모델
├── routes/          # 라우트 정의
├── middleware/      # 미들웨어
├── config/          # 설정 파일
├── utils/           # 유틸리티
└── types/           # TypeScript 타입
```

#### D. 초기 패키지 설치

**선택된 추가 도구 설치:**
- Tailwind CSS: `npm install -D tailwindcss postcss autoprefixer`
- ESLint + Prettier: `npm install -D eslint prettier eslint-config-prettier`
- 상태관리 라이브러리 (선택 시)
- 기타 필수 의존성

#### E. Git 초기화
```bash
cd [프로젝트명]
git init
git add .
git commit -m "Initial commit: Setup [기술스택] project"
```

### 3. 완료 메시지

프로젝트 세팅이 완료되면 한국어로 요약 메시지 출력:

```
✅ 프로젝트 초기 세팅이 완료되었습니다!

📦 프로젝트: [프로젝트명]
🛠️  기술 스택:
   - [선택한 기술 스택 목록]

📁 생성된 구조:
   [폴더 구조 요약]

🚀 다음 단계:
   1. cd [프로젝트명]
   2. npm install (아직 안했다면)
   3. npm run dev (또는 해당 프레임워크의 dev 명령어)

💡 .env.example을 참고해서 .env 파일을 생성하세요!

화이팅! 🔥
```

## Important Notes:
- 사용자가 선택한 옵션을 정확히 반영하여 프로젝트를 생성하세요
- 모든 명령어 실행 전에 현재 디렉토리를 확인하세요
- 이미 존재하는 폴더/파일이 있다면 덮어쓰기 전에 사용자에게 확인받으세요
- 한국어로 친절하게 안내하세요
- 각 단계마다 진행 상황을 알려주세요