sik2 · Rakhyunn · Mar 16, 2026 · Mar 16, 2026 · Mar 17, 2026 · Mar 17, 2026
diff --git a/.gitignore b/.gitignore
@@ -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?
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,7 @@
+{
+    "printWidth": 120,
+    "tabWidth": 4,
+    "singleQuote": true,
+    "trailingComma": "all",
+    "semi": false
+}
diff --git a/README.md b/README.md
@@ -1 +1,80 @@
-# 리액트 투두 앱 만들기 미션 레포
+# React Todo App Mission
+
+## 개요
+
+**React**와 **Vite**를 이용하여 간단한 Todo List 앱을 만드는 프로젝트입니다.
+
+## 목적
+
+1. React 컴포넌트 구조 이해
+2. React 상태 관리 방식 학습
+3. localStorage를 활용한 데이터 저장 및 유지 기능 구현
+
+## 기술 스택
+
+- React
+- Vite
+- JavaScript
+- TailwindCSS
+
+## 주요 기능
+
+1. 할 일 추가
+
+- 텍스트 입력 후 버튼 클릭 시 리스트에 새로운 할 일이 추가됩니다.
+
+2. 할 일 삭제
+
+- 각 항목의 삭제 버튼 클릭 시 해당 할 일이 리스트에서 제거됩니다.
+
+3. 완료 체크
+
+- 체크박스를 클릭하면 완료 여부가 표시됩니다.
+- 완료된 항목은 스타일이 변경됩니다.
+
+4. localStorage 저장
+
+- 할 일 추가 / 삭제 / 완료 상태 변경 시 todo 데이터가 localStorage에 저장됩니다.
+
+5. 초기 데이터 로드
+
+- 앱 실행 시 localStorage에 저장된 todo 데이터를 불러와 화면에 렌더링합니다.
+
+## 프로젝트 구조
+
+```
+src/
+├── components/
+│ ├── TodoForm.jsx # 할 일 입력 폼
+│ ├── TodoItem.jsx # 개별 할 일 항목
+│ └── TodoList.jsx # 할 일 목록 렌더링
+├── context/
+│ └── TodoContext.jsx # Context API 전역 상태 제공
+├── hooks/
+│ └── useTodos.js # 할 일 CRUD 로직 Custom Hook
+├── pages/
+│ ├── Main.jsx # 메인 페이지
+│ └── Todo.jsx # TODO 관리 페이지
+├── App.jsx # 라우팅 설정
+└── main.jsx # 앱 진입점
+```
+
+## 화면 예시
+
+#### 스크린 샷
+
+<img width="400" height="600" src="https://github.com/user-attachments/assets/14bdad96-f09a-4ad7-a277-8cd7a78bf29e" />
+<img width="400" height="600" src="https://github.com/user-attachments/assets/e357e6aa-74e0-4140-b9ac-32f3cea09589" />
+
+#### 영상
+
+<p>
+<img src="https://github.com/user-attachments/assets/b26fb537-6520-4ccc-af46-fdb144d1325d">
+<img src="https://github.com/user-attachments/assets/87905f4c-83e6-4420-b158-44418a96a179">
+</p>
+
+## 회고
+
+- context api를 활용하여 전역으로 상태 관리를 하여 메인과 Todo 페이지에서 사용해보며 익힐 수 있었습니다.
+- `useEffect`의 의존성 배열에 `todos`를 넣으면 상태가 바뀔 때마다 localStorage에 자동 저장된다는 흐름을 이번 프로젝트에서 정확히 습득할 수 있었습니다.
+- 테일윈드가 익숙하지 않아 AI의 도움을 받아 디자인을 구현했고, 사용된 속성을 카테고리별로 직접 정리하며 의미를 하나씩 파악했습니다. 다음 프로젝트에서는 스스로 작성해보는 것이 목표입니다.
diff --git a/eslint.config.js b/eslint.config.js
@@ -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',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
+])
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <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>react-todo-mession1</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>