https://github.com/damdadira/todo-list-practice-react
투두리스트 연습
https://github.com/damdadira/todo-list-practice-react
context-api cssmodules react vite
Last synced: about 1 month ago
JSON representation
투두리스트 연습
- Host: GitHub
- URL: https://github.com/damdadira/todo-list-practice-react
- Owner: Damdadira
- Created: 2025-05-02T01:03:35.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-18T01:27:04.000Z (12 months ago)
- Last Synced: 2025-06-18T01:29:00.332Z (12 months ago)
- Topics: context-api, cssmodules, react, vite
- Language: JavaScript
- Homepage:
- Size: 521 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# To-do List
## 🖥 화면 구성
1️⃣ 홈 화면
2️⃣ 할 일 목록 화면
3️⃣ 완료 목록 화면
## 💡 주요 기능 및 구현
추가
- **아이템 추가:** 텍스트 입력 후 'Enter'를 누르거나 'Add' 버튼을 클릭하면 아이템을 하나씩 추가할 수 있습니다.
삭제
- **아이템 삭제:** 리스트 오른쪽에 있는 휴지통을 클릭하여 아이템을 하나씩 삭제할 수 있습니다.
완료
- **완료된 아이템 체크:** 리스트 왼쪽에 있는 체크박스를 클릭하면 스타일과 남은 할 일의 개수가 변경됩니다.
## 🛠 기술 스택
#### 🕹 프론트엔드
#### 🚀 배포 도구
## 🧩 폴더 구조
```
📦src
┣ 📂assets
┃ ┣ 📂imgs
┃ ┃ ┣ 📂dark
┃ ┃ ┗ 📂light
┃ ┗ 📜react.svg
┣ 📂components
┃ ┣ 📜AddTodo.jsx // 새로운 할 일 항목 추가 입력창
┃ ┣ 📜AddTodo.module.css
┃ ┣ 📜Header.jsx // 상단 탭 필터링
┃ ┣ 📜Header.module.css
┃ ┣ 📜Todo.jsx // 할 일 리스트 렌더링
┃ ┣ 📜Todo.module.css
┃ ┣ 📜TodoList.jsx // 개별 항목들 이벤트 핸들링
┃ ┗ 📜TodoList.module.css
┣ 📂context
┃ ┗ 📜DarkModeContext.jsx // 라이트, 다크 모드 핸들링
┣ 📜App.css
┣ 📜App.jsx
┣ 📜index.css
┗ 📜main.jsx
```
## 🎯 실행 방법
- **Node.js 18 이상 권장**
```bash
# 패키지 설치
npm install # 또는 npm i
# 개발 서버 실행
npm run dev
```
## 📍 홈페이지 주소
https://preeminent-swan-ca382f.netlify.app/