Team4-Idle · Yoepee · Jul 7, 2025 · Jul 7, 2025 · Jul 7, 2025 · Jul 7, 2025
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
@@ -0,0 +1,23 @@
+## 📝 Pull Request 설명
+
+-   어떤 작업을 했나요?
+-   왜 이 작업이 필요한가요?
+
+## ✅ 체크리스트
+
+-   [ ] 관련 이슈에 연결했나요? (`Closes #번호` 등)
+-   [ ] 기능/버그 테스트를 완료했나요?
+-   [ ] 로컬에서 정상 작동 확인했나요?
+-   [ ] 문서(README 등)를 수정했나요?
+
+## 🔗 관련 이슈
+
+Closes #123
+
+## 📸 스크린샷 (선택)
+
+(변경된 UI가 있다면 첨부해주세요)
+
+---
+
+🙋‍♀️ 리뷰 부탁드립니다!
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,6 @@
+{
+  "singleQuote": false,
+  "semi": true,
+  "useTabs": false,
+  "tabWidth": 4
+}
diff --git a/README.md b/README.md
@@ -1 +1,91 @@
-# 리액트 투두 앱 만들기 미션 레포
+# 📝 React Todo App
+
+할 일 목록을 간단하고 직관적으로 관리할 수 있는 Todo 애플리케이션입니다.  
+**TypeScript + Zustand + Tailwind CSS**를 기반으로 구성되었으며,  
+**Intro → Todo** 라우팅 구조, **localStorage를 통한 데이터 영속성**,  
+**모듈화된 컴포넌트 & 커스텀 Hook** 설계가 특징입니다.
+
+---
+
+## ✨ 주요 기능
+
+-   ✅ 할 일 추가, 수정, 삭제
+-   🗂️ 할 일 완료 여부 체크
+-   🔄 새로고침에도 유지되는 `localStorage` 기반 데이터 저장
+-   ⚡ 전역 상태 관리를 위한 `Zustand` 도입
+-   🛡️ 타입 안정성을 위한 `TypeScript` 사용
+-   🔀 `Intro 페이지 → Todo 페이지`로 라우팅
+-   🧩 컴포넌트/로직 분리 및 커스텀 Hook 구조화
+-   🎨 Tailwind CSS를 통한 반응형 UI
+
+---
+
+## 📸 페이지 미리보기
+
+### 🖼️ Intro
+
+![Intro](https://github.com/user-attachments/assets/87094e96-934b-4d43-84d1-7edab9fffcf7)
+
+### ✅ Todo List
+
+![TodoPage](https://github.com/user-attachments/assets/ef456bb2-6d2a-435a-b231-8aaba4c7f345)
+
+---
+
+## ⚙️ 기술 스택
+
+| 기술         | 설명                                       |
+| ------------ | ------------------------------------------ |
+| React        | UI 라이브러리                              |
+| TypeScript   | 정적 타입 언어                             |
+| Zustand      | 가벼운 전역 상태 관리 라이브러리           |
+| React Router | 페이지 라우팅 처리                         |
+| Tailwind CSS | 유틸리티 기반 CSS 프레임워크               |
+| localStorage | 브라우저 저장소 (데이터 영속성 확보)       |
+| Vite         | 빠른 개발 서버 및 번들러 (프론트엔드 환경) |
+
+---
+
+## 📁 프로젝트 구조 (예시)
+
+```
+src/
+├── components/         # 재사용 가능한 UI 컴포넌트
+│   └── TodoList
+│       └── TodoItem.tsx
+│       └── TodoList.tsx
+│   └── TodoSubmitForm
+│       └── TodoSubmitForm.tsx
+├── hooks/              # 커스텀 훅
+│ └── useTodos.ts
+│ └── useBoolean.ts
+│ └── useLocalStorage.ts
+├── store/              # Zustand 기반 상태관리
+│ └── useTodoStore.ts
+├── interfaces/ # 타입
+│ └── todo.ts
+├── contexts/           # Context API 관련 로직
+│ └── TodoContext.ts
+│ └── TodoProvider.ts
+├── consts/             # 공통 상수 값
+│ └── index.ts
+├── pages/              # 페이지 컴포넌트
+│ └── Intro.ts
+│ └── TodoPage.ts
+├── .prettierrc         # Prettier 설정
+├── tailwind.config.js  # Tailwind 설정
+├── App.tsx             # 라우팅 구성
+└── main.tsx            # 엔트리포인트
+```
+
+---
+
+## 🚀 실행 방법
+
+```bash
+# 패키지 설치
+npm install
+
+# 로컬 실행
+npm run dev
+```
diff --git a/eslint.config.js b/eslint.config.js
@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { globalIgnores } from 'eslint/config'
+
+export default tseslint.config([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs['recommended-latest'],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])
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="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>