[AIBE6/2팀/김주영] TODO APP 만들기 완료 by JuyoungKim1024 · Pull Request #42 · sik2/react-todo-mession1

JuyoungKim1024 · 2026-03-16T08:42:12Z

기술 스택

기술 설명
React UI 라이브러리

프로젝트 구조

src/
├── components/         # 재사용 가능한 UI 컴포넌트
│   └── TodoList
│   └── TodoApp
│   └── TodoWriteForm
├── App.tsx 
└── main.tsx  
└──App.css

스크린샷

CSS추가해서 다시 만들어보았습니다!

gemini-code-assist · 2026-03-16T08:43:22Z

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!

이 Pull Request는 React와 Vite를 사용하여 새로운 프로젝트를 초기 설정하고, 코드 일관성을 위한 ESLint 및 Prettier를 구성합니다. 또한, 로컬 스토리지를 통해 데이터를 영구적으로 저장하는 기본적인 투두(Todo) 애플리케이션을 구현하여 사용자가 할 일을 추가, 수정, 삭제할 수 있도록 합니다.

Highlights

프로젝트 초기 설정: React 및 Vite 기반 프로젝트의 초기 환경을 설정했습니다.
개발 환경 구성: 코드 일관성을 위한 ESLint 및 Prettier 설정이 추가되었습니다.
투두(Todo) 앱 핵심 기능 구현: 로컬 스토리지를 활용하여 할 일 추가, 수정, 삭제 기능을 갖춘 기본적인 투두 애플리케이션을 구현했습니다.

🧠 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.

Changelog

.gitignore
- Node.js 및 에디터 관련 파일들을 무시하도록 설정 파일을 추가했습니다.
.prettierrc
- 코드 스타일 일관성을 위한 Prettier 설정 파일을 추가했습니다.
README.md
- React + Vite 템플릿 정보를 포함하도록 README 파일을 업데이트했습니다.
eslint.config.js
- React 훅 및 리프레시를 위한 ESLint 설정 파일을 추가했습니다.
index.html
- React 애플리케이션의 기본 HTML 구조를 추가했습니다.
package-lock.json
- 프로젝트 의존성 관리를 위한 lock 파일을 추가했습니다.
package.json
- React + Vite 애플리케이션에 필요한 의존성 및 스크립트를 추가했습니다.
public/favicon.svg
- 파비콘 SVG 파일을 추가했습니다.
public/icons.svg
- 다양한 아이콘을 포함하는 SVG 파일을 추가했습니다.
src/App.jsx
- 메인 애플리케이션 컴포넌트를 추가하여 TodoApp을 렌더링하도록 했습니다.
src/components/TodoApp.jsx
- 투두 목록, 입력값, 수정 ID 상태를 관리하고, 투두 추가, 수정, 삭제 로직을 포함하는 메인 투두 애플리케이션 컴포넌트를 구현했습니다.
src/components/TodoItem.jsx
- 개별 투두 항목을 표시하고 완료 상태 토글 및 삭제 기능을 제공하는 컴포넌트를 추가했습니다.
src/components/TodoList.jsx
- 투두 목록을 렌더링하고 각 항목에 대한 수정 및 삭제 버튼을 제공하는 컴포넌트를 구현했습니다.
src/components/TodoWriteForm.jsx
- 투두를 추가하거나 수정하기 위한 입력 폼 컴포넌트를 구현했습니다.
src/hooks/useTodos.js
- 투두 상태 관리 및 로컬 스토리지 영구 저장을 위한 커스텀 훅을 정의했습니다.
src/main.jsx
- React 애플리케이션을 렌더링하는 메인 진입점을 설정했습니다.
src/utils/storage.js
- 로컬 스토리지에서 데이터를 읽고 쓰는 유틸리티 함수를 추가했습니다.
vite.config.js
- React 플러그인을 포함하는 Vite 설정 파일을 추가했습니다.

Activity

JuyoungKim1024 님이 새로운 React 투두 애플리케이션을 생성하는 초기 작업을 제출했습니다. 작성자는 GPT 및 참고 자료를 활용하여 프로젝트를 만들었다고 언급했습니다.

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.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

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

풀 리퀘스트를 검토한 결과, 몇 가지 중요한 개선 사항이 발견되었습니다. 특히 README.md 파일에 병합 충돌 마커가 남아 있어 즉시 해결해야 합니다. 또한, 투두 항목의 데이터 구조와 상태 관리 로직이 TodoApp.jsx와 useTodos.js 파일 간에 일관성이 없으며, TodoItem.jsx 컴포넌트가 정의되었음에도 불구하고 사용되지 않고 있습니다. 이러한 문제들은 코드의 일관성, 재사용성 및 잠재적인 런타임 오류를 야기할 수 있으므로 해결하는 것이 좋습니다.

