[AIBE6/4팀/송민혁]TODO APP 만들기 완료 by m1nhy2uk · Pull Request #63 · sik2/react-todo-mession1

m1nhy2uk · 2026-03-19T08:49:36Z

리액트 투두 앱 만들기 미션 레포

사용 영상

TodoList.mp4

목적

React 컴포넌트 구조 이해
투두 앱 기능 구현
localStorage를 활용한 데이터 저장 및 유지 기능 구현

기술 스택

React
Vite
TailWindCss
JavaScript

기능

할 일 추가
할 일 삭제
할 일 완료 체크
할 일 세부사항 기록 및 저장
localStorage 저장

프로젝트 구조

src/
├── components/
│ ├── TodoForm.jsx 
│ ├── TodoItem.jsx 
│ └── TodoList.jsx
├── hooks/
│ └── useTodos.js
├── pages/
│ ├── Main.jsx 
│ └── Todo.jsx
├── utils/
│ └── storage.js 
├── App.jsx
├── index.css
└── main.jsx

gemini-code-assist · 2026-03-19T08:49:59Z

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

이 PR은 React, Vite, Tailwind CSS를 활용하여 사용자 친화적인 TODO 애플리케이션을 완성합니다. 사용자는 할 일을 손쉽게 관리할 수 있으며, 모든 작업은 로컬 스토리지에 안전하게 저장되어 애플리케이션을 다시 시작해도 데이터가 유지됩니다. 이로써 기본적인 할 일 관리 기능을 갖춘 견고한 웹 애플리케이션이 제공됩니다.

Highlights

React TODO 애플리케이션 초기 설정: Vite와 Tailwind CSS를 사용하여 React TODO 애플리케이션의 기본 구조와 개발 환경이 설정되었습니다.
핵심 TODO 기능 구현: 할 일 추가, 삭제, 완료 상태 토글, 그리고 각 할 일에 대한 상세 내용 기록 및 수정 기능이 구현되었습니다.
데이터 영속성 및 라우팅: 모든 할 일 데이터는 브라우저의 localStorage에 자동으로 저장되어 영속성을 가지며, React Router를 사용하여 메인 할 일 목록과 상세 보기 페이지 간의 라우팅이 설정되었습니다.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist

Code Review

전반적으로 TODO 앱이 잘 구현되었으며, React Router를 사용한 라우팅과 Tailwind CSS를 활용한 스타일링이 깔끔하게 적용되었습니다. useTodos 커스텀 훅을 통해 로컬 스토리지에 데이터를 저장하고 관리하는 방식도 효율적입니다. 다만, 몇 가지 개선할 점이 있습니다. README.md 파일의 프로젝트 구조 설명과 실제 코드 간에 불일치가 있으며, App.jsx에서는 prop drilling을 개선할 여지가 있습니다. 또한, TodoForm.jsx에서 사용자 피드백 처리 방식과 src/utils/storage.js에서 JSON 파싱 시 에러 처리가 필요합니다.

gemini-code-assist · 2026-03-19T08:51:30Z

src/utils/storage.js

