(null);
+ const [showDatePicker, setShowDatePicker] = useState(false);
+
+ const handleContextMenu = (e: React.MouseEvent) => {
+ e.preventDefault();
+ setShowDatePicker(!showDatePicker);
+ };
+
+ const handleSubmit = () => {
+ if (!todoText.trim()) return;
+
+ const newTodo: Todo = {
+ id: Date.now(),
+ todo: todoText,
+ isImportant: isImportant,
+ createdAt: currentPageDate,
+ dueDate: dueDate ? formatDateToISO(dueDate) : null,
+ completed: false,
+ };
+
+ const savedTodos: Todo[] = JSON.parse(
+ localStorage.getItem("todos") || "[]",
+ );
+ const updatedTodos = [newTodo, ...savedTodos];
+
+ localStorage.setItem("todos", JSON.stringify(updatedTodos));
+ onAddTodo(updatedTodos);
+
+ // Reset
+ setTodoText("");
+ setIsImportant(false);
+ setDueDate(null);
+ setShowDatePicker(false);
+ };
+
+ return (
+
+
+
+
+ setTodoText(e.target.value)}
+ onKeyDown={(e) => e.key === "Enter" && handleSubmit()}
+ className="flex-1 bg-transparent text-text focus:outline-none py-2"
+ placeholder="์ค๋์ ํ ์ผ์?"
+ />
+
+
+
+
+ {showDatePicker && (
+
+
๋ง๊ฐ ๊ธฐํ ์ ํ
+
setDueDate(date)}
+ inline
+ minDate={new Date()}
+ />
+
+ )}
+
+
+
+ Theme
+
+
+ {isDarkMode ? "๋ธ๋ฃจ๋ฒ ๋ฆฌ ํ
๋ง" : "ํผ์น ํ
๋ง"}
+
+
+
+ {/* ๐ ํ ๊ธ ์ค์์น */}
+
+
+
+
+ ์ค๋์ ToDo ์งํ๋ฅ
+
+
+ {stats.percentage}%
+
+
+
+ {/* ์งํ๋ฐ (Gauge) */}
+
+
+
+ {stats.completed} / {stats.total} ์๋ฃ
+
+
+
+
+
+
+ );
+};
+
+export default SideSection;
diff --git a/todo-list/src/components/todo/TodoItem.tsx b/todo-list/src/components/todo/TodoItem.tsx
new file mode 100644
index 0000000..886ff05
--- /dev/null
+++ b/todo-list/src/components/todo/TodoItem.tsx
@@ -0,0 +1,67 @@
+import type { Todo } from "../../types/Todo";
+import { checkIsDDay } from "../../utils/date";
+
+type TodoItemProps = Todo & {
+ currentPageDate: string;
+ onToggle: (id: number) => void;
+ onDelete: (id: number) => void;
+};
+
+const TodoItem = ({
+ id,
+ todo,
+ completed,
+ isImportant,
+ dueDate,
+ currentPageDate,
+ onToggle,
+ onDelete,
+}: TodoItemProps) => {
+ const isDDay = checkIsDDay(dueDate, currentPageDate);
+
+ return (
+
+ {/* ์ปค์คํ
์ฒดํฌ๋ฐ์ค */}
+
+
+
+ {todo}
+
+
+ {/* ๋ ์ง ๋ฐฐ์ง */}
+ {dueDate && (
+
+ {isDDay ? "D-DAY" : dueDate.split("-").slice(1).join("/")}
+
+ )}
+
+ {isImportant && (
+
โ
+ )}
+
+
+
+
+ {timedTodos.map((todo) => (
+
+ ))}
+
+
+
+
์ค๋ ํ ์ผ
+ {dailyTodos.length > 0 ? (
+
+ {dailyTodos.map((todo) => (
+
+ ))}
+
+ ) : (
+
+ ํ ์ผ์ด ๋น์ด ์์ด์!
+
+ )}
+
+
+ {/* ๋ ์ง ํค๋: ํ์ฌ ๋ ์ง ์ํ์ ๋ณ๊ฒฝ ํจ์ ์ ๋ฌ */}
+
+
+
+
+ {/* flex-1 min-h-0 ์ถ๊ฐ โ ๋จ์ ๊ณต๊ฐ ์ ๋ถ ์ฐจ์ง */}
+
+
+
+ {/* shrink-0 โ ํญ์ ํ๋จ ๊ณ ์ */}
+
+
+
+
+
+
+
+
+