diff --git a/README.md b/README.md index e215bc4..7061bea 100644 --- a/README.md +++ b/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/) + +--- \ No newline at end of file