sik2 · Sinou3936 · Mar 19, 2026 · Mar 19, 2026 · Mar 19, 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,85 @@
-# 리액트 투두 앱 만들기 미션 레포
+# React Todo API
+
+<p align="center">
+  <strong>DummyJSON 기반</strong> 리액트 CRUD Todo 앱
+</p>
+
+## 소개
+
+React + Vite 기반의 간단한 Todo 앱으로, 다음 기능을 연습할 수 있습니다.
+
+- 할 일 목록 읽기 (GET)
+- 할 일 등록 (POST)
+- 할 일 삭제 (DELETE)
+- 완료 상태 토글 (PUT)
+
+## 적용 기술
+
+- React (Functional component, Hooks: useState, useEffect)
+- Vite
+- Fetch API
+- 기본 CSS 스타일링 (src/App.css)
+
+## 실행 환경
+
+### 1) 사전 준비
+
+- Node.js (v16 이상 권장)
+- npm 또는 yarn
+
+### 2) 설치
+
+```bash
+git clone https://github.com/Sinou3936/React_TODO_API.git
+cd React_Study_api
+npm install
+```
+
+### 3) 실행
+
+```bash
+npm run dev
+```
+
+- 브라우저에서 `http://localhost:5173` 접속
+
+## 프로젝트 구조
+
+```
+src/
+  App.jsx
+  App.css
+  components/
+    TodoForm.jsx
+    TodoList.jsx
+    TodoItem.jsx
+```
+
+## 사용 방법
+
+1. 입력창에 할 일을 입력하고 `등록` 버튼 클릭
+2. 등록된 항목은 리스트로 표시
+3. 체크박스를 클릭하면 완료/미완료 상태 변경
+4. 삭제 버튼으로 항목 제거
+
+## 스크린샷
+
+아래 이미지를 저장한 뒤 리포지토리 루트 또는 이미지 디렉토리에 둡니다.
+
+
+<img width="534" height="736" alt="todo-screenshot" src="https://github.com/user-attachments/assets/d523e736-cf0e-4c47-868c-b4c5dc14b04f" />
+
+> 또는 GitHub에 이미지를 업로드한 뒤 URL로 사용합니다.
+>
+> `![React Todo API](https://user-images.githubusercontent.com/your-id/todo-screenshot.png)`
+
+## 개선 아이디어
+
+- API 응답 실패 시 사용자 토스트 메시지 표시
+- 로컬 스토리지 또는 서버 동기화 기능 추가
+- 상세 편집 모드, 우선순위/카테고리 추가
+- React Router 기반 다중 페이지 변환
+
+## 라이선스
+
+MIT
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/images/todo-screenshot.png b/images/todo-screenshot.png
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-study-api</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>