📝 Todo

Todo List 구현하기 | React Mini Project in OZ

간단한 Todo List 애플리케이션입니다.

• 🚀 Live Demo (GitHub Pages)
• 작업 기간: 2025-08-18
• 작업 로그: Binyard Blog

🪧 Milestone

• [M1] Todo CRUD 기능 구현

  • PR: CRUD 기능 구현
  • Todo 생성 / 조회 / 수정 / 삭제 (CRUD) 기능 구현

• [M2] Clock · Timer · Stopwatch 기능 구현

  • PR: Clock · Timer · Stopwatch 기능 구현
  • 현재 시간 표시, 타이머, 스톱워치 기능 구현

• [M3] 랜덤 명언 표시 기능 구현

  • PR: 랜덤 명언 표시 기능 구현
  • 랜덤 명언 컴포넌트 구현 및 반영

• [M4] json-server 기반 Todo 저장/패칭

  • PR: Todo 데이터 json-server 연동
  • Todo 데이터를 json-server와 연동, 파일 기반 저장

• [M5] Advanced Todo 기능 구현

🧩 Features

Todo

• Create / Read / Update / Delete (CRUD)

Timer

• Preset buttons (5m, 10m, 25m)
• Adjust seconds (-30s / +30s)
• Start / Pause / Reset

Random Quotes

• Display a random inspirational quote

📁 Folder Structure

src/
├── components/
├── styles/
├── utils/
├── App.jsx
└── main.jsx

public/
├──
└──

🗂️ Mini Project Guide in OZ

미니프로젝트 Todo List

STEP 1. 최소 요구 사항

1. Todo 생성 / 조회 / 수정 / 삭제 (CRUD) 기능을 구현하세요.
2. 현재 시간 표시, 타이머, 스톱워치 중 하나 이상의 기능을 구현하세요.
3. 랜덤 명언을 표시할 수 있는 컴포넌트를 만드세요.
4. useState, useEffect, useRef를 각각 한 번 이상 사용하세요.
5. 자유롭게 적용해보고 싶은 CSS를 작성해보세요.

STEP 2. 심화 요구 사항

1. json-server를 사용해 Todo 정보를 파일로 저장해 보세요.
2. Custom Hook을 만들고 사용해 보세요.

미니프로젝트 Todo List Advanced

STEP 1. 심화 요구 사항

1. 기존 CRUD를 useReducer 와 dispatch 를 활용하여 구현하세요.
2. 투두 리스트를 Check(완료 처리) 할 수 있도록 구현하세요. 완료 처리된 리스트는 다른 스타일로 보여야 합니다.
3. 투두 리스트를 LocalStorage를 활용하여 저장 및 불러오기가 되도록 구현하세요. 웹 사이트를 새로고침 하여도 리스트가 보여야 합니다.
4. 미완료 / 완료 여부를 필터링 가능하고, 투두리스트 검색이 가능해야 합니다.
   1. 이 두가지의 필터링은 중첩해서 사용할 수 있습니다.
5. 투두 리스트를 수정 할 수 있도록 구현하세요. input이나 prompt가 아닌, 모달을 생성하여 수정을 구현해보세요.
6. (선택)드래그 & 드롭을 구현하여 투두 리스트의 순서를 변경할 수 있어야 합니다. 라이브러리 없이 구현해보세요!