+// localStorage에서 todos를 불러오는 함수
+function getStorage() {
+    const saved = localStorage.getItem(STORAGE_KEY)
+    return saved ? JSON.parse(saved) : null


localStorage.getItem(STORAGE_KEY)에서 가져온 데이터가 유효한 JSON 형식이 아닐 경우 JSON.parse(saved) 호출 시 에러가 발생할 수 있습니다. 애플리케이션의 안정성을 위해 try-catch 블록으로 JSON 파싱을 감싸 에러를 처리하는 것이 좋습니다.

Suggested change

return saved ? JSON.parse(saved) : null

try {

return saved ? JSON.parse(saved) : null

} catch (error) {

console.error("Failed to parse todos from localStorage:", error);

return null;

}

README.md

gemini-code-assist · 2026-03-19T08:51:31Z

src/App.jsx

+                <Route
+                    index
+                    element={<Main todos={todos} addTodo={addTodo} deleteTodo={deleteTodo} toggleTodo={toggleTodo} />}
+                />
+                <Route path="/todos/:id" element={<TodoDetail todos={todos} updateDetail={updateDetail} />} />


현재 todos 상태와 여러 CRUD 함수들이 Main 및 TodoDetail 컴포넌트로 props로 전달되고 있습니다. 애플리케이션 규모가 커지면 이러한 prop drilling은 코드의 유지보수성을 저해할 수 있습니다. README.md에서 언급된 TodoContext.jsx와 같이 React Context API를 활용하여 전역 상태를 관리하면 코드를 더 깔끔하게 만들 수 있습니다.

gemini-code-assist · 2026-03-19T08:51:31Z

src/components/TodoForm.jsx

+            alert('할 일을 입력해주세요.')
+            return


사용자에게 할 일 입력 요청 시 alert()를 사용하는 것은 사용자 경험 측면에서 좋지 않습니다. alert는 모달처럼 작동하여 페이지의 다른 상호작용을 막고, 스타일링이 어렵습니다. 대신, 입력 필드 아래에 에러 메시지를 표시하거나 토스트 알림과 같은 비침해적인 UI 피드백을 사용하는 것이 좋습니다.

gemini-code-assist · 2026-03-19T08:51:31Z

src/components/TodoForm.jsx

+        const form = e.target
+        if (!form.todo.value) {


React에서는 e.target.todo.value와 같이 DOM에 직접 접근하여 입력 값을 가져오는 대신, useState 훅을 사용하여 입력 필드의 값을 제어하는 '제어 컴포넌트(Controlled Component)' 패턴을 사용하는 것이 일반적입니다. 이는 상태 관리를 더 명확하게 하고 테스트를 용이하게 합니다.

tke0329 · 2026-03-19T10:32:39Z

detail 화면에서 todolist 를 세분화해서 저장할수있는 기능이 인상적이네요! 나중에 데이터베이스 연관관계면에서도 생각해 볼 여지가 많은 기능인것같습니다 ui 도 너무 아기자기하고 멋지네요 유리님!ㅎ

Rakhyunn

할 일의 세부사항을 기록할 수 있어 사용자 경험이 더 좋을 것 같아요
세부 사항 넣을 때 id가 없는 상황의 예외처리가 인상 깊습니다! 👍
고생하셨습니다! 👊

haxxru · 2026-03-19T12:19:11Z

할 일의 세부적인 내용을 기록 또는 메모할 수 있는 점이 사용자의 측면에서 상당히 유용해보입니다!
인터페이스도 예쁜 것 같습니다!
수고하셨습니다!

Sinou3936 · 2026-03-20T00:08:19Z

할 일에 대한 세부 사항은 좋은 것 같은데 입력하면 메인 화면에도 보여 주면 좋을 것 같은 생각이 드네요
인터페이스도 예쁘게 꾸미셨고 해서 좋은 것 같습니다. 코드 작성하느라 고생하셨습니다.

m1nhy2uk added 5 commits March 19, 2026 17:32

[AIBE6/4팀/송민혁]TODO APP 만들기 완료

b3bed6a

Remove empty line in project structure section

2804c99

Add project structure section to README

9b55148

Update README.md

4d7c1d1

Update README.md

965d630

gemini-code-assist bot reviewed Mar 19, 2026

View reviewed changes

Update README.md

84b0939

Rakhyunn reviewed Mar 19, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[AIBE6/4팀/송민혁]TODO APP 만들기 완료#63

[AIBE6/4팀/송민혁]TODO APP 만들기 완료#63
m1nhy2uk wants to merge 6 commits intosik2:mainfrom
m1nhy2uk:main

m1nhy2uk commented Mar 19, 2026 •

edited

Loading

Uh oh!

gemini-code-assist bot commented Mar 19, 2026

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

gemini-code-assist bot Mar 19, 2026

Uh oh!

Uh oh!

gemini-code-assist bot Mar 19, 2026

Uh oh!

gemini-code-assist bot Mar 19, 2026

Uh oh!

gemini-code-assist bot Mar 19, 2026

Uh oh!

tke0329 commented Mar 19, 2026

Uh oh!

Rakhyunn left a comment

Uh oh!

haxxru commented Mar 19, 2026

Uh oh!

Sinou3936 commented Mar 20, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

-    return saved ? JSON.parse(saved) : null
+    try {
+        return saved ? JSON.parse(saved) : null
+    } catch (error) {
+        console.error("Failed to parse todos from localStorage:", error);
+        return null;
+    }

Conversation

m1nhy2uk commented Mar 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

리액트 투두 앱 만들기 미션 레포

사용 영상

목적

기술 스택

기능

프로젝트 구조

Uh oh!

gemini-code-assist bot commented Mar 19, 2026

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist bot Mar 19, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

gemini-code-assist bot Mar 19, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Mar 19, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Mar 19, 2026

Choose a reason for hiding this comment

Uh oh!

tke0329 commented Mar 19, 2026

Uh oh!

Rakhyunn left a comment

Choose a reason for hiding this comment

Uh oh!

haxxru commented Mar 19, 2026

Uh oh!

Sinou3936 commented Mar 20, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

m1nhy2uk commented Mar 19, 2026 •

edited

Loading