[AIBE3/5팀/주권영] TODO APP 만들기 완료

.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?

README.md

@@ -1 +1,45 @@
-# 리액트 투두 앱 만들기 미션 레포
+## 리액트 투두 앱
+
+<br>
+
+## 개요
+
+React를 사용해 구현한 ToDo List이다.<br>
+React의 기본 골격이라고 할 수 있는 컴포넌트, 훅 등의 구조와 흐름을 이해하고 경험하는 데에 의의가 있다.<br>
+<br>
+주요 기능으로는 할일에 대한 추가, 삭제, 체크 등 관리를 제공하고, 원활한 사용 경험을 위해<br>
+중복 등록 방지, 빈칸 등록 방지, 완료한 일에 대한 표기 등을 구현하였다.
+
+<br>
+
+## 기능 요약
+
+|       기능        |                              설명                              |
+| :---------------: | :------------------------------------------------------------: |
+|       추가        |   입력 폼에 text 작성 후 추가 버튼을 누르면 할일이 등록된다    |
+|       삭제        |       각 할일의 우측 삭제 버튼을 누르면 할일이 삭제된다        |
+|     완료 체크     |        각 할일의 좌측 체크박스 체크 시 할일이 완료된다         |
+|     빈칸 방지     |              입력 없이 추가를 누르면 alert로 제한              |
+|     중복 방지     |     기등록된 할일을 동일하게 입력 후 추가 시 alert로 제한      |
+|       독려        | 하단 완료/전체 할일을 명시하며 할일 처리를 위한 독려 멘트 제공 |
+| localStorage 저장 |                 DB 없이 사용자별 todo현황 저장                 |
+
+## 주요 패키지 구성
+
+```
+src/
+├─components/
+|  ├─TodoForm.jsx
+|  ├─TodoItem.jsx
+|  └─TodoList.jsx
+├─hooks/
+|  └─useTosos.js
+├─utils/
+|  └─storage.js
+├─App.jsx
+└─main.jsx
+```
+
+## 스크린샷
+
+<img width="400" height="627" alt="1" src="https://github.com/user-attachments/assets/a09b6bbf-b51e-4c53-95d9-7863ec02f00b" /> <img width="400" height="627" alt="2" src="https://github.com/user-attachments/assets/895fb2a1-139c-496d-85e9-342aee5ad077" /> <img width="400" height="739" alt="3" src="https://github.com/user-attachments/assets/7617a4cb-e9e1-4572-91ae-b2bdb1bf623c" /> <img width="400" height="739" alt="4" src="https://github.com/user-attachments/assets/29d9bf13-d9aa-40ea-90f6-de2a14a8f165" />

SUPABASE_SETUP.md

@@ -0,0 +1,51 @@
+# Supabase 설정 가이드
+
+## 1. Supabase 프로젝트 생성
+
+1. [Supabase](https://supabase.com)에 가입하고 새 프로젝트를 생성합니다.
+2. 프로젝트가 생성되면 Settings > API에서 URL과 anon key를 확인합니다.
+
+## 2. 환경 변수 설정
+
+프로젝트 루트에 `.env.local` 파일을 생성하고 다음 내용을 추가하세요:
+
+```
+VITE_SUPABASE_URL=your_supabase_url_here
+VITE_SUPABASE_ANON_KEY=your_supabase_anon_key_here
+```
+
+실제 값으로 교체하세요:
+
+- `your_supabase_url_here`: Supabase 프로젝트 URL
+- `your_supabase_anon_key_here`: Supabase anon key
+
+## 3. 데이터베이스 테이블 생성
+
+Supabase Dashboard에서 SQL Editor를 열고 다음 SQL을 실행하세요:
+
+```sql
+-- todos 테이블 생성
+CREATE TABLE todos (
+  id BIGSERIAL PRIMARY KEY,  -- 자동 증가하는 정수 ID
+  text TEXT NOT NULL,
+  check BOOLEAN DEFAULT FALSE,
+  start_time TEXT DEFAULT '',
+  created_at TIMESTAMP WITH TIME ZONE DEFAULT TIMEZONE('utc'::text, NOW()) NOT NULL,
+  updated_at TIMESTAMP WITH TIME ZONE DEFAULT TIMEZONE('utc'::text, NOW()) NOT NULL
+);
+
+-- RLS (Row Level Security) 활성화
+ALTER TABLE todos ENABLE ROW LEVEL SECURITY;
+
+-- 모든 사용자가 읽고 쓸 수 있도록 정책 설정 (개발용)
+CREATE POLICY "Allow all operations" ON todos FOR ALL USING (true) WITH CHECK (true);
+```
+
+## 4. 사용법
+
+환경 변수를 설정한 후 애플리케이션을 실행하면 Supabase와 연결됩니다.
+
+## 주의사항
+
+- `.env.local` 파일은 `.gitignore`에 추가되어 있어 Git에 커밋되지 않습니다.
+- 프로덕션에서는 적절한 RLS 정책을 설정해야 합니다.

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_]' }],
+    },
+  },
+])

index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/png" href="/image.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Do What You Do</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>