sik2 · jjuchan · Jul 8, 2025 · Jul 8, 2025 · Jul 8, 2025 · Jul 8, 2025
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/README.md b/README.md
@@ -1 +1,102 @@
-# 리액트 투두 앱 만들기 미션 레포
+# 📌 React Todo List (Vite 기반)
+
+> ⚠️ [AIBE3] 첫 Mission입니다.
+
+---
+
+## 🛠 프로젝트 개요
+
+본 프로젝트는 **React와 Vite 환경**을 기반으로 한 간단한 **Todo List 애플리케이션**입니다.
+
+*   **컴포넌트 설계**: 유지 보수가 쉽고 재사용 가능하며 효율적인 컴포넌트 구조를 설계했습니다.
+*   **상태 관리**: React의 `useState`를 활용한 상태 관리 방식을 적용했습니다.
+*   **LocalStorage 활용**: 데이터를 로컬 스토리지에 저장하여 새로고침을 눌러도 할 일이 사라지지 않도록 구현했습니다.
+*   **라우팅 처리**: URL 경로에 따른 적절한 페이지 매핑을 구현했습니다.
+
+---
+
+## 🧩 요구사항  
+
+- 할 일 추가 / 삭제 / 수정 / 마감기한 설정
+- 완료 여부 체크
+- localStorage에 데이터 저장 & 불러오기
+- 커스텀 훅으로 상태 관리 로직 분리
+
+---
+
+
+## 📂 프로젝트 구조
+
+```text
+.
+├── public/                
+├── src/
+│   ├── assets/             
+│   ├── components/
+│   │   ├── TodoForm.jsx    # 할 일 추가 폼
+│   │   ├── TodoItem.jsx    # 개별 할 일 항목
+│   │   └── TodoList.jsx    # 할 일 목록 컨테이너
+│   ├── data/
+│   │   └── initialTodos.js # 초기 할 일 데이터
+│   ├── hooks/
+│   │   └── useTodos.js     # 할 일 관련 상태 관리 및 로직을 위한 커스텀 훅
+│   ├── pages/
+│   │   ├── Home.jsx        # 메인 할 일 페이지
+│   │   └── ...             # 기타 페이지 (목록, 환영 페이지)
+│   ├── utils/
+│   │   └── storage.js      
+│   ├── App.jsx             
+│   ├── index.css          
+│   └── main.jsx            
+
+```
+
+## 📦 사용 스택
+
+*   React
+*   Vite
+*   JavaScript (ES6)
+*   Tailwind CSS
+
+---
+
+## 🎯 주요 기능 화면
+
+프로젝트의 핵심 기능들을 시각적으로 보여주는 화면들입니다.
+
+### 🏠 시작 페이지 (`/`)
+프로젝트의 시작점입니다. `/` 경로로 접속하면 나타나는 환영 페이지입니다.
+
+![시작 페이지](https://github.com/user-attachments/assets/f046c413-5d2b-43dc-96bd-07a943cdf3b7)
+
+### 🚀 메인 페이지 (`/home`)
+사용자가 할 일 목록을 관리하는 주 페이지입니다. `/home` URL로 접속하면 나타납니다.
+
+![메인 페이지](https://github.com/user-attachments/assets/f4aa4860-8e30-4bb5-930e-3aec9f7242e1)
+
+### ✍️ 등록 페이지 (`/post`)
+새로운 할 일을 등록할 수 있는 페이지입니다. `/post` URL을 통해 접근합니다. 할 일 내용은 필수 입력이지만, 날짜는 필수가 아닙니다.
+
+![등록 페이지](https://github.com/user-attachments/assets/e13ddbdc-ac2d-4147-ae9f-cb0503e8ae89)
+
+### ✏️ 할 일 수정 모드 (인라인 편집)
+할 일 수정은 별도의 페이지 없이, 목록에서 해당 일정을 클릭하면 텍스트 수정 모드로 전환됩니다. 내용을 수정한 후 '저장' 버튼을 누르면 업데이트가 완료됩니다.
+
+![할 일 수정 모드](https://github.com/user-attachments/assets/cb943bab-dd3d-442a-abc3-a86422411a4e)
+
+### ✅ 일정 리스트 페이지 (`/list`)
+등록된 할 일 목록을 보여주는 페이지입니다. `/list` URL로 접속합니다.
+간단한 기능 설명으로, 할 일의 마감일을 기준으로 현재 일자와 비교하여 마감일이 지났으면 해당 일정을 **빨간색**으로 표시하도록 구현했습니다.
+
+![일정 리스트 페이지](https://github.com/user-attachments/assets/35f9cece-a352-41a6-9c05-ffcd746f15e2)
+
+---
+
+## ✨ 추후 개발 예정 기능
+
+현재 구현되지 않았지만, 향후 프로젝트에 추가하면 좋을 것 같은 기능입니다.
+
+*   **날짜 수정 기능**: 현재는 할 일 내용만 수정 가능하며, 날짜 수정 기능은 추후 개발을 통해 추가될 예정입니다.
+*   **할 일 필터링/정렬 기능**: 완료 여부, 마감일, 생성일 등 다양한 기준에 따라 할 일 목록을 필터링하거나 정렬하는 기능을 추가할 예정입니다.
+*   **할 일 검색 기능**: 특정 키워드를 통해 할 일을 검색하여 빠르게 찾을 수 있는 기능을 구현할 계획입니다.
+---
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['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_]' }],
+    },
+  },
+])
diff --git a/index.html b/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <title>TODO!!</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>