CEOS-Developers · yiyoonseo · Mar 17, 2026 · Mar 17, 2026 · Mar 17, 2026 · Mar 17, 2026
diff --git a/todo-list/.gitignore b/todo-list/.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/todo-list/README.md b/todo-list/README.md
@@ -0,0 +1,72 @@
+# 🍑 TODO LIST
+
+> **기한을 잊지 않게 도와주는, 날짜 중심의 할 일 관리 서비스**
+
+단순히 오늘 할 일을 나열하는 것을 넘어, **생성일부터 마감일까지의 흐름**을 관리하고 우선순위에 따라 정보를 재배치하여 최적의 UX를 제공합니다.
+
+---
+
+## 🎯 프로젝트 목적 (Value Proposition)
+
+- **망각 방지**: 등록일과 마감일 사이의 모든 날짜에 할 일을 노출하여 장기 태스크 누락을 방지합니다.
+- **의사결정 최적화**: 마감일 임박도에 따른 자동 섹션 분리로 사용자의 우선순위 판단 비용을 줄입니다.
+- **데이터 기반 피드백**: 실시간 진행률 게이지를 통해 성취감을 고취하고 하루의 생산성을 가시화합니다.
+
+---
+
+## ✨ 핵심 기능 (Key Features)
+
+### 1. 기간 기반 자동 노출 시스템 (`isVisibleOnDate`)
+
+- 생성일(`createdAt`)과 마감일(`dueDate`) 사이의 유효 기간을 계산하여 해당 기간의 모든 날짜 페이지에 할 일을 자동으로 표시합니다.
+- 사용자는 날짜를 넘기며 미래의 작업 부하를 미리 예측하고 대비할 수 있습니다.
+
+### 2. 중요도 중심의 레이아웃 분리
+
+- **Pink Zone (Urgent)**: 마감일이 설정된 중요 일정 영역입니다. 오늘이 마감인 항목을 최상단에 배치하여 주목도를 높였습니다.
+- **White Zone (Daily)**: 기한이 없는 일반적인 데일리 할 일을 분리하여 화면의 복잡도를 낮추고 오늘 당장의 일에 집중하게 합니다.
+
+### 3. 직관적인 다이내믹 UI
+
+- **상태별 강조**: 마감 당일 배경색 반전 및 애니메이션 효과를 통해 시각적 긴박감 부여.
+- **실시간 진행률**: `useMemo`와 `reduce`를 활용해 계산된 수치를 게이지(Gauge) 형태로 시각화.
+
+---
+
+## 🛠️ 기술적 도전 및 최적화 (Technical Excellence)
+
+### ✅ 성능 최적화 (Performance)
+
+- **연산 최적화**: `useMemo`를 도입하여 진행률 계산(`percentage`) 등 복잡한 연산이 불필요하게 반복되지 않도록 캐싱했습니다.
+- **효율적인 데이터 처리**: 여러 번의 배열 순회 대신 `reduce`를 활용한 **단일 순회(O(n))** 방식으로 집계 로직을 개선하여 데이터 처리 속도를 높였습니다.
+
+### ✅ 컴포넌트 설계 및 구조 (Architecture)
+
+- **역할에 따른 분리**: 누구나 쓸 수 있는 공통 부품(`common`)과 할 일 관리 전용 부품(`todo`)을 분리하여 코드의 재사용성을 높였습니다.
+- **데이터 흐름의 중앙화**: 최상단 페이지(`Todo.tsx`)가 전체 데이터를 관리하고, 하위 컴포넌트는 전달받은 데이터를 화면에 그리는 데만 집중하도록 설계하여 유지보수가 쉽도록 만들었습니다.
+- **로직의 자립성**: 날짜 연산 등 핵심 로직을 별도 파일(`utils/date.ts`)로 독립시켜 컴포넌트 코드를 간결하게 유지했습니다.
+
+---
+
+## 💻 Tech Stack
+
+**Framework** : React (Vite)
+**Language** : TypeScript
+**Styling** : Tailwind CSS
+**Library** : React-DatePicker
+**Storage** : LocalStorage
+
+---
+
+## 📂 폴더 구조 (Folder Structure)
+
+```text
+src/
+ ├── components/
+ │    ├── common/      # 어디서든 쓸 수 있는 공통 UI 부품
+ │    └── todo/        # 할 일 관리 기능에 특화된 부품
+ ├── pages/
+ │    └── Todo.tsx     # 데이터와 메인 로직을 담당하는 중심 페이지
+ ├── types/            # 데이터 규격(Interface) 정의
+ └── utils/            # 날짜 계산 등 순수 로직 함수
+```
diff --git a/todo-list/eslint.config.js b/todo-list/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 { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])
diff --git a/todo-list/index.html b/todo-list/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/assets/check-event.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>todo-list</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>