[FIX] 수정 모달·오늘 탭의 타이머/완료 상태 동기화 문제 해결

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

@@ -8,7 +8,6 @@ import type { HomeViewFilter } from "@/app/[locale]/(main)/(with-time-sidebar)/h
 
 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,
@@ -17,6 +16,7 @@ import { useHomeTodosByDate } from "@/app/[locale]/(main)/(with-time-sidebar)/ho
 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 { StopCompleteModalContainer } from "@/containers/timer/StopCompleteModalContainer";
 import { DetailTodoModalContainer } from "@/containers/todo-modal/detail/DetailTodoModalContainer";
 import { DndSortableListProvider } from "@/providers/dnd/DndSortableListProvider";
 import { formatDateKey } from "@/utils/date/date";
@@ -156,6 +156,9 @@ export const HomeTodoContainer = () => {
                       onTogglePlay={() =>
                         handleTogglePlay(dateKey, todo.todoId)
                       }
+                      onToggleCompleted={(completed) =>
+                        handleToggleCompleted(dateKey, todo.todoId, completed)
+                      }
                       onDelete={() => handleDeleteTodo(dateKey, todo.todoId)}
                     >
                       {(openDetailTodoModal) => (
@@ -204,7 +207,7 @@ export const HomeTodoContainer = () => {
         );
       })}
 
-      <HomeStopCompleteModalContainer
+      <StopCompleteModalContainer
         pendingToken={pendingCompleteTodo?.token ?? null}
         plannedMinutes={plannedMinutes}
         actualMinutes={actualMinutes}

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

@@ -13,6 +13,7 @@ import {
   useStopTimer,
 } from "@/api/generated/endpoints/timer/timer";
 import {
+  getGetTodoDetailQueryKey,
   useChangeSubtaskStatus,
   useChangeTodoStatus,
   useReorderTodo,
@@ -80,6 +81,11 @@ export const useHomeTodosByDate = (
     invalidateHomeView();
     invalidateFocusTodo();
   };
+  const invalidateTodoDetail = (dateKey: string, todoId: number) => {
+    queryClient.invalidateQueries({
+      queryKey: getGetTodoDetailQueryKey(todoId, { date: dateKey }),
+    });
+  };
 
   const handleToggleCompleted = (
     dateKey: string,
@@ -100,6 +106,7 @@ export const useHomeTodosByDate = (
         onSuccess: () => {
           invalidateHomeAndFocus();
           invalidateTimeBoxes();
+          invalidateTodoDetail(dateKey, todoId);
         },
         onError: () => {
           setTodosByDate((prev) => ({ ...prev, [dateKey]: previous }));
@@ -124,7 +131,12 @@ export const useHomeTodosByDate = (
           }));
           changeTodoStatus(
             { todoId, data: { isCompleted: true, date: dateKey } },
-            { onSuccess: invalidateHomeAndFocus },
+            {
+              onSuccess: () => {
+                invalidateHomeAndFocus();
+                invalidateTodoDetail(dateKey, todoId);
+              },
+            },
           );
         },
       },
@@ -141,10 +153,15 @@ export const useHomeTodosByDate = (
     }
 
     if (activeTimer && activeTimer.todoId === todoId) {
-      changeStatus({
-        timerId: activeTimer.timerId,
-        data: { action: activeTimer.status === "RUNNING" ? "PAUSE" : "RESUME" },
-      });
+      changeStatus(
+        {
+          timerId: activeTimer.timerId,
+          data: {
+            action: activeTimer.status === "RUNNING" ? "PAUSE" : "RESUME",
+          },
+        },
+        { onSuccess: () => invalidateTodoDetail(dateKey, todoId) },
+      );
       return;
     }
 
@@ -154,7 +171,10 @@ export const useHomeTodosByDate = (
       return;
     }
 
-    startTimer({ todoId });
+    startTimer(
+      { todoId },
+      { onSuccess: () => invalidateTodoDetail(dateKey, todoId) },
+    );
   };
 
   const handleToggleSubtaskCompleted = (
@@ -177,6 +197,7 @@ export const useHomeTodosByDate = (
         onSuccess: () => {
           invalidateHomeAndFocus();
           invalidateTimeBoxes();
+          invalidateTodoDetail(dateKey, todoId);
         },
         onError: () => {
           setTodosByDate((prev) => ({ ...prev, [dateKey]: previous }));

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

@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 
+import type { TodoTimerStatusTypes } from "@/api/common/todo-schema";
 import type { ReactNode } from "react";
 
 import {
@@ -12,74 +13,47 @@ import {
 
 export interface TodayTodoCardContainerProps {
   title: string;
-  isDone: boolean;
+  isCompleted: boolean;
   subTodos: SubTodo[];
   toolbar: TodayTodoCardToolbar;
-  timerStatus: "RUNNING" | "PAUSED" | "STOPPED";
+  timerStatus: TodoTimerStatusTypes;
   icon?: ReactNode;
   onCardClick?: () => void;
-  onCheck?: () => void;
-  onPlay?: () => void;
+  onToggleCompleted?: (completed: boolean) => void;
+  onTogglePlay?: () => void;
   onSubTodoCheck?: (id: number) => void;
 }
 
 export const TodayTodoCardContainer = ({
   title,
-  isDone: initialIsDone,
+  isCompleted,
   icon,
-  subTodos: initialSubTodos,
+  subTodos,
   toolbar,
   timerStatus,
   onCardClick,
-  onCheck,
-  onPlay,
+  onToggleCompleted,
+  onTogglePlay,
   onSubTodoCheck,
 }: TodayTodoCardContainerProps) => {
   const [isHovered, setIsHovered] = useState(false);
-  const [isDone, setIsDone] = useState(initialIsDone);
-  const [subTodos, setSubTodos] = useState(initialSubTodos);
 
   const isPlaying = timerStatus === "RUNNING";
-  const isDimmed = isDone && !isHovered;
-
-  const handleCheck = () => {
-    const next = !isDone;
-    setIsDone(next);
-    if (next) {
-      setSubTodos((prev) => prev.map((s) => ({ ...s, isDone: true })));
-      if (isPlaying) {
-        onPlay?.();
-      }
-    }
-    onCheck?.();
-  };
-
-  const handlePlay = () => {
-    if (!isDone) {
-      onPlay?.();
-    }
-  };
-
-  const handleSubTodoCheck = (id: number) => {
-    setSubTodos((prev) =>
-      prev.map((s) => (s.id === id ? { ...s, isDone: !s.isDone } : s)),
-    );
-    onSubTodoCheck?.(id);
-  };
+  const isDimmed = isCompleted && !isHovered;
 
   return (
     <TodayTodoCard
       title={title}
-      isDone={isDone}
+      isDone={isCompleted}
       isDimmed={isDimmed}
       isPlaying={isPlaying}
       icon={icon}
       subTodos={subTodos}
       toolbar={toolbar}
       onCardClick={onCardClick}
-      onCheck={handleCheck}
-      onPlay={handlePlay}
-      onSubTodoCheck={handleSubTodoCheck}
+      onCheck={() => onToggleCompleted?.(!isCompleted)}
+      onPlay={() => onTogglePlay?.()}
+      onSubTodoCheck={(id) => onSubTodoCheck?.(id)}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     />