ToDoit! 할 일 관리 앱 📝

오늘을 파란빛으로 기록하고 내일의 성장을 이어가는, 직관적인 투두리스트 앱입니다. 🌊
React와 TypeScript로 개발했으며, Zustand 상태 관리를 통해 가볍고 직관적인 경험을 제공합니다.

주요 기능

• 날짜별 할 일 관리 - 원하는 날짜를 선택하여 투두 관리
• 완료/미완료 토글 - 간단한 클릭으로 할 일 상태 변경
• 실시간 편집 - 더블클릭으로 할 일 내용 수정
• 삭제 기능 - 불필요한 할 일 제거
• 진행률 시각화 - 완료된 할 일의 진행 상황을 한눈에 확인
• 상태 영속화(LocalStorage) - 새로고침해도 할 일 데이터 유지
• 날짜 이동 제한 - 오늘 기준으로 미래 날짜는 선택 불가, 과거는 7일 전까지만 이동 가능
• 입력 글자 제한 - 새 할 일 입력 시 최대 15자까지만 작성 가능
• 반응형 최적화 - 모바일과 PC 환경에 맞춰 투두 박스 크기와 폰트 크기 자동 조정
• 다크 모드 토글 - 화면 하단 버튼으로 라이트/다크 모드 전환 가능

🚀 빠른 시작

설치

git clone [repository-url]
cd TodoList
npm install

개발 서버 실행

npm run dev

빌드

npm run build

🛠️ 기술 스택

• React 19.1.1 - 최신 React 기능 활용
• TypeScript 5.8.3 - 타입 안정성 보장
• Vite 7.1.0 - 빠른 개발 환경
• Tailwind CSS 3.4.17 - 모던한 UI 디자인
• Zustand 5.0.0+ - 전역 상태 관리
• Zustand/middleware - localStorage와 상태 동기화
• Vercel – 프론트엔드 배포 (CI/CD 자동화)

🔧 사용법

1. 할 일 추가: 입력창에 할 일을 입력하고 "추가" 버튼 클릭
2. 날짜 변경: 상단 날짜 슬라이더로 원하는 날짜 선택
3. 완료 체크: 할 일 옆 체크박스 클릭으로 완료 상태 변경
4. 편집: 할 일을 더블클릭하여 내용 수정
5. 삭제: 할 일 옆 휴지통 아이콘 클릭으로 삭제
6. 데이터 유지: 새로고침 후에도 기존 할 일 목록이 유지됨 (localStorage 연동)
7. 날짜 제한: 미래 날짜(오늘 이후)는 선택할 수 없으며, 과거는 최근 7일까지만 이동 가능
8. 글자 수 제한: 할 일 입력 시 최대 15자까지만 작성 가능
9. 테마 변경: 화면 우측 하단 다크 모드 버튼으로 라이트/다크 모드를 전환

📁 프로젝트 구조

src/
├── components/     # UI 컴포넌트
├── hooks/          # 커스텀 훅
├── store/          # Zustand store (todoStore.ts)
├── types/          # TypeScript 타입 정의
├── utils/          # 유틸리티 함수
└── constants/      # 상수 정의