Files

Mayne0213 8b195378a5 CHORE(app): initial configuration

- Add initial app settings
- Configure base deployment

2025-11-24 22:09:18 +09:00

4.1 KiB

Raw Blame History

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 파일을 확인하세요

4.1 KiB Raw Blame History