[FEAT] 오늘 화면 TodayTodoCard 컴포넌트 구현

apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayTodoCardContainer.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import type { ReactNode } from "react";
+
+import {
+  TodayTodoCard,
+  type SubTodo,
+  type TodayTodoCardToolbar,
+} from "@/app/[locale]/(main)/today/_components/TodayTodoCard";
+
+export interface TodayTodoCardContainerProps {
+  title: string;
+  isDone: boolean;
+  subTodos: SubTodo[];
+  toolbar: TodayTodoCardToolbar;
+  timerStatus: "RUNNING" | "PAUSED" | "STOPPED";
+  icon?: ReactNode;
+  onIconClick?: () => void;
+  onCheck?: () => void;
+  onPlay?: () => void;
+  onDelete?: () => void;
+  onSubTodoCheck?: (id: number) => void;
+}
+
+export const TodayTodoCardContainer = ({
+  title,
+  isDone: initialIsDone,
+  icon,
+  onIconClick,
+  subTodos: initialSubTodos,
+  toolbar,
+  timerStatus,
+  onCheck,
+  onPlay,
+  onDelete,
+  onSubTodoCheck,
+}: TodayTodoCardContainerProps) => {
+  const [isHovered, setIsHovered] = useState(false);
+  const [isPlaying, setIsPlaying] = useState(timerStatus === "RUNNING");
+  const [isDone, setIsDone] = useState(initialIsDone);
+  const [subTodos, setSubTodos] = useState(initialSubTodos);
+
+  useEffect(() => {
+    setIsPlaying(timerStatus === "RUNNING");
+  }, [timerStatus]);
+
+  const isDimmed = isDone && !isHovered;
+
+  const handleCheck = () => {
+    const next = !isDone;
+    setIsDone(next);
+    if (next) {
+      setSubTodos((prev) => prev.map((s) => ({ ...s, isDone: true })));
+      if (isPlaying) {
+        setIsPlaying(false);
+        onPlay?.();
+      }
+    }
+    onCheck?.();
+  };
+
+  const handlePlay = () => {
+    if (!isDone) {
+      setIsPlaying((prev) => !prev);
+      onPlay?.();
+    }
+  };
+
+  const handleSubTodoCheck = (id: number) => {
+    setSubTodos((prev) =>
+      prev.map((s) => (s.id === id ? { ...s, isDone: !s.isDone } : s)),
+    );
+    onSubTodoCheck?.(id);
+  };
+
+  return (
+    <TodayTodoCard
+      title={title}
+      isDone={isDone}
+      isDimmed={isDimmed}
+      isPlaying={isPlaying}
+      icon={icon}
+      onIconClick={onIconClick}
+      subTodos={subTodos}
+      toolbar={toolbar}
+      onCheck={handleCheck}
+      onPlay={handlePlay}
+      onDelete={onDelete ?? (() => {})}
+      onSubTodoCheck={handleSubTodoCheck}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    />
+  );
+};

apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayTodoListContainer.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { useState } from "react";
+
+import type { TodoMock } from "@/app/[locale]/(main)/(with-time-sidebar)/today/_mocks/today-todo-mock";
+
+import { TodayTodoCardContainer } from "@/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayTodoCardContainer";
+import { todayTodoMocks } from "@/app/[locale]/(main)/(with-time-sidebar)/today/_mocks/today-todo-mock";
+import { convertDurationToTimeText } from "@/utils/convert-duration-to-time-text";
+import { formatDate } from "@/utils/format-date";
+
+const PRIORITY_MAP = {
+  URGENT: "urgent",
+  HIGH: "high",
+  MEDIUM: "medium",
+  LOW: "low",
+} as const;
+
+export const TodayTodoListContainer = () => {
+  const [todos, setTodos] = useState<TodoMock[]>(todayTodoMocks);
+  const runningTodoId =
+    todos.find((t) => t.timerStatus === "RUNNING")?.todoId ?? null;
+
+  const handlePlay = (todoId: number) => {
+    // TODO: API
+    setTodos((prev) =>
+      prev.map((t) => ({
+        ...t,
+        timerStatus:
+          t.todoId === todoId && t.timerStatus !== "RUNNING"
+            ? "RUNNING"
+            : "STOPPED",
+      })),
+    );
+  };
+
+  const handleCheck = (todoId: number) => {
+    // TODO: API
+    setTodos((prev) =>
+      prev.map((t) =>
+        t.todoId === todoId
+          ? { ...t, completed: !t.completed, timerStatus: "STOPPED" }
+          : t,
+      ),
+    );
+  };
+
+  const handleDelete = (todoId: number) => {
+    // TODO: API
+    setTodos((prev) => prev.filter((t) => t.todoId !== todoId));
+  };
+
+  const handleSubTodoCheck = (todoId: number, subtaskId: number) => {
+    // TODO: API
+    setTodos((prev) =>
+      prev.map((t) =>
+        t.todoId === todoId
+          ? {
+              ...t,
+              subtasks: t.subtasks.map((s) =>
+                s.subtaskId === subtaskId
+                  ? { ...s, completed: !s.completed }
+                  : s,
+              ),
+            }
+          : t,
+      ),
+    );
+  };
+
+  return (
+    <div className="flex flex-col gap-2">
+      {todos.map((todo) => (
+        <TodayTodoCardContainer
+          key={todo.todoId}
+          title={todo.title}
+          isDone={todo.completed}
+          timerStatus={runningTodoId === todo.todoId ? "RUNNING" : "STOPPED"}
+          toolbar={{
+            date: formatDate(todo.date),
+            time: convertDurationToTimeText(todo.durationSeconds),
+            priority: PRIORITY_MAP[todo.priority],
+            tag: todo.tag?.name,
+            hasMemo: todo.hasMemo,
+            hasRepeat: todo.isRepeated,
+          }}
+          subTodos={todo.subtasks.map((s) => ({
+            id: s.subtaskId,
+            text: s.content,
+            isDone: s.completed,
+          }))}
+          onPlay={() => handlePlay(todo.todoId)}
+          onCheck={() => handleCheck(todo.todoId)}
+          onDelete={() => handleDelete(todo.todoId)}
+          onSubTodoCheck={(id) => handleSubTodoCheck(todo.todoId, id)}
+        />
+      ))}
+    </div>
+  );
+};

apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_mocks/today-todo-mock.ts

@@ -0,0 +1,77 @@
+interface TodoTag {
+  tagId: number;
+  name: string;
+}
+
+interface TodoSubtask {
+  subtaskId: number;
+  content: string;
+  completed: boolean;
+}
+
+export interface TodoMock {
+  todoId: number;
+  icon: string;
+  title: string;
+  completed: boolean;
+  date: string;
+  durationSeconds: number;
+  priority: "URGENT" | "HIGH" | "MEDIUM" | "LOW";
+  tag: TodoTag | null;
+  hasMemo: boolean;
+  isRepeated: boolean;
+  timerStatus: "RUNNING" | "PAUSED" | "STOPPED";
+  sortOrder: number;
+  subtasks: TodoSubtask[];
+}
+
+export const todayTodoMocks: TodoMock[] = [
+  {
+    todoId: 1,
+    icon: "ICON_1",
+    title: "디자인 시스템 컴포넌트 정리하기",
+    completed: false,
+    date: "2026-07-09",
+    durationSeconds: 36000,
+    priority: "URGENT",
+    tag: { tagId: 1, name: "작업" },
+    hasMemo: true,
+    isRepeated: false,
+    timerStatus: "STOPPED",
+    sortOrder: 0,
+    subtasks: [
+      { subtaskId: 1, content: "색상 토큰 정리", completed: true },
+      { subtaskId: 2, content: "타이포그래피 스펙 문서화", completed: false },
+    ],
+  },
+  {
+    todoId: 2,
+    icon: "ICON_2",
+    title: "완료된 할 일 예시",
+    completed: true,
+    date: "2026-07-09",
+    durationSeconds: 3600,
+    priority: "MEDIUM",
+    tag: { tagId: 2, name: "완료" },
+    hasMemo: false,
+    isRepeated: false,
+    timerStatus: "STOPPED",
+    sortOrder: 1,
+    subtasks: [],
+  },
+  {
+    todoId: 3,
+    icon: "ICON_3",
+    title: "서브투두 없는 단순 카드",
+    completed: false,
+    date: "2026-07-09",
+    durationSeconds: 1800,
+    priority: "HIGH",
+    tag: null,
+    hasMemo: true,
+    isRepeated: true,
+    timerStatus: "STOPPED",
+    sortOrder: 2,
+    subtasks: [],
+  },
+];

apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/page.tsx

@@ -1,5 +1,13 @@
 import { TodayHeaderContainer } from "@/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayHeaderContainer";
+import { TodayTodoListContainer } from "@/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayTodoListContainer";
 
 export default function TodayPage() {
-  return <TodayHeaderContainer />;
+  return (
+    <section>
+      <TodayHeaderContainer />
+      <div className="p-4">
+        <TodayTodoListContainer />
+      </div>
+    </section>
+  );
 }

apps/timo-web/app/[locale]/(main)/focus/_containers/FocusSessionContainer.tsx

@@ -13,9 +13,9 @@ import {
   convertDateToDayNumberText,
   convertDateToDayOfWeekText,
 } from "@/app/[locale]/(main)/focus/_utils/date";
-import { convertDurationToTimeText } from "@/app/[locale]/(main)/focus/_utils/duration";
 import { Timer } from "@/components/timer/Timer";
 import { TimerControls } from "@/components/timer/TimerControls";
+import { convertDurationToTimeText } from "@/utils/convert-duration-to-time-text";
 
 export const FocusSessionContainer = () => {
   const [task, setTask] = useState<FocusTask>(focusTaskMock);