[AIBE3/5팀/박세웅] TODO APP 만들기 완료

[Park-seungg]

📝 Todolist-App

React와 Tailwind CSS(CDN 방식)으로 구현한 간단하고 직관적인 Todolist 애플리케이션입니다.

기본적인 할 일 관리 기능에 우선순위 설정, 편집 기능, 깔끔한 UI를 추가했습니다.

실행 방법

npm install
npm run dev

📂 프로젝트 구조

my-todo-app/
├── public/
│   └── vite.svg               # Vite 기본 이미지
├── src/
│   ├── components/
│   │   ├── TodoForm.jsx       # 할 일 추가 폼
│   │   ├── TodoItem.jsx       # 개별 할 일 항목 (수정 기능 포함)
│   │   └── TodoList.jsx       # 할 일 목록
│   ├── App.jsx                # 상태 관리 및 메인 앱
│   ├── App.css                # 앱 전용 스타일 (비어있음)
│   ├── index.css              # #root용 글로벌 스타일
│   ├── main.jsx               # React 진입점
├── index.html                 # HTML 템플릿 (Tailwind CSS CDN 사용)
├── package.json               # 프로젝트 의존성
├── vite.config.js             # Vite 설정
├── README.md                  # 프로젝트 문서

📊 데이터 구조

할 일 데이터는 아래와 같은 구조로 관리됩니다:

todos: [
  {
    id: number,        // 고유 ID
    text: string,      // 할 일 텍스트
    completed: boolean, // 완료 여부
    modify: boolean,   // 편집 모드 여부
    priority: string   // "높음", "보통", "낮음"
  },
  // 예시
  { id: 1, text: "공부하기", completed: false, modify: false, priority: "보통" }
]

✨ 주요 기능

• 할 일 추가: 텍스트와 우선순위(높음, 보통, 낮음)를 입력해 새로운 할 일을 추가
• 할 일 삭제: 목록에서 불필요한 할 일을 삭제
• 완료 체크: 체크박스를 통해 할 일의 완료 상태를 토글하며, 완료된 항목은 취소선으로 표시
• 우선순위 설정: 할 일에 높음, 보통, 낮음 우선순위를 지정하고, 색상으로 구분해 표시
• 편집 기능: 기존 할 일의 텍스트와 우선순위를 수정가능
• 데이터 저장: localStorage를 사용해 할 일 목록과 마지막 ID를 저장, 새로고침 후에도 데이터가 유지

🎯 기능 구현

🖌️ 느낀점

• React 컴포넌트 분리: 상태 관리와 UI를 분리하며 코드 구조를 깔끔하게 유지하는 법을 배웠습니다.
• Tailwind CSS: CDN 방식으로 빠르게 스타일링했지만, 유틸리티 클래스의 편리함과 생산성을 체감했습니다.
• localStorage: 데이터를 브라우저에 저장하며 상태 유지의 중요성을 알게 되었습니다.

[1J-Choi]

Todo 항목들에 우선순위를 지정할 수 있는 기능을 추가한 것이 좋았습니다.
여기에 추가적으로 우선 순위에 따라 Todo의 순서가 정렬되는 기능이 있으면 좋을 것 같습니다!

[ehgk4245]

App 컴포넌트에 상태와 관련 로직들이 몰려있는 것 같습니다! 그렇다 보니 props가 너무 많아지는 것 같아요.
커스텀 훅이나, 전역 상태관리를 통해, 상태와 관련 로직을 관리한다면 유지보수성과 가독성이 더 좋아질 것 같아요!😊

[gregoryc103]

직관적인 UI/UX, 필수 기능의 충실한 구현, 간결하고 역할 기반으로 잘 분리된 코드 구조가 돋보이는 프로젝트입니다.
실용성과 확장성을 모두 고려한 구성으로, 고도화 작업 시에 좋은 기반이 될 것으로 보입니다.

[weare0gimbab]

함수,변수 네이밍이 깔끔해서 가독성이 넘 좋아요! 우선순위마다 배경색다르게 주신게 특히 직관적이네요! 근데 app쪽에 로직이 몰려있는것같은데 컴포넌트 분리후 다시 되돌리신 이유가 있을까요?!💭

[jookyworld]

priority를 사용하여 구분한 아이디어가 참신했던 것 같습니다🤗
다만 상위 컴포넌트에 많은 임무가 부여되고 있는 것 같다는 생각이 듭니다!