{"id":28821633,"url":"https://github.com/damdadira/todo-list-practice-react","last_synced_at":"2026-05-03T18:31:57.865Z","repository":{"id":291065546,"uuid":"976357578","full_name":"Damdadira/todo-list-practice-react","owner":"Damdadira","description":"투두리스트 연습","archived":false,"fork":false,"pushed_at":"2025-06-18T01:27:04.000Z","size":533,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-18T01:29:00.332Z","etag":null,"topics":["context-api","cssmodules","react","vite"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Damdadira.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-02T01:03:35.000Z","updated_at":"2025-06-18T01:27:07.000Z","dependencies_parsed_at":null,"dependency_job_id":"f1ba39c5-ea2d-4561-8d9d-83c6457e115f","html_url":"https://github.com/Damdadira/todo-list-practice-react","commit_stats":null,"previous_names":["damdadira/react-todo","damdadira/todo-list-practice-react"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Damdadira/todo-list-practice-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Damdadira%2Ftodo-list-practice-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Damdadira%2Ftodo-list-practice-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Damdadira%2Ftodo-list-practice-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Damdadira%2Ftodo-list-practice-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Damdadira","download_url":"https://codeload.github.com/Damdadira/todo-list-practice-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Damdadira%2Ftodo-list-practice-react/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260647979,"owners_count":23041716,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["context-api","cssmodules","react","vite"],"created_at":"2025-06-18T23:00:36.057Z","updated_at":"2026-05-03T18:31:57.860Z","avatar_url":"https://github.com/Damdadira.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# To-do List\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"/src/assets/imgs/dark/video_dark_theme.gif\"/\u003e\n\u003c/div\u003e\n\u003cbr/\u003e\u003cbr/\u003e\n\n## 🖥 화면 구성\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ch3 style=\"display:inline; margin-left:4px\"\u003e1️⃣ 홈 화면\u003c/h3\u003e\u003c/summary\u003e\n  \n  \u003cp align=\"center\"\u003e\n    \u003cimg src=\"/src/assets/imgs/light/img_todo_light.png\" width=\"500\"/\u003e\n    \u003cimg src=\"/src/assets/imgs/dark/img_todo_dark.png\" width=\"500\"/\u003e\n  \u003c/p\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ch3 style=\"display:inline; margin-left:4px\"\u003e2️⃣ 할 일 목록 화면\u003c/h3\u003e\u003c/summary\u003e\n  \n  \u003cp align=\"center\"\u003e\n    \u003cimg src=\"/src/assets/imgs/light/img_todo_light_active.png\" width=\"500\"/\u003e\n    \u003cimg src=\"/src/assets/imgs/dark/img_todo_dark_active.png\" width=\"500\"/\u003e\n  \u003c/p\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ch3 style=\"display:inline; margin-left:4px\"\u003e3️⃣ 완료 목록 화면\u003c/h3\u003e\u003c/summary\u003e\n  \n  \u003cp align=\"center\"\u003e\n    \u003cimg src=\"/src/assets/imgs/light/img_todo_light_completed.png\" width=\"500\"/\u003e\n    \u003cimg src=\"/src/assets/imgs/dark/img_todo_dark_completed.png\" width=\"500\"/\u003e\n  \u003c/p\u003e\n\u003c/details\u003e\n\u003cbr/\u003e\n\n## 💡 주요 기능 및 구현\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ch3 style=\"display:inline; margin-left:4px\"\u003e추가\u003c/h3\u003e\u003c/summary\u003e\n\n  - **아이템 추가:** 텍스트 입력 후 'Enter'를 누르거나 'Add' 버튼을 클릭하면 아이템을 하나씩 추가할 수 있습니다.\n  \n    \u003cimg src=\"/src/assets/imgs/light/video_light_add.gif\"/\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ch3 style=\"display:inline; margin-left:4px\"\u003e삭제\u003c/h3\u003e\u003c/summary\u003e\n\n  - **아이템 삭제:** 리스트 오른쪽에 있는 휴지통을 클릭하여 아이템을 하나씩 삭제할 수 있습니다.\n\n    \u003cimg src=\"/src/assets/imgs/light/video_light_remove.gif\"/\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ch3 style=\"display:inline; margin-left:4px\"\u003e완료\u003c/h3\u003e\u003c/summary\u003e\n\n  - **완료된 아이템 체크:** 리스트 왼쪽에 있는 체크박스를 클릭하면 스타일과 남은 할 일의 개수가 변경됩니다.\n\n    \u003cimg src=\"/src/assets/imgs/light/video_light_completed.gif\"/\u003e\n\u003c/details\u003e\n\u003cbr/\u003e\n\n## 🛠 기술 스택\n#### 🕹 프론트엔드\n\u003cdiv\u003e\n  \u003cimg src=\"https://img.shields.io/badge/React-%2320232a.svg?style=flat-square\u0026logo=react\u0026logoColor=%2361DAFB\" /\u003e\u0026nbsp;\n  \u003cimg src=\"https://img.shields.io/badge/Context_API-000000?style=flat-square\u0026logoColor=white\" /\u003e\u0026nbsp;\n  \u003cimg src=\"https://img.shields.io/badge/CSS_Modules-hotpink.svg?style=flat-square\u0026logoColor=white\" /\u003e\u0026nbsp;\n  \u003cimg src=\"https://img.shields.io/badge/Vite-%23646CFF.svg?style=flat-square\u0026logo=vite\u0026logoColor=white\" /\u003e\u0026nbsp;\n\u003c/div\u003e\n\u003cbr/\u003e\n\n#### 🚀 배포 도구\n\u003cimg src=\"https://img.shields.io/badge/Netlify-%23000000.svg?style=flat-square\u0026logo=netlify\u0026logoColor=#00C7B7\"\u003e\n\u003cbr/\u003e\n\n## 🧩 폴더 구조\n```\n📦src\n ┣ 📂assets\n ┃ ┣ 📂imgs\n ┃ ┃ ┣ 📂dark\n ┃ ┃ ┗ 📂light\n ┃ ┗ 📜react.svg\n ┣ 📂components\n ┃ ┣ 📜AddTodo.jsx           // 새로운 할 일 항목 추가 입력창\n ┃ ┣ 📜AddTodo.module.css\n ┃ ┣ 📜Header.jsx            // 상단 탭 필터링\n ┃ ┣ 📜Header.module.css     \n ┃ ┣ 📜Todo.jsx              // 할 일 리스트 렌더링\n ┃ ┣ 📜Todo.module.css\n ┃ ┣ 📜TodoList.jsx          // 개별 항목들 이벤트 핸들링\n ┃ ┗ 📜TodoList.module.css\n ┣ 📂context\n ┃ ┗ 📜DarkModeContext.jsx   // 라이트, 다크 모드 핸들링\n ┣ 📜App.css\n ┣ 📜App.jsx\n ┣ 📜index.css\n ┗ 📜main.jsx\n```\n\u003cbr/\u003e\n\n## 🎯 실행 방법\n\n- **Node.js 18 이상 권장**\n\n```bash\n# 패키지 설치\nnpm install   # 또는 npm i\n\n# 개발 서버 실행\nnpm run dev\n```\n\u003cbr/\u003e\n\n## 📍 홈페이지 주소\nhttps://preeminent-swan-ca382f.netlify.app/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdamdadira%2Ftodo-list-practice-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdamdadira%2Ftodo-list-practice-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdamdadira%2Ftodo-list-practice-react/lists"}