DOCS(docs): update README
- Add project documentation - Update setup instructions
This commit is contained in:
150
README.md
150
README.md
@@ -1,36 +1,146 @@
|
||||
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
|
||||
# Todo App - Pool-C 세미나
|
||||
|
||||
## Getting Started
|
||||
대학생을 위한 웹 개발 세미나에서 제작된 Todo 애플리케이션입니다.
|
||||
|
||||
First, run the development server:
|
||||
## 📚 세미나 소개
|
||||
|
||||
이 프로젝트는 풀씨 동아리 분들과 함께 진행된 웹 개발 세미나의 실습 프로젝트입니다.
|
||||
웹 개발의 핵심 개념과 최신 기술 스택을 공부하기 위해 제작되었습니다.
|
||||
|
||||
### 학습 목표
|
||||
|
||||
- Feature-Sliced Design (FSD) 아키텍처 이해
|
||||
- Next.js와 React의 최신 기능 활용
|
||||
- TypeScript를 통한 타입 안전성 확보
|
||||
- 상태 관리 라이브러리 (Zustand) 사용법
|
||||
- 모던 CSS 프레임워크 (Tailwind CSS) 활용
|
||||
|
||||
## ✨ 주요 기능
|
||||
|
||||
- ✅ Todo 항목 추가, 완료, 삭제
|
||||
- 🔍 실시간 검색 기능
|
||||
- 🏷️ 상태별 필터링 (전체/활성/완료)
|
||||
- 💾 로컬 스토리지를 통한 데이터 영구 저장
|
||||
- 📱 반응형 디자인
|
||||
|
||||
## 🛠️ 기술 스택
|
||||
|
||||
- **Framework**: [Next.js 15](https://nextjs.org/) (App Router)
|
||||
- **Language**: TypeScript
|
||||
- **State Management**: [Zustand](https://zustand-demo.pmnd.rs/)
|
||||
- **Styling**: [Tailwind CSS](https://tailwindcss.com/)
|
||||
- **UI Components**: [shadcn/ui](https://ui.shadcn.com/)
|
||||
- **Architecture**: [Feature-Sliced Design (FSD)](https://feature-sliced.design/)
|
||||
|
||||
## 📁 프로젝트 구조
|
||||
|
||||
```
|
||||
src/
|
||||
├── app/ # Next.js App Router
|
||||
├── entities/ # 비즈니스 엔티티
|
||||
│ └── todo/
|
||||
│ ├── model/ # 상태 관리 (Zustand)
|
||||
│ └── ui/ # Todo 컴포넌트
|
||||
├── features/ # 기능 모듈
|
||||
│ ├── todo-create/ # Todo 생성 기능
|
||||
│ ├── todo-filter/ # 필터링 기능
|
||||
│ └── todo-search/ # 검색 기능
|
||||
├── shared/ # 공유 리소스
|
||||
│ └── ui/ # 재사용 가능한 UI 컴포넌트
|
||||
└── widgets/ # 복합 컴포넌트
|
||||
└── todo-app/ # Todo 앱 위젯
|
||||
```
|
||||
|
||||
## 🚀 시작하기
|
||||
|
||||
### 설치
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
### 개발 서버 실행
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
# or
|
||||
yarn dev
|
||||
# or
|
||||
pnpm dev
|
||||
# or
|
||||
bun dev
|
||||
```
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
브라우저에서 [http://localhost:3000](http://localhost:3000)을 열어 확인하세요.
|
||||
|
||||
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
||||
### 빌드
|
||||
|
||||
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
## Learn More
|
||||
### 프로덕션 실행
|
||||
|
||||
To learn more about Next.js, take a look at the following resources:
|
||||
```bash
|
||||
npm start
|
||||
```
|
||||
|
||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||
## 🎯 Feature-Sliced Design (FSD)
|
||||
|
||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
|
||||
이 프로젝트는 FSD 아키텍처 원칙을 따릅니다:
|
||||
|
||||
## Deploy on Vercel
|
||||
- **Layers**: app → widgets → features → entities → shared
|
||||
- **Slices**: 비즈니스 도메인별로 구분
|
||||
- **Segments**: ui, model, api 등으로 구성
|
||||
|
||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
||||
### FSD의 장점
|
||||
|
||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
|
||||
- 높은 모듈성과 재사용성
|
||||
- 명확한 의존성 방향 (단방향)
|
||||
- 쉬운 확장성과 유지보수
|
||||
- 팀 협업에 최적화
|
||||
|
||||
## 📝 주요 컴포넌트
|
||||
|
||||
### Entities
|
||||
- `todo/model/store.ts`: Zustand 기반 상태 관리
|
||||
- `todo/ui/TodoItem.tsx`: 개별 Todo 아이템
|
||||
- `todo/ui/TodoList.tsx`: Todo 리스트
|
||||
|
||||
### Features
|
||||
- `todo-create`: Todo 생성 폼
|
||||
- `todo-filter`: 상태 필터 (All/Active/Completed)
|
||||
- `todo-search`: 검색 입력
|
||||
|
||||
### Widgets
|
||||
- `todo-app`: 전체 Todo 앱을 통합하는 위젯
|
||||
|
||||
## 🎨 UI/UX
|
||||
|
||||
- Tailwind CSS를 사용한 모던한 디자인
|
||||
- shadcn/ui 컴포넌트로 일관된 UI
|
||||
- 반응형 레이아웃
|
||||
- 부드러운 애니메이션 효과
|
||||
|
||||
## 📦 주요 의존성
|
||||
|
||||
```json
|
||||
{
|
||||
"next": "^15.1.4",
|
||||
"react": "^19.0.0",
|
||||
"zustand": "^5.0.2",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "^5"
|
||||
}
|
||||
```
|
||||
|
||||
## 💡 세미나 참가자를 위한 팁
|
||||
|
||||
1. **FSD 아키텍처 구조 파악하기**: `src` 폴더의 계층 구조를 먼저 이해하세요
|
||||
2. **상태 관리 흐름 추적하기**: `src/entities/todo/model/store.ts`에서 Zustand 패턴을 학습하세요
|
||||
3. **컴포넌트 재사용성 고려하기**: `shared/ui` 폴더의 공통 컴포넌트들을 참고하세요
|
||||
4. **TypeScript 타입 정의 활용하기**: 각 모듈의 `types.ts` 파일을 확인하세요
|
||||
|
||||
## 🔗 참고 링크
|
||||
|
||||
- [Next.js Documentation](https://nextjs.org/docs)
|
||||
- [Feature-Sliced Design](https://feature-sliced.design/)
|
||||
- [Zustand Documentation](https://zustand-demo.pmnd.rs/)
|
||||
- [Tailwind CSS](https://tailwindcss.com/docs)
|
||||
- [shadcn/ui](https://ui.shadcn.com/)
|
||||
|
||||
---
|
||||
Reference in New Issue
Block a user