To-do List

🖥 화면 구성

홈 화면

할 일 목록 화면

완료 목록 화면

💡 주요 기능 및 구현

1️⃣ 추가

• 아이템 추가: 텍스트 입력 후 'Enter'를 누르거나 'Add' 버튼을 클릭하면 아이템을 하나씩 추가할 수 있습니다.

  

2️⃣ 삭제

• 아이템 삭제: 리스트 오른쪽에 있는 휴지통을 클릭하여 아이템을 하나씩 삭제할 수 있습니다.

  

3️⃣ 완료

• 완료된 아이템 체크: 리스트 왼쪽에 있는 체크박스를 클릭하면 스타일과 남은 할 일의 개수가 변경됩니다.

  

🛠 기술 스택

🕹 프론트엔드

       

🚀 배포 도구

🧩 폴더 구조

📦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 이상 권장

# 패키지 설치
npm install   # 또는 npm i

# 개발 서버 실행
npm run dev

📍 홈페이지 주소

https://preeminent-swan-ca382f.netlify.app/