[AIBE6/5팀/이민아] TODO APP 만들기 완료 by mal0070 · Pull Request #44 · sik2/react-todo-mession1

mal0070 · 2026-03-18T07:17:14Z

🚀 프로젝트 소개

react-router-dom을 사용한 메인 페이지와 Todo 상세 페이지가 있는 Todo 관리 애플리케이션입니다. 상태는 Context API로 관리하며, Todo 추가, 완료 토글, 삭제, 상세 보기 기능을 제공합니다.

📁 주요 구조

src/
├── main.jsx                 // 앱 엔트리
├── App.jsx                  // 라우터 / 기본 레이아웃
├── pages/
│   ├── Main.jsx             // Todo 목록 및 입력
│   └── TodoDetail.jsx       // 선택한 Todo 상세
├── context/
│   └── TodoContext.jsx      // Todo 상태 / 함수 공유
├── components/              // UI 컴포넌트 모음
│   ├── Header.jsx
│   ├── TodoInput.jsx
│   ├── TodoList.jsx
│   └── TodoItem.jsx
└── utils/
    └── getDateLabel.js      // 날짜 라벨 포맷팅

✅ 기능

새 Todo 추가
Todo 완료/미완료 전환
Todo 삭제
Todo 클릭 시 상세 페이지 이동
오늘 날짜 정보 라벨 표시
완료한 Todo개수 / 전체 Todo개수 표시

시연영상

Mar-20-2026.12-22-33.mp4

- React + Vite 프로젝트 초기 생성 - Tailwind CSS 설치 및 기본 설정 적용

gemini-code-assist · 2026-03-18T07:17:37Z

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!

이 풀 리퀘스트는 React TODO 앱 개발을 위한 초기 환경 설정을 완료합니다. Vite를 통한 빠른 개발 환경, ESLint를 통한 코드 일관성 유지, 그리고 Tailwind CSS를 통한 효율적인 스타일링 기반을 마련하여, 향후 기능 구현에 집중할 수 있도록 준비되었습니다.

Highlights

프로젝트 초기화: Vite를 사용하여 새로운 React 프로젝트가 초기화되었습니다.
개발 도구 설정: 코드 품질 유지를 위한 ESLint와 효율적인 스타일링을 위한 Tailwind CSS가 구성되었습니다.
기본 파일 구조: 애플리케이션 실행에 필요한 기본 HTML, CSS, JavaScript 파일 및 관련 설정 파일들이 추가되었습니다.

🧠 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

이 PR은 Vite와 React를 사용하여 새로운 TODO 앱 프로젝트를 초기화하는 것으로 보입니다. 전반적으로 프로젝트 설정은 잘 되어 있지만, 몇 가지 개선할 점이 보입니다. README.md 파일의 내용을 프로젝트에 맞게 수정하고, package.json과 index.html의 오타를 바로잡는 것이 좋겠습니다. 또한, eslint.config.js 파일의 설정을 조금 더 명확하게 정리하는 것을 제안합니다. 자세한 내용은 각 파일에 대한 개별 코멘트를 확인해주세요.

gemini-code-assist · 2026-03-18T07:19:19Z

README.md

+# 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.


현재 README.md 파일은 Vite 기본 템플릿 내용으로 채워져 있습니다. 이 프로젝트는 'TODO 앱'을 만드는 것이므로, 프로젝트의 목적, 기술 스택, 실행 방법 등에 대한 설명을 추가하여 다른 사람들이 프로젝트를 쉽게 이해하고 기여할 수 있도록 하는 것이 좋습니다. 예를 들어, 원래 있던 # 리액트 투두 앱 만들기 미션 레포와 같은 제목으로 시작하여 내용을 채워나갈 수 있습니다.

gemini-code-assist · 2026-03-18T07:19:19Z

eslint.config.js

+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },


languageOptions 객체 내에 ecmaVersion이 두 곳에 정의되어 있어 혼란을 줄 수 있습니다. ESLint 플랫 설정(flat config)에서는 languageOptions 최상위 레벨에 ecmaVersion과 sourceType을 두는 것이 권장됩니다. 관련 설정을 한 곳으로 모아 가독성을 높이고 혼란을 방지하기 위해 아래와 같이 수정하는 것을 제안합니다.

languageOptions: { ecmaVersion: 'latest', sourceType: 'module', globals: globals.browser, parserOptions: { ecmaFeatures: { jsx: true }, }, },

gemini-code-assist · 2026-03-18T07:19:19Z

index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">


PR 제목과 이전 README.md 내용을 볼 때 한국어 사용자를 대상으로 하는 프로젝트로 보입니다. 웹 접근성을 위해 <html> 태그의 lang 속성을 'en'에서 'ko'로 변경하는 것을 고려해보세요.

Suggested change

<html lang="en">

<html lang="ko">

gemini-code-assist · 2026-03-18T07:19:19Z

index.html

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


<title> 태그에 'mession'이라는 오타가 있습니다. 'mission'으로 수정하는 것이 좋겠습니다.

Suggested change

<title>react-todo-mession1</title>

<title>react-todo-mission1</title>

gemini-code-assist · 2026-03-18T07:19:19Z

package.json

@@ -0,0 +1,28 @@
+{
+  "name": "react-todo-mession1",


프로젝트 이름에 'mession'이라는 오타가 있습니다. 'mission'으로 수정하는 것이 좋겠습니다. 이는 다른 파일(index.html의 <title>)에서도 발견된 문제입니다. 일관성을 위해 수정해주세요.

Suggested change

"name": "react-todo-mession1",

"name": "react-todo-mission1",

todos 배열 -> {id, text, checked}

StrictMode 제거

Updated project structure section to use a list format.

Tesalriah · 2026-03-20T00:44:41Z

프로젝트 구조와 기능 설명이 전체적으로 잘 정리되어 있어서 흐름을 이해하기 쉬웠습니다

특히 react-router-dom을 활용한 페이지 분리와 Context API를 통한 상태 관리 구조가 명확하게 드러나 있어서
단순 Todo 앱을 넘어서 구조적으로 확장 가능하게 설계하신 점이 인상적입니다.

또한 기능적으로도 상세 페이지 분리, 완료/전체 개수 표시, 날짜 라벨 처리 (utils 분리) 같은 부분에서 사용자 경험을 고려한 설계가 잘 보였습니다.

전체적으로 기능, 구조, 사용자 경험까지 균형 있게 잘 구현된 PR이라고 느껴졌습니다!

woo0218 · 2026-03-20T05:08:51Z

src/pages/TodoDetail.jsx

+            <h1 className="text-2xl mb-4">할 일: {currentTodo.text}</h1>
+            <textarea
+                className="border rounded-md bg-yellow-100 w-full h-50 p-4"
+                placeholder="할 일에 대해 메모를 적어보세요."


메모를 추가하는 형태라서 더 사용성이 있어보여 좋은것 같습니다.

scj0325 · 2026-03-20T07:18:28Z

디자인이 너무 이쁜거 같아요

chore: 초기 셋팅 완료 (Tailwind 설치 및 프로젝트 기본 구성)

bd92c23

- React + Vite 프로젝트 초기 생성 - Tailwind CSS 설치 및 기본 설정 적용

gemini-code-assist bot reviewed Mar 18, 2026

View reviewed changes

mal0070 and others added 24 commits March 18, 2026 17:40

feat: 기본 HTML 생성

7fabc2b

feat: 할일 추가 기능 구현

3dbff44

feat: 할일 삭제 기능 구현, 헤더에 할일 총 개수 반영

4dd7484

feat: 데이터 구조 변경

e158228

todos 배열 -> {id, text, checked}

feat: 할일 체크 기능 구현

57c24f2

refactor: todo id 자동 증가를 useRef로 변경

2649291

feat: 헤더와 입력창을 Header 컴포넌트로 분리

816177e

feat: 할일 리스트를 TodoList 컴포넌트로 분리

be4fc06

feat: Header컴포넌트에 서 입력창과 헤더섹션을 다른 컴포넌트로 분리

6d9a28b

feat: todo 로직 분리한 useTodos 커스텀 훅 추가

c452a2d

feat: 각 할일을 TodoItem 컴포넌트로 분리

090675e

feat: Context API 적용하여 todo 상태관리 중앙화

0e61b1f

feat: Tailwind 스타일 추가

fb51d94

feat: 라우터 추가

386804e

feat: localStorage 연결

e330f7d

feat: 키보드 엔터키 누르면 할일 추가되는 기능 구현

edcf1ae

fix: 키보드 엔터키로 입력시 할일이 2번 추가되는 오류 수정

a99e9da

StrictMode 제거

fix: todo의 id를 Date.now()로 변경하여 중복 방지

5f28e9c

feat: 현재 날짜 반영, Todo에 Content추가

cf92417

docs: README 업데이트 - 프로젝트 소개, 구조, 실행 방법 및 확장 아이디어 추가

e88d140

Update README.md

6835d15

Update README.md

db32d71

Updated project structure section to use a list format.

Update README.md

ccc0e04

Update README.md

7fb56dc

mal0070 changed the title ~~[AIBE6/5팀/이민아] TODO APP 만들기 진행중~~ [AIBE6/5팀/이민아] TODO APP 만들기 완료 Mar 19, 2026

Update README.md

ce0a523

woo0218 reviewed Mar 20, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[AIBE6/5팀/이민아] TODO APP 만들기 완료#44

[AIBE6/5팀/이민아] TODO APP 만들기 완료#44
mal0070 wants to merge 26 commits intosik2:mainfrom
mal0070:main

mal0070 commented Mar 18, 2026 •

edited

Loading

Uh oh!

gemini-code-assist bot commented Mar 18, 2026

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

gemini-code-assist bot Mar 18, 2026

Uh oh!

gemini-code-assist bot Mar 18, 2026

Uh oh!

gemini-code-assist bot Mar 18, 2026

Uh oh!

gemini-code-assist bot Mar 18, 2026

Uh oh!

gemini-code-assist bot Mar 18, 2026

Uh oh!

Tesalriah commented Mar 20, 2026

Uh oh!

woo0218 Mar 20, 2026

Uh oh!

scj0325 commented Mar 20, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

	<title>react-todo-mession1</title>
	<title>react-todo-mission1</title>

	"name": "react-todo-mession1",
	"name": "react-todo-mission1",

Conversation

mal0070 commented Mar 18, 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 18, 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 18, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Mar 18, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Mar 18, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Mar 18, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Mar 18, 2026

Choose a reason for hiding this comment

Uh oh!

Tesalriah commented Mar 20, 2026

Uh oh!

woo0218 Mar 20, 2026

Choose a reason for hiding this comment

Uh oh!

scj0325 commented Mar 20, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

mal0070 commented Mar 18, 2026 •

edited

Loading