Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
bd92c23
chore: 초기 셋팅 완료 (Tailwind 설치 및 프로젝트 기본 구성)
mal0070 Mar 17, 2026
7fabc2b
feat: 기본 HTML 생성
mal0070 Mar 18, 2026
3dbff44
feat: 할일 추가 기능 구현
mal0070 Mar 18, 2026
4dd7484
feat: 할일 삭제 기능 구현, 헤더에 할일 총 개수 반영
mal0070 Mar 18, 2026
e158228
feat: 데이터 구조 변경
mal0070 Mar 18, 2026
57c24f2
feat: 할일 체크 기능 구현
mal0070 Mar 18, 2026
2649291
refactor: todo id 자동 증가를 useRef로 변경
mal0070 Mar 18, 2026
816177e
feat: 헤더와 입력창을 Header 컴포넌트로 분리
mal0070 Mar 18, 2026
be4fc06
feat: 할일 리스트를 TodoList 컴포넌트로 분리
mal0070 Mar 18, 2026
6d9a28b
feat: Header컴포넌트에 서 입력창과 헤더섹션을 다른 컴포넌트로 분리
mal0070 Mar 18, 2026
c452a2d
feat: todo 로직 분리한 useTodos 커스텀 훅 추가
mal0070 Mar 18, 2026
090675e
feat: 각 할일을 TodoItem 컴포넌트로 분리
mal0070 Mar 19, 2026
0e61b1f
feat: Context API 적용하여 todo 상태관리 중앙화
mal0070 Mar 19, 2026
fb51d94
feat: Tailwind 스타일 추가
mal0070 Mar 19, 2026
386804e
feat: 라우터 추가
mal0070 Mar 19, 2026
e330f7d
feat: localStorage 연결
mal0070 Mar 19, 2026
edcf1ae
feat: 키보드 엔터키 누르면 할일 추가되는 기능 구현
mal0070 Mar 19, 2026
a99e9da
fix: 키보드 엔터키로 입력시 할일이 2번 추가되는 오류 수정
mal0070 Mar 19, 2026
5f28e9c
fix: todo의 id를 Date.now()로 변경하여 중복 방지
mal0070 Mar 19, 2026
cf92417
feat: 현재 날짜 반영, Todo에 Content추가
mal0070 Mar 19, 2026
e88d140
docs: README 업데이트 - 프로젝트 소개, 구조, 실행 방법 및 확장 아이디어 추가
mal0070 Mar 19, 2026
6835d15
Update README.md
mal0070 Mar 19, 2026
db32d71
Update README.md
mal0070 Mar 19, 2026
ccc0e04
Update README.md
mal0070 Mar 19, 2026
7fb56dc
Update README.md
mal0070 Mar 19, 2026
ce0a523
Update README.md
mal0070 Mar 19, 2026
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
59 changes: 58 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1 +1,58 @@
# 리액트 투두 앱 만들기 미션 레포
# React Todo 앱

간단한 React + Vite + Tailwind 기반 Todo 앱입니다.

## 🚀 프로젝트 소개

이 프로젝트는 `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개수 표시

## 💻 실행 방법

```bash
npm install
npm run dev
```

브라우저에서 `http://localhost:5173` (또는 Vite가 제공하는 주소) 열기

## 🧪 빌드 및 미리보기

```bash
npm run build
npm run preview
```

## 🔍 코드 스타일

- React + JSX
- Tailwind CSS
- Context API 상태 공유
- React Router v7
29 changes: 29 additions & 0 deletions eslint.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import { defineConfig, globalIgnores } from 'eslint/config'

export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{js,jsx}'],
extends: [
js.configs.recommended,
reactHooks.configs.flat.recommended,
reactRefresh.configs.vite,
],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
parserOptions: {
ecmaVersion: 'latest',
ecmaFeatures: { jsx: true },
sourceType: 'module',
},
},
Comment on lines +16 to +24

Choose a reason for hiding this comment

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

medium

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

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

rules: {
'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
},
},
])
13 changes: 13 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!doctype html>
<html lang="ko">
<head>
<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>TO-DO LIST</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
Loading