From 8723ac78bfe612c2ad333c0a38085797021d224b Mon Sep 17 00:00:00 2001
From: jjangminii <wjdals030328@catholic.ac.kr>
Date: Wed, 15 Jul 2026 01:17:39 +0900
Subject: [PATCH 1/8] =?UTF-8?q?fix(web):=20=EC=88=98=EC=A0=95=20=EB=AA=A8?=
 =?UTF-8?q?=EB=8B=AC=20=EC=9E=AC=EC=83=9D=20=EB=B2=84=ED=8A=BC=20=ED=81=B4?=
 =?UTF-8?q?=EB=A6=AD=20=EC=8B=9C=20=EB=AA=A8=EB=8B=AC=EC=9D=B4=20=EB=8B=AB?=
 =?UTF-8?q?=ED=9E=88=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20=EC=88=98=EC=A0=95=20?=
 =?UTF-8?q?(#200)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 재생 버튼 클릭 시 무조건 onClose()가 호출되던 로직을 제거했습니다
---
 .../components/todo-modal/detail/DetailTodoModalContent.tsx  | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx b/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
index 85de321b..5a234317 100644
--- a/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
+++ b/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
@@ -226,10 +226,7 @@ export const DetailTodoModalContent = ({
               subtaskInputs={detailTodoForm.subtaskInputs}
               onTitleChange={detailTodoForm.changeTitle}
               onToggleCompleted={detailTodoForm.setIsCompleted}
-              onTogglePlay={() => {
-                onTogglePlay();
-                onClose();
-              }}
+              onTogglePlay={onTogglePlay}
               onSubtaskInputChange={detailTodoForm.changeSubtaskInput}
               onToggleSubtaskCompleted={handleSubtaskCompletedChange}
               registerSubtaskInputRef={detailTodoForm.registerSubtaskInputRef}

From ffac8dcad1aab812ba57f8f7153d3541a4e54438 Mon Sep 17 00:00:00 2001
From: jjangminii <wjdals030328@catholic.ac.kr>
Date: Wed, 15 Jul 2026 01:17:50 +0900
Subject: [PATCH 2/8] =?UTF-8?q?fix(web):=20=EC=88=98=EC=A0=95=20=EB=AA=A8?=
 =?UTF-8?q?=EB=8B=AC=20=EC=9E=AC=EC=83=9D=20=EB=B2=84=ED=8A=BC=20=EC=95=84?=
 =?UTF-8?q?=EC=9D=B4=EC=BD=98=EC=9D=B4=20=ED=83=80=EC=9D=B4=EB=A8=B8=20?=
 =?UTF-8?q?=EC=83=81=ED=83=9C=EC=99=80=20=EB=8F=99=EA=B8=B0=ED=99=94?=
 =?UTF-8?q?=EB=90=98=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20(#200)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 타이머 시작/토글 성공 시 해당 투두의 상세 조회 쿼리도 함께 무효화하도록 했습니다
---
 .../home/_hooks/use-home-todos-by-date.ts     | 24 +++++++++++++++----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/use-home-todos-by-date.ts b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/use-home-todos-by-date.ts
index f5a17426..6f09c507 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/use-home-todos-by-date.ts
+++ b/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,
@@ -141,10 +147,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 +165,10 @@ export const useHomeTodosByDate = (
       return;
     }
 
-    startTimer({ todoId });
+    startTimer(
+      { todoId },
+      { onSuccess: () => invalidateTodoDetail(dateKey, todoId) },
+    );
   };
 
   const handleToggleSubtaskCompleted = (

From 0f331fef6deb4931609b7fffca2386c2e6702842 Mon Sep 17 00:00:00 2001
From: jjangminii <wjdals030328@catholic.ac.kr>
Date: Wed, 15 Jul 2026 01:30:03 +0900
Subject: [PATCH 3/8] =?UTF-8?q?fix(web):=20=EC=88=98=EC=A0=95=20=EB=AA=A8?=
 =?UTF-8?q?=EB=8B=AC=20=EC=99=84=EB=A3=8C=20=EC=B2=B4=ED=81=AC=EB=B0=95?=
 =?UTF-8?q?=EC=8A=A4=EA=B0=80=20=ED=83=80=EC=9D=B4=EB=A8=B8=20=EC=8B=A4?=
 =?UTF-8?q?=ED=96=89=20=EC=A4=91=20=EB=B9=84=ED=99=9C=EC=84=B1=ED=99=94?=
 =?UTF-8?q?=C2=B7=EB=AF=B8=EB=B0=98=EC=98=81=EB=90=98=EB=8A=94=20=EB=AC=B8?=
 =?UTF-8?q?=EC=A0=9C=20=EC=88=98=EC=A0=95=20(#200)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 완료 체크박스에서 disabled를 제거하고, 홈 페이지의 handleToggleCompleted(실행 중이면 중지 확인, 아니면 즉시 완료)를 모달에 연결했습니다
- 서브태스크 완료도 타이머 실행 여부와 무관하게 즉시 저장되도록 했습니다
- 완료 처리 성공 시 모달의 상세 조회 쿼리도 함께 무효화하도록 했습니다
---
 .../home/_containers/HomeTodoContainer.tsx             |  3 +++
 .../home/_hooks/use-home-todos-by-date.ts              |  9 ++++++++-
 .../today/_containers/TodayTodoListContainer.tsx       |  1 +
 .../todo-modal/detail/DetailTodoModalContent.tsx       | 10 +++++++---
 .../todo-modal/detail/DetailTodoTaskFields.tsx         |  7 +------
 .../todo-modal/detail/DetailTodoModalContainer.tsx     |  3 +++
 .../hooks/todo-modal/detail/use-detail-todo-form.ts    |  8 --------
 7 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/HomeTodoContainer.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/HomeTodoContainer.tsx
index 1d950639..b11a7470 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/HomeTodoContainer.tsx
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/HomeTodoContainer.tsx
@@ -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) => (
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/use-home-todos-by-date.ts b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/use-home-todos-by-date.ts
index 6f09c507..17fbc94b 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/use-home-todos-by-date.ts
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/use-home-todos-by-date.ts
@@ -106,6 +106,7 @@ export const useHomeTodosByDate = (
         onSuccess: () => {
           invalidateHomeAndFocus();
           invalidateTimeBoxes();
+          invalidateTodoDetail(dateKey, todoId);
         },
         onError: () => {
           setTodosByDate((prev) => ({ ...prev, [dateKey]: previous }));
@@ -130,7 +131,12 @@ export const useHomeTodosByDate = (
           }));
           changeTodoStatus(
             { todoId, data: { isCompleted: true, date: dateKey } },
-            { onSuccess: invalidateHomeAndFocus },
+            {
+              onSuccess: () => {
+                invalidateHomeAndFocus();
+                invalidateTodoDetail(dateKey, todoId);
+              },
+            },
           );
         },
       },
@@ -191,6 +197,7 @@ export const useHomeTodosByDate = (
         onSuccess: () => {
           invalidateHomeAndFocus();
           invalidateTimeBoxes();
+          invalidateTodoDetail(dateKey, todoId);
         },
         onError: () => {
           setTodosByDate((prev) => ({ ...prev, [dateKey]: previous }));
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayTodoListContainer.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayTodoListContainer.tsx
index bcada296..f855b7ab 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayTodoListContainer.tsx
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayTodoListContainer.tsx
@@ -49,6 +49,7 @@ export const TodayTodoListContainer = () => {
             todoId={todo.todoId}
             date={todo.date.slice(0, 10)}
             onTogglePlay={() => handlePlay(todo.todoId)}
+            onToggleCompleted={() => handleCheck(todo.todoId)}
             onDelete={() => handleDelete(todo.todoId)}
           >
             {(openDetailTodoModal) => (
diff --git a/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx b/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
index 5a234317..dad126c1 100644
--- a/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
+++ b/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
@@ -41,6 +41,7 @@ export interface DetailTodoModalContentProps {
   onExited: () => void;
   todo: TodoDetailResponse;
   onTogglePlay: () => void;
+  onToggleCompleted: (completed: boolean) => void;
   onDelete: () => void;
   onUpdate: (data: TodoUpdateRequest) => void;
 }
@@ -51,6 +52,7 @@ export const DetailTodoModalContent = ({
   onExited,
   todo,
   onTogglePlay,
+  onToggleCompleted,
   onDelete,
   onUpdate,
 }: DetailTodoModalContentProps) => {
@@ -176,7 +178,9 @@ export const DetailTodoModalContent = ({
 
   const handleSubtaskCompletedChange = (id: number, completed: boolean) => {
     const subtasks = detailTodoForm.changeSubtaskCompleted(id, completed);
-    updateTodo({ subtasks });
+    const updateData = detailTodoForm.buildUpdateRequest({ subtasks });
+    if (!updateData.title?.trim()) return;
+    onUpdate(updateData);
   };
 
   return (
@@ -220,12 +224,12 @@ export const DetailTodoModalContent = ({
             <div className="bg-timo-gray-500 h-px w-full" />
             <DetailTodoTaskFields
               titleValue={detailTodoForm.title}
-              isCompleted={detailTodoForm.isCompleted}
+              isCompleted={todo.completed}
               disabled={!canUpdateTodo}
               timerStatus={todo.timerStatus}
               subtaskInputs={detailTodoForm.subtaskInputs}
               onTitleChange={detailTodoForm.changeTitle}
-              onToggleCompleted={detailTodoForm.setIsCompleted}
+              onToggleCompleted={onToggleCompleted}
               onTogglePlay={onTogglePlay}
               onSubtaskInputChange={detailTodoForm.changeSubtaskInput}
               onToggleSubtaskCompleted={handleSubtaskCompletedChange}
diff --git a/apps/timo-web/components/todo-modal/detail/DetailTodoTaskFields.tsx b/apps/timo-web/components/todo-modal/detail/DetailTodoTaskFields.tsx
index c71235c8..e4a5f676 100644
--- a/apps/timo-web/components/todo-modal/detail/DetailTodoTaskFields.tsx
+++ b/apps/timo-web/components/todo-modal/detail/DetailTodoTaskFields.tsx
@@ -53,11 +53,7 @@ export const DetailTodoTaskFields = ({
     <div className="flex w-full flex-col">
       <div className="flex w-full items-center justify-between">
         <div className="flex min-w-0 flex-1 items-center gap-2">
-          <Checkbox
-            checked={isCompleted}
-            disabled={disabled}
-            onChange={onToggleCompleted}
-          />
+          <Checkbox checked={isCompleted} onChange={onToggleCompleted} />
           <textarea
             value={titleValue}
             ref={resizeTextarea}
@@ -95,7 +91,6 @@ export const DetailTodoTaskFields = ({
             <div key={subtask.id} className="flex items-center gap-2">
               <Checkbox
                 checked={subtask.completed}
-                disabled={disabled}
                 onChange={(completed) =>
                   onToggleSubtaskCompleted(subtask.id, completed)
                 }
diff --git a/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx b/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx
index 6d920be6..c506c341 100644
--- a/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx
+++ b/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx
@@ -16,6 +16,7 @@ export interface DetailTodoModalContainerProps {
   todoId: number;
   date: string;
   onTogglePlay: () => void;
+  onToggleCompleted: (completed: boolean) => void;
   onDelete: () => void;
   children: (openDetailTodoModal: () => void) => ReactNode;
 }
@@ -24,6 +25,7 @@ export const DetailTodoModalContainer = ({
   todoId,
   date,
   onTogglePlay,
+  onToggleCompleted,
   onDelete,
   children,
 }: DetailTodoModalContainerProps) => {
@@ -88,6 +90,7 @@ export const DetailTodoModalContainer = ({
           onExited={() => setIsMounted(false)}
           todo={todo}
           onTogglePlay={onTogglePlay}
+          onToggleCompleted={onToggleCompleted}
           onDelete={deleteTodo}
           onUpdate={updateTodo}
         />
diff --git a/apps/timo-web/hooks/todo-modal/detail/use-detail-todo-form.ts b/apps/timo-web/hooks/todo-modal/detail/use-detail-todo-form.ts
index 64011cb0..72c533c9 100644
--- a/apps/timo-web/hooks/todo-modal/detail/use-detail-todo-form.ts
+++ b/apps/timo-web/hooks/todo-modal/detail/use-detail-todo-form.ts
@@ -37,7 +37,6 @@ interface DetailTodoFormValues {
   repeatFrequency: RepeatFrequency;
   selectedWeekdayIds: string[];
   repeatDay: string;
-  isCompleted: boolean;
   title: string;
   memo: string;
   icon: TodoIconValue | null;
@@ -102,7 +101,6 @@ export const useDetailTodoForm = ({ todo }: UseDetailTodoFormParams) => {
       repeatFrequency: repeatType,
       selectedWeekdayIds: todo.repeat.weekdays ?? [],
       repeatDay: todo.repeat.dayOfMonth?.toString() ?? "",
-      isCompleted: todo.completed,
       title: todo.title,
       memo: todo.memo ?? "",
       icon: isTodoIconValue(todoIcon) ? todoIcon : null,
@@ -131,10 +129,6 @@ export const useDetailTodoForm = ({ todo }: UseDetailTodoFormParams) => {
     name: "repeatDay",
     control,
   });
-  const { field: isCompletedField } = useController({
-    name: "isCompleted",
-    control,
-  });
   const { field: titleField } = useController({ name: "title", control });
   const { field: memoField } = useController({ name: "memo", control });
   const { field: iconField } = useController({ name: "icon", control });
@@ -239,8 +233,6 @@ export const useDetailTodoForm = ({ todo }: UseDetailTodoFormParams) => {
     selectedWeekdayIds: selectedWeekdayIdsField.value,
     repeatDay: repeatDayField.value,
     setRepeatDay: repeatDayField.onChange,
-    isCompleted: isCompletedField.value,
-    setIsCompleted: isCompletedField.onChange,
     title: titleField.value,
     changeTitle,
     subtaskInputs: subtaskField.subtaskInputs,

From 8220d09043d300faf8c30fccefaba45217d55202 Mon Sep 17 00:00:00 2001
From: jjangminii <wjdals030328@catholic.ac.kr>
Date: Wed, 15 Jul 2026 02:00:22 +0900
Subject: [PATCH 4/8] =?UTF-8?q?feat(web):=20=EC=98=A4=EB=8A=98=20=ED=83=AD?=
 =?UTF-8?q?=20=EC=99=84=EB=A3=8C=20=EC=B2=B4=ED=81=AC=EB=B0=95=EC=8A=A4?=
 =?UTF-8?q?=C2=B7=EC=9E=AC=EC=83=9D=20=EB=B2=84=ED=8A=BC=EC=9D=84=20?=
 =?UTF-8?q?=ED=99=88/=ED=8F=AC=EC=BB=A4=EC=8A=A4=ED=83=AD=EA=B3=BC=20?=
 =?UTF-8?q?=EB=8F=99=EC=9D=BC=ED=95=9C=20=EC=8B=A4=EC=A0=9C=20API=20?=
 =?UTF-8?q?=EB=8F=99=EC=9E=91=EC=9C=BC=EB=A1=9C=20=EC=97=B0=EA=B2=B0=20(#2?=
 =?UTF-8?q?00)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- mock(TODO: API)이던 재생·완료 핸들러를 홈 페이지와 동일한 패턴(타이머 시작/일시정지/재개, 중지 확인 다이얼로그, 사이드바 패널 연동)으로 재작성했습니다
- 카드가 로컬로만 뒤집던 완료/서브태스크 섀도우 상태를 제거하고 서버 상태를 그대로 반영하는 컨트롤드 컴포넌트로 변경했습니다
---
 .../_containers/TodayTodoCardContainer.tsx    |  54 ++----
 .../_containers/TodayTodoListContainer.tsx    | 151 ++++++++++-----
 .../today/_hooks/useTodayTodoList.ts          | 178 +++++++++++++++---
 3 files changed, 271 insertions(+), 112 deletions(-)

diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayTodoCardContainer.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayTodoCardContainer.tsx
index dad74d65..07e32b35 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayTodoCardContainer.tsx
+++ b/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 "@/app/[locale]/(main)/(with-time-sidebar)/home/_types/todo-type";
 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)}
     />
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayTodoListContainer.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayTodoListContainer.tsx
index f855b7ab..94bea46e 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayTodoListContainer.tsx
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayTodoListContainer.tsx
@@ -1,15 +1,20 @@
 "use client";
 
 import { IconGraphic, TODO_ICON_VALUES } from "@repo/timo-design-system/ui";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
 
 import type { TodoIconValue } from "@repo/timo-design-system/ui";
 
+import { HomeStopCompleteModalContainer } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_containers/todo-card/HomeStopCompleteModalContainer";
 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 { useTodayTodoList } from "@/app/[locale]/(main)/(with-time-sidebar)/today/_hooks/useTodayTodoList";
 import { useToday } from "@/app/[locale]/(main)/(with-time-sidebar)/today/_queries/use-today";
+import { AnimatedToast } from "@/components/toast/AnimatedToast";
 import { DetailTodoModalContainer } from "@/containers/todo-modal/detail/DetailTodoModalContainer";
 import { formatDate } from "@/utils/date/date";
+import { convertDurationToMinutes } from "@/utils/duration/convert-duration-to-minutes";
 import { convertDurationToTimeText } from "@/utils/duration/convert-duration-to-time-text";
 
 const renderTodoIcon = (icon: string | undefined) => {
@@ -24,18 +29,53 @@ const renderTodoIcon = (icon: string | undefined) => {
 };
 
 export const TodayTodoListContainer = () => {
+  const tToast = useTranslations("Toast");
   const { data } = useToday();
+
+  const [pendingCompleteTodoId, setPendingCompleteTodoId] = useState<
+    number | null
+  >(null);
+  const [pendingCompleteToken, setPendingCompleteToken] = useState<
+    number | null
+  >(null);
+  const [feedbackText, setFeedbackText] = useState<string | undefined>();
+  const [isTimerRunningToastOpen, setIsTimerRunningToastOpen] = useState(false);
+
   const {
     todos,
-    runningTodoId,
+    activeTimer,
     handlePlay,
-    handleCheck,
+    handleToggleCompleted,
     handleDelete,
     handleSubTodoCheck,
-  } = useTodayTodoList(data.todos);
+    confirmStopAndComplete,
+  } = useTodayTodoList(data.todos, {
+    onNeedStopConfirm: (todoId) => {
+      setPendingCompleteTodoId(todoId);
+      setPendingCompleteToken(Date.now());
+    },
+    onTimerAlreadyRunning: () => setIsTimerRunningToastOpen(true),
+    onStopFeedback: setFeedbackText,
+  });
+
+  const handleConfirmPendingComplete = () => {
+    if (pendingCompleteTodoId === null) return;
+
+    confirmStopAndComplete(pendingCompleteTodoId);
+    setPendingCompleteTodoId(null);
+  };
 
   const completedCount = todos.filter((todo) => todo.completed).length;
 
+  const plannedMinutes = activeTimer
+    ? convertDurationToMinutes(
+        activeTimer.plannedSeconds + activeTimer.extendedSeconds,
+      )
+    : 0;
+  const actualMinutes = activeTimer
+    ? convertDurationToMinutes(activeTimer.elapsedSeconds)
+    : 0;
+
   return (
     <div className="flex h-full flex-col gap-2">
       <TodayDateHeaderContainer
@@ -43,46 +83,73 @@ export const TodayTodoListContainer = () => {
         totalCount={todos.length}
       />
       <div className="flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto pr-1 pb-4">
-        {todos.map((todo) => (
-          <DetailTodoModalContainer
-            key={todo.todoId}
-            todoId={todo.todoId}
-            date={todo.date.slice(0, 10)}
-            onTogglePlay={() => handlePlay(todo.todoId)}
-            onToggleCompleted={() => handleCheck(todo.todoId)}
-            onDelete={() => handleDelete(todo.todoId)}
-          >
-            {(openDetailTodoModal) => (
-              <TodayTodoCardContainer
-                title={todo.title}
-                isDone={todo.completed}
-                icon={renderTodoIcon(todo.icon)}
-                timerStatus={
-                  runningTodoId === todo.todoId ? "RUNNING" : "STOPPED"
-                }
-                toolbar={{
-                  date: formatDate(todo.date),
-                  dateValue: new Date(todo.date),
-                  time: convertDurationToTimeText(todo.durationSeconds),
-                  priority: 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,
-                }))}
-                onCardClick={openDetailTodoModal}
-                onPlay={() => handlePlay(todo.todoId)}
-                onCheck={() => handleCheck(todo.todoId)}
-                onSubTodoCheck={(id) => handleSubTodoCheck(todo.todoId, id)}
-              />
-            )}
-          </DetailTodoModalContainer>
-        ))}
+        {todos.map((todo) => {
+          const isActiveTodo =
+            activeTimer && activeTimer.todoId === todo.todoId;
+          const durationSeconds = isActiveTodo
+            ? activeTimer.plannedSeconds + activeTimer.extendedSeconds
+            : todo.durationSeconds;
+          const timerStatus = isActiveTodo
+            ? activeTimer.status
+            : todo.timerStatus;
+
+          return (
+            <DetailTodoModalContainer
+              key={todo.todoId}
+              todoId={todo.todoId}
+              date={todo.date.slice(0, 10)}
+              onTogglePlay={() => handlePlay(todo.todoId)}
+              onToggleCompleted={(completed) =>
+                handleToggleCompleted(todo.todoId, completed)
+              }
+              onDelete={() => handleDelete(todo.todoId)}
+            >
+              {(openDetailTodoModal) => (
+                <TodayTodoCardContainer
+                  title={todo.title}
+                  isCompleted={todo.completed}
+                  icon={renderTodoIcon(todo.icon)}
+                  timerStatus={timerStatus}
+                  toolbar={{
+                    date: formatDate(todo.date),
+                    dateValue: new Date(todo.date),
+                    time: convertDurationToTimeText(durationSeconds),
+                    priority: 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,
+                  }))}
+                  onCardClick={openDetailTodoModal}
+                  onTogglePlay={() => handlePlay(todo.todoId)}
+                  onToggleCompleted={(completed) =>
+                    handleToggleCompleted(todo.todoId, completed)
+                  }
+                  onSubTodoCheck={(id) => handleSubTodoCheck(todo.todoId, id)}
+                />
+              )}
+            </DetailTodoModalContainer>
+          );
+        })}
       </div>
+
+      <HomeStopCompleteModalContainer
+        pendingToken={pendingCompleteToken}
+        plannedMinutes={plannedMinutes}
+        actualMinutes={actualMinutes}
+        feedbackText={feedbackText}
+        onConfirm={handleConfirmPendingComplete}
+      />
+
+      <AnimatedToast
+        isOpen={isTimerRunningToastOpen}
+        onClose={() => setIsTimerRunningToastOpen(false)}
+        message={tToast("timerAlreadyRunning")}
+      />
     </div>
   );
 };
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_hooks/useTodayTodoList.ts b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_hooks/useTodayTodoList.ts
index 4273b63c..29d55a6a 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_hooks/useTodayTodoList.ts
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_hooks/useTodayTodoList.ts
@@ -1,50 +1,167 @@
 "use client";
 
+import { useQueryClient } from "@tanstack/react-query";
 import { useEffect, useState } from "react";
 
 import type { TodayTodo } from "@/app/[locale]/(main)/(with-time-sidebar)/today/_types/today-type";
 
-export const useTodayTodoList = (initialTodos: TodayTodo[]) => {
+import { getGetTodayQueryKey } from "@/api/generated/endpoints/home/home";
+import {
+  useChangeStatus,
+  useStartTimer,
+  useStopTimer,
+} from "@/api/generated/endpoints/timer/timer";
+import {
+  getGetTodoDetailQueryKey,
+  useChangeTodoStatus,
+} from "@/api/generated/endpoints/todo/todo";
+import { useActiveTimer } from "@/hooks/use-active-timer";
+import { useTimerQueryInvalidation } from "@/hooks/use-timer-query-invalidation";
+import { useTimeSidebarStore } from "@/stores/time-sidebar/useTimeSidebarStore";
+
+export interface UseTodayTodoListOptions {
+  onNeedStopConfirm: (todoId: number) => void;
+  onTimerAlreadyRunning: () => void;
+  onStopFeedback: (feedbackText: string | undefined) => void;
+}
+
+export const useTodayTodoList = (
+  initialTodos: TodayTodo[],
+  {
+    onNeedStopConfirm,
+    onTimerAlreadyRunning,
+    onStopFeedback,
+  }: UseTodayTodoListOptions,
+) => {
   const [todos, setTodos] = useState<TodayTodo[]>(initialTodos);
+  const openTimerPanel = useTimeSidebarStore((state) => state.openTimerPanel);
+  const queryClient = useQueryClient();
+  const { data: activeTimer } = useActiveTimer();
+  const { mutate: changeTodoStatus } = useChangeTodoStatus();
+  const { mutate: stopTimer } = useStopTimer();
+  const { invalidateTimerState, invalidateTimeBoxes } =
+    useTimerQueryInvalidation();
+
+  const { mutate: startTimer } = useStartTimer({
+    mutation: { onSuccess: invalidateTimerState },
+  });
+  const { mutate: changeStatus } = useChangeStatus({
+    mutation: { onSuccess: invalidateTimerState },
+  });
 
   useEffect(() => {
     setTodos(initialTodos);
   }, [initialTodos]);
 
-  const runningTodoId =
-    todos.find((todo) => todo.timerStatus === "RUNNING")?.todoId ?? null;
-
-  const handlePlay = (todoId: number) => {
-    // TODO: API
+  const updateTodo = (
+    todoId: number,
+    updater: (todo: TodayTodo) => TodayTodo,
+  ) => {
     setTodos((prev) =>
-      prev.map((todo) => ({
-        ...todo,
-        timerStatus:
-          todo.todoId === todoId && todo.timerStatus !== "RUNNING"
-            ? "RUNNING"
-            : "STOPPED",
-      })),
+      prev.map((todo) => (todo.todoId === todoId ? updater(todo) : todo)),
     );
   };
 
-  const handleCheck = (todoId: number) => {
-    // TODO: API
-    setTodos((prev) => {
-      const updated: TodayTodo[] = prev.map((todo) =>
-        todo.todoId === todoId
-          ? {
-              ...todo,
-              completed: !todo.completed,
-              timerStatus: "STOPPED" as const,
-            }
-          : todo,
-      );
-      return [...updated].sort(
-        (a, b) => Number(a.completed) - Number(b.completed),
-      );
+  const invalidateTodayView = () => {
+    queryClient.invalidateQueries({ queryKey: getGetTodayQueryKey() });
+  };
+  const invalidateTodoDetail = (todoId: number, dateKey: string) => {
+    queryClient.invalidateQueries({
+      queryKey: getGetTodoDetailQueryKey(todoId, { date: dateKey }),
     });
   };
 
+  const handleToggleCompleted = (todoId: number, completed: boolean) => {
+    if (completed && activeTimer?.todoId === todoId) {
+      onNeedStopConfirm(todoId);
+      return;
+    }
+
+    const dateKey = todos.find((todo) => todo.todoId === todoId)?.date;
+    if (!dateKey) return;
+
+    const previous = todos;
+    updateTodo(todoId, (todo) => ({ ...todo, completed }));
+
+    changeTodoStatus(
+      { todoId, data: { isCompleted: completed, date: dateKey } },
+      {
+        onSuccess: () => {
+          invalidateTodayView();
+          invalidateTimeBoxes();
+          invalidateTodoDetail(todoId, dateKey);
+        },
+        onError: () => {
+          setTodos(previous);
+        },
+      },
+    );
+  };
+
+  const confirmStopAndComplete = (todoId: number) => {
+    if (!activeTimer) return;
+
+    const dateKey = todos.find((todo) => todo.todoId === todoId)?.date;
+    if (!dateKey) return;
+
+    stopTimer(
+      { timerId: activeTimer.timerId },
+      {
+        onSuccess: (response) => {
+          onStopFeedback(response.data?.aiFeedback ?? undefined);
+          invalidateTimerState();
+
+          updateTodo(todoId, (todo) => ({ ...todo, completed: true }));
+          changeTodoStatus(
+            { todoId, data: { isCompleted: true, date: dateKey } },
+            {
+              onSuccess: () => {
+                invalidateTodayView();
+                invalidateTodoDetail(todoId, dateKey);
+              },
+            },
+          );
+        },
+      },
+    );
+  };
+
+  const handlePlay = (todoId: number) => {
+    const dateKey = todos.find((todo) => todo.todoId === todoId)?.date;
+    if (!dateKey) return;
+
+    const willRun =
+      todos.find((todo) => todo.todoId === todoId)?.timerStatus !== "RUNNING";
+
+    if (willRun) {
+      openTimerPanel();
+    }
+
+    if (activeTimer && activeTimer.todoId === todoId) {
+      changeStatus(
+        {
+          timerId: activeTimer.timerId,
+          data: {
+            action: activeTimer.status === "RUNNING" ? "PAUSE" : "RESUME",
+          },
+        },
+        { onSuccess: () => invalidateTodoDetail(todoId, dateKey) },
+      );
+      return;
+    }
+
+    // 다른 투두의 타이머가 이미 실행/일시정지 중이면 새 타이머를 시작할 수 없다(409)
+    if (activeTimer) {
+      onTimerAlreadyRunning();
+      return;
+    }
+
+    startTimer(
+      { todoId },
+      { onSuccess: () => invalidateTodoDetail(todoId, dateKey) },
+    );
+  };
+
   const handleDelete = (todoId: number) => {
     // TODO: API
     setTodos((prev) => prev.filter((todo) => todo.todoId !== todoId));
@@ -70,10 +187,11 @@ export const useTodayTodoList = (initialTodos: TodayTodo[]) => {
 
   return {
     todos,
-    runningTodoId,
+    activeTimer,
     handlePlay,
-    handleCheck,
+    handleToggleCompleted,
     handleDelete,
     handleSubTodoCheck,
+    confirmStopAndComplete,
   };
 };

From 30deebd0b96e01e9e68844f2af0edb806bcfa9a1 Mon Sep 17 00:00:00 2001
From: jjangminii <wjdals030328@catholic.ac.kr>
Date: Wed, 15 Jul 2026 02:23:35 +0900
Subject: [PATCH 5/8] =?UTF-8?q?fix(web):=20=EC=98=A4=EB=8A=98=20=ED=83=AD?=
 =?UTF-8?q?=20=EC=B9=B4=EB=93=9C=20=EC=B5=9C=EC=86=8C=20=ED=81=AC=EA=B8=B0?=
 =?UTF-8?q?=EC=99=80=20=EC=B2=B4=ED=81=AC=EB=B0=95=EC=8A=A4=20=ED=9D=94?=
 =?UTF-8?q?=EB=93=A4=EB=A6=BC=EC=9D=84=20=EC=88=98=EC=A0=95=ED=95=9C?=
 =?UTF-8?q?=EB=8B=A4=20(#200)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 카드 너비를 w-full에서 min-w-80으로 바꾸고, 체크박스 wrapper에 inline-flex items-center를 추가해 흔들림을 없앴습니다
- 페이지 콘텐츠 영역에 min-w-[400px]를 주되, 오버플로우가 <main>으로 새지 않도록 overflow-x-auto를 함께 적용했습니다
---
 .../[locale]/(main)/(with-time-sidebar)/today/page.tsx | 10 ++++++----
 .../(main)/today/_components/TodayTodoCard.tsx         |  3 ++-
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/page.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/page.tsx
index 0c00367c..4fffe122 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/page.tsx
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/page.tsx
@@ -6,10 +6,12 @@ export default function TodayPage() {
   return (
     <div className="flex h-full flex-col">
       <TodayHeaderContainer />
-      <section className="flex min-h-0 flex-1 flex-col px-20 pt-4">
-        <AsyncBoundary>
-          <TodayTodoListContainer />
-        </AsyncBoundary>
+      <section className="flex min-h-0 flex-1 flex-col overflow-x-auto px-20 pt-4">
+        <div className="h-full min-w-[400px]">
+          <AsyncBoundary>
+            <TodayTodoListContainer />
+          </AsyncBoundary>
+        </div>
       </section>
     </div>
   );
diff --git a/apps/timo-web/app/[locale]/(main)/today/_components/TodayTodoCard.tsx b/apps/timo-web/app/[locale]/(main)/today/_components/TodayTodoCard.tsx
index c5110b58..6003adc2 100644
--- a/apps/timo-web/app/[locale]/(main)/today/_components/TodayTodoCard.tsx
+++ b/apps/timo-web/app/[locale]/(main)/today/_components/TodayTodoCard.tsx
@@ -96,7 +96,7 @@ export const TodayTodoCard = ({
       onClick={onCardClick}
       onKeyDown={onCardClick ? handleCardKeyDown : undefined}
       className={cn(
-        "border-timo-gray-500 flex w-full flex-col gap-1 rounded-[4px] border px-5 py-4",
+        "border-timo-gray-500 flex min-w-80 flex-col gap-1 rounded-[4px] border px-5 py-4",
         style.card,
         onCardClick && "cursor-pointer",
       )}
@@ -105,6 +105,7 @@ export const TodayTodoCard = ({
         <div className="flex min-w-0 flex-1 items-center gap-2">
           <div
             role="none"
+            className="inline-flex items-center"
             onClick={stopPropagation}
             onKeyDown={stopPropagation}
           >

From a27f84b9c4fb54e1e024feeb96aa93dd3e63aa61 Mon Sep 17 00:00:00 2001
From: jjangminii <wjdals030328@catholic.ac.kr>
Date: Wed, 15 Jul 2026 02:33:35 +0900
Subject: [PATCH 6/8] =?UTF-8?q?refactor(web):=20=EA=B3=B5=ED=86=B5=20?=
 =?UTF-8?q?=ED=88=AC=EB=91=90=20=ED=83=80=EC=9E=85=20import=EB=A5=BC=20hom?=
 =?UTF-8?q?e=20=EB=B0=B0=EB=9F=B4=20=EB=8C=80=EC=8B=A0=20=EC=9B=90?=
 =?UTF-8?q?=EB=B3=B8=20=EA=B2=BD=EB=A1=9C=EB=A1=9C=20=EC=A0=95=EB=A6=AC?=
 =?UTF-8?q?=ED=95=9C=EB=8B=A4=20(#200)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- home/_types/todo-type(단순 재수출 배럴)를 거치던 3개 파일이 실제 원본인 @/api/common/todo-schema를 직접 가리키도록 정리했습니다
---
 .../today/_containers/TodayTodoCardContainer.tsx                | 2 +-
 apps/timo-web/hooks/todo-modal/create/use-create-todo-submit.ts | 2 +-
 .../hooks/todo-modal/detail/use-detail-subtask-field.ts         | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayTodoCardContainer.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayTodoCardContainer.tsx
index 07e32b35..e222ec28 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayTodoCardContainer.tsx
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayTodoCardContainer.tsx
@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 
-import type { TodoTimerStatusTypes } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_types/todo-type";
+import type { TodoTimerStatusTypes } from "@/api/common/todo-schema";
 import type { ReactNode } from "react";
 
 import {
diff --git a/apps/timo-web/hooks/todo-modal/create/use-create-todo-submit.ts b/apps/timo-web/hooks/todo-modal/create/use-create-todo-submit.ts
index 2a8d0561..f0027f28 100644
--- a/apps/timo-web/hooks/todo-modal/create/use-create-todo-submit.ts
+++ b/apps/timo-web/hooks/todo-modal/create/use-create-todo-submit.ts
@@ -6,9 +6,9 @@ import { useState } from "react";
 import type { CreateTodoRequest } from "@/api/common/todo-schema";
 import type { TodoCreateRequest } from "@/api/generated/models";
 
+import { todoCreateResponseSchema } from "@/api/common/todo-schema";
 import { getGetHomeQueryKey } from "@/api/generated/endpoints/home/home";
 import { useCreateTodo } from "@/api/generated/endpoints/todo/todo";
-import { todoCreateResponseSchema } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_types/todo-type";
 
 const buildCreateTodoRequestBody = (
   data: CreateTodoRequest,
diff --git a/apps/timo-web/hooks/todo-modal/detail/use-detail-subtask-field.ts b/apps/timo-web/hooks/todo-modal/detail/use-detail-subtask-field.ts
index 73994373..96c127f5 100644
--- a/apps/timo-web/hooks/todo-modal/detail/use-detail-subtask-field.ts
+++ b/apps/timo-web/hooks/todo-modal/detail/use-detail-subtask-field.ts
@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 
-import type { TodoSubtask } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_types/todo-type";
+import type { TodoSubtask } from "@/api/common/todo-schema";
 import type { SubtaskInputEntry } from "@/utils/todo/subtask-input-list";
 import type { KeyboardEvent } from "react";
 

From b86a779ab25f7c1dda283ce8ae5ec527650834bc Mon Sep 17 00:00:00 2001
From: jjangminii <wjdals030328@catholic.ac.kr>
Date: Wed, 15 Jul 2026 02:33:45 +0900
Subject: [PATCH 7/8] =?UTF-8?q?refactor(web):=20Home=20=EC=A0=84=EC=9A=A9?=
 =?UTF-8?q?=20=EC=A4=91=EC=A7=80=C2=B7=EC=99=84=EB=A3=8C=20=EB=AA=A8?=
 =?UTF-8?q?=EB=8B=AC=20=EC=BB=A8=ED=85=8C=EC=9D=B4=EB=84=88=EB=A5=BC=20?=
 =?UTF-8?q?=EA=B3=B5=EC=9A=A9=20=EA=B2=BD=EB=A1=9C=EB=A1=9C=20=EC=9D=B4?=
 =?UTF-8?q?=EB=8F=99=ED=95=9C=EB=8B=A4=20(#200)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Today가 home 전용 _containers 경로에 의존하던 것을 제거하고, HomeStopCompleteModalContainer를 containers/timer/StopCompleteModalContainer로 승격해 Home/Today가 공용 경로에서 가져오도록 정리했습니다
---
 .../home/_containers/HomeTodoContainer.tsx                  | 4 ++--
 .../today/_containers/TodayTodoListContainer.tsx            | 4 ++--
 .../timer/StopCompleteModalContainer.tsx}                   | 6 +++---
 3 files changed, 7 insertions(+), 7 deletions(-)
 rename apps/timo-web/{app/[locale]/(main)/(with-time-sidebar)/home/_containers/todo-card/HomeStopCompleteModalContainer.tsx => containers/timer/StopCompleteModalContainer.tsx} (90%)

diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/HomeTodoContainer.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/HomeTodoContainer.tsx
index b11a7470..8c7f75f0 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/HomeTodoContainer.tsx
+++ b/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";
@@ -207,7 +207,7 @@ export const HomeTodoContainer = () => {
         );
       })}
 
-      <HomeStopCompleteModalContainer
+      <StopCompleteModalContainer
         pendingToken={pendingCompleteTodo?.token ?? null}
         plannedMinutes={plannedMinutes}
         actualMinutes={actualMinutes}
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayTodoListContainer.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayTodoListContainer.tsx
index 94bea46e..6f973645 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayTodoListContainer.tsx
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayTodoListContainer.tsx
@@ -6,12 +6,12 @@ import { useState } from "react";
 
 import type { TodoIconValue } from "@repo/timo-design-system/ui";
 
-import { HomeStopCompleteModalContainer } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_containers/todo-card/HomeStopCompleteModalContainer";
 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 { useTodayTodoList } from "@/app/[locale]/(main)/(with-time-sidebar)/today/_hooks/useTodayTodoList";
 import { useToday } from "@/app/[locale]/(main)/(with-time-sidebar)/today/_queries/use-today";
 import { AnimatedToast } from "@/components/toast/AnimatedToast";
+import { StopCompleteModalContainer } from "@/containers/timer/StopCompleteModalContainer";
 import { DetailTodoModalContainer } from "@/containers/todo-modal/detail/DetailTodoModalContainer";
 import { formatDate } from "@/utils/date/date";
 import { convertDurationToMinutes } from "@/utils/duration/convert-duration-to-minutes";
@@ -137,7 +137,7 @@ export const TodayTodoListContainer = () => {
         })}
       </div>
 
-      <HomeStopCompleteModalContainer
+      <StopCompleteModalContainer
         pendingToken={pendingCompleteToken}
         plannedMinutes={plannedMinutes}
         actualMinutes={actualMinutes}
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/todo-card/HomeStopCompleteModalContainer.tsx b/apps/timo-web/containers/timer/StopCompleteModalContainer.tsx
similarity index 90%
rename from apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/todo-card/HomeStopCompleteModalContainer.tsx
rename to apps/timo-web/containers/timer/StopCompleteModalContainer.tsx
index 0869dcf2..c15398a1 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/todo-card/HomeStopCompleteModalContainer.tsx
+++ b/apps/timo-web/containers/timer/StopCompleteModalContainer.tsx
@@ -6,7 +6,7 @@ import { useEffect, useRef, useState } from "react";
 import { TimerCompleteModalPanel } from "@/components/timer/TimerCompleteModalPanel";
 import { TimerStopModalPanel } from "@/components/timer/TimerStopModalPanel";
 
-export interface HomeStopCompleteModalContainerProps {
+export interface StopCompleteModalContainerProps {
   pendingToken: number | null;
   plannedMinutes: number;
   actualMinutes: number;
@@ -14,13 +14,13 @@ export interface HomeStopCompleteModalContainerProps {
   onConfirm: () => void;
 }
 
-export const HomeStopCompleteModalContainer = ({
+export const StopCompleteModalContainer = ({
   pendingToken,
   plannedMinutes,
   actualMinutes,
   feedbackText,
   onConfirm,
-}: HomeStopCompleteModalContainerProps) => {
+}: StopCompleteModalContainerProps) => {
   const [step, setStep] = useState<"stop" | "complete">("stop");
   const hiddenTriggerRef = useRef<HTMLButtonElement>(null);
 

From 1f044051c49ddb3c3d16974d73a0595e8f2789a4 Mon Sep 17 00:00:00 2001
From: jjangminii <wjdals030328@catholic.ac.kr>
Date: Wed, 15 Jul 2026 02:45:31 +0900
Subject: [PATCH 8/8] =?UTF-8?q?fix(ui):=20=EB=AA=A8=EB=8B=AC=EC=9D=B4=20?=
 =?UTF-8?q?=EC=A4=91=EC=B2=A9=EB=90=A0=20=EB=95=8C=20=EC=95=84=EB=9E=98=20?=
 =?UTF-8?q?=EB=AA=A8=EB=8B=AC=EC=9D=98=20=ED=8C=A8=EB=84=90=EB=8F=84=20?=
 =?UTF-8?q?=EC=98=A4=EB=B2=84=EB=A0=88=EC=9D=B4=EB=A1=9C=20=EB=8D=AE?=
 =?UTF-8?q?=EC=9D=B4=EB=8F=84=EB=A1=9D=20z-index=EB=A5=BC=20=EC=8A=A4?=
 =?UTF-8?q?=ED=83=9D=20=EA=B9=8A=EC=9D=B4=EB=A7=8C=ED=81=BC=20=EC=98=AC?=
 =?UTF-8?q?=EB=A6=B0=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

기존에는 오버레이/패널 z-index가 모든 모달 인스턴스에 고정값(40/50)이라, 중첩된 모달의 오버레이가 그 아래 모달의 패널보다 항상 낮아 아래 모달이 어두워지지 않고 그냥 겹쳐 보였습니다. 모달이 열릴 때마다 전역 카운터(acquireModalStackIndex)로 스택 인덱스를 발급받아, overlay/panel z-index를 base + stackIndex * 20으로 계산하도록 바꿔 나중에 열린 모달의 오버레이가 항상 이전 모달의 패널보다 높아지도록 했습니다.
---
 .../src/components/layout/modal/Modal.tsx     | 43 ++++++++++++++++---
 packages/timo-design-system/src/lib/index.ts  |  1 +
 .../src/lib/modal-stack-registry.ts           |  7 +++
 3 files changed, 44 insertions(+), 7 deletions(-)
 create mode 100644 packages/timo-design-system/src/lib/modal-stack-registry.ts

diff --git a/packages/timo-design-system/src/components/layout/modal/Modal.tsx b/packages/timo-design-system/src/components/layout/modal/Modal.tsx
index 0ff4c7b9..5ef36931 100644
--- a/packages/timo-design-system/src/components/layout/modal/Modal.tsx
+++ b/packages/timo-design-system/src/components/layout/modal/Modal.tsx
@@ -14,15 +14,23 @@ import {
 } from "react";
 import { createPortal } from "react-dom";
 
-import { cn, hasOpenFloatingLayer } from "../../../lib";
+import { acquireModalStackIndex, cn, hasOpenFloatingLayer } from "../../../lib";
 import { ModalButton } from "../../button/modal-button/ModalButton";
 
+// tailwind-config theme.css의 --z-index-modal-overlay/--z-index-modal-panel과 동일한 기준값이다.
+const BASE_OVERLAY_Z_INDEX = 40;
+const BASE_PANEL_Z_INDEX = 50;
+// 중첩된 모달의 오버레이가 그 아래 모달의 패널(z=50)보다 항상 높도록, 한 단계당 overlay/panel 차이(10)보다 큰 폭으로 올린다.
+const MODAL_STACK_Z_INDEX_STEP = 20;
+
 interface ModalContextValue {
   isOpen: boolean;
   open: () => void;
   close: () => void;
   titleId: string;
   panelRef: RefObject<HTMLDivElement | null>;
+  overlayZIndex: number;
+  panelZIndex: number;
 }
 
 const ModalContext = createContext<ModalContextValue | null>(null);
@@ -46,6 +54,7 @@ export interface ModalProps {
 
 const ModalRoot = ({ children, className }: ModalProps) => {
   const [isOpen, setIsOpen] = useState(false);
+  const [stackIndex, setStackIndex] = useState(0);
   const titleId = useId();
   const panelRef = useRef<HTMLDivElement>(null);
 
@@ -76,11 +85,29 @@ const ModalRoot = ({ children, className }: ModalProps) => {
     };
   }, [isOpen]);
 
-  const open = () => setIsOpen(true);
+  const open = () => {
+    setStackIndex(acquireModalStackIndex());
+    setIsOpen(true);
+  };
   const close = () => setIsOpen(false);
 
+  const overlayZIndex =
+    BASE_OVERLAY_Z_INDEX + stackIndex * MODAL_STACK_Z_INDEX_STEP;
+  const panelZIndex =
+    BASE_PANEL_Z_INDEX + stackIndex * MODAL_STACK_Z_INDEX_STEP;
+
   return (
-    <ModalContext.Provider value={{ isOpen, open, close, titleId, panelRef }}>
+    <ModalContext.Provider
+      value={{
+        isOpen,
+        open,
+        close,
+        titleId,
+        panelRef,
+        overlayZIndex,
+        panelZIndex,
+      }}
+    >
       <div className={className}>{children}</div>
     </ModalContext.Provider>
   );
@@ -111,13 +138,14 @@ export interface ModalOverlayProps {
 }
 
 const ModalOverlay = ({ className }: ModalOverlayProps) => {
-  const { isOpen } = useModalContext();
+  const { isOpen, overlayZIndex } = useModalContext();
 
   if (!isOpen) return null;
 
   return createPortal(
     <div
-      className={cn("bg-timo-overlay z-modal-overlay fixed inset-0", className)}
+      className={cn("bg-timo-overlay fixed inset-0", className)}
+      style={{ zIndex: overlayZIndex }}
       aria-hidden="true"
     />,
     document.body,
@@ -130,7 +158,7 @@ export interface ModalPanelProps {
 }
 
 const ModalPanel = ({ children, className }: ModalPanelProps) => {
-  const { isOpen, titleId, panelRef } = useModalContext();
+  const { isOpen, titleId, panelRef, panelZIndex } = useModalContext();
 
   if (!isOpen) return null;
 
@@ -140,8 +168,9 @@ const ModalPanel = ({ children, className }: ModalPanelProps) => {
       role="dialog"
       aria-modal="true"
       aria-labelledby={titleId}
+      style={{ zIndex: panelZIndex }}
       className={cn(
-        "z-modal-panel fixed top-1/2 left-1/2 flex w-100 -translate-x-1/2 -translate-y-1/2 flex-col rounded-[4px] bg-white p-5.5",
+        "fixed top-1/2 left-1/2 flex w-100 -translate-x-1/2 -translate-y-1/2 flex-col rounded-[4px] bg-white p-5.5",
         className,
       )}
     >
diff --git a/packages/timo-design-system/src/lib/index.ts b/packages/timo-design-system/src/lib/index.ts
index 55d18191..f4c50575 100644
--- a/packages/timo-design-system/src/lib/index.ts
+++ b/packages/timo-design-system/src/lib/index.ts
@@ -4,3 +4,4 @@ export {
   registerOpenFloatingLayer,
   unregisterOpenFloatingLayer,
 } from "./floating-layer-registry";
+export { acquireModalStackIndex } from "./modal-stack-registry";
diff --git a/packages/timo-design-system/src/lib/modal-stack-registry.ts b/packages/timo-design-system/src/lib/modal-stack-registry.ts
new file mode 100644
index 00000000..2a6a664c
--- /dev/null
+++ b/packages/timo-design-system/src/lib/modal-stack-registry.ts
@@ -0,0 +1,7 @@
+let nextModalStackIndex = 0;
+
+export const acquireModalStackIndex = (): number => {
+  const index = nextModalStackIndex;
+  nextModalStackIndex += 1;
+  return index;
+};