Skip to content

[AIBE3/2팀/고영서] TODO APP 만들기 완료#16

Open
luaerix wants to merge 4 commits intosik2:mainfrom
luaerix:main
Open

[AIBE3/2팀/고영서] TODO APP 만들기 완료#16
luaerix wants to merge 4 commits intosik2:mainfrom
luaerix:main

Conversation

@luaerix
Copy link

@luaerix luaerix commented Jul 9, 2025

📝 React Todo App

React로 간단한 만든 Todo 웹 애플리케이션입니다.
할 일을 등록, 조회, 수정, 삭제할 수 있는 기본 기능을 제공합니다.

React

🧰 사용 기술

  • React (Vite)
  • JavaScript
  • CSS

🛠️ 기능

✅ 할 일 등록
✅ 할 일 목록 조회
✅ 할 일 내용 수정
✅ 할 일 삭제


📸 스크린샷

image
image
image


📁 프로젝트 구조

REACT-TODO-WTL2/
├── public/
├── src/
│   ├── assets/                 
│   ├── components/             # 컴포넌트 폴더
│   │   ├── DeleteModal.jsx     # 삭제 모달
│   │   ├── EditModal.jsx       # 수정 모달
│   │   ├── Header.jsx          # 상단 헤더
│   │   ├── TodoItem.jsx        # 개별 Todo 항목
│   │   ├── TodoList.jsx        # Todo 목록
│   │   ├── TodoWriteform.jsx   # Todo 작성 폼
│   ├── App.jsx                 # 메인 앱 컴포넌트
│   ├── App.css                 # 스타일 시트
│   ├── index.css               # 사용 X
│   ├── main.jsx                # 앱 진입점
├── .gitignore
├── eslint.config.js
├── index.html
├── package.json
├── package-lock.json
├── vite.config.js
└── README.md

Copy link

@seung-in-Yoo seung-in-Yoo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

수고하셨습니다! 배웠던 Todo 리스트 이외에도 여러가지 다양한 시도를 해보려고 한 흔적이 있는것 같아서 좋았습니다

<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

사소하지만 제목도 바꿔주시면 더 좋을것 같아요!

background-color: #167cff;
margin-top: 100px;
margin-left: 500px;
margin-right: 500px;

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

css에서 유지보수의 용이성 및 통일된 디자인을 위해 px 단위보다 rem/em 단위로 바꿔보시는것도 좋을것 같아요

};

const editTodo = (id, newText) => {
setTodos(

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이 부분 비동기성 문제가 있는것 같은데 일관된 패턴을 유지할 수 있는 법도 찾아보면 좋을것 같아요!

@Unoguna
Copy link

Unoguna commented Jul 10, 2025

수정, 삭제시에 창이 하나 더 나오는게 인상적이에요!
제가 코드를 제대로 확인 못한 것 일수도 있지만 로컬 스토리지를 사용하지 않으신 것 같아요.
로컬스토리지 사용하시면 더 좋을 것 같아요.

@Bsbd0205
Copy link

수정이랑 삭제 할 때 따로 모달이 뜨는 게 너무 인상 깊었습니다. 같은 주제여도 다양한 구현을 볼 수 있어서 좋았어요. 다만 커밋 할 때 메세지만 조금 구분을 주셨으면 해요.

@seokhwan13
Copy link

수정이나 삭제기능도 좋네요!
작성시간이 같이 있는데 데드라인도 같이 작성되면 좋을거같아요

@Sonsehwan45
Copy link

저는 수정기능을 추가할 생각은 못했었네요 컴포넌트 세분화가 잘되있어 코드 재사용이 용이할 것 같네요.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants