Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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?
71 changes: 70 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1 +1,70 @@
# 리액트 투두 앱 만들기 미션 레포
# 📝 리액트 투두 만들기

## 📖 프로젝트 개요

이 과제는 **React**와 **Vite**를 사용해 간단한 Todo List를 구현하는 프로젝트입니다.
컴포넌트 구조와 상태 관리를 이해하고, `localStorage`를 활용한 데이터 유지 기능을 학습합니다.

---

## 🚀 주요 기능

✅ **1. 할 일 추가**
   – 텍스트 입력 후 버튼 클릭 시 리스트에 항목 추가

🗑 **2. 할 일 삭제**
   – 항목의 삭제 버튼 클릭 시 해당 항목 제거

✏️ **3. 할 일 수정**
   – 수정 버튼 클릭 시 입력창으로 전환 후 수정 가능

🕒 **4. 할 일 등록 시간 확인**
   – 할 일 내용을 클릭하면 우측에 등록 시간이 표시됨

✔️ **5. 완료 체크**
   – 체크박스로 완료 상태 표시

💾 **6. localStorage 저장**
   – 추가/삭제/체크/수정 시 변경된 todo 상태를 localStorage에 저장

🔄 **7. 초기 로드 시 데이터 불러오기**
   – 앱 실행 시 localStorage에서 데이터를 불러와 렌더링

---



## 📁 프로젝트 구조

```
src/
├── components/
│ ├── ToDoItem.jsx
│ ├── ToDoList.jsx
│ └── ToDoWriteForm.jsx
├── hooks/
│ └── useTodos.jsx
├── utils/
│ └── storage.js
├── App.jsx
├── index.css
└── main.jsx
```



## 🛠️ 기술 스택

- **React**
- **JavaScript**
- **Vite**


## ✨ 실행 방법

```bash
# 의존성 설치
npm install

# 개발 서버 실행
npm run dev
Copy link

Choose a reason for hiding this comment

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

깔끔하게 잘 작성해주신 readme PR 클릭시 바로 보이면 더 좋을 것 같습니다!

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['recommended-latest'],
reactRefresh.configs.vite,
],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
parserOptions: {
ecmaVersion: 'latest',
ecmaFeatures: { jsx: true },
sourceType: 'module',
},
},
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="en">
<head>
<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>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
Loading