[FEAT] 타이머, 타임박스 API 연동 (재생/연장/완료/종료)

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

@@ -2,26 +2,36 @@
 
 import { cn } from "@repo/timo-design-system/utils";
 import { useTranslations } from "next-intl";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 
 import type { HomeViewFilter } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_types/home-view-type";
 
 import { HomeTodoCard } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-card/HomeTodoCard";
 import { HomeDayHeaderContainer } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_containers/todo-card/HomeDayHeaderContainer";
+import { HomeStopCompleteModalContainer } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_containers/todo-card/HomeStopCompleteModalContainer";
 import {
   scrollContainerToToday,
   useHomeTodayScrollRef,
 } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/use-home-today-scroll";
 import { useHomeTodosByDate } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/use-home-todos-by-date";
 import { useHomeViewMode } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/use-home-view-mode";
 import { useHomeView } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_queries/use-home-view";
+import { AnimatedToast } from "@/components/toast/AnimatedToast";
 import { DetailTodoModalContainer } from "@/components/todo-modal/detail/DetailTodoModalContainer";
 import { DndSortableListProvider } from "@/providers/dnd/DndSortableListProvider";
 import { formatDateKey } from "@/utils/date/date";
+import { convertDurationToMinutes } from "@/utils/duration/convert-duration-to-minutes";
 import { getDefaultTagLabelKey } from "@/utils/todo/tag-label";
 
+interface PendingCompleteTodo {
+  token: number;
+  dateKey: string;
+  todoId: number;
+}
+
 export const HomeTodoContainer = () => {
   const tCommon = useTranslations("Common");
+  const tToast = useTranslations("Toast");
   const { isWeekView, referenceDate } = useHomeViewMode();
 
   const scrollRef = useHomeTodayScrollRef<HTMLDivElement>();
@@ -32,19 +42,51 @@ export const HomeTodoContainer = () => {
   const { data: homeViewData } = useHomeView({ filter, baseDate });
   const days = homeViewData.days;
 
+  const [pendingCompleteTodo, setPendingCompleteTodo] =
+    useState<PendingCompleteTodo | null>(null);
+  const [feedbackText, setFeedbackText] = useState<string | undefined>();
+  const [isTimerRunningToastOpen, setIsTimerRunningToastOpen] = useState(false);
+
   const {
     todosByDate,
+    activeTimer,
     handleToggleCompleted,
     handleTogglePlay,
     handleToggleSubtaskCompleted,
     handleDeleteTodo,
     handleReorderTodo,
-  } = useHomeTodosByDate(days);
+    confirmStopAndComplete,
+  } = useHomeTodosByDate(days, {
+    onNeedStopConfirm: (dateKey, todoId) =>
+      setPendingCompleteTodo({ token: Date.now(), dateKey, todoId }),
+    onTimerAlreadyRunning: () => setIsTimerRunningToastOpen(true),
+    onStopFeedback: setFeedbackText,
+  });
+
+  const handleConfirmPendingComplete = () => {
+    if (!pendingCompleteTodo) return;
+
+    confirmStopAndComplete(
+      pendingCompleteTodo.dateKey,
+      pendingCompleteTodo.todoId,
+    );
+
+    setPendingCompleteTodo(null);
+  };
 
   useEffect(() => {
     scrollContainerToToday(scrollRef.current);
   }, [isWeekView, scrollRef]);
 
+  const plannedMinutes = activeTimer
+    ? convertDurationToMinutes(
+        activeTimer.plannedSeconds + activeTimer.extendedSeconds,
+      )
+    : 0;
+  const actualMinutes = activeTimer
+    ? convertDurationToMinutes(activeTimer.elapsedSeconds)
+    : 0;
+
   return (
     <div
       ref={scrollRef}
@@ -88,6 +130,14 @@ export const HomeTodoContainer = () => {
               <div className="flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto pr-1">
                 {todos.map((todo) => {
                   const [firstSubtask] = todo.subtasks;
+                  const isActiveTodo =
+                    activeTimer && activeTimer.todoId === todo.todoId;
+                  const durationSeconds = isActiveTodo
+                    ? activeTimer.plannedSeconds + activeTimer.extendedSeconds
+                    : todo.durationSeconds;
+                  const timerStatus = isActiveTodo
+                    ? activeTimer.status
+                    : todo.timerStatus;
 
                   const todoTagLabelKey = todo.tag
                     ? getDefaultTagLabelKey(todo.tag.tagId)
@@ -112,12 +162,12 @@ export const HomeTodoContainer = () => {
                           todoId={todo.todoId}
                           title={todo.title}
                           isCompleted={todo.completed}
-                          durationSeconds={todo.durationSeconds}
+                          durationSeconds={durationSeconds}
                           priority={todo.priority}
                           tagName={todoTagName}
                           hasMemo={todo.hasMemo}
                           isRepeated={todo.isRepeated}
-                          timerStatus={todo.timerStatus}
+                          timerStatus={timerStatus}
                           subtaskTitle={firstSubtask?.content}
                           isSubtaskCompleted={firstSubtask?.completed}
                           onClickTodo={openDetailTodoModal}
@@ -152,6 +202,20 @@ export const HomeTodoContainer = () => {
           </div>
         );
       })}
+
+      <HomeStopCompleteModalContainer
+        pendingToken={pendingCompleteTodo?.token ?? null}
+        plannedMinutes={plannedMinutes}
+        actualMinutes={actualMinutes}
+        feedbackText={feedbackText}
+        onConfirm={handleConfirmPendingComplete}
+      />
+
+      <AnimatedToast
+        isOpen={isTimerRunningToastOpen}
+        onClose={() => setIsTimerRunningToastOpen(false)}
+        message={tToast("timerAlreadyRunning")}
+      />
     </div>
   );
 };

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

@@ -0,0 +1,60 @@
+"use client";
+
+import { Modal } from "@repo/timo-design-system/ui";
+import { useEffect, useRef, useState } from "react";
+
+import { TimerCompleteModalPanel } from "@/components/timer/TimerCompleteModalPanel";
+import { TimerStopModalPanel } from "@/components/timer/TimerStopModalPanel";
+
+export interface HomeStopCompleteModalContainerProps {
+  pendingToken: number | null;
+  plannedMinutes: number;
+  actualMinutes: number;
+  feedbackText?: string;
+  onConfirm: () => void;
+}
+
+export const HomeStopCompleteModalContainer = ({
+  pendingToken,
+  plannedMinutes,
+  actualMinutes,
+  feedbackText,
+  onConfirm,
+}: HomeStopCompleteModalContainerProps) => {
+  const [step, setStep] = useState<"stop" | "complete">("stop");
+  const hiddenTriggerRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (pendingToken === null) return;
+
+    setStep("stop");
+    hiddenTriggerRef.current?.click();
+  }, [pendingToken]);
+
+  return (
+    <Modal>
+      <Modal.Trigger
+        ref={hiddenTriggerRef}
+        className="hidden"
+        aria-hidden="true"
+        tabIndex={-1}
+      />
+      <Modal.Overlay />
+      <Modal.Panel>
+        {step === "stop" ? (
+          <TimerStopModalPanel
+            minutes={actualMinutes}
+            onSwitch={() => setStep("complete")}
+          />
+        ) : (
+          <TimerCompleteModalPanel
+            plannedMinutes={plannedMinutes}
+            actualMinutes={actualMinutes}
+            feedbackText={feedbackText}
+            onComplete={onConfirm}
+          />
+        )}
+      </Modal.Panel>
+    </Modal>
+  );
+};

apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/use-home-todos-by-date.ts

@@ -6,22 +6,53 @@ import { useEffect, useState } from "react";
 import type { HomeViewDay } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_types/home-view-type";
 import type { Todo } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_types/todo-type";
 
-import { getGetHomeQueryKey } from "@/api/generated/endpoints/home/home";
+import { getGetFocusTodoQueryKey } from "@/api/generated/endpoints/focus/focus";
+import {
+  useChangeStatus,
+  useStartTimer,
+  useStopTimer,
+} from "@/api/generated/endpoints/timer/timer";
 import {
   useChangeSubtaskStatus,
   useChangeTodoStatus,
   useReorderTodo,
 } from "@/api/generated/endpoints/todo/todo";
 import { reorderTodos } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_utils/todo-order";
+import { useActiveTimer } from "@/hooks/use-active-timer";
+import { useTimerQueryInvalidation } from "@/hooks/use-timer-query-invalidation";
 import { useTimeSidebarStore } from "@/stores/time-sidebar/useTimeSidebarStore";
 
-export const useHomeTodosByDate = (apiDays: HomeViewDay[]) => {
+export interface UseHomeTodosByDateOptions {
+  onNeedStopConfirm: (dateKey: string, todoId: number) => void;
+  onTimerAlreadyRunning: () => void;
+  onStopFeedback: (feedbackText: string | undefined) => void;
+}
+
+export const useHomeTodosByDate = (
+  apiDays: HomeViewDay[],
+  {
+    onNeedStopConfirm,
+    onTimerAlreadyRunning,
+    onStopFeedback,
+  }: UseHomeTodosByDateOptions,
+) => {
   const [todosByDate, setTodosByDate] = useState<Record<string, Todo[]>>({});
   const openTimerPanel = useTimeSidebarStore((state) => state.openTimerPanel);
   const queryClient = useQueryClient();
+  const { data: activeTimer } = useActiveTimer();
   const { mutate: changeTodoStatus } = useChangeTodoStatus();
   const { mutate: changeSubtaskStatus } = useChangeSubtaskStatus();
   const { mutate: reorderTodo } = useReorderTodo();
+  const { mutate: stopTimer } = useStopTimer();
+  const { invalidateHomeView, invalidateTimerState, invalidateTimeBoxes } =
+    useTimerQueryInvalidation();
+
+  const { mutate: startTimer } = useStartTimer({
+    mutation: { onSuccess: invalidateTimerState },
+  });
+  const { mutate: changeStatus } = useChangeStatus({
+    mutation: { onSuccess: invalidateTimerState },
+  });
 
   useEffect(() => {
     setTodosByDate(
@@ -42,43 +73,88 @@ export const useHomeTodosByDate = (apiDays: HomeViewDay[]) => {
     }));
   };
 
-  const invalidateHomeView = () => {
-    queryClient.invalidateQueries({ queryKey: getGetHomeQueryKey() });
+  const invalidateFocusTodo = () => {
+    queryClient.invalidateQueries({ queryKey: getGetFocusTodoQueryKey() });
+  };
+  const invalidateHomeAndFocus = () => {
+    invalidateHomeView();
+    invalidateFocusTodo();
   };
 
   const handleToggleCompleted = (
     dateKey: string,
     todoId: number,
     completed: boolean,
   ) => {
+    if (completed && activeTimer?.todoId === todoId) {
+      onNeedStopConfirm(dateKey, todoId);
+      return;
+    }
+
     const previous = todosByDate[dateKey] ?? [];
     updateTodo(dateKey, todoId, (todo) => ({ ...todo, completed }));
 
     changeTodoStatus(
       { todoId, data: { isCompleted: completed, date: dateKey } },
       {
-        onSuccess: invalidateHomeView,
+        onSuccess: () => {
+          invalidateHomeAndFocus();
+          invalidateTimeBoxes();
+        },
         onError: () => {
           setTodosByDate((prev) => ({ ...prev, [dateKey]: previous }));
         },
       },
     );
   };
 
+  const confirmStopAndComplete = (dateKey: string, todoId: number) => {
+    if (!activeTimer) return;
+
+    stopTimer(
+      { timerId: activeTimer.timerId },
+      {
+        onSuccess: (response) => {
+          onStopFeedback(response.data?.aiFeedback ?? undefined);
+          invalidateTimerState();
+
+          updateTodo(dateKey, todoId, (todo) => ({
+            ...todo,
+            completed: true,
+          }));
+          changeTodoStatus(
+            { todoId, data: { isCompleted: true, date: dateKey } },
+            { onSuccess: invalidateHomeAndFocus },
+          );
+        },
+      },
+    );
+  };
+
   const handleTogglePlay = (dateKey: string, todoId: number) => {
-    // TODO: API
     const willRun =
       todosByDate[dateKey]?.find((todo) => todo.todoId === todoId)
         ?.timerStatus !== "RUNNING";
 
-    updateTodo(dateKey, todoId, (todo) => ({
-      ...todo,
-      timerStatus: todo.timerStatus === "RUNNING" ? "STOPPED" : "RUNNING",
-    }));
-
     if (willRun) {
       openTimerPanel();
     }
+
+    if (activeTimer && activeTimer.todoId === todoId) {
+      changeStatus({
+        timerId: activeTimer.timerId,
+        data: { action: activeTimer.status === "RUNNING" ? "PAUSE" : "RESUME" },
+      });
+      return;
+    }
+
+    // 다른 투두의 타이머가 이미 실행/일시정지 중이면 새 타이머를 시작할 수 없다(409)
+    if (activeTimer) {
+      onTimerAlreadyRunning();
+      return;
+    }
+
+    startTimer({ todoId });
   };
 
   const handleToggleSubtaskCompleted = (
@@ -98,7 +174,10 @@ export const useHomeTodosByDate = (apiDays: HomeViewDay[]) => {
     changeSubtaskStatus(
       { todoId, subtaskId, data: { isCompleted: completed } },
       {
-        onSuccess: invalidateHomeView,
+        onSuccess: () => {
+          invalidateHomeAndFocus();
+          invalidateTimeBoxes();
+        },
         onError: () => {
           setTodosByDate((prev) => ({ ...prev, [dateKey]: previous }));
         },
@@ -131,7 +210,7 @@ export const useHomeTodosByDate = (apiDays: HomeViewDay[]) => {
     reorderTodo(
       { todoId: movedTodo.todoId, data: { newIndex: toIndex, date: dateKey } },
       {
-        onSuccess: invalidateHomeView,
+        onSuccess: invalidateHomeAndFocus,
         onError: () => {
           setTodosByDate((prev) => ({ ...prev, [dateKey]: previous }));
         },
@@ -141,10 +220,12 @@ export const useHomeTodosByDate = (apiDays: HomeViewDay[]) => {
 
   return {
     todosByDate,
+    activeTimer,
     handleToggleCompleted,
     handleTogglePlay,
     handleToggleSubtaskCompleted,
     handleDeleteTodo,
     handleReorderTodo,
+    confirmStopAndComplete,
   };
 };