gemini-code-assist · 2026-03-16T08:45:31Z

README.md

+<<<<<<< HEAD
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
+=======
 # 리액트 투두 앱 만들기 미션 레포
+>>>>>>> upstream/main


파일에 병합 충돌 마커가 남아 있습니다. <<<<<<< HEAD, =======, >>>>>>> upstream/main 부분을 수동으로 해결해야 합니다. 이 상태로는 파일이 올바르게 파싱되지 않습니다.

gemini-code-assist · 2026-03-16T08:45:31Z

src/components/TodoItem.jsx

@@ -0,0 +1,21 @@
+import { useTodoContext } from '../context/TodoContext'


useTodoContext를 임포트하고 있지만, 제공된 파일에는 TodoContext가 정의되어 있지 않습니다. 이로 인해 런타임 오류가 발생할 것입니다. TodoContext를 정의하거나 TodoApp.jsx에서 직접 props를 통해 필요한 함수를 전달하는 방식으로 변경해야 합니다.

gemini-code-assist · 2026-03-16T08:45:31Z

src/components/TodoApp.jsx

+    const [todos, setTodos] = useState([])
+    const [input, setInput] = useState('')
+    const [editId, setEditId] = useState(null)


TodoApp.jsx에서 todos 상태를 직접 관리하고 있지만, src/hooks/useTodos.js라는 별도의 커스텀 훅이 투두 로직을 처리하도록 설계된 것으로 보입니다. 상태 관리 로직을 useTodos 훅으로 통합하여 TodoApp 컴포넌트의 책임을 줄이고 재사용성을 높이는 것이 좋습니다. 현재 두 파일 간에 투두 객체 구조(text vs value, completed 속성)도 일관성이 없습니다.

gemini-code-assist · 2026-03-16T08:45:31Z

src/components/TodoItem.jsx

+                    textDecoration: todo.completed ? 'line-through' : 'none',
+                }}
+            >
+                {todo.value}


TodoItem 컴포넌트에서 todo.value를 사용하고 있지만, TodoApp.jsx의 addTodo 함수에서는 todo.text로 투두를 생성합니다. 이로 인해 todo.value가 undefined가 되어 투두 내용이 표시되지 않을 수 있습니다. TodoApp.jsx 또는 TodoItem.jsx에서 속성 이름을 일관되게 맞춰야 합니다.

Suggested change

{todo.value}

{todo.text}

gemini-code-assist · 2026-03-16T08:45:31Z

src/components/TodoList.jsx

+            {todos.map((todo, index) => (
+                <li key={todo.id}>
+                    {index + 1}. {todo.text}
+                    <button onClick={() => editTodo(todo)}>수정</button>
+                    <button onClick={() => deleteTodo(todo.id)}>삭제</button>
+                </li>


TodoList 컴포넌트에서 TodoItem 컴포넌트를 사용하지 않고 <li> 요소를 직접 렌더링하고 있습니다. TodoItem 컴포넌트를 사용하여 각 투두 항목을 렌더링하면 코드의 모듈성과 재사용성을 높일 수 있습니다. 이는 TodoItem.jsx가 이미 정의되어 있기 때문에 더욱 중요합니다.

{todos.map((todo) => ( <TodoItem key={todo.id} todo={todo} /> ))}

gemini-code-assist · 2026-03-16T08:45:32Z

src/hooks/useTodos.js

+            id: Date.now().toString(),
+            value: input,
+            completed: false,
+        }


useTodos 훅에서 newTodo 객체에 value 속성을 사용하고 있지만, TodoApp.jsx에서는 text 속성을 사용합니다. 두 컴포넌트 간에 투두 객체의 속성 이름이 일관되지 않아 혼란을 줄 수 있습니다. text 또는 value 중 하나로 통일하는 것이 좋습니다.

const newTodo = { id: Date.now().toString(), text: input, completed: false, }

gemini-code-assist · 2026-03-16T08:45:32Z

src/components/TodoApp.jsx

+            setTodos(todos.map((todo) => (todo.id === editId ? { ...todo, text: input } : todo)))
+            setEditId(null)
+        } else {
+            setTodos([...todos, { id: Date.now(), text: input }])


Date.now()를 사용하여 ID를 생성하는 것은 매우 빠른 연속 호출 시 중복될 가능성이 있습니다. 보다 견고한 ID 생성을 위해 uuid 라이브러리 사용을 고려해 볼 수 있습니다. 예를 들어, crypto.randomUUID() (브라우저 환경) 또는 uuid 패키지를 사용할 수 있습니다.

Suggested change

setTodos([...todos, { id: Date.now(), text: input }])

setTodos([...todos, { id: crypto.randomUUID(), text: input }])

gemini-code-assist · 2026-03-16T08:45:32Z

eslint.config.js

+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,


ecmaVersion: 2020이 이미 languageOptions에 설정되어 있는데, parserOptions에 ecmaVersion: 'latest'를 다시 지정하는 것은 중복될 수 있습니다. 일반적으로 latest를 사용하는 것이 최신 ECMAScript 기능을 지원하는 데 더 유연합니다. 둘 중 하나만 유지하거나 latest로 통일하는 것을 권장합니다.

Suggested change

ecmaVersion: 2020,

ecmaVersion: 'latest',

hoehoeabi · 2026-03-19T08:10:55Z

src/components/TodoApp.jsx

+export default function TodoApp() {
+    const [todos, setTodos] = useState([])
+    const [input, setInput] = useState('')
+    const [editId, setEditId] = useState(null)


id: Date.now()로 개채 무결성 보장하셨는데 19번쨰 줄에 방어 로직은 어떤 이유가 있을까요?

hoehoeabi · 2026-03-19T08:21:24Z

src/components/TodoApp.jsx

+            setTodos(todos.map((todo) => (todo.id === editId ? { ...todo, text: input } : todo)))
+            setEditId(null)
+        } else {
+            setTodos([...todos, { id: Date.now(), text: input, completed: false }])


Date.now()니까 19번쨰 줄의 방어로직은 없어도 될거같아용.

방어로직 지우고 실행해보니 잘 되는걸 확인했습니다 리뷰 감사합니다!

yunabin · 2026-03-20T07:41:17Z

항목 수정 부분과 조건부 렌더링을 활용해 완료 상태의 데이터의 변화가 즉각적으로 UI에 반영되는 요소를 잘 활용하신 것 같아요!!

Kim Juyoung added 5 commits March 16, 2026 16:23

test_commit

01920ff

파일생성

1f761b7

components

319f6c4

todoclear

b1fa689

todo완성

8655a90

gemini-code-assist bot reviewed Mar 16, 2026

View reviewed changes

JuyoungKim1024 closed this Mar 17, 2026

JuyoungKim1024 deleted the todotest/1 branch March 17, 2026 07:14

JuyoungKim1024 restored the todotest/1 branch March 17, 2026 07:29

JuyoungKim1024 changed the title ~~[AIBE6/2팀/김주영] TODO APP 만들기~~ [AIBE6/2팀/김주영] TODO APP 만들기 진행중 Mar 17, 2026

JuyoungKim1024 reopened this Mar 17, 2026

Kim Juyoung added 3 commits March 18, 2026 16:25

필요없는부분삭제, 깔끔하게변경

a755a72

체크기능추가

257f6f2

필요없는부분삭제

abb5a3a

JuyoungKim1024 changed the title ~~[AIBE6/2팀/김주영] TODO APP 만들기 진행중~~ [AIBE6/2팀/김주영] TODO APP 만들기 완성 Mar 19, 2026

JuyoungKim1024 changed the title ~~[AIBE6/2팀/김주영] TODO APP 만들기 완성~~ [AIBE6/2팀/김주영] TODO APP 만들기 완료 Mar 19, 2026

css꾸며보기

b1d57c0

hoehoeabi approved these changes Mar 19, 2026

View reviewed changes

코드수정+alert추가

6bc5568

		@@ -0,0 +1,21 @@
		import { useTodoContext } from '../context/TodoContext'

	setTodos([...todos, { id: Date.now(), text: input }])
	setTodos([...todos, { id: crypto.randomUUID(), text: input }])

Conversation

JuyoungKim1024 commented Mar 16, 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 16, 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 16, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Mar 16, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Mar 16, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Mar 16, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Mar 16, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Mar 16, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Mar 16, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Mar 16, 2026

Choose a reason for hiding this comment

Uh oh!

hoehoeabi Mar 19, 2026

Choose a reason for hiding this comment

Uh oh!

hoehoeabi Mar 19, 2026

Choose a reason for hiding this comment

Uh oh!

JuyoungKim1024 Mar 19, 2026

Choose a reason for hiding this comment

Uh oh!

yunabin commented Mar 20, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

JuyoungKim1024 commented Mar 16, 2026 •

edited

Loading