Todo App - Pool-C 세미나
대학생을 위한 웹 개발 세미나에서 제작된 Todo 애플리케이션입니다.
📚 세미나 소개
이 프로젝트는 풀씨 동아리 분들과 함께 진행된 웹 개발 세미나의 실습 프로젝트입니다. 웹 개발의 핵심 개념과 최신 기술 스택을 공부하기 위해 제작되었습니다.
학습 목표
- Feature-Sliced Design (FSD) 아키텍처 이해
- Next.js와 React의 최신 기능 활용
- TypeScript를 통한 타입 안전성 확보
- 상태 관리 라이브러리 (Zustand) 사용법
- 모던 CSS 프레임워크 (Tailwind CSS) 활용
✨ 주요 기능
- ✅ Todo 항목 추가, 완료, 삭제
- 🔍 실시간 검색 기능
- 🏷️ 상태별 필터링 (전체/활성/완료)
- 💾 로컬 스토리지를 통한 데이터 영구 저장
- 📱 반응형 디자인
🛠️ 기술 스택
- Framework: Next.js 15 (App Router)
- Language: TypeScript
- State Management: Zustand
- Styling: Tailwind CSS
- UI Components: shadcn/ui
- Architecture: Feature-Sliced Design (FSD)
📁 프로젝트 구조
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 앱 위젯
🚀 시작하기
설치
npm install
개발 서버 실행
npm run dev
브라우저에서 http://localhost:3000을 열어 확인하세요.
빌드
npm run build
프로덕션 실행
npm start
🎯 Feature-Sliced Design (FSD)
이 프로젝트는 FSD 아키텍처 원칙을 따릅니다:
- Layers: app → widgets → features → entities → shared
- Slices: 비즈니스 도메인별로 구분
- Segments: ui, model, api 등으로 구성
FSD의 장점
- 높은 모듈성과 재사용성
- 명확한 의존성 방향 (단방향)
- 쉬운 확장성과 유지보수
- 팀 협업에 최적화
📝 주요 컴포넌트
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
- 반응형 레이아웃
- 부드러운 애니메이션 효과
📦 주요 의존성
{
"next": "^15.1.4",
"react": "^19.0.0",
"zustand": "^5.0.2",
"tailwindcss": "^3.4.17",
"typescript": "^5"
}
💡 세미나 참가자를 위한 팁
- FSD 아키텍처 구조 파악하기:
src폴더의 계층 구조를 먼저 이해하세요 - 상태 관리 흐름 추적하기:
src/entities/todo/model/store.ts에서 Zustand 패턴을 학습하세요 - 컴포넌트 재사용성 고려하기:
shared/ui폴더의 공통 컴포넌트들을 참고하세요 - TypeScript 타입 정의 활용하기: 각 모듈의
types.ts파일을 확인하세요