[FEAT] 오늘 페이지 뷰 구현

apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-card/HomeDateInformation.tsx → apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/_components/DateInformation.tsx

@@ -1,7 +1,7 @@
 import { TodayBadge } from "@repo/timo-design-system/ui";
 import { cn } from "@repo/timo-design-system/utils";
 
-interface HomeDateInformationProps {
+interface DateInformationProps {
   date: string;
   dayOfWeek: string;
   isHoliday: boolean;
@@ -10,14 +10,14 @@ interface HomeDateInformationProps {
   completedCount: number;
 }
 
-export const HomeDateInformation = ({
+export const DateInformation = ({
   date,
   dayOfWeek,
   isHoliday,
   isToday,
   totalCount,
   completedCount,
-}: HomeDateInformationProps) => {
+}: DateInformationProps) => {
   return (
     <div className="flex w-full flex-col gap-3">
       <div className="flex w-full flex-col gap-0.5">

apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/todo-card/HomeDayHeaderContainer.tsx

@@ -4,7 +4,7 @@ import { useTranslations } from "next-intl";
 
 import type { ApiDayOfWeek } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_types/home-view-type";
 
-import { HomeDateInformation } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-card/HomeDateInformation";
+import { DateInformation } from "@/app/[locale]/(main)/(with-time-sidebar)/_components/DateInformation";
 import { CreateTodoModalContainer } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_containers/todo-modal/CreateTodoModalContainer";
 import { convertDateToDateText } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_utils/date";
 import { getToday, parseDateKey } from "@/utils/date";
@@ -31,7 +31,7 @@ export const HomeDayHeaderContainer = ({
 
   return (
     <div className="flex flex-col gap-3 pb-2">
-      <HomeDateInformation
+      <DateInformation
         date={convertDateToDateText(date)}
         dayOfWeek={tCommon(`weekday.${dayOfWeek}`)}
         isHoliday={isHoliday}

apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/todo-modal/CreateTodoModalContainer.tsx

@@ -4,9 +4,9 @@ import { AddTaskButton } from "@repo/timo-design-system/ui";
 import { useTranslations } from "next-intl";
 import { overlay } from "overlay-kit";
 
-import { CreateTodoModalContent } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_containers/todo-modal/CreateTodoModalContent";
 import { useCreateTodoSubmit } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-create-todo-submit";
 import { AnimatedToast } from "@/components/toast/AnimatedToast";
+import { CreateTodoModalContent } from "@/components/todo-modal/CreateTodoModalContent";
 
 export interface CreateTodoModalContainerProps {
   defaultDate?: Date;

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

@@ -0,0 +1,44 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+
+import type { TodoMock } from "@/app/[locale]/(main)/(with-time-sidebar)/today/_mocks/today-todo-mock";
+
+import { DateInformation } from "@/app/[locale]/(main)/(with-time-sidebar)/_components/DateInformation";
+import { convertDateToDateText } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_utils/date";
+import { CreateTodoModalContainer } from "@/app/[locale]/(main)/(with-time-sidebar)/today/_containers/todo-modal/CreateTodoModalContainer";
+import { getToday } from "@/utils/date";
+import { getDayOfWeekKey } from "@/utils/get-day-of-week-key";
+
+interface TodayDateHeaderContainerProps {
+  completedCount: number;
+  totalCount: number;
+  onCreateTodo: (todo: TodoMock) => void;
+}
+
+export const TodayDateHeaderContainer = ({
+  completedCount,
+  totalCount,
+  onCreateTodo,
+}: TodayDateHeaderContainerProps) => {
+  const tCommon = useTranslations("Common");
+
+  const today = getToday();
+  const date = convertDateToDateText(today);
+  const dayKey = getDayOfWeekKey(today);
+  const dayOfWeek = tCommon(`weekday.${dayKey}`);
+
+  return (
+    <div className="flex flex-col gap-3 pb-2">
+      <DateInformation
+        date={date}
+        dayOfWeek={dayOfWeek}
+        isHoliday={false}
+        isToday={true}
+        totalCount={totalCount}
+        completedCount={completedCount}
+      />
+      <CreateTodoModalContainer defaultDate={today} onCreate={onCreateTodo} />
+    </div>
+  );
+};

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useState } from "react";
 
 import type { ReactNode } from "react";
 
@@ -17,35 +17,29 @@ export interface TodayTodoCardContainerProps {
   toolbar: TodayTodoCardToolbar;
   timerStatus: "RUNNING" | "PAUSED" | "STOPPED";
   icon?: ReactNode;
-  onIconClick?: () => void;
+  onCardClick?: () => void;
   onCheck?: () => void;
   onPlay?: () => void;
-  onDelete?: () => void;
   onSubTodoCheck?: (id: number) => void;
 }
 
 export const TodayTodoCardContainer = ({
   title,
   isDone: initialIsDone,
   icon,
-  onIconClick,
   subTodos: initialSubTodos,
   toolbar,
   timerStatus,
+  onCardClick,
   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 isPlaying = timerStatus === "RUNNING";
   const isDimmed = isDone && !isHovered;
 
   const handleCheck = () => {
@@ -54,7 +48,6 @@ export const TodayTodoCardContainer = ({
     if (next) {
       setSubTodos((prev) => prev.map((s) => ({ ...s, isDone: true })));
       if (isPlaying) {
-        setIsPlaying(false);
         onPlay?.();
       }
     }
@@ -63,7 +56,6 @@ export const TodayTodoCardContainer = ({
 
   const handlePlay = () => {
     if (!isDone) {
-      setIsPlaying((prev) => !prev);
       onPlay?.();
     }
   };
@@ -82,12 +74,11 @@ export const TodayTodoCardContainer = ({
       isDimmed={isDimmed}
       isPlaying={isPlaying}
       icon={icon}
-      onIconClick={onIconClick}
       subTodos={subTodos}
       toolbar={toolbar}
+      onCardClick={onCardClick}
       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

@@ -1,11 +1,8 @@
 "use client";
 
-import { useState } from "react";
-
-import type { TodoMock } from "@/app/[locale]/(main)/(with-time-sidebar)/today/_mocks/today-todo-mock";
-
+import { TodayDateHeaderContainer } from "@/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayDateHeaderContainer";
 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 { useTodayTodoList } from "@/app/[locale]/(main)/(with-time-sidebar)/today/_hooks/useTodayTodoList";
 import { convertDurationToTimeText } from "@/utils/convert-duration-to-time-text";
 import { formatDate } from "@/utils/date";
 
@@ -17,84 +14,51 @@ const PRIORITY_MAP = {
 } 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 {
+    todos,
+    runningTodoId,
+    handlePlay,
+    handleCheck,
+    handleAddTodo,
+    handleSubTodoCheck,
+  } = useTodayTodoList();
 
-  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,
-      ),
-    );
-  };
+  const completedCount = todos.filter((todo) => todo.completed).length;
 
   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 className="flex h-full flex-col gap-2">
+      <TodayDateHeaderContainer
+        completedCount={completedCount}
+        totalCount={todos.length}
+        onCreateTodo={handleAddTodo}
+      />
+      <div className="flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto pr-1 pb-4">
+        {todos.map((todo) => (
+          <TodayTodoCardContainer
+            key={todo.todoId}
+            title={todo.title}
+            isDone={todo.completed}
+            timerStatus={runningTodoId === todo.todoId ? "RUNNING" : "STOPPED"}
+            toolbar={{
+              date: formatDate(todo.date),
+              dateValue: new Date(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)}
+            onSubTodoCheck={(id) => handleSubTodoCheck(todo.todoId, id)}
+          />
+        ))}
+      </div>
     </div>
   );
 };

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

@@ -0,0 +1,39 @@
+"use client";
+
+import { AddTaskButton } from "@repo/timo-design-system/ui";
+import { useTranslations } from "next-intl";
+import { overlay } from "overlay-kit";
+
+import type { TodoMock } from "@/app/[locale]/(main)/(with-time-sidebar)/today/_mocks/today-todo-mock";
+
+import { useCreateTodoSubmit } from "@/app/[locale]/(main)/(with-time-sidebar)/today/_hooks/todo-modal/use-create-todo-submit";
+import { CreateTodoModalContent } from "@/components/todo-modal/CreateTodoModalContent";
+
+export interface CreateTodoModalContainerProps {
+  defaultDate?: Date;
+  onCreate: (todo: TodoMock) => void;
+}
+
+export const CreateTodoModalContainer = ({
+  defaultDate,
+  onCreate,
+}: CreateTodoModalContainerProps) => {
+  const t = useTranslations("Home");
+  const { handleSubmit } = useCreateTodoSubmit({ onCreate });
+
+  const handleAddClick = () => {
+    overlay.open(({ isOpen, close, unmount }) => (
+      <CreateTodoModalContent
+        isOpen={isOpen}
+        onClose={close}
+        onExited={unmount}
+        defaultDate={defaultDate}
+        onSubmit={handleSubmit}
+      />
+    ));
+  };
+
+  return (
+    <AddTaskButton variant="big" text={t("addTask")} onClick={handleAddClick} />
+  );
+};