From fe8c545aa6da88857a6fd96276883bc46e679bab Mon Sep 17 00:00:00 2001
From: yumin-kim4757 <rladbals0211@gmail.com>
Date: Tue, 14 Jul 2026 05:22:21 +0900
Subject: [PATCH 01/75] =?UTF-8?q?feat(web):=20=ED=86=B5=EA=B3=84=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20API=20=EC=97=B0=EA=B2=B0=20(#165)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../StatisticsCalendarContainer.tsx           | 10 ++-
 .../_containers/StatisticsContainer.tsx       | 66 +++++++++++--------
 2 files changed, 46 insertions(+), 30 deletions(-)

diff --git a/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsCalendarContainer.tsx b/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsCalendarContainer.tsx
index 551696fe..343fb686 100644
--- a/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsCalendarContainer.tsx
+++ b/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsCalendarContainer.tsx
@@ -1,7 +1,8 @@
 "use client";
 
+import { useGetCalendar } from "@/api/generated/endpoints/statistics/statistics";
 import { StatisticsCalendar } from "@/app/[locale]/(main)/statistics/_components/StatisticsCalendar";
-import { MOCK_STATISTICS_CALENDAR } from "@/app/[locale]/(main)/statistics/_mocks/statistics-calendar";
+import { formatDateKey } from "@/utils/date";
 
 interface StatisticsCalendarContainerProps {
   currentMonth: Date;
@@ -14,12 +15,17 @@ export const StatisticsCalendarContainer = ({
   selectedDate,
   onSelectDate,
 }: StatisticsCalendarContainerProps) => {
+  const yearMonth = formatDateKey(currentMonth).slice(0, 7);
+  const calendarQuery = useGetCalendar({ yearMonth });
+  const calendarData = calendarQuery.data?.data;
+  if (!calendarData) return null;
+
   return (
     <StatisticsCalendar
       currentMonth={currentMonth}
       selectedDate={selectedDate}
       onSelectDate={onSelectDate}
-      calendarData={MOCK_STATISTICS_CALENDAR}
+      calendarData={calendarData}
     />
   );
 };
diff --git a/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsContainer.tsx b/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsContainer.tsx
index c0ff4f02..04a4709e 100644
--- a/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsContainer.tsx
+++ b/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsContainer.tsx
@@ -3,16 +3,16 @@
 import { useLocale } from "next-intl";
 import { useState } from "react";
 
+import {
+  useGetDaily,
+  useGetSummary,
+} from "@/api/generated/endpoints/statistics/statistics";
 import {
   StatisticsSidePanel,
   type StatisticsSidePanelProps,
 } from "@/app/[locale]/(main)/statistics/_components/StatisticsSidePanel";
 import { StatisticsCalendarContainer } from "@/app/[locale]/(main)/statistics/_containers/StatisticsCalendarContainer";
 import { StatisticsHeaderContainer } from "@/app/[locale]/(main)/statistics/_containers/StatisticsHeaderContainer";
-import {
-  MOCK_STATISTICS_DAY_DETAILS,
-  MOCK_STATISTICS_MONTH_SUMMARY,
-} from "@/app/[locale]/(main)/statistics/_mocks/statistics-calendar";
 import { formatStatisticsSidePanelDate } from "@/app/[locale]/(main)/statistics/_utils/format-statistics-date";
 import { formatDateKey } from "@/utils/date";
 
@@ -20,40 +20,50 @@ export const StatisticsContainer = () => {
   const locale = useLocale();
   const [currentMonth, setCurrentMonth] = useState(() => new Date());
   const [selectedDate, setSelectedDate] = useState(() => new Date());
-  const [sidePanelProps, setSidePanelProps] =
-    useState<StatisticsSidePanelProps>({
-      variant: "month",
-      summary: MOCK_STATISTICS_MONTH_SUMMARY,
-    });
+  const [sidePanelVariant, setSidePanelVariant] =
+    useState<StatisticsSidePanelProps["variant"]>("month");
+
+  const yearMonth = formatDateKey(currentMonth).slice(0, 7);
+  const summaryQuery = useGetSummary({ yearMonth });
 
-  const getStatisticsDayDetail = (date: Date) => {
-    const selectedDateKey = formatDateKey(date);
-    const selectedDetailBase = MOCK_STATISTICS_DAY_DETAILS[selectedDateKey] ?? {
-      date: selectedDateKey,
-      totalRecordMinutes: 0,
-      todos: [],
-    };
+  const selectedDateKey = formatDateKey(selectedDate);
+  const dailyQuery = useGetDaily({ date: selectedDateKey });
+  const daily = dailyQuery.data?.data;
 
-    return {
-      ...selectedDetailBase,
-      date: formatStatisticsSidePanelDate(date, locale),
-    };
+  const summary = summaryQuery.data?.data ?? {
+    totalRecordMinutes: 0,
+    activeDayCount: 0,
+    averageRecordedMinutes: 0,
+    completedTodoCount: 0,
+    totalTodoCount: 0,
   };
 
+  const dayDetail = {
+    date: formatStatisticsSidePanelDate(selectedDate, locale),
+    totalRecordMinutes: daily?.totalRecordMinutes ?? 0,
+    todos:
+      daily?.todos.map((todo) => ({
+        todoId: todo.todoId,
+        title: todo.title,
+        actualTimeMinutes: todo.actualTimeMinutes,
+        estimatedTimeMinutes: todo.estimatedTimeMinutes ?? 0,
+        tagName: todo.tag?.name ?? "",
+      })) ?? [],
+  };
+
+  const sidePanelProps: StatisticsSidePanelProps =
+    sidePanelVariant === "month"
+      ? { variant: "month", summary }
+      : { variant: "day", detail: dayDetail };
+
   const handleChangeMonth = (updater: (prev: Date) => Date) => {
     setCurrentMonth(updater);
-    setSidePanelProps({
-      variant: "month",
-      summary: MOCK_STATISTICS_MONTH_SUMMARY,
-    });
+    setSidePanelVariant("month");
   };
 
   const handleSelectDate = (date: Date) => {
     setSelectedDate(date);
-    setSidePanelProps({
-      variant: "day",
-      detail: getStatisticsDayDetail(date),
-    });
+    setSidePanelVariant("day");
   };
 
   return (

From 79e1c445d767d7e0024606a1079e7f69298be71c Mon Sep 17 00:00:00 2001
From: yumin-kim4757 <rladbals0211@gmail.com>
Date: Tue, 14 Jul 2026 05:25:07 +0900
Subject: [PATCH 02/75] =?UTF-8?q?refactor(web):=20=ED=86=B5=EA=B3=84=20API?=
 =?UTF-8?q?=20=EC=BF=BC=EB=A6=AC=20=ED=9B=85=20=EB=B6=84=EB=A6=AC=20(#165)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../_containers/StatisticsCalendarContainer.tsx |  4 ++--
 .../_containers/StatisticsContainer.tsx         | 12 ++++++------
 .../(main)/statistics/_queries/.gitkeep         |  0
 .../statistics/_queries/statistics-queries.ts   | 17 +++++++++++++++++
 4 files changed, 25 insertions(+), 8 deletions(-)
 delete mode 100644 apps/timo-web/app/[locale]/(main)/statistics/_queries/.gitkeep
 create mode 100644 apps/timo-web/app/[locale]/(main)/statistics/_queries/statistics-queries.ts

diff --git a/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsCalendarContainer.tsx b/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsCalendarContainer.tsx
index 343fb686..5bd94e17 100644
--- a/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsCalendarContainer.tsx
+++ b/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsCalendarContainer.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import { useGetCalendar } from "@/api/generated/endpoints/statistics/statistics";
 import { StatisticsCalendar } from "@/app/[locale]/(main)/statistics/_components/StatisticsCalendar";
+import { useStatisticsCalendarQuery } from "@/app/[locale]/(main)/statistics/_queries/statistics-queries";
 import { formatDateKey } from "@/utils/date";
 
 interface StatisticsCalendarContainerProps {
@@ -16,7 +16,7 @@ export const StatisticsCalendarContainer = ({
   onSelectDate,
 }: StatisticsCalendarContainerProps) => {
   const yearMonth = formatDateKey(currentMonth).slice(0, 7);
-  const calendarQuery = useGetCalendar({ yearMonth });
+  const calendarQuery = useStatisticsCalendarQuery(yearMonth);
   const calendarData = calendarQuery.data?.data;
   if (!calendarData) return null;
 
diff --git a/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsContainer.tsx b/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsContainer.tsx
index 04a4709e..e24c6838 100644
--- a/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsContainer.tsx
+++ b/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsContainer.tsx
@@ -3,16 +3,16 @@
 import { useLocale } from "next-intl";
 import { useState } from "react";
 
-import {
-  useGetDaily,
-  useGetSummary,
-} from "@/api/generated/endpoints/statistics/statistics";
 import {
   StatisticsSidePanel,
   type StatisticsSidePanelProps,
 } from "@/app/[locale]/(main)/statistics/_components/StatisticsSidePanel";
 import { StatisticsCalendarContainer } from "@/app/[locale]/(main)/statistics/_containers/StatisticsCalendarContainer";
 import { StatisticsHeaderContainer } from "@/app/[locale]/(main)/statistics/_containers/StatisticsHeaderContainer";
+import {
+  useStatisticsDailyQuery,
+  useStatisticsSummaryQuery,
+} from "@/app/[locale]/(main)/statistics/_queries/statistics-queries";
 import { formatStatisticsSidePanelDate } from "@/app/[locale]/(main)/statistics/_utils/format-statistics-date";
 import { formatDateKey } from "@/utils/date";
 
@@ -24,10 +24,10 @@ export const StatisticsContainer = () => {
     useState<StatisticsSidePanelProps["variant"]>("month");
 
   const yearMonth = formatDateKey(currentMonth).slice(0, 7);
-  const summaryQuery = useGetSummary({ yearMonth });
+  const summaryQuery = useStatisticsSummaryQuery(yearMonth);
 
   const selectedDateKey = formatDateKey(selectedDate);
-  const dailyQuery = useGetDaily({ date: selectedDateKey });
+  const dailyQuery = useStatisticsDailyQuery(selectedDateKey);
   const daily = dailyQuery.data?.data;
 
   const summary = summaryQuery.data?.data ?? {
diff --git a/apps/timo-web/app/[locale]/(main)/statistics/_queries/.gitkeep b/apps/timo-web/app/[locale]/(main)/statistics/_queries/.gitkeep
deleted file mode 100644
index e69de29b..00000000
diff --git a/apps/timo-web/app/[locale]/(main)/statistics/_queries/statistics-queries.ts b/apps/timo-web/app/[locale]/(main)/statistics/_queries/statistics-queries.ts
new file mode 100644
index 00000000..0b3dfcee
--- /dev/null
+++ b/apps/timo-web/app/[locale]/(main)/statistics/_queries/statistics-queries.ts
@@ -0,0 +1,17 @@
+import {
+  useGetCalendar,
+  useGetDaily,
+  useGetSummary,
+} from "@/api/generated/endpoints/statistics/statistics";
+
+export const useStatisticsSummaryQuery = (yearMonth: string) => {
+  return useGetSummary({ yearMonth });
+};
+
+export const useStatisticsDailyQuery = (date: string) => {
+  return useGetDaily({ date });
+};
+
+export const useStatisticsCalendarQuery = (yearMonth: string) => {
+  return useGetCalendar({ yearMonth });
+};

From f2b5d6819073edda283ca9b713beea382f7271b4 Mon Sep 17 00:00:00 2001
From: yumin-kim4757 <rladbals0211@gmail.com>
Date: Tue, 14 Jul 2026 05:37:35 +0900
Subject: [PATCH 03/75] =?UTF-8?q?refactor(web):=20=EC=98=81=EC=96=B4=20?=
 =?UTF-8?q?=EB=82=A0=EC=A7=9C=20=ED=91=9C=EC=8B=9C=20=ED=98=95=EC=8B=9D=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20(#165)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../_components/StatisticsSidePanel.tsx       |  4 ++-
 .../_utils/format-statistics-date.ts          | 28 +++++++++++++++++++
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/apps/timo-web/app/[locale]/(main)/statistics/_components/StatisticsSidePanel.tsx b/apps/timo-web/app/[locale]/(main)/statistics/_components/StatisticsSidePanel.tsx
index 75d5cf29..50fd94d4 100644
--- a/apps/timo-web/app/[locale]/(main)/statistics/_components/StatisticsSidePanel.tsx
+++ b/apps/timo-web/app/[locale]/(main)/statistics/_components/StatisticsSidePanel.tsx
@@ -91,7 +91,9 @@ export const StatisticsSidePanel = (props: StatisticsSidePanelProps) => {
   return (
     <aside className={cn(SIDE_PANEL_CLASS_NAME, "px-7.5 pt-20.5 pb-76")}>
       <div className="flex flex-col gap-6">
-        <h2 className="typo-headline-b-24">{detail.date}</h2>
+        <h2 className="typo-headline-b-24 whitespace-pre-line">
+          {detail.date}
+        </h2>
 
         <SummaryTimeBlock
           label={t("dayTotalRecordTime")}
diff --git a/apps/timo-web/app/[locale]/(main)/statistics/_utils/format-statistics-date.ts b/apps/timo-web/app/[locale]/(main)/statistics/_utils/format-statistics-date.ts
index 17bda9f4..f93cb7eb 100644
--- a/apps/timo-web/app/[locale]/(main)/statistics/_utils/format-statistics-date.ts
+++ b/apps/timo-web/app/[locale]/(main)/statistics/_utils/format-statistics-date.ts
@@ -14,6 +14,19 @@ export const formatStatisticsMonth = (date: Date, locale = "ko") => {
   }).format(date);
 };
 
+const getOrdinalDay = (day: number) => {
+  const lastTwoDigits = day % 100;
+  if (lastTwoDigits >= 11 && lastTwoDigits <= 13) return `${day}th`;
+
+  const lastDigit = day % 10;
+  if (lastDigit === 1) return `${day}st`;
+  if (lastDigit === 2) return `${day}nd`;
+  if (lastDigit === 3) return `${day}rd`;
+  return `${day}th`;
+};
+
+const isEnglishLocale = (locale: string) => locale.startsWith("en");
+
 /**
  * 통계 캘린더 설명 영역에 표시할 날짜 문구를 반환합니다.
  *
@@ -25,6 +38,15 @@ export const formatStatisticsMonth = (date: Date, locale = "ko") => {
  * formatStatisticsCalendarDate(new Date(2026, 5, 28)); // "2026년 6월 28일 일요일"
  */
 export const formatStatisticsCalendarDate = (date: Date, locale = "ko") => {
+  if (isEnglishLocale(locale)) {
+    const weekday = new Intl.DateTimeFormat(locale, {
+      weekday: "long",
+    }).format(date);
+    const month = formatStatisticsMonth(date, locale);
+
+    return `${weekday}, ${getOrdinalDay(date.getDate())} ${month}\n${date.getFullYear()}`;
+  }
+
   return new Intl.DateTimeFormat(locale, {
     year: "numeric",
     month: "long",
@@ -44,6 +66,12 @@ export const formatStatisticsCalendarDate = (date: Date, locale = "ko") => {
  * formatStatisticsSidePanelDate(new Date(2026, 5, 28)); // "6월 28일"
  */
 export const formatStatisticsSidePanelDate = (date: Date, locale = "ko") => {
+  if (isEnglishLocale(locale)) {
+    const month = formatStatisticsMonth(date, locale);
+
+    return `${getOrdinalDay(date.getDate())} ${month}`;
+  }
+
   return new Intl.DateTimeFormat(locale, {
     month: "long",
     day: "numeric",

From 117b953503040edf548561f432923de28e866d3b Mon Sep 17 00:00:00 2001
From: yumin-kim4757 <rladbals0211@gmail.com>
Date: Tue, 14 Jul 2026 05:39:35 +0900
Subject: [PATCH 04/75] =?UTF-8?q?refactor(web):=20=ED=86=B5=EA=B3=84=20?=
 =?UTF-8?q?=EC=BA=98=EB=A6=B0=EB=8D=94=20=EC=84=A0=ED=83=9D=20=EB=82=A0?=
 =?UTF-8?q?=EC=A7=9C=EB=A1=9C=20=ED=91=9C=EC=8B=9C=20=EB=B0=A9=EC=8B=9D=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20(#165)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../(main)/statistics/_components/StatisticsCalendar.tsx    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/timo-web/app/[locale]/(main)/statistics/_components/StatisticsCalendar.tsx b/apps/timo-web/app/[locale]/(main)/statistics/_components/StatisticsCalendar.tsx
index 811004cd..74fc9948 100644
--- a/apps/timo-web/app/[locale]/(main)/statistics/_components/StatisticsCalendar.tsx
+++ b/apps/timo-web/app/[locale]/(main)/statistics/_components/StatisticsCalendar.tsx
@@ -77,7 +77,7 @@ export const StatisticsCalendar = ({
   const completionRateByDate = new Map(
     calendarData.days.map(({ date, completionRate }) => [date, completionRate]),
   );
-  const todayLabel = formatStatisticsCalendarDate(today, locale);
+  const selectedDateLabel = formatStatisticsCalendarDate(selectedDate, locale);
   const todayTime = getDateTime(today);
 
   return (
@@ -88,8 +88,8 @@ export const StatisticsCalendar = ({
             {formatStatisticsMonth(currentMonth, locale)}
           </h1>
 
-          <p className="typo-headline-m-14 text-timo-black mt-2">
-            {todayLabel}
+          <p className="typo-headline-m-14 text-timo-black mt-2 whitespace-pre-line">
+            {selectedDateLabel}
           </p>
         </div>
 

From ec73b7b80738803137def0dadd33aa510750be07 Mon Sep 17 00:00:00 2001
From: yumin-kim4757 <rladbals0211@gmail.com>
Date: Tue, 14 Jul 2026 06:03:18 +0900
Subject: [PATCH 05/75] =?UTF-8?q?fix(web):=20=ED=86=B5=EA=B3=84=20?=
 =?UTF-8?q?=EC=BA=98=EB=A6=B0=EB=8D=94=20=EC=B6=A9=EB=8F=8C=20=ED=95=B4?=
 =?UTF-8?q?=EA=B2=B0=20=ED=9B=84=20CI=20=EC=98=A4=EB=A5=98=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20(#165)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 통계 캘린더 헤더의 충돌 해결 중 깨진 JSX 구조를 수정했습니다

- 선택 날짜 표시 로직과 sticky 헤더 레이아웃을 함께 유지했습니다

- 변경된 날짜 유틸 경로에 맞게 import를 수정했습니다

- 통계 캘린더 헤더 간격을 margin 대신 gap으로 조정했습니다
---
 .../statistics/_components/StatisticsCalendar.tsx  | 14 +++-----------
 .../_containers/StatisticsCalendarContainer.tsx    |  2 +-
 2 files changed, 4 insertions(+), 12 deletions(-)

diff --git a/apps/timo-web/app/[locale]/(main)/statistics/_components/StatisticsCalendar.tsx b/apps/timo-web/app/[locale]/(main)/statistics/_components/StatisticsCalendar.tsx
index b1209a9d..4851a3f8 100644
--- a/apps/timo-web/app/[locale]/(main)/statistics/_components/StatisticsCalendar.tsx
+++ b/apps/timo-web/app/[locale]/(main)/statistics/_components/StatisticsCalendar.tsx
@@ -83,22 +83,14 @@ export const StatisticsCalendar = ({
   return (
     <section className="min-w-0 flex-1 overflow-x-auto px-14.75 pt-10 pb-13">
       <div className="w-199.5">
-        <div className="mb-17.25">
-          <h1 className="typo-headline-b-30 text-timo-gray-900">
-            {formatStatisticsMonth(currentMonth, locale)}
-          </h1>
-
-          <p className="typo-headline-m-14 text-timo-black mt-2 whitespace-pre-line">
-            {selectedDateLabel}
-          </p>
         <div className="sticky top-0 z-10 bg-white pb-5">
-          <div className="pb-[69px]">
+          <div className="flex flex-col gap-2 pb-[69px]">
             <h1 className="typo-headline-b-30 text-timo-gray-900">
               {formatStatisticsMonth(currentMonth, locale)}
             </h1>
 
-            <p className="typo-headline-m-14 text-timo-black mt-2">
-              {todayLabel}
+            <p className="typo-headline-m-14 text-timo-black whitespace-pre-line">
+              {selectedDateLabel}
             </p>
           </div>
 
diff --git a/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsCalendarContainer.tsx b/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsCalendarContainer.tsx
index 5bd94e17..094e8753 100644
--- a/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsCalendarContainer.tsx
+++ b/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsCalendarContainer.tsx
@@ -2,7 +2,7 @@
 
 import { StatisticsCalendar } from "@/app/[locale]/(main)/statistics/_components/StatisticsCalendar";
 import { useStatisticsCalendarQuery } from "@/app/[locale]/(main)/statistics/_queries/statistics-queries";
-import { formatDateKey } from "@/utils/date";
+import { formatDateKey } from "@/utils/date/date";
 
 interface StatisticsCalendarContainerProps {
   currentMonth: Date;

From f6b33c73ab0a8d9150f673e97618224615ec36b7 Mon Sep 17 00:00:00 2001
From: yumin-kim4757 <rladbals0211@gmail.com>
Date: Tue, 14 Jul 2026 12:31:32 +0900
Subject: [PATCH 06/75] =?UTF-8?q?refactor(web):=20=EB=AA=A9=EB=8D=B0?=
 =?UTF-8?q?=EC=9D=B4=ED=84=B0=20=EC=82=AD=EC=A0=9C=20(#165)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../statistics/_mocks/statistics-calendar.ts  | 98 -------------------
 1 file changed, 98 deletions(-)
 delete mode 100644 apps/timo-web/app/[locale]/(main)/statistics/_mocks/statistics-calendar.ts

diff --git a/apps/timo-web/app/[locale]/(main)/statistics/_mocks/statistics-calendar.ts b/apps/timo-web/app/[locale]/(main)/statistics/_mocks/statistics-calendar.ts
deleted file mode 100644
index 967774dc..00000000
--- a/apps/timo-web/app/[locale]/(main)/statistics/_mocks/statistics-calendar.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-import type {
-  StatisticsCalendarResponse,
-  StatisticsDayDetail,
-  StatisticsMonthSummary,
-} from "@/app/[locale]/(main)/statistics/_types/statistics";
-
-const MOCK_YEAR_MONTH = "2026-07";
-
-const MOCK_COMPLETION_RATES = [
-  0,
-  25,
-  75,
-  100,
-  null,
-  25,
-  100,
-  100,
-  100,
-  75,
-  100,
-  25,
-  null,
-  100,
-  75,
-  0,
-  0,
-  100,
-  25,
-  75,
-  75,
-  25,
-  100,
-  25,
-  0,
-  0,
-  100,
-  75,
-  null,
-  null,
-  null,
-] as const;
-
-const formatMockDate = (day: number) =>
-  `${MOCK_YEAR_MONTH}-${String(day).padStart(2, "0")}`;
-
-export const MOCK_STATISTICS_CALENDAR: StatisticsCalendarResponse = {
-  yearMonth: MOCK_YEAR_MONTH,
-  today: "2026-07-10",
-  days: MOCK_COMPLETION_RATES.map((completionRate, index) => ({
-    date: formatMockDate(index + 1),
-    completionRate,
-  })),
-};
-
-export const MOCK_STATISTICS_MONTH_SUMMARY: StatisticsMonthSummary = {
-  totalRecordMinutes: 1330,
-  activeDayCount: 28,
-  averageRecordedMinutes: 214,
-  completedTodoCount: 80,
-  totalTodoCount: 100,
-};
-
-export const MOCK_STATISTICS_DAY_DETAILS: Record<string, StatisticsDayDetail> =
-  Object.fromEntries(
-    MOCK_COMPLETION_RATES.map((completionRate, index) => {
-      const day = index + 1;
-      const date = formatMockDate(day);
-      const totalRecordMinutes =
-        completionRate === null ? 0 : 90 + completionRate * 2;
-
-      return [
-        date,
-        {
-          date,
-          totalRecordMinutes,
-          todos:
-            completionRate === null
-              ? []
-              : [
-                  {
-                    todoId: day * 2 - 1,
-                    title: "통계 뷰 통합",
-                    actualTimeMinutes: Math.round(totalRecordMinutes * 0.55),
-                    estimatedTimeMinutes: 120,
-                    tagName: "개발",
-                  },
-                  {
-                    todoId: day * 2,
-                    title: "캘린더 선택 상태 점검",
-                    actualTimeMinutes: Math.round(totalRecordMinutes * 0.45),
-                    estimatedTimeMinutes: 90,
-                    tagName: "QA",
-                  },
-                ],
-        },
-      ];
-    }),
-  );

From f7267f37c2a985e111ac4f1e0b342433e7d9c5a8 Mon Sep 17 00:00:00 2001
From: yumin-kim4757 <rladbals0211@gmail.com>
Date: Tue, 14 Jul 2026 16:21:28 +0900
Subject: [PATCH 07/75] =?UTF-8?q?refactor(web):=20container=20=EA=B5=AC?=
 =?UTF-8?q?=EC=A1=B0=20=EB=B6=84=EB=A6=AC=20(#186)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../(with-time-sidebar)/home/_containers/HomeTodoContainer.tsx  | 2 +-
 .../home/_containers/todo-card/HomeDayHeaderContainer.tsx       | 2 +-
 .../today/_containers/TodayDateHeaderContainer.tsx              | 2 +-
 .../components/todo-modal/detail/DetailTodoModalContent.tsx     | 2 --
 .../todo-modal/create/CreateTodoModalContainer.tsx              | 0
 .../todo-modal/detail/DetailTodoModalContainer.tsx              | 0
 6 files changed, 3 insertions(+), 5 deletions(-)
 rename apps/timo-web/{components => containers}/todo-modal/create/CreateTodoModalContainer.tsx (100%)
 rename apps/timo-web/{components => containers}/todo-modal/detail/DetailTodoModalContainer.tsx (100%)

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 527452ca..76be0418 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
@@ -15,7 +15,7 @@ import {
 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 { DetailTodoModalContainer } from "@/components/todo-modal/detail/DetailTodoModalContainer";
+import { DetailTodoModalContainer } from "@/containers/todo-modal/detail/DetailTodoModalContainer";
 import { DndSortableListProvider } from "@/providers/dnd/DndSortableListProvider";
 import { formatDateKey } from "@/utils/date/date";
 import { isTagLabelKey } from "@/utils/todo/tag-label";
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/todo-card/HomeDayHeaderContainer.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/todo-card/HomeDayHeaderContainer.tsx
index d7c51203..39b31ec9 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/todo-card/HomeDayHeaderContainer.tsx
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/todo-card/HomeDayHeaderContainer.tsx
@@ -6,7 +6,7 @@ import type { ApiDayOfWeek } from "@/app/[locale]/(main)/(with-time-sidebar)/hom
 
 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 "@/components/todo-modal/create/CreateTodoModalContainer";
+import { CreateTodoModalContainer } from "@/containers/todo-modal/create/CreateTodoModalContainer";
 import { getToday, parseDateKey } from "@/utils/date/date";
 
 export interface HomeDayHeaderContainerProps {
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayDateHeaderContainer.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayDateHeaderContainer.tsx
index 993ff376..590ce76a 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayDateHeaderContainer.tsx
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayDateHeaderContainer.tsx
@@ -7,7 +7,7 @@ import type { TodoMock } from "@/app/[locale]/(main)/(with-time-sidebar)/today/_
 import { DateInformation } from "@/app/[locale]/(main)/(with-time-sidebar)/_components/DateInformation";
 import { convertDateToDateText } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_utils/date";
 import { useCreateTodoSubmit } from "@/app/[locale]/(main)/(with-time-sidebar)/today/_hooks/todo-modal/use-create-todo-submit";
-import { CreateTodoModalContainer } from "@/components/todo-modal/create/CreateTodoModalContainer";
+import { CreateTodoModalContainer } from "@/containers/todo-modal/create/CreateTodoModalContainer";
 import { getToday } from "@/utils/date/date";
 import { getDayOfWeekKey } from "@/utils/date/get-day-of-week-key";
 
diff --git a/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx b/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
index 05c398ee..c5713833 100644
--- a/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
+++ b/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { DeleteIcon, TrashOnIcon } from "@repo/timo-design-system/icons";
 import { TodoToolbar } from "@repo/timo-design-system/ui";
 import { useTranslations } from "next-intl";
diff --git a/apps/timo-web/components/todo-modal/create/CreateTodoModalContainer.tsx b/apps/timo-web/containers/todo-modal/create/CreateTodoModalContainer.tsx
similarity index 100%
rename from apps/timo-web/components/todo-modal/create/CreateTodoModalContainer.tsx
rename to apps/timo-web/containers/todo-modal/create/CreateTodoModalContainer.tsx
diff --git a/apps/timo-web/components/todo-modal/detail/DetailTodoModalContainer.tsx b/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx
similarity index 100%
rename from apps/timo-web/components/todo-modal/detail/DetailTodoModalContainer.tsx
rename to apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx

From 874f2ba8c4bd26a47098b8e264e54d7be9cc2dcd Mon Sep 17 00:00:00 2001
From: yumin-kim4757 <rladbals0211@gmail.com>
Date: Tue, 14 Jul 2026 17:50:12 +0900
Subject: [PATCH 08/75] =?UTF-8?q?feat(web):=20todo=20=EC=83=81=EC=84=B8=20?=
 =?UTF-8?q?=EC=A1=B0=ED=9A=8C=20api=20=EC=97=B0=EA=B2=B0=20(#186)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../home/_containers/HomeTodoContainer.tsx    |  3 +-
 .../detail/DetailTodoModalContent.tsx         |  6 +--
 .../detail/DetailTodoTaskFields.tsx           |  4 +-
 .../detail/DetailTodoModalContainer.tsx       | 48 ++++++++++++++++---
 .../hooks/todo-modal/use-detail-todo-form.ts  | 38 +++++++++++----
 apps/timo-web/queries/todo/use-detail-todo.ts | 11 +++++
 6 files changed, 88 insertions(+), 22 deletions(-)
 create mode 100644 apps/timo-web/queries/todo/use-detail-todo.ts

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 76be0418..6602d799 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
@@ -92,7 +92,8 @@ export const HomeTodoContainer = () => {
                   return (
                     <DetailTodoModalContainer
                       key={todo.todoId}
-                      todo={todo}
+                      todoId={todo.todoId}
+                      date={dateKey}
                       onTogglePlay={() =>
                         handleTogglePlay(dateKey, todo.todoId)
                       }
diff --git a/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx b/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
index c5713833..aceb1734 100644
--- a/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
+++ b/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
@@ -3,7 +3,7 @@ import { TodoToolbar } from "@repo/timo-design-system/ui";
 import { useTranslations } from "next-intl";
 import { useState } from "react";
 
-import type { Todo } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_types/todo-type";
+import type { TodoDetailResponse } from "@/api/generated/models";
 import type { TimeSelection } from "@repo/timo-design-system/ui";
 
 import { OverlayModal } from "@/components/modal/OverlayModal";
@@ -23,7 +23,7 @@ export interface DetailTodoModalContentProps {
   isOpen: boolean;
   onClose: () => void;
   onExited: () => void;
-  todo: Todo;
+  todo: TodoDetailResponse;
   onTogglePlay: () => void;
   onDelete: () => void;
 }
@@ -139,7 +139,7 @@ export const DetailTodoModalContent = ({
               addTagLabel={tCreateModal("addTag")}
               onSelectTag={detailTodoForm.setSelectedTag}
               onAddTagClick={() => {}}
-              hasMemo={todo.hasMemo}
+              hasMemo={Boolean(todo.memo?.trim())}
               isRepeatActive={detailTodoForm.isRepeatActive}
               repeat={{
                 frequencyHeading: t("repeatFrequencyHeading"),
diff --git a/apps/timo-web/components/todo-modal/detail/DetailTodoTaskFields.tsx b/apps/timo-web/components/todo-modal/detail/DetailTodoTaskFields.tsx
index f0517b7a..f786acbe 100644
--- a/apps/timo-web/components/todo-modal/detail/DetailTodoTaskFields.tsx
+++ b/apps/timo-web/components/todo-modal/detail/DetailTodoTaskFields.tsx
@@ -5,7 +5,7 @@ import {
 } from "@repo/timo-design-system/icons";
 import { Checkbox, PlayButton } from "@repo/timo-design-system/ui";
 
-import type { TodoTimerStatusTypes } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_types/todo-type";
+import type { TodoDetailResponseTimerStatus } from "@/api/generated/models";
 import type { DetailTodoSubtaskInput } from "@/hooks/todo-modal/use-detail-subtask-field";
 import type { KeyboardEvent } from "react";
 
@@ -18,7 +18,7 @@ const resizeTextarea = (element: HTMLTextAreaElement | null) => {
 export interface DetailTodoTaskFieldsProps {
   titleValue: string;
   isCompleted: boolean;
-  timerStatus: TodoTimerStatusTypes;
+  timerStatus: TodoDetailResponseTimerStatus;
   subtaskInputs: DetailTodoSubtaskInput[];
   onTitleChange: (value: string) => void;
   onToggleCompleted: (completed: boolean) => void;
diff --git a/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx b/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx
index 823509d6..839cc485 100644
--- a/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx
+++ b/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx
@@ -2,31 +2,67 @@
 
 import { overlay } from "overlay-kit";
 
-import type { Todo } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_types/todo-type";
+import type { UseDetailTodoParams } from "@/queries/todo/use-detail-todo";
 import type { ReactNode } from "react";
 
 import { DetailTodoModalContent } from "@/components/todo-modal/detail/DetailTodoModalContent";
+import { useDetailTodo } from "@/queries/todo/use-detail-todo";
 
-export interface DetailTodoModalContainerProps {
-  todo: Todo;
+export interface DetailTodoModalContainerProps extends UseDetailTodoParams {
   onTogglePlay: () => void;
   onDelete: () => void;
   children: (openDetailTodoModal: () => void) => ReactNode;
 }
 
+interface DetailTodoModalQueryProps extends UseDetailTodoParams {
+  isOpen: boolean;
+  onClose: () => void;
+  onExited: () => void;
+  onTogglePlay: () => void;
+  onDelete: () => void;
+}
+
+const DetailTodoModalQuery = ({
+  isOpen,
+  onClose,
+  onExited,
+  todoId,
+  date,
+  onTogglePlay,
+  onDelete,
+}: DetailTodoModalQueryProps) => {
+  const { data, isError } = useDetailTodo({ todoId, date });
+  const todo = data?.data;
+
+  if (isError || !todo) return null;
+
+  return (
+    <DetailTodoModalContent
+      isOpen={isOpen}
+      onClose={onClose}
+      onExited={onExited}
+      todo={todo}
+      onTogglePlay={onTogglePlay}
+      onDelete={onDelete}
+    />
+  );
+};
+
 export const DetailTodoModalContainer = ({
-  todo,
+  todoId,
+  date,
   onTogglePlay,
   onDelete,
   children,
 }: DetailTodoModalContainerProps) => {
   const openDetailTodoModal = () => {
     overlay.open(({ isOpen, close, unmount }) => (
-      <DetailTodoModalContent
+      <DetailTodoModalQuery
         isOpen={isOpen}
         onClose={close}
         onExited={unmount}
-        todo={todo}
+        todoId={todoId}
+        date={date}
         onTogglePlay={onTogglePlay}
         onDelete={onDelete}
       />
diff --git a/apps/timo-web/hooks/todo-modal/use-detail-todo-form.ts b/apps/timo-web/hooks/todo-modal/use-detail-todo-form.ts
index 9722b7a5..7fe0a20a 100644
--- a/apps/timo-web/hooks/todo-modal/use-detail-todo-form.ts
+++ b/apps/timo-web/hooks/todo-modal/use-detail-todo-form.ts
@@ -2,7 +2,7 @@ import { TODO_ICON_VALUES } from "@repo/timo-design-system/ui";
 import { useTranslations } from "next-intl";
 import { useController, useForm } from "react-hook-form";
 
-import type { Todo } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_types/todo-type";
+import type { TodoDetailResponse } from "@/api/generated/models";
 import type {
   PriorityLevel,
   RepeatFrequency,
@@ -12,6 +12,7 @@ import type {
 } from "@repo/timo-design-system/ui";
 
 import { useDetailSubtaskField } from "@/hooks/todo-modal/use-detail-subtask-field";
+import { parseDateKey } from "@/utils/date/date";
 import { isTagLabelKey } from "@/utils/todo/tag-label";
 import {
   TITLE_MAX_WEIGHTED_LENGTH,
@@ -37,6 +38,19 @@ interface DetailTodoFormValues {
 const isTodoIconValue = (icon: string | null): icon is TodoIconValue =>
   icon !== null && (TODO_ICON_VALUES as readonly string[]).includes(icon);
 
+const isPriorityLevel = (
+  priority: string | undefined,
+): priority is PriorityLevel =>
+  priority === "VERY_HIGH" ||
+  priority === "HIGH" ||
+  priority === "MEDIUM" ||
+  priority === "LOW";
+
+const isRepeatFrequency = (
+  repeatType: string | undefined,
+): repeatType is RepeatFrequency =>
+  repeatType === "DAILY" || repeatType === "WEEKLY" || repeatType === "MONTHLY";
+
 export const DETAIL_TODO_TIME_OPTIONS: TimeOption[] = [
   { minute: 15, value: "15", unit: "min" },
   { minute: 30, value: "30", unit: "min" },
@@ -56,32 +70,36 @@ export const DETAIL_TODO_WEEKDAY_IDS = [
 ] as const;
 
 export interface UseDetailTodoFormParams {
-  todo: Todo;
+  todo: TodoDetailResponse;
 }
 
 export const useDetailTodoForm = ({ todo }: UseDetailTodoFormParams) => {
   const tCommon = useTranslations("Common");
 
-  const durationText = convertDurationToTimeText(todo.durationSeconds);
+  const durationText = convertDurationToTimeText(todo.durationSeconds ?? 0);
   const todoTagName = todo.tag?.name ?? "";
   const todoIcon = todo.icon ?? null;
+  const todoDate = parseDateKey(todo.date) ?? new Date();
+  const repeatType = isRepeatFrequency(todo.repeat.type)
+    ? todo.repeat.type
+    : "DAILY";
   const tagLabel = isTagLabelKey(todoTagName)
     ? tCommon(`tag.${todoTagName}`)
     : todoTagName;
 
   const { control, handleSubmit, formState } = useForm<DetailTodoFormValues>({
     defaultValues: {
-      date: new Date(2026, 6, 1),
+      date: todoDate,
       time: durationText,
-      priority: todo.priority,
+      priority: isPriorityLevel(todo.priority) ? todo.priority : "MEDIUM",
       selectedTag: tagLabel,
-      isRepeatActive: todo.isRepeated,
-      repeatFrequency: "DAILY",
-      selectedWeekdayIds: [],
-      repeatDay: "",
+      isRepeatActive: todo.repeat.type !== "NONE",
+      repeatFrequency: repeatType,
+      selectedWeekdayIds: todo.repeat.weekdays ?? [],
+      repeatDay: todo.repeat.dayOfMonth?.toString() ?? "",
       isCompleted: todo.completed,
       title: todo.title,
-      memo: "",
+      memo: todo.memo ?? "",
       icon: isTodoIconValue(todoIcon) ? todoIcon : null,
     },
   });
diff --git a/apps/timo-web/queries/todo/use-detail-todo.ts b/apps/timo-web/queries/todo/use-detail-todo.ts
new file mode 100644
index 00000000..0f936fb7
--- /dev/null
+++ b/apps/timo-web/queries/todo/use-detail-todo.ts
@@ -0,0 +1,11 @@
+"use client";
+
+import { useGetTodoDetail } from "@/api/generated/endpoints/todo/todo";
+
+export interface UseDetailTodoParams {
+  todoId: number;
+  date: string;
+}
+
+export const useDetailTodo = ({ todoId, date }: UseDetailTodoParams) =>
+  useGetTodoDetail(todoId, { date });

From b0924f5e1eb5d6bfc9f96dde7e9045c975607d78 Mon Sep 17 00:00:00 2001
From: yumin-kim4757 <rladbals0211@gmail.com>
Date: Tue, 14 Jul 2026 17:58:54 +0900
Subject: [PATCH 09/75] =?UTF-8?q?fix(web):=20=ED=88=AC=EB=91=90=20?=
 =?UTF-8?q?=EC=83=81=EC=84=B8=20=EB=AA=A8=EB=8B=AC=20=EB=82=A0=EC=A7=9C=20?=
 =?UTF-8?q?=EC=9A=94=EC=9D=BC=20=ED=91=9C=EC=8B=9C=20=EC=88=98=EC=A0=95=20?=
 =?UTF-8?q?(#186)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../todo-modal/detail/DetailTodoModalContent.tsx   | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx b/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
index aceb1734..12806525 100644
--- a/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
+++ b/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
@@ -18,6 +18,12 @@ import {
 import { formatShortDateLabel } from "@/utils/date/date";
 
 const DETAIL_TODO_MEMO_MAX_LENGTH = 300;
+type DetailTodoWeekdayId = (typeof DETAIL_TODO_WEEKDAY_IDS)[number];
+
+const isDetailTodoWeekdayId = (
+  dayOfWeek: string,
+): dayOfWeek is DetailTodoWeekdayId =>
+  (DETAIL_TODO_WEEKDAY_IDS as readonly string[]).includes(dayOfWeek);
 
 export interface DetailTodoModalContentProps {
   isOpen: boolean;
@@ -42,6 +48,10 @@ export const DetailTodoModalContent = ({
   const detailTodoForm = useDetailTodoForm({ todo });
   const [selectedTime, setSelectedTime] = useState<TimeSelection>();
   const [isIconPanelOpen, setIsIconPanelOpen] = useState(false);
+  const dateNumber = detailTodoForm.date.getDate();
+  const dayOfWeek = isDetailTodoWeekdayId(todo.dayOfWeek)
+    ? todo.dayOfWeek
+    : "MON";
   const weekdays = DETAIL_TODO_WEEKDAY_IDS.map((weekdayId) => ({
     id: weekdayId,
     label: tCommon(`weekday.${weekdayId}`),
@@ -79,9 +89,9 @@ export const DetailTodoModalContent = ({
       <div className="flex w-full flex-col gap-3">
         <div className="flex w-full flex-col gap-2">
           <div className="flex flex-col">
-            <p className="typo-headline-b-30 text-timo-black">22</p>
+            <p className="typo-headline-b-30 text-timo-black">{dateNumber}</p>
             <p className="typo-body-m-12 text-timo-gray-700">
-              {tCommon("weekday.MON")}
+              {tCommon(`weekday.${dayOfWeek}`)}
             </p>
           </div>
 

From e11cf4fe463084daa99e26be9dc509fc4ba0db01 Mon Sep 17 00:00:00 2001
From: yumin-kim4757 <rladbals0211@gmail.com>
Date: Tue, 14 Jul 2026 18:23:24 +0900
Subject: [PATCH 10/75] =?UTF-8?q?feat(web):=20todo=20=EC=82=AD=EC=A0=9C=20?=
 =?UTF-8?q?api=20=EC=97=B0=EA=B2=B0=20(#186)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/DetailTodoModalContent.tsx         |  1 -
 .../detail/DetailTodoModalContainer.tsx       | 13 ++++++-
 .../todo-modal/use-delete-todo-submit.ts      | 36 +++++++++++++++++++
 3 files changed, 48 insertions(+), 2 deletions(-)
 create mode 100644 apps/timo-web/hooks/todo-modal/use-delete-todo-submit.ts

diff --git a/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx b/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
index 12806525..8ae51ecb 100644
--- a/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
+++ b/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
@@ -64,7 +64,6 @@ export const DetailTodoModalContent = ({
 
   const handleDelete = () => {
     onDelete();
-    onClose();
   };
 
   const handleSelectTime = (nextTime: TimeSelection) => {
diff --git a/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx b/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx
index 839cc485..42faeacd 100644
--- a/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx
+++ b/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx
@@ -6,6 +6,7 @@ import type { UseDetailTodoParams } from "@/queries/todo/use-detail-todo";
 import type { ReactNode } from "react";
 
 import { DetailTodoModalContent } from "@/components/todo-modal/detail/DetailTodoModalContent";
+import { useDeleteTodoSubmit } from "@/hooks/todo-modal/use-delete-todo-submit";
 import { useDetailTodo } from "@/queries/todo/use-detail-todo";
 
 export interface DetailTodoModalContainerProps extends UseDetailTodoParams {
@@ -32,10 +33,20 @@ const DetailTodoModalQuery = ({
   onDelete,
 }: DetailTodoModalQueryProps) => {
   const { data, isError } = useDetailTodo({ todoId, date });
+  const { handleDelete } = useDeleteTodoSubmit();
   const todo = data?.data;
 
   if (isError || !todo) return null;
 
+  const handleDeleteTodo = () => {
+    handleDelete(todoId, {
+      onSuccess: () => {
+        onDelete();
+        onClose();
+      },
+    });
+  };
+
   return (
     <DetailTodoModalContent
       isOpen={isOpen}
@@ -43,7 +54,7 @@ const DetailTodoModalQuery = ({
       onExited={onExited}
       todo={todo}
       onTogglePlay={onTogglePlay}
-      onDelete={onDelete}
+      onDelete={handleDeleteTodo}
     />
   );
 };
diff --git a/apps/timo-web/hooks/todo-modal/use-delete-todo-submit.ts b/apps/timo-web/hooks/todo-modal/use-delete-todo-submit.ts
new file mode 100644
index 00000000..ac141940
--- /dev/null
+++ b/apps/timo-web/hooks/todo-modal/use-delete-todo-submit.ts
@@ -0,0 +1,36 @@
+"use client";
+
+import { useQueryClient } from "@tanstack/react-query";
+
+import { getGetHomeQueryKey } from "@/api/generated/endpoints/home/home";
+import { useDeleteTodo } from "@/api/generated/endpoints/todo/todo";
+
+export interface DeleteTodoSubmitHandlers {
+  onSuccess: () => void;
+  onError?: () => void;
+}
+
+export const useDeleteTodoSubmit = () => {
+  const { mutate: deleteTodo } = useDeleteTodo();
+  const queryClient = useQueryClient();
+
+  const handleDelete = (
+    todoId: number,
+    { onSuccess, onError }: DeleteTodoSubmitHandlers,
+  ) => {
+    deleteTodo(
+      { todoId },
+      {
+        onSuccess: () => {
+          queryClient.invalidateQueries({ queryKey: getGetHomeQueryKey() });
+          onSuccess();
+        },
+        onError,
+      },
+    );
+  };
+
+  return {
+    handleDelete,
+  };
+};

From 6920a54d2499bc41c1828f8903dcad6d3c2b4c6d Mon Sep 17 00:00:00 2001
From: yumin-kim4757 <rladbals0211@gmail.com>
Date: Tue, 14 Jul 2026 19:10:51 +0900
Subject: [PATCH 11/75] =?UTF-8?q?fix(web):=20=ED=94=8C=EB=A0=88=EC=9D=B4?=
 =?UTF-8?q?=20=EB=B2=84=ED=8A=BC=20=ED=81=B4=EB=A6=AD=20=EC=8B=9C=20?=
 =?UTF-8?q?=EC=83=81=EC=84=B8=20=EB=AA=A8=EB=8B=AC=20=EC=97=B4=EB=A6=BC=20?=
 =?UTF-8?q?=EB=B0=A9=EC=A7=80=20(#186)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../home/_components/todo-card/HomeTodoCard.tsx  | 16 ++++++++++++++--
 .../components/button/play-button/PlayButton.tsx | 10 +++++++---
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-card/HomeTodoCard.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-card/HomeTodoCard.tsx
index f0497c0b..b6f5dbcd 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-card/HomeTodoCard.tsx
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-card/HomeTodoCard.tsx
@@ -22,7 +22,7 @@ import type {
   TodoPriorityTypes,
   TodoTimerStatusTypes,
 } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_types/todo-type";
-import type { KeyboardEvent, MouseEvent } from "react";
+import type { KeyboardEvent, MouseEvent, PointerEvent } from "react";
 
 import { convertDurationToTimeText } from "@/utils/todo/todo-time";
 
@@ -103,6 +103,17 @@ export const HomeTodoCard = ({
     onClickTodo();
   };
 
+  const stopInteractiveEvent = (
+    event: MouseEvent<HTMLButtonElement> | PointerEvent<HTMLButtonElement>,
+  ) => {
+    event.stopPropagation();
+  };
+
+  const handlePlayClick = (event: MouseEvent<HTMLButtonElement>) => {
+    stopInteractiveEvent(event);
+    onTogglePlay();
+  };
+
   const titleRow = (
     <div className="flex w-full items-center justify-between gap-2">
       <div className="flex min-w-0 flex-1 items-center gap-1">
@@ -120,7 +131,8 @@ export const HomeTodoCard = ({
         variant={isRunning ? "stop" : "play"}
         size="sm"
         disabled={isCompleted}
-        onClick={onTogglePlay}
+        onClick={handlePlayClick}
+        onPointerDown={stopInteractiveEvent}
       >
         {isCompleted ? (
           <PlayDisabledIcon />
diff --git a/packages/timo-design-system/src/components/button/play-button/PlayButton.tsx b/packages/timo-design-system/src/components/button/play-button/PlayButton.tsx
index d0af9e52..67097b3c 100644
--- a/packages/timo-design-system/src/components/button/play-button/PlayButton.tsx
+++ b/packages/timo-design-system/src/components/button/play-button/PlayButton.tsx
@@ -1,7 +1,8 @@
-import { ReactNode } from "react";
-
 import { cn } from "../../../lib";
 
+import type { MouseEventHandler, PointerEventHandler, ReactNode } from "react";
+
+
 export type PlayButtonVariant = "play" | "stop";
 export type PlayButtonSize = "sm" | "lg";
 
@@ -9,7 +10,8 @@ export interface PlayButtonProps {
   variant: PlayButtonVariant;
   size?: PlayButtonSize;
   disabled?: boolean;
-  onClick?: () => void;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  onPointerDown?: PointerEventHandler<HTMLButtonElement>;
   children?: ReactNode;
   ariaLabel?: string;
 }
@@ -32,6 +34,7 @@ export const PlayButton = ({
   size = "sm",
   disabled = false,
   onClick,
+  onPointerDown,
   children,
   ariaLabel,
 }: PlayButtonProps) => {
@@ -39,6 +42,7 @@ export const PlayButton = ({
     <button
       type="button"
       onClick={onClick}
+      onPointerDown={onPointerDown}
       disabled={disabled}
       aria-label={
         ariaLabel ??

From d6779d510ea71deb544fe36d3e8f26d1803a937b Mon Sep 17 00:00:00 2001
From: yumin-kim4757 <rladbals0211@gmail.com>
Date: Tue, 14 Jul 2026 20:00:18 +0900
Subject: [PATCH 12/75] =?UTF-8?q?fix(web):=20=EC=83=81=EC=84=B8=20?=
 =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=ED=83=9C=EA=B7=B8=20=EB=AA=A9=EB=A1=9D=20?=
 =?UTF-8?q?=EB=B0=8F=20=EB=8B=A4=EA=B5=AD=EC=96=B4=20=ED=91=9C=EC=8B=9C=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20(#186)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../home/_containers/HomeTodoContainer.tsx    |  9 ++++--
 .../detail/DetailTodoModalContent.tsx         | 10 ++++---
 .../hooks/todo-modal/use-detail-todo-form.ts  | 24 +++++----------
 .../hooks/todo-modal/use-tag-field.tsx        | 30 ++++++++++++-------
 apps/timo-web/messages/en.json                |  4 +--
 apps/timo-web/utils/todo/tag-label.ts         | 21 +++++++++++++
 6 files changed, 62 insertions(+), 36 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 6602d799..46e2ada7 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
@@ -18,7 +18,7 @@ import { useHomeView } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_que
 import { DetailTodoModalContainer } from "@/containers/todo-modal/detail/DetailTodoModalContainer";
 import { DndSortableListProvider } from "@/providers/dnd/DndSortableListProvider";
 import { formatDateKey } from "@/utils/date/date";
-import { isTagLabelKey } from "@/utils/todo/tag-label";
+import { getTagLabelKey } from "@/utils/todo/tag-label";
 
 export const HomeTodoContainer = () => {
   const tCommon = useTranslations("Common");
@@ -88,6 +88,9 @@ 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 tagLabelKey = todo.tag
+                    ? getTagLabelKey(todo.tag.name)
+                    : undefined;
 
                   return (
                     <DetailTodoModalContainer
@@ -108,8 +111,8 @@ export const HomeTodoContainer = () => {
                           priority={todo.priority}
                           tagName={
                             todo.tag &&
-                            (isTagLabelKey(todo.tag.name)
-                              ? tCommon(`tag.${todo.tag.name}`)
+                            (tagLabelKey
+                              ? tCommon(`tag.${tagLabelKey}`)
                               : todo.tag.name)
                           }
                           hasMemo={todo.hasMemo}
diff --git a/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx b/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
index 8ae51ecb..0dd009b9 100644
--- a/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
+++ b/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
@@ -142,11 +142,13 @@ export const DetailTodoModalContent = ({
                 LOW: tCommon("priority.low"),
               }}
               onSelectPriority={detailTodoForm.setPriority}
-              tagLabel={detailTodoForm.selectedTag}
-              tags={[detailTodoForm.tagLabel]}
-              selectedTag={detailTodoForm.selectedTag}
+              tagLabel={
+                detailTodoForm.selectedTagLabel ?? tCreateModal("tagLabel")
+              }
+              tags={detailTodoForm.tagLabels}
+              selectedTag={detailTodoForm.selectedTagLabel}
               addTagLabel={tCreateModal("addTag")}
-              onSelectTag={detailTodoForm.setSelectedTag}
+              onSelectTag={detailTodoForm.handleSelectTag}
               onAddTagClick={() => {}}
               hasMemo={Boolean(todo.memo?.trim())}
               isRepeatActive={detailTodoForm.isRepeatActive}
diff --git a/apps/timo-web/hooks/todo-modal/use-detail-todo-form.ts b/apps/timo-web/hooks/todo-modal/use-detail-todo-form.ts
index 7fe0a20a..74e127bf 100644
--- a/apps/timo-web/hooks/todo-modal/use-detail-todo-form.ts
+++ b/apps/timo-web/hooks/todo-modal/use-detail-todo-form.ts
@@ -1,5 +1,4 @@
 import { TODO_ICON_VALUES } from "@repo/timo-design-system/ui";
-import { useTranslations } from "next-intl";
 import { useController, useForm } from "react-hook-form";
 
 import type { TodoDetailResponse } from "@/api/generated/models";
@@ -12,8 +11,8 @@ import type {
 } from "@repo/timo-design-system/ui";
 
 import { useDetailSubtaskField } from "@/hooks/todo-modal/use-detail-subtask-field";
+import { useTagField } from "@/hooks/todo-modal/use-tag-field";
 import { parseDateKey } from "@/utils/date/date";
-import { isTagLabelKey } from "@/utils/todo/tag-label";
 import {
   TITLE_MAX_WEIGHTED_LENGTH,
   truncateToWeightedLength,
@@ -24,7 +23,7 @@ interface DetailTodoFormValues {
   date: Date;
   time: string;
   priority: PriorityLevel;
-  selectedTag: string;
+  tagId: number | null;
   isRepeatActive: boolean;
   repeatFrequency: RepeatFrequency;
   selectedWeekdayIds: string[];
@@ -74,25 +73,19 @@ export interface UseDetailTodoFormParams {
 }
 
 export const useDetailTodoForm = ({ todo }: UseDetailTodoFormParams) => {
-  const tCommon = useTranslations("Common");
-
   const durationText = convertDurationToTimeText(todo.durationSeconds ?? 0);
-  const todoTagName = todo.tag?.name ?? "";
   const todoIcon = todo.icon ?? null;
   const todoDate = parseDateKey(todo.date) ?? new Date();
   const repeatType = isRepeatFrequency(todo.repeat.type)
     ? todo.repeat.type
     : "DAILY";
-  const tagLabel = isTagLabelKey(todoTagName)
-    ? tCommon(`tag.${todoTagName}`)
-    : todoTagName;
 
   const { control, handleSubmit, formState } = useForm<DetailTodoFormValues>({
     defaultValues: {
       date: todoDate,
       time: durationText,
       priority: isPriorityLevel(todo.priority) ? todo.priority : "MEDIUM",
-      selectedTag: tagLabel,
+      tagId: todo.tag?.tagId ?? null,
       isRepeatActive: todo.repeat.type !== "NONE",
       repeatFrequency: repeatType,
       selectedWeekdayIds: todo.repeat.weekdays ?? [],
@@ -110,10 +103,6 @@ export const useDetailTodoForm = ({ todo }: UseDetailTodoFormParams) => {
     name: "priority",
     control,
   });
-  const { field: selectedTagField } = useController({
-    name: "selectedTag",
-    control,
-  });
   const { field: isRepeatActiveField } = useController({
     name: "isRepeatActive",
     control,
@@ -139,6 +128,7 @@ export const useDetailTodoForm = ({ todo }: UseDetailTodoFormParams) => {
   const { field: iconField } = useController({ name: "icon", control });
 
   const subtaskField = useDetailSubtaskField({ subtasks: todo.subtasks });
+  const tagField = useTagField({ control });
 
   const selectIcon = (nextIcon: TodoIconValue) => iconField.onChange(nextIcon);
   const removeIcon = () => iconField.onChange(null);
@@ -181,9 +171,9 @@ export const useDetailTodoForm = ({ todo }: UseDetailTodoFormParams) => {
     setTime: timeField.onChange,
     priority: priorityField.value,
     setPriority: priorityField.onChange,
-    tagLabel,
-    selectedTag: selectedTagField.value,
-    setSelectedTag: selectedTagField.onChange,
+    tagLabels: tagField.tagLabels,
+    selectedTagLabel: tagField.selectedTagLabel,
+    handleSelectTag: tagField.handleSelectTag,
     isRepeatActive: isRepeatActiveField.value,
     repeatFrequency: repeatFrequencyField.value,
     selectedWeekdayIds: selectedWeekdayIdsField.value,
diff --git a/apps/timo-web/hooks/todo-modal/use-tag-field.tsx b/apps/timo-web/hooks/todo-modal/use-tag-field.tsx
index 388935b9..ffe89d91 100644
--- a/apps/timo-web/hooks/todo-modal/use-tag-field.tsx
+++ b/apps/timo-web/hooks/todo-modal/use-tag-field.tsx
@@ -1,23 +1,29 @@
+import { useTranslations } from "next-intl";
 import { overlay } from "overlay-kit";
 import { useState } from "react";
 import { useController } from "react-hook-form";
 
-import type { CreateTodoRequest } from "@/api/common/todo-schema";
-import type { Control } from "react-hook-form";
+import type { Control, FieldValues, Path } from "react-hook-form";
 
 import { tagCreateDataSchema } from "@/api/common/tag-schema";
 import { CreateTagModalContainer } from "@/components/tag/CreateTagModalContainer";
 import { useCreateTag } from "@/queries/tag/use-create-tag";
 import { useTags } from "@/queries/tag/use-tags";
+import { getTagLabelKey } from "@/utils/todo/tag-label";
 
 const MAX_TAG_COUNT = 8;
 
-export interface UseTagFieldParams {
-  control: Control<CreateTodoRequest>;
+export interface UseTagFieldParams<TFieldValues extends FieldValues> {
+  control: Control<TFieldValues>;
+  name?: Path<TFieldValues>;
 }
 
-export const useTagField = ({ control }: UseTagFieldParams) => {
-  const { field } = useController({ name: "tagId", control });
+export const useTagField = <TFieldValues extends FieldValues>({
+  control,
+  name = "tagId" as Path<TFieldValues>,
+}: UseTagFieldParams<TFieldValues>) => {
+  const tCommon = useTranslations("Common");
+  const { field } = useController({ name, control });
   const [isTagLimitToastOpen, setIsTagLimitToastOpen] =
     useState<boolean>(false);
   const [isCreateTagErrorToastOpen, setIsCreateTagErrorToastOpen] =
@@ -26,10 +32,14 @@ export const useTagField = ({ control }: UseTagFieldParams) => {
   const tagsQuery = useTags();
   const { mutate: createTag } = useCreateTag();
 
-  const tagOptions = (tagsQuery.data?.tags ?? []).map((tag) => ({
-    id: tag.tagId,
-    label: tag.name,
-  }));
+  const tagOptions = (tagsQuery.data?.tags ?? []).map((tag) => {
+    const tagLabelKey = getTagLabelKey(tag.name);
+
+    return {
+      id: tag.tagId,
+      label: tagLabelKey ? tCommon(`tag.${tagLabelKey}`) : tag.name,
+    };
+  });
   const tagLabels = tagOptions.map((option) => option.label);
   const selectedTagOption = tagOptions.find(
     (option) => option.id === field.value,
diff --git a/apps/timo-web/messages/en.json b/apps/timo-web/messages/en.json
index a08e096d..793b1d74 100644
--- a/apps/timo-web/messages/en.json
+++ b/apps/timo-web/messages/en.json
@@ -17,7 +17,7 @@
       "SAT": "Saturday"
     },
     "tag": {
-      "dailyLife": "Daily life",
+      "dailyLife": "Daily",
       "work": "Work",
       "exercise": "Exercise",
       "assignment": "Assignment",
@@ -46,7 +46,7 @@
       "dateLabel": "Date",
       "timeLabel": "Time",
       "tagLabel": "Tag",
-      "addTag": "Add",
+      "addTag": "Add tag",
       "create": "Create",
       "repeatDaily": "Daily",
       "repeatWeekly": "Weekly",
diff --git a/apps/timo-web/utils/todo/tag-label.ts b/apps/timo-web/utils/todo/tag-label.ts
index 6e643a2b..9a7e0905 100644
--- a/apps/timo-web/utils/todo/tag-label.ts
+++ b/apps/timo-web/utils/todo/tag-label.ts
@@ -8,5 +8,26 @@ export const TAG_LABEL_KEYS = [
 
 export type TagLabelKey = (typeof TAG_LABEL_KEYS)[number];
 
+const TAG_LABEL_KEY_BY_NAME: Record<string, TagLabelKey> = {
+  dailyLife: "dailyLife",
+  work: "work",
+  exercise: "exercise",
+  assignment: "assignment",
+  additional: "additional",
+  Daily: "dailyLife",
+  Work: "work",
+  Exercise: "exercise",
+  Assignment: "assignment",
+  Additional: "additional",
+  일상: "dailyLife",
+  업무: "work",
+  운동: "exercise",
+  과제: "assignment",
+  기타: "additional",
+};
+
 export const isTagLabelKey = (value: string): value is TagLabelKey =>
   (TAG_LABEL_KEYS as readonly string[]).includes(value);
+
+export const getTagLabelKey = (value: string): TagLabelKey | undefined =>
+  TAG_LABEL_KEY_BY_NAME[value];

From 9a82258bf2820958205955b2bd136732114e9db1 Mon Sep 17 00:00:00 2001
From: yumin-kim4757 <rladbals0211@gmail.com>
Date: Tue, 14 Jul 2026 20:43:31 +0900
Subject: [PATCH 13/75] =?UTF-8?q?feat(web):=20=EC=83=81=EC=84=B8=20?=
 =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EC=A0=80=EC=9E=A5=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EB=B0=8F=20=EC=88=98=EC=A0=95=20API=20=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/DetailTodoModalContent.tsx         | 20 +++++-
 .../detail/DetailTodoModalContainer.tsx       | 39 ++++++++---
 .../hooks/todo-modal/use-detail-todo-form.ts  | 64 ++++++++++++++++++-
 .../hooks/todo-modal/use-tag-field.tsx        | 17 ++++-
 .../todo-modal/use-update-todo-submit.ts      | 47 ++++++++++++++
 apps/timo-web/messages/en.json                |  2 +
 apps/timo-web/messages/ko.json                |  2 +
 apps/timo-web/utils/todo/todo-time.ts         | 25 ++++++++
 8 files changed, 201 insertions(+), 15 deletions(-)
 create mode 100644 apps/timo-web/hooks/todo-modal/use-update-todo-submit.ts

diff --git a/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx b/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
index 0dd009b9..3d7ba62c 100644
--- a/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
+++ b/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
@@ -1,9 +1,12 @@
 import { DeleteIcon, TrashOnIcon } from "@repo/timo-design-system/icons";
-import { TodoToolbar } from "@repo/timo-design-system/ui";
+import { CreateButton, TodoToolbar } from "@repo/timo-design-system/ui";
 import { useTranslations } from "next-intl";
 import { useState } from "react";
 
-import type { TodoDetailResponse } from "@/api/generated/models";
+import type {
+  TodoDetailResponse,
+  TodoUpdateRequest,
+} from "@/api/generated/models";
 import type { TimeSelection } from "@repo/timo-design-system/ui";
 
 import { OverlayModal } from "@/components/modal/OverlayModal";
@@ -32,6 +35,7 @@ export interface DetailTodoModalContentProps {
   todo: TodoDetailResponse;
   onTogglePlay: () => void;
   onDelete: () => void;
+  onSubmit: (data: TodoUpdateRequest) => void;
 }
 
 export const DetailTodoModalContent = ({
@@ -41,6 +45,7 @@ export const DetailTodoModalContent = ({
   todo,
   onTogglePlay,
   onDelete,
+  onSubmit,
 }: DetailTodoModalContentProps) => {
   const t = useTranslations("Home.detailModal");
   const tCreateModal = useTranslations("Home.createModal");
@@ -71,6 +76,10 @@ export const DetailTodoModalContent = ({
     detailTodoForm.selectTime(nextTime);
   };
 
+  const handleSubmit = () => {
+    onSubmit(detailTodoForm.buildUpdateRequest());
+  };
+
   return (
     <OverlayModal
       isOpen={isOpen}
@@ -79,7 +88,12 @@ export const DetailTodoModalContent = ({
       ariaLabel={t("ariaLabel")}
       className="w-124 items-start px-7.5 py-5"
     >
-      <div className="flex w-full justify-end">
+      <div className="flex w-full justify-between">
+        <CreateButton
+          label={t("save")}
+          disabled={!detailTodoForm.title.trim()}
+          onClick={handleSubmit}
+        />
         <button type="button" aria-label={tCommon("close")} onClick={onClose}>
           <DeleteIcon />
         </button>
diff --git a/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx b/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx
index 42faeacd..97479a35 100644
--- a/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx
+++ b/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx
@@ -1,12 +1,16 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { overlay } from "overlay-kit";
 
+import type { TodoUpdateRequest } from "@/api/generated/models";
 import type { UseDetailTodoParams } from "@/queries/todo/use-detail-todo";
 import type { ReactNode } from "react";
 
+import { AnimatedToast } from "@/components/toast/AnimatedToast";
 import { DetailTodoModalContent } from "@/components/todo-modal/detail/DetailTodoModalContent";
 import { useDeleteTodoSubmit } from "@/hooks/todo-modal/use-delete-todo-submit";
+import { useUpdateTodoSubmit } from "@/hooks/todo-modal/use-update-todo-submit";
 import { useDetailTodo } from "@/queries/todo/use-detail-todo";
 
 export interface DetailTodoModalContainerProps extends UseDetailTodoParams {
@@ -32,8 +36,10 @@ const DetailTodoModalQuery = ({
   onTogglePlay,
   onDelete,
 }: DetailTodoModalQueryProps) => {
+  const tToast = useTranslations("Toast");
   const { data, isError } = useDetailTodo({ todoId, date });
   const { handleDelete } = useDeleteTodoSubmit();
+  const updateTodoSubmit = useUpdateTodoSubmit();
   const todo = data?.data;
 
   if (isError || !todo) return null;
@@ -47,15 +53,32 @@ const DetailTodoModalQuery = ({
     });
   };
 
+  const handleUpdateTodo = (updateData: TodoUpdateRequest) => {
+    updateTodoSubmit.handleUpdate({
+      todoId,
+      date,
+      data: updateData,
+    });
+  };
+
   return (
-    <DetailTodoModalContent
-      isOpen={isOpen}
-      onClose={onClose}
-      onExited={onExited}
-      todo={todo}
-      onTogglePlay={onTogglePlay}
-      onDelete={handleDeleteTodo}
-    />
+    <>
+      <DetailTodoModalContent
+        isOpen={isOpen}
+        onClose={onClose}
+        onExited={onExited}
+        todo={todo}
+        onTogglePlay={onTogglePlay}
+        onDelete={handleDeleteTodo}
+        onSubmit={handleUpdateTodo}
+      />
+
+      <AnimatedToast
+        isOpen={updateTodoSubmit.isErrorToastOpen}
+        onClose={updateTodoSubmit.closeErrorToast}
+        message={tToast("todoUpdateFailed")}
+      />
+    </>
   );
 };
 
diff --git a/apps/timo-web/hooks/todo-modal/use-detail-todo-form.ts b/apps/timo-web/hooks/todo-modal/use-detail-todo-form.ts
index 74e127bf..ae6228eb 100644
--- a/apps/timo-web/hooks/todo-modal/use-detail-todo-form.ts
+++ b/apps/timo-web/hooks/todo-modal/use-detail-todo-form.ts
@@ -1,7 +1,11 @@
 import { TODO_ICON_VALUES } from "@repo/timo-design-system/ui";
 import { useController, useForm } from "react-hook-form";
 
-import type { TodoDetailResponse } from "@/api/generated/models";
+import type {
+  TodoDetailResponse,
+  TodoUpdateRequest,
+  TodoUpdateRequestRepeatWeekdaysItem,
+} from "@/api/generated/models";
 import type {
   PriorityLevel,
   RepeatFrequency,
@@ -12,12 +16,15 @@ import type {
 
 import { useDetailSubtaskField } from "@/hooks/todo-modal/use-detail-subtask-field";
 import { useTagField } from "@/hooks/todo-modal/use-tag-field";
-import { parseDateKey } from "@/utils/date/date";
+import { formatDateKey, parseDateKey } from "@/utils/date/date";
 import {
   TITLE_MAX_WEIGHTED_LENGTH,
   truncateToWeightedLength,
 } from "@/utils/todo/text-length";
-import { convertDurationToTimeText } from "@/utils/todo/todo-time";
+import {
+  convertDurationToTimeText,
+  convertTimeTextToDurationSeconds,
+} from "@/utils/todo/todo-time";
 
 interface DetailTodoFormValues {
   date: Date;
@@ -50,6 +57,11 @@ const isRepeatFrequency = (
 ): repeatType is RepeatFrequency =>
   repeatType === "DAILY" || repeatType === "WEEKLY" || repeatType === "MONTHLY";
 
+const isUpdateRepeatWeekday = (
+  weekdayId: string,
+): weekdayId is TodoUpdateRequestRepeatWeekdaysItem =>
+  (DETAIL_TODO_WEEKDAY_IDS as readonly string[]).includes(weekdayId);
+
 export const DETAIL_TODO_TIME_OPTIONS: TimeOption[] = [
   { minute: 15, value: "15", unit: "min" },
   { minute: 30, value: "30", unit: "min" },
@@ -164,6 +176,51 @@ export const useDetailTodoForm = ({ todo }: UseDetailTodoFormParams) => {
     );
   };
 
+  const buildUpdateRequest = (): TodoUpdateRequest => {
+    const durationSeconds = convertTimeTextToDurationSeconds(timeField.value);
+    const repeatType = isRepeatActiveField.value
+      ? repeatFrequencyField.value
+      : "NONE";
+    const repeatDayOfMonth = Number(repeatDayField.value);
+    const selectedTagId =
+      typeof tagField.selectedTagId === "number"
+        ? tagField.selectedTagId
+        : undefined;
+    const repeatWeekdays = selectedWeekdayIdsField.value.filter(
+      isUpdateRepeatWeekday,
+    );
+    const subtasks = subtaskField.subtaskInputs
+      .map((subtask) => ({
+        subtaskId: subtask.subtaskId ?? undefined,
+        content: subtask.value.trim(),
+        completed: subtask.completed,
+      }))
+      .filter((subtask) => subtask.content.length > 0);
+
+    return {
+      icon: iconField.value ?? undefined,
+      title: titleField.value.trim(),
+      date: formatDateKey(dateField.value),
+      durationSeconds: durationSeconds > 0 ? durationSeconds : undefined,
+      priority: priorityField.value,
+      tagId: selectedTagId,
+      repeatType,
+      repeatWeekdays:
+        repeatType === "WEEKLY" && repeatWeekdays.length > 0
+          ? repeatWeekdays
+          : undefined,
+      repeatDayOfMonth:
+        repeatType === "MONTHLY" &&
+        Number.isInteger(repeatDayOfMonth) &&
+        repeatDayOfMonth >= 1 &&
+        repeatDayOfMonth <= 31
+          ? repeatDayOfMonth
+          : undefined,
+      memo: memoField.value.trim(),
+      subtasks,
+    };
+  };
+
   return {
     date: dateField.value,
     setDate: dateField.onChange,
@@ -196,6 +253,7 @@ export const useDetailTodoForm = ({ todo }: UseDetailTodoFormParams) => {
     selectTime,
     changeRepeatFrequency,
     toggleWeekday,
+    buildUpdateRequest,
     handleSubmit,
     dirtyFields: formState.dirtyFields,
   };
diff --git a/apps/timo-web/hooks/todo-modal/use-tag-field.tsx b/apps/timo-web/hooks/todo-modal/use-tag-field.tsx
index ffe89d91..0e2c7264 100644
--- a/apps/timo-web/hooks/todo-modal/use-tag-field.tsx
+++ b/apps/timo-web/hooks/todo-modal/use-tag-field.tsx
@@ -18,10 +18,24 @@ export interface UseTagFieldParams<TFieldValues extends FieldValues> {
   name?: Path<TFieldValues>;
 }
 
+export interface UseTagFieldResult {
+  tagOptions: Array<{ id: number; label: string }>;
+  tagLabels: string[];
+  selectedTagOption?: { id: number; label: string };
+  selectedTagId: number | null;
+  selectedTagLabel?: string;
+  isTagLimitToastOpen: boolean;
+  closeTagLimitToast: () => void;
+  isCreateTagErrorToastOpen: boolean;
+  closeCreateTagErrorToast: () => void;
+  handleSelectTag: (label: string) => void;
+  handleAddTagClick: () => void;
+}
+
 export const useTagField = <TFieldValues extends FieldValues>({
   control,
   name = "tagId" as Path<TFieldValues>,
-}: UseTagFieldParams<TFieldValues>) => {
+}: UseTagFieldParams<TFieldValues>): UseTagFieldResult => {
   const tCommon = useTranslations("Common");
   const { field } = useController({ name, control });
   const [isTagLimitToastOpen, setIsTagLimitToastOpen] =
@@ -93,6 +107,7 @@ export const useTagField = <TFieldValues extends FieldValues>({
     tagOptions,
     tagLabels,
     selectedTagOption,
+    selectedTagId: typeof field.value === "number" ? field.value : null,
     selectedTagLabel: selectedTagOption?.label,
     isTagLimitToastOpen,
     closeTagLimitToast: () => setIsTagLimitToastOpen(false),
diff --git a/apps/timo-web/hooks/todo-modal/use-update-todo-submit.ts b/apps/timo-web/hooks/todo-modal/use-update-todo-submit.ts
new file mode 100644
index 00000000..c8143d96
--- /dev/null
+++ b/apps/timo-web/hooks/todo-modal/use-update-todo-submit.ts
@@ -0,0 +1,47 @@
+"use client";
+
+import { useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
+
+import type { TodoUpdateRequest } from "@/api/generated/models";
+
+import { getGetHomeQueryKey } from "@/api/generated/endpoints/home/home";
+import {
+  getGetTodoDetailQueryKey,
+  useUpdateTodo,
+} from "@/api/generated/endpoints/todo/todo";
+
+export interface UpdateTodoSubmitParams {
+  todoId: number;
+  date: string;
+  data: TodoUpdateRequest;
+}
+
+export const useUpdateTodoSubmit = () => {
+  const [isErrorToastOpen, setIsErrorToastOpen] = useState(false);
+  const { mutate: updateTodo } = useUpdateTodo();
+  const queryClient = useQueryClient();
+
+  const handleUpdate = ({ todoId, date, data }: UpdateTodoSubmitParams) => {
+    updateTodo(
+      { todoId, data },
+      {
+        onSuccess: () => {
+          queryClient.invalidateQueries({ queryKey: getGetHomeQueryKey() });
+          queryClient.invalidateQueries({
+            queryKey: getGetTodoDetailQueryKey(todoId, { date }),
+          });
+        },
+        onError: () => {
+          setIsErrorToastOpen(true);
+        },
+      },
+    );
+  };
+
+  return {
+    handleUpdate,
+    isErrorToastOpen,
+    closeErrorToast: () => setIsErrorToastOpen(false),
+  };
+};
diff --git a/apps/timo-web/messages/en.json b/apps/timo-web/messages/en.json
index 793b1d74..f6764f3f 100644
--- a/apps/timo-web/messages/en.json
+++ b/apps/timo-web/messages/en.json
@@ -56,6 +56,7 @@
     },
     "detailModal": {
       "ariaLabel": "To-do details",
+      "save": "Save",
       "delete": "Delete to-do",
       "repeatFrequencyHeading": "Repeat",
       "repeatDayLabel": "day(s)"
@@ -133,6 +134,7 @@
     "todoLimitLine2": "To add a new to-do, please complete an existing one.",
     "onboardingSubmitFailed": "Failed to save onboarding. Please try again.",
     "todoCreateFailed": "Failed to create the to-do. Please try again.",
+    "todoUpdateFailed": "Failed to update the to-do. Please try again.",
     "aiDurationRecommendFailed": "Failed to get the AI duration recommendation. Please try again.",
     "tagCreateFailed": "Failed to create the tag. Please try again.",
     "tagActionFailed": "Failed to update the tag. Please try again.",
diff --git a/apps/timo-web/messages/ko.json b/apps/timo-web/messages/ko.json
index d38803e0..c39e87e2 100644
--- a/apps/timo-web/messages/ko.json
+++ b/apps/timo-web/messages/ko.json
@@ -56,6 +56,7 @@
     },
     "detailModal": {
       "ariaLabel": "투두 상세",
+      "save": "저장",
       "delete": "투두 삭제",
       "repeatFrequencyHeading": "반복 일정",
       "repeatDayLabel": "일"
@@ -133,6 +134,7 @@
     "todoLimitLine2": "새로운 투두를 추가하려면 기존 투두를 완료해주세요.",
     "onboardingSubmitFailed": "온보딩 저장에 실패했어요. 다시 시도해 주세요.",
     "todoCreateFailed": "투두 생성에 실패했어요. 다시 시도해 주세요.",
+    "todoUpdateFailed": "투두 수정에 실패했어요. 다시 시도해 주세요.",
     "aiDurationRecommendFailed": "AI 추천 소요 시간을 가져오지 못했어요. 다시 시도해 주세요.",
     "tagCreateFailed": "태그 생성에 실패했어요. 다시 시도해 주세요.",
     "tagActionFailed": "태그 처리에 실패했어요. 다시 시도해 주세요.",
diff --git a/apps/timo-web/utils/todo/todo-time.ts b/apps/timo-web/utils/todo/todo-time.ts
index 1710a75f..702f933b 100644
--- a/apps/timo-web/utils/todo/todo-time.ts
+++ b/apps/timo-web/utils/todo/todo-time.ts
@@ -28,3 +28,28 @@ export const convertApiDurationToSeconds = (duration: string): number => {
   const seconds = Number(secondsText) || 0;
   return minutes * SECONDS_PER_MINUTE + seconds;
 };
+
+export const convertTimeTextToDurationSeconds = (timeText: string): number => {
+  const normalized = timeText.trim().toLowerCase();
+  const hourMatch = /^(\d+(?:\.\d+)?)\s*h$/.exec(normalized);
+  const minuteMatch = /^(\d+)\s*min$/.exec(normalized);
+  const timeMatch = /^(\d+)\s*:\s*([0-5]?\d)$/.exec(normalized);
+
+  if (hourMatch) {
+    return Math.round(Number(hourMatch[1]) * SECONDS_PER_HOUR);
+  }
+
+  if (minuteMatch) {
+    return Number(minuteMatch[1]) * SECONDS_PER_MINUTE;
+  }
+
+  if (timeMatch) {
+    const [, hoursText, minutesText] = timeMatch;
+    return (
+      Number(hoursText) * SECONDS_PER_HOUR +
+      Number(minutesText) * SECONDS_PER_MINUTE
+    );
+  }
+
+  return 0;
+};

From f81b863bd987b9d8478a0229e3bccde0240166b0 Mon Sep 17 00:00:00 2001
From: yumin-kim4757 <rladbals0211@gmail.com>
Date: Tue, 14 Jul 2026 20:55:16 +0900
Subject: [PATCH 14/75] =?UTF-8?q?refactor(web):=20=ED=88=AC=EB=91=90=20?=
 =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=ED=9B=85=20=EA=B5=AC=EC=A1=B0=20=EC=A0=95?=
 =?UTF-8?q?=EB=A6=AC=20(#186)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create/CreateTodoModalContent.tsx         | 12 +--
 .../detail/DetailTodoModalContent.tsx         |  2 +-
 .../detail/DetailTodoTaskFields.tsx           |  2 +-
 .../create/CreateTodoModalContainer.tsx       |  2 +-
 .../detail/DetailTodoModalContainer.tsx       |  4 +-
 .../todo-modal/{ => common}/use-tag-field.tsx |  0
 .../{ => create}/use-create-todo-submit.ts    |  0
 .../todo-modal/{ => create}/use-icon-field.ts |  0
 .../{ => create}/use-repeat-field.ts          |  0
 .../{ => create}/use-subtask-field.ts         |  0
 .../todo-modal/{ => create}/use-time-field.ts |  0
 .../{ => create}/use-title-field.ts           |  0
 .../{ => detail}/use-delete-todo-submit.ts    |  0
 .../{ => detail}/use-detail-subtask-field.ts  |  0
 .../{ => detail}/use-detail-todo-form.ts      | 72 ++++----------
 .../{ => detail}/use-update-todo-submit.ts    |  0
 .../utils/todo/detail-todo-update-request.ts  | 93 +++++++++++++++++++
 17 files changed, 122 insertions(+), 65 deletions(-)
 rename apps/timo-web/hooks/todo-modal/{ => common}/use-tag-field.tsx (100%)
 rename apps/timo-web/hooks/todo-modal/{ => create}/use-create-todo-submit.ts (100%)
 rename apps/timo-web/hooks/todo-modal/{ => create}/use-icon-field.ts (100%)
 rename apps/timo-web/hooks/todo-modal/{ => create}/use-repeat-field.ts (100%)
 rename apps/timo-web/hooks/todo-modal/{ => create}/use-subtask-field.ts (100%)
 rename apps/timo-web/hooks/todo-modal/{ => create}/use-time-field.ts (100%)
 rename apps/timo-web/hooks/todo-modal/{ => create}/use-title-field.ts (100%)
 rename apps/timo-web/hooks/todo-modal/{ => detail}/use-delete-todo-submit.ts (100%)
 rename apps/timo-web/hooks/todo-modal/{ => detail}/use-detail-subtask-field.ts (100%)
 rename apps/timo-web/hooks/todo-modal/{ => detail}/use-detail-todo-form.ts (76%)
 rename apps/timo-web/hooks/todo-modal/{ => detail}/use-update-todo-submit.ts (100%)
 create mode 100644 apps/timo-web/utils/todo/detail-todo-update-request.ts

diff --git a/apps/timo-web/components/todo-modal/create/CreateTodoModalContent.tsx b/apps/timo-web/components/todo-modal/create/CreateTodoModalContent.tsx
index 3dc0b4e0..b9041306 100644
--- a/apps/timo-web/components/todo-modal/create/CreateTodoModalContent.tsx
+++ b/apps/timo-web/components/todo-modal/create/CreateTodoModalContent.tsx
@@ -15,12 +15,12 @@ import { AnimatedToast } from "@/components/toast/AnimatedToast";
 import { TodoIconField } from "@/components/todo-modal/common/TodoIconField";
 import { CreateTodoMemoField } from "@/components/todo-modal/create/CreateTodoMemoField";
 import { CreateTodoTaskFields } from "@/components/todo-modal/create/CreateTodoTaskFields";
-import { useIconField } from "@/hooks/todo-modal/use-icon-field";
-import { useRepeatField } from "@/hooks/todo-modal/use-repeat-field";
-import { useSubtaskField } from "@/hooks/todo-modal/use-subtask-field";
-import { useTagField } from "@/hooks/todo-modal/use-tag-field";
-import { useTimeField } from "@/hooks/todo-modal/use-time-field";
-import { useTitleField } from "@/hooks/todo-modal/use-title-field";
+import { useTagField } from "@/hooks/todo-modal/common/use-tag-field";
+import { useIconField } from "@/hooks/todo-modal/create/use-icon-field";
+import { useRepeatField } from "@/hooks/todo-modal/create/use-repeat-field";
+import { useSubtaskField } from "@/hooks/todo-modal/create/use-subtask-field";
+import { useTimeField } from "@/hooks/todo-modal/create/use-time-field";
+import { useTitleField } from "@/hooks/todo-modal/create/use-title-field";
 import { formatDateKey } from "@/utils/date/date";
 
 const createDefaultValues = (defaultDate?: Date): CreateTodoRequest => ({
diff --git a/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx b/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
index 3d7ba62c..840cb911 100644
--- a/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
+++ b/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
@@ -17,7 +17,7 @@ import {
   DETAIL_TODO_TIME_OPTIONS,
   DETAIL_TODO_WEEKDAY_IDS,
   useDetailTodoForm,
-} from "@/hooks/todo-modal/use-detail-todo-form";
+} from "@/hooks/todo-modal/detail/use-detail-todo-form";
 import { formatShortDateLabel } from "@/utils/date/date";
 
 const DETAIL_TODO_MEMO_MAX_LENGTH = 300;
diff --git a/apps/timo-web/components/todo-modal/detail/DetailTodoTaskFields.tsx b/apps/timo-web/components/todo-modal/detail/DetailTodoTaskFields.tsx
index f786acbe..950830db 100644
--- a/apps/timo-web/components/todo-modal/detail/DetailTodoTaskFields.tsx
+++ b/apps/timo-web/components/todo-modal/detail/DetailTodoTaskFields.tsx
@@ -6,7 +6,7 @@ import {
 import { Checkbox, PlayButton } from "@repo/timo-design-system/ui";
 
 import type { TodoDetailResponseTimerStatus } from "@/api/generated/models";
-import type { DetailTodoSubtaskInput } from "@/hooks/todo-modal/use-detail-subtask-field";
+import type { DetailTodoSubtaskInput } from "@/hooks/todo-modal/detail/use-detail-subtask-field";
 import type { KeyboardEvent } from "react";
 
 const resizeTextarea = (element: HTMLTextAreaElement | null) => {
diff --git a/apps/timo-web/containers/todo-modal/create/CreateTodoModalContainer.tsx b/apps/timo-web/containers/todo-modal/create/CreateTodoModalContainer.tsx
index d342dd55..93ee4aa2 100644
--- a/apps/timo-web/containers/todo-modal/create/CreateTodoModalContainer.tsx
+++ b/apps/timo-web/containers/todo-modal/create/CreateTodoModalContainer.tsx
@@ -8,7 +8,7 @@ import type { CreateTodoRequest } from "@/api/common/todo-schema";
 
 import { AnimatedToast } from "@/components/toast/AnimatedToast";
 import { CreateTodoModalContent } from "@/components/todo-modal/create/CreateTodoModalContent";
-import { useCreateTodoSubmit } from "@/hooks/todo-modal/use-create-todo-submit";
+import { useCreateTodoSubmit } from "@/hooks/todo-modal/create/use-create-todo-submit";
 
 export interface CreateTodoModalContainerProps {
   defaultDate?: Date;
diff --git a/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx b/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx
index 97479a35..554c2fa9 100644
--- a/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx
+++ b/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx
@@ -9,8 +9,8 @@ import type { ReactNode } from "react";
 
 import { AnimatedToast } from "@/components/toast/AnimatedToast";
 import { DetailTodoModalContent } from "@/components/todo-modal/detail/DetailTodoModalContent";
-import { useDeleteTodoSubmit } from "@/hooks/todo-modal/use-delete-todo-submit";
-import { useUpdateTodoSubmit } from "@/hooks/todo-modal/use-update-todo-submit";
+import { useDeleteTodoSubmit } from "@/hooks/todo-modal/detail/use-delete-todo-submit";
+import { useUpdateTodoSubmit } from "@/hooks/todo-modal/detail/use-update-todo-submit";
 import { useDetailTodo } from "@/queries/todo/use-detail-todo";
 
 export interface DetailTodoModalContainerProps extends UseDetailTodoParams {
diff --git a/apps/timo-web/hooks/todo-modal/use-tag-field.tsx b/apps/timo-web/hooks/todo-modal/common/use-tag-field.tsx
similarity index 100%
rename from apps/timo-web/hooks/todo-modal/use-tag-field.tsx
rename to apps/timo-web/hooks/todo-modal/common/use-tag-field.tsx
diff --git a/apps/timo-web/hooks/todo-modal/use-create-todo-submit.ts b/apps/timo-web/hooks/todo-modal/create/use-create-todo-submit.ts
similarity index 100%
rename from apps/timo-web/hooks/todo-modal/use-create-todo-submit.ts
rename to apps/timo-web/hooks/todo-modal/create/use-create-todo-submit.ts
diff --git a/apps/timo-web/hooks/todo-modal/use-icon-field.ts b/apps/timo-web/hooks/todo-modal/create/use-icon-field.ts
similarity index 100%
rename from apps/timo-web/hooks/todo-modal/use-icon-field.ts
rename to apps/timo-web/hooks/todo-modal/create/use-icon-field.ts
diff --git a/apps/timo-web/hooks/todo-modal/use-repeat-field.ts b/apps/timo-web/hooks/todo-modal/create/use-repeat-field.ts
similarity index 100%
rename from apps/timo-web/hooks/todo-modal/use-repeat-field.ts
rename to apps/timo-web/hooks/todo-modal/create/use-repeat-field.ts
diff --git a/apps/timo-web/hooks/todo-modal/use-subtask-field.ts b/apps/timo-web/hooks/todo-modal/create/use-subtask-field.ts
similarity index 100%
rename from apps/timo-web/hooks/todo-modal/use-subtask-field.ts
rename to apps/timo-web/hooks/todo-modal/create/use-subtask-field.ts
diff --git a/apps/timo-web/hooks/todo-modal/use-time-field.ts b/apps/timo-web/hooks/todo-modal/create/use-time-field.ts
similarity index 100%
rename from apps/timo-web/hooks/todo-modal/use-time-field.ts
rename to apps/timo-web/hooks/todo-modal/create/use-time-field.ts
diff --git a/apps/timo-web/hooks/todo-modal/use-title-field.ts b/apps/timo-web/hooks/todo-modal/create/use-title-field.ts
similarity index 100%
rename from apps/timo-web/hooks/todo-modal/use-title-field.ts
rename to apps/timo-web/hooks/todo-modal/create/use-title-field.ts
diff --git a/apps/timo-web/hooks/todo-modal/use-delete-todo-submit.ts b/apps/timo-web/hooks/todo-modal/detail/use-delete-todo-submit.ts
similarity index 100%
rename from apps/timo-web/hooks/todo-modal/use-delete-todo-submit.ts
rename to apps/timo-web/hooks/todo-modal/detail/use-delete-todo-submit.ts
diff --git a/apps/timo-web/hooks/todo-modal/use-detail-subtask-field.ts b/apps/timo-web/hooks/todo-modal/detail/use-detail-subtask-field.ts
similarity index 100%
rename from apps/timo-web/hooks/todo-modal/use-detail-subtask-field.ts
rename to apps/timo-web/hooks/todo-modal/detail/use-detail-subtask-field.ts
diff --git a/apps/timo-web/hooks/todo-modal/use-detail-todo-form.ts b/apps/timo-web/hooks/todo-modal/detail/use-detail-todo-form.ts
similarity index 76%
rename from apps/timo-web/hooks/todo-modal/use-detail-todo-form.ts
rename to apps/timo-web/hooks/todo-modal/detail/use-detail-todo-form.ts
index ae6228eb..1d569963 100644
--- a/apps/timo-web/hooks/todo-modal/use-detail-todo-form.ts
+++ b/apps/timo-web/hooks/todo-modal/detail/use-detail-todo-form.ts
@@ -4,7 +4,6 @@ import { useController, useForm } from "react-hook-form";
 import type {
   TodoDetailResponse,
   TodoUpdateRequest,
-  TodoUpdateRequestRepeatWeekdaysItem,
 } from "@/api/generated/models";
 import type {
   PriorityLevel,
@@ -14,17 +13,15 @@ import type {
   TodoIconValue,
 } from "@repo/timo-design-system/ui";
 
-import { useDetailSubtaskField } from "@/hooks/todo-modal/use-detail-subtask-field";
-import { useTagField } from "@/hooks/todo-modal/use-tag-field";
-import { formatDateKey, parseDateKey } from "@/utils/date/date";
+import { useTagField } from "@/hooks/todo-modal/common/use-tag-field";
+import { useDetailSubtaskField } from "@/hooks/todo-modal/detail/use-detail-subtask-field";
+import { parseDateKey } from "@/utils/date/date";
+import { buildDetailTodoUpdateRequest } from "@/utils/todo/detail-todo-update-request";
 import {
   TITLE_MAX_WEIGHTED_LENGTH,
   truncateToWeightedLength,
 } from "@/utils/todo/text-length";
-import {
-  convertDurationToTimeText,
-  convertTimeTextToDurationSeconds,
-} from "@/utils/todo/todo-time";
+import { convertDurationToTimeText } from "@/utils/todo/todo-time";
 
 interface DetailTodoFormValues {
   date: Date;
@@ -57,11 +54,6 @@ const isRepeatFrequency = (
 ): repeatType is RepeatFrequency =>
   repeatType === "DAILY" || repeatType === "WEEKLY" || repeatType === "MONTHLY";
 
-const isUpdateRepeatWeekday = (
-  weekdayId: string,
-): weekdayId is TodoUpdateRequestRepeatWeekdaysItem =>
-  (DETAIL_TODO_WEEKDAY_IDS as readonly string[]).includes(weekdayId);
-
 export const DETAIL_TODO_TIME_OPTIONS: TimeOption[] = [
   { minute: 15, value: "15", unit: "min" },
   { minute: 30, value: "30", unit: "min" },
@@ -177,48 +169,20 @@ export const useDetailTodoForm = ({ todo }: UseDetailTodoFormParams) => {
   };
 
   const buildUpdateRequest = (): TodoUpdateRequest => {
-    const durationSeconds = convertTimeTextToDurationSeconds(timeField.value);
-    const repeatType = isRepeatActiveField.value
-      ? repeatFrequencyField.value
-      : "NONE";
-    const repeatDayOfMonth = Number(repeatDayField.value);
-    const selectedTagId =
-      typeof tagField.selectedTagId === "number"
-        ? tagField.selectedTagId
-        : undefined;
-    const repeatWeekdays = selectedWeekdayIdsField.value.filter(
-      isUpdateRepeatWeekday,
-    );
-    const subtasks = subtaskField.subtaskInputs
-      .map((subtask) => ({
-        subtaskId: subtask.subtaskId ?? undefined,
-        content: subtask.value.trim(),
-        completed: subtask.completed,
-      }))
-      .filter((subtask) => subtask.content.length > 0);
-
-    return {
-      icon: iconField.value ?? undefined,
-      title: titleField.value.trim(),
-      date: formatDateKey(dateField.value),
-      durationSeconds: durationSeconds > 0 ? durationSeconds : undefined,
+    return buildDetailTodoUpdateRequest({
+      icon: iconField.value,
+      title: titleField.value,
+      date: dateField.value,
+      time: timeField.value,
       priority: priorityField.value,
-      tagId: selectedTagId,
-      repeatType,
-      repeatWeekdays:
-        repeatType === "WEEKLY" && repeatWeekdays.length > 0
-          ? repeatWeekdays
-          : undefined,
-      repeatDayOfMonth:
-        repeatType === "MONTHLY" &&
-        Number.isInteger(repeatDayOfMonth) &&
-        repeatDayOfMonth >= 1 &&
-        repeatDayOfMonth <= 31
-          ? repeatDayOfMonth
-          : undefined,
-      memo: memoField.value.trim(),
-      subtasks,
-    };
+      tagId: tagField.selectedTagId,
+      isRepeatActive: isRepeatActiveField.value,
+      repeatFrequency: repeatFrequencyField.value,
+      selectedWeekdayIds: selectedWeekdayIdsField.value,
+      repeatDay: repeatDayField.value,
+      memo: memoField.value,
+      subtasks: subtaskField.subtaskInputs,
+    });
   };
 
   return {
diff --git a/apps/timo-web/hooks/todo-modal/use-update-todo-submit.ts b/apps/timo-web/hooks/todo-modal/detail/use-update-todo-submit.ts
similarity index 100%
rename from apps/timo-web/hooks/todo-modal/use-update-todo-submit.ts
rename to apps/timo-web/hooks/todo-modal/detail/use-update-todo-submit.ts
diff --git a/apps/timo-web/utils/todo/detail-todo-update-request.ts b/apps/timo-web/utils/todo/detail-todo-update-request.ts
new file mode 100644
index 00000000..bf669e5e
--- /dev/null
+++ b/apps/timo-web/utils/todo/detail-todo-update-request.ts
@@ -0,0 +1,93 @@
+import type {
+  TodoUpdateRequest,
+  TodoUpdateRequestRepeatWeekdaysItem,
+} from "@/api/generated/models";
+import type { DetailTodoSubtaskInput } from "@/hooks/todo-modal/detail/use-detail-subtask-field";
+import type {
+  PriorityLevel,
+  RepeatFrequency,
+  TodoIconValue,
+} from "@repo/timo-design-system/ui";
+
+import { formatDateKey } from "@/utils/date/date";
+import { convertTimeTextToDurationSeconds } from "@/utils/todo/todo-time";
+
+const UPDATE_REPEAT_WEEKDAYS = [
+  "MON",
+  "TUE",
+  "WED",
+  "THU",
+  "FRI",
+  "SAT",
+  "SUN",
+] as const;
+
+const isUpdateRepeatWeekday = (
+  weekdayId: string,
+): weekdayId is TodoUpdateRequestRepeatWeekdaysItem =>
+  (UPDATE_REPEAT_WEEKDAYS as readonly string[]).includes(weekdayId);
+
+export interface BuildDetailTodoUpdateRequestParams {
+  icon: TodoIconValue | null;
+  title: string;
+  date: Date;
+  time: string;
+  priority: PriorityLevel;
+  tagId: number | null;
+  isRepeatActive: boolean;
+  repeatFrequency: RepeatFrequency;
+  selectedWeekdayIds: string[];
+  repeatDay: string;
+  memo: string;
+  subtasks: DetailTodoSubtaskInput[];
+}
+
+export const buildDetailTodoUpdateRequest = ({
+  icon,
+  title,
+  date,
+  time,
+  priority,
+  tagId,
+  isRepeatActive,
+  repeatFrequency,
+  selectedWeekdayIds,
+  repeatDay,
+  memo,
+  subtasks,
+}: BuildDetailTodoUpdateRequestParams): TodoUpdateRequest => {
+  const durationSeconds = convertTimeTextToDurationSeconds(time);
+  const repeatType = isRepeatActive ? repeatFrequency : "NONE";
+  const repeatDayOfMonth = Number(repeatDay);
+  const repeatWeekdays = selectedWeekdayIds.filter(isUpdateRepeatWeekday);
+  const updateSubtasks = subtasks
+    .map((subtask) => ({
+      subtaskId: subtask.subtaskId ?? undefined,
+      content: subtask.value.trim(),
+      completed: subtask.completed,
+    }))
+    .filter((subtask) => subtask.content.length > 0);
+
+  return {
+    icon: icon ?? undefined,
+    title: title.trim(),
+    date: formatDateKey(date),
+    durationSeconds: durationSeconds > 0 ? durationSeconds : undefined,
+    priority,
+    tagId: tagId ?? undefined,
+    repeatType,
+    repeatWeekdays:
+      repeatType === "WEEKLY" && repeatWeekdays.length > 0
+        ? repeatWeekdays
+        : undefined,
+    repeatDayOfMonth:
+      repeatType === "MONTHLY" &&
+      Number.isInteger(repeatDayOfMonth) &&
+      repeatDayOfMonth >= 1 &&
+      repeatDayOfMonth <= 31
+        ? repeatDayOfMonth
+        : undefined,
+    memo: memo.trim(),
+    subtasks: updateSubtasks,
+  };
+};

From 628637dd74cf81d24d3f0b7a6ab36e03742d1028 Mon Sep 17 00:00:00 2001
From: yumin-kim4757 <rladbals0211@gmail.com>
Date: Tue, 14 Jul 2026 21:11:33 +0900
Subject: [PATCH 15/75] =?UTF-8?q?fix(web):=20check-types=20=EC=97=90?=
 =?UTF-8?q?=EB=9F=AC=20=ED=95=B4=EA=B2=B0=20(#186)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../today/_containers/TodayTodoListContainer.tsx             | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

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 5bd3ea74..bcada296 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
@@ -8,7 +8,7 @@ import { TodayDateHeaderContainer } from "@/app/[locale]/(main)/(with-time-sideb
 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 { DetailTodoModalContainer } from "@/components/todo-modal/detail/DetailTodoModalContainer";
+import { DetailTodoModalContainer } from "@/containers/todo-modal/detail/DetailTodoModalContainer";
 import { formatDate } from "@/utils/date/date";
 import { convertDurationToTimeText } from "@/utils/duration/convert-duration-to-time-text";
 
@@ -46,7 +46,8 @@ export const TodayTodoListContainer = () => {
         {todos.map((todo) => (
           <DetailTodoModalContainer
             key={todo.todoId}
-            todo={todo}
+            todoId={todo.todoId}
+            date={todo.date.slice(0, 10)}
             onTogglePlay={() => handlePlay(todo.todoId)}
             onDelete={() => handleDelete(todo.todoId)}
           >

From 6107153a8b992c6f6067c88f2fd4620d6594bc04 Mon Sep 17 00:00:00 2001
From: yumin-kim4757 <rladbals0211@gmail.com>
Date: Tue, 14 Jul 2026 21:31:05 +0900
Subject: [PATCH 16/75] =?UTF-8?q?refactor(web):=20=EC=9B=94=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD=20=EC=9A=94=EC=9D=BC=20=EC=B4=88=EA=B8=B0=ED=99=94=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20(#165)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../(main)/statistics/_containers/StatisticsContainer.tsx     | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsContainer.tsx b/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsContainer.tsx
index 6418a7fb..bbcd6aba 100644
--- a/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsContainer.tsx
+++ b/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsContainer.tsx
@@ -57,7 +57,9 @@ export const StatisticsContainer = () => {
       : { variant: "day", detail: dayDetail };
 
   const handleChangeMonth = (updater: (prev: Date) => Date) => {
-    setCurrentMonth(updater);
+    const nextMonth = updater(currentMonth);
+    setCurrentMonth(nextMonth);
+    setSelectedDate(new Date(nextMonth.getFullYear(), nextMonth.getMonth(), 1));
     setSidePanelVariant("month");
   };
 

From 3fe8c0b1935701fad47abac627c10467e639e470 Mon Sep 17 00:00:00 2001
From: yumin-kim4757 <rladbals0211@gmail.com>
Date: Tue, 14 Jul 2026 21:31:35 +0900
Subject: [PATCH 17/75] =?UTF-8?q?feat(web):=20=ED=86=B5=EA=B3=84=20?=
 =?UTF-8?q?=EC=BA=98=EB=A6=B0=EB=8D=94=20=EC=97=90=EB=9F=AC/=EB=A1=9C?=
 =?UTF-8?q?=EB=94=A9=20=EC=83=81=ED=83=9C=20=EC=B2=98=EB=A6=AC=20(#165)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../StatisticsCalendarContainer.tsx           | 46 ++++++++++++++++++-
 1 file changed, 45 insertions(+), 1 deletion(-)

diff --git a/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsCalendarContainer.tsx b/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsCalendarContainer.tsx
index 094e8753..89b2142b 100644
--- a/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsCalendarContainer.tsx
+++ b/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsCalendarContainer.tsx
@@ -1,7 +1,10 @@
 "use client";
 
+import { useTranslations } from "next-intl";
+
 import { StatisticsCalendar } from "@/app/[locale]/(main)/statistics/_components/StatisticsCalendar";
 import { useStatisticsCalendarQuery } from "@/app/[locale]/(main)/statistics/_queries/statistics-queries";
+import { LottiePlayer } from "@/components/lottie/LottiePlayer";
 import { formatDateKey } from "@/utils/date/date";
 
 interface StatisticsCalendarContainerProps {
@@ -10,15 +13,56 @@ interface StatisticsCalendarContainerProps {
   onSelectDate: (date: Date) => void;
 }
 
+interface StatisticsCalendarStatusProps {
+  lottieSrc: string;
+  message: string;
+  role?: "status" | "alert";
+}
+
+const StatisticsCalendarStatus = ({
+  lottieSrc,
+  message,
+  role = "status",
+}: StatisticsCalendarStatusProps) => {
+  return (
+    <section
+      className="flex min-w-0 flex-1 flex-col items-center justify-center gap-6 px-14.75 pt-10 pb-13 text-center"
+      role={role}
+    >
+      <LottiePlayer src={lottieSrc} className="w-[143px]" ariaLabel={message} />
+      <p className="typo-headline-m-14 text-timo-gray-900">{message}</p>
+    </section>
+  );
+};
+
 export const StatisticsCalendarContainer = ({
   currentMonth,
   selectedDate,
   onSelectDate,
 }: StatisticsCalendarContainerProps) => {
+  const t = useTranslations("Statistics.calendar");
   const yearMonth = formatDateKey(currentMonth).slice(0, 7);
   const calendarQuery = useStatisticsCalendarQuery(yearMonth);
   const calendarData = calendarQuery.data?.data;
-  if (!calendarData) return null;
+
+  if (calendarQuery.isPending) {
+    return (
+      <StatisticsCalendarStatus
+        lottieSrc="/lottie/loading.json"
+        message={t("loading")}
+      />
+    );
+  }
+
+  if (calendarQuery.isError || !calendarData) {
+    return (
+      <StatisticsCalendarStatus
+        lottieSrc="/lottie/error.json"
+        message={t("error")}
+        role="alert"
+      />
+    );
+  }
 
   return (
     <StatisticsCalendar

From 07ad194cf160ead811758903e6b3dba718c38fa2 Mon Sep 17 00:00:00 2001
From: yumin-kim4757 <rladbals0211@gmail.com>
Date: Tue, 14 Jul 2026 21:37:56 +0900
Subject: [PATCH 18/75] =?UTF-8?q?fix(web):=20=EC=97=90=EB=9F=AC/=EB=A1=9C?=
 =?UTF-8?q?=EB=94=A9=20=EB=A9=94=EC=84=B8=EC=A7=80=20=EC=B6=94=EA=B0=80=20?=
 =?UTF-8?q?(#165)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/timo-web/messages/en.json | 4 ++++
 apps/timo-web/messages/ko.json | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/apps/timo-web/messages/en.json b/apps/timo-web/messages/en.json
index bcbbbdf6..21809289 100644
--- a/apps/timo-web/messages/en.json
+++ b/apps/timo-web/messages/en.json
@@ -96,6 +96,10 @@
     }
   },
   "Statistics": {
+    "calendar": {
+      "loading": "Loading statistics calendar.",
+      "error": "Failed to load statistics calendar."
+    },
     "sidePanel": {
       "monthTotalRecordTime": "Total record time this month",
       "activeDays": "Active days",
diff --git a/apps/timo-web/messages/ko.json b/apps/timo-web/messages/ko.json
index 2f30bd57..14f597d0 100644
--- a/apps/timo-web/messages/ko.json
+++ b/apps/timo-web/messages/ko.json
@@ -96,6 +96,10 @@
     }
   },
   "Statistics": {
+    "calendar": {
+      "loading": "통계 캘린더를 불러오고 있어요.",
+      "error": "통계 캘린더를 불러오지 못했어요."
+    },
     "sidePanel": {
       "monthTotalRecordTime": "이번 달의 총 기록 시간",
       "activeDays": "활동일",

From 09c3e8a202e909c07df37fe17a82058136bb7213 Mon Sep 17 00:00:00 2001
From: yumin-kim4757 <rladbals0211@gmail.com>
Date: Tue, 14 Jul 2026 21:38:40 +0900
Subject: [PATCH 19/75] =?UTF-8?q?fix(web):=20=ED=86=B5=EA=B3=84=20?=
 =?UTF-8?q?=EC=BA=98=EB=A6=B0=EB=8D=94=20=EB=82=A0=EC=A7=9C=20=ED=8C=8C?=
 =?UTF-8?q?=EC=8B=B1=20=EC=88=98=EC=A0=95=20(#165)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../(main)/statistics/_components/StatisticsCalendar.tsx      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/timo-web/app/[locale]/(main)/statistics/_components/StatisticsCalendar.tsx b/apps/timo-web/app/[locale]/(main)/statistics/_components/StatisticsCalendar.tsx
index 4851a3f8..575f2281 100644
--- a/apps/timo-web/app/[locale]/(main)/statistics/_components/StatisticsCalendar.tsx
+++ b/apps/timo-web/app/[locale]/(main)/statistics/_components/StatisticsCalendar.tsx
@@ -17,7 +17,7 @@ import {
   getCalendarDates,
   getFirstDayOffset,
 } from "@/app/[locale]/(main)/statistics/_utils/statistics-calendar";
-import { formatDateKey } from "@/utils/date/date";
+import { formatDateKey, parseDateKey } from "@/utils/date/date";
 
 type CalendarIconStatus = "disabled" | "empty" | "outline" | "light" | "filled";
 
@@ -71,7 +71,7 @@ export const StatisticsCalendar = ({
   calendarData,
 }: StatisticsCalendarProps) => {
   const locale = useLocale();
-  const today = new Date(calendarData.today);
+  const today = parseDateKey(calendarData.today) ?? new Date();
   const calendarDates = getCalendarDates(currentMonth);
   const firstDayOffset = getFirstDayOffset(currentMonth);
   const completionRateByDate = new Map(

From c9bc8b7633d210a96959c7eaeadba6411311adb7 Mon Sep 17 00:00:00 2001
From: yumin-kim4757 <rladbals0211@gmail.com>
Date: Tue, 14 Jul 2026 21:50:25 +0900
Subject: [PATCH 20/75] =?UTF-8?q?fix(web):=20=ED=86=B5=EA=B3=84=20?=
 =?UTF-8?q?=EC=BA=98=EB=A6=B0=EB=8D=94=20=EA=B8=B0=EB=B3=B8=20=EB=82=A0?=
 =?UTF-8?q?=EC=A7=9C=20=EC=84=A0=ED=83=9D=20=EC=83=81=ED=83=9C=20=EB=B6=84?=
 =?UTF-8?q?=EB=A6=AC=20(#165)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../(main)/statistics/_components/StatisticsCalendar.tsx | 9 ++++++---
 .../_containers/StatisticsCalendarContainer.tsx          | 5 ++++-
 .../statistics/_containers/StatisticsContainer.tsx       | 3 ++-
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/apps/timo-web/app/[locale]/(main)/statistics/_components/StatisticsCalendar.tsx b/apps/timo-web/app/[locale]/(main)/statistics/_components/StatisticsCalendar.tsx
index 575f2281..69d2756f 100644
--- a/apps/timo-web/app/[locale]/(main)/statistics/_components/StatisticsCalendar.tsx
+++ b/apps/timo-web/app/[locale]/(main)/statistics/_components/StatisticsCalendar.tsx
@@ -59,13 +59,15 @@ const WEEKDAYS = [
 
 interface StatisticsCalendarProps {
   currentMonth: Date;
-  selectedDate: Date;
+  displayDate: Date;
+  selectedDate: Date | null;
   onSelectDate: (date: Date) => void;
   calendarData: StatisticsCalendarResponse;
 }
 
 export const StatisticsCalendar = ({
   currentMonth,
+  displayDate,
   selectedDate,
   onSelectDate,
   calendarData,
@@ -77,7 +79,7 @@ export const StatisticsCalendar = ({
   const completionRateByDate = new Map(
     calendarData.days.map(({ date, completionRate }) => [date, completionRate]),
   );
-  const selectedDateLabel = formatStatisticsCalendarDate(selectedDate, locale);
+  const selectedDateLabel = formatStatisticsCalendarDate(displayDate, locale);
   const todayTime = getDateTime(today);
 
   return (
@@ -117,7 +119,8 @@ export const StatisticsCalendar = ({
 
           {calendarDates.map((calendarDate) => {
             const dateKey = formatDateKey(calendarDate.date);
-            const isSelected = dateKey === formatDateKey(selectedDate);
+            const isSelected =
+              selectedDate !== null && dateKey === formatDateKey(selectedDate);
             const isFutureDate = getDateTime(calendarDate.date) > todayTime;
             const completionRate = completionRateByDate.get(dateKey) ?? null;
             const status = getIconStatus(completionRate, isFutureDate);
diff --git a/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsCalendarContainer.tsx b/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsCalendarContainer.tsx
index 89b2142b..8b640da3 100644
--- a/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsCalendarContainer.tsx
+++ b/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsCalendarContainer.tsx
@@ -9,7 +9,8 @@ import { formatDateKey } from "@/utils/date/date";
 
 interface StatisticsCalendarContainerProps {
   currentMonth: Date;
-  selectedDate: Date;
+  displayDate: Date;
+  selectedDate: Date | null;
   onSelectDate: (date: Date) => void;
 }
 
@@ -37,6 +38,7 @@ const StatisticsCalendarStatus = ({
 
 export const StatisticsCalendarContainer = ({
   currentMonth,
+  displayDate,
   selectedDate,
   onSelectDate,
 }: StatisticsCalendarContainerProps) => {
@@ -67,6 +69,7 @@ export const StatisticsCalendarContainer = ({
   return (
     <StatisticsCalendar
       currentMonth={currentMonth}
+      displayDate={displayDate}
       selectedDate={selectedDate}
       onSelectDate={onSelectDate}
       calendarData={calendarData}
diff --git a/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsContainer.tsx b/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsContainer.tsx
index bbcd6aba..23611f5c 100644
--- a/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsContainer.tsx
+++ b/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsContainer.tsx
@@ -78,7 +78,8 @@ export const StatisticsContainer = () => {
         <div className="flex min-h-0 flex-1">
           <StatisticsCalendarContainer
             currentMonth={currentMonth}
-            selectedDate={selectedDate}
+            displayDate={selectedDate}
+            selectedDate={sidePanelVariant === "day" ? selectedDate : null}
             onSelectDate={handleSelectDate}
           />
         </div>

From dfbfb5574fdf3a69ed759b19145d1f403975d399 Mon Sep 17 00:00:00 2001
From: yumin-kim4757 <rladbals0211@gmail.com>
Date: Tue, 14 Jul 2026 22:33:54 +0900
Subject: [PATCH 21/75] =?UTF-8?q?fix(web):=20=EB=A9=94=EB=AA=A8=20typo,=20?=
 =?UTF-8?q?=EA=B8=80=EC=9E=90=20=EC=83=89=20=EC=88=98=EC=A0=95=20(#186)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/todo-modal/detail/DetailTodoMemoField.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/timo-web/components/todo-modal/detail/DetailTodoMemoField.tsx b/apps/timo-web/components/todo-modal/detail/DetailTodoMemoField.tsx
index ca36ff68..29f0a04d 100644
--- a/apps/timo-web/components/todo-modal/detail/DetailTodoMemoField.tsx
+++ b/apps/timo-web/components/todo-modal/detail/DetailTodoMemoField.tsx
@@ -30,7 +30,7 @@ export const DetailTodoMemoField = ({
       placeholder={placeholder}
       maxLength={maxLength}
       onChange={(event) => onChange(event.target.value)}
-      className="typo-body-r-14 text-timo-black placeholder:text-timo-gray-700 min-h-20 w-full resize-none overflow-hidden p-1 outline-none"
+      className="typo-headline-r-14 text-timo-gray-700 min-h-20 w-full resize-none overflow-hidden p-1 outline-none"
     />
   );
 };

From 62d9c39c5e71b2f77648c916f123c816a413135b Mon Sep 17 00:00:00 2001
From: yumin-kim4757 <rladbals0211@gmail.com>
Date: Tue, 14 Jul 2026 22:46:50 +0900
Subject: [PATCH 22/75] =?UTF-8?q?refactor(web):=20=EC=83=81=EC=84=B8=20?=
 =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EA=B5=AC=EC=A1=B0=20=EB=A6=AC=EB=B7=B0=20?=
 =?UTF-8?q?=EB=B0=98=EC=98=81=20(#186)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/DetailTodoModalContent.tsx         |  40 ++-----
 .../detail/DetailTodoModalContainer.tsx       | 109 ++++++------------
 .../detail/use-update-todo-submit.ts          |  19 +--
 apps/timo-web/queries/todo/use-detail-todo.ts |  11 --
 4 files changed, 55 insertions(+), 124 deletions(-)
 delete mode 100644 apps/timo-web/queries/todo/use-detail-todo.ts

diff --git a/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx b/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
index 840cb911..84a4ed17 100644
--- a/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
+++ b/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
@@ -1,12 +1,9 @@
 import { DeleteIcon, TrashOnIcon } from "@repo/timo-design-system/icons";
-import { CreateButton, TodoToolbar } from "@repo/timo-design-system/ui";
+import { TodoToolbar } from "@repo/timo-design-system/ui";
 import { useTranslations } from "next-intl";
 import { useState } from "react";
 
-import type {
-  TodoDetailResponse,
-  TodoUpdateRequest,
-} from "@/api/generated/models";
+import type { TodoDetailResponse } from "@/api/generated/models";
 import type { TimeSelection } from "@repo/timo-design-system/ui";
 
 import { OverlayModal } from "@/components/modal/OverlayModal";
@@ -35,7 +32,6 @@ export interface DetailTodoModalContentProps {
   todo: TodoDetailResponse;
   onTogglePlay: () => void;
   onDelete: () => void;
-  onSubmit: (data: TodoUpdateRequest) => void;
 }
 
 export const DetailTodoModalContent = ({
@@ -45,7 +41,6 @@ export const DetailTodoModalContent = ({
   todo,
   onTogglePlay,
   onDelete,
-  onSubmit,
 }: DetailTodoModalContentProps) => {
   const t = useTranslations("Home.detailModal");
   const tCreateModal = useTranslations("Home.createModal");
@@ -62,24 +57,11 @@ export const DetailTodoModalContent = ({
     label: tCommon(`weekday.${weekdayId}`),
   }));
 
-  const handleTogglePlay = () => {
-    onTogglePlay();
-    onClose();
-  };
-
-  const handleDelete = () => {
-    onDelete();
-  };
-
   const handleSelectTime = (nextTime: TimeSelection) => {
     setSelectedTime(nextTime);
     detailTodoForm.selectTime(nextTime);
   };
 
-  const handleSubmit = () => {
-    onSubmit(detailTodoForm.buildUpdateRequest());
-  };
-
   return (
     <OverlayModal
       isOpen={isOpen}
@@ -88,12 +70,7 @@ export const DetailTodoModalContent = ({
       ariaLabel={t("ariaLabel")}
       className="w-124 items-start px-7.5 py-5"
     >
-      <div className="flex w-full justify-between">
-        <CreateButton
-          label={t("save")}
-          disabled={!detailTodoForm.title.trim()}
-          onClick={handleSubmit}
-        />
+      <div className="flex w-full justify-end">
         <button type="button" aria-label={tCommon("close")} onClick={onClose}>
           <DeleteIcon />
         </button>
@@ -129,7 +106,10 @@ export const DetailTodoModalContent = ({
               subtaskInputs={detailTodoForm.subtaskInputs}
               onTitleChange={detailTodoForm.changeTitle}
               onToggleCompleted={detailTodoForm.setIsCompleted}
-              onTogglePlay={handleTogglePlay}
+              onTogglePlay={() => {
+                onTogglePlay();
+                onClose();
+              }}
               onSubtaskInputChange={detailTodoForm.changeSubtaskInput}
               onToggleSubtaskCompleted={detailTodoForm.changeSubtaskCompleted}
               registerSubtaskInputRef={detailTodoForm.registerSubtaskInputRef}
@@ -191,11 +171,7 @@ export const DetailTodoModalContent = ({
                 },
               }}
             />
-            <button
-              type="button"
-              aria-label={t("delete")}
-              onClick={handleDelete}
-            >
+            <button type="button" aria-label={t("delete")} onClick={onDelete}>
               <TrashOnIcon />
             </button>
           </div>
diff --git a/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx b/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx
index 554c2fa9..9695c6f5 100644
--- a/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx
+++ b/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx
@@ -1,107 +1,70 @@
 "use client";
 
-import { useTranslations } from "next-intl";
-import { overlay } from "overlay-kit";
+import { useState } from "react";
 
-import type { TodoUpdateRequest } from "@/api/generated/models";
-import type { UseDetailTodoParams } from "@/queries/todo/use-detail-todo";
 import type { ReactNode } from "react";
 
-import { AnimatedToast } from "@/components/toast/AnimatedToast";
+import { useGetTodoDetail } from "@/api/generated/endpoints/todo/todo";
 import { DetailTodoModalContent } from "@/components/todo-modal/detail/DetailTodoModalContent";
 import { useDeleteTodoSubmit } from "@/hooks/todo-modal/detail/use-delete-todo-submit";
-import { useUpdateTodoSubmit } from "@/hooks/todo-modal/detail/use-update-todo-submit";
-import { useDetailTodo } from "@/queries/todo/use-detail-todo";
 
-export interface DetailTodoModalContainerProps extends UseDetailTodoParams {
+export interface DetailTodoModalContainerProps {
+  todoId: number;
+  date: string;
   onTogglePlay: () => void;
   onDelete: () => void;
   children: (openDetailTodoModal: () => void) => ReactNode;
 }
 
-interface DetailTodoModalQueryProps extends UseDetailTodoParams {
-  isOpen: boolean;
-  onClose: () => void;
-  onExited: () => void;
-  onTogglePlay: () => void;
-  onDelete: () => void;
-}
-
-const DetailTodoModalQuery = ({
-  isOpen,
-  onClose,
-  onExited,
+export const DetailTodoModalContainer = ({
   todoId,
   date,
   onTogglePlay,
   onDelete,
-}: DetailTodoModalQueryProps) => {
-  const tToast = useTranslations("Toast");
-  const { data, isError } = useDetailTodo({ todoId, date });
+  children,
+}: DetailTodoModalContainerProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isMounted, setIsMounted] = useState(false);
+  const { data, isError } = useGetTodoDetail(
+    todoId,
+    { date },
+    { query: { enabled: isMounted } },
+  );
   const { handleDelete } = useDeleteTodoSubmit();
-  const updateTodoSubmit = useUpdateTodoSubmit();
   const todo = data?.data;
 
-  if (isError || !todo) return null;
+  const openDetailTodoModal = () => {
+    setIsMounted(true);
+    setIsOpen(true);
+  };
 
-  const handleDeleteTodo = () => {
+  const closeDetailTodoModal = () => {
+    setIsOpen(false);
+  };
+
+  const deleteTodo = () => {
     handleDelete(todoId, {
       onSuccess: () => {
         onDelete();
-        onClose();
+        closeDetailTodoModal();
       },
     });
   };
 
-  const handleUpdateTodo = (updateData: TodoUpdateRequest) => {
-    updateTodoSubmit.handleUpdate({
-      todoId,
-      date,
-      data: updateData,
-    });
-  };
-
   return (
     <>
-      <DetailTodoModalContent
-        isOpen={isOpen}
-        onClose={onClose}
-        onExited={onExited}
-        todo={todo}
-        onTogglePlay={onTogglePlay}
-        onDelete={handleDeleteTodo}
-        onSubmit={handleUpdateTodo}
-      />
+      {children(openDetailTodoModal)}
 
-      <AnimatedToast
-        isOpen={updateTodoSubmit.isErrorToastOpen}
-        onClose={updateTodoSubmit.closeErrorToast}
-        message={tToast("todoUpdateFailed")}
-      />
+      {isMounted && !isError && todo ? (
+        <DetailTodoModalContent
+          isOpen={isOpen}
+          onClose={closeDetailTodoModal}
+          onExited={() => setIsMounted(false)}
+          todo={todo}
+          onTogglePlay={onTogglePlay}
+          onDelete={deleteTodo}
+        />
+      ) : null}
     </>
   );
 };
-
-export const DetailTodoModalContainer = ({
-  todoId,
-  date,
-  onTogglePlay,
-  onDelete,
-  children,
-}: DetailTodoModalContainerProps) => {
-  const openDetailTodoModal = () => {
-    overlay.open(({ isOpen, close, unmount }) => (
-      <DetailTodoModalQuery
-        isOpen={isOpen}
-        onClose={close}
-        onExited={unmount}
-        todoId={todoId}
-        date={date}
-        onTogglePlay={onTogglePlay}
-        onDelete={onDelete}
-      />
-    ));
-  };
-
-  return <>{children(openDetailTodoModal)}</>;
-};
diff --git a/apps/timo-web/hooks/todo-modal/detail/use-update-todo-submit.ts b/apps/timo-web/hooks/todo-modal/detail/use-update-todo-submit.ts
index c8143d96..32022795 100644
--- a/apps/timo-web/hooks/todo-modal/detail/use-update-todo-submit.ts
+++ b/apps/timo-web/hooks/todo-modal/detail/use-update-todo-submit.ts
@@ -1,7 +1,6 @@
 "use client";
 
 import { useQueryClient } from "@tanstack/react-query";
-import { useState } from "react";
 
 import type { TodoUpdateRequest } from "@/api/generated/models";
 
@@ -17,12 +16,19 @@ export interface UpdateTodoSubmitParams {
   data: TodoUpdateRequest;
 }
 
+export interface UpdateTodoSubmitHandlers {
+  onSuccess?: () => void;
+  onError?: () => void;
+}
+
 export const useUpdateTodoSubmit = () => {
-  const [isErrorToastOpen, setIsErrorToastOpen] = useState(false);
   const { mutate: updateTodo } = useUpdateTodo();
   const queryClient = useQueryClient();
 
-  const handleUpdate = ({ todoId, date, data }: UpdateTodoSubmitParams) => {
+  const handleUpdate = (
+    { todoId, date, data }: UpdateTodoSubmitParams,
+    { onSuccess, onError }: UpdateTodoSubmitHandlers = {},
+  ) => {
     updateTodo(
       { todoId, data },
       {
@@ -31,17 +37,14 @@ export const useUpdateTodoSubmit = () => {
           queryClient.invalidateQueries({
             queryKey: getGetTodoDetailQueryKey(todoId, { date }),
           });
+          onSuccess?.();
         },
-        onError: () => {
-          setIsErrorToastOpen(true);
-        },
+        onError,
       },
     );
   };
 
   return {
     handleUpdate,
-    isErrorToastOpen,
-    closeErrorToast: () => setIsErrorToastOpen(false),
   };
 };
diff --git a/apps/timo-web/queries/todo/use-detail-todo.ts b/apps/timo-web/queries/todo/use-detail-todo.ts
deleted file mode 100644
index 0f936fb7..00000000
--- a/apps/timo-web/queries/todo/use-detail-todo.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-"use client";
-
-import { useGetTodoDetail } from "@/api/generated/endpoints/todo/todo";
-
-export interface UseDetailTodoParams {
-  todoId: number;
-  date: string;
-}
-
-export const useDetailTodo = ({ todoId, date }: UseDetailTodoParams) =>
-  useGetTodoDetail(todoId, { date });

From b59931a8cdcb403a03912ad4516bf4df926cf793 Mon Sep 17 00:00:00 2001
From: yumin-kim4757 <rladbals0211@gmail.com>
Date: Tue, 14 Jul 2026 23:10:09 +0900
Subject: [PATCH 23/75] =?UTF-8?q?fix(web):=20=EB=AA=A8=EB=8B=AC=20?=
 =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=88=98=EC=A0=95=20(#1?=
 =?UTF-8?q?86)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create/CreateTodoTaskFields.tsx           |   7 +-
 .../detail/DetailTodoModalContent.tsx         | 131 +++++++++---------
 .../detail/DetailTodoTaskFields.tsx           |  32 +++--
 3 files changed, 87 insertions(+), 83 deletions(-)

diff --git a/apps/timo-web/components/todo-modal/create/CreateTodoTaskFields.tsx b/apps/timo-web/components/todo-modal/create/CreateTodoTaskFields.tsx
index e69118e7..37d7bcbc 100644
--- a/apps/timo-web/components/todo-modal/create/CreateTodoTaskFields.tsx
+++ b/apps/timo-web/components/todo-modal/create/CreateTodoTaskFields.tsx
@@ -37,7 +37,7 @@ export const CreateTodoTaskFields = ({
 }: CreateTodoTaskFieldsProps) => {
   return (
     <div className="flex w-full flex-col items-start gap-1.5">
-      <div className="flex w-full items-center justify-center gap-2">
+      <div className="flex w-full items-center justify-center">
         <Checkbox checked={false} onChange={() => {}} />
         <textarea
           value={titleValue}
@@ -53,10 +53,7 @@ export const CreateTodoTaskFields = ({
       </div>
 
       {subtaskInputs.map((entry, index) => (
-        <div
-          key={entry.id}
-          className="flex w-full items-center justify-center gap-2"
-        >
+        <div key={entry.id} className="flex w-full items-center justify-center">
           <Checkbox checked={false} onChange={() => {}} />
           <textarea
             value={entry.value}
diff --git a/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx b/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
index 84a4ed17..7f9391e2 100644
--- a/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
+++ b/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
@@ -96,7 +96,7 @@ export const DetailTodoModalContent = ({
           />
         </div>
 
-        <div className="flex w-full flex-col">
+        <div className="flex w-full flex-col gap-2">
           <div className="flex w-full flex-col gap-3">
             <div className="bg-timo-gray-500 h-px w-full" />
             <DetailTodoTaskFields
@@ -117,71 +117,76 @@ export const DetailTodoModalContent = ({
             />
           </div>
 
-          <div className="flex items-center gap-2 py-3">
-            <TodoToolbar
-              dateLabel={formatShortDateLabel(detailTodoForm.date)}
-              date={detailTodoForm.date}
-              onDateChange={detailTodoForm.setDate}
-              timeLabel={detailTodoForm.time}
-              timeOptions={DETAIL_TODO_TIME_OPTIONS}
-              time={detailTodoForm.time}
-              onTimeChange={detailTodoForm.setTime}
-              selectedTime={selectedTime}
-              onSelectTime={handleSelectTime}
-              priority={detailTodoForm.priority}
-              priorityLabels={{
-                VERY_HIGH: tCommon("priority.urgent"),
-                HIGH: tCommon("priority.high"),
-                MEDIUM: tCommon("priority.medium"),
-                LOW: tCommon("priority.low"),
-              }}
-              onSelectPriority={detailTodoForm.setPriority}
-              tagLabel={
-                detailTodoForm.selectedTagLabel ?? tCreateModal("tagLabel")
-              }
-              tags={detailTodoForm.tagLabels}
-              selectedTag={detailTodoForm.selectedTagLabel}
-              addTagLabel={tCreateModal("addTag")}
-              onSelectTag={detailTodoForm.handleSelectTag}
-              onAddTagClick={() => {}}
-              hasMemo={Boolean(todo.memo?.trim())}
-              isRepeatActive={detailTodoForm.isRepeatActive}
-              repeat={{
-                frequencyHeading: t("repeatFrequencyHeading"),
-                detailHeading: tCreateModal("repeatDetailHeading"),
-                options: [
-                  { frequency: "DAILY", label: tCreateModal("repeatDaily") },
-                  { frequency: "WEEKLY", label: tCreateModal("repeatWeekly") },
-                  {
-                    frequency: "MONTHLY",
-                    label: tCreateModal("repeatMonthly"),
+          <div className="flex flex-col gap-3">
+            <div className="flex items-center gap-2 py-3">
+              <TodoToolbar
+                dateLabel={formatShortDateLabel(detailTodoForm.date)}
+                date={detailTodoForm.date}
+                onDateChange={detailTodoForm.setDate}
+                timeLabel={detailTodoForm.time}
+                timeOptions={DETAIL_TODO_TIME_OPTIONS}
+                time={detailTodoForm.time}
+                onTimeChange={detailTodoForm.setTime}
+                selectedTime={selectedTime}
+                onSelectTime={handleSelectTime}
+                priority={detailTodoForm.priority}
+                priorityLabels={{
+                  VERY_HIGH: tCommon("priority.urgent"),
+                  HIGH: tCommon("priority.high"),
+                  MEDIUM: tCommon("priority.medium"),
+                  LOW: tCommon("priority.low"),
+                }}
+                onSelectPriority={detailTodoForm.setPriority}
+                tagLabel={
+                  detailTodoForm.selectedTagLabel ?? tCreateModal("tagLabel")
+                }
+                tags={detailTodoForm.tagLabels}
+                selectedTag={detailTodoForm.selectedTagLabel}
+                addTagLabel={tCreateModal("addTag")}
+                onSelectTag={detailTodoForm.handleSelectTag}
+                onAddTagClick={() => {}}
+                hasMemo={Boolean(todo.memo?.trim())}
+                isRepeatActive={detailTodoForm.isRepeatActive}
+                repeat={{
+                  frequencyHeading: t("repeatFrequencyHeading"),
+                  detailHeading: tCreateModal("repeatDetailHeading"),
+                  options: [
+                    { frequency: "DAILY", label: tCreateModal("repeatDaily") },
+                    {
+                      frequency: "WEEKLY",
+                      label: tCreateModal("repeatWeekly"),
+                    },
+                    {
+                      frequency: "MONTHLY",
+                      label: tCreateModal("repeatMonthly"),
+                    },
+                  ],
+                  frequency: detailTodoForm.repeatFrequency,
+                  onFrequencyChange: detailTodoForm.changeRepeatFrequency,
+                  weekly: {
+                    weekdays,
+                    selectedWeekdayIds: detailTodoForm.selectedWeekdayIds,
+                    onWeekdayToggle: detailTodoForm.toggleWeekday,
                   },
-                ],
-                frequency: detailTodoForm.repeatFrequency,
-                onFrequencyChange: detailTodoForm.changeRepeatFrequency,
-                weekly: {
-                  weekdays,
-                  selectedWeekdayIds: detailTodoForm.selectedWeekdayIds,
-                  onWeekdayToggle: detailTodoForm.toggleWeekday,
-                },
-                monthly: {
-                  repeatDayLabel: t("repeatDayLabel"),
-                  repeatDay: detailTodoForm.repeatDay,
-                  onRepeatDayChange: detailTodoForm.setRepeatDay,
-                },
-              }}
+                  monthly: {
+                    repeatDayLabel: t("repeatDayLabel"),
+                    repeatDay: detailTodoForm.repeatDay,
+                    onRepeatDayChange: detailTodoForm.setRepeatDay,
+                  },
+                }}
+              />
+              <button type="button" aria-label={t("delete")} onClick={onDelete}>
+                <TrashOnIcon />
+              </button>
+            </div>
+
+            <DetailTodoMemoField
+              value={detailTodoForm.memo}
+              placeholder={tCreateModal("notePlaceholder")}
+              onChange={detailTodoForm.setMemo}
+              maxLength={DETAIL_TODO_MEMO_MAX_LENGTH}
             />
-            <button type="button" aria-label={t("delete")} onClick={onDelete}>
-              <TrashOnIcon />
-            </button>
           </div>
-
-          <DetailTodoMemoField
-            value={detailTodoForm.memo}
-            placeholder={tCreateModal("notePlaceholder")}
-            onChange={detailTodoForm.setMemo}
-            maxLength={DETAIL_TODO_MEMO_MAX_LENGTH}
-          />
         </div>
       </div>
     </OverlayModal>
diff --git a/apps/timo-web/components/todo-modal/detail/DetailTodoTaskFields.tsx b/apps/timo-web/components/todo-modal/detail/DetailTodoTaskFields.tsx
index 950830db..4b9980b2 100644
--- a/apps/timo-web/components/todo-modal/detail/DetailTodoTaskFields.tsx
+++ b/apps/timo-web/components/todo-modal/detail/DetailTodoTaskFields.tsx
@@ -64,24 +64,26 @@ export const DetailTodoTaskFields = ({
           />
         </div>
 
-        <PlayButton
-          variant={timerStatus === "RUNNING" ? "stop" : "play"}
-          size="lg"
-          disabled={isCompleted}
-          onClick={onTogglePlay}
-        >
-          {isCompleted ? (
-            <PlayDisabledIcon width={24} height={24} />
-          ) : timerStatus === "RUNNING" ? (
-            <StopIcon width={24} height={24} />
-          ) : (
-            <PlayIcon width={24} height={24} />
-          )}
-        </PlayButton>
+        <div className="shrink-0">
+          <PlayButton
+            variant={timerStatus === "RUNNING" ? "stop" : "play"}
+            size="lg"
+            disabled={isCompleted}
+            onClick={onTogglePlay}
+          >
+            {isCompleted ? (
+              <PlayDisabledIcon width={24} height={24} />
+            ) : timerStatus === "RUNNING" ? (
+              <StopIcon width={24} height={24} />
+            ) : (
+              <PlayIcon width={24} height={24} />
+            )}
+          </PlayButton>
+        </div>
       </div>
 
       {subtaskInputs.length > 0 && (
-        <div className="flex flex-col gap-2">
+        <div className="flex flex-col">
           {subtaskInputs.map((subtask, index) => (
             <div key={subtask.id} className="flex items-center gap-2">
               <Checkbox

From e028815bec848a6a95b8b5b24ff20e6062a5e122 Mon Sep 17 00:00:00 2001
From: kimminna <kmina121777@naver.com>
Date: Tue, 14 Jul 2026 23:44:04 +0900
Subject: [PATCH 24/75] =?UTF-8?q?feat(web):=20Add=20task=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=EC=97=90=20=ED=88=AC=EB=91=90=2020=EA=B0=9C=20?=
 =?UTF-8?q?=EC=A0=9C=ED=95=9C=20=ED=86=A0=EC=8A=A4=ED=8A=B8=EB=A5=BC=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80=ED=95=9C=EB=8B=A4=20(#196)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 해당 날짜 투두 총 개수가 20개 이상이면 Add task 클릭 시 모달을 열지 않고 안내 토스트를 노출했습니다
- Today/Home 화면의 Add task 버튼에 동일 로직을 적용했습니다
- 안내 토스트 문구를 완료 여부와 무관한 전체 개수 기준으로 수정했습니다
---
 .../todo-card/HomeDayHeaderContainer.tsx      |  2 +-
 .../_containers/TodayDateHeaderContainer.tsx  |  1 +
 .../create/CreateTodoModalContainer.tsx       | 28 +++++++++++++++++++
 apps/timo-web/messages/en.json                |  4 +--
 apps/timo-web/messages/ko.json                |  4 +--
 5 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/todo-card/HomeDayHeaderContainer.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/todo-card/HomeDayHeaderContainer.tsx
index d7c51203..9d2fb32a 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/todo-card/HomeDayHeaderContainer.tsx
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/todo-card/HomeDayHeaderContainer.tsx
@@ -39,7 +39,7 @@ export const HomeDayHeaderContainer = ({
         totalCount={totalCount}
         completedCount={completedCount}
       />
-      <CreateTodoModalContainer defaultDate={date} />
+      <CreateTodoModalContainer defaultDate={date} totalCount={totalCount} />
     </div>
   );
 };
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayDateHeaderContainer.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayDateHeaderContainer.tsx
index 42128418..36237f0a 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayDateHeaderContainer.tsx
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayDateHeaderContainer.tsx
@@ -42,6 +42,7 @@ export const TodayDateHeaderContainer = ({
       <CreateTodoModalContainer
         defaultDate={today}
         buttonVariant="big"
+        totalCount={totalCount}
         onSubmit={handleSubmit}
       />
       <AnimatedToast
diff --git a/apps/timo-web/components/todo-modal/create/CreateTodoModalContainer.tsx b/apps/timo-web/components/todo-modal/create/CreateTodoModalContainer.tsx
index d342dd55..88607826 100644
--- a/apps/timo-web/components/todo-modal/create/CreateTodoModalContainer.tsx
+++ b/apps/timo-web/components/todo-modal/create/CreateTodoModalContainer.tsx
@@ -3,6 +3,7 @@
 import { AddTaskButton } from "@repo/timo-design-system/ui";
 import { useTranslations } from "next-intl";
 import { overlay } from "overlay-kit";
+import { useState } from "react";
 
 import type { CreateTodoRequest } from "@/api/common/todo-schema";
 
@@ -10,24 +11,34 @@ import { AnimatedToast } from "@/components/toast/AnimatedToast";
 import { CreateTodoModalContent } from "@/components/todo-modal/create/CreateTodoModalContent";
 import { useCreateTodoSubmit } from "@/hooks/todo-modal/use-create-todo-submit";
 
+const MAX_TODO_COUNT = 20;
+
 export interface CreateTodoModalContainerProps {
   defaultDate?: Date;
   buttonVariant?: "default" | "big";
+  totalCount?: number;
   onSubmit?: (data: CreateTodoRequest) => void;
 }
 
 export const CreateTodoModalContainer = ({
   defaultDate,
   buttonVariant = "default",
+  totalCount = 0,
   onSubmit,
 }: CreateTodoModalContainerProps) => {
   const t = useTranslations("Home");
   const tToast = useTranslations("Toast");
   const { handleSubmit, isErrorToastOpen, closeErrorToast } =
     useCreateTodoSubmit();
+  const [isTodoLimitToastOpen, setIsTodoLimitToastOpen] = useState(false);
   const submitTodo = onSubmit ?? handleSubmit;
 
   const handleAddClick = () => {
+    if (totalCount >= MAX_TODO_COUNT) {
+      setIsTodoLimitToastOpen(true);
+      return;
+    }
+
     overlay.open(({ isOpen, close, unmount }) => (
       <CreateTodoModalContent
         isOpen={isOpen}
@@ -52,6 +63,23 @@ export const CreateTodoModalContainer = ({
         onClose={closeErrorToast}
         message={tToast("todoCreateFailed")}
       />
+
+      <AnimatedToast
+        isOpen={isTodoLimitToastOpen}
+        onClose={() => setIsTodoLimitToastOpen(false)}
+        message={
+          <>
+            <p className="mb-0">
+              {tToast.rich("todoLimitLine1", {
+                blue: (chunks) => (
+                  <span className="text-timo-blue-300">{chunks}</span>
+                ),
+              })}
+            </p>
+            <p>{tToast("todoLimitLine2")}</p>
+          </>
+        }
+      />
     </>
   );
 };
diff --git a/apps/timo-web/messages/en.json b/apps/timo-web/messages/en.json
index b39c182b..bdfc028b 100644
--- a/apps/timo-web/messages/en.json
+++ b/apps/timo-web/messages/en.json
@@ -129,8 +129,8 @@
   },
   "Toast": {
     "tagLimit": "You can create up to <blue>8 tags</blue>, and to add more, please delete existing tags.",
-    "todoLimitLine1": "You can add up to <blue>20 incomplete to-dos</blue>.",
-    "todoLimitLine2": "To add a new to-do, please complete an existing one.",
+    "todoLimitLine1": "You can add up to <blue>20 to-dos</blue> per day.",
+    "todoLimitLine2": "To add a new to-do, please delete an existing one.",
     "onboardingSubmitFailed": "Failed to save onboarding. Please try again.",
     "todoCreateFailed": "Failed to create the to-do. Please try again.",
     "aiDurationRecommendFailed": "Failed to get the AI duration recommendation. Please try again.",
diff --git a/apps/timo-web/messages/ko.json b/apps/timo-web/messages/ko.json
index 7cf349f1..0a33677e 100644
--- a/apps/timo-web/messages/ko.json
+++ b/apps/timo-web/messages/ko.json
@@ -129,8 +129,8 @@
   },
   "Toast": {
     "tagLimit": "태그는 <blue>최대 8개</blue>까지 만들 수 있으며, 추가하려면 기존 태그를 삭제해 주세요.",
-    "todoLimitLine1": "완료되지 않은 투두는 <blue>최대 20개</blue>까지 추가할 수 있어요.",
-    "todoLimitLine2": "새로운 투두를 추가하려면 기존 투두를 완료해주세요.",
+    "todoLimitLine1": "투두는 하루에 <blue>최대 20개</blue>까지 추가할 수 있어요.",
+    "todoLimitLine2": "새로운 투두를 추가하려면 기존 투두를 삭제해주세요.",
     "onboardingSubmitFailed": "온보딩 저장에 실패했어요. 다시 시도해 주세요.",
     "todoCreateFailed": "투두 생성에 실패했어요. 다시 시도해 주세요.",
     "aiDurationRecommendFailed": "AI 추천 소요 시간을 가져오지 못했어요. 다시 시도해 주세요.",

From 842debf3a17ef2d43b73190380397be23c3de824 Mon Sep 17 00:00:00 2001
From: kimminna <kmina121777@naver.com>
Date: Tue, 14 Jul 2026 23:44:50 +0900
Subject: [PATCH 25/75] =?UTF-8?q?style(web):=20=EC=83=9D=EC=84=B1=20?=
 =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EC=B2=B4=ED=81=AC=EB=B0=95=EC=8A=A4?=
 =?UTF-8?q?=EC=9D=98=20=ED=81=B4=EB=A6=AD=20=EB=B6=88=EA=B0=80=20=EC=BB=A4?=
 =?UTF-8?q?=EC=84=9C=EB=A5=BC=20=EC=88=98=EC=A0=95=ED=95=9C=EB=8B=A4=20(#1?=
 =?UTF-8?q?96)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 클릭이 동작하지 않는 생성 모달 체크박스에서 cursor-pointer를 제거했습니다
---
 .../todo-modal/create/CreateTodoTaskFields.tsx       | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/apps/timo-web/components/todo-modal/create/CreateTodoTaskFields.tsx b/apps/timo-web/components/todo-modal/create/CreateTodoTaskFields.tsx
index e69118e7..4216658a 100644
--- a/apps/timo-web/components/todo-modal/create/CreateTodoTaskFields.tsx
+++ b/apps/timo-web/components/todo-modal/create/CreateTodoTaskFields.tsx
@@ -38,7 +38,11 @@ export const CreateTodoTaskFields = ({
   return (
     <div className="flex w-full flex-col items-start gap-1.5">
       <div className="flex w-full items-center justify-center gap-2">
-        <Checkbox checked={false} onChange={() => {}} />
+        <Checkbox
+          checked={false}
+          onChange={() => {}}
+          className="cursor-default"
+        />
         <textarea
           value={titleValue}
           ref={resizeTextarea}
@@ -57,7 +61,11 @@ export const CreateTodoTaskFields = ({
           key={entry.id}
           className="flex w-full items-center justify-center gap-2"
         >
-          <Checkbox checked={false} onChange={() => {}} />
+          <Checkbox
+            checked={false}
+            onChange={() => {}}
+            className="cursor-default"
+          />
           <textarea
             value={entry.value}
             ref={registerSubtaskInputRef(index)}

From d8ee8dcc2e2c98115e7fbb881de558b74ed04fa8 Mon Sep 17 00:00:00 2001
From: yumin-kim4757 <rladbals0211@gmail.com>
Date: Wed, 15 Jul 2026 00:26:27 +0900
Subject: [PATCH 26/75] =?UTF-8?q?refactor(web):=20=EC=83=81=EC=84=B8=20?=
 =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EC=88=98=EC=A0=95=20=EC=9A=94=EC=B2=AD=20?=
 =?UTF-8?q?=EC=83=9D=EC=84=B1=20=EB=A1=9C=EC=A7=81=20=EC=A0=95=EB=A6=AC=20?=
 =?UTF-8?q?(#186)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../todo-modal/detail/use-detail-todo-form.ts | 59 +++++++++++++++----
 1 file changed, 46 insertions(+), 13 deletions(-)

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 f97730f2..64011cb0 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
@@ -5,6 +5,7 @@ import type {
   TodoDetailResponse,
   TodoUpdateRequest,
 } from "@/api/generated/models";
+import type { BuildDetailTodoUpdateRequestParams } from "@/utils/todo/detail-todo-update-request";
 import type {
   PriorityLevel,
   RepeatFrequency,
@@ -80,6 +81,9 @@ export interface UseDetailTodoFormParams {
   todo: TodoDetailResponse;
 }
 
+export type DetailTodoUpdateRequestOverrides =
+  Partial<BuildDetailTodoUpdateRequestParams>;
+
 export const useDetailTodoForm = ({ todo }: UseDetailTodoFormParams) => {
   const durationText = convertDurationToTimeText(todo.durationSeconds ?? 0);
   const todoIcon = todo.icon ?? null;
@@ -148,17 +152,20 @@ export const useDetailTodoForm = ({ todo }: UseDetailTodoFormParams) => {
   };
 
   const selectTime = (nextTime: TimeSelection) => {
-    if (nextTime === "ai") return;
+    if (nextTime === "ai") return undefined;
 
     const option = DETAIL_TODO_TIME_OPTIONS.find(
       (item) => item.minute === nextTime,
     );
 
-    if (!option) return;
+    if (!option) return undefined;
 
-    timeField.onChange(
-      convertSecondsToApiDuration(option.minute * SECONDS_PER_MINUTE),
+    const time = convertSecondsToApiDuration(
+      option.minute * SECONDS_PER_MINUTE,
     );
+    timeField.onChange(time);
+
+    return time;
   };
 
   const changeRepeatFrequency = (frequency: RepeatFrequency) => {
@@ -167,15 +174,38 @@ export const useDetailTodoForm = ({ todo }: UseDetailTodoFormParams) => {
   };
 
   const toggleWeekday = (weekdayId: string) => {
-    selectedWeekdayIdsField.onChange(
-      selectedWeekdayIdsField.value.includes(weekdayId)
-        ? selectedWeekdayIdsField.value.filter((item) => item !== weekdayId)
-        : [...selectedWeekdayIdsField.value, weekdayId],
+    const nextWeekdayIds = selectedWeekdayIdsField.value.includes(weekdayId)
+      ? selectedWeekdayIdsField.value.filter((item) => item !== weekdayId)
+      : [...selectedWeekdayIdsField.value, weekdayId];
+
+    selectedWeekdayIdsField.onChange(nextWeekdayIds);
+
+    return nextWeekdayIds;
+  };
+
+  const handleSelectTag = (label: string) => {
+    const option = tagField.tagOptions.find((item) => item.label === label);
+    if (!option) return null;
+
+    tagField.handleSelectTag(label);
+
+    return option.id;
+  };
+
+  const changeSubtaskCompleted = (id: number, completed: boolean) => {
+    const nextSubtasks = subtaskField.subtaskInputs.map((subtask) =>
+      subtask.id === id ? { ...subtask, completed } : subtask,
     );
+
+    subtaskField.handleCompletedChange(id, completed);
+
+    return nextSubtasks;
   };
 
-  const buildUpdateRequest = (): TodoUpdateRequest => {
-    return buildDetailTodoUpdateRequest({
+  const buildUpdateRequest = (
+    overrides: DetailTodoUpdateRequestOverrides = {},
+  ): TodoUpdateRequest => {
+    const params: BuildDetailTodoUpdateRequestParams = {
       icon: iconField.value,
       title: titleField.value,
       date: dateField.value,
@@ -188,7 +218,10 @@ export const useDetailTodoForm = ({ todo }: UseDetailTodoFormParams) => {
       repeatDay: repeatDayField.value,
       memo: memoField.value,
       subtasks: subtaskField.subtaskInputs,
-    });
+      ...overrides,
+    };
+
+    return buildDetailTodoUpdateRequest(params);
   };
 
   return {
@@ -200,7 +233,7 @@ export const useDetailTodoForm = ({ todo }: UseDetailTodoFormParams) => {
     setPriority: priorityField.onChange,
     tagLabels: tagField.tagLabels,
     selectedTagLabel: tagField.selectedTagLabel,
-    handleSelectTag: tagField.handleSelectTag,
+    handleSelectTag,
     isRepeatActive: isRepeatActiveField.value,
     repeatFrequency: repeatFrequencyField.value,
     selectedWeekdayIds: selectedWeekdayIdsField.value,
@@ -213,7 +246,7 @@ export const useDetailTodoForm = ({ todo }: UseDetailTodoFormParams) => {
     subtaskInputs: subtaskField.subtaskInputs,
     registerSubtaskInputRef: subtaskField.registerInputRef,
     changeSubtaskInput: subtaskField.handleInputChange,
-    changeSubtaskCompleted: subtaskField.handleCompletedChange,
+    changeSubtaskCompleted,
     handleSubtaskInputKeyDown: subtaskField.handleInputKeyDown,
     memo: memoField.value,
     setMemo: memoField.onChange,

From 6d97ff43770cbf88c5d18a9095bfee419deaa096 Mon Sep 17 00:00:00 2001
From: yumin-kim4757 <rladbals0211@gmail.com>
Date: Wed, 15 Jul 2026 00:28:17 +0900
Subject: [PATCH 27/75] =?UTF-8?q?feat(web):=20=EC=83=81=EC=84=B8=20?=
 =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EC=A6=89=EC=8B=9C=20=EC=88=98=EC=A0=95=20?=
 =?UTF-8?q?=EC=A0=80=EC=9E=A5=20=EC=97=B0=EA=B2=B0=20(#186)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/DetailTodoModalContent.tsx         | 97 ++++++++++++++++---
 .../detail/DetailTodoModalContainer.tsx       | 27 ++++++
 2 files changed, 111 insertions(+), 13 deletions(-)

diff --git a/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx b/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
index 7f9391e2..20c84fcd 100644
--- a/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
+++ b/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
@@ -3,8 +3,16 @@ import { TodoToolbar } from "@repo/timo-design-system/ui";
 import { useTranslations } from "next-intl";
 import { useState } from "react";
 
-import type { TodoDetailResponse } from "@/api/generated/models";
-import type { TimeSelection } from "@repo/timo-design-system/ui";
+import type {
+  TodoDetailResponse,
+  TodoUpdateRequest,
+} from "@/api/generated/models";
+import type {
+  PriorityLevel,
+  RepeatFrequency,
+  TimeSelection,
+  TodoIconValue,
+} from "@repo/timo-design-system/ui";
 
 import { OverlayModal } from "@/components/modal/OverlayModal";
 import { TodoIconField } from "@/components/todo-modal/common/TodoIconField";
@@ -13,6 +21,7 @@ import { DetailTodoTaskFields } from "@/components/todo-modal/detail/DetailTodoT
 import {
   DETAIL_TODO_TIME_OPTIONS,
   DETAIL_TODO_WEEKDAY_IDS,
+  type DetailTodoUpdateRequestOverrides,
   useDetailTodoForm,
 } from "@/hooks/todo-modal/detail/use-detail-todo-form";
 import { formatShortDateLabel } from "@/utils/date/date";
@@ -32,6 +41,7 @@ export interface DetailTodoModalContentProps {
   todo: TodoDetailResponse;
   onTogglePlay: () => void;
   onDelete: () => void;
+  onUpdate: (data: TodoUpdateRequest) => void;
 }
 
 export const DetailTodoModalContent = ({
@@ -41,6 +51,7 @@ export const DetailTodoModalContent = ({
   todo,
   onTogglePlay,
   onDelete,
+  onUpdate,
 }: DetailTodoModalContentProps) => {
   const t = useTranslations("Home.detailModal");
   const tCreateModal = useTranslations("Home.createModal");
@@ -57,9 +68,69 @@ export const DetailTodoModalContent = ({
     label: tCommon(`weekday.${weekdayId}`),
   }));
 
+  const updateTodo = (overrides: DetailTodoUpdateRequestOverrides = {}) => {
+    const updateData = detailTodoForm.buildUpdateRequest(overrides);
+    if (!updateData.title?.trim()) return;
+
+    onUpdate(updateData);
+  };
+
+  const handleSelectIcon = (nextIcon: TodoIconValue) => {
+    detailTodoForm.selectIcon(nextIcon);
+    updateTodo({ icon: nextIcon });
+  };
+
+  const handleRemoveIcon = () => {
+    detailTodoForm.removeIcon();
+    updateTodo({ icon: null });
+  };
+
   const handleSelectTime = (nextTime: TimeSelection) => {
     setSelectedTime(nextTime);
-    detailTodoForm.selectTime(nextTime);
+    const time = detailTodoForm.selectTime(nextTime);
+
+    if (time) updateTodo({ time });
+  };
+
+  const handleDateChange = (nextDate: Date) => {
+    detailTodoForm.setDate(nextDate);
+    updateTodo({ date: nextDate });
+  };
+
+  const handleTimeChange = (time: string) => {
+    detailTodoForm.setTime(time);
+    updateTodo({ time });
+  };
+
+  const handleSelectPriority = (priority: PriorityLevel) => {
+    detailTodoForm.setPriority(priority);
+    updateTodo({ priority });
+  };
+
+  const handleSelectTag = (label: string) => {
+    const tagId = detailTodoForm.handleSelectTag(label);
+
+    if (tagId !== null) updateTodo({ tagId });
+  };
+
+  const handleRepeatFrequencyChange = (repeatFrequency: RepeatFrequency) => {
+    detailTodoForm.changeRepeatFrequency(repeatFrequency);
+    updateTodo({ isRepeatActive: true, repeatFrequency });
+  };
+
+  const handleWeekdayToggle = (weekdayId: string) => {
+    const selectedWeekdayIds = detailTodoForm.toggleWeekday(weekdayId);
+    updateTodo({ selectedWeekdayIds });
+  };
+
+  const handleRepeatDayChange = (repeatDay: string) => {
+    detailTodoForm.setRepeatDay(repeatDay);
+    updateTodo({ repeatDay });
+  };
+
+  const handleSubtaskCompletedChange = (id: number, completed: boolean) => {
+    const subtasks = detailTodoForm.changeSubtaskCompleted(id, completed);
+    updateTodo({ subtasks });
   };
 
   return (
@@ -91,8 +162,8 @@ export const DetailTodoModalContent = ({
             addIconLabel={tCreateModal("addIcon")}
             onOpenPanel={() => setIsIconPanelOpen(true)}
             onTogglePanel={() => setIsIconPanelOpen((prev) => !prev)}
-            onSelectIcon={detailTodoForm.selectIcon}
-            onRemoveIcon={detailTodoForm.removeIcon}
+            onSelectIcon={handleSelectIcon}
+            onRemoveIcon={handleRemoveIcon}
           />
         </div>
 
@@ -111,7 +182,7 @@ export const DetailTodoModalContent = ({
                 onClose();
               }}
               onSubtaskInputChange={detailTodoForm.changeSubtaskInput}
-              onToggleSubtaskCompleted={detailTodoForm.changeSubtaskCompleted}
+              onToggleSubtaskCompleted={handleSubtaskCompletedChange}
               registerSubtaskInputRef={detailTodoForm.registerSubtaskInputRef}
               onSubtaskInputKeyDown={detailTodoForm.handleSubtaskInputKeyDown}
             />
@@ -122,11 +193,11 @@ export const DetailTodoModalContent = ({
               <TodoToolbar
                 dateLabel={formatShortDateLabel(detailTodoForm.date)}
                 date={detailTodoForm.date}
-                onDateChange={detailTodoForm.setDate}
+                onDateChange={handleDateChange}
                 timeLabel={detailTodoForm.time}
                 timeOptions={DETAIL_TODO_TIME_OPTIONS}
                 time={detailTodoForm.time}
-                onTimeChange={detailTodoForm.setTime}
+                onTimeChange={handleTimeChange}
                 selectedTime={selectedTime}
                 onSelectTime={handleSelectTime}
                 priority={detailTodoForm.priority}
@@ -136,14 +207,14 @@ export const DetailTodoModalContent = ({
                   MEDIUM: tCommon("priority.medium"),
                   LOW: tCommon("priority.low"),
                 }}
-                onSelectPriority={detailTodoForm.setPriority}
+                onSelectPriority={handleSelectPriority}
                 tagLabel={
                   detailTodoForm.selectedTagLabel ?? tCreateModal("tagLabel")
                 }
                 tags={detailTodoForm.tagLabels}
                 selectedTag={detailTodoForm.selectedTagLabel}
                 addTagLabel={tCreateModal("addTag")}
-                onSelectTag={detailTodoForm.handleSelectTag}
+                onSelectTag={handleSelectTag}
                 onAddTagClick={() => {}}
                 hasMemo={Boolean(todo.memo?.trim())}
                 isRepeatActive={detailTodoForm.isRepeatActive}
@@ -162,16 +233,16 @@ export const DetailTodoModalContent = ({
                     },
                   ],
                   frequency: detailTodoForm.repeatFrequency,
-                  onFrequencyChange: detailTodoForm.changeRepeatFrequency,
+                  onFrequencyChange: handleRepeatFrequencyChange,
                   weekly: {
                     weekdays,
                     selectedWeekdayIds: detailTodoForm.selectedWeekdayIds,
-                    onWeekdayToggle: detailTodoForm.toggleWeekday,
+                    onWeekdayToggle: handleWeekdayToggle,
                   },
                   monthly: {
                     repeatDayLabel: t("repeatDayLabel"),
                     repeatDay: detailTodoForm.repeatDay,
-                    onRepeatDayChange: detailTodoForm.setRepeatDay,
+                    onRepeatDayChange: handleRepeatDayChange,
                   },
                 }}
               />
diff --git a/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx b/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx
index 9695c6f5..5b13fb5b 100644
--- a/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx
+++ b/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx
@@ -1,12 +1,16 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { useState } from "react";
 
+import type { TodoUpdateRequest } from "@/api/generated/models";
 import type { ReactNode } from "react";
 
 import { useGetTodoDetail } from "@/api/generated/endpoints/todo/todo";
+import { AnimatedToast } from "@/components/toast/AnimatedToast";
 import { DetailTodoModalContent } from "@/components/todo-modal/detail/DetailTodoModalContent";
 import { useDeleteTodoSubmit } from "@/hooks/todo-modal/detail/use-delete-todo-submit";
+import { useUpdateTodoSubmit } from "@/hooks/todo-modal/detail/use-update-todo-submit";
 
 export interface DetailTodoModalContainerProps {
   todoId: number;
@@ -23,14 +27,17 @@ export const DetailTodoModalContainer = ({
   onDelete,
   children,
 }: DetailTodoModalContainerProps) => {
+  const tToast = useTranslations("Toast");
   const [isOpen, setIsOpen] = useState(false);
   const [isMounted, setIsMounted] = useState(false);
+  const [isUpdateErrorToastOpen, setIsUpdateErrorToastOpen] = useState(false);
   const { data, isError } = useGetTodoDetail(
     todoId,
     { date },
     { query: { enabled: isMounted } },
   );
   const { handleDelete } = useDeleteTodoSubmit();
+  const { handleUpdate } = useUpdateTodoSubmit();
   const todo = data?.data;
 
   const openDetailTodoModal = () => {
@@ -51,6 +58,19 @@ export const DetailTodoModalContainer = ({
     });
   };
 
+  const updateTodo = (updateData: TodoUpdateRequest) => {
+    handleUpdate(
+      {
+        todoId,
+        date,
+        data: updateData,
+      },
+      {
+        onError: () => setIsUpdateErrorToastOpen(true),
+      },
+    );
+  };
+
   return (
     <>
       {children(openDetailTodoModal)}
@@ -63,8 +83,15 @@ export const DetailTodoModalContainer = ({
           todo={todo}
           onTogglePlay={onTogglePlay}
           onDelete={deleteTodo}
+          onUpdate={updateTodo}
         />
       ) : null}
+
+      <AnimatedToast
+        isOpen={isUpdateErrorToastOpen}
+        onClose={() => setIsUpdateErrorToastOpen(false)}
+        message={tToast("todoUpdateFailed")}
+      />
     </>
   );
 };

From 2bc8ac4e5ee3bba3a45c6496049a5b4e25bb9012 Mon Sep 17 00:00:00 2001
From: yumin-kim4757 <rladbals0211@gmail.com>
Date: Wed, 15 Jul 2026 00:29:08 +0900
Subject: [PATCH 28/75] =?UTF-8?q?feat(web):=20=EC=83=81=EC=84=B8=20?=
 =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20=EB=94=94=EB=B0=94=EC=9A=B4=EC=8A=A4=20=EC=A0=80?=
 =?UTF-8?q?=EC=9E=A5=20=EC=97=B0=EA=B2=B0=20(#186)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/DetailTodoModalContent.tsx         | 44 ++++++++++++++++++-
 1 file changed, 43 insertions(+), 1 deletion(-)

diff --git a/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx b/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
index 20c84fcd..399cf146 100644
--- a/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
+++ b/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
@@ -1,7 +1,7 @@
 import { DeleteIcon, TrashOnIcon } from "@repo/timo-design-system/icons";
 import { TodoToolbar } from "@repo/timo-design-system/ui";
 import { useTranslations } from "next-intl";
-import { useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 
 import type {
   TodoDetailResponse,
@@ -27,6 +27,7 @@ import {
 import { formatShortDateLabel } from "@/utils/date/date";
 
 const DETAIL_TODO_MEMO_MAX_LENGTH = 300;
+const TEXT_UPDATE_DEBOUNCE_MS = 3000;
 type DetailTodoWeekdayId = (typeof DETAIL_TODO_WEEKDAY_IDS)[number];
 
 const isDetailTodoWeekdayId = (
@@ -67,6 +68,47 @@ export const DetailTodoModalContent = ({
     id: weekdayId,
     label: tCommon(`weekday.${weekdayId}`),
   }));
+  const latestOnUpdateRef = useRef(onUpdate);
+  const latestBuildUpdateRequestRef = useRef(detailTodoForm.buildUpdateRequest);
+  const didStartTextUpdateRef = useRef(false);
+  const textUpdateSignature = useMemo(
+    () =>
+      JSON.stringify({
+        title: detailTodoForm.title,
+        memo: detailTodoForm.memo,
+        subtasks: detailTodoForm.subtaskInputs.map((subtask) => ({
+          id: subtask.id,
+          subtaskId: subtask.subtaskId,
+          value: subtask.value,
+        })),
+      }),
+    [detailTodoForm.memo, detailTodoForm.subtaskInputs, detailTodoForm.title],
+  );
+
+  useEffect(() => {
+    latestOnUpdateRef.current = onUpdate;
+  }, [onUpdate]);
+
+  useEffect(() => {
+    latestBuildUpdateRequestRef.current = detailTodoForm.buildUpdateRequest;
+  }, [detailTodoForm.buildUpdateRequest]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    if (!didStartTextUpdateRef.current) {
+      didStartTextUpdateRef.current = true;
+      return;
+    }
+
+    if (!detailTodoForm.title.trim()) return;
+
+    const updateTimer = window.setTimeout(() => {
+      latestOnUpdateRef.current(latestBuildUpdateRequestRef.current());
+    }, TEXT_UPDATE_DEBOUNCE_MS);
+
+    return () => window.clearTimeout(updateTimer);
+  }, [detailTodoForm.title, isOpen, textUpdateSignature]);
 
   const updateTodo = (overrides: DetailTodoUpdateRequestOverrides = {}) => {
     const updateData = detailTodoForm.buildUpdateRequest(overrides);

From fff3ab7feb235194163e05726eb9be5527f843a0 Mon Sep 17 00:00:00 2001
From: yumin-kim4757 <rladbals0211@gmail.com>
Date: Wed, 15 Jul 2026 00:30:28 +0900
Subject: [PATCH 29/75] =?UTF-8?q?fix(web):=20=ED=83=80=EC=9D=B4=EB=A8=B8?=
 =?UTF-8?q?=20=EC=A7=84=ED=96=89=20=EC=A4=91=20=EC=83=81=EC=84=B8=20?=
 =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EC=88=98=EC=A0=95=20=EB=B0=A9=EC=A7=80=20?=
 =?UTF-8?q?(#186)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../todo-modal/detail/DetailTodoMemoField.tsx |  3 ++
 .../detail/DetailTodoModalContent.tsx         | 36 +++++++++++++------
 .../detail/DetailTodoTaskFields.tsx           | 11 +++++-
 3 files changed, 38 insertions(+), 12 deletions(-)

diff --git a/apps/timo-web/components/todo-modal/detail/DetailTodoMemoField.tsx b/apps/timo-web/components/todo-modal/detail/DetailTodoMemoField.tsx
index 29f0a04d..c2cedfed 100644
--- a/apps/timo-web/components/todo-modal/detail/DetailTodoMemoField.tsx
+++ b/apps/timo-web/components/todo-modal/detail/DetailTodoMemoField.tsx
@@ -5,6 +5,7 @@ export interface DetailTodoMemoFieldProps {
   placeholder: string;
   onChange: (value: string) => void;
   maxLength: number;
+  disabled?: boolean;
 }
 
 export const DetailTodoMemoField = ({
@@ -12,6 +13,7 @@ export const DetailTodoMemoField = ({
   placeholder,
   onChange,
   maxLength,
+  disabled = false,
 }: DetailTodoMemoFieldProps) => {
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
@@ -30,6 +32,7 @@ export const DetailTodoMemoField = ({
       placeholder={placeholder}
       maxLength={maxLength}
       onChange={(event) => onChange(event.target.value)}
+      disabled={disabled}
       className="typo-headline-r-14 text-timo-gray-700 min-h-20 w-full resize-none overflow-hidden p-1 outline-none"
     />
   );
diff --git a/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx b/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
index 399cf146..85de321b 100644
--- a/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
+++ b/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
@@ -60,6 +60,7 @@ export const DetailTodoModalContent = ({
   const detailTodoForm = useDetailTodoForm({ todo });
   const [selectedTime, setSelectedTime] = useState<TimeSelection>();
   const [isIconPanelOpen, setIsIconPanelOpen] = useState(false);
+  const canUpdateTodo = todo.timerStatus === "STOPPED";
   const dateNumber = detailTodoForm.date.getDate();
   const dayOfWeek = isDetailTodoWeekdayId(todo.dayOfWeek)
     ? todo.dayOfWeek
@@ -95,6 +96,7 @@ export const DetailTodoModalContent = ({
 
   useEffect(() => {
     if (!isOpen) return;
+    if (!canUpdateTodo) return;
 
     if (!didStartTextUpdateRef.current) {
       didStartTextUpdateRef.current = true;
@@ -108,9 +110,11 @@ export const DetailTodoModalContent = ({
     }, TEXT_UPDATE_DEBOUNCE_MS);
 
     return () => window.clearTimeout(updateTimer);
-  }, [detailTodoForm.title, isOpen, textUpdateSignature]);
+  }, [canUpdateTodo, detailTodoForm.title, isOpen, textUpdateSignature]);
 
   const updateTodo = (overrides: DetailTodoUpdateRequestOverrides = {}) => {
+    if (!canUpdateTodo) return;
+
     const updateData = detailTodoForm.buildUpdateRequest(overrides);
     if (!updateData.title?.trim()) return;
 
@@ -198,15 +202,17 @@ export const DetailTodoModalContent = ({
             </p>
           </div>
 
-          <TodoIconField
-            icon={detailTodoForm.icon}
-            isIconPanelOpen={isIconPanelOpen}
-            addIconLabel={tCreateModal("addIcon")}
-            onOpenPanel={() => setIsIconPanelOpen(true)}
-            onTogglePanel={() => setIsIconPanelOpen((prev) => !prev)}
-            onSelectIcon={handleSelectIcon}
-            onRemoveIcon={handleRemoveIcon}
-          />
+          <div className={canUpdateTodo ? undefined : "pointer-events-none"}>
+            <TodoIconField
+              icon={detailTodoForm.icon}
+              isIconPanelOpen={isIconPanelOpen}
+              addIconLabel={tCreateModal("addIcon")}
+              onOpenPanel={() => setIsIconPanelOpen(true)}
+              onTogglePanel={() => setIsIconPanelOpen((prev) => !prev)}
+              onSelectIcon={handleSelectIcon}
+              onRemoveIcon={handleRemoveIcon}
+            />
+          </div>
         </div>
 
         <div className="flex w-full flex-col gap-2">
@@ -215,6 +221,7 @@ export const DetailTodoModalContent = ({
             <DetailTodoTaskFields
               titleValue={detailTodoForm.title}
               isCompleted={detailTodoForm.isCompleted}
+              disabled={!canUpdateTodo}
               timerStatus={todo.timerStatus}
               subtaskInputs={detailTodoForm.subtaskInputs}
               onTitleChange={detailTodoForm.changeTitle}
@@ -231,7 +238,13 @@ export const DetailTodoModalContent = ({
           </div>
 
           <div className="flex flex-col gap-3">
-            <div className="flex items-center gap-2 py-3">
+            <div
+              className={
+                canUpdateTodo
+                  ? "flex items-center gap-2 py-3"
+                  : "pointer-events-none flex items-center gap-2 py-3"
+              }
+            >
               <TodoToolbar
                 dateLabel={formatShortDateLabel(detailTodoForm.date)}
                 date={detailTodoForm.date}
@@ -298,6 +311,7 @@ export const DetailTodoModalContent = ({
               placeholder={tCreateModal("notePlaceholder")}
               onChange={detailTodoForm.setMemo}
               maxLength={DETAIL_TODO_MEMO_MAX_LENGTH}
+              disabled={!canUpdateTodo}
             />
           </div>
         </div>
diff --git a/apps/timo-web/components/todo-modal/detail/DetailTodoTaskFields.tsx b/apps/timo-web/components/todo-modal/detail/DetailTodoTaskFields.tsx
index 4b9980b2..c71235c8 100644
--- a/apps/timo-web/components/todo-modal/detail/DetailTodoTaskFields.tsx
+++ b/apps/timo-web/components/todo-modal/detail/DetailTodoTaskFields.tsx
@@ -18,6 +18,7 @@ const resizeTextarea = (element: HTMLTextAreaElement | null) => {
 export interface DetailTodoTaskFieldsProps {
   titleValue: string;
   isCompleted: boolean;
+  disabled?: boolean;
   timerStatus: TodoDetailResponseTimerStatus;
   subtaskInputs: DetailTodoSubtaskInput[];
   onTitleChange: (value: string) => void;
@@ -37,6 +38,7 @@ export interface DetailTodoTaskFieldsProps {
 export const DetailTodoTaskFields = ({
   titleValue,
   isCompleted,
+  disabled = false,
   timerStatus,
   subtaskInputs,
   onTitleChange,
@@ -51,7 +53,11 @@ 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} onChange={onToggleCompleted} />
+          <Checkbox
+            checked={isCompleted}
+            disabled={disabled}
+            onChange={onToggleCompleted}
+          />
           <textarea
             value={titleValue}
             ref={resizeTextarea}
@@ -60,6 +66,7 @@ export const DetailTodoTaskFields = ({
               resizeTextarea(event.currentTarget);
             }}
             rows={1}
+            disabled={disabled}
             className="typo-headline-b-14 text-timo-black min-w-0 flex-1 resize-none overflow-hidden wrap-break-word outline-none"
           />
         </div>
@@ -88,6 +95,7 @@ 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)
                 }
@@ -101,6 +109,7 @@ export const DetailTodoTaskFields = ({
                 }}
                 onKeyDown={(event) => onSubtaskInputKeyDown(index, event)}
                 rows={1}
+                disabled={disabled}
                 className="typo-body-r-12 text-timo-gray-700 min-w-0 flex-1 resize-none overflow-hidden wrap-break-word outline-none"
               />
             </div>

From 2e73a4775d84dbfea1b5de37ea20a5ca5095cf06 Mon Sep 17 00:00:00 2001
From: yumin-kim4757 <rladbals0211@gmail.com>
Date: Wed, 15 Jul 2026 00:43:32 +0900
Subject: [PATCH 30/75] =?UTF-8?q?fix(web):=20=EC=88=98=EC=A0=95=20?=
 =?UTF-8?q?=EC=8B=A4=ED=8C=A8=20=ED=86=A0=EC=8A=A4=ED=8A=B8=20=EC=84=9C?=
 =?UTF-8?q?=EB=B2=84=20=EB=A9=94=EC=8B=9C=EC=A7=80=20=ED=91=9C=EC=8B=9C=20?=
 =?UTF-8?q?(#186)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/DetailTodoModalContainer.tsx          | 16 +++++++++++-----
 .../todo-modal/detail/use-update-todo-submit.ts  |  5 +++--
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx b/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx
index 5b13fb5b..6d920be6 100644
--- a/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx
+++ b/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx
@@ -30,7 +30,9 @@ export const DetailTodoModalContainer = ({
   const tToast = useTranslations("Toast");
   const [isOpen, setIsOpen] = useState(false);
   const [isMounted, setIsMounted] = useState(false);
-  const [isUpdateErrorToastOpen, setIsUpdateErrorToastOpen] = useState(false);
+  const [updateErrorMessage, setUpdateErrorMessage] = useState<string | null>(
+    null,
+  );
   const { data, isError } = useGetTodoDetail(
     todoId,
     { date },
@@ -66,7 +68,11 @@ export const DetailTodoModalContainer = ({
         data: updateData,
       },
       {
-        onError: () => setIsUpdateErrorToastOpen(true),
+        onError: (error) => {
+          setUpdateErrorMessage(
+            error.response?.data.message ?? tToast("todoUpdateFailed"),
+          );
+        },
       },
     );
   };
@@ -88,9 +94,9 @@ export const DetailTodoModalContainer = ({
       ) : null}
 
       <AnimatedToast
-        isOpen={isUpdateErrorToastOpen}
-        onClose={() => setIsUpdateErrorToastOpen(false)}
-        message={tToast("todoUpdateFailed")}
+        isOpen={updateErrorMessage !== null}
+        onClose={() => setUpdateErrorMessage(null)}
+        message={updateErrorMessage ?? ""}
       />
     </>
   );
diff --git a/apps/timo-web/hooks/todo-modal/detail/use-update-todo-submit.ts b/apps/timo-web/hooks/todo-modal/detail/use-update-todo-submit.ts
index 32022795..ae7b1f4a 100644
--- a/apps/timo-web/hooks/todo-modal/detail/use-update-todo-submit.ts
+++ b/apps/timo-web/hooks/todo-modal/detail/use-update-todo-submit.ts
@@ -2,7 +2,8 @@
 
 import { useQueryClient } from "@tanstack/react-query";
 
-import type { TodoUpdateRequest } from "@/api/generated/models";
+import type { ErrorType } from "@/api/client/custom-instance";
+import type { ErrorDto, TodoUpdateRequest } from "@/api/generated/models";
 
 import { getGetHomeQueryKey } from "@/api/generated/endpoints/home/home";
 import {
@@ -18,7 +19,7 @@ export interface UpdateTodoSubmitParams {
 
 export interface UpdateTodoSubmitHandlers {
   onSuccess?: () => void;
-  onError?: () => void;
+  onError?: (error: ErrorType<ErrorDto>) => void;
 }
 
 export const useUpdateTodoSubmit = () => {

From 8683dc8facdfe7f8cabca8b9e0833c7775087456 Mon Sep 17 00:00:00 2001
From: jjangminii <wjdals030328@catholic.ac.kr>
Date: Wed, 15 Jul 2026 00:56:07 +0900
Subject: [PATCH 31/75] =?UTF-8?q?chore(web):=20=EC=95=BD=EA=B4=80=20API=20?=
 =?UTF-8?q?=EC=8A=A4=ED=8E=99=20=EB=B3=80=EA=B2=BD=EC=97=90=20=EB=A7=9E?=
 =?UTF-8?q?=EC=B6=B0=20orval=20=EC=BD=94=EB=93=9C=EB=A5=BC=20=EC=9E=AC?=
 =?UTF-8?q?=EC=83=9D=EC=84=B1=ED=95=9C=EB=8B=A4=20(#195)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- getTerms를 getTermsByCondition으로 바뀐 새 API 스펙(type·language 필수, 응답 단일 객체)에 맞게 orval로 재생성했습니다
- 구 스펙 잔재인 termsListResponse, termsResponse, getTermsParams, baseResponseTermsListResponse를 제거했습니다
---
 .../api/generated/endpoints/terms/terms.ts    | 108 +++++++++++-------
 .../generated/endpoints/terms/terms.zod.ts    |  27 ++---
 ....ts => baseResponseTermsDetailResponse.ts} |   6 +-
 ...Params.ts => getTermsByConditionParams.ts} |  10 +-
 apps/timo-web/api/generated/models/index.ts   |   7 +-
 ...ermsResponse.ts => termsDetailResponse.ts} |  14 ++-
 .../api/generated/models/termsListResponse.ts |  13 ---
 7 files changed, 97 insertions(+), 88 deletions(-)
 rename apps/timo-web/api/generated/models/{baseResponseTermsListResponse.ts => baseResponseTermsDetailResponse.ts} (54%)
 rename apps/timo-web/api/generated/models/{getTermsParams.ts => getTermsByConditionParams.ts} (53%)
 rename apps/timo-web/api/generated/models/{termsResponse.ts => termsDetailResponse.ts} (53%)
 delete mode 100644 apps/timo-web/api/generated/models/termsListResponse.ts

diff --git a/apps/timo-web/api/generated/endpoints/terms/terms.ts b/apps/timo-web/api/generated/endpoints/terms/terms.ts
index 78c585c1..46039867 100644
--- a/apps/timo-web/api/generated/endpoints/terms/terms.ts
+++ b/apps/timo-web/api/generated/endpoints/terms/terms.ts
@@ -11,9 +11,9 @@ import { customInstance } from "../../../client/custom-instance";
 
 import type { ErrorType } from "../../../client/custom-instance";
 import type {
-  BaseResponseTermsListResponse,
+  BaseResponseTermsDetailResponse,
   ErrorDto,
-  GetTermsParams,
+  GetTermsByConditionParams,
 } from "../../models";
 import type {
   DataTag,
@@ -48,71 +48,81 @@ const withQueryKey = <T extends object, K>(
 };
 
 /**
- * 서비스 이용약관 및 개인정보 처리방침을 조회합니다.
- * type을 지정하지 않으면 전체 약관을 조회하고, SERVICE 또는 PRIVACY를 지정하면 해당 약관만 조회합니다.
- * @summary 약관 내용 조회
+ * 약관 타입과 언어 기준으로 최신 약관 1건을 조회합니다.
+ * @summary 약관 조건 조회
  */
-export const getTerms = (
-  params?: GetTermsParams,
+export const getTermsByCondition = (
+  params: GetTermsByConditionParams,
   options?: SecondParameter<typeof customInstance>,
   signal?: AbortSignal,
 ) => {
-  return customInstance<BaseResponseTermsListResponse>(
+  return customInstance<BaseResponseTermsDetailResponse>(
     { url: `/api/v1/terms`, method: "GET", params, signal },
     options,
   );
 };
 
-export const getGetTermsQueryKey = (params?: GetTermsParams) => {
+export const getGetTermsByConditionQueryKey = (
+  params?: GetTermsByConditionParams,
+) => {
   return [`/api/v1/terms`, ...(params ? [params] : [])] as const;
 };
 
-export const getGetTermsQueryOptions = <
-  TData = Awaited<ReturnType<typeof getTerms>>,
+export const getGetTermsByConditionQueryOptions = <
+  TData = Awaited<ReturnType<typeof getTermsByCondition>>,
   TError = ErrorType<ErrorDto>,
 >(
-  params?: GetTermsParams,
+  params: GetTermsByConditionParams,
   options?: {
     query?: Partial<
-      UseQueryOptions<Awaited<ReturnType<typeof getTerms>>, TError, TData>
+      UseQueryOptions<
+        Awaited<ReturnType<typeof getTermsByCondition>>,
+        TError,
+        TData
+      >
     >;
     request?: SecondParameter<typeof customInstance>;
   },
 ) => {
   const { query: queryOptions, request: requestOptions } = options ?? {};
 
-  const queryKey = queryOptions?.queryKey ?? getGetTermsQueryKey(params);
+  const queryKey =
+    queryOptions?.queryKey ?? getGetTermsByConditionQueryKey(params);
 
-  const queryFn: QueryFunction<Awaited<ReturnType<typeof getTerms>>> = ({
-    signal,
-  }) => getTerms(params, requestOptions, signal);
+  const queryFn: QueryFunction<
+    Awaited<ReturnType<typeof getTermsByCondition>>
+  > = ({ signal }) => getTermsByCondition(params, requestOptions, signal);
 
   return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
-    Awaited<ReturnType<typeof getTerms>>,
+    Awaited<ReturnType<typeof getTermsByCondition>>,
     TError,
     TData
   > & { queryKey: DataTag<QueryKey, TData, TError> };
 };
 
-export type GetTermsQueryResult = NonNullable<
-  Awaited<ReturnType<typeof getTerms>>
+export type GetTermsByConditionQueryResult = NonNullable<
+  Awaited<ReturnType<typeof getTermsByCondition>>
 >;
-export type GetTermsQueryError = ErrorType<ErrorDto>;
+export type GetTermsByConditionQueryError = ErrorType<ErrorDto>;
 
-export function useGetTerms<
-  TData = Awaited<ReturnType<typeof getTerms>>,
+export function useGetTermsByCondition<
+  TData = Awaited<ReturnType<typeof getTermsByCondition>>,
   TError = ErrorType<ErrorDto>,
 >(
-  params: undefined | GetTermsParams,
+  params: GetTermsByConditionParams,
   options: {
     query: Partial<
-      UseQueryOptions<Awaited<ReturnType<typeof getTerms>>, TError, TData>
+      UseQueryOptions<
+        Awaited<ReturnType<typeof getTermsByCondition>>,
+        TError,
+        TData
+      >
     > &
       Pick<
         DefinedInitialDataOptions<
-          Awaited<ReturnType<typeof getTerms>>,
+          Awaited<ReturnType<typeof getTermsByCondition>>,
           TError,
-          Awaited<ReturnType<typeof getTerms>>
+          Awaited<ReturnType<typeof getTermsByCondition>>
         >,
         "initialData"
       >;
@@ -122,20 +132,24 @@ export function useGetTerms<
 ): DefinedUseQueryResult<TData, TError> & {
   queryKey: DataTag<QueryKey, TData, TError>;
 };
-export function useGetTerms<
-  TData = Awaited<ReturnType<typeof getTerms>>,
+export function useGetTermsByCondition<
+  TData = Awaited<ReturnType<typeof getTermsByCondition>>,
   TError = ErrorType<ErrorDto>,
 >(
-  params?: GetTermsParams,
+  params: GetTermsByConditionParams,
   options?: {
     query?: Partial<
-      UseQueryOptions<Awaited<ReturnType<typeof getTerms>>, TError, TData>
+      UseQueryOptions<
+        Awaited<ReturnType<typeof getTermsByCondition>>,
+        TError,
+        TData
+      >
     > &
       Pick<
         UndefinedInitialDataOptions<
-          Awaited<ReturnType<typeof getTerms>>,
+          Awaited<ReturnType<typeof getTermsByCondition>>,
           TError,
-          Awaited<ReturnType<typeof getTerms>>
+          Awaited<ReturnType<typeof getTermsByCondition>>
         >,
         "initialData"
       >;
@@ -145,14 +159,18 @@ export function useGetTerms<
 ): UseQueryResult<TData, TError> & {
   queryKey: DataTag<QueryKey, TData, TError>;
 };
-export function useGetTerms<
-  TData = Awaited<ReturnType<typeof getTerms>>,
+export function useGetTermsByCondition<
+  TData = Awaited<ReturnType<typeof getTermsByCondition>>,
   TError = ErrorType<ErrorDto>,
 >(
-  params?: GetTermsParams,
+  params: GetTermsByConditionParams,
   options?: {
     query?: Partial<
-      UseQueryOptions<Awaited<ReturnType<typeof getTerms>>, TError, TData>
+      UseQueryOptions<
+        Awaited<ReturnType<typeof getTermsByCondition>>,
+        TError,
+        TData
+      >
     >;
     request?: SecondParameter<typeof customInstance>;
   },
@@ -161,17 +179,21 @@ export function useGetTerms<
   queryKey: DataTag<QueryKey, TData, TError>;
 };
 /**
- * @summary 약관 내용 조회
+ * @summary 약관 조건 조회
  */
 
-export function useGetTerms<
-  TData = Awaited<ReturnType<typeof getTerms>>,
+export function useGetTermsByCondition<
+  TData = Awaited<ReturnType<typeof getTermsByCondition>>,
   TError = ErrorType<ErrorDto>,
 >(
-  params?: GetTermsParams,
+  params: GetTermsByConditionParams,
   options?: {
     query?: Partial<
-      UseQueryOptions<Awaited<ReturnType<typeof getTerms>>, TError, TData>
+      UseQueryOptions<
+        Awaited<ReturnType<typeof getTermsByCondition>>,
+        TError,
+        TData
+      >
     >;
     request?: SecondParameter<typeof customInstance>;
   },
@@ -179,7 +201,7 @@ export function useGetTerms<
 ): UseQueryResult<TData, TError> & {
   queryKey: DataTag<QueryKey, TData, TError>;
 } {
-  const queryOptions = getGetTermsQueryOptions(params, options);
+  const queryOptions = getGetTermsByConditionQueryOptions(params, options);
 
   const query = useQuery(queryOptions, queryClient) as UseQueryResult<
     TData,
diff --git a/apps/timo-web/api/generated/endpoints/terms/terms.zod.ts b/apps/timo-web/api/generated/endpoints/terms/terms.zod.ts
index 85deff25..aa869c7d 100644
--- a/apps/timo-web/api/generated/endpoints/terms/terms.zod.ts
+++ b/apps/timo-web/api/generated/endpoints/terms/terms.zod.ts
@@ -8,29 +8,24 @@
 import * as zod from "zod";
 
 /**
- * 서비스 이용약관 및 개인정보 처리방침을 조회합니다.
- * type을 지정하지 않으면 전체 약관을 조회하고, SERVICE 또는 PRIVACY를 지정하면 해당 약관만 조회합니다.
- * @summary 약관 내용 조회
+ * 약관 타입과 언어 기준으로 최신 약관 1건을 조회합니다.
+ * @summary 약관 조건 조회
  */
-export const GetTermsQueryParams = zod.object({
-  type: zod.string().optional().describe("약관 타입(SERVICE, PRIVACY)"),
+export const GetTermsByConditionQueryParams = zod.object({
+  type: zod.string().describe("약관 타입"),
+  language: zod.string().describe("약관 언어"),
 });
 
-export const GetTermsResponse = zod.object({
+export const GetTermsByConditionResponse = zod.object({
   status: zod.number().optional(),
   message: zod.string().optional(),
   data: zod
     .object({
-      terms: zod
-        .array(
-          zod.object({
-            termsId: zod.number().describe("약관 ID"),
-            type: zod.string().describe("약관 타입"),
-            title: zod.string().describe("약관 제목"),
-            content: zod.string().describe("약관 전문"),
-          }),
-        )
-        .describe("약관 목록"),
+      type: zod.string().optional().describe("약관 타입"),
+      language: zod.string().optional().describe("약관 언어"),
+      version: zod.string().optional().describe("약관 버전"),
+      title: zod.string().optional().describe("약관 제목"),
+      content: zod.string().optional().describe("약관 전문"),
     })
     .optional(),
 });
diff --git a/apps/timo-web/api/generated/models/baseResponseTermsListResponse.ts b/apps/timo-web/api/generated/models/baseResponseTermsDetailResponse.ts
similarity index 54%
rename from apps/timo-web/api/generated/models/baseResponseTermsListResponse.ts
rename to apps/timo-web/api/generated/models/baseResponseTermsDetailResponse.ts
index fa4a1627..c5e7ceaf 100644
--- a/apps/timo-web/api/generated/models/baseResponseTermsListResponse.ts
+++ b/apps/timo-web/api/generated/models/baseResponseTermsDetailResponse.ts
@@ -5,10 +5,10 @@
  * Timo 서버 API 명세서
  * OpenAPI spec version: v1
  */
-import type { TermsListResponse } from "./termsListResponse";
+import type { TermsDetailResponse } from "./termsDetailResponse";
 
-export interface BaseResponseTermsListResponse {
+export interface BaseResponseTermsDetailResponse {
   status?: number;
   message?: string;
-  data?: TermsListResponse;
+  data?: TermsDetailResponse;
 }
diff --git a/apps/timo-web/api/generated/models/getTermsParams.ts b/apps/timo-web/api/generated/models/getTermsByConditionParams.ts
similarity index 53%
rename from apps/timo-web/api/generated/models/getTermsParams.ts
rename to apps/timo-web/api/generated/models/getTermsByConditionParams.ts
index 45e88deb..5387b43a 100644
--- a/apps/timo-web/api/generated/models/getTermsParams.ts
+++ b/apps/timo-web/api/generated/models/getTermsByConditionParams.ts
@@ -6,9 +6,13 @@
  * OpenAPI spec version: v1
  */
 
-export interface GetTermsParams {
+export interface GetTermsByConditionParams {
   /**
-   * 약관 타입(SERVICE, PRIVACY)
+   * 약관 타입
    */
-  type?: string;
+  type: string;
+  /**
+   * 약관 언어
+   */
+  language: string;
 }
diff --git a/apps/timo-web/api/generated/models/index.ts b/apps/timo-web/api/generated/models/index.ts
index b72c72dc..ba4eace1 100644
--- a/apps/timo-web/api/generated/models/index.ts
+++ b/apps/timo-web/api/generated/models/index.ts
@@ -23,7 +23,7 @@ export * from "./baseResponseStatisticsSummaryResponse";
 export * from "./baseResponseSubtaskStatusChangeResponse";
 export * from "./baseResponseTagCreateResponse";
 export * from "./baseResponseTagListResponse";
-export * from "./baseResponseTermsListResponse";
+export * from "./baseResponseTermsDetailResponse";
 export * from "./baseResponseTimerActiveResponse";
 export * from "./baseResponseTimerExtendResponse";
 export * from "./baseResponseTimerFinishResponse";
@@ -50,7 +50,7 @@ export * from "./getCalendarParams";
 export * from "./getDailyParams";
 export * from "./getHomeParams";
 export * from "./getSummaryParams";
-export * from "./getTermsParams";
+export * from "./getTermsByConditionParams";
 export * from "./getTimeBoxesParams";
 export * from "./getTodoDetailParams";
 export * from "./homeResponse";
@@ -71,8 +71,7 @@ export * from "./tagCreateRequest";
 export * from "./tagCreateResponse";
 export * from "./tagListResponse";
 export * from "./tagResponse";
-export * from "./termsListResponse";
-export * from "./termsResponse";
+export * from "./termsDetailResponse";
 export * from "./timeBoxResponse";
 export * from "./timeBoxResponseEndAction";
 export * from "./timeBoxResponseStartAction";
diff --git a/apps/timo-web/api/generated/models/termsResponse.ts b/apps/timo-web/api/generated/models/termsDetailResponse.ts
similarity index 53%
rename from apps/timo-web/api/generated/models/termsResponse.ts
rename to apps/timo-web/api/generated/models/termsDetailResponse.ts
index ab0c58fa..5ab8954d 100644
--- a/apps/timo-web/api/generated/models/termsResponse.ts
+++ b/apps/timo-web/api/generated/models/termsDetailResponse.ts
@@ -6,13 +6,15 @@
  * OpenAPI spec version: v1
  */
 
-export interface TermsResponse {
-  /** 약관 ID */
-  termsId: number;
+export interface TermsDetailResponse {
   /** 약관 타입 */
-  type: string;
+  type?: string;
+  /** 약관 언어 */
+  language?: string;
+  /** 약관 버전 */
+  version?: string;
   /** 약관 제목 */
-  title: string;
+  title?: string;
   /** 약관 전문 */
-  content: string;
+  content?: string;
 }
diff --git a/apps/timo-web/api/generated/models/termsListResponse.ts b/apps/timo-web/api/generated/models/termsListResponse.ts
deleted file mode 100644
index b4775307..00000000
--- a/apps/timo-web/api/generated/models/termsListResponse.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * Generated by orval v8.20.0 🍺
- * Do not edit manually.
- * Timo API
- * Timo 서버 API 명세서
- * OpenAPI spec version: v1
- */
-import type { TermsResponse } from "./termsResponse";
-
-export interface TermsListResponse {
-  /** 약관 목록 */
-  terms: TermsResponse[];
-}

From cfbba4ae5d83e0f15e9a97d2251868c03e78d553 Mon Sep 17 00:00:00 2001
From: jjangminii <wjdals030328@catholic.ac.kr>
Date: Wed, 15 Jul 2026 00:56:30 +0900
Subject: [PATCH 32/75] =?UTF-8?q?fix(web):=20=EC=95=BD=EA=B4=80=20?=
 =?UTF-8?q?=EC=A1=B0=ED=9A=8C=20=EB=A1=9C=EC=A7=81=EC=9D=84=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD=EB=90=9C=20API=20=EC=8A=A4=ED=8E=99=EC=97=90=20?=
 =?UTF-8?q?=EB=A7=9E=EA=B2=8C=20=EC=88=98=EC=A0=95=ED=95=9C=EB=8B=A4=20(#1?=
 =?UTF-8?q?95)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 약관 응답이 배열에서 단일 객체로 바뀐 데 맞춰 로컬 zod 스키마와 조회 훅을 수정했습니다
- language 파라미터를 현재 locale 기준으로 함께 전달하도록 했습니다
- data가 null로 올 수 있는 케이스를 nullable 파싱과 빈 상태 UI로 방어했습니다
---
 .../terms/SettingsTermsContainer.tsx          |  3 +--
 .../policy/_containers/PolicyContainer.tsx    |  3 +--
 apps/timo-web/queries/use-terms.ts            | 23 ++++++++++++-------
 apps/timo-web/types/terms-type.ts             | 11 ++++-----
 4 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/apps/timo-web/app/[locale]/(main)/settings/_containers/terms/SettingsTermsContainer.tsx b/apps/timo-web/app/[locale]/(main)/settings/_containers/terms/SettingsTermsContainer.tsx
index 29510a28..e8948d7c 100644
--- a/apps/timo-web/app/[locale]/(main)/settings/_containers/terms/SettingsTermsContainer.tsx
+++ b/apps/timo-web/app/[locale]/(main)/settings/_containers/terms/SettingsTermsContainer.tsx
@@ -15,8 +15,7 @@ export const SettingsTermsContainer = ({
   type,
 }: SettingsTermsContainerProps) => {
   const t = useTranslations("Policy");
-  const { data: terms } = useTerms(type);
-  const term = terms[0];
+  const { data: term } = useTerms(type);
 
   return (
     <div className="px-15 pt-7.5">
diff --git a/apps/timo-web/app/[locale]/policy/_containers/PolicyContainer.tsx b/apps/timo-web/app/[locale]/policy/_containers/PolicyContainer.tsx
index f033e647..e33ff9a7 100644
--- a/apps/timo-web/app/[locale]/policy/_containers/PolicyContainer.tsx
+++ b/apps/timo-web/app/[locale]/policy/_containers/PolicyContainer.tsx
@@ -13,8 +13,7 @@ export interface PolicyContainerProps {
 
 export const PolicyContainer = ({ type }: PolicyContainerProps) => {
   const t = useTranslations("Policy");
-  const { data: terms } = useTerms(type);
-  const term = terms.find((item) => item.type === type);
+  const { data: term } = useTerms(type);
 
   if (!term) {
     return <p className="typo-body-m-12 text-timo-gray-700">{t("empty")}</p>;
diff --git a/apps/timo-web/queries/use-terms.ts b/apps/timo-web/queries/use-terms.ts
index 4c70f403..231999a0 100644
--- a/apps/timo-web/queries/use-terms.ts
+++ b/apps/timo-web/queries/use-terms.ts
@@ -1,19 +1,26 @@
 "use client";
 
 import { useSuspenseQuery } from "@tanstack/react-query";
+import { useLocale } from "next-intl";
 
 import {
-  getGetTermsQueryKey,
-  getTerms,
+  getGetTermsByConditionQueryKey,
+  getTermsByCondition,
 } from "@/api/generated/endpoints/terms/terms";
-import { termsListSchema, type TermsType } from "@/types/terms-type";
+import { termsDetailSchema, type TermsType } from "@/types/terms-type";
 
-export const useTerms = (type?: TermsType) => {
-  const params = type ? { type } : undefined;
+const TERMS_LANGUAGE_MAP: Record<"ko" | "en", string> = {
+  ko: "KO",
+  en: "EN",
+};
+
+export const useTerms = (type: TermsType) => {
+  const locale = useLocale() as "ko" | "en";
+  const params = { type, language: TERMS_LANGUAGE_MAP[locale] };
 
   return useSuspenseQuery({
-    queryKey: getGetTermsQueryKey(params),
-    queryFn: ({ signal }) => getTerms(params, undefined, signal),
-    select: ({ data }) => termsListSchema.parse(data).terms,
+    queryKey: getGetTermsByConditionQueryKey(params),
+    queryFn: ({ signal }) => getTermsByCondition(params, undefined, signal),
+    select: ({ data }) => termsDetailSchema.nullable().parse(data),
   });
 };
diff --git a/apps/timo-web/types/terms-type.ts b/apps/timo-web/types/terms-type.ts
index 9fadd2b3..02b11862 100644
--- a/apps/timo-web/types/terms-type.ts
+++ b/apps/timo-web/types/terms-type.ts
@@ -2,16 +2,13 @@ import { z } from "zod";
 
 export const termsTypeSchema = z.enum(["SERVICE", "PRIVACY"]);
 
-export const termsItemSchema = z.object({
-  termsId: z.number(),
+export const termsDetailSchema = z.object({
   type: termsTypeSchema,
+  language: z.string(),
+  version: z.string(),
   title: z.string(),
   content: z.string(),
 });
 
-export const termsListSchema = z.object({
-  terms: z.array(termsItemSchema),
-});
-
 export type TermsType = z.infer<typeof termsTypeSchema>;
-export type TermsItem = z.infer<typeof termsItemSchema>;
+export type TermsDetail = z.infer<typeof termsDetailSchema>;

From a5349df42ca7f86d24a6df781f25defe9b96cbf1 Mon Sep 17 00:00:00 2001
From: kimminna <kmina121777@naver.com>
Date: Wed, 15 Jul 2026 01:04:41 +0900
Subject: [PATCH 33/75] =?UTF-8?q?feat(web):=20=EB=A1=9C=EA=B7=B8=EC=9D=B8?=
 =?UTF-8?q?=20=EA=B0=80=EB=93=9C=EC=97=90=EC=84=9C=20=EC=82=AC=EC=9A=A9?=
 =?UTF-8?q?=EC=9E=90=20=EC=8B=9C=EA=B0=84=EB=8C=80=20=EA=B0=90=EC=A7=80=20?=
 =?UTF-8?q?=ED=9B=84=20=EC=84=9C=EB=B2=84=20=EB=8F=99=EA=B8=B0=ED=99=94=20?=
 =?UTF-8?q?(#199)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- accessToken 확보 시 Intl.DateTimeFormat으로 IANA 시간대를 감지해 useUpdateTimezone PATCH를 호출하도록 추가했습니다
- syncedTokenRef로 같은 토큰에 대해 중복 PATCH가 발생하지 않도록 했습니다
---
 apps/timo-web/providers/auth/AuthGuardProvider.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/apps/timo-web/providers/auth/AuthGuardProvider.tsx b/apps/timo-web/providers/auth/AuthGuardProvider.tsx
index 5a142b85..0154b46b 100644
--- a/apps/timo-web/providers/auth/AuthGuardProvider.tsx
+++ b/apps/timo-web/providers/auth/AuthGuardProvider.tsx
@@ -1,7 +1,8 @@
 "use client";
 
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 
+import { useUpdateTimezone } from "@/api/generated/endpoints/user/user";
 import { ROUTES } from "@/constants/routes";
 import { useRouter } from "@/i18n/navigation";
 import { useAuthStore } from "@/stores/auth/useAuthStore";
@@ -14,6 +15,8 @@ export const AuthGuardProvider = ({ children }: AuthGuardProviderProps) => {
   const accessToken = useAuthStore((state) => state.accessToken);
   const isInitialized = useAuthStore((state) => state.isInitialized);
   const router = useRouter();
+  const { mutate: updateTimezone } = useUpdateTimezone();
+  const syncedTokenRef = useRef<string | null>(null);
 
   useEffect(() => {
     if (isInitialized && !accessToken) {
@@ -21,6 +24,14 @@ export const AuthGuardProvider = ({ children }: AuthGuardProviderProps) => {
     }
   }, [accessToken, isInitialized, router]);
 
+  useEffect(() => {
+    if (!accessToken || syncedTokenRef.current === accessToken) return;
+
+    syncedTokenRef.current = accessToken;
+    const zoneId = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    updateTimezone({ data: { zoneId } });
+  }, [accessToken, updateTimezone]);
+
   if (!isInitialized || !accessToken) return null;
 
   return <>{children}</>;

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 34/75] =?UTF-8?q?fix(web):=20=EC=88=98=EC=A0=95=20?=
 =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EC=9E=AC=EC=83=9D=20=EB=B2=84=ED=8A=BC=20?=
 =?UTF-8?q?=ED=81=B4=EB=A6=AD=20=EC=8B=9C=20=EB=AA=A8=EB=8B=AC=EC=9D=B4=20?=
 =?UTF-8?q?=EB=8B=AB=ED=9E=88=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20(#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 35/75] =?UTF-8?q?fix(web):=20=EC=88=98=EC=A0=95=20?=
 =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EC=9E=AC=EC=83=9D=20=EB=B2=84=ED=8A=BC=20?=
 =?UTF-8?q?=EC=95=84=EC=9D=B4=EC=BD=98=EC=9D=B4=20=ED=83=80=EC=9D=B4?=
 =?UTF-8?q?=EB=A8=B8=20=EC=83=81=ED=83=9C=EC=99=80=20=EB=8F=99=EA=B8=B0?=
 =?UTF-8?q?=ED=99=94=EB=90=98=EC=A7=80=20=EC=95=8A=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

- 타이머 시작/토글 성공 시 해당 투두의 상세 조회 쿼리도 함께 무효화하도록 했습니다
---
 .../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 36/75] =?UTF-8?q?fix(web):=20=EC=88=98=EC=A0=95=20?=
 =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EC=99=84=EB=A3=8C=20=EC=B2=B4=ED=81=AC?=
 =?UTF-8?q?=EB=B0=95=EC=8A=A4=EA=B0=80=20=ED=83=80=EC=9D=B4=EB=A8=B8=20?=
 =?UTF-8?q?=EC=8B=A4=ED=96=89=20=EC=A4=91=20=EB=B9=84=ED=99=9C=EC=84=B1?=
 =?UTF-8?q?=ED=99=94=C2=B7=EB=AF=B8=EB=B0=98=EC=98=81=EB=90=98=EB=8A=94=20?=
 =?UTF-8?q?=EB=AC=B8=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 8806763e6ea66612ace3598c772c4927625b2088 Mon Sep 17 00:00:00 2001
From: kimminna <kmina121777@naver.com>
Date: Wed, 15 Jul 2026 01:53:02 +0900
Subject: [PATCH 37/75] =?UTF-8?q?fix(web):=20=EC=83=88=EB=A1=9C=EA=B3=A0?=
 =?UTF-8?q?=EC=B9=A8=20=EC=8B=9C=20=ED=83=80=EC=9E=84=EC=A1=B4=20=EB=8F=99?=
 =?UTF-8?q?=EA=B8=B0=ED=99=94=20=EC=9E=AC=ED=98=B8=EC=B6=9C=EB=90=98?=
 =?UTF-8?q?=EB=8D=98=20=EB=AC=B8=EC=A0=9C=20=EC=88=98=EC=A0=95=20(#199)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 타임존 동기화 로직을 로그인 가드(AuthGuardProvider)에서 OAuth 콜백(OauthCallbackContainer)으로 옮겼습니다
- accessToken이 localStorage에 남아있는 상태로 새로고침될 때마다 컴포넌트가 리마운트되어 동기화 API가 매번 재호출되던 문제를 해결했습니다
- 이제 실제 로그인이 성공하는 시점에만 서버로 타임존이 동기화됩니다
---
 .../_containers/OauthCallbackContainer.tsx        | 15 ++++++++++++++-
 .../timo-web/providers/auth/AuthGuardProvider.tsx | 13 +------------
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/apps/timo-web/app/[locale]/oauth/callback/_containers/OauthCallbackContainer.tsx b/apps/timo-web/app/[locale]/oauth/callback/_containers/OauthCallbackContainer.tsx
index 51911d94..c727f4b6 100644
--- a/apps/timo-web/app/[locale]/oauth/callback/_containers/OauthCallbackContainer.tsx
+++ b/apps/timo-web/app/[locale]/oauth/callback/_containers/OauthCallbackContainer.tsx
@@ -4,6 +4,7 @@ import { useSearchParams } from "next/navigation";
 import { useEffect, useRef } from "react";
 
 import { useToken } from "@/api/generated/endpoints/auth/auth";
+import { useUpdateTimezone } from "@/api/generated/endpoints/user/user";
 import { ROUTES } from "@/constants/routes";
 import { useRouter } from "@/i18n/navigation";
 import { useAuthStore } from "@/stores/auth/useAuthStore";
@@ -16,6 +17,7 @@ export const OauthCallbackContainer = () => {
     (state) => state.setOnboardingCompleted,
   );
   const { mutate } = useToken();
+  const { mutate: updateTimezone } = useUpdateTimezone();
   const hasRequested = useRef(false);
 
   useEffect(() => {
@@ -36,6 +38,10 @@ export const OauthCallbackContainer = () => {
           }
           setAccessToken(data.accessToken);
           setOnboardingCompleted(data.user.onboardingCompleted);
+
+          const zoneId = Intl.DateTimeFormat().resolvedOptions().timeZone;
+          updateTimezone({ data: { zoneId } });
+
           router.replace(data.isNewUser ? ROUTES.ONBOARDING : ROUTES.HOME);
         },
         onError: () => {
@@ -43,7 +49,14 @@ export const OauthCallbackContainer = () => {
         },
       },
     );
-  }, [code, mutate, router, setAccessToken, setOnboardingCompleted]);
+  }, [
+    code,
+    mutate,
+    router,
+    setAccessToken,
+    setOnboardingCompleted,
+    updateTimezone,
+  ]);
 
   return null;
 };
diff --git a/apps/timo-web/providers/auth/AuthGuardProvider.tsx b/apps/timo-web/providers/auth/AuthGuardProvider.tsx
index 0154b46b..5a142b85 100644
--- a/apps/timo-web/providers/auth/AuthGuardProvider.tsx
+++ b/apps/timo-web/providers/auth/AuthGuardProvider.tsx
@@ -1,8 +1,7 @@
 "use client";
 
-import { useEffect, useRef } from "react";
+import { useEffect } from "react";
 
-import { useUpdateTimezone } from "@/api/generated/endpoints/user/user";
 import { ROUTES } from "@/constants/routes";
 import { useRouter } from "@/i18n/navigation";
 import { useAuthStore } from "@/stores/auth/useAuthStore";
@@ -15,8 +14,6 @@ export const AuthGuardProvider = ({ children }: AuthGuardProviderProps) => {
   const accessToken = useAuthStore((state) => state.accessToken);
   const isInitialized = useAuthStore((state) => state.isInitialized);
   const router = useRouter();
-  const { mutate: updateTimezone } = useUpdateTimezone();
-  const syncedTokenRef = useRef<string | null>(null);
 
   useEffect(() => {
     if (isInitialized && !accessToken) {
@@ -24,14 +21,6 @@ export const AuthGuardProvider = ({ children }: AuthGuardProviderProps) => {
     }
   }, [accessToken, isInitialized, router]);
 
-  useEffect(() => {
-    if (!accessToken || syncedTokenRef.current === accessToken) return;
-
-    syncedTokenRef.current = accessToken;
-    const zoneId = Intl.DateTimeFormat().resolvedOptions().timeZone;
-    updateTimezone({ data: { zoneId } });
-  }, [accessToken, updateTimezone]);
-
   if (!isInitialized || !accessToken) return null;
 
   return <>{children}</>;

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 38/75] =?UTF-8?q?feat(web):=20=EC=98=A4=EB=8A=98=20?=
 =?UTF-8?q?=ED=83=AD=20=EC=99=84=EB=A3=8C=20=EC=B2=B4=ED=81=AC=EB=B0=95?=
 =?UTF-8?q?=EC=8A=A4=C2=B7=EC=9E=AC=EC=83=9D=20=EB=B2=84=ED=8A=BC=EC=9D=84?=
 =?UTF-8?q?=20=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 0b523cc30e0b4431610b5b3f4ba2474ebc649bf9 Mon Sep 17 00:00:00 2001
From: kimminna <kmina121777@naver.com>
Date: Wed, 15 Jul 2026 02:12:26 +0900
Subject: [PATCH 39/75] =?UTF-8?q?feat(web):=20=ED=94=84=EB=A1=9C=ED=95=84?=
 =?UTF-8?q?=20=EC=A1=B0=ED=9A=8C=20=ED=99=94=EB=A9=B4=EC=97=90=20profileIm?=
 =?UTF-8?q?ageUrl=20=ED=91=9C=EC=8B=9C=20(#204)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 프로필 조회 API 응답의 profileImageUrl을 설정 화면에 표시했습니다
- 값이 없을 경우 기존 placeholder를 유지했습니다
- next/image가 Google 프로필 이미지 도메인을 허용하도록 설정을 추가했습니다
---
 .../_components/account/SettingsProfileView.tsx    | 14 +++++++++++++-
 .../account/SettingsProfileContainer.tsx           |  1 +
 .../_hooks/account/use-settings-profile.ts         |  1 +
 apps/timo-web/next.config.js                       |  8 ++++++++
 4 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/apps/timo-web/app/[locale]/(main)/settings/_components/account/SettingsProfileView.tsx b/apps/timo-web/app/[locale]/(main)/settings/_components/account/SettingsProfileView.tsx
index 1802b3c8..7cb39b92 100644
--- a/apps/timo-web/app/[locale]/(main)/settings/_components/account/SettingsProfileView.tsx
+++ b/apps/timo-web/app/[locale]/(main)/settings/_components/account/SettingsProfileView.tsx
@@ -14,6 +14,7 @@ import { SettingsTagsSectionContainer } from "@/app/[locale]/(main)/settings/_co
 export interface SettingsProfileViewProps {
   name: string;
   googleEmail: string;
+  profileImageUrl?: string;
   isCalendarConnected: boolean;
   language: SettingsLanguage;
   tags: SettingsTagItem[];
@@ -28,6 +29,7 @@ export interface SettingsProfileViewProps {
 export const SettingsProfileView = ({
   name,
   googleEmail,
+  profileImageUrl,
   isCalendarConnected,
   language,
   tags,
@@ -51,7 +53,17 @@ export const SettingsProfileView = ({
             {labels.profileSection}
           </h2>
           <div className="flex items-center gap-5">
-            <div className="bg-timo-gray-300 size-28.5 shrink-0 rounded-full" />
+            {profileImageUrl ? (
+              <Image
+                src={profileImageUrl}
+                alt={name}
+                width={114}
+                height={114}
+                className="size-28.5 shrink-0 rounded-full object-cover"
+              />
+            ) : (
+              <div className="bg-timo-gray-300 size-28.5 shrink-0 rounded-full" />
+            )}
             <div className="flex flex-col gap-2">
               <p className="typo-headline-b-20 text-timo-black">{name}</p>
               <div className="bg-timo-gray-300 flex items-center gap-2 rounded-lg px-4 py-2">
diff --git a/apps/timo-web/app/[locale]/(main)/settings/_containers/account/SettingsProfileContainer.tsx b/apps/timo-web/app/[locale]/(main)/settings/_containers/account/SettingsProfileContainer.tsx
index cd892980..8e1f8d8c 100644
--- a/apps/timo-web/app/[locale]/(main)/settings/_containers/account/SettingsProfileContainer.tsx
+++ b/apps/timo-web/app/[locale]/(main)/settings/_containers/account/SettingsProfileContainer.tsx
@@ -66,6 +66,7 @@ export const SettingsProfileContainer = () => {
       <SettingsProfileView
         name={profileState.name}
         googleEmail={profileState.googleEmail}
+        profileImageUrl={profileState.profileImageUrl}
         isCalendarConnected={isCalendarConnected}
         language={profileState.language}
         tags={profileState.tags}
diff --git a/apps/timo-web/app/[locale]/(main)/settings/_hooks/account/use-settings-profile.ts b/apps/timo-web/app/[locale]/(main)/settings/_hooks/account/use-settings-profile.ts
index 7befa3a9..997fecfe 100644
--- a/apps/timo-web/app/[locale]/(main)/settings/_hooks/account/use-settings-profile.ts
+++ b/apps/timo-web/app/[locale]/(main)/settings/_hooks/account/use-settings-profile.ts
@@ -144,6 +144,7 @@ export const useSettingsProfile = () => {
     profileState: {
       name: profile.name,
       googleEmail: profile.email,
+      profileImageUrl: profile.profileImageUrl ?? undefined,
       calendarConnected: profile.calendarConnected,
       language: locale,
       tags: tagItems,
diff --git a/apps/timo-web/next.config.js b/apps/timo-web/next.config.js
index d9ce883d..0bf92f81 100644
--- a/apps/timo-web/next.config.js
+++ b/apps/timo-web/next.config.js
@@ -5,6 +5,14 @@ import createNextIntlPlugin from "next-intl/plugin";
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   transpilePackages: ["@repo/timo-design-system"],
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "lh3.googleusercontent.com",
+      },
+    ],
+  },
 };
 
 const withNextIntl = createNextIntlPlugin();

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 40/75] =?UTF-8?q?fix(web):=20=EC=98=A4=EB=8A=98=20?=
 =?UTF-8?q?=ED=83=AD=20=EC=B9=B4=EB=93=9C=20=EC=B5=9C=EC=86=8C=20=ED=81=AC?=
 =?UTF-8?q?=EA=B8=B0=EC=99=80=20=EC=B2=B4=ED=81=AC=EB=B0=95=EC=8A=A4=20?=
 =?UTF-8?q?=ED=9D=94=EB=93=A4=EB=A6=BC=EC=9D=84=20=EC=88=98=EC=A0=95?=
 =?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

- 카드 너비를 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 d4450118fd16e84a2166c41b2253438fb2c54119 Mon Sep 17 00:00:00 2001
From: kimminna <kmina121777@naver.com>
Date: Wed, 15 Jul 2026 02:31:25 +0900
Subject: [PATCH 41/75] =?UTF-8?q?fix(web):=20=ED=94=84=EB=A1=9C=ED=95=84?=
 =?UTF-8?q?=20=EC=9D=B4=EB=AF=B8=EC=A7=80=EC=97=90=20priority=20prop?=
 =?UTF-8?q?=EC=9D=84=20=EC=B6=94=EA=B0=80=ED=95=9C=EB=8B=A4=20(#204)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- above-the-fold 프로필 이미지가 LCP 최적화를 위해 preload되도록 Image 컴포넌트에 priority prop을 추가했습니다
---
 .../(main)/settings/_components/account/SettingsProfileView.tsx  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/timo-web/app/[locale]/(main)/settings/_components/account/SettingsProfileView.tsx b/apps/timo-web/app/[locale]/(main)/settings/_components/account/SettingsProfileView.tsx
index 7cb39b92..e42a4451 100644
--- a/apps/timo-web/app/[locale]/(main)/settings/_components/account/SettingsProfileView.tsx
+++ b/apps/timo-web/app/[locale]/(main)/settings/_components/account/SettingsProfileView.tsx
@@ -59,6 +59,7 @@ export const SettingsProfileView = ({
                 alt={name}
                 width={114}
                 height={114}
+                priority
                 className="size-28.5 shrink-0 rounded-full object-cover"
               />
             ) : (

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 42/75] =?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 43/75] =?UTF-8?q?refactor(web):=20Home=20=EC=A0=84?=
 =?UTF-8?q?=EC=9A=A9=20=EC=A4=91=EC=A7=80=C2=B7=EC=99=84=EB=A3=8C=20?=
 =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EC=BB=A8=ED=85=8C=EC=9D=B4=EB=84=88?=
 =?UTF-8?q?=EB=A5=BC=20=EA=B3=B5=EC=9A=A9=20=EA=B2=BD=EB=A1=9C=EB=A1=9C=20?=
 =?UTF-8?q?=EC=9D=B4=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 44/75] =?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;
+};

From 532534b811a0f0519f0cf4f882cd3d9fe56facfa Mon Sep 17 00:00:00 2001
From: kimminna <kmina121777@naver.com>
Date: Wed, 15 Jul 2026 03:24:09 +0900
Subject: [PATCH 45/75] =?UTF-8?q?fix(web):=20=EC=9E=AC=EC=83=9D=20API=20?=
 =?UTF-8?q?=EC=8B=A4=ED=8C=A8=20=EC=8B=9C=20=EC=97=90=EB=9F=AC=20=ED=86=A0?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=EB=A5=BC=20=ED=91=9C=EC=8B=9C=ED=95=9C?=
 =?UTF-8?q?=EB=8B=A4=20(#206)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 타이머 시작 API 호출이 실패하면 onPlayError 콜백으로 에러를 전달받아 토스트로 표시했습니다
- 백엔드 에러 메시지가 없을 때를 대비한 폴백 문구를 Toast 네임스페이스에 추가했습니다
---
 .../home/_containers/HomeTodoContainer.tsx            |  9 +++++++++
 .../home/_hooks/use-home-todos-by-date.ts             | 11 ++++++++++-
 .../today/_containers/TodayTodoListContainer.tsx      |  9 +++++++++
 .../today/_hooks/useTodayTodoList.ts                  | 11 ++++++++++-
 apps/timo-web/messages/en.json                        |  3 ++-
 apps/timo-web/messages/ko.json                        |  3 ++-
 6 files changed, 42 insertions(+), 4 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 8c7f75f0..3869c8a4 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
@@ -46,6 +46,7 @@ export const HomeTodoContainer = () => {
     useState<PendingCompleteTodo | null>(null);
   const [feedbackText, setFeedbackText] = useState<string | undefined>();
   const [isTimerRunningToastOpen, setIsTimerRunningToastOpen] = useState(false);
+  const [playErrorMessage, setPlayErrorMessage] = useState<string | null>(null);
 
   const {
     todosByDate,
@@ -61,6 +62,8 @@ export const HomeTodoContainer = () => {
       setPendingCompleteTodo({ token: Date.now(), dateKey, todoId }),
     onTimerAlreadyRunning: () => setIsTimerRunningToastOpen(true),
     onStopFeedback: setFeedbackText,
+    onPlayError: (message) =>
+      setPlayErrorMessage(message ?? tToast("timerStartFailed")),
   });
 
   const handleConfirmPendingComplete = () => {
@@ -220,6 +223,12 @@ export const HomeTodoContainer = () => {
         onClose={() => setIsTimerRunningToastOpen(false)}
         message={tToast("timerAlreadyRunning")}
       />
+
+      <AnimatedToast
+        isOpen={playErrorMessage !== null}
+        onClose={() => setPlayErrorMessage(null)}
+        message={playErrorMessage ?? ""}
+      />
     </div>
   );
 };
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 17fbc94b..306f6748 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
@@ -3,6 +3,8 @@
 import { useQueryClient } from "@tanstack/react-query";
 import { useEffect, useState } from "react";
 
+import type { ErrorType } from "@/api/client/custom-instance";
+import type { ErrorDto } from "@/api/generated/models";
 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";
 
@@ -27,6 +29,7 @@ export interface UseHomeTodosByDateOptions {
   onNeedStopConfirm: (dateKey: string, todoId: number) => void;
   onTimerAlreadyRunning: () => void;
   onStopFeedback: (feedbackText: string | undefined) => void;
+  onPlayError: (message: string | undefined) => void;
 }
 
 export const useHomeTodosByDate = (
@@ -35,6 +38,7 @@ export const useHomeTodosByDate = (
     onNeedStopConfirm,
     onTimerAlreadyRunning,
     onStopFeedback,
+    onPlayError,
   }: UseHomeTodosByDateOptions,
 ) => {
   const [todosByDate, setTodosByDate] = useState<Record<string, Todo[]>>({});
@@ -173,7 +177,12 @@ export const useHomeTodosByDate = (
 
     startTimer(
       { todoId },
-      { onSuccess: () => invalidateTodoDetail(dateKey, todoId) },
+      {
+        onSuccess: () => invalidateTodoDetail(dateKey, todoId),
+        onError: (error: ErrorType<ErrorDto>) => {
+          onPlayError(error.response?.data.message);
+        },
+      },
     );
   };
 
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 6f973645..3a92ebbc 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
@@ -40,6 +40,7 @@ export const TodayTodoListContainer = () => {
   >(null);
   const [feedbackText, setFeedbackText] = useState<string | undefined>();
   const [isTimerRunningToastOpen, setIsTimerRunningToastOpen] = useState(false);
+  const [playErrorMessage, setPlayErrorMessage] = useState<string | null>(null);
 
   const {
     todos,
@@ -56,6 +57,8 @@ export const TodayTodoListContainer = () => {
     },
     onTimerAlreadyRunning: () => setIsTimerRunningToastOpen(true),
     onStopFeedback: setFeedbackText,
+    onPlayError: (message) =>
+      setPlayErrorMessage(message ?? tToast("timerStartFailed")),
   });
 
   const handleConfirmPendingComplete = () => {
@@ -150,6 +153,12 @@ export const TodayTodoListContainer = () => {
         onClose={() => setIsTimerRunningToastOpen(false)}
         message={tToast("timerAlreadyRunning")}
       />
+
+      <AnimatedToast
+        isOpen={playErrorMessage !== null}
+        onClose={() => setPlayErrorMessage(null)}
+        message={playErrorMessage ?? ""}
+      />
     </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 29d55a6a..e0788a80 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
@@ -3,6 +3,8 @@
 import { useQueryClient } from "@tanstack/react-query";
 import { useEffect, useState } from "react";
 
+import type { ErrorType } from "@/api/client/custom-instance";
+import type { ErrorDto } from "@/api/generated/models";
 import type { TodayTodo } from "@/app/[locale]/(main)/(with-time-sidebar)/today/_types/today-type";
 
 import { getGetTodayQueryKey } from "@/api/generated/endpoints/home/home";
@@ -23,6 +25,7 @@ export interface UseTodayTodoListOptions {
   onNeedStopConfirm: (todoId: number) => void;
   onTimerAlreadyRunning: () => void;
   onStopFeedback: (feedbackText: string | undefined) => void;
+  onPlayError: (message: string | undefined) => void;
 }
 
 export const useTodayTodoList = (
@@ -31,6 +34,7 @@ export const useTodayTodoList = (
     onNeedStopConfirm,
     onTimerAlreadyRunning,
     onStopFeedback,
+    onPlayError,
   }: UseTodayTodoListOptions,
 ) => {
   const [todos, setTodos] = useState<TodayTodo[]>(initialTodos);
@@ -158,7 +162,12 @@ export const useTodayTodoList = (
 
     startTimer(
       { todoId },
-      { onSuccess: () => invalidateTodoDetail(todoId, dateKey) },
+      {
+        onSuccess: () => invalidateTodoDetail(todoId, dateKey),
+        onError: (error: ErrorType<ErrorDto>) => {
+          onPlayError(error.response?.data.message);
+        },
+      },
     );
   };
 
diff --git a/apps/timo-web/messages/en.json b/apps/timo-web/messages/en.json
index f1ba60fa..7b4ecd84 100644
--- a/apps/timo-web/messages/en.json
+++ b/apps/timo-web/messages/en.json
@@ -144,7 +144,8 @@
     "tagActionFailed": "Failed to update the tag. Please try again.",
     "focusActionFailed": "Failed to process the request. Please try again.",
     "languageChangeFailed": "Failed to change the language. Please try again.",
-    "timerAlreadyRunning": "Another to-do's timer is already running. Please stop it first."
+    "timerAlreadyRunning": "Another to-do's timer is already running. Please stop it first.",
+    "timerStartFailed": "This to-do has no estimated duration set."
   },
   "Login": {
     "animationLabel": "Login animation",
diff --git a/apps/timo-web/messages/ko.json b/apps/timo-web/messages/ko.json
index c79cc96c..1d2051bf 100644
--- a/apps/timo-web/messages/ko.json
+++ b/apps/timo-web/messages/ko.json
@@ -144,7 +144,8 @@
     "tagActionFailed": "태그 처리에 실패했어요. 다시 시도해 주세요.",
     "focusActionFailed": "요청을 처리하지 못했어요. 다시 시도해 주세요.",
     "languageChangeFailed": "언어 변경에 실패했어요. 다시 시도해 주세요.",
-    "timerAlreadyRunning": "다른 투두의 타이머가 이미 실행 중이에요. 먼저 종료해 주세요."
+    "timerAlreadyRunning": "다른 투두의 타이머가 이미 실행 중이에요. 먼저 종료해 주세요.",
+    "timerStartFailed": "예상 소요 시간이 설정되지 않은 투두입니다."
   },
   "Login": {
     "animationLabel": "로그인 애니메이션",

From 342b730305a0fd57296fdeb47d6dfe948583e9da Mon Sep 17 00:00:00 2001
From: kimminna <kmina121777@naver.com>
Date: Wed, 15 Jul 2026 03:25:03 +0900
Subject: [PATCH 46/75] =?UTF-8?q?fix(web):=20=ED=86=A0=EC=8A=A4=ED=8A=B8?=
 =?UTF-8?q?=20=EC=A2=85=EB=A3=8C=20=EC=95=A0=EB=8B=88=EB=A9=94=EC=9D=B4?=
 =?UTF-8?q?=EC=85=98=20=EC=A4=91=20=ED=85=8D=EC=8A=A4=ED=8A=B8=EA=B0=80=20?=
 =?UTF-8?q?=EB=A8=BC=EC=A0=80=20=EC=82=AC=EB=9D=BC=EC=A7=80=EB=8A=94=20?=
 =?UTF-8?q?=EB=AC=B8=EC=A0=9C=EB=A5=BC=20=EC=88=98=EC=A0=95=ED=95=9C?=
 =?UTF-8?q?=EB=8B=A4=20(#206)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 닫힘 시점에 message prop이 즉시 비워지면서 exit 애니메이션 도중 텍스트가 먼저 사라지고 콘텐츠 너비 기준 박스가 가로로 줄어드는 문제가 있었습니다
- 마지막 메시지를 내부 state로 캐시해 exit 애니메이션 동안 유지하도록 했습니다
---
 apps/timo-web/components/toast/AnimatedToast.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/apps/timo-web/components/toast/AnimatedToast.tsx b/apps/timo-web/components/toast/AnimatedToast.tsx
index a898954c..6be4f12f 100644
--- a/apps/timo-web/components/toast/AnimatedToast.tsx
+++ b/apps/timo-web/components/toast/AnimatedToast.tsx
@@ -23,12 +23,19 @@ export const AnimatedToast = ({
 }: AnimatedToastProps) => {
   const [shouldRender, setShouldRender] = useState<boolean>(isOpen);
   const [isVisible, setIsVisible] = useState<boolean>(false);
+  const [displayMessage, setDisplayMessage] = useState<ReactNode>(message);
   const onCloseRef = useRef(onClose);
 
   useEffect(() => {
     onCloseRef.current = onClose;
   }, [onClose]);
 
+  useEffect(() => {
+    if (isOpen) {
+      setDisplayMessage(message);
+    }
+  }, [isOpen, message]);
+
   useEffect(() => {
     if (!isOpen) {
       setIsVisible(false);
@@ -69,7 +76,7 @@ export const AnimatedToast = ({
         isVisible ? "translate-y-0 opacity-100" : "translate-y-3 opacity-0",
       )}
     >
-      <Toast message={message} />
+      <Toast message={displayMessage} />
     </div>
   );
 };

From 11e3e0b54de7b5ed1dd128c332755a5163dccd6c Mon Sep 17 00:00:00 2001
From: yumin-kim4757 <rladbals0211@gmail.com>
Date: Wed, 15 Jul 2026 03:44:24 +0900
Subject: [PATCH 47/75] =?UTF-8?q?refactor(web):=20=EC=83=81=EC=84=B8=20?=
 =?UTF-8?q?=ED=88=AC=EB=91=90=20=EB=AA=A8=EB=8B=AC=EC=9D=84=20overlay=20?=
 =?UTF-8?q?=EA=B8=B0=EB=B0=98=20API=20=EC=BB=A8=ED=85=8C=EC=9D=B4=EB=84=88?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B6=84=EB=A6=AC=20(#202)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/DetailTodoModalContainer.tsx       | 119 +++++++++---------
 1 file changed, 58 insertions(+), 61 deletions(-)

diff --git a/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx b/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx
index c506c341..404b076f 100644
--- a/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx
+++ b/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx
@@ -1,13 +1,11 @@
 "use client";
 
-import { useTranslations } from "next-intl";
-import { useState } from "react";
+import { overlay } from "overlay-kit";
 
 import type { TodoUpdateRequest } from "@/api/generated/models";
 import type { ReactNode } from "react";
 
 import { useGetTodoDetail } from "@/api/generated/endpoints/todo/todo";
-import { AnimatedToast } from "@/components/toast/AnimatedToast";
 import { DetailTodoModalContent } from "@/components/todo-modal/detail/DetailTodoModalContent";
 import { useDeleteTodoSubmit } from "@/hooks/todo-modal/detail/use-delete-todo-submit";
 import { useUpdateTodoSubmit } from "@/hooks/todo-modal/detail/use-update-todo-submit";
@@ -21,86 +19,85 @@ export interface DetailTodoModalContainerProps {
   children: (openDetailTodoModal: () => void) => ReactNode;
 }
 
-export const DetailTodoModalContainer = ({
+interface DetailTodoModalQueryProps extends Omit<
+  DetailTodoModalContainerProps,
+  "children"
+> {
+  isOpen: boolean;
+  onClose: () => void;
+  onExited: () => void;
+}
+
+const DetailTodoModalQuery = ({
   todoId,
   date,
+  isOpen,
+  onClose,
+  onExited,
   onTogglePlay,
   onToggleCompleted,
   onDelete,
-  children,
-}: DetailTodoModalContainerProps) => {
-  const tToast = useTranslations("Toast");
-  const [isOpen, setIsOpen] = useState(false);
-  const [isMounted, setIsMounted] = useState(false);
-  const [updateErrorMessage, setUpdateErrorMessage] = useState<string | null>(
-    null,
-  );
-  const { data, isError } = useGetTodoDetail(
-    todoId,
-    { date },
-    { query: { enabled: isMounted } },
-  );
+}: DetailTodoModalQueryProps) => {
+  const { data, isError } = useGetTodoDetail(todoId, { date });
   const { handleDelete } = useDeleteTodoSubmit();
   const { handleUpdate } = useUpdateTodoSubmit();
   const todo = data?.data;
 
-  const openDetailTodoModal = () => {
-    setIsMounted(true);
-    setIsOpen(true);
-  };
-
-  const closeDetailTodoModal = () => {
-    setIsOpen(false);
-  };
+  if (isError || !todo) return null;
 
   const deleteTodo = () => {
     handleDelete(todoId, {
       onSuccess: () => {
         onDelete();
-        closeDetailTodoModal();
+        onClose();
       },
     });
   };
 
   const updateTodo = (updateData: TodoUpdateRequest) => {
-    handleUpdate(
-      {
-        todoId,
-        date,
-        data: updateData,
-      },
-      {
-        onError: (error) => {
-          setUpdateErrorMessage(
-            error.response?.data.message ?? tToast("todoUpdateFailed"),
-          );
-        },
-      },
-    );
+    handleUpdate({
+      todoId,
+      date,
+      data: updateData,
+    });
   };
 
   return (
-    <>
-      {children(openDetailTodoModal)}
-
-      {isMounted && !isError && todo ? (
-        <DetailTodoModalContent
-          isOpen={isOpen}
-          onClose={closeDetailTodoModal}
-          onExited={() => setIsMounted(false)}
-          todo={todo}
-          onTogglePlay={onTogglePlay}
-          onToggleCompleted={onToggleCompleted}
-          onDelete={deleteTodo}
-          onUpdate={updateTodo}
-        />
-      ) : null}
+    <DetailTodoModalContent
+      isOpen={isOpen}
+      onClose={onClose}
+      onExited={onExited}
+      todo={todo}
+      onTogglePlay={onTogglePlay}
+      onToggleCompleted={onToggleCompleted}
+      onDelete={deleteTodo}
+      onUpdate={updateTodo}
+    />
+  );
+};
 
-      <AnimatedToast
-        isOpen={updateErrorMessage !== null}
-        onClose={() => setUpdateErrorMessage(null)}
-        message={updateErrorMessage ?? ""}
+export const DetailTodoModalContainer = ({
+  todoId,
+  date,
+  onTogglePlay,
+  onToggleCompleted,
+  onDelete,
+  children,
+}: DetailTodoModalContainerProps) => {
+  const openDetailTodoModal = () => {
+    overlay.open(({ isOpen, close, unmount }) => (
+      <DetailTodoModalQuery
+        todoId={todoId}
+        date={date}
+        isOpen={isOpen}
+        onClose={close}
+        onExited={unmount}
+        onTogglePlay={onTogglePlay}
+        onToggleCompleted={onToggleCompleted}
+        onDelete={onDelete}
       />
-    </>
-  );
+    ));
+  };
+
+  return <>{children(openDetailTodoModal)}</>;
 };

From fef23fd982a94b592e51e0a86af29c1fca5ca0fd Mon Sep 17 00:00:00 2001
From: yumin-kim4757 <rladbals0211@gmail.com>
Date: Wed, 15 Jul 2026 03:45:19 +0900
Subject: [PATCH 48/75] =?UTF-8?q?refactor(web):=20=EC=83=81=EC=84=B8=20?=
 =?UTF-8?q?=ED=88=AC=EB=91=90=20=EC=88=98=EC=A0=95=20=EC=9A=94=EC=B2=AD?=
 =?UTF-8?q?=EC=9D=84=20=EB=B3=80=EA=B2=BD=20=ED=95=84=EB=93=9C=20=EB=8B=A8?=
 =?UTF-8?q?=EC=9C=84=EB=A1=9C=20=EC=A0=84=EC=86=A1=20(#202)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/DetailTodoModalContent.tsx         | 89 +++++++++++--------
 .../todo-modal/detail/use-detail-todo-form.ts | 33 +------
 .../utils/todo/detail-todo-update-request.ts  | 89 +++++--------------
 3 files changed, 74 insertions(+), 137 deletions(-)

diff --git a/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx b/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
index dad126c1..32b858fa 100644
--- a/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
+++ b/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
@@ -1,7 +1,7 @@
 import { DeleteIcon, TrashOnIcon } from "@repo/timo-design-system/icons";
 import { TodoToolbar } from "@repo/timo-design-system/ui";
 import { useTranslations } from "next-intl";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import type {
   TodoDetailResponse,
@@ -21,13 +21,18 @@ import { DetailTodoTaskFields } from "@/components/todo-modal/detail/DetailTodoT
 import {
   DETAIL_TODO_TIME_OPTIONS,
   DETAIL_TODO_WEEKDAY_IDS,
-  type DetailTodoUpdateRequestOverrides,
   useDetailTodoForm,
 } from "@/hooks/todo-modal/detail/use-detail-todo-form";
-import { formatShortDateLabel } from "@/utils/date/date";
+import { formatDateKey, formatShortDateLabel } from "@/utils/date/date";
+import {
+  buildDetailTodoSubtasksUpdateRequest,
+  buildDetailTodoTextUpdateRequest,
+  isTodoUpdateRepeatWeekday,
+} from "@/utils/todo/detail-todo-update-request";
+import { convertTimeTextToDurationSeconds } from "@/utils/todo/todo-time";
 
 const DETAIL_TODO_MEMO_MAX_LENGTH = 300;
-const TEXT_UPDATE_DEBOUNCE_MS = 3000;
+const TEXT_UPDATE_DEBOUNCE_MS = 2000;
 type DetailTodoWeekdayId = (typeof DETAIL_TODO_WEEKDAY_IDS)[number];
 
 const isDetailTodoWeekdayId = (
@@ -62,7 +67,6 @@ export const DetailTodoModalContent = ({
   const detailTodoForm = useDetailTodoForm({ todo });
   const [selectedTime, setSelectedTime] = useState<TimeSelection>();
   const [isIconPanelOpen, setIsIconPanelOpen] = useState(false);
-  const canUpdateTodo = todo.timerStatus === "STOPPED";
   const dateNumber = detailTodoForm.date.getDate();
   const dayOfWeek = isDetailTodoWeekdayId(todo.dayOfWeek)
     ? todo.dayOfWeek
@@ -72,7 +76,16 @@ export const DetailTodoModalContent = ({
     label: tCommon(`weekday.${weekdayId}`),
   }));
   const latestOnUpdateRef = useRef(onUpdate);
-  const latestBuildUpdateRequestRef = useRef(detailTodoForm.buildUpdateRequest);
+  const buildTextUpdateRequest = useCallback(
+    (): TodoUpdateRequest =>
+      buildDetailTodoTextUpdateRequest({
+        title: detailTodoForm.title,
+        memo: detailTodoForm.memo,
+        subtasks: detailTodoForm.subtaskInputs,
+      }),
+    [detailTodoForm.memo, detailTodoForm.subtaskInputs, detailTodoForm.title],
+  );
+  const latestBuildTextUpdateRequestRef = useRef(buildTextUpdateRequest);
   const didStartTextUpdateRef = useRef(false);
   const textUpdateSignature = useMemo(
     () =>
@@ -87,18 +100,16 @@ export const DetailTodoModalContent = ({
       }),
     [detailTodoForm.memo, detailTodoForm.subtaskInputs, detailTodoForm.title],
   );
-
   useEffect(() => {
     latestOnUpdateRef.current = onUpdate;
   }, [onUpdate]);
 
   useEffect(() => {
-    latestBuildUpdateRequestRef.current = detailTodoForm.buildUpdateRequest;
-  }, [detailTodoForm.buildUpdateRequest]);
+    latestBuildTextUpdateRequestRef.current = buildTextUpdateRequest;
+  }, [buildTextUpdateRequest]);
 
   useEffect(() => {
     if (!isOpen) return;
-    if (!canUpdateTodo) return;
 
     if (!didStartTextUpdateRef.current) {
       didStartTextUpdateRef.current = true;
@@ -108,18 +119,14 @@ export const DetailTodoModalContent = ({
     if (!detailTodoForm.title.trim()) return;
 
     const updateTimer = window.setTimeout(() => {
-      latestOnUpdateRef.current(latestBuildUpdateRequestRef.current());
+      latestOnUpdateRef.current(latestBuildTextUpdateRequestRef.current());
     }, TEXT_UPDATE_DEBOUNCE_MS);
 
     return () => window.clearTimeout(updateTimer);
-  }, [canUpdateTodo, detailTodoForm.title, isOpen, textUpdateSignature]);
-
-  const updateTodo = (overrides: DetailTodoUpdateRequestOverrides = {}) => {
-    if (!canUpdateTodo) return;
-
-    const updateData = detailTodoForm.buildUpdateRequest(overrides);
-    if (!updateData.title?.trim()) return;
+  }, [detailTodoForm.title, isOpen, textUpdateSignature]);
 
+  const updateTodo = (updateData: TodoUpdateRequest) => {
+    if ("title" in updateData && !updateData.title?.trim()) return;
     onUpdate(updateData);
   };
 
@@ -130,24 +137,29 @@ export const DetailTodoModalContent = ({
 
   const handleRemoveIcon = () => {
     detailTodoForm.removeIcon();
-    updateTodo({ icon: null });
   };
 
   const handleSelectTime = (nextTime: TimeSelection) => {
     setSelectedTime(nextTime);
     const time = detailTodoForm.selectTime(nextTime);
 
-    if (time) updateTodo({ time });
+    const durationSeconds = time
+      ? convertTimeTextToDurationSeconds(time)
+      : undefined;
+
+    if (durationSeconds) updateTodo({ durationSeconds });
   };
 
   const handleDateChange = (nextDate: Date) => {
     detailTodoForm.setDate(nextDate);
-    updateTodo({ date: nextDate });
+    updateTodo({ date: formatDateKey(nextDate) });
   };
 
   const handleTimeChange = (time: string) => {
     detailTodoForm.setTime(time);
-    updateTodo({ time });
+    const durationSeconds = convertTimeTextToDurationSeconds(time);
+
+    if (durationSeconds) updateTodo({ durationSeconds });
   };
 
   const handleSelectPriority = (priority: PriorityLevel) => {
@@ -163,24 +175,33 @@ export const DetailTodoModalContent = ({
 
   const handleRepeatFrequencyChange = (repeatFrequency: RepeatFrequency) => {
     detailTodoForm.changeRepeatFrequency(repeatFrequency);
-    updateTodo({ isRepeatActive: true, repeatFrequency });
+    updateTodo({ repeatType: repeatFrequency });
   };
 
   const handleWeekdayToggle = (weekdayId: string) => {
     const selectedWeekdayIds = detailTodoForm.toggleWeekday(weekdayId);
-    updateTodo({ selectedWeekdayIds });
+    updateTodo({
+      repeatType: "WEEKLY",
+      repeatWeekdays: selectedWeekdayIds.filter(isTodoUpdateRepeatWeekday),
+    });
   };
 
   const handleRepeatDayChange = (repeatDay: string) => {
     detailTodoForm.setRepeatDay(repeatDay);
-    updateTodo({ repeatDay });
+    const repeatDayOfMonth = Number(repeatDay);
+
+    if (
+      Number.isInteger(repeatDayOfMonth) &&
+      repeatDayOfMonth >= 1 &&
+      repeatDayOfMonth <= 31
+    ) {
+      updateTodo({ repeatType: "MONTHLY", repeatDayOfMonth });
+    }
   };
 
   const handleSubtaskCompletedChange = (id: number, completed: boolean) => {
     const subtasks = detailTodoForm.changeSubtaskCompleted(id, completed);
-    const updateData = detailTodoForm.buildUpdateRequest({ subtasks });
-    if (!updateData.title?.trim()) return;
-    onUpdate(updateData);
+    updateTodo({ subtasks: buildDetailTodoSubtasksUpdateRequest(subtasks) });
   };
 
   return (
@@ -206,7 +227,7 @@ export const DetailTodoModalContent = ({
             </p>
           </div>
 
-          <div className={canUpdateTodo ? undefined : "pointer-events-none"}>
+          <div>
             <TodoIconField
               icon={detailTodoForm.icon}
               isIconPanelOpen={isIconPanelOpen}
@@ -225,7 +246,6 @@ export const DetailTodoModalContent = ({
             <DetailTodoTaskFields
               titleValue={detailTodoForm.title}
               isCompleted={todo.completed}
-              disabled={!canUpdateTodo}
               timerStatus={todo.timerStatus}
               subtaskInputs={detailTodoForm.subtaskInputs}
               onTitleChange={detailTodoForm.changeTitle}
@@ -239,13 +259,7 @@ export const DetailTodoModalContent = ({
           </div>
 
           <div className="flex flex-col gap-3">
-            <div
-              className={
-                canUpdateTodo
-                  ? "flex items-center gap-2 py-3"
-                  : "pointer-events-none flex items-center gap-2 py-3"
-              }
-            >
+            <div className="flex items-center gap-2 py-3">
               <TodoToolbar
                 dateLabel={formatShortDateLabel(detailTodoForm.date)}
                 date={detailTodoForm.date}
@@ -312,7 +326,6 @@ export const DetailTodoModalContent = ({
               placeholder={tCreateModal("notePlaceholder")}
               onChange={detailTodoForm.setMemo}
               maxLength={DETAIL_TODO_MEMO_MAX_LENGTH}
-              disabled={!canUpdateTodo}
             />
           </div>
         </div>
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 72c533c9..55bdaa22 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
@@ -1,11 +1,7 @@
 import { TODO_ICON_VALUES } from "@repo/timo-design-system/ui";
 import { useController, useForm } from "react-hook-form";
 
-import type {
-  TodoDetailResponse,
-  TodoUpdateRequest,
-} from "@/api/generated/models";
-import type { BuildDetailTodoUpdateRequestParams } from "@/utils/todo/detail-todo-update-request";
+import type { TodoDetailResponse } from "@/api/generated/models";
 import type {
   PriorityLevel,
   RepeatFrequency,
@@ -18,7 +14,6 @@ import { SECONDS_PER_MINUTE } from "@/constants/time";
 import { useTagField } from "@/hooks/todo-modal/common/use-tag-field";
 import { useDetailSubtaskField } from "@/hooks/todo-modal/detail/use-detail-subtask-field";
 import { parseDateKey } from "@/utils/date/date";
-import { buildDetailTodoUpdateRequest } from "@/utils/todo/detail-todo-update-request";
 import {
   TITLE_MAX_WEIGHTED_LENGTH,
   truncateToWeightedLength,
@@ -80,9 +75,6 @@ export interface UseDetailTodoFormParams {
   todo: TodoDetailResponse;
 }
 
-export type DetailTodoUpdateRequestOverrides =
-  Partial<BuildDetailTodoUpdateRequestParams>;
-
 export const useDetailTodoForm = ({ todo }: UseDetailTodoFormParams) => {
   const durationText = convertDurationToTimeText(todo.durationSeconds ?? 0);
   const todoIcon = todo.icon ?? null;
@@ -196,28 +188,6 @@ export const useDetailTodoForm = ({ todo }: UseDetailTodoFormParams) => {
     return nextSubtasks;
   };
 
-  const buildUpdateRequest = (
-    overrides: DetailTodoUpdateRequestOverrides = {},
-  ): TodoUpdateRequest => {
-    const params: BuildDetailTodoUpdateRequestParams = {
-      icon: iconField.value,
-      title: titleField.value,
-      date: dateField.value,
-      time: timeField.value,
-      priority: priorityField.value,
-      tagId: tagField.selectedTagId,
-      isRepeatActive: isRepeatActiveField.value,
-      repeatFrequency: repeatFrequencyField.value,
-      selectedWeekdayIds: selectedWeekdayIdsField.value,
-      repeatDay: repeatDayField.value,
-      memo: memoField.value,
-      subtasks: subtaskField.subtaskInputs,
-      ...overrides,
-    };
-
-    return buildDetailTodoUpdateRequest(params);
-  };
-
   return {
     date: dateField.value,
     setDate: dateField.onChange,
@@ -248,7 +218,6 @@ export const useDetailTodoForm = ({ todo }: UseDetailTodoFormParams) => {
     selectTime,
     changeRepeatFrequency,
     toggleWeekday,
-    buildUpdateRequest,
     handleSubmit,
     dirtyFields: formState.dirtyFields,
   };
diff --git a/apps/timo-web/utils/todo/detail-todo-update-request.ts b/apps/timo-web/utils/todo/detail-todo-update-request.ts
index bf669e5e..0b1de024 100644
--- a/apps/timo-web/utils/todo/detail-todo-update-request.ts
+++ b/apps/timo-web/utils/todo/detail-todo-update-request.ts
@@ -1,18 +1,11 @@
 import type {
+  TodoSubtaskUpdateRequest,
   TodoUpdateRequest,
   TodoUpdateRequestRepeatWeekdaysItem,
 } from "@/api/generated/models";
 import type { DetailTodoSubtaskInput } from "@/hooks/todo-modal/detail/use-detail-subtask-field";
-import type {
-  PriorityLevel,
-  RepeatFrequency,
-  TodoIconValue,
-} from "@repo/timo-design-system/ui";
-
-import { formatDateKey } from "@/utils/date/date";
-import { convertTimeTextToDurationSeconds } from "@/utils/todo/todo-time";
 
-const UPDATE_REPEAT_WEEKDAYS = [
+const DETAIL_TODO_UPDATE_WEEKDAYS = [
   "MON",
   "TUE",
   "WED",
@@ -22,72 +15,34 @@ const UPDATE_REPEAT_WEEKDAYS = [
   "SUN",
 ] as const;
 
-const isUpdateRepeatWeekday = (
+export const isTodoUpdateRepeatWeekday = (
   weekdayId: string,
 ): weekdayId is TodoUpdateRequestRepeatWeekdaysItem =>
-  (UPDATE_REPEAT_WEEKDAYS as readonly string[]).includes(weekdayId);
+  (DETAIL_TODO_UPDATE_WEEKDAYS as readonly string[]).includes(weekdayId);
+
+export const buildDetailTodoSubtasksUpdateRequest = (
+  subtasks: DetailTodoSubtaskInput[],
+): TodoSubtaskUpdateRequest[] =>
+  subtasks
+    .map((subtask) => ({
+      subtaskId: subtask.subtaskId ?? undefined,
+      content: subtask.value.trim(),
+      completed: subtask.completed,
+    }))
+    .filter((subtask) => subtask.content.length > 0);
 
-export interface BuildDetailTodoUpdateRequestParams {
-  icon: TodoIconValue | null;
+export interface BuildDetailTodoTextUpdateRequestParams {
   title: string;
-  date: Date;
-  time: string;
-  priority: PriorityLevel;
-  tagId: number | null;
-  isRepeatActive: boolean;
-  repeatFrequency: RepeatFrequency;
-  selectedWeekdayIds: string[];
-  repeatDay: string;
   memo: string;
   subtasks: DetailTodoSubtaskInput[];
 }
 
-export const buildDetailTodoUpdateRequest = ({
-  icon,
+export const buildDetailTodoTextUpdateRequest = ({
   title,
-  date,
-  time,
-  priority,
-  tagId,
-  isRepeatActive,
-  repeatFrequency,
-  selectedWeekdayIds,
-  repeatDay,
   memo,
   subtasks,
-}: BuildDetailTodoUpdateRequestParams): TodoUpdateRequest => {
-  const durationSeconds = convertTimeTextToDurationSeconds(time);
-  const repeatType = isRepeatActive ? repeatFrequency : "NONE";
-  const repeatDayOfMonth = Number(repeatDay);
-  const repeatWeekdays = selectedWeekdayIds.filter(isUpdateRepeatWeekday);
-  const updateSubtasks = subtasks
-    .map((subtask) => ({
-      subtaskId: subtask.subtaskId ?? undefined,
-      content: subtask.value.trim(),
-      completed: subtask.completed,
-    }))
-    .filter((subtask) => subtask.content.length > 0);
-
-  return {
-    icon: icon ?? undefined,
-    title: title.trim(),
-    date: formatDateKey(date),
-    durationSeconds: durationSeconds > 0 ? durationSeconds : undefined,
-    priority,
-    tagId: tagId ?? undefined,
-    repeatType,
-    repeatWeekdays:
-      repeatType === "WEEKLY" && repeatWeekdays.length > 0
-        ? repeatWeekdays
-        : undefined,
-    repeatDayOfMonth:
-      repeatType === "MONTHLY" &&
-      Number.isInteger(repeatDayOfMonth) &&
-      repeatDayOfMonth >= 1 &&
-      repeatDayOfMonth <= 31
-        ? repeatDayOfMonth
-        : undefined,
-    memo: memo.trim(),
-    subtasks: updateSubtasks,
-  };
-};
+}: BuildDetailTodoTextUpdateRequestParams): TodoUpdateRequest => ({
+  title: title.trim(),
+  memo: memo.trim(),
+  subtasks: buildDetailTodoSubtasksUpdateRequest(subtasks),
+});

From 365352fb206698cad440fd484e56550082c147a4 Mon Sep 17 00:00:00 2001
From: kimminna <kmina121777@naver.com>
Date: Wed, 15 Jul 2026 03:46:57 +0900
Subject: [PATCH 49/75] =?UTF-8?q?fix(web):=20=EC=9E=AC=EC=83=9D=20API=20?=
 =?UTF-8?q?=EC=8B=A4=ED=8C=A8=20=EC=8B=9C=20=EC=97=90=EB=9F=AC=20=EB=A9=94?=
 =?UTF-8?q?=EC=8B=9C=EC=A7=80=EB=A5=BC=20=EC=9D=91=EB=8B=B5=20=EC=9D=B8?=
 =?UTF-8?q?=ED=84=B0=EC=85=89=ED=84=B0=EA=B0=80=20=EB=B0=98=ED=99=98?=
 =?UTF-8?q?=ED=95=98=EB=8A=94=20ApiError=EC=97=90=EC=84=9C=20=EC=9D=BD?=
 =?UTF-8?q?=EB=8A=94=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

axios 응답 인터셉터가 항상 ApiError 인스턴스로 reject하므로 error.response?.data.message는
항상 undefined였다. error.message를 사용하도록 수정하고 타입도 ApiError로 정렬한다.
---
 .../home/_hooks/use-home-todos-by-date.ts                | 9 ++++-----
 1 file changed, 4 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 306f6748..f378ecf4 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
@@ -3,8 +3,7 @@
 import { useQueryClient } from "@tanstack/react-query";
 import { useEffect, useState } from "react";
 
-import type { ErrorType } from "@/api/client/custom-instance";
-import type { ErrorDto } from "@/api/generated/models";
+import type { ApiError } from "@/api/error/api-error";
 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";
 
@@ -52,7 +51,7 @@ export const useHomeTodosByDate = (
   const { invalidateHomeView, invalidateTimerState, invalidateTimeBoxes } =
     useTimerQueryInvalidation();
 
-  const { mutate: startTimer } = useStartTimer({
+  const { mutate: startTimer } = useStartTimer<ApiError>({
     mutation: { onSuccess: invalidateTimerState },
   });
   const { mutate: changeStatus } = useChangeStatus({
@@ -179,8 +178,8 @@ export const useHomeTodosByDate = (
       { todoId },
       {
         onSuccess: () => invalidateTodoDetail(dateKey, todoId),
-        onError: (error: ErrorType<ErrorDto>) => {
-          onPlayError(error.response?.data.message);
+        onError: (error: ApiError) => {
+          onPlayError(error.message);
         },
       },
     );

From 73e92b714c8e232b898ffdbdc612e165c6fe364a Mon Sep 17 00:00:00 2001
From: yumin-kim4757 <rladbals0211@gmail.com>
Date: Wed, 15 Jul 2026 03:47:11 +0900
Subject: [PATCH 50/75] =?UTF-8?q?fix(web):=20=EC=83=81=EC=84=B8=20?=
 =?UTF-8?q?=ED=88=AC=EB=91=90=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20=ED=9B=84=20=EB=AA=A8=EB=8B=AC=20=EB=8B=AB=EC=9D=84?=
 =?UTF-8?q?=20=EB=95=8C=20=EB=B3=80=EA=B2=BD=EC=82=AC=ED=95=AD=EC=9D=84=20?=
 =?UTF-8?q?=EB=B0=98=EC=98=81=20(#202)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/DetailTodoModalContent.tsx         | 36 ++++++++++++++-----
 1 file changed, 28 insertions(+), 8 deletions(-)

diff --git a/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx b/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
index 32b858fa..840a174e 100644
--- a/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
+++ b/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
@@ -100,6 +100,18 @@ export const DetailTodoModalContent = ({
       }),
     [detailTodoForm.memo, detailTodoForm.subtaskInputs, detailTodoForm.title],
   );
+  const lastSubmittedTextUpdateSignatureRef = useRef(textUpdateSignature);
+
+  const submitTextUpdate = useCallback(() => {
+    if (!detailTodoForm.title.trim()) return;
+    if (lastSubmittedTextUpdateSignatureRef.current === textUpdateSignature) {
+      return;
+    }
+
+    latestOnUpdateRef.current(latestBuildTextUpdateRequestRef.current());
+    lastSubmittedTextUpdateSignatureRef.current = textUpdateSignature;
+  }, [detailTodoForm.title, textUpdateSignature]);
+
   useEffect(() => {
     latestOnUpdateRef.current = onUpdate;
   }, [onUpdate]);
@@ -116,14 +128,18 @@ export const DetailTodoModalContent = ({
       return;
     }
 
-    if (!detailTodoForm.title.trim()) return;
-
-    const updateTimer = window.setTimeout(() => {
-      latestOnUpdateRef.current(latestBuildTextUpdateRequestRef.current());
-    }, TEXT_UPDATE_DEBOUNCE_MS);
+    const updateTimer = window.setTimeout(
+      submitTextUpdate,
+      TEXT_UPDATE_DEBOUNCE_MS,
+    );
 
     return () => window.clearTimeout(updateTimer);
-  }, [detailTodoForm.title, isOpen, textUpdateSignature]);
+  }, [isOpen, submitTextUpdate]);
+
+  const handleClose = () => {
+    submitTextUpdate();
+    onClose();
+  };
 
   const updateTodo = (updateData: TodoUpdateRequest) => {
     if ("title" in updateData && !updateData.title?.trim()) return;
@@ -207,13 +223,17 @@ export const DetailTodoModalContent = ({
   return (
     <OverlayModal
       isOpen={isOpen}
-      onClose={onClose}
+      onClose={handleClose}
       onExited={onExited}
       ariaLabel={t("ariaLabel")}
       className="w-124 items-start px-7.5 py-5"
     >
       <div className="flex w-full justify-end">
-        <button type="button" aria-label={tCommon("close")} onClick={onClose}>
+        <button
+          type="button"
+          aria-label={tCommon("close")}
+          onClick={handleClose}
+        >
           <DeleteIcon />
         </button>
       </div>

From 6a7a9f9e5f52d2ad3a5c5343082178e087610cdc Mon Sep 17 00:00:00 2001
From: jjangminii <wjdals030328@catholic.ac.kr>
Date: Wed, 15 Jul 2026 03:52:47 +0900
Subject: [PATCH 51/75] =?UTF-8?q?fix(web):=20=EB=8B=A4=EB=A5=B8=20?=
 =?UTF-8?q?=ED=88=AC=EB=91=90=EC=97=90=20=ED=99=9C=EC=84=B1=20=ED=83=80?=
 =?UTF-8?q?=EC=9D=B4=EB=A8=B8=EA=B0=80=20=EC=9E=88=EC=9C=BC=EB=A9=B4=20?=
 =?UTF-8?q?=EC=9E=AC=EC=83=9D=20=EB=B2=84=ED=8A=BC=20=EC=83=89=EC=9D=84=20?=
 =?UTF-8?q?=EB=82=AE=EC=B6=B0=20=EA=B5=AC=EB=B6=84=ED=95=9C=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

홈/오늘 탭 목록과 투두 수정 모달의 재생 버튼이 재생 중이든 일시정지든 상관없이
전부 같은 파란색이라, 어떤 투두가 지금 활성 타이머를 갖고 있는지 목록에서 구분이
안 됐습니다. 활성 타이머가 아예 없으면 전부 파란색, 활성 타이머가 있으면 그
투두만 파란색·나머지는 회색으로 낮추도록 PlayButton에 active prop을 추가하고
홈/오늘/투두 수정 모달 세 곳에 동일하게 적용했습니다.
---
 .../_components/todo-card/HomeTodoCard.tsx    |  8 ++++++-
 .../home/_containers/HomeTodoContainer.tsx    |  3 +++
 .../_containers/TodayTodoCardContainer.tsx    |  3 +++
 .../_containers/TodayTodoListContainer.tsx    |  2 ++
 .../today/_components/TodayTodoCard.tsx       |  8 ++++++-
 .../detail/DetailTodoModalContent.tsx         |  3 +++
 .../detail/DetailTodoTaskFields.tsx           |  8 ++++++-
 .../detail/DetailTodoModalContainer.tsx       |  4 ++++
 .../button/play-button/PlayButton.tsx         | 23 +++++++++----------
 9 files changed, 47 insertions(+), 15 deletions(-)

diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-card/HomeTodoCard.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-card/HomeTodoCard.tsx
index b6f5dbcd..e1a8e187 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-card/HomeTodoCard.tsx
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-card/HomeTodoCard.tsx
@@ -49,6 +49,8 @@ export interface HomeTodoCardProps {
   hasMemo: boolean;
   isRepeated: boolean;
   timerStatus: TodoTimerStatusTypes;
+  /** 다른 투두에 활성 타이머(재생/일시정지)가 있을 때 이 투두의 재생 버튼을 낮춰 보여준다 */
+  isPlayHighlighted: boolean;
   subtaskTitle?: string;
   isSubtaskCompleted?: boolean;
   onClickTodo?: () => void;
@@ -67,6 +69,7 @@ export const HomeTodoCard = ({
   hasMemo,
   isRepeated,
   timerStatus,
+  isPlayHighlighted,
   subtaskTitle,
   isSubtaskCompleted = false,
   onClickTodo,
@@ -131,6 +134,7 @@ export const HomeTodoCard = ({
         variant={isRunning ? "stop" : "play"}
         size="sm"
         disabled={isCompleted}
+        active={isPlayHighlighted}
         onClick={handlePlayClick}
         onPointerDown={stopInteractiveEvent}
       >
@@ -138,8 +142,10 @@ export const HomeTodoCard = ({
           <PlayDisabledIcon />
         ) : isRunning ? (
           <StopIcon />
-        ) : (
+        ) : isPlayHighlighted ? (
           <PlayIcon />
+        ) : (
+          <PlayDisabledIcon />
         )}
       </PlayButton>
     </div>
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 8c7f75f0..83ba1415 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
@@ -138,6 +138,8 @@ export const HomeTodoContainer = () => {
                   const timerStatus = isActiveTodo
                     ? activeTimer.status
                     : todo.timerStatus;
+                  const isPlayHighlighted =
+                    !activeTimer || Boolean(isActiveTodo);
 
                   const todoTagLabelKey = todo.tag
                     ? getDefaultTagLabelKey(todo.tag.tagId)
@@ -172,6 +174,7 @@ export const HomeTodoContainer = () => {
                           hasMemo={todo.hasMemo}
                           isRepeated={todo.isRepeated}
                           timerStatus={timerStatus}
+                          isPlayHighlighted={isPlayHighlighted}
                           subtaskTitle={firstSubtask?.content}
                           isSubtaskCompleted={firstSubtask?.completed}
                           onClickTodo={openDetailTodoModal}
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 e222ec28..ab6afa60 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
@@ -17,6 +17,7 @@ export interface TodayTodoCardContainerProps {
   subTodos: SubTodo[];
   toolbar: TodayTodoCardToolbar;
   timerStatus: TodoTimerStatusTypes;
+  isPlayHighlighted: boolean;
   icon?: ReactNode;
   onCardClick?: () => void;
   onToggleCompleted?: (completed: boolean) => void;
@@ -31,6 +32,7 @@ export const TodayTodoCardContainer = ({
   subTodos,
   toolbar,
   timerStatus,
+  isPlayHighlighted,
   onCardClick,
   onToggleCompleted,
   onTogglePlay,
@@ -47,6 +49,7 @@ export const TodayTodoCardContainer = ({
       isDone={isCompleted}
       isDimmed={isDimmed}
       isPlaying={isPlaying}
+      isPlayHighlighted={isPlayHighlighted}
       icon={icon}
       subTodos={subTodos}
       toolbar={toolbar}
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 6f973645..360de333 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
@@ -92,6 +92,7 @@ export const TodayTodoListContainer = () => {
           const timerStatus = isActiveTodo
             ? activeTimer.status
             : todo.timerStatus;
+          const isPlayHighlighted = !activeTimer || Boolean(isActiveTodo);
 
           return (
             <DetailTodoModalContainer
@@ -110,6 +111,7 @@ export const TodayTodoListContainer = () => {
                   isCompleted={todo.completed}
                   icon={renderTodoIcon(todo.icon)}
                   timerStatus={timerStatus}
+                  isPlayHighlighted={isPlayHighlighted}
                   toolbar={{
                     date: formatDate(todo.date),
                     dateValue: new Date(todo.date),
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 6003adc2..379e3cce 100644
--- a/apps/timo-web/app/[locale]/(main)/today/_components/TodayTodoCard.tsx
+++ b/apps/timo-web/app/[locale]/(main)/today/_components/TodayTodoCard.tsx
@@ -49,6 +49,8 @@ export interface TodayTodoCardProps {
   isDone: boolean;
   isDimmed: boolean;
   isPlaying: boolean;
+  /** 다른 투두에 활성 타이머(재생/일시정지)가 있을 때 이 투두의 재생 버튼을 낮춰 보여준다 */
+  isPlayHighlighted: boolean;
   icon?: ReactNode;
   subTodos: SubTodo[];
   toolbar: TodayTodoCardToolbar;
@@ -68,6 +70,7 @@ export const TodayTodoCard = ({
   isDone,
   isDimmed,
   isPlaying,
+  isPlayHighlighted,
   icon,
   subTodos,
   toolbar,
@@ -123,14 +126,17 @@ export const TodayTodoCard = ({
             variant={isPlaying ? "stop" : "play"}
             size="lg"
             disabled={isDone}
+            active={isPlayHighlighted}
             onClick={onPlay}
           >
             {isDone ? (
               <PlayDisabledIcon width={24} height={24} />
             ) : isPlaying ? (
               <StopIcon width={24} height={24} />
-            ) : (
+            ) : isPlayHighlighted ? (
               <PlayIcon width={24} height={24} />
+            ) : (
+              <PlayDisabledIcon width={24} height={24} />
             )}
           </PlayButton>
         </div>
diff --git a/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx b/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
index dad126c1..9d4f162c 100644
--- a/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
+++ b/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
@@ -40,6 +40,7 @@ export interface DetailTodoModalContentProps {
   onClose: () => void;
   onExited: () => void;
   todo: TodoDetailResponse;
+  isPlayHighlighted: boolean;
   onTogglePlay: () => void;
   onToggleCompleted: (completed: boolean) => void;
   onDelete: () => void;
@@ -51,6 +52,7 @@ export const DetailTodoModalContent = ({
   onClose,
   onExited,
   todo,
+  isPlayHighlighted,
   onTogglePlay,
   onToggleCompleted,
   onDelete,
@@ -227,6 +229,7 @@ export const DetailTodoModalContent = ({
               isCompleted={todo.completed}
               disabled={!canUpdateTodo}
               timerStatus={todo.timerStatus}
+              isPlayHighlighted={isPlayHighlighted}
               subtaskInputs={detailTodoForm.subtaskInputs}
               onTitleChange={detailTodoForm.changeTitle}
               onToggleCompleted={onToggleCompleted}
diff --git a/apps/timo-web/components/todo-modal/detail/DetailTodoTaskFields.tsx b/apps/timo-web/components/todo-modal/detail/DetailTodoTaskFields.tsx
index e4a5f676..66fc69b2 100644
--- a/apps/timo-web/components/todo-modal/detail/DetailTodoTaskFields.tsx
+++ b/apps/timo-web/components/todo-modal/detail/DetailTodoTaskFields.tsx
@@ -20,6 +20,8 @@ export interface DetailTodoTaskFieldsProps {
   isCompleted: boolean;
   disabled?: boolean;
   timerStatus: TodoDetailResponseTimerStatus;
+  /** 다른 투두에 활성 타이머(재생/일시정지)가 있을 때 이 재생 버튼을 낮춰 보여준다 */
+  isPlayHighlighted: boolean;
   subtaskInputs: DetailTodoSubtaskInput[];
   onTitleChange: (value: string) => void;
   onToggleCompleted: (completed: boolean) => void;
@@ -40,6 +42,7 @@ export const DetailTodoTaskFields = ({
   isCompleted,
   disabled = false,
   timerStatus,
+  isPlayHighlighted,
   subtaskInputs,
   onTitleChange,
   onToggleCompleted,
@@ -72,14 +75,17 @@ export const DetailTodoTaskFields = ({
             variant={timerStatus === "RUNNING" ? "stop" : "play"}
             size="lg"
             disabled={isCompleted}
+            active={isPlayHighlighted}
             onClick={onTogglePlay}
           >
             {isCompleted ? (
               <PlayDisabledIcon width={24} height={24} />
             ) : timerStatus === "RUNNING" ? (
               <StopIcon width={24} height={24} />
-            ) : (
+            ) : isPlayHighlighted ? (
               <PlayIcon width={24} height={24} />
+            ) : (
+              <PlayDisabledIcon width={24} height={24} />
             )}
           </PlayButton>
         </div>
diff --git a/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx b/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx
index c506c341..ee442775 100644
--- a/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx
+++ b/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx
@@ -11,6 +11,7 @@ import { AnimatedToast } from "@/components/toast/AnimatedToast";
 import { DetailTodoModalContent } from "@/components/todo-modal/detail/DetailTodoModalContent";
 import { useDeleteTodoSubmit } from "@/hooks/todo-modal/detail/use-delete-todo-submit";
 import { useUpdateTodoSubmit } from "@/hooks/todo-modal/detail/use-update-todo-submit";
+import { useActiveTimer } from "@/hooks/use-active-timer";
 
 export interface DetailTodoModalContainerProps {
   todoId: number;
@@ -42,7 +43,9 @@ export const DetailTodoModalContainer = ({
   );
   const { handleDelete } = useDeleteTodoSubmit();
   const { handleUpdate } = useUpdateTodoSubmit();
+  const { data: activeTimer } = useActiveTimer();
   const todo = data?.data;
+  const isPlayHighlighted = !activeTimer || activeTimer.todoId === todoId;
 
   const openDetailTodoModal = () => {
     setIsMounted(true);
@@ -89,6 +92,7 @@ export const DetailTodoModalContainer = ({
           onClose={closeDetailTodoModal}
           onExited={() => setIsMounted(false)}
           todo={todo}
+          isPlayHighlighted={isPlayHighlighted}
           onTogglePlay={onTogglePlay}
           onToggleCompleted={onToggleCompleted}
           onDelete={deleteTodo}
diff --git a/packages/timo-design-system/src/components/button/play-button/PlayButton.tsx b/packages/timo-design-system/src/components/button/play-button/PlayButton.tsx
index 67097b3c..ce3f2af9 100644
--- a/packages/timo-design-system/src/components/button/play-button/PlayButton.tsx
+++ b/packages/timo-design-system/src/components/button/play-button/PlayButton.tsx
@@ -2,7 +2,6 @@ import { cn } from "../../../lib";
 
 import type { MouseEventHandler, PointerEventHandler, ReactNode } from "react";
 
-
 export type PlayButtonVariant = "play" | "stop";
 export type PlayButtonSize = "sm" | "lg";
 
@@ -10,18 +9,17 @@ export interface PlayButtonProps {
   variant: PlayButtonVariant;
   size?: PlayButtonSize;
   disabled?: boolean;
+  /** 다른 항목에 활성 타이머가 있어 이 버튼을 시각적으로 낮춰야 할 때 false로 준다 (클릭은 계속 가능) */
+  active?: boolean;
   onClick?: MouseEventHandler<HTMLButtonElement>;
   onPointerDown?: PointerEventHandler<HTMLButtonElement>;
   children?: ReactNode;
   ariaLabel?: string;
 }
 
-const VARIANT_MAP: Record<
-  PlayButtonVariant,
-  { className: string; label: string }
-> = {
-  play: { className: "cursor-pointer bg-timo-blue-50", label: "재생" },
-  stop: { className: "cursor-pointer bg-timo-blue-50", label: "정지" },
+const VARIANT_LABEL: Record<PlayButtonVariant, string> = {
+  play: "재생",
+  stop: "정지",
 };
 
 const SIZE_CLASS: Record<PlayButtonSize, string> = {
@@ -33,6 +31,7 @@ export const PlayButton = ({
   variant,
   size = "sm",
   disabled = false,
+  active = true,
   onClick,
   onPointerDown,
   children,
@@ -46,16 +45,16 @@ export const PlayButton = ({
       disabled={disabled}
       aria-label={
         ariaLabel ??
-        (disabled
-          ? `${VARIANT_MAP[variant].label} 불가`
-          : VARIANT_MAP[variant].label)
+        (disabled ? `${VARIANT_LABEL[variant]} 불가` : VARIANT_LABEL[variant])
       }
       className={cn(
-        "inline-flex items-center justify-center rounded-full",
+        "inline-flex cursor-pointer items-center justify-center rounded-full",
         SIZE_CLASS[size],
         disabled
           ? "bg-timo-gray-500 cursor-not-allowed"
-          : VARIANT_MAP[variant].className,
+          : active
+            ? "bg-timo-blue-50"
+            : "bg-timo-gray-500",
       )}
     >
       {children}

From 72428d79ba7566b64c9e4465a069a3009899e784 Mon Sep 17 00:00:00 2001
From: jjangminii <wjdals030328@catholic.ac.kr>
Date: Wed, 15 Jul 2026 03:58:40 +0900
Subject: [PATCH 52/75] =?UTF-8?q?chore(web):=20isPlayHighlighted=20?=
 =?UTF-8?q?=EC=A3=BC=EC=84=9D=EC=9D=84=20=EC=A0=9C=EA=B1=B0=ED=95=9C?=
 =?UTF-8?q?=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

prop 이름만으로 드러나는 설명이라 정리했습니다.
---
 .../home/_components/todo-card/HomeTodoCard.tsx                  | 1 -
 .../app/[locale]/(main)/today/_components/TodayTodoCard.tsx      | 1 -
 .../components/todo-modal/detail/DetailTodoTaskFields.tsx        | 1 -
 3 files changed, 3 deletions(-)

diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-card/HomeTodoCard.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-card/HomeTodoCard.tsx
index e1a8e187..e19edb94 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-card/HomeTodoCard.tsx
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-card/HomeTodoCard.tsx
@@ -49,7 +49,6 @@ export interface HomeTodoCardProps {
   hasMemo: boolean;
   isRepeated: boolean;
   timerStatus: TodoTimerStatusTypes;
-  /** 다른 투두에 활성 타이머(재생/일시정지)가 있을 때 이 투두의 재생 버튼을 낮춰 보여준다 */
   isPlayHighlighted: boolean;
   subtaskTitle?: string;
   isSubtaskCompleted?: boolean;
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 379e3cce..f8d279a5 100644
--- a/apps/timo-web/app/[locale]/(main)/today/_components/TodayTodoCard.tsx
+++ b/apps/timo-web/app/[locale]/(main)/today/_components/TodayTodoCard.tsx
@@ -49,7 +49,6 @@ export interface TodayTodoCardProps {
   isDone: boolean;
   isDimmed: boolean;
   isPlaying: boolean;
-  /** 다른 투두에 활성 타이머(재생/일시정지)가 있을 때 이 투두의 재생 버튼을 낮춰 보여준다 */
   isPlayHighlighted: boolean;
   icon?: ReactNode;
   subTodos: SubTodo[];
diff --git a/apps/timo-web/components/todo-modal/detail/DetailTodoTaskFields.tsx b/apps/timo-web/components/todo-modal/detail/DetailTodoTaskFields.tsx
index 66fc69b2..a3e1db31 100644
--- a/apps/timo-web/components/todo-modal/detail/DetailTodoTaskFields.tsx
+++ b/apps/timo-web/components/todo-modal/detail/DetailTodoTaskFields.tsx
@@ -20,7 +20,6 @@ export interface DetailTodoTaskFieldsProps {
   isCompleted: boolean;
   disabled?: boolean;
   timerStatus: TodoDetailResponseTimerStatus;
-  /** 다른 투두에 활성 타이머(재생/일시정지)가 있을 때 이 재생 버튼을 낮춰 보여준다 */
   isPlayHighlighted: boolean;
   subtaskInputs: DetailTodoSubtaskInput[];
   onTitleChange: (value: string) => void;

From 3de47bca954b14f57c92783b41664793b4dbb281 Mon Sep 17 00:00:00 2001
From: yumin-kim4757 <rladbals0211@gmail.com>
Date: Wed, 15 Jul 2026 09:58:44 +0900
Subject: [PATCH 53/75] =?UTF-8?q?fix(web):=20=ED=99=88=20=ED=88=AC?=
 =?UTF-8?q?=EB=91=90=20=EC=B9=B4=EB=93=9C=20=ED=94=8C=EB=A0=88=EC=9D=B4=20?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC=EC=9D=B4=20=EB=93=9C=EB=9E=98=EA=B7=B8=20?=
 =?UTF-8?q?=EC=9D=B4=EB=B2=A4=ED=8A=B8=EC=97=90=20=EB=A7=89=ED=9E=88?=
 =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95=20?=
 =?UTF-8?q?(#202)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../_components/todo-card/HomeTodoCard.tsx    | 34 +++++++++++--------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-card/HomeTodoCard.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-card/HomeTodoCard.tsx
index b6f5dbcd..674a35bc 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-card/HomeTodoCard.tsx
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-card/HomeTodoCard.tsx
@@ -104,7 +104,7 @@ export const HomeTodoCard = ({
   };
 
   const stopInteractiveEvent = (
-    event: MouseEvent<HTMLButtonElement> | PointerEvent<HTMLButtonElement>,
+    event: MouseEvent<HTMLElement> | PointerEvent<HTMLElement>,
   ) => {
     event.stopPropagation();
   };
@@ -127,21 +127,27 @@ export const HomeTodoCard = ({
           {title}
         </p>
       </div>
-      <PlayButton
-        variant={isRunning ? "stop" : "play"}
-        size="sm"
-        disabled={isCompleted}
-        onClick={handlePlayClick}
+      <div
+        role="none"
+        onPointerDownCapture={stopInteractiveEvent}
         onPointerDown={stopInteractiveEvent}
+        onClick={stopInteractiveEvent}
       >
-        {isCompleted ? (
-          <PlayDisabledIcon />
-        ) : isRunning ? (
-          <StopIcon />
-        ) : (
-          <PlayIcon />
-        )}
-      </PlayButton>
+        <PlayButton
+          variant={isRunning ? "stop" : "play"}
+          size="sm"
+          disabled={isCompleted}
+          onClick={handlePlayClick}
+        >
+          {isCompleted ? (
+            <PlayDisabledIcon />
+          ) : isRunning ? (
+            <StopIcon />
+          ) : (
+            <PlayIcon />
+          )}
+        </PlayButton>
+      </div>
     </div>
   );
 

From b0c0e9a40aa12f784d08190bcc731c8c49267807 Mon Sep 17 00:00:00 2001
From: yumin-kim4757 <rladbals0211@gmail.com>
Date: Wed, 15 Jul 2026 10:08:05 +0900
Subject: [PATCH 54/75] =?UTF-8?q?fix(web):=20=EC=83=81=EC=84=B8=20?=
 =?UTF-8?q?=ED=88=AC=EB=91=90=20=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=84=A0?=
 =?UTF-8?q?=ED=83=9D=20=ED=9B=84=20=ED=99=95=EC=A0=95=20=EC=8B=9C=EC=97=90?=
 =?UTF-8?q?=EB=A7=8C=20=EC=88=98=EC=A0=95=20=EC=9A=94=EC=B2=AD=20=EC=A0=84?=
 =?UTF-8?q?=EC=86=A1=20(#202)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/DetailTodoModalContent.tsx         | 40 ++++++++++++++++---
 1 file changed, 34 insertions(+), 6 deletions(-)

diff --git a/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx b/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
index 840a174e..b8f2ec93 100644
--- a/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
+++ b/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
@@ -67,6 +67,9 @@ export const DetailTodoModalContent = ({
   const detailTodoForm = useDetailTodoForm({ todo });
   const [selectedTime, setSelectedTime] = useState<TimeSelection>();
   const [isIconPanelOpen, setIsIconPanelOpen] = useState(false);
+  const [pendingIcon, setPendingIcon] = useState<TodoIconValue | null>(
+    detailTodoForm.icon,
+  );
   const dateNumber = detailTodoForm.date.getDate();
   const dayOfWeek = isDetailTodoWeekdayId(todo.dayOfWeek)
     ? todo.dayOfWeek
@@ -147,12 +150,37 @@ export const DetailTodoModalContent = ({
   };
 
   const handleSelectIcon = (nextIcon: TodoIconValue) => {
-    detailTodoForm.selectIcon(nextIcon);
-    updateTodo({ icon: nextIcon });
+    setPendingIcon(nextIcon);
+  };
+
+  const handleOpenIconPanel = () => {
+    setPendingIcon(detailTodoForm.icon);
+    setIsIconPanelOpen(true);
+  };
+
+  const handleSubmitIcon = () => {
+    if (!pendingIcon || pendingIcon === detailTodoForm.icon) {
+      setIsIconPanelOpen(false);
+      return;
+    }
+
+    detailTodoForm.selectIcon(pendingIcon);
+    updateTodo({ icon: pendingIcon });
+    setIsIconPanelOpen(false);
+  };
+
+  const handleToggleIconPanel = () => {
+    if (isIconPanelOpen) {
+      handleSubmitIcon();
+      return;
+    }
+
+    setPendingIcon(detailTodoForm.icon);
+    setIsIconPanelOpen(true);
   };
 
   const handleRemoveIcon = () => {
-    detailTodoForm.removeIcon();
+    setPendingIcon(null);
   };
 
   const handleSelectTime = (nextTime: TimeSelection) => {
@@ -249,11 +277,11 @@ export const DetailTodoModalContent = ({
 
           <div>
             <TodoIconField
-              icon={detailTodoForm.icon}
+              icon={isIconPanelOpen ? pendingIcon : detailTodoForm.icon}
               isIconPanelOpen={isIconPanelOpen}
               addIconLabel={tCreateModal("addIcon")}
-              onOpenPanel={() => setIsIconPanelOpen(true)}
-              onTogglePanel={() => setIsIconPanelOpen((prev) => !prev)}
+              onOpenPanel={handleOpenIconPanel}
+              onTogglePanel={handleToggleIconPanel}
               onSelectIcon={handleSelectIcon}
               onRemoveIcon={handleRemoveIcon}
             />

From 6b133bc706eb36cdce813017ee4cb1b14c32650f Mon Sep 17 00:00:00 2001
From: yumin-kim4757 <rladbals0211@gmail.com>
Date: Wed, 15 Jul 2026 10:08:28 +0900
Subject: [PATCH 55/75] =?UTF-8?q?fix(web):=20=EC=83=81=EC=84=B8=20?=
 =?UTF-8?q?=ED=88=AC=EB=91=90=20=EB=AA=A8=EB=8B=AC=EC=97=90=20=ED=99=9C?=
 =?UTF-8?q?=EC=84=B1=20=ED=83=80=EC=9D=B4=EB=A8=B8=20=EC=83=81=ED=83=9C=20?=
 =?UTF-8?q?=EB=B0=98=EC=98=81=20(#202)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../todo-modal/detail/DetailTodoModalContent.tsx           | 5 ++++-
 .../todo-modal/detail/DetailTodoModalContainer.tsx         | 7 +++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx b/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
index b8f2ec93..ccbe04d5 100644
--- a/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
+++ b/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
@@ -5,6 +5,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import type {
   TodoDetailResponse,
+  TodoDetailResponseTimerStatus,
   TodoUpdateRequest,
 } from "@/api/generated/models";
 import type {
@@ -49,6 +50,7 @@ export interface DetailTodoModalContentProps {
   onToggleCompleted: (completed: boolean) => void;
   onDelete: () => void;
   onUpdate: (data: TodoUpdateRequest) => void;
+  timerStatus: TodoDetailResponseTimerStatus;
 }
 
 export const DetailTodoModalContent = ({
@@ -60,6 +62,7 @@ export const DetailTodoModalContent = ({
   onToggleCompleted,
   onDelete,
   onUpdate,
+  timerStatus,
 }: DetailTodoModalContentProps) => {
   const t = useTranslations("Home.detailModal");
   const tCreateModal = useTranslations("Home.createModal");
@@ -294,7 +297,7 @@ export const DetailTodoModalContent = ({
             <DetailTodoTaskFields
               titleValue={detailTodoForm.title}
               isCompleted={todo.completed}
-              timerStatus={todo.timerStatus}
+              timerStatus={timerStatus}
               subtaskInputs={detailTodoForm.subtaskInputs}
               onTitleChange={detailTodoForm.changeTitle}
               onToggleCompleted={onToggleCompleted}
diff --git a/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx b/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx
index 404b076f..d2506bd2 100644
--- a/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx
+++ b/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx
@@ -9,6 +9,7 @@ import { useGetTodoDetail } from "@/api/generated/endpoints/todo/todo";
 import { DetailTodoModalContent } from "@/components/todo-modal/detail/DetailTodoModalContent";
 import { useDeleteTodoSubmit } from "@/hooks/todo-modal/detail/use-delete-todo-submit";
 import { useUpdateTodoSubmit } from "@/hooks/todo-modal/detail/use-update-todo-submit";
+import { useActiveTimer } from "@/hooks/use-active-timer";
 
 export interface DetailTodoModalContainerProps {
   todoId: number;
@@ -43,8 +44,13 @@ const DetailTodoModalQuery = ({
   const { handleUpdate } = useUpdateTodoSubmit();
   const todo = data?.data;
 
+  const { data: activeTimer } = useActiveTimer();
+
   if (isError || !todo) return null;
 
+  const timerStatus =
+    activeTimer?.todoId === todoId ? activeTimer.status : todo.timerStatus;
+
   const deleteTodo = () => {
     handleDelete(todoId, {
       onSuccess: () => {
@@ -72,6 +78,7 @@ const DetailTodoModalQuery = ({
       onToggleCompleted={onToggleCompleted}
       onDelete={deleteTodo}
       onUpdate={updateTodo}
+      timerStatus={timerStatus}
     />
   );
 };

From 8d7cd001d57145142192cd830f443acfb6cbbd74 Mon Sep 17 00:00:00 2001
From: yumin-kim4757 <rladbals0211@gmail.com>
Date: Wed, 15 Jul 2026 10:08:54 +0900
Subject: [PATCH 56/75] =?UTF-8?q?fix(web):=20=ED=88=AC=EB=91=90=20?=
 =?UTF-8?q?=ED=94=8C=EB=A0=88=EC=9D=B4=20=EB=B2=84=ED=8A=BC=20=ED=81=B4?=
 =?UTF-8?q?=EB=A6=AD=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=EC=A0=84=ED=8C=8C=20?=
 =?UTF-8?q?=EB=B0=A9=EC=A7=80=20(#202)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../today/_components/TodayTodoCard.tsx       | 14 ++++++++++--
 .../detail/DetailTodoTaskFields.tsx           | 22 +++++++++++++++----
 2 files changed, 30 insertions(+), 6 deletions(-)

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 6003adc2..0e68edff 100644
--- a/apps/timo-web/app/[locale]/(main)/today/_components/TodayTodoCard.tsx
+++ b/apps/timo-web/app/[locale]/(main)/today/_components/TodayTodoCard.tsx
@@ -13,7 +13,7 @@ import {
 } from "@repo/timo-design-system/ui";
 import { cn } from "@repo/timo-design-system/utils";
 
-import type { KeyboardEvent, ReactNode } from "react";
+import type { KeyboardEvent, MouseEvent, PointerEvent, ReactNode } from "react";
 
 const CARD_STYLE = {
   active: {
@@ -63,6 +63,12 @@ export interface TodayTodoCardProps {
 const stopPropagation = (e: { stopPropagation: () => void }) =>
   e.stopPropagation();
 
+const stopPlayEvent = (
+  event: MouseEvent<HTMLButtonElement> | PointerEvent<HTMLButtonElement>,
+) => {
+  event.stopPropagation();
+};
+
 export const TodayTodoCard = ({
   title,
   isDone,
@@ -123,7 +129,11 @@ export const TodayTodoCard = ({
             variant={isPlaying ? "stop" : "play"}
             size="lg"
             disabled={isDone}
-            onClick={onPlay}
+            onClick={(event) => {
+              stopPlayEvent(event);
+              onPlay();
+            }}
+            onPointerDown={stopPlayEvent}
           >
             {isDone ? (
               <PlayDisabledIcon width={24} height={24} />
diff --git a/apps/timo-web/components/todo-modal/detail/DetailTodoTaskFields.tsx b/apps/timo-web/components/todo-modal/detail/DetailTodoTaskFields.tsx
index e4a5f676..4dec3ea2 100644
--- a/apps/timo-web/components/todo-modal/detail/DetailTodoTaskFields.tsx
+++ b/apps/timo-web/components/todo-modal/detail/DetailTodoTaskFields.tsx
@@ -7,7 +7,7 @@ import { Checkbox, PlayButton } from "@repo/timo-design-system/ui";
 
 import type { TodoDetailResponseTimerStatus } from "@/api/generated/models";
 import type { DetailTodoSubtaskInput } from "@/hooks/todo-modal/detail/use-detail-subtask-field";
-import type { KeyboardEvent } from "react";
+import type { KeyboardEvent, MouseEvent, PointerEvent } from "react";
 
 const resizeTextarea = (element: HTMLTextAreaElement | null) => {
   if (!element) return;
@@ -49,6 +49,19 @@ export const DetailTodoTaskFields = ({
   registerSubtaskInputRef,
   onSubtaskInputKeyDown,
 }: DetailTodoTaskFieldsProps) => {
+  const isRunning = timerStatus === "RUNNING";
+
+  const stopInteractiveEvent = (
+    event: MouseEvent<HTMLButtonElement> | PointerEvent<HTMLButtonElement>,
+  ) => {
+    event.stopPropagation();
+  };
+
+  const handlePlayClick = (event: MouseEvent<HTMLButtonElement>) => {
+    stopInteractiveEvent(event);
+    onTogglePlay();
+  };
+
   return (
     <div className="flex w-full flex-col">
       <div className="flex w-full items-center justify-between">
@@ -69,14 +82,15 @@ export const DetailTodoTaskFields = ({
 
         <div className="shrink-0">
           <PlayButton
-            variant={timerStatus === "RUNNING" ? "stop" : "play"}
+            variant={isRunning ? "stop" : "play"}
             size="lg"
             disabled={isCompleted}
-            onClick={onTogglePlay}
+            onClick={handlePlayClick}
+            onPointerDown={stopInteractiveEvent}
           >
             {isCompleted ? (
               <PlayDisabledIcon width={24} height={24} />
-            ) : timerStatus === "RUNNING" ? (
+            ) : isRunning ? (
               <StopIcon width={24} height={24} />
             ) : (
               <PlayIcon width={24} height={24} />

From 33380807b5193a2b2c9a057e39fc6add598bc74f Mon Sep 17 00:00:00 2001
From: yumin-kim4757 <rladbals0211@gmail.com>
Date: Wed, 15 Jul 2026 10:55:17 +0900
Subject: [PATCH 57/75] =?UTF-8?q?fix(web):=20=EC=83=81=EC=84=B8=20?=
 =?UTF-8?q?=ED=88=AC=EB=91=90=20=EC=A1=B0=ED=9A=8C/=EC=88=98=EC=A0=95/?=
 =?UTF-8?q?=EC=82=AD=EC=A0=9C=20=EC=8B=A4=ED=8C=A8=20=ED=86=A0=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8=20=EC=B2=98=EB=A6=AC=20=EC=B6=94=EA=B0=80=20(#202)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/DetailTodoModalContent.tsx         |  2 +
 .../detail/DetailTodoModalContainer.tsx       | 59 ++++++++++++++++---
 .../detail/use-delete-todo-submit.ts          |  5 +-
 3 files changed, 57 insertions(+), 9 deletions(-)

diff --git a/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx b/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
index ccbe04d5..3aa01248 100644
--- a/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
+++ b/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
@@ -82,6 +82,7 @@ export const DetailTodoModalContent = ({
     label: tCommon(`weekday.${weekdayId}`),
   }));
   const latestOnUpdateRef = useRef(onUpdate);
+
   const buildTextUpdateRequest = useCallback(
     (): TodoUpdateRequest =>
       buildDetailTodoTextUpdateRequest({
@@ -91,6 +92,7 @@ export const DetailTodoModalContent = ({
       }),
     [detailTodoForm.memo, detailTodoForm.subtaskInputs, detailTodoForm.title],
   );
+
   const latestBuildTextUpdateRequestRef = useRef(buildTextUpdateRequest);
   const didStartTextUpdateRef = useRef(false);
   const textUpdateSignature = useMemo(
diff --git a/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx b/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx
index d2506bd2..dd001d99 100644
--- a/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx
+++ b/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx
@@ -1,11 +1,15 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { overlay } from "overlay-kit";
+import { useCallback, useEffect, useState } from "react";
 
-import type { TodoUpdateRequest } from "@/api/generated/models";
+import type { ErrorType } from "@/api/client/custom-instance";
+import type { ErrorDto, TodoUpdateRequest } from "@/api/generated/models";
 import type { ReactNode } from "react";
 
 import { useGetTodoDetail } from "@/api/generated/endpoints/todo/todo";
+import { AnimatedToast } from "@/components/toast/AnimatedToast";
 import { DetailTodoModalContent } from "@/components/todo-modal/detail/DetailTodoModalContent";
 import { useDeleteTodoSubmit } from "@/hooks/todo-modal/detail/use-delete-todo-submit";
 import { useUpdateTodoSubmit } from "@/hooks/todo-modal/detail/use-update-todo-submit";
@@ -27,6 +31,7 @@ interface DetailTodoModalQueryProps extends Omit<
   isOpen: boolean;
   onClose: () => void;
   onExited: () => void;
+  onActionError: (error: ErrorType<ErrorDto>) => void;
 }
 
 const DetailTodoModalQuery = ({
@@ -38,14 +43,21 @@ const DetailTodoModalQuery = ({
   onTogglePlay,
   onToggleCompleted,
   onDelete,
+  onActionError,
 }: DetailTodoModalQueryProps) => {
-  const { data, isError } = useGetTodoDetail(todoId, { date });
+  const { data, error, isError } = useGetTodoDetail(todoId, { date });
   const { handleDelete } = useDeleteTodoSubmit();
   const { handleUpdate } = useUpdateTodoSubmit();
   const todo = data?.data;
 
   const { data: activeTimer } = useActiveTimer();
 
+  useEffect(() => {
+    if (isError && error) {
+      onActionError(error);
+    }
+  }, [error, isError, onActionError]);
+
   if (isError || !todo) return null;
 
   const timerStatus =
@@ -57,15 +69,21 @@ const DetailTodoModalQuery = ({
         onDelete();
         onClose();
       },
+      onError: onActionError,
     });
   };
 
   const updateTodo = (updateData: TodoUpdateRequest) => {
-    handleUpdate({
-      todoId,
-      date,
-      data: updateData,
-    });
+    handleUpdate(
+      {
+        todoId,
+        date,
+        data: updateData,
+      },
+      {
+        onError: onActionError,
+      },
+    );
   };
 
   return (
@@ -91,6 +109,20 @@ export const DetailTodoModalContainer = ({
   onDelete,
   children,
 }: DetailTodoModalContainerProps) => {
+  const tToast = useTranslations("Toast");
+  const [actionErrorMessage, setActionErrorMessage] = useState("");
+  const [isActionErrorToastOpen, setIsActionErrorToastOpen] = useState(false);
+
+  const showActionErrorToast = useCallback(
+    (error: ErrorType<ErrorDto>) => {
+      setActionErrorMessage(
+        error.response?.data.message ?? tToast("focusActionFailed"),
+      );
+      setIsActionErrorToastOpen(true);
+    },
+    [tToast],
+  );
+
   const openDetailTodoModal = () => {
     overlay.open(({ isOpen, close, unmount }) => (
       <DetailTodoModalQuery
@@ -102,9 +134,20 @@ export const DetailTodoModalContainer = ({
         onTogglePlay={onTogglePlay}
         onToggleCompleted={onToggleCompleted}
         onDelete={onDelete}
+        onActionError={showActionErrorToast}
       />
     ));
   };
 
-  return <>{children(openDetailTodoModal)}</>;
+  return (
+    <>
+      {children(openDetailTodoModal)}
+
+      <AnimatedToast
+        isOpen={isActionErrorToastOpen}
+        onClose={() => setIsActionErrorToastOpen(false)}
+        message={actionErrorMessage}
+      />
+    </>
+  );
 };
diff --git a/apps/timo-web/hooks/todo-modal/detail/use-delete-todo-submit.ts b/apps/timo-web/hooks/todo-modal/detail/use-delete-todo-submit.ts
index ac141940..0d2d0f64 100644
--- a/apps/timo-web/hooks/todo-modal/detail/use-delete-todo-submit.ts
+++ b/apps/timo-web/hooks/todo-modal/detail/use-delete-todo-submit.ts
@@ -2,12 +2,15 @@
 
 import { useQueryClient } from "@tanstack/react-query";
 
+import type { ErrorType } from "@/api/client/custom-instance";
+import type { ErrorDto } from "@/api/generated/models";
+
 import { getGetHomeQueryKey } from "@/api/generated/endpoints/home/home";
 import { useDeleteTodo } from "@/api/generated/endpoints/todo/todo";
 
 export interface DeleteTodoSubmitHandlers {
   onSuccess: () => void;
-  onError?: () => void;
+  onError?: (error: ErrorType<ErrorDto>) => void;
 }
 
 export const useDeleteTodoSubmit = () => {

From b7694bcc4c9b32c5ab417463c9ef58b66bcbed39 Mon Sep 17 00:00:00 2001
From: yumin-kim4757 <rladbals0211@gmail.com>
Date: Wed, 15 Jul 2026 11:08:33 +0900
Subject: [PATCH 58/75] =?UTF-8?q?refactor(web):=20=EC=83=81=EC=84=B8=20?=
 =?UTF-8?q?=ED=88=AC=EB=91=90=20=EB=AA=A8=EB=8B=AC=20=EC=88=98=EC=A0=95=20?=
 =?UTF-8?q?=EB=A1=9C=EC=A7=81=EC=9D=84=20=ED=9B=85=EC=9C=BC=EB=A1=9C=20?=
 =?UTF-8?q?=EB=B6=84=EB=A6=AC=20(#202)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/DetailTodoModalContent.tsx         | 240 +++---------------
 .../todo-modal/detail/use-detail-todo-form.ts |   2 +
 .../detail/use-detail-todo-icon-submit.ts     |  61 +++++
 .../detail/use-detail-todo-patch-handlers.ts  | 112 ++++++++
 .../detail/use-detail-todo-text-auto-save.ts  |  90 +++++++
 5 files changed, 303 insertions(+), 202 deletions(-)
 create mode 100644 apps/timo-web/hooks/todo-modal/detail/use-detail-todo-icon-submit.ts
 create mode 100644 apps/timo-web/hooks/todo-modal/detail/use-detail-todo-patch-handlers.ts
 create mode 100644 apps/timo-web/hooks/todo-modal/detail/use-detail-todo-text-auto-save.ts

diff --git a/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx b/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
index 3aa01248..244bfbe8 100644
--- a/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
+++ b/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
@@ -1,19 +1,12 @@
 import { DeleteIcon, TrashOnIcon } from "@repo/timo-design-system/icons";
 import { TodoToolbar } from "@repo/timo-design-system/ui";
 import { useTranslations } from "next-intl";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import type {
   TodoDetailResponse,
   TodoDetailResponseTimerStatus,
   TodoUpdateRequest,
 } from "@/api/generated/models";
-import type {
-  PriorityLevel,
-  RepeatFrequency,
-  TimeSelection,
-  TodoIconValue,
-} from "@repo/timo-design-system/ui";
 
 import { OverlayModal } from "@/components/modal/OverlayModal";
 import { TodoIconField } from "@/components/todo-modal/common/TodoIconField";
@@ -24,16 +17,12 @@ import {
   DETAIL_TODO_WEEKDAY_IDS,
   useDetailTodoForm,
 } from "@/hooks/todo-modal/detail/use-detail-todo-form";
-import { formatDateKey, formatShortDateLabel } from "@/utils/date/date";
-import {
-  buildDetailTodoSubtasksUpdateRequest,
-  buildDetailTodoTextUpdateRequest,
-  isTodoUpdateRepeatWeekday,
-} from "@/utils/todo/detail-todo-update-request";
-import { convertTimeTextToDurationSeconds } from "@/utils/todo/todo-time";
+import { useDetailTodoIconSubmit } from "@/hooks/todo-modal/detail/use-detail-todo-icon-submit";
+import { useDetailTodoPatchHandlers } from "@/hooks/todo-modal/detail/use-detail-todo-patch-handlers";
+import { useDetailTodoTextAutoSave } from "@/hooks/todo-modal/detail/use-detail-todo-text-auto-save";
+import { formatShortDateLabel } from "@/utils/date/date";
 
 const DETAIL_TODO_MEMO_MAX_LENGTH = 300;
-const TEXT_UPDATE_DEBOUNCE_MS = 2000;
 type DetailTodoWeekdayId = (typeof DETAIL_TODO_WEEKDAY_IDS)[number];
 
 const isDetailTodoWeekdayId = (
@@ -68,11 +57,6 @@ export const DetailTodoModalContent = ({
   const tCreateModal = useTranslations("Home.createModal");
   const tCommon = useTranslations("Common");
   const detailTodoForm = useDetailTodoForm({ todo });
-  const [selectedTime, setSelectedTime] = useState<TimeSelection>();
-  const [isIconPanelOpen, setIsIconPanelOpen] = useState(false);
-  const [pendingIcon, setPendingIcon] = useState<TodoIconValue | null>(
-    detailTodoForm.icon,
-  );
   const dateNumber = detailTodoForm.date.getDate();
   const dayOfWeek = isDetailTodoWeekdayId(todo.dayOfWeek)
     ? todo.dayOfWeek
@@ -81,178 +65,28 @@ export const DetailTodoModalContent = ({
     id: weekdayId,
     label: tCommon(`weekday.${weekdayId}`),
   }));
-  const latestOnUpdateRef = useRef(onUpdate);
-
-  const buildTextUpdateRequest = useCallback(
-    (): TodoUpdateRequest =>
-      buildDetailTodoTextUpdateRequest({
-        title: detailTodoForm.title,
-        memo: detailTodoForm.memo,
-        subtasks: detailTodoForm.subtaskInputs,
-      }),
-    [detailTodoForm.memo, detailTodoForm.subtaskInputs, detailTodoForm.title],
-  );
-
-  const latestBuildTextUpdateRequestRef = useRef(buildTextUpdateRequest);
-  const didStartTextUpdateRef = useRef(false);
-  const textUpdateSignature = useMemo(
-    () =>
-      JSON.stringify({
-        title: detailTodoForm.title,
-        memo: detailTodoForm.memo,
-        subtasks: detailTodoForm.subtaskInputs.map((subtask) => ({
-          id: subtask.id,
-          subtaskId: subtask.subtaskId,
-          value: subtask.value,
-        })),
-      }),
-    [detailTodoForm.memo, detailTodoForm.subtaskInputs, detailTodoForm.title],
-  );
-  const lastSubmittedTextUpdateSignatureRef = useRef(textUpdateSignature);
-
-  const submitTextUpdate = useCallback(() => {
-    if (!detailTodoForm.title.trim()) return;
-    if (lastSubmittedTextUpdateSignatureRef.current === textUpdateSignature) {
-      return;
-    }
-
-    latestOnUpdateRef.current(latestBuildTextUpdateRequestRef.current());
-    lastSubmittedTextUpdateSignatureRef.current = textUpdateSignature;
-  }, [detailTodoForm.title, textUpdateSignature]);
-
-  useEffect(() => {
-    latestOnUpdateRef.current = onUpdate;
-  }, [onUpdate]);
-
-  useEffect(() => {
-    latestBuildTextUpdateRequestRef.current = buildTextUpdateRequest;
-  }, [buildTextUpdateRequest]);
-
-  useEffect(() => {
-    if (!isOpen) return;
-
-    if (!didStartTextUpdateRef.current) {
-      didStartTextUpdateRef.current = true;
-      return;
-    }
-
-    const updateTimer = window.setTimeout(
-      submitTextUpdate,
-      TEXT_UPDATE_DEBOUNCE_MS,
-    );
-
-    return () => window.clearTimeout(updateTimer);
-  }, [isOpen, submitTextUpdate]);
+  const patchHandlers = useDetailTodoPatchHandlers({
+    form: detailTodoForm,
+    onUpdate,
+  });
+  const iconField = useDetailTodoIconSubmit({
+    icon: detailTodoForm.icon,
+    selectIcon: detailTodoForm.selectIcon,
+    onUpdate: patchHandlers.updateTodo,
+  });
+  const { submitTextUpdate } = useDetailTodoTextAutoSave({
+    isOpen,
+    title: detailTodoForm.title,
+    memo: detailTodoForm.memo,
+    subtasks: detailTodoForm.subtaskInputs,
+    onUpdate: patchHandlers.updateTodo,
+  });
 
   const handleClose = () => {
     submitTextUpdate();
     onClose();
   };
 
-  const updateTodo = (updateData: TodoUpdateRequest) => {
-    if ("title" in updateData && !updateData.title?.trim()) return;
-    onUpdate(updateData);
-  };
-
-  const handleSelectIcon = (nextIcon: TodoIconValue) => {
-    setPendingIcon(nextIcon);
-  };
-
-  const handleOpenIconPanel = () => {
-    setPendingIcon(detailTodoForm.icon);
-    setIsIconPanelOpen(true);
-  };
-
-  const handleSubmitIcon = () => {
-    if (!pendingIcon || pendingIcon === detailTodoForm.icon) {
-      setIsIconPanelOpen(false);
-      return;
-    }
-
-    detailTodoForm.selectIcon(pendingIcon);
-    updateTodo({ icon: pendingIcon });
-    setIsIconPanelOpen(false);
-  };
-
-  const handleToggleIconPanel = () => {
-    if (isIconPanelOpen) {
-      handleSubmitIcon();
-      return;
-    }
-
-    setPendingIcon(detailTodoForm.icon);
-    setIsIconPanelOpen(true);
-  };
-
-  const handleRemoveIcon = () => {
-    setPendingIcon(null);
-  };
-
-  const handleSelectTime = (nextTime: TimeSelection) => {
-    setSelectedTime(nextTime);
-    const time = detailTodoForm.selectTime(nextTime);
-
-    const durationSeconds = time
-      ? convertTimeTextToDurationSeconds(time)
-      : undefined;
-
-    if (durationSeconds) updateTodo({ durationSeconds });
-  };
-
-  const handleDateChange = (nextDate: Date) => {
-    detailTodoForm.setDate(nextDate);
-    updateTodo({ date: formatDateKey(nextDate) });
-  };
-
-  const handleTimeChange = (time: string) => {
-    detailTodoForm.setTime(time);
-    const durationSeconds = convertTimeTextToDurationSeconds(time);
-
-    if (durationSeconds) updateTodo({ durationSeconds });
-  };
-
-  const handleSelectPriority = (priority: PriorityLevel) => {
-    detailTodoForm.setPriority(priority);
-    updateTodo({ priority });
-  };
-
-  const handleSelectTag = (label: string) => {
-    const tagId = detailTodoForm.handleSelectTag(label);
-
-    if (tagId !== null) updateTodo({ tagId });
-  };
-
-  const handleRepeatFrequencyChange = (repeatFrequency: RepeatFrequency) => {
-    detailTodoForm.changeRepeatFrequency(repeatFrequency);
-    updateTodo({ repeatType: repeatFrequency });
-  };
-
-  const handleWeekdayToggle = (weekdayId: string) => {
-    const selectedWeekdayIds = detailTodoForm.toggleWeekday(weekdayId);
-    updateTodo({
-      repeatType: "WEEKLY",
-      repeatWeekdays: selectedWeekdayIds.filter(isTodoUpdateRepeatWeekday),
-    });
-  };
-
-  const handleRepeatDayChange = (repeatDay: string) => {
-    detailTodoForm.setRepeatDay(repeatDay);
-    const repeatDayOfMonth = Number(repeatDay);
-
-    if (
-      Number.isInteger(repeatDayOfMonth) &&
-      repeatDayOfMonth >= 1 &&
-      repeatDayOfMonth <= 31
-    ) {
-      updateTodo({ repeatType: "MONTHLY", repeatDayOfMonth });
-    }
-  };
-
-  const handleSubtaskCompletedChange = (id: number, completed: boolean) => {
-    const subtasks = detailTodoForm.changeSubtaskCompleted(id, completed);
-    updateTodo({ subtasks: buildDetailTodoSubtasksUpdateRequest(subtasks) });
-  };
-
   return (
     <OverlayModal
       isOpen={isOpen}
@@ -282,13 +116,13 @@ export const DetailTodoModalContent = ({
 
           <div>
             <TodoIconField
-              icon={isIconPanelOpen ? pendingIcon : detailTodoForm.icon}
-              isIconPanelOpen={isIconPanelOpen}
+              icon={iconField.icon}
+              isIconPanelOpen={iconField.isIconPanelOpen}
               addIconLabel={tCreateModal("addIcon")}
-              onOpenPanel={handleOpenIconPanel}
-              onTogglePanel={handleToggleIconPanel}
-              onSelectIcon={handleSelectIcon}
-              onRemoveIcon={handleRemoveIcon}
+              onOpenPanel={iconField.handleOpenIconPanel}
+              onTogglePanel={iconField.handleToggleIconPanel}
+              onSelectIcon={iconField.handleSelectIcon}
+              onRemoveIcon={iconField.handleRemoveIcon}
             />
           </div>
         </div>
@@ -305,7 +139,9 @@ export const DetailTodoModalContent = ({
               onToggleCompleted={onToggleCompleted}
               onTogglePlay={onTogglePlay}
               onSubtaskInputChange={detailTodoForm.changeSubtaskInput}
-              onToggleSubtaskCompleted={handleSubtaskCompletedChange}
+              onToggleSubtaskCompleted={
+                patchHandlers.handleSubtaskCompletedChange
+              }
               registerSubtaskInputRef={detailTodoForm.registerSubtaskInputRef}
               onSubtaskInputKeyDown={detailTodoForm.handleSubtaskInputKeyDown}
             />
@@ -316,13 +152,13 @@ export const DetailTodoModalContent = ({
               <TodoToolbar
                 dateLabel={formatShortDateLabel(detailTodoForm.date)}
                 date={detailTodoForm.date}
-                onDateChange={handleDateChange}
+                onDateChange={patchHandlers.handleDateChange}
                 timeLabel={detailTodoForm.time}
                 timeOptions={DETAIL_TODO_TIME_OPTIONS}
                 time={detailTodoForm.time}
-                onTimeChange={handleTimeChange}
-                selectedTime={selectedTime}
-                onSelectTime={handleSelectTime}
+                onTimeChange={patchHandlers.handleTimeChange}
+                selectedTime={patchHandlers.selectedTime}
+                onSelectTime={patchHandlers.handleSelectTime}
                 priority={detailTodoForm.priority}
                 priorityLabels={{
                   VERY_HIGH: tCommon("priority.urgent"),
@@ -330,14 +166,14 @@ export const DetailTodoModalContent = ({
                   MEDIUM: tCommon("priority.medium"),
                   LOW: tCommon("priority.low"),
                 }}
-                onSelectPriority={handleSelectPriority}
+                onSelectPriority={patchHandlers.handleSelectPriority}
                 tagLabel={
                   detailTodoForm.selectedTagLabel ?? tCreateModal("tagLabel")
                 }
                 tags={detailTodoForm.tagLabels}
                 selectedTag={detailTodoForm.selectedTagLabel}
                 addTagLabel={tCreateModal("addTag")}
-                onSelectTag={handleSelectTag}
+                onSelectTag={patchHandlers.handleSelectTag}
                 onAddTagClick={() => {}}
                 hasMemo={Boolean(todo.memo?.trim())}
                 isRepeatActive={detailTodoForm.isRepeatActive}
@@ -356,16 +192,16 @@ export const DetailTodoModalContent = ({
                     },
                   ],
                   frequency: detailTodoForm.repeatFrequency,
-                  onFrequencyChange: handleRepeatFrequencyChange,
+                  onFrequencyChange: patchHandlers.handleRepeatFrequencyChange,
                   weekly: {
                     weekdays,
                     selectedWeekdayIds: detailTodoForm.selectedWeekdayIds,
-                    onWeekdayToggle: handleWeekdayToggle,
+                    onWeekdayToggle: patchHandlers.handleWeekdayToggle,
                   },
                   monthly: {
                     repeatDayLabel: t("repeatDayLabel"),
                     repeatDay: detailTodoForm.repeatDay,
-                    onRepeatDayChange: handleRepeatDayChange,
+                    onRepeatDayChange: patchHandlers.handleRepeatDayChange,
                   },
                 }}
               />
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 55bdaa22..cb35f8db 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
@@ -222,3 +222,5 @@ export const useDetailTodoForm = ({ todo }: UseDetailTodoFormParams) => {
     dirtyFields: formState.dirtyFields,
   };
 };
+
+export type UseDetailTodoFormReturn = ReturnType<typeof useDetailTodoForm>;
diff --git a/apps/timo-web/hooks/todo-modal/detail/use-detail-todo-icon-submit.ts b/apps/timo-web/hooks/todo-modal/detail/use-detail-todo-icon-submit.ts
new file mode 100644
index 00000000..79ce181a
--- /dev/null
+++ b/apps/timo-web/hooks/todo-modal/detail/use-detail-todo-icon-submit.ts
@@ -0,0 +1,61 @@
+import { useState } from "react";
+
+import type { TodoUpdateRequest } from "@/api/generated/models";
+import type { TodoIconValue } from "@repo/timo-design-system/ui";
+
+export interface UseDetailTodoIconSubmitParams {
+  icon: TodoIconValue | null;
+  selectIcon: (icon: TodoIconValue) => void;
+  onUpdate: (data: TodoUpdateRequest) => void;
+}
+
+export const useDetailTodoIconSubmit = ({
+  icon,
+  selectIcon,
+  onUpdate,
+}: UseDetailTodoIconSubmitParams) => {
+  const [isIconPanelOpen, setIsIconPanelOpen] = useState(false);
+  const [pendingIcon, setPendingIcon] = useState<TodoIconValue | null>(icon);
+
+  const handleSelectIcon = (nextIcon: TodoIconValue) => {
+    setPendingIcon(nextIcon);
+  };
+
+  const handleOpenIconPanel = () => {
+    setPendingIcon(icon);
+    setIsIconPanelOpen(true);
+  };
+
+  const handleSubmitIcon = () => {
+    if (!pendingIcon || pendingIcon === icon) {
+      setIsIconPanelOpen(false);
+      return;
+    }
+
+    selectIcon(pendingIcon);
+    onUpdate({ icon: pendingIcon });
+    setIsIconPanelOpen(false);
+  };
+
+  const handleToggleIconPanel = () => {
+    if (isIconPanelOpen) {
+      handleSubmitIcon();
+      return;
+    }
+
+    handleOpenIconPanel();
+  };
+
+  const handleRemoveIcon = () => {
+    setPendingIcon(null);
+  };
+
+  return {
+    icon: isIconPanelOpen ? pendingIcon : icon,
+    isIconPanelOpen,
+    handleOpenIconPanel,
+    handleToggleIconPanel,
+    handleSelectIcon,
+    handleRemoveIcon,
+  };
+};
diff --git a/apps/timo-web/hooks/todo-modal/detail/use-detail-todo-patch-handlers.ts b/apps/timo-web/hooks/todo-modal/detail/use-detail-todo-patch-handlers.ts
new file mode 100644
index 00000000..e7669f36
--- /dev/null
+++ b/apps/timo-web/hooks/todo-modal/detail/use-detail-todo-patch-handlers.ts
@@ -0,0 +1,112 @@
+import { useState } from "react";
+
+import type { TodoUpdateRequest } from "@/api/generated/models";
+import type { UseDetailTodoFormReturn } from "@/hooks/todo-modal/detail/use-detail-todo-form";
+import type {
+  PriorityLevel,
+  RepeatFrequency,
+  TimeSelection,
+} from "@repo/timo-design-system/ui";
+
+import { formatDateKey } from "@/utils/date/date";
+import {
+  buildDetailTodoSubtasksUpdateRequest,
+  isTodoUpdateRepeatWeekday,
+} from "@/utils/todo/detail-todo-update-request";
+import { convertTimeTextToDurationSeconds } from "@/utils/todo/todo-time";
+
+export interface UseDetailTodoPatchHandlersParams {
+  form: UseDetailTodoFormReturn;
+  onUpdate: (data: TodoUpdateRequest) => void;
+}
+
+export const useDetailTodoPatchHandlers = ({
+  form,
+  onUpdate,
+}: UseDetailTodoPatchHandlersParams) => {
+  const [selectedTime, setSelectedTime] = useState<TimeSelection>();
+
+  const updateTodo = (updateData: TodoUpdateRequest) => {
+    if ("title" in updateData && !updateData.title?.trim()) return;
+    onUpdate(updateData);
+  };
+
+  const handleSelectTime = (nextTime: TimeSelection) => {
+    setSelectedTime(nextTime);
+    const time = form.selectTime(nextTime);
+
+    const durationSeconds = time
+      ? convertTimeTextToDurationSeconds(time)
+      : undefined;
+
+    if (durationSeconds) updateTodo({ durationSeconds });
+  };
+
+  const handleDateChange = (nextDate: Date) => {
+    form.setDate(nextDate);
+    updateTodo({ date: formatDateKey(nextDate) });
+  };
+
+  const handleTimeChange = (time: string) => {
+    form.setTime(time);
+    const durationSeconds = convertTimeTextToDurationSeconds(time);
+
+    if (durationSeconds) updateTodo({ durationSeconds });
+  };
+
+  const handleSelectPriority = (priority: PriorityLevel) => {
+    form.setPriority(priority);
+    updateTodo({ priority });
+  };
+
+  const handleSelectTag = (label: string) => {
+    const tagId = form.handleSelectTag(label);
+
+    if (tagId !== null) updateTodo({ tagId });
+  };
+
+  const handleRepeatFrequencyChange = (repeatFrequency: RepeatFrequency) => {
+    form.changeRepeatFrequency(repeatFrequency);
+    updateTodo({ repeatType: repeatFrequency });
+  };
+
+  const handleWeekdayToggle = (weekdayId: string) => {
+    const selectedWeekdayIds = form.toggleWeekday(weekdayId);
+    updateTodo({
+      repeatType: "WEEKLY",
+      repeatWeekdays: selectedWeekdayIds.filter(isTodoUpdateRepeatWeekday),
+    });
+  };
+
+  const handleRepeatDayChange = (repeatDay: string) => {
+    form.setRepeatDay(repeatDay);
+    const repeatDayOfMonth = Number(repeatDay);
+
+    if (
+      Number.isInteger(repeatDayOfMonth) &&
+      repeatDayOfMonth >= 1 &&
+      repeatDayOfMonth <= 31
+    ) {
+      updateTodo({ repeatType: "MONTHLY", repeatDayOfMonth });
+    }
+  };
+
+  const handleSubtaskCompletedChange = (id: number, completed: boolean) => {
+    const subtasks = form.changeSubtaskCompleted(id, completed);
+    updateTodo({ subtasks: buildDetailTodoSubtasksUpdateRequest(subtasks) });
+  };
+
+  return {
+    selectedTime,
+    updateTodo,
+    handleSelectTime,
+    handleDateChange,
+    handleTimeChange,
+    handleSelectPriority,
+    handleSelectTag,
+    handleRepeatFrequencyChange,
+    handleWeekdayToggle,
+    handleRepeatDayChange,
+    handleSubtaskCompletedChange,
+  };
+};
diff --git a/apps/timo-web/hooks/todo-modal/detail/use-detail-todo-text-auto-save.ts b/apps/timo-web/hooks/todo-modal/detail/use-detail-todo-text-auto-save.ts
new file mode 100644
index 00000000..d03940da
--- /dev/null
+++ b/apps/timo-web/hooks/todo-modal/detail/use-detail-todo-text-auto-save.ts
@@ -0,0 +1,90 @@
+import { useCallback, useEffect, useMemo, useRef } from "react";
+
+import type { TodoUpdateRequest } from "@/api/generated/models";
+import type { DetailTodoSubtaskInput } from "@/hooks/todo-modal/detail/use-detail-subtask-field";
+
+import { buildDetailTodoTextUpdateRequest } from "@/utils/todo/detail-todo-update-request";
+
+const TEXT_UPDATE_DEBOUNCE_MS = 2000;
+
+export interface UseDetailTodoTextAutoSaveParams {
+  isOpen: boolean;
+  title: string;
+  memo: string;
+  subtasks: DetailTodoSubtaskInput[];
+  onUpdate: (data: TodoUpdateRequest) => void;
+}
+
+export const useDetailTodoTextAutoSave = ({
+  isOpen,
+  title,
+  memo,
+  subtasks,
+  onUpdate,
+}: UseDetailTodoTextAutoSaveParams) => {
+  const latestOnUpdateRef = useRef(onUpdate);
+  const didStartTextUpdateRef = useRef(false);
+  const textUpdateSignature = useMemo(
+    () =>
+      JSON.stringify({
+        title,
+        memo,
+        subtasks: subtasks.map((subtask) => ({
+          id: subtask.id,
+          subtaskId: subtask.subtaskId,
+          value: subtask.value,
+        })),
+      }),
+    [memo, subtasks, title],
+  );
+  const lastSubmittedTextUpdateSignatureRef = useRef(textUpdateSignature);
+
+  const buildTextUpdateRequest = useCallback(
+    (): TodoUpdateRequest =>
+      buildDetailTodoTextUpdateRequest({
+        title,
+        memo,
+        subtasks,
+      }),
+    [memo, subtasks, title],
+  );
+  const latestBuildTextUpdateRequestRef = useRef(buildTextUpdateRequest);
+
+  const submitTextUpdate = useCallback(() => {
+    if (!title.trim()) return;
+    if (lastSubmittedTextUpdateSignatureRef.current === textUpdateSignature) {
+      return;
+    }
+
+    latestOnUpdateRef.current(latestBuildTextUpdateRequestRef.current());
+    lastSubmittedTextUpdateSignatureRef.current = textUpdateSignature;
+  }, [textUpdateSignature, title]);
+
+  useEffect(() => {
+    latestOnUpdateRef.current = onUpdate;
+  }, [onUpdate]);
+
+  useEffect(() => {
+    latestBuildTextUpdateRequestRef.current = buildTextUpdateRequest;
+  }, [buildTextUpdateRequest]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    if (!didStartTextUpdateRef.current) {
+      didStartTextUpdateRef.current = true;
+      return;
+    }
+
+    const updateTimer = window.setTimeout(
+      submitTextUpdate,
+      TEXT_UPDATE_DEBOUNCE_MS,
+    );
+
+    return () => window.clearTimeout(updateTimer);
+  }, [isOpen, submitTextUpdate]);
+
+  return {
+    submitTextUpdate,
+  };
+};

From 2585b13dff3307499d077490f46c3f322ed23b73 Mon Sep 17 00:00:00 2001
From: Lee Hye Won <thankyou@sookmyung.ac.kr>
Date: Wed, 15 Jul 2026 11:47:06 +0900
Subject: [PATCH 59/75] =?UTF-8?q?fix(web):=20=EC=83=81=EC=84=B8=20?=
 =?UTF-8?q?=ED=88=AC=EB=91=90=20=EC=88=98=EC=A0=95=20=EC=8B=9C=20Today=20?=
 =?UTF-8?q?=EC=BF=BC=EB=A6=AC=EB=A5=BC=20invalidate=ED=95=9C=EB=8B=A4=20(#?=
 =?UTF-8?q?211)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

use-update-todo-submit의 onSuccess에서 getGetTodayQueryKey invalidation이
누락되어 Today 화면의 TodayTodoCard가 갱신되지 않는 버그를 수정했습니다.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../hooks/todo-modal/detail/use-update-todo-submit.ts       | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/timo-web/hooks/todo-modal/detail/use-update-todo-submit.ts b/apps/timo-web/hooks/todo-modal/detail/use-update-todo-submit.ts
index ae7b1f4a..b145e719 100644
--- a/apps/timo-web/hooks/todo-modal/detail/use-update-todo-submit.ts
+++ b/apps/timo-web/hooks/todo-modal/detail/use-update-todo-submit.ts
@@ -5,7 +5,10 @@ import { useQueryClient } from "@tanstack/react-query";
 import type { ErrorType } from "@/api/client/custom-instance";
 import type { ErrorDto, TodoUpdateRequest } from "@/api/generated/models";
 
-import { getGetHomeQueryKey } from "@/api/generated/endpoints/home/home";
+import {
+  getGetHomeQueryKey,
+  getGetTodayQueryKey,
+} from "@/api/generated/endpoints/home/home";
 import {
   getGetTodoDetailQueryKey,
   useUpdateTodo,
@@ -35,6 +38,7 @@ export const useUpdateTodoSubmit = () => {
       {
         onSuccess: () => {
           queryClient.invalidateQueries({ queryKey: getGetHomeQueryKey() });
+          queryClient.invalidateQueries({ queryKey: getGetTodayQueryKey() });
           queryClient.invalidateQueries({
             queryKey: getGetTodoDetailQueryKey(todoId, { date }),
           });

From add69b6cf3cf9bfc3e038a67459f58ef8931d878 Mon Sep 17 00:00:00 2001
From: Lee Hye Won <thankyou@sookmyung.ac.kr>
Date: Wed, 15 Jul 2026 11:52:21 +0900
Subject: [PATCH 60/75] =?UTF-8?q?fix(web):=20=EC=83=81=EC=84=B8=20?=
 =?UTF-8?q?=ED=88=AC=EB=91=90=20=EC=82=AD=EC=A0=9C=20=EC=8B=9C=20Today=20?=
 =?UTF-8?q?=EC=BF=BC=EB=A6=AC=EB=A5=BC=20invalidate=ED=95=9C=EB=8B=A4=20(#?=
 =?UTF-8?q?211)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

use-delete-todo-submit의 onSuccess에서 getGetTodayQueryKey invalidation이
누락되어 서버 동기화 없이 로컬 state만 제거되던 문제를 수정했습니다.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../hooks/todo-modal/detail/use-delete-todo-submit.ts       | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/timo-web/hooks/todo-modal/detail/use-delete-todo-submit.ts b/apps/timo-web/hooks/todo-modal/detail/use-delete-todo-submit.ts
index ac141940..626a7a6a 100644
--- a/apps/timo-web/hooks/todo-modal/detail/use-delete-todo-submit.ts
+++ b/apps/timo-web/hooks/todo-modal/detail/use-delete-todo-submit.ts
@@ -2,7 +2,10 @@
 
 import { useQueryClient } from "@tanstack/react-query";
 
-import { getGetHomeQueryKey } from "@/api/generated/endpoints/home/home";
+import {
+  getGetHomeQueryKey,
+  getGetTodayQueryKey,
+} from "@/api/generated/endpoints/home/home";
 import { useDeleteTodo } from "@/api/generated/endpoints/todo/todo";
 
 export interface DeleteTodoSubmitHandlers {
@@ -23,6 +26,7 @@ export const useDeleteTodoSubmit = () => {
       {
         onSuccess: () => {
           queryClient.invalidateQueries({ queryKey: getGetHomeQueryKey() });
+          queryClient.invalidateQueries({ queryKey: getGetTodayQueryKey() });
           onSuccess();
         },
         onError,

From 658b5f949e82e010debb042fdeb2acf5a7341e1e Mon Sep 17 00:00:00 2001
From: Lee Hye Won <thankyou@sookmyung.ac.kr>
Date: Wed, 15 Jul 2026 12:11:18 +0900
Subject: [PATCH 61/75] =?UTF-8?q?fix(web):=20Today=20=EC=84=9C=EB=B8=8C?=
 =?UTF-8?q?=ED=83=9C=EC=8A=A4=ED=81=AC=20=EC=99=84=EB=A3=8C=20=EC=8B=9C=20?=
 =?UTF-8?q?API=EB=A5=BC=20=ED=98=B8=EC=B6=9C=ED=95=9C=EB=8B=A4=20(#211)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

handleSubTodoCheck가 로컬 state만 변경하고 서버에 반영하지 않아
새로고침 시 체크 상태가 초기화되는 문제를 수정했습니다.
Home과 동일하게 optimistic update 후 실패 시 롤백하는 구조로 변경했습니다.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../today/_hooks/useTodayTodoList.ts          | 39 ++++++++++++++-----
 1 file changed, 30 insertions(+), 9 deletions(-)

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 e0788a80..835b1fd2 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
@@ -15,6 +15,7 @@ import {
 } from "@/api/generated/endpoints/timer/timer";
 import {
   getGetTodoDetailQueryKey,
+  useChangeSubtaskStatus,
   useChangeTodoStatus,
 } from "@/api/generated/endpoints/todo/todo";
 import { useActiveTimer } from "@/hooks/use-active-timer";
@@ -42,6 +43,7 @@ export const useTodayTodoList = (
   const queryClient = useQueryClient();
   const { data: activeTimer } = useActiveTimer();
   const { mutate: changeTodoStatus } = useChangeTodoStatus();
+  const { mutate: changeSubtaskStatus } = useChangeSubtaskStatus();
   const { mutate: stopTimer } = useStopTimer();
   const { invalidateTimerState, invalidateTimeBoxes } =
     useTimerQueryInvalidation();
@@ -177,21 +179,40 @@ export const useTodayTodoList = (
   };
 
   const handleSubTodoCheck = (todoId: number, subtaskId: number) => {
-    // TODO: API
+    const todo = todos.find((t) => t.todoId === todoId);
+    const subtask = todo?.subtasks.find((s) => s.subtaskId === subtaskId);
+    if (!subtask) return;
+
+    const completed = !subtask.completed;
+    const dateKey = todo?.date;
+    if (!dateKey) return;
+
+    const previous = todos;
     setTodos((prev) =>
-      prev.map((todo) =>
-        todo.todoId === todoId
+      prev.map((t) =>
+        t.todoId === todoId
           ? {
-              ...todo,
-              subtasks: todo.subtasks.map((s) =>
-                s.subtaskId === subtaskId
-                  ? { ...s, completed: !s.completed }
-                  : s,
+              ...t,
+              subtasks: t.subtasks.map((s) =>
+                s.subtaskId === subtaskId ? { ...s, completed } : s,
               ),
             }
-          : todo,
+          : t,
       ),
     );
+
+    changeSubtaskStatus(
+      { todoId, subtaskId, data: { isCompleted: completed } },
+      {
+        onSuccess: () => {
+          invalidateTodayView();
+          invalidateTodoDetail(todoId, dateKey);
+        },
+        onError: () => {
+          setTodos(previous);
+        },
+      },
+    );
   };
 
   return {

From 50e98166224a710257d83c06e6639dd3fa587d6b Mon Sep 17 00:00:00 2001
From: Lee Hye Won <thankyou@sookmyung.ac.kr>
Date: Wed, 15 Jul 2026 12:11:59 +0900
Subject: [PATCH 62/75] =?UTF-8?q?fix(web):=20Today=20=EC=B9=B4=EB=93=9C=20?=
 =?UTF-8?q?=EC=99=84=EB=A3=8C=20=EB=B0=8F=20=EC=84=9C=EB=B8=8C=ED=83=9C?=
 =?UTF-8?q?=EC=8A=A4=ED=81=AC=20=EC=99=84=EB=A3=8C=20=EC=8B=9C=20=EC=A6=89?=
 =?UTF-8?q?=EC=8B=9C=20dimmed=20=EC=B2=98=EB=A6=AC=ED=95=9C=EB=8B=A4=20(#2?=
 =?UTF-8?q?11)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

체크박스 클릭 시 마우스가 카드 위에 있어 isHovered가 true인 상태라
isCompleted가 true여도 isDimmed가 false로 계산되는 문제를 수정했습니다.
isCompleted가 true로 바뀌면 isHovered를 즉시 초기화합니다.
서브태스크는 isDone 상태에 따라 텍스트 색상을 즉시 변경합니다.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../today/_containers/TodayTodoCardContainer.tsx          | 6 +++++-
 .../[locale]/(main)/today/_components/TodayTodoCard.tsx   | 8 +++++++-
 2 files changed, 12 insertions(+), 2 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 e222ec28..b327112f 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
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import type { TodoTimerStatusTypes } from "@/api/common/todo-schema";
 import type { ReactNode } from "react";
@@ -38,6 +38,10 @@ export const TodayTodoCardContainer = ({
 }: TodayTodoCardContainerProps) => {
   const [isHovered, setIsHovered] = useState(false);
 
+  useEffect(() => {
+    if (isCompleted) setIsHovered(false);
+  }, [isCompleted]);
+
   const isPlaying = timerStatus === "RUNNING";
   const isDimmed = isCompleted && !isHovered;
 
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 6003adc2..5bd06eb9 100644
--- a/apps/timo-web/app/[locale]/(main)/today/_components/TodayTodoCard.tsx
+++ b/apps/timo-web/app/[locale]/(main)/today/_components/TodayTodoCard.tsx
@@ -142,6 +142,7 @@ export const TodayTodoCard = ({
             <li key={sub.id} className="flex items-center gap-2">
               <div
                 role="none"
+                className="inline-flex items-center"
                 onClick={stopPropagation}
                 onKeyDown={stopPropagation}
               >
@@ -150,7 +151,12 @@ export const TodayTodoCard = ({
                   onChange={() => onSubTodoCheck(sub.id)}
                 />
               </div>
-              <span className={cn("typo-body-r-12", style.subText)}>
+              <span
+                className={cn(
+                  "typo-body-r-12",
+                  sub.isDone ? "text-timo-gray-500" : style.subText,
+                )}
+              >
                 {sub.text}
               </span>
             </li>

From 541d6b941c9999068728d415a338dc2fc485801d Mon Sep 17 00:00:00 2001
From: yumin-kim4757 <rladbals0211@gmail.com>
Date: Wed, 15 Jul 2026 12:26:00 +0900
Subject: [PATCH 63/75] =?UTF-8?q?fix(web):=20=EC=83=81=EC=84=B8=20?=
 =?UTF-8?q?=ED=88=AC=EB=91=90=20=EC=8B=9C=EA=B0=84=20=ED=91=9C=EC=8B=9C?=
 =?UTF-8?q?=EC=99=80=20=EC=A0=84=EC=86=A1=20=ED=98=95=EC=8B=9D=20=EB=B6=84?=
 =?UTF-8?q?=EB=A6=AC=20(#202)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/DetailTodoModalContent.tsx         |  6 ++++--
 .../todo-modal/detail/use-detail-todo-form.ts |  7 ++-----
 .../detail/use-detail-todo-patch-handlers.ts  | 14 +++++++------
 apps/timo-web/utils/todo/todo-time.ts         | 20 +++++++++++++++++++
 4 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx b/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
index 244bfbe8..fc603577 100644
--- a/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
+++ b/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
@@ -21,6 +21,7 @@ import { useDetailTodoIconSubmit } from "@/hooks/todo-modal/detail/use-detail-to
 import { useDetailTodoPatchHandlers } from "@/hooks/todo-modal/detail/use-detail-todo-patch-handlers";
 import { useDetailTodoTextAutoSave } from "@/hooks/todo-modal/detail/use-detail-todo-text-auto-save";
 import { formatShortDateLabel } from "@/utils/date/date";
+import { convertApiDurationToClockTimeText } from "@/utils/todo/todo-time";
 
 const DETAIL_TODO_MEMO_MAX_LENGTH = 300;
 type DetailTodoWeekdayId = (typeof DETAIL_TODO_WEEKDAY_IDS)[number];
@@ -65,6 +66,7 @@ export const DetailTodoModalContent = ({
     id: weekdayId,
     label: tCommon(`weekday.${weekdayId}`),
   }));
+  const displayTime = convertApiDurationToClockTimeText(detailTodoForm.time);
   const patchHandlers = useDetailTodoPatchHandlers({
     form: detailTodoForm,
     onUpdate,
@@ -153,9 +155,9 @@ export const DetailTodoModalContent = ({
                 dateLabel={formatShortDateLabel(detailTodoForm.date)}
                 date={detailTodoForm.date}
                 onDateChange={patchHandlers.handleDateChange}
-                timeLabel={detailTodoForm.time}
+                timeLabel={displayTime}
                 timeOptions={DETAIL_TODO_TIME_OPTIONS}
-                time={detailTodoForm.time}
+                time={displayTime}
                 onTimeChange={patchHandlers.handleTimeChange}
                 selectedTime={patchHandlers.selectedTime}
                 onSelectTime={patchHandlers.handleSelectTime}
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 cb35f8db..4a04c642 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
@@ -18,10 +18,7 @@ import {
   TITLE_MAX_WEIGHTED_LENGTH,
   truncateToWeightedLength,
 } from "@/utils/todo/text-length";
-import {
-  convertDurationToTimeText,
-  convertSecondsToApiDuration,
-} from "@/utils/todo/todo-time";
+import { convertSecondsToApiDuration } from "@/utils/todo/todo-time";
 
 interface DetailTodoFormValues {
   date: Date;
@@ -76,7 +73,7 @@ export interface UseDetailTodoFormParams {
 }
 
 export const useDetailTodoForm = ({ todo }: UseDetailTodoFormParams) => {
-  const durationText = convertDurationToTimeText(todo.durationSeconds ?? 0);
+  const durationText = convertSecondsToApiDuration(todo.durationSeconds ?? 0);
   const todoIcon = todo.icon ?? null;
   const todoDate = parseDateKey(todo.date) ?? new Date();
   const repeatType = isRepeatFrequency(todo.repeat.type)
diff --git a/apps/timo-web/hooks/todo-modal/detail/use-detail-todo-patch-handlers.ts b/apps/timo-web/hooks/todo-modal/detail/use-detail-todo-patch-handlers.ts
index e7669f36..2bd14221 100644
--- a/apps/timo-web/hooks/todo-modal/detail/use-detail-todo-patch-handlers.ts
+++ b/apps/timo-web/hooks/todo-modal/detail/use-detail-todo-patch-handlers.ts
@@ -13,7 +13,10 @@ import {
   buildDetailTodoSubtasksUpdateRequest,
   isTodoUpdateRepeatWeekday,
 } from "@/utils/todo/detail-todo-update-request";
-import { convertTimeTextToDurationSeconds } from "@/utils/todo/todo-time";
+import {
+  convertApiDurationToSeconds,
+  convertClockTimeTextToApiDuration,
+} from "@/utils/todo/todo-time";
 
 export interface UseDetailTodoPatchHandlersParams {
   form: UseDetailTodoFormReturn;
@@ -35,9 +38,7 @@ export const useDetailTodoPatchHandlers = ({
     setSelectedTime(nextTime);
     const time = form.selectTime(nextTime);
 
-    const durationSeconds = time
-      ? convertTimeTextToDurationSeconds(time)
-      : undefined;
+    const durationSeconds = time ? convertApiDurationToSeconds(time) : 0;
 
     if (durationSeconds) updateTodo({ durationSeconds });
   };
@@ -48,8 +49,9 @@ export const useDetailTodoPatchHandlers = ({
   };
 
   const handleTimeChange = (time: string) => {
-    form.setTime(time);
-    const durationSeconds = convertTimeTextToDurationSeconds(time);
+    const apiDuration = convertClockTimeTextToApiDuration(time);
+    form.setTime(apiDuration);
+    const durationSeconds = convertApiDurationToSeconds(apiDuration);
 
     if (durationSeconds) updateTodo({ durationSeconds });
   };
diff --git a/apps/timo-web/utils/todo/todo-time.ts b/apps/timo-web/utils/todo/todo-time.ts
index 21b30146..93aaa78b 100644
--- a/apps/timo-web/utils/todo/todo-time.ts
+++ b/apps/timo-web/utils/todo/todo-time.ts
@@ -29,6 +29,26 @@ export const convertApiDurationToSeconds = (duration: string): number => {
   return minutes * SECONDS_PER_MINUTE + seconds;
 };
 
+export const convertApiDurationToClockTimeText = (duration: string): string => {
+  const totalSeconds = convertApiDurationToSeconds(duration);
+  const hours = Math.floor(totalSeconds / SECONDS_PER_HOUR);
+  const minutes = Math.floor(
+    (totalSeconds % SECONDS_PER_HOUR) / SECONDS_PER_MINUTE,
+  );
+
+  return `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}`;
+};
+
+export const convertClockTimeTextToApiDuration = (timeText: string): string => {
+  const [hoursText = "0", minutesText = "0"] = timeText.split(":");
+  const hours = Number(hoursText) || 0;
+  const minutes = Number(minutesText) || 0;
+
+  return convertSecondsToApiDuration(
+    hours * SECONDS_PER_HOUR + minutes * SECONDS_PER_MINUTE,
+  );
+};
+
 export const convertTimeTextToDurationSeconds = (timeText: string): number => {
   const normalized = timeText.trim().toLowerCase();
   const hourMatch = /^(\d+(?:\.\d+)?)\s*h$/.exec(normalized);

From 80d5d93a84e071453c1ffbfe7e5b1090d97a0894 Mon Sep 17 00:00:00 2001
From: yumin-kim4757 <rladbals0211@gmail.com>
Date: Wed, 15 Jul 2026 12:49:39 +0900
Subject: [PATCH 64/75] =?UTF-8?q?refactor(web):=20=ED=88=AC=EB=91=90=20?=
 =?UTF-8?q?=EC=B9=B4=EB=93=9C=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=EC=B2=98?=
 =?UTF-8?q?=EB=A6=AC=20=EC=A0=95=EB=A6=AC=20(#202)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../home/_components/todo-card/HomeTodoCard.tsx      |  1 -
 .../(main)/today/_components/TodayTodoCard.tsx       | 12 +++---------
 2 files changed, 3 insertions(+), 10 deletions(-)

diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-card/HomeTodoCard.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-card/HomeTodoCard.tsx
index 65bc4f46..3e98a59b 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-card/HomeTodoCard.tsx
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-card/HomeTodoCard.tsx
@@ -131,7 +131,6 @@ export const HomeTodoCard = ({
       </div>
       <div
         role="none"
-        onPointerDownCapture={stopInteractiveEvent}
         onPointerDown={stopInteractiveEvent}
         onClick={stopInteractiveEvent}
       >
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 ae6a06a2..52ae7af6 100644
--- a/apps/timo-web/app/[locale]/(main)/today/_components/TodayTodoCard.tsx
+++ b/apps/timo-web/app/[locale]/(main)/today/_components/TodayTodoCard.tsx
@@ -13,7 +13,7 @@ import {
 } from "@repo/timo-design-system/ui";
 import { cn } from "@repo/timo-design-system/utils";
 
-import type { KeyboardEvent, MouseEvent, PointerEvent, ReactNode } from "react";
+import type { KeyboardEvent, ReactNode } from "react";
 
 const CARD_STYLE = {
   active: {
@@ -64,12 +64,6 @@ export interface TodayTodoCardProps {
 const stopPropagation = (e: { stopPropagation: () => void }) =>
   e.stopPropagation();
 
-const stopPlayEvent = (
-  event: MouseEvent<HTMLButtonElement> | PointerEvent<HTMLButtonElement>,
-) => {
-  event.stopPropagation();
-};
-
 export const TodayTodoCard = ({
   title,
   isDone,
@@ -133,10 +127,10 @@ export const TodayTodoCard = ({
             disabled={isDone}
             active={isPlayHighlighted}
             onClick={(event) => {
-              stopPlayEvent(event);
+              stopPropagation(event);
               onPlay();
             }}
-            onPointerDown={stopPlayEvent}
+            onPointerDown={stopPropagation}
           >
             {isDone ? (
               <PlayDisabledIcon width={24} height={24} />

From 99ca9974f6034f4bba6a8f130ddb9bc98c3d8ed2 Mon Sep 17 00:00:00 2001
From: Lee Hye Won <thankyou@sookmyung.ac.kr>
Date: Wed, 15 Jul 2026 13:13:50 +0900
Subject: [PATCH 65/75] =?UTF-8?q?feat(web):=20=EC=84=A4=EC=A0=95=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=ED=99=95=EC=9D=B8=20=EB=AA=A8?=
 =?UTF-8?q?=EB=8B=AC=20=EA=B0=9C=EC=84=A0=20(#213)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 탈퇴 확인 window.confirm을 SettingsWithdrawModalContainer 모달로 교체
- 로그아웃 모달 타이틀에 next-intl rich text로 영문 'log out' timo-red 강조
- 탈퇴 모달 한국어·영어 i18n 키 추가 (withdrawConfirmTitle 포함 4개)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../account/SettingsLogoutModalContainer.tsx  | 10 ++-
 .../SettingsWithdrawModalContainer.tsx        | 67 +++++++++++++++++++
 .../SettingsWithdrawalContainer.tsx           | 24 ++++---
 apps/timo-web/messages/en.json                |  7 +-
 apps/timo-web/messages/ko.json                |  5 +-
 5 files changed, 100 insertions(+), 13 deletions(-)
 create mode 100644 apps/timo-web/app/[locale]/(main)/settings/_containers/withdrawal/SettingsWithdrawModalContainer.tsx

diff --git a/apps/timo-web/app/[locale]/(main)/settings/_containers/account/SettingsLogoutModalContainer.tsx b/apps/timo-web/app/[locale]/(main)/settings/_containers/account/SettingsLogoutModalContainer.tsx
index c4572c65..0b8d7667 100644
--- a/apps/timo-web/app/[locale]/(main)/settings/_containers/account/SettingsLogoutModalContainer.tsx
+++ b/apps/timo-web/app/[locale]/(main)/settings/_containers/account/SettingsLogoutModalContainer.tsx
@@ -2,6 +2,7 @@
 
 import timoTimerLogo from "@repo/timo-design-system/assets/images/logo/timo-timer.svg";
 import { Modal, PillButton } from "@repo/timo-design-system/ui";
+import { useTranslations } from "next-intl";
 import Image from "next/image";
 import { useRef } from "react";
 
@@ -16,6 +17,7 @@ export const SettingsLogoutModalContainer = ({
   labels,
   onLogout,
 }: SettingsLogoutModalContainerProps) => {
+  const tSettings = useTranslations("Settings");
   const modalTriggerRef = useRef<HTMLButtonElement>(null);
 
   return (
@@ -37,7 +39,13 @@ export const SettingsLogoutModalContainer = ({
         <Modal.Icon>
           <Image src={timoTimerLogo} alt="" width={40} height={40} />
         </Modal.Icon>
-        <Modal.Title>{labels.logoutConfirmTitle}</Modal.Title>
+        <Modal.Title>
+          {tSettings.rich("profile.logoutConfirmTitle", {
+            red: (chunks) => (
+              <span className="text-timo-red">{chunks}</span>
+            ),
+          })}
+        </Modal.Title>
         <Modal.Description className="whitespace-pre-line">
           {labels.logoutConfirmDescription}
         </Modal.Description>
diff --git a/apps/timo-web/app/[locale]/(main)/settings/_containers/withdrawal/SettingsWithdrawModalContainer.tsx b/apps/timo-web/app/[locale]/(main)/settings/_containers/withdrawal/SettingsWithdrawModalContainer.tsx
new file mode 100644
index 00000000..9f5d5c68
--- /dev/null
+++ b/apps/timo-web/app/[locale]/(main)/settings/_containers/withdrawal/SettingsWithdrawModalContainer.tsx
@@ -0,0 +1,67 @@
+"use client";
+
+import timoTimerLogo from "@repo/timo-design-system/assets/images/logo/timo-timer.svg";
+import { ModalButton } from "@repo/timo-design-system/ui";
+import { useTranslations } from "next-intl";
+import Image from "next/image";
+
+import { OverlayModal } from "@/components/modal/OverlayModal";
+
+export interface SettingsWithdrawModalContainerProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onExited: () => void;
+  onWithdraw: () => void;
+}
+
+export const SettingsWithdrawModalContainer = ({
+  isOpen,
+  onClose,
+  onExited,
+  onWithdraw,
+}: SettingsWithdrawModalContainerProps) => {
+  const t = useTranslations("Settings.withdrawal");
+
+  return (
+    <OverlayModal
+      isOpen={isOpen}
+      onClose={onClose}
+      onExited={onExited}
+      ariaLabel={t("withdrawConfirmTitle")}
+      className="w-100 p-5.5"
+    >
+      <div className="mb-4 size-10 shrink-0">
+        <Image src={timoTimerLogo} alt="" width={40} height={40} />
+      </div>
+      <p className="typo-headline-b-18 text-timo-black">
+        {t.rich("withdrawConfirmTitle", {
+          red: (chunks) => (
+            <span className="text-timo-red">{chunks}</span>
+          ),
+        })}
+      </p>
+      <p className="typo-headline-r-14 text-timo-gray-900 mt-1">
+        {t("withdrawConfirmDescription")}
+      </p>
+      <div className="mt-6 flex w-full gap-3">
+        <ModalButton
+          variant="border"
+          className="flex-1 px-0"
+          onClick={onClose}
+        >
+          {t("withdrawConfirmCancel")}
+        </ModalButton>
+        <ModalButton
+          variant="fill"
+          className="flex-1 px-0"
+          onClick={() => {
+            onWithdraw();
+            onClose();
+          }}
+        >
+          {t("withdrawConfirmConfirm")}
+        </ModalButton>
+      </div>
+    </OverlayModal>
+  );
+};
diff --git a/apps/timo-web/app/[locale]/(main)/settings/_containers/withdrawal/SettingsWithdrawalContainer.tsx b/apps/timo-web/app/[locale]/(main)/settings/_containers/withdrawal/SettingsWithdrawalContainer.tsx
index 708f776a..0ddec2cd 100644
--- a/apps/timo-web/app/[locale]/(main)/settings/_containers/withdrawal/SettingsWithdrawalContainer.tsx
+++ b/apps/timo-web/app/[locale]/(main)/settings/_containers/withdrawal/SettingsWithdrawalContainer.tsx
@@ -1,11 +1,13 @@
 "use client";
 
 import { useTranslations } from "next-intl";
+import { overlay } from "overlay-kit";
 import { useState } from "react";
 
 import type { SettingsWithdrawalLabels } from "@/app/[locale]/(main)/settings/_types/withdrawal/withdrawal-type";
 
 import { SettingsWithdrawalView } from "@/app/[locale]/(main)/settings/_components/withdrawal/SettingsWithdrawalView";
+import { SettingsWithdrawModalContainer } from "@/app/[locale]/(main)/settings/_containers/withdrawal/SettingsWithdrawModalContainer";
 import { useWithdrawAction } from "@/app/[locale]/(main)/settings/_queries/withdrawal/use-withdraw";
 import { AnimatedToast } from "@/components/toast/AnimatedToast";
 
@@ -29,15 +31,19 @@ export const SettingsWithdrawalContainer = () => {
 
   const handleWithdraw = () => {
     if (isPending) return;
-    // TODO: 실제 확인 모달로 교체
-    const confirmed = window.confirm(t("confirmMessage"));
-    if (!confirmed) return;
-
-    withdrawMutate(undefined, {
-      onError: () => {
-        setIsErrorToastOpen(true);
-      },
-    });
+
+    overlay.open(({ isOpen, close, unmount }) => (
+      <SettingsWithdrawModalContainer
+        isOpen={isOpen}
+        onClose={close}
+        onExited={unmount}
+        onWithdraw={() =>
+          withdrawMutate(undefined, {
+            onError: () => setIsErrorToastOpen(true),
+          })
+        }
+      />
+    ));
   };
 
   return (
diff --git a/apps/timo-web/messages/en.json b/apps/timo-web/messages/en.json
index 7b4ecd84..0aad5e6b 100644
--- a/apps/timo-web/messages/en.json
+++ b/apps/timo-web/messages/en.json
@@ -97,7 +97,7 @@
       "tagDeleteConfirmDescription": "The tag will be removed from every todo it's applied to.",
       "tagDeleteConfirmCancel": "Cancel",
       "tagDeleteConfirmConfirm": "Delete",
-      "logoutConfirmTitle": "Log out?",
+      "logoutConfirmTitle": "Do you want to <red>log out</red>?",
       "logoutConfirmDescription": "Your data stays saved after logging out.\nSign back in anytime to pick up where you left off.",
       "logoutConfirmCancel": "Cancel",
       "logoutConfirmConfirm": "Log out"
@@ -111,7 +111,10 @@
       "warningCalendar": "The linked calendar connection will be disconnected.",
       "warningIrreversible": "Deleted accounts cannot be recovered.",
       "withdraw": "Withdraw",
-      "confirmMessage": "Are you sure you want to withdraw? All your data will be deleted and cannot be undone.",
+      "withdrawConfirmTitle": "Are you sure you want to <red>withdraw</red>?",
+      "withdrawConfirmDescription": "After withdrawal, all data will be deleted and cannot be undone.",
+      "withdrawConfirmCancel": "Go back",
+      "withdrawConfirmConfirm": "Withdraw",
       "withdrawError": "An error occurred during withdrawal. Please try again later."
     }
   },
diff --git a/apps/timo-web/messages/ko.json b/apps/timo-web/messages/ko.json
index 1d2051bf..78c12a0c 100644
--- a/apps/timo-web/messages/ko.json
+++ b/apps/timo-web/messages/ko.json
@@ -111,7 +111,10 @@
       "warningCalendar": "연동된 캘린더 연결이 해제됩니다.",
       "warningIrreversible": "삭제된 계정은 복구할 수 없습니다.",
       "withdraw": "탈퇴하기",
-      "confirmMessage": "정말 탈퇴하시겠어요? 탈퇴 후에는 모든 데이터가 삭제되며 되돌릴 수 없어요.",
+      "withdrawConfirmTitle": "정말 <red>탈퇴</red>하시겠어요?",
+      "withdrawConfirmDescription": "탈퇴 후에는 모든 데이터가 삭제되며 되돌릴 수 없어요.",
+      "withdrawConfirmCancel": "돌아가기",
+      "withdrawConfirmConfirm": "탈퇴하기",
       "withdrawError": "탈퇴 처리 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요."
     }
   },

From ee30b57f0b8c8362cef06dc328e5b3b243b1494b Mon Sep 17 00:00:00 2001
From: Lee Hye Won <thankyou@sookmyung.ac.kr>
Date: Wed, 15 Jul 2026 13:17:02 +0900
Subject: [PATCH 66/75] =?UTF-8?q?fix(web):=20import=20=EC=88=9C=EC=84=9C?=
 =?UTF-8?q?=20lint=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95=20(#213)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../_containers/account/SettingsLogoutModalContainer.tsx        | 2 +-
 .../_containers/withdrawal/SettingsWithdrawModalContainer.tsx   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/timo-web/app/[locale]/(main)/settings/_containers/account/SettingsLogoutModalContainer.tsx b/apps/timo-web/app/[locale]/(main)/settings/_containers/account/SettingsLogoutModalContainer.tsx
index 0b8d7667..c3d5fa7c 100644
--- a/apps/timo-web/app/[locale]/(main)/settings/_containers/account/SettingsLogoutModalContainer.tsx
+++ b/apps/timo-web/app/[locale]/(main)/settings/_containers/account/SettingsLogoutModalContainer.tsx
@@ -2,8 +2,8 @@
 
 import timoTimerLogo from "@repo/timo-design-system/assets/images/logo/timo-timer.svg";
 import { Modal, PillButton } from "@repo/timo-design-system/ui";
-import { useTranslations } from "next-intl";
 import Image from "next/image";
+import { useTranslations } from "next-intl";
 import { useRef } from "react";
 
 import type { SettingsProfileLabels } from "@/app/[locale]/(main)/settings/_types/account/profile-type";
diff --git a/apps/timo-web/app/[locale]/(main)/settings/_containers/withdrawal/SettingsWithdrawModalContainer.tsx b/apps/timo-web/app/[locale]/(main)/settings/_containers/withdrawal/SettingsWithdrawModalContainer.tsx
index 9f5d5c68..fe45e6bf 100644
--- a/apps/timo-web/app/[locale]/(main)/settings/_containers/withdrawal/SettingsWithdrawModalContainer.tsx
+++ b/apps/timo-web/app/[locale]/(main)/settings/_containers/withdrawal/SettingsWithdrawModalContainer.tsx
@@ -2,8 +2,8 @@
 
 import timoTimerLogo from "@repo/timo-design-system/assets/images/logo/timo-timer.svg";
 import { ModalButton } from "@repo/timo-design-system/ui";
-import { useTranslations } from "next-intl";
 import Image from "next/image";
+import { useTranslations } from "next-intl";
 
 import { OverlayModal } from "@/components/modal/OverlayModal";
 

From 43e27adde10838c50a85a940b648a1debc9eec1c Mon Sep 17 00:00:00 2001
From: yumin-kim4757 <rladbals0211@gmail.com>
Date: Wed, 15 Jul 2026 13:20:20 +0900
Subject: [PATCH 67/75] =?UTF-8?q?fix(web):=20=EC=83=81=EC=84=B8=20?=
 =?UTF-8?q?=ED=88=AC=EB=91=90=20=EC=88=98=EC=A0=95=20=EC=84=B1=EA=B3=B5=20?=
 =?UTF-8?q?=ED=9B=84=20=ED=8F=BC=20=EC=83=81=ED=83=9C=20=EB=B0=98=EC=98=81?=
 =?UTF-8?q?=20(#202)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/DetailTodoModalContent.tsx         |  6 +-
 .../detail/DetailTodoModalContainer.tsx       | 12 ++-
 .../hooks/todo-modal/common/use-tag-field.tsx |  6 ++
 .../todo-modal/detail/use-detail-todo-form.ts | 33 +++-----
 .../detail/use-detail-todo-icon-submit.ts     | 18 ++++-
 .../detail/use-detail-todo-patch-handlers.ts  | 79 +++++++++++++------
 .../detail/use-detail-todo-text-auto-save.ts  | 13 ++-
 7 files changed, 115 insertions(+), 52 deletions(-)

diff --git a/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx b/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
index 53205702..8ce10f77 100644
--- a/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
+++ b/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
@@ -7,6 +7,7 @@ import type {
   TodoDetailResponseTimerStatus,
   TodoUpdateRequest,
 } from "@/api/generated/models";
+import type { UpdateTodoSubmitHandlers } from "@/hooks/todo-modal/detail/use-update-todo-submit";
 
 import { OverlayModal } from "@/components/modal/OverlayModal";
 import { TodoIconField } from "@/components/todo-modal/common/TodoIconField";
@@ -40,7 +41,10 @@ export interface DetailTodoModalContentProps {
   onTogglePlay: () => void;
   onToggleCompleted: (completed: boolean) => void;
   onDelete: () => void;
-  onUpdate: (data: TodoUpdateRequest) => void;
+  onUpdate: (
+    data: TodoUpdateRequest,
+    handlers?: UpdateTodoSubmitHandlers,
+  ) => void;
   timerStatus: TodoDetailResponseTimerStatus;
 }
 
diff --git a/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx b/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx
index 47ca2d2d..93eec877 100644
--- a/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx
+++ b/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx
@@ -6,6 +6,7 @@ import { useCallback, useEffect, useState } from "react";
 
 import type { ErrorType } from "@/api/client/custom-instance";
 import type { ErrorDto, TodoUpdateRequest } from "@/api/generated/models";
+import type { UpdateTodoSubmitHandlers } from "@/hooks/todo-modal/detail/use-update-todo-submit";
 import type { ReactNode } from "react";
 
 import { useGetTodoDetail } from "@/api/generated/endpoints/todo/todo";
@@ -73,7 +74,10 @@ const DetailTodoModalQuery = ({
     });
   };
 
-  const updateTodo = (updateData: TodoUpdateRequest) => {
+  const updateTodo = (
+    updateData: TodoUpdateRequest,
+    handlers: UpdateTodoSubmitHandlers = {},
+  ) => {
     handleUpdate(
       {
         todoId,
@@ -81,7 +85,11 @@ const DetailTodoModalQuery = ({
         data: updateData,
       },
       {
-        onError: onActionError,
+        onSuccess: handlers.onSuccess,
+        onError: (error) => {
+          handlers.onError?.(error);
+          onActionError(error);
+        },
       },
     );
   };
diff --git a/apps/timo-web/hooks/todo-modal/common/use-tag-field.tsx b/apps/timo-web/hooks/todo-modal/common/use-tag-field.tsx
index 85ab0195..e564585e 100644
--- a/apps/timo-web/hooks/todo-modal/common/use-tag-field.tsx
+++ b/apps/timo-web/hooks/todo-modal/common/use-tag-field.tsx
@@ -29,6 +29,7 @@ export interface UseTagFieldResult {
   isCreateTagErrorToastOpen: boolean;
   closeCreateTagErrorToast: () => void;
   handleSelectTag: (label: string) => void;
+  handleSelectTagById: (tagId: number) => void;
   handleAddTagClick: () => void;
 }
 
@@ -66,6 +67,10 @@ export const useTagField = <TFieldValues extends FieldValues>({
     field.onChange(option.id);
   };
 
+  const handleSelectTagById = (tagId: number) => {
+    field.onChange(tagId);
+  };
+
   const handleAddTagClick = () => {
     if (tagOptions.length >= MAX_TAG_COUNT) {
       setIsTagLimitToastOpen(true);
@@ -114,6 +119,7 @@ export const useTagField = <TFieldValues extends FieldValues>({
     isCreateTagErrorToastOpen,
     closeCreateTagErrorToast: () => setIsCreateTagErrorToastOpen(false),
     handleSelectTag,
+    handleSelectTagById,
     handleAddTagClick,
   };
 };
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 4a04c642..f50e2a3d 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
@@ -127,6 +127,11 @@ export const useDetailTodoForm = ({ todo }: UseDetailTodoFormParams) => {
 
   const selectIcon = (nextIcon: TodoIconValue) => iconField.onChange(nextIcon);
   const removeIcon = () => iconField.onChange(null);
+  const setTagId = (tagId: number) => tagField.handleSelectTagById(tagId);
+  const setSelectedWeekdayIds = (weekdayIds: string[]) =>
+    selectedWeekdayIdsField.onChange(weekdayIds);
+  const setSubtaskCompleted = (id: number, completed: boolean) =>
+    subtaskField.handleCompletedChange(id, completed);
 
   const changeTitle = (value: string) => {
     titleField.onChange(
@@ -143,12 +148,7 @@ export const useDetailTodoForm = ({ todo }: UseDetailTodoFormParams) => {
 
     if (!option) return undefined;
 
-    const time = convertSecondsToApiDuration(
-      option.minute * SECONDS_PER_MINUTE,
-    );
-    timeField.onChange(time);
-
-    return time;
+    return convertSecondsToApiDuration(option.minute * SECONDS_PER_MINUTE);
   };
 
   const changeRepeatFrequency = (frequency: RepeatFrequency) => {
@@ -157,32 +157,22 @@ export const useDetailTodoForm = ({ todo }: UseDetailTodoFormParams) => {
   };
 
   const toggleWeekday = (weekdayId: string) => {
-    const nextWeekdayIds = selectedWeekdayIdsField.value.includes(weekdayId)
+    return selectedWeekdayIdsField.value.includes(weekdayId)
       ? selectedWeekdayIdsField.value.filter((item) => item !== weekdayId)
       : [...selectedWeekdayIdsField.value, weekdayId];
-
-    selectedWeekdayIdsField.onChange(nextWeekdayIds);
-
-    return nextWeekdayIds;
   };
 
-  const handleSelectTag = (label: string) => {
+  const getTagIdByLabel = (label: string) => {
     const option = tagField.tagOptions.find((item) => item.label === label);
     if (!option) return null;
 
-    tagField.handleSelectTag(label);
-
     return option.id;
   };
 
   const changeSubtaskCompleted = (id: number, completed: boolean) => {
-    const nextSubtasks = subtaskField.subtaskInputs.map((subtask) =>
+    return subtaskField.subtaskInputs.map((subtask) =>
       subtask.id === id ? { ...subtask, completed } : subtask,
     );
-
-    subtaskField.handleCompletedChange(id, completed);
-
-    return nextSubtasks;
   };
 
   return {
@@ -194,10 +184,12 @@ export const useDetailTodoForm = ({ todo }: UseDetailTodoFormParams) => {
     setPriority: priorityField.onChange,
     tagLabels: tagField.tagLabels,
     selectedTagLabel: tagField.selectedTagLabel,
-    handleSelectTag,
+    getTagIdByLabel,
+    setTagId,
     isRepeatActive: isRepeatActiveField.value,
     repeatFrequency: repeatFrequencyField.value,
     selectedWeekdayIds: selectedWeekdayIdsField.value,
+    setSelectedWeekdayIds,
     repeatDay: repeatDayField.value,
     setRepeatDay: repeatDayField.onChange,
     title: titleField.value,
@@ -206,6 +198,7 @@ export const useDetailTodoForm = ({ todo }: UseDetailTodoFormParams) => {
     registerSubtaskInputRef: subtaskField.registerInputRef,
     changeSubtaskInput: subtaskField.handleInputChange,
     changeSubtaskCompleted,
+    setSubtaskCompleted,
     handleSubtaskInputKeyDown: subtaskField.handleInputKeyDown,
     memo: memoField.value,
     setMemo: memoField.onChange,
diff --git a/apps/timo-web/hooks/todo-modal/detail/use-detail-todo-icon-submit.ts b/apps/timo-web/hooks/todo-modal/detail/use-detail-todo-icon-submit.ts
index 79ce181a..d3e9b482 100644
--- a/apps/timo-web/hooks/todo-modal/detail/use-detail-todo-icon-submit.ts
+++ b/apps/timo-web/hooks/todo-modal/detail/use-detail-todo-icon-submit.ts
@@ -1,12 +1,16 @@
 import { useState } from "react";
 
 import type { TodoUpdateRequest } from "@/api/generated/models";
+import type { UpdateTodoSubmitHandlers } from "@/hooks/todo-modal/detail/use-update-todo-submit";
 import type { TodoIconValue } from "@repo/timo-design-system/ui";
 
 export interface UseDetailTodoIconSubmitParams {
   icon: TodoIconValue | null;
   selectIcon: (icon: TodoIconValue) => void;
-  onUpdate: (data: TodoUpdateRequest) => void;
+  onUpdate: (
+    data: TodoUpdateRequest,
+    handlers?: UpdateTodoSubmitHandlers,
+  ) => void;
 }
 
 export const useDetailTodoIconSubmit = ({
@@ -32,9 +36,15 @@ export const useDetailTodoIconSubmit = ({
       return;
     }
 
-    selectIcon(pendingIcon);
-    onUpdate({ icon: pendingIcon });
-    setIsIconPanelOpen(false);
+    onUpdate(
+      { icon: pendingIcon },
+      {
+        onSuccess: () => {
+          selectIcon(pendingIcon);
+          setIsIconPanelOpen(false);
+        },
+      },
+    );
   };
 
   const handleToggleIconPanel = () => {
diff --git a/apps/timo-web/hooks/todo-modal/detail/use-detail-todo-patch-handlers.ts b/apps/timo-web/hooks/todo-modal/detail/use-detail-todo-patch-handlers.ts
index 2bd14221..66e8f133 100644
--- a/apps/timo-web/hooks/todo-modal/detail/use-detail-todo-patch-handlers.ts
+++ b/apps/timo-web/hooks/todo-modal/detail/use-detail-todo-patch-handlers.ts
@@ -2,6 +2,7 @@ import { useState } from "react";
 
 import type { TodoUpdateRequest } from "@/api/generated/models";
 import type { UseDetailTodoFormReturn } from "@/hooks/todo-modal/detail/use-detail-todo-form";
+import type { UpdateTodoSubmitHandlers } from "@/hooks/todo-modal/detail/use-update-todo-submit";
 import type {
   PriorityLevel,
   RepeatFrequency,
@@ -20,7 +21,10 @@ import {
 
 export interface UseDetailTodoPatchHandlersParams {
   form: UseDetailTodoFormReturn;
-  onUpdate: (data: TodoUpdateRequest) => void;
+  onUpdate: (
+    data: TodoUpdateRequest,
+    handlers?: UpdateTodoSubmitHandlers,
+  ) => void;
 }
 
 export const useDetailTodoPatchHandlers = ({
@@ -29,59 +33,84 @@ export const useDetailTodoPatchHandlers = ({
 }: UseDetailTodoPatchHandlersParams) => {
   const [selectedTime, setSelectedTime] = useState<TimeSelection>();
 
-  const updateTodo = (updateData: TodoUpdateRequest) => {
+  const updateTodo = (
+    updateData: TodoUpdateRequest,
+    handlers?: UpdateTodoSubmitHandlers,
+  ) => {
     if ("title" in updateData && !updateData.title?.trim()) return;
-    onUpdate(updateData);
+    onUpdate(updateData, handlers);
   };
 
   const handleSelectTime = (nextTime: TimeSelection) => {
-    setSelectedTime(nextTime);
     const time = form.selectTime(nextTime);
 
     const durationSeconds = time ? convertApiDurationToSeconds(time) : 0;
 
-    if (durationSeconds) updateTodo({ durationSeconds });
+    if (durationSeconds) {
+      updateTodo(
+        { durationSeconds },
+        {
+          onSuccess: () => {
+            setSelectedTime(nextTime);
+            form.setTime(time);
+          },
+        },
+      );
+    }
   };
 
   const handleDateChange = (nextDate: Date) => {
-    form.setDate(nextDate);
-    updateTodo({ date: formatDateKey(nextDate) });
+    updateTodo(
+      { date: formatDateKey(nextDate) },
+      { onSuccess: () => form.setDate(nextDate) },
+    );
   };
 
   const handleTimeChange = (time: string) => {
     const apiDuration = convertClockTimeTextToApiDuration(time);
-    form.setTime(apiDuration);
     const durationSeconds = convertApiDurationToSeconds(apiDuration);
 
-    if (durationSeconds) updateTodo({ durationSeconds });
+    if (durationSeconds) {
+      updateTodo(
+        { durationSeconds },
+        { onSuccess: () => form.setTime(apiDuration) },
+      );
+    }
   };
 
   const handleSelectPriority = (priority: PriorityLevel) => {
-    form.setPriority(priority);
-    updateTodo({ priority });
+    updateTodo({ priority }, { onSuccess: () => form.setPriority(priority) });
   };
 
   const handleSelectTag = (label: string) => {
-    const tagId = form.handleSelectTag(label);
+    const tagId = form.getTagIdByLabel(label);
 
-    if (tagId !== null) updateTodo({ tagId });
+    if (tagId !== null) {
+      updateTodo({ tagId }, { onSuccess: () => form.setTagId(tagId) });
+    }
   };
 
   const handleRepeatFrequencyChange = (repeatFrequency: RepeatFrequency) => {
-    form.changeRepeatFrequency(repeatFrequency);
-    updateTodo({ repeatType: repeatFrequency });
+    updateTodo(
+      { repeatType: repeatFrequency },
+      { onSuccess: () => form.changeRepeatFrequency(repeatFrequency) },
+    );
   };
 
   const handleWeekdayToggle = (weekdayId: string) => {
     const selectedWeekdayIds = form.toggleWeekday(weekdayId);
-    updateTodo({
-      repeatType: "WEEKLY",
-      repeatWeekdays: selectedWeekdayIds.filter(isTodoUpdateRepeatWeekday),
-    });
+    updateTodo(
+      {
+        repeatType: "WEEKLY",
+        repeatWeekdays: selectedWeekdayIds.filter(isTodoUpdateRepeatWeekday),
+      },
+      {
+        onSuccess: () => form.setSelectedWeekdayIds(selectedWeekdayIds),
+      },
+    );
   };
 
   const handleRepeatDayChange = (repeatDay: string) => {
-    form.setRepeatDay(repeatDay);
     const repeatDayOfMonth = Number(repeatDay);
 
     if (
@@ -89,13 +118,19 @@ export const useDetailTodoPatchHandlers = ({
       repeatDayOfMonth >= 1 &&
       repeatDayOfMonth <= 31
     ) {
-      updateTodo({ repeatType: "MONTHLY", repeatDayOfMonth });
+      updateTodo(
+        { repeatType: "MONTHLY", repeatDayOfMonth },
+        { onSuccess: () => form.setRepeatDay(repeatDay) },
+      );
     }
   };
 
   const handleSubtaskCompletedChange = (id: number, completed: boolean) => {
     const subtasks = form.changeSubtaskCompleted(id, completed);
-    updateTodo({ subtasks: buildDetailTodoSubtasksUpdateRequest(subtasks) });
+    updateTodo(
+      { subtasks: buildDetailTodoSubtasksUpdateRequest(subtasks) },
+      { onSuccess: () => form.setSubtaskCompleted(id, completed) },
+    );
   };
 
   return {
diff --git a/apps/timo-web/hooks/todo-modal/detail/use-detail-todo-text-auto-save.ts b/apps/timo-web/hooks/todo-modal/detail/use-detail-todo-text-auto-save.ts
index d03940da..0ab5bd09 100644
--- a/apps/timo-web/hooks/todo-modal/detail/use-detail-todo-text-auto-save.ts
+++ b/apps/timo-web/hooks/todo-modal/detail/use-detail-todo-text-auto-save.ts
@@ -2,6 +2,7 @@ import { useCallback, useEffect, useMemo, useRef } from "react";
 
 import type { TodoUpdateRequest } from "@/api/generated/models";
 import type { DetailTodoSubtaskInput } from "@/hooks/todo-modal/detail/use-detail-subtask-field";
+import type { UpdateTodoSubmitHandlers } from "@/hooks/todo-modal/detail/use-update-todo-submit";
 
 import { buildDetailTodoTextUpdateRequest } from "@/utils/todo/detail-todo-update-request";
 
@@ -12,7 +13,10 @@ export interface UseDetailTodoTextAutoSaveParams {
   title: string;
   memo: string;
   subtasks: DetailTodoSubtaskInput[];
-  onUpdate: (data: TodoUpdateRequest) => void;
+  onUpdate: (
+    data: TodoUpdateRequest,
+    handlers?: UpdateTodoSubmitHandlers,
+  ) => void;
 }
 
 export const useDetailTodoTextAutoSave = ({
@@ -56,8 +60,11 @@ export const useDetailTodoTextAutoSave = ({
       return;
     }
 
-    latestOnUpdateRef.current(latestBuildTextUpdateRequestRef.current());
-    lastSubmittedTextUpdateSignatureRef.current = textUpdateSignature;
+    latestOnUpdateRef.current(latestBuildTextUpdateRequestRef.current(), {
+      onSuccess: () => {
+        lastSubmittedTextUpdateSignatureRef.current = textUpdateSignature;
+      },
+    });
   }, [textUpdateSignature, title]);
 
   useEffect(() => {

From 64fa49dad783f0010152d88e7decd5d1f1fb5d77 Mon Sep 17 00:00:00 2001
From: kimminna <kmina121777@naver.com>
Date: Wed, 15 Jul 2026 13:29:19 +0900
Subject: [PATCH 68/75] =?UTF-8?q?feat(web):=20=ED=8C=8C=EB=B9=84=EC=BD=98?=
 =?UTF-8?q?=20=EB=B0=8F=20=EB=A1=9C=EC=BC=80=EC=9D=BC=EB=B3=84=20SEO=20?=
 =?UTF-8?q?=EB=A9=94=ED=83=80=EB=8D=B0=EC=9D=B4=ED=84=B0=EB=A5=BC=20?=
 =?UTF-8?q?=EC=84=A4=EC=A0=95=ED=95=9C=EB=8B=A4=20(#215)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- public/favicon.png를 next.js metadata.icons에 연결해 브라우저 탭 파비콘을 표시했습니다.
- 정적 title/description을 generateMetadata로 전환해 로케일(en/ko)별 텍스트가 반영되도록 했습니다.
- metadataBase, Open Graph, Twitter Card, hreflang(alternates), robots, formatDetection 등 SEO 메타데이터를 추가했습니다.
- messages/en.json, messages/ko.json에 Metadata 네임스페이스를 추가했습니다.
---
 apps/timo-web/app/[locale]/layout.tsx |  67 ++++++++++++++++++++++++--
 apps/timo-web/messages/en.json        |   4 ++
 apps/timo-web/messages/ko.json        |   4 ++
 apps/timo-web/public/favicon.png      | Bin 0 -> 28513 bytes
 4 files changed, 71 insertions(+), 4 deletions(-)
 create mode 100644 apps/timo-web/public/favicon.png

diff --git a/apps/timo-web/app/[locale]/layout.tsx b/apps/timo-web/app/[locale]/layout.tsx
index dfd9f6da..18af4e77 100644
--- a/apps/timo-web/app/[locale]/layout.tsx
+++ b/apps/timo-web/app/[locale]/layout.tsx
@@ -2,7 +2,7 @@ import "./globals.css";
 import localFont from "next/font/local";
 import { notFound } from "next/navigation";
 import { hasLocale, NextIntlClientProvider } from "next-intl";
-import { setRequestLocale } from "next-intl/server";
+import { getTranslations, setRequestLocale } from "next-intl/server";
 
 import type { Metadata } from "next";
 
@@ -19,9 +19,11 @@ const pretendard = localFont({
   display: "swap",
 });
 
-export const metadata: Metadata = {
-  title: "Timo",
-  description: "Timo web",
+const SITE_URL = "https://timo.kr";
+
+const OG_LOCALE: Record<(typeof routing.locales)[number], string> = {
+  en: "en_US",
+  ko: "ko_KR",
 };
 
 interface RootLayoutProps {
@@ -33,6 +35,63 @@ export function generateStaticParams() {
   return routing.locales.map((locale) => ({ locale }));
 }
 
+export async function generateMetadata({
+  params,
+}: Omit<RootLayoutProps, "children">): Promise<Metadata> {
+  const { locale } = await params;
+
+  if (!hasLocale(routing.locales, locale)) {
+    notFound();
+  }
+
+  const t = await getTranslations({ locale, namespace: "Metadata" });
+  const title = t("title");
+  const description = t("description");
+
+  return {
+    metadataBase: new URL(SITE_URL),
+    title: {
+      default: title,
+      template: `%s | ${title}`,
+    },
+    description,
+    icons: {
+      icon: "/favicon.png",
+    },
+    alternates: {
+      canonical: `/${locale}`,
+      languages: {
+        en: "/en",
+        ko: "/ko",
+        "x-default": `/${routing.defaultLocale}`,
+      },
+    },
+    openGraph: {
+      type: "website",
+      url: `/${locale}`,
+      siteName: title,
+      title,
+      description,
+      locale: OG_LOCALE[locale],
+      alternateLocale: routing.locales
+        .filter((otherLocale) => otherLocale !== locale)
+        .map((otherLocale) => OG_LOCALE[otherLocale]),
+    },
+    twitter: {
+      card: "summary",
+      title,
+      description,
+    },
+    robots: {
+      index: true,
+      follow: true,
+    },
+    formatDetection: {
+      telephone: false,
+    },
+  };
+}
+
 export default async function RootLayout({
   children,
   params,
diff --git a/apps/timo-web/messages/en.json b/apps/timo-web/messages/en.json
index 7b4ecd84..e8851411 100644
--- a/apps/timo-web/messages/en.json
+++ b/apps/timo-web/messages/en.json
@@ -1,4 +1,8 @@
 {
+  "Metadata": {
+    "title": "timo",
+    "description": "Manage your day with clear timeboxes."
+  },
   "Navigation": {
     "home": "Home",
     "today": "Today",
diff --git a/apps/timo-web/messages/ko.json b/apps/timo-web/messages/ko.json
index 1d2051bf..f3bc12bd 100644
--- a/apps/timo-web/messages/ko.json
+++ b/apps/timo-web/messages/ko.json
@@ -1,4 +1,8 @@
 {
+  "Metadata": {
+    "title": "timo",
+    "description": "흩어진 시간을, 실행 가능한 흐름으로."
+  },
   "Navigation": {
     "home": "홈",
     "today": "오늘",
diff --git a/apps/timo-web/public/favicon.png b/apps/timo-web/public/favicon.png
new file mode 100644
index 0000000000000000000000000000000000000000..3cda5b79a434511b7fc7e8f2f2b9f8b3605739b3
GIT binary patch
literal 28513
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
DPUKVl

literal 0
HcmV?d00001


From ebfa649afa516b0ae912516282e46fbfdd4fee3a Mon Sep 17 00:00:00 2001
From: kimminna <kmina121777@naver.com>
Date: Wed, 15 Jul 2026 13:29:55 +0900
Subject: [PATCH 69/75] =?UTF-8?q?docs(root):=20=EC=95=84=ED=82=A4=ED=85=8D?=
 =?UTF-8?q?=EC=B2=98=C2=B7=EC=BB=A8=EB=B2=A4=EC=85=98=C2=B7=EB=94=94?=
 =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=ED=86=A0=ED=81=B0=20=EB=AC=B8=EC=84=9C?=
 =?UTF-8?q?=EB=A5=BC=20=EC=8B=A4=EC=A0=9C=20=EA=B5=AC=ED=98=84=20=EA=B8=B0?=
 =?UTF-8?q?=EC=A4=80=EC=9C=BC=EB=A1=9C=20=EB=8F=99=EA=B8=B0=ED=99=94?=
 =?UTF-8?q?=ED=95=9C=EB=8B=A4=20(#215)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- API 클라이언트가 실제로는 swagger-typescript-api가 아닌 Orval 기반임을 반영해 stack.md를 수정했습니다.
- Git Hooks를 Husky 단독이 아닌 Husky + lint-staged 조합으로 정정했습니다.
- SVG 아이콘 생성 방식을 SVG sprite에서 실제 사용 중인 SVGR로 수정했습니다.
- structure.md의 모노레포 트리에서 존재하지 않는 lib/를 제거하고 api/, containers/ 등 실제 디렉터리를 반영했습니다.
- components.md의 예시 도메인을 존재하지 않는 auth에서 실제 존재하는 focus 도메인으로 교체했습니다.
- commit.md의 config 스코프에 누락된 tailwind-config 패키지를 추가했습니다.
- tokens.md에 실제 CSS에는 있지만 문서화되지 않았던 Radius, Shadow, Z-Index, overlay 색상 토큰을 추가했습니다.
---
 docs/architecture/components.md | 34 ++++++++++++++++++++----------
 docs/architecture/stack.md      | 32 ++++++++++++++--------------
 docs/architecture/structure.md  | 31 ++++++++++++++++++---------
 docs/conventions/commit.md      | 12 +++++------
 docs/design/tokens.md           | 37 ++++++++++++++++++++++++++++++---
 5 files changed, 100 insertions(+), 46 deletions(-)

diff --git a/docs/architecture/components.md b/docs/architecture/components.md
index 98a066e3..652351e8 100644
--- a/docs/architecture/components.md
+++ b/docs/architecture/components.md
@@ -7,23 +7,35 @@ app/(domain)/page.tsx                          ← 라우팅·레이아웃 조
 ```
 
 - **pages** (`app/.../page.tsx`): 라우팅 단위. 데이터 페칭(React Query) 및 레이아웃만 담당
-- **도메인 종속** (`_components/`, `_containers/`, `_queries/`): 해당 도메인 라우트 내부에서만 사용. `_` 접두사로 Next.js 라우팅에서 제외됨
+- **도메인 종속** (`_components/`, `_containers/`, `_hooks/`, `_queries/`, `_types/`, `_utils/`): 해당 도메인 라우트 내부에서만 사용. `_` 접두사로 Next.js 라우팅에서 제외됨
   - `_components/` — props만 받는 순수 UI. `'use client'` 없이도 동작 가능
   - `_containers/` — `'use client'` 필수. useQuery·zustand 등 외부 상태와 결합된 클라이언트 컨테이너
+  - `_hooks/` — 해당 도메인 전용 커스텀 훅 (React Query가 아닌 로컬 상태·이펙트 로직)
   - `_queries/` — 해당 도메인 전용 React Query hooks (useQuery · useMutation · queryKey 정의)
-- **앱 전역** (`components/`, `hooks/`): 여러 도메인에서 공유하는 presentational 컴포넌트·훅
+  - `_types/` — 해당 도메인 전용 타입
+  - `_utils/` — 해당 도메인 전용 순수 함수
+- **앱 전역** (`components/`, `containers/`, `hooks/`, `queries/`): 여러 도메인에서 공유하는 presentational 컴포넌트·클라이언트 컨테이너·훅·쿼리
 - **@repo/timo-design-system**: 앱 간 공유되는 범용 UI (Button, Card 등)
 
-## 예시 — auth 도메인
+## 예시 — focus 도메인
 
 ```text
-app/
-  auth/
-    _components/    # LoginForm, SocialLoginButton 등 순수 UI
-    _containers/    # LoginFormContainer (useQuery·zustand 결합)
-    _queries/       # use-login-mutation, use-user-profile-query 등
-    page.tsx        # 레이아웃 조합만 (Server Component)
-    layout.tsx
+app/[locale]/(main)/focus/
+  _components/
+    FocusTaskItem.tsx        # 순수 UI
+    FocusEmptyTaskItem.tsx
+  _containers/
+    FocusHeaderContainer.tsx   # 'use client', useQuery·zustand 결합
+    FocusSessionContainer.tsx
+  _hooks/
+    use-focus-session.ts       # 세션 타이머 등 로컬 로직
+  _queries/
+    use-focus-todo.ts          # useQuery·useMutation 정의
+  _types/
+    task-type.ts
+  _utils/
+    date.ts
+  page.tsx                     # 레이아웃 조합만 (Server Component)
 ```
 
-앱 전역 `queries/`는 여러 도메인에서 공유하는 쿼리(예: 유저 프로필)에 사용하고, 특정 도메인에만 쓰이는 쿼리는 `_queries/`로 해당 도메인에 코로케이션한다.
+앱 전역 `queries/`는 여러 도메인에서 공유하는 쿼리(예: 유저 프로필 — `queries/use-my-profile.ts`)에 사용하고, 특정 도메인에만 쓰이는 쿼리는 `_queries/`로 해당 도메인에 코로케이션한다. 동일한 원칙이 컨테이너에도 적용되어, 여러 도메인이 공유하는 컨테이너는 앱 전역 `containers/`에 둔다.
diff --git a/docs/architecture/stack.md b/docs/architecture/stack.md
index 17c28e59..09e310fd 100644
--- a/docs/architecture/stack.md
+++ b/docs/architecture/stack.md
@@ -1,18 +1,18 @@
 # 기술 스택
 
-| 분류         | 도구                       | 비고                          |
-| ------------ | -------------------------- | ----------------------------- |
-| Monorepo     | Turborepo + pnpm workspace | 빌드 캐싱, 파이프라인 최적화  |
-| Framework    | Next.js 16 (App Router)    | SSR/SSG, Server Components    |
-| Language     | TypeScript 5.9             | strict 모드                   |
-| Styling      | Tailwind CSS               | 유틸리티 클래스 기반          |
-| State — 전역 | Zustand                    | 클라이언트 전역 상태          |
-| State — 서버 | TanStack React Query       | API 캐싱, 동기화              |
-| API Client   | swagger-typescript-api     | OpenAPI 스펙 → 타입 자동 생성 |
-| Monitoring   | Sentry                     | 런타임 에러 및 성능 추적      |
-| Formatter    | Prettier                   | 팀 컨벤션 자동 적용           |
-| Linter       | ESLint 9 (flat config)     | `--max-warnings 0`            |
-| Git Hooks    | Husky                      | 커밋 전 lint/format           |
-| Code Review  | CodeRabbit                 | PR마다 AI 리뷰                |
-| Assets       | SVG sprite                 | SVG → React 컴포넌트          |
-| Deployment   | Vercel                     | Turborepo Remote Cache 연동   |
+| 분류         | 도구                              | 비고                                               |
+| ------------ | --------------------------------- | -------------------------------------------------- |
+| Monorepo     | Turborepo + pnpm workspace        | 빌드 캐싱, 파이프라인 최적화                       |
+| Framework    | Next.js 16 (App Router)           | SSR/SSG, Server Components                         |
+| Language     | TypeScript 5.9                    | strict 모드                                        |
+| Styling      | Tailwind CSS                      | 유틸리티 클래스 기반                               |
+| State — 전역 | Zustand                           | 클라이언트 전역 상태                               |
+| State — 서버 | TanStack React Query              | API 캐싱, 동기화                                   |
+| API Client   | Orval (axios + react-query + zod) | OpenAPI 스펙 → React Query 훅·Zod 스키마 자동 생성 |
+| Monitoring   | Sentry                            | 런타임 에러 및 성능 추적                           |
+| Formatter    | Prettier                          | 팀 컨벤션 자동 적용                                |
+| Linter       | ESLint 9 (flat config)            | `--max-warnings 0`                                 |
+| Git Hooks    | Husky + lint-staged               | 커밋 전 변경 파일만 lint/format                    |
+| Code Review  | CodeRabbit                        | PR마다 AI 리뷰                                     |
+| Assets       | SVGR                              | SVG → React 아이콘 컴포넌트 자동 생성              |
+| Deployment   | Vercel                            | Turborepo Remote Cache 연동                        |
diff --git a/docs/architecture/structure.md b/docs/architecture/structure.md
index ebe8d8c6..727f35cb 100644
--- a/docs/architecture/structure.md
+++ b/docs/architecture/structure.md
@@ -5,20 +5,31 @@ timo-client/
 ├── apps/
 │   └── timo-web/          # Next.js 앱 (port 3000)
 │       ├── app/           # App Router 페이지·레이아웃
-│       │   └── (domain)/  # 도메인 라우트 (예: auth, onboarding)
-│       │       ├── _components/  # 해당 도메인 전용 컴포넌트
+│       │   └── [locale]/(그룹)/(domain)/  # 도메인 라우트 (예: home, focus, settings, onboarding)
+│       │       ├── _components/  # 해당 도메인 전용 순수 UI
+│       │       ├── _containers/  # 해당 도메인 전용 클라이언트 컨테이너 ('use client')
 │       │       ├── _hooks/       # 해당 도메인 전용 커스텀 훅
+│       │       ├── _queries/     # 해당 도메인 전용 React Query 훅
+│       │       ├── _types/       # 해당 도메인 전용 타입
 │       │       ├── _utils/       # 해당 도메인 전용 유틸
 │       │       └── page.tsx
-│       ├── components/    # 앱 전역 공유 컴포넌트
-│       ├── hooks/         # 앱 전역 공유 커스텀 훅
-│       ├── stores/        # Zustand 스토어
-│       ├── queries/       # React Query 훅
-│       └── lib/           # API 클라이언트, 유틸
+│       ├── api/            # Orval 생성 API 클라이언트·타입 + 커스텀 axios 인스턴스
+│       ├── components/     # 앱 전역 공유 컴포넌트
+│       ├── constants/      # 앱 전역 상수 (라우트, 시간 단위 등)
+│       ├── containers/     # 여러 도메인에서 공유하는 클라이언트 컨테이너
+│       ├── hooks/          # 앱 전역 공유 커스텀 훅
+│       ├── i18n/           # next-intl 라우팅·요청·네비게이션 설정
+│       ├── messages/       # 로케일별 번역 리소스
+│       ├── providers/      # 전역 Provider (auth, query, overlay, locale 등)
+│       ├── queries/        # 여러 도메인에서 공유하는 React Query 훅
+│       ├── stores/         # Zustand 스토어
+│       ├── types/          # 앱 전역 공유 타입
+│       └── utils/          # 앱 전역 공유 유틸
 ├── packages/
 │   ├── timo-design-system/ # 공유 UI 컴포넌트 (@repo/timo-design-system)
-│   ├── eslint-config/     # 공유 ESLint 설정 (@repo/eslint-config)
-│   └── typescript-config/ # 공유 tsconfig (@repo/typescript-config)
+│   ├── eslint-config/      # 공유 ESLint 설정 (@repo/eslint-config)
+│   ├── tailwind-config/    # 공유 Tailwind 설정 (@repo/tailwind-config)
+│   └── typescript-config/  # 공유 tsconfig (@repo/typescript-config)
 └── docs/
 ```
 
@@ -27,4 +38,4 @@ timo-client/
 - `apps/timo-web` → `packages/timo-design-system` 참조 가능
 - `packages/timo-design-system` → `apps/*` 참조 금지
 - 패키지 간 참조는 반드시 `workspace:*`로 선언
-- 앱 내부 도메인 간 직접 import 금지 — 공유 로직은 `lib/` 또는 `packages/`로 추출
+- 앱 내부 도메인 간 직접 import 금지 — 공유 로직은 앱 전역 디렉터리(`components/`, `hooks/`, `queries/`, `utils/`, `api/` 등) 또는 `packages/`로 추출
diff --git a/docs/conventions/commit.md b/docs/conventions/commit.md
index 2003e822..3c0ef7ac 100644
--- a/docs/conventions/commit.md
+++ b/docs/conventions/commit.md
@@ -19,12 +19,12 @@
 
 변경된 파일 위치에 따라 스코프를 결정한다.
 
-| 스코프   | 기준                                                                         |
-| -------- | ---------------------------------------------------------------------------- |
-| `web`    | `apps/timo-web/**` 변경                                                      |
-| `ui`     | `packages/timo-design-system/**` 변경                                        |
-| `root`   | 루트 설정 파일 (`turbo.json`, `pnpm-workspace.yaml`, 루트 `package.json` 등) |
-| `config` | `packages/eslint-config/**`, `packages/typescript-config/**` 변경            |
+| 스코프   | 기준                                                                                             |
+| -------- | ------------------------------------------------------------------------------------------------ |
+| `web`    | `apps/timo-web/**` 변경                                                                          |
+| `ui`     | `packages/timo-design-system/**` 변경                                                            |
+| `root`   | 루트 설정 파일 (`turbo.json`, `pnpm-workspace.yaml`, 루트 `package.json` 등)                     |
+| `config` | `packages/eslint-config/**`, `packages/typescript-config/**`, `packages/tailwind-config/**` 변경 |
 
 ## 커밋 형식
 
diff --git a/docs/design/tokens.md b/docs/design/tokens.md
index 30760170..ee37d89c 100644
--- a/docs/design/tokens.md
+++ b/docs/design/tokens.md
@@ -48,9 +48,10 @@ Tailwind 클래스 사용 예: `bg-timo-blue-50`, `text-timo-gray-900`
 
 ### Base
 
-| 토큰         | CSS 변수             | 값        |
-| ------------ | -------------------- | --------- |
-| `timo-black` | `--color-timo-black` | `#121212` |
+| 토큰           | CSS 변수               | 값                 |
+| -------------- | ---------------------- | ------------------ |
+| `timo-black`   | `--color-timo-black`   | `#121212`          |
+| `timo-overlay` | `--color-timo-overlay` | `rgb(0 0 0 / 10%)` |
 
 ## Typography
 
@@ -94,3 +95,33 @@ Tailwind 클래스 사용 예: `typo-headline-b-24`, `typo-body-r-12`
 | 토큰           | 클래스              | 크기 | 굵기 |
 | -------------- | ------------------- | ---- | ---- |
 | `caption-r-10` | `typo-caption-r-10` | 10px | 400  |
+
+## Radius
+
+소스: `packages/tailwind-config/tokens/radius.css`  
+Tailwind 클래스 사용 예: `rounded-4`, `rounded-8`, `rounded-12`
+
+| 토큰        | CSS 변수      | 값     |
+| ----------- | ------------- | ------ |
+| `radius-4`  | `--radius-4`  | `4px`  |
+| `radius-8`  | `--radius-8`  | `8px`  |
+| `radius-12` | `--radius-12` | `12px` |
+
+## Shadow
+
+소스: `packages/tailwind-config/theme.css`  
+Tailwind 클래스 사용 예: `shadow-timo`
+
+| 토큰          | CSS 변수        | 값                                    |
+| ------------- | --------------- | ------------------------------------- |
+| `shadow-timo` | `--shadow-timo` | `0px 0px 3px 0px rgba(0, 0, 0, 0.12)` |
+
+## Z-Index
+
+소스: `packages/tailwind-config/theme.css`  
+모달 오버레이·패널이 겹칠 때 스택 순서를 고정하기 위한 토큰입니다.
+
+| 토큰                    | CSS 변수                  | 값   |
+| ----------------------- | ------------------------- | ---- |
+| `z-index-modal-overlay` | `--z-index-modal-overlay` | `40` |
+| `z-index-modal-panel`   | `--z-index-modal-panel`   | `50` |

From e5073a253d7f3e4459252412adb4fbed5249042f Mon Sep 17 00:00:00 2001
From: jjangminii <wjdals030328@catholic.ac.kr>
Date: Wed, 15 Jul 2026 13:31:54 +0900
Subject: [PATCH 70/75] =?UTF-8?q?fix(web):=20=EB=A6=AC=EC=B9=98=20?=
 =?UTF-8?q?=ED=85=8D=EC=8A=A4=ED=8A=B8=20=ED=83=9C=EA=B7=B8=EA=B0=80=20?=
 =?UTF-8?q?=ED=8F=AC=ED=95=A8=EB=90=9C=20=EB=B2=88=EC=97=AD=20=EB=AC=B8?=
 =?UTF-8?q?=EC=9E=90=EC=97=B4=EC=9D=98=20=ED=8F=AC=EB=A7=B7=ED=8C=85=20?=
 =?UTF-8?q?=EC=97=90=EB=9F=AC=EB=A5=BC=20=EC=88=98=EC=A0=95=ED=95=9C?=
 =?UTF-8?q?=EB=8B=A4=20(#213)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- withdrawConfirmTitle을 plain t() 대신 t.markup()으로 호출해 red 태그 미제공 에러를 해결했습니다
- 실사용처가 없는 logoutConfirmTitle 필드를 훅과 타입에서 제거했습니다
---
 .../withdrawal/SettingsWithdrawModalContainer.tsx  | 14 +++++---------
 .../_hooks/account/use-settings-profile-labels.ts  |  1 -
 .../(main)/settings/_types/account/profile-type.ts |  1 -
 3 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/apps/timo-web/app/[locale]/(main)/settings/_containers/withdrawal/SettingsWithdrawModalContainer.tsx b/apps/timo-web/app/[locale]/(main)/settings/_containers/withdrawal/SettingsWithdrawModalContainer.tsx
index fe45e6bf..9becd317 100644
--- a/apps/timo-web/app/[locale]/(main)/settings/_containers/withdrawal/SettingsWithdrawModalContainer.tsx
+++ b/apps/timo-web/app/[locale]/(main)/settings/_containers/withdrawal/SettingsWithdrawModalContainer.tsx
@@ -27,7 +27,9 @@ export const SettingsWithdrawModalContainer = ({
       isOpen={isOpen}
       onClose={onClose}
       onExited={onExited}
-      ariaLabel={t("withdrawConfirmTitle")}
+      ariaLabel={t.markup("withdrawConfirmTitle", {
+        red: (chunks) => chunks,
+      })}
       className="w-100 p-5.5"
     >
       <div className="mb-4 size-10 shrink-0">
@@ -35,20 +37,14 @@ export const SettingsWithdrawModalContainer = ({
       </div>
       <p className="typo-headline-b-18 text-timo-black">
         {t.rich("withdrawConfirmTitle", {
-          red: (chunks) => (
-            <span className="text-timo-red">{chunks}</span>
-          ),
+          red: (chunks) => <span className="text-timo-red">{chunks}</span>,
         })}
       </p>
       <p className="typo-headline-r-14 text-timo-gray-900 mt-1">
         {t("withdrawConfirmDescription")}
       </p>
       <div className="mt-6 flex w-full gap-3">
-        <ModalButton
-          variant="border"
-          className="flex-1 px-0"
-          onClick={onClose}
-        >
+        <ModalButton variant="border" className="flex-1 px-0" onClick={onClose}>
           {t("withdrawConfirmCancel")}
         </ModalButton>
         <ModalButton
diff --git a/apps/timo-web/app/[locale]/(main)/settings/_hooks/account/use-settings-profile-labels.ts b/apps/timo-web/app/[locale]/(main)/settings/_hooks/account/use-settings-profile-labels.ts
index 6915731b..3715772a 100644
--- a/apps/timo-web/app/[locale]/(main)/settings/_hooks/account/use-settings-profile-labels.ts
+++ b/apps/timo-web/app/[locale]/(main)/settings/_hooks/account/use-settings-profile-labels.ts
@@ -29,7 +29,6 @@ export const useSettingsProfileLabels = (): SettingsProfileLabels => {
     ),
     tagDeleteConfirmCancel: tSettings("profile.tagDeleteConfirmCancel"),
     tagDeleteConfirmConfirm: tSettings("profile.tagDeleteConfirmConfirm"),
-    logoutConfirmTitle: tSettings("profile.logoutConfirmTitle"),
     logoutConfirmDescription: tSettings("profile.logoutConfirmDescription"),
     logoutConfirmCancel: tSettings("profile.logoutConfirmCancel"),
     logoutConfirmConfirm: tSettings("profile.logoutConfirmConfirm"),
diff --git a/apps/timo-web/app/[locale]/(main)/settings/_types/account/profile-type.ts b/apps/timo-web/app/[locale]/(main)/settings/_types/account/profile-type.ts
index e5202756..0d16762e 100644
--- a/apps/timo-web/app/[locale]/(main)/settings/_types/account/profile-type.ts
+++ b/apps/timo-web/app/[locale]/(main)/settings/_types/account/profile-type.ts
@@ -26,7 +26,6 @@ export interface SettingsProfileLabels {
   tagDeleteConfirmDescription: string;
   tagDeleteConfirmCancel: string;
   tagDeleteConfirmConfirm: string;
-  logoutConfirmTitle: string;
   logoutConfirmDescription: string;
   logoutConfirmCancel: string;
   logoutConfirmConfirm: string;

From 2b9cc889e2eea0e70b9e228fb681b55db153e634 Mon Sep 17 00:00:00 2001
From: kimminna <kmina121777@naver.com>
Date: Wed, 15 Jul 2026 14:03:26 +0900
Subject: [PATCH 71/75] =?UTF-8?q?fix(web):=20=EB=A3=A8=ED=8A=B8=20?=
 =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EB=A9=94=ED=83=80?=
 =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=84=B0=EC=97=90=EC=84=9C=20=EA=B2=BD?=
 =?UTF-8?q?=EB=A1=9C=20=EC=A2=85=EC=86=8D=20=ED=95=84=EB=93=9C=EB=A5=BC=20?=
 =?UTF-8?q?=EC=A0=9C=EA=B1=B0=ED=95=9C=EB=8B=A4=20(#215)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- app/[locale]/layout.tsx는 locale 세그먼트까지의 params만 받아 하위 경로를 알 수 없는데도, alternates.canonical/languages와 openGraph.url을 항상 locale 루트 경로로 고정해 모든 하위 라우트가 홈 URL을 상속했습니다.
- 경로 종속 필드를 제거하고, locale에만 의존하는 openGraph 필드(type, siteName, title, description, locale, alternateLocale)는 유지했습니다.
---
 apps/timo-web/app/[locale]/layout.tsx | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/apps/timo-web/app/[locale]/layout.tsx b/apps/timo-web/app/[locale]/layout.tsx
index 18af4e77..8f27108d 100644
--- a/apps/timo-web/app/[locale]/layout.tsx
+++ b/apps/timo-web/app/[locale]/layout.tsx
@@ -58,17 +58,8 @@ export async function generateMetadata({
     icons: {
       icon: "/favicon.png",
     },
-    alternates: {
-      canonical: `/${locale}`,
-      languages: {
-        en: "/en",
-        ko: "/ko",
-        "x-default": `/${routing.defaultLocale}`,
-      },
-    },
     openGraph: {
       type: "website",
-      url: `/${locale}`,
       siteName: title,
       title,
       description,

From 61acec5ec81a2f128633d9e49f3be72b6973c1e9 Mon Sep 17 00:00:00 2001
From: kimminna <kmina121777@naver.com>
Date: Wed, 15 Jul 2026 14:04:27 +0900
Subject: [PATCH 72/75] =?UTF-8?q?feat(web):=20=EC=9D=B8=EC=A6=9D=20?=
 =?UTF-8?q?=EB=9D=BC=EC=9A=B0=ED=8A=B8=20=EA=B7=B8=EB=A3=B9=EC=9D=84=20?=
 =?UTF-8?q?=EB=B9=84=EA=B3=B5=EA=B0=9C=20=EC=B2=98=EB=A6=AC=ED=95=98?=
 =?UTF-8?q?=EA=B3=A0=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=C2=B7=EC=95=BD=EA=B4=80?=
 =?UTF-8?q?=20=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90=20=EB=A9=94=ED=83=80?=
 =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=84=B0=EB=A5=BC=20=EC=B6=94=EA=B0=80?=
 =?UTF-8?q?=ED=95=9C=EB=8B=A4=20(#215)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- (main) 라우트 그룹은 AuthGuardProvider로 로그인이 필요한 개인화 화면이라 robots.index/follow를 false로 설정해 검색 엔진 노출에서 제외했습니다.
- 로그인 페이지에 generateMetadata를 추가해 로케일별 title/description과 경로 고유 canonical(/{locale}/login)을 설정했습니다. messages의 Login 네임스페이스에 title 키를 새로 추가했습니다.
- 약관 페이지에 generateMetadata를 추가해 type 쿼리 파라미터(SERVICE/PRIVACY)에 따라 기존 Settings.nav.policy/privacy 문자열을 재사용한 제목과 경로 고유 canonical(/{locale}/policy)을 설정했습니다.
---
 apps/timo-web/app/[locale]/(main)/layout.tsx |  9 ++++++
 apps/timo-web/app/[locale]/login/page.tsx    | 31 ++++++++++++++++++++
 apps/timo-web/app/[locale]/policy/page.tsx   | 31 ++++++++++++++++++++
 apps/timo-web/messages/en.json               |  1 +
 apps/timo-web/messages/ko.json               |  1 +
 5 files changed, 73 insertions(+)

diff --git a/apps/timo-web/app/[locale]/(main)/layout.tsx b/apps/timo-web/app/[locale]/(main)/layout.tsx
index e6a6086f..88d9c6b0 100644
--- a/apps/timo-web/app/[locale]/(main)/layout.tsx
+++ b/apps/timo-web/app/[locale]/(main)/layout.tsx
@@ -1,6 +1,15 @@
+import type { Metadata } from "next";
+
 import { MainShellContainer } from "@/app/[locale]/(main)/_containers/MainShellContainer";
 import { AuthGuardProvider } from "@/providers/auth/AuthGuardProvider";
 
+export const metadata: Metadata = {
+  robots: {
+    index: false,
+    follow: false,
+  },
+};
+
 interface MainLayoutProps {
   children: React.ReactNode;
 }
diff --git a/apps/timo-web/app/[locale]/login/page.tsx b/apps/timo-web/app/[locale]/login/page.tsx
index bdb5f78e..bdfda844 100644
--- a/apps/timo-web/app/[locale]/login/page.tsx
+++ b/apps/timo-web/app/[locale]/login/page.tsx
@@ -1,6 +1,37 @@
+import { notFound } from "next/navigation";
+import { hasLocale } from "next-intl";
+import { getTranslations } from "next-intl/server";
+
+import type { Metadata } from "next";
+
 import { LoginContainer } from "@/app/[locale]/login/_containers/LoginContainer";
+import { routing } from "@/i18n/routing";
 import { GuestGuardProvider } from "@/providers/auth/GuestGuardProvider";
 
+interface LoginPageProps {
+  params: Promise<{ locale: string }>;
+}
+
+export async function generateMetadata({
+  params,
+}: LoginPageProps): Promise<Metadata> {
+  const { locale } = await params;
+
+  if (!hasLocale(routing.locales, locale)) {
+    notFound();
+  }
+
+  const t = await getTranslations({ locale, namespace: "Login" });
+
+  return {
+    title: t("title"),
+    description: t("description"),
+    alternates: {
+      canonical: `/${locale}/login`,
+    },
+  };
+}
+
 export default function LoginPage() {
   return (
     <GuestGuardProvider>
diff --git a/apps/timo-web/app/[locale]/policy/page.tsx b/apps/timo-web/app/[locale]/policy/page.tsx
index b3169765..2366061b 100644
--- a/apps/timo-web/app/[locale]/policy/page.tsx
+++ b/apps/timo-web/app/[locale]/policy/page.tsx
@@ -1,16 +1,47 @@
 import timoTextLogo from "@repo/timo-design-system/assets/images/logo/timo-text-logo.svg";
 import Image from "next/image";
+import { notFound } from "next/navigation";
+import { hasLocale } from "next-intl";
+import { getTranslations } from "next-intl/server";
+
+import type { Metadata } from "next";
 
 import { PolicyContainer } from "@/app/[locale]/policy/_containers/PolicyContainer";
 import { AsyncBoundary } from "@/components/boundary/AsyncBoundary";
 import { ROUTES } from "@/constants/routes";
 import { Link } from "@/i18n/navigation";
+import { routing } from "@/i18n/routing";
 import { termsTypeSchema } from "@/types/terms-type";
 
 interface PolicyPageProps {
+  params: Promise<{ locale: string }>;
   searchParams: Promise<{ type?: string }>;
 }
 
+export async function generateMetadata({
+  params,
+  searchParams,
+}: PolicyPageProps): Promise<Metadata> {
+  const { locale } = await params;
+
+  if (!hasLocale(routing.locales, locale)) {
+    notFound();
+  }
+
+  const { type } = await searchParams;
+  const parsedType = termsTypeSchema.safeParse(type);
+  const isPrivacy = parsedType.success && parsedType.data === "PRIVACY";
+
+  const t = await getTranslations({ locale, namespace: "Settings" });
+
+  return {
+    title: isPrivacy ? t("nav.privacy") : t("nav.policy"),
+    alternates: {
+      canonical: `/${locale}/policy`,
+    },
+  };
+}
+
 export default async function PolicyPage({ searchParams }: PolicyPageProps) {
   const { type } = await searchParams;
   const parsedType = termsTypeSchema.safeParse(type);
diff --git a/apps/timo-web/messages/en.json b/apps/timo-web/messages/en.json
index e8851411..31a48364 100644
--- a/apps/timo-web/messages/en.json
+++ b/apps/timo-web/messages/en.json
@@ -152,6 +152,7 @@
     "timerStartFailed": "This to-do has no estimated duration set."
   },
   "Login": {
+    "title": "Log in",
     "animationLabel": "Login animation",
     "headline": "Manage your day with clear timeboxes.",
     "description": "Please log in to your timo account.",
diff --git a/apps/timo-web/messages/ko.json b/apps/timo-web/messages/ko.json
index f3bc12bd..32c8bf08 100644
--- a/apps/timo-web/messages/ko.json
+++ b/apps/timo-web/messages/ko.json
@@ -152,6 +152,7 @@
     "timerStartFailed": "예상 소요 시간이 설정되지 않은 투두입니다."
   },
   "Login": {
+    "title": "로그인",
     "animationLabel": "로그인 애니메이션",
     "headline": "흩어진 시간을, 실행 가능한 흐름으로.",
     "description": "timo 계정에 로그인하세요.",

From bcb3be51b423bddaff80af65e44a0f716363abdb Mon Sep 17 00:00:00 2001
From: kimminna <kmina121777@naver.com>
Date: Wed, 15 Jul 2026 15:16:00 +0900
Subject: [PATCH 73/75] =?UTF-8?q?refactor(web):=20=ED=8F=B4=EB=8D=94=20?=
 =?UTF-8?q?=EA=B5=AC=EC=A1=B0=20=EC=9E=AC=EC=A0=95=EB=A6=AC=20=EB=B0=8F=20?=
 =?UTF-8?q?=EC=BF=BC=EB=A6=AC/=EB=AE=A4=ED=85=8C=EC=9D=B4=EC=85=98=20?=
 =?UTF-8?q?=ED=9B=85=20=EB=84=A4=EC=9D=B4=EB=B0=8D=20=EC=BB=A8=EB=B2=A4?=
 =?UTF-8?q?=EC=85=98=20=EC=A0=81=EC=9A=A9=20(#217)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- api/common, types/, hooks/ 루트에 흩어져 있던 스키마·타입·훅을 도메인별 폴더로 이동했습니다
- 폴더 이동으로 깨진 import 경로를 전체 수정했습니다
- 쿼리/뮤테이션 훅 11개의 파일명·함수명을 -query/-mutation, ~Query/~Mutation 컨벤션으로 통일했습니다
---
 .../home/_containers/HomeTodoContainer.tsx    |  4 ++--
 .../home/_hooks/use-home-todos-by-date.ts     |  4 ++--
 ...se-home-view.ts => use-home-view-query.ts} |  2 +-
 .../home/_types/home-view-type.ts             |  2 +-
 .../home/_types/todo-type.ts                  |  4 ++--
 .../today/_components/TodayTodoCard.tsx       |  0
 .../_containers/TodayTodoCardContainer.tsx    |  4 ++--
 .../_containers/TodayTodoListContainer.tsx    |  4 ++--
 .../todo-modal/use-create-todo-submit.ts      |  2 +-
 .../today/_hooks/useTodayTodoList.ts          |  4 ++--
 .../{use-today.ts => use-today-query.ts}      |  2 +-
 .../today/_types/today-type.ts                |  2 +-
 .../(main)/focus/_hooks/use-focus-session.ts  | 12 +++++-----
 ...-focus-todo.ts => use-focus-todo-query.ts} |  2 +-
 .../terms/SettingsTermsContainer.tsx          |  6 ++---
 .../SettingsWithdrawalContainer.tsx           |  4 ++--
 .../_hooks/account/use-settings-profile.ts    | 22 +++++++++----------
 .../{use-logout.ts => use-logout-mutation.ts} |  2 +-
 ...e-withdraw.ts => use-withdraw-mutation.ts} |  2 +-
 .../StatisticsCalendarContainer.tsx           |  2 +-
 .../_containers/StatisticsContainer.tsx       |  2 +-
 ...ics-queries.ts => use-statistics-query.ts} |  0
 apps/timo-web/app/[locale]/layout.tsx         |  2 +-
 .../policy/_containers/PolicyContainer.tsx    |  6 ++---
 apps/timo-web/app/[locale]/policy/page.tsx    |  2 +-
 .../layout/sidebar/time/TimeboxPanel.tsx      |  6 ++---
 .../layout/sidebar/time/TimerPanel.tsx        |  8 +++----
 .../create/CreateTodoModalContent.tsx         |  4 ++--
 .../create/CreateTodoModalContainer.tsx       |  2 +-
 .../detail/DetailTodoModalContainer.tsx       |  2 +-
 .../hooks/{ => timer}/use-active-timer.ts     |  2 +-
 .../hooks/{ => timer}/use-timer-actions.ts    |  2 +-
 .../hooks/{ => timer}/use-timer-overtime.ts   |  2 +-
 .../use-timer-query-invalidation.ts           |  0
 .../hooks/todo-modal/common/use-tag-field.tsx | 10 ++++-----
 .../create/use-create-todo-submit.ts          |  4 ++--
 .../hooks/todo-modal/create/use-icon-field.ts |  2 +-
 .../todo-modal/create/use-repeat-field.ts     |  2 +-
 .../todo-modal/create/use-subtask-field.ts    |  2 +-
 .../hooks/todo-modal/create/use-time-field.ts |  4 ++--
 .../todo-modal/create/use-title-field.ts      |  2 +-
 .../detail/use-detail-subtask-field.ts        |  2 +-
 .../providers/locale/LanguageSyncProvider.tsx |  4 ++--
 .../{ => overlay}/OverlayProvider.tsx         |  0
 .../use-my-profile-query.ts}                  |  4 ++--
 .../use-terms-query.ts}                       |  7 ++++--
 ...eate-tag.ts => use-create-tag-mutation.ts} |  2 +-
 ...lete-tag.ts => use-delete-tag-mutation.ts} |  2 +-
 .../tag/{use-tags.ts => use-tags-query.ts}    |  4 ++--
 .../use-time-boxes-query.ts}                  |  4 ++--
 .../auth/user-profile-schema.ts}              |  0
 .../settings/terms-schema.ts}                 |  0
 .../{api/common => schemas/tag}/tag-schema.ts |  0
 .../timebox/timebox-schema.ts}                |  0
 .../timer/timer-schema.ts}                    |  0
 .../common => schemas/todo}/todo-schema.ts    |  0
 56 files changed, 92 insertions(+), 89 deletions(-)
 rename apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_queries/{use-home-view.ts => use-home-view-query.ts} (88%)
 rename apps/timo-web/app/[locale]/(main)/{ => (with-time-sidebar)}/today/_components/TodayTodoCard.tsx (100%)
 rename apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_queries/{use-today.ts => use-today-query.ts} (92%)
 rename apps/timo-web/app/[locale]/(main)/focus/_queries/{use-focus-todo.ts => use-focus-todo-query.ts} (91%)
 rename apps/timo-web/app/[locale]/(main)/settings/_queries/account/{use-logout.ts => use-logout-mutation.ts} (90%)
 rename apps/timo-web/app/[locale]/(main)/settings/_queries/withdrawal/{use-withdraw.ts => use-withdraw-mutation.ts} (89%)
 rename apps/timo-web/app/[locale]/(main)/statistics/_queries/{statistics-queries.ts => use-statistics-query.ts} (100%)
 rename apps/timo-web/hooks/{ => timer}/use-active-timer.ts (95%)
 rename apps/timo-web/hooks/{ => timer}/use-timer-actions.ts (97%)
 rename apps/timo-web/hooks/{ => timer}/use-timer-overtime.ts (93%)
 rename apps/timo-web/hooks/{ => timer}/use-timer-query-invalidation.ts (100%)
 rename apps/timo-web/providers/{ => overlay}/OverlayProvider.tsx (100%)
 rename apps/timo-web/queries/{use-my-profile.ts => auth/use-my-profile-query.ts} (82%)
 rename apps/timo-web/queries/{use-terms.ts => settings/use-terms-query.ts} (82%)
 rename apps/timo-web/queries/tag/{use-create-tag.ts => use-create-tag-mutation.ts} (92%)
 rename apps/timo-web/queries/tag/{use-delete-tag.ts => use-delete-tag-mutation.ts} (90%)
 rename apps/timo-web/queries/tag/{use-tags.ts => use-tags-query.ts} (65%)
 rename apps/timo-web/queries/{use-time-boxes.ts => time-box/use-time-boxes-query.ts} (75%)
 rename apps/timo-web/{types/user-profile-type.ts => schemas/auth/user-profile-schema.ts} (100%)
 rename apps/timo-web/{types/terms-type.ts => schemas/settings/terms-schema.ts} (100%)
 rename apps/timo-web/{api/common => schemas/tag}/tag-schema.ts (100%)
 rename apps/timo-web/{types/timebox-type.ts => schemas/timebox/timebox-schema.ts} (100%)
 rename apps/timo-web/{types/timer-type.ts => schemas/timer/timer-schema.ts} (100%)
 rename apps/timo-web/{api/common => schemas/todo}/todo-schema.ts (100%)

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 2ff607d1..e0aae773 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
@@ -14,7 +14,7 @@ import {
 } 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 { useHomeViewQuery } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_queries/use-home-view-query";
 import { AnimatedToast } from "@/components/toast/AnimatedToast";
 import { StopCompleteModalContainer } from "@/containers/timer/StopCompleteModalContainer";
 import { DetailTodoModalContainer } from "@/containers/todo-modal/detail/DetailTodoModalContainer";
@@ -39,7 +39,7 @@ export const HomeTodoContainer = () => {
   const filter: HomeViewFilter = isWeekView ? "WEEK" : "DEFAULT";
   const baseDate = formatDateKey(referenceDate);
 
-  const { data: homeViewData } = useHomeView({ filter, baseDate });
+  const { data: homeViewData } = useHomeViewQuery({ filter, baseDate });
   const days = homeViewData.days;
 
   const [pendingCompleteTodo, setPendingCompleteTodo] =
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 f378ecf4..fff1170b 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
@@ -20,8 +20,8 @@ import {
   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 { useActiveTimer } from "@/hooks/timer/use-active-timer";
+import { useTimerQueryInvalidation } from "@/hooks/timer/use-timer-query-invalidation";
 import { useTimeSidebarStore } from "@/stores/time-sidebar/useTimeSidebarStore";
 
 export interface UseHomeTodosByDateOptions {
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_queries/use-home-view.ts b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_queries/use-home-view-query.ts
similarity index 88%
rename from apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_queries/use-home-view.ts
rename to apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_queries/use-home-view-query.ts
index bcc2a2bf..84cb7a82 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_queries/use-home-view.ts
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_queries/use-home-view-query.ts
@@ -10,7 +10,7 @@ import {
 } from "@/api/generated/endpoints/home/home";
 import { homeViewDataSchema } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_types/home-view-type";
 
-export const useHomeView = ({ filter, baseDate }: GetHomeViewParams) =>
+export const useHomeViewQuery = ({ filter, baseDate }: GetHomeViewParams) =>
   useSuspenseQuery({
     queryKey: getGetHomeQueryKey({ filter, baseDate }),
     queryFn: ({ signal }) => getHome({ filter, baseDate }, undefined, signal),
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_types/home-view-type.ts b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_types/home-view-type.ts
index 0c31e4ab..ef475f0e 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_types/home-view-type.ts
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_types/home-view-type.ts
@@ -1,6 +1,6 @@
 import { z } from "zod";
 
-import { dayOfWeekSchema, todoSchema } from "@/api/common/todo-schema";
+import { dayOfWeekSchema, todoSchema } from "@/schemas/todo/todo-schema";
 
 export const homeViewFilterSchema = z.enum(["DEFAULT", "WEEK"]);
 
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_types/todo-type.ts b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_types/todo-type.ts
index 39f62e0a..fd452115 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_types/todo-type.ts
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_types/todo-type.ts
@@ -5,7 +5,7 @@ export {
   todoSubtaskSchema,
   todoSchema,
   todoCreateResponseSchema,
-} from "@/api/common/todo-schema";
+} from "@/schemas/todo/todo-schema";
 
 export type {
   TodoPriorityTypes,
@@ -14,4 +14,4 @@ export type {
   TodoSubtask,
   Todo,
   TodoCreateResponseData,
-} from "@/api/common/todo-schema";
+} from "@/schemas/todo/todo-schema";
diff --git a/apps/timo-web/app/[locale]/(main)/today/_components/TodayTodoCard.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_components/TodayTodoCard.tsx
similarity index 100%
rename from apps/timo-web/app/[locale]/(main)/today/_components/TodayTodoCard.tsx
rename to apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_components/TodayTodoCard.tsx
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 e18a965e..6331215b 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,14 +2,14 @@
 
 import { useEffect, useState } from "react";
 
-import type { TodoTimerStatusTypes } from "@/api/common/todo-schema";
+import type { TodoTimerStatusTypes } from "@/schemas/todo/todo-schema";
 import type { ReactNode } from "react";
 
 import {
   TodayTodoCard,
   type SubTodo,
   type TodayTodoCardToolbar,
-} from "@/app/[locale]/(main)/today/_components/TodayTodoCard";
+} from "@/app/[locale]/(main)/(with-time-sidebar)/today/_components/TodayTodoCard";
 
 export interface TodayTodoCardContainerProps {
   title: string;
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 2b030845..63646197 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
@@ -9,7 +9,7 @@ import type { TodoIconValue } from "@repo/timo-design-system/ui";
 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 { useTodayQuery } from "@/app/[locale]/(main)/(with-time-sidebar)/today/_queries/use-today-query";
 import { AnimatedToast } from "@/components/toast/AnimatedToast";
 import { StopCompleteModalContainer } from "@/containers/timer/StopCompleteModalContainer";
 import { DetailTodoModalContainer } from "@/containers/todo-modal/detail/DetailTodoModalContainer";
@@ -30,7 +30,7 @@ const renderTodoIcon = (icon: string | undefined) => {
 
 export const TodayTodoListContainer = () => {
   const tToast = useTranslations("Toast");
-  const { data } = useToday();
+  const { data } = useTodayQuery();
 
   const [pendingCompleteTodoId, setPendingCompleteTodoId] = useState<
     number | null
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_hooks/todo-modal/use-create-todo-submit.ts b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_hooks/todo-modal/use-create-todo-submit.ts
index dce36148..f3ce6441 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_hooks/todo-modal/use-create-todo-submit.ts
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_hooks/todo-modal/use-create-todo-submit.ts
@@ -3,8 +3,8 @@
 import { useQueryClient } from "@tanstack/react-query";
 import { useState } from "react";
 
-import type { CreateTodoRequest } from "@/api/common/todo-schema";
 import type { TodoCreateRequest } from "@/api/generated/models";
+import type { CreateTodoRequest } from "@/schemas/todo/todo-schema";
 
 import { getGetTodayQueryKey } from "@/api/generated/endpoints/home/home";
 import { useCreateTodo } from "@/api/generated/endpoints/todo/todo";
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 835b1fd2..b4b49af2 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
@@ -18,8 +18,8 @@ import {
   useChangeSubtaskStatus,
   useChangeTodoStatus,
 } from "@/api/generated/endpoints/todo/todo";
-import { useActiveTimer } from "@/hooks/use-active-timer";
-import { useTimerQueryInvalidation } from "@/hooks/use-timer-query-invalidation";
+import { useActiveTimer } from "@/hooks/timer/use-active-timer";
+import { useTimerQueryInvalidation } from "@/hooks/timer/use-timer-query-invalidation";
 import { useTimeSidebarStore } from "@/stores/time-sidebar/useTimeSidebarStore";
 
 export interface UseTodayTodoListOptions {
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_queries/use-today.ts b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_queries/use-today-query.ts
similarity index 92%
rename from apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_queries/use-today.ts
rename to apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_queries/use-today-query.ts
index 4e92c6e8..31d93cae 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_queries/use-today.ts
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_queries/use-today-query.ts
@@ -8,7 +8,7 @@ import {
 } from "@/api/generated/endpoints/home/home";
 import { todayDataSchema } from "@/app/[locale]/(main)/(with-time-sidebar)/today/_types/today-type";
 
-export const useToday = () =>
+export const useTodayQuery = () =>
   useSuspenseQuery({
     queryKey: getGetTodayQueryKey(),
     queryFn: ({ signal }) => getToday(undefined, signal),
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_types/today-type.ts b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_types/today-type.ts
index 266e4547..8d0beed4 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_types/today-type.ts
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_types/today-type.ts
@@ -1,6 +1,6 @@
 import { z } from "zod";
 
-import { dayOfWeekSchema, todoSchema } from "@/api/common/todo-schema";
+import { dayOfWeekSchema, todoSchema } from "@/schemas/todo/todo-schema";
 
 export const todayTodoSchema = todoSchema.extend({
   date: z.string(),
diff --git a/apps/timo-web/app/[locale]/(main)/focus/_hooks/use-focus-session.ts b/apps/timo-web/app/[locale]/(main)/focus/_hooks/use-focus-session.ts
index ea734b1c..60ccb1fe 100644
--- a/apps/timo-web/app/[locale]/(main)/focus/_hooks/use-focus-session.ts
+++ b/apps/timo-web/app/[locale]/(main)/focus/_hooks/use-focus-session.ts
@@ -17,12 +17,12 @@ import {
   useChangeSubtaskStatus,
   useChangeTodoStatus,
 } from "@/api/generated/endpoints/todo/todo";
-import { useFocusTodo } from "@/app/[locale]/(main)/focus/_queries/use-focus-todo";
+import { useFocusTodoQuery } from "@/app/[locale]/(main)/focus/_queries/use-focus-todo-query";
 import { convertDateToBadgeText } from "@/app/[locale]/(main)/focus/_utils/date";
-import { useActiveTimer } from "@/hooks/use-active-timer";
-import { useTimerActions } from "@/hooks/use-timer-actions";
-import { useTimerOvertime } from "@/hooks/use-timer-overtime";
-import { useTimerQueryInvalidation } from "@/hooks/use-timer-query-invalidation";
+import { useActiveTimer } from "@/hooks/timer/use-active-timer";
+import { useTimerActions } from "@/hooks/timer/use-timer-actions";
+import { useTimerOvertime } from "@/hooks/timer/use-timer-overtime";
+import { useTimerQueryInvalidation } from "@/hooks/timer/use-timer-query-invalidation";
 import { convertDurationToMinutes } from "@/utils/duration/convert-duration-to-minutes";
 
 export interface UseFocusSessionOptions {
@@ -38,7 +38,7 @@ export const useFocusSession = ({
   const timerSessionControlsRef = useRef<TimerSessionControlsHandle>(null);
   const wasTimeUpRef = useRef(false);
 
-  const { data: focusView } = useFocusTodo();
+  const { data: focusView } = useFocusTodoQuery();
   const { data: activeTimer } = useActiveTimer();
 
   const { invalidateActiveTimer, invalidateHomeView, invalidateTimeBoxes } =
diff --git a/apps/timo-web/app/[locale]/(main)/focus/_queries/use-focus-todo.ts b/apps/timo-web/app/[locale]/(main)/focus/_queries/use-focus-todo-query.ts
similarity index 91%
rename from apps/timo-web/app/[locale]/(main)/focus/_queries/use-focus-todo.ts
rename to apps/timo-web/app/[locale]/(main)/focus/_queries/use-focus-todo-query.ts
index bb81c876..d0329ca0 100644
--- a/apps/timo-web/app/[locale]/(main)/focus/_queries/use-focus-todo.ts
+++ b/apps/timo-web/app/[locale]/(main)/focus/_queries/use-focus-todo-query.ts
@@ -8,7 +8,7 @@ import {
 } from "@/api/generated/endpoints/focus/focus";
 import { focusViewSchema } from "@/app/[locale]/(main)/focus/_types/task-type";
 
-export const useFocusTodo = () =>
+export const useFocusTodoQuery = () =>
   useSuspenseQuery({
     queryKey: getGetFocusTodoQueryKey(),
     queryFn: ({ signal }) => getFocusTodo(undefined, signal),
diff --git a/apps/timo-web/app/[locale]/(main)/settings/_containers/terms/SettingsTermsContainer.tsx b/apps/timo-web/app/[locale]/(main)/settings/_containers/terms/SettingsTermsContainer.tsx
index e8948d7c..518bb679 100644
--- a/apps/timo-web/app/[locale]/(main)/settings/_containers/terms/SettingsTermsContainer.tsx
+++ b/apps/timo-web/app/[locale]/(main)/settings/_containers/terms/SettingsTermsContainer.tsx
@@ -2,10 +2,10 @@
 
 import { useTranslations } from "next-intl";
 
-import type { TermsType } from "@/types/terms-type";
+import type { TermsType } from "@/schemas/settings/terms-schema";
 
 import { PolicyDocument } from "@/components/policy/PolicyDocument";
-import { useTerms } from "@/queries/use-terms";
+import { useTermsQuery } from "@/queries/settings/use-terms-query";
 
 export interface SettingsTermsContainerProps {
   type: TermsType;
@@ -15,7 +15,7 @@ export const SettingsTermsContainer = ({
   type,
 }: SettingsTermsContainerProps) => {
   const t = useTranslations("Policy");
-  const { data: term } = useTerms(type);
+  const { data: term } = useTermsQuery(type);
 
   return (
     <div className="px-15 pt-7.5">
diff --git a/apps/timo-web/app/[locale]/(main)/settings/_containers/withdrawal/SettingsWithdrawalContainer.tsx b/apps/timo-web/app/[locale]/(main)/settings/_containers/withdrawal/SettingsWithdrawalContainer.tsx
index 0ddec2cd..4b9582cd 100644
--- a/apps/timo-web/app/[locale]/(main)/settings/_containers/withdrawal/SettingsWithdrawalContainer.tsx
+++ b/apps/timo-web/app/[locale]/(main)/settings/_containers/withdrawal/SettingsWithdrawalContainer.tsx
@@ -8,12 +8,12 @@ import type { SettingsWithdrawalLabels } from "@/app/[locale]/(main)/settings/_t
 
 import { SettingsWithdrawalView } from "@/app/[locale]/(main)/settings/_components/withdrawal/SettingsWithdrawalView";
 import { SettingsWithdrawModalContainer } from "@/app/[locale]/(main)/settings/_containers/withdrawal/SettingsWithdrawModalContainer";
-import { useWithdrawAction } from "@/app/[locale]/(main)/settings/_queries/withdrawal/use-withdraw";
+import { useWithdrawMutation } from "@/app/[locale]/(main)/settings/_queries/withdrawal/use-withdraw-mutation";
 import { AnimatedToast } from "@/components/toast/AnimatedToast";
 
 export const SettingsWithdrawalContainer = () => {
   const t = useTranslations("Settings.withdrawal");
-  const { mutate: withdrawMutate, isPending } = useWithdrawAction();
+  const { mutate: withdrawMutate, isPending } = useWithdrawMutation();
   const [isErrorToastOpen, setIsErrorToastOpen] = useState(false);
 
   const labels: SettingsWithdrawalLabels = {
diff --git a/apps/timo-web/app/[locale]/(main)/settings/_hooks/account/use-settings-profile.ts b/apps/timo-web/app/[locale]/(main)/settings/_hooks/account/use-settings-profile.ts
index 997fecfe..d39378c0 100644
--- a/apps/timo-web/app/[locale]/(main)/settings/_hooks/account/use-settings-profile.ts
+++ b/apps/timo-web/app/[locale]/(main)/settings/_hooks/account/use-settings-profile.ts
@@ -5,18 +5,18 @@ import { useTranslations } from "next-intl";
 
 import type { SettingsLanguage } from "@/app/[locale]/(main)/settings/_types/account/profile-type";
 
-import { tagCreateDataSchema } from "@/api/common/tag-schema";
 import {
   getGetMyProfileQueryKey,
   useUpdateLanguage,
 } from "@/api/generated/endpoints/user/user";
 import { UpdateLanguageRequestLanguage } from "@/api/generated/models";
 import { useSettingsLanguageParam } from "@/app/[locale]/(main)/settings/_hooks/account/use-settings-language-param";
-import { useLogoutAction } from "@/app/[locale]/(main)/settings/_queries/account/use-logout";
-import { useCreateTag } from "@/queries/tag/use-create-tag";
-import { useDeleteTag } from "@/queries/tag/use-delete-tag";
-import { useTags } from "@/queries/tag/use-tags";
-import { useMyProfile } from "@/queries/use-my-profile";
+import { useLogoutMutation } from "@/app/[locale]/(main)/settings/_queries/account/use-logout-mutation";
+import { useMyProfileQuery } from "@/queries/auth/use-my-profile-query";
+import { useCreateTagMutation } from "@/queries/tag/use-create-tag-mutation";
+import { useDeleteTagMutation } from "@/queries/tag/use-delete-tag-mutation";
+import { useTagsQuery } from "@/queries/tag/use-tags-query";
+import { tagCreateDataSchema } from "@/schemas/tag/tag-schema";
 import { getDefaultTagLabelKey } from "@/utils/todo/tag-label";
 
 const LANGUAGE_REQUEST_MAP: Record<
@@ -44,15 +44,15 @@ export const useSettingsProfile = () => {
   const { locale, commitLanguage } = useSettingsLanguageParam();
   const tCommon = useTranslations("Common");
 
-  const { data: profile } = useMyProfile();
+  const { data: profile } = useMyProfileQuery();
 
   const { mutateAsync: updateLanguage } = useUpdateLanguage();
   const queryClient = useQueryClient();
 
-  const tagsQuery = useTags();
-  const { mutate: createTag } = useCreateTag();
-  const { mutate: deleteTag } = useDeleteTag();
-  const { mutate: logoutMutate, isPending: isLoggingOut } = useLogoutAction();
+  const tagsQuery = useTagsQuery();
+  const { mutate: createTag } = useCreateTagMutation();
+  const { mutate: deleteTag } = useDeleteTagMutation();
+  const { mutate: logoutMutate, isPending: isLoggingOut } = useLogoutMutation();
 
   const tagItems = (tagsQuery.data?.tags ?? []).map((tag) => {
     const labelKey = tag.isDefault
diff --git a/apps/timo-web/app/[locale]/(main)/settings/_queries/account/use-logout.ts b/apps/timo-web/app/[locale]/(main)/settings/_queries/account/use-logout-mutation.ts
similarity index 90%
rename from apps/timo-web/app/[locale]/(main)/settings/_queries/account/use-logout.ts
rename to apps/timo-web/app/[locale]/(main)/settings/_queries/account/use-logout-mutation.ts
index f2310830..3c7b72dc 100644
--- a/apps/timo-web/app/[locale]/(main)/settings/_queries/account/use-logout.ts
+++ b/apps/timo-web/app/[locale]/(main)/settings/_queries/account/use-logout-mutation.ts
@@ -5,7 +5,7 @@ import { useMutation } from "@tanstack/react-query";
 import { logout } from "@/api/generated/endpoints/auth/auth";
 import { useClearSession } from "@/app/[locale]/(main)/settings/_hooks/use-clear-session";
 
-export const useLogoutAction = () => {
+export const useLogoutMutation = () => {
   const clearSession = useClearSession();
 
   return useMutation({
diff --git a/apps/timo-web/app/[locale]/(main)/settings/_queries/withdrawal/use-withdraw.ts b/apps/timo-web/app/[locale]/(main)/settings/_queries/withdrawal/use-withdraw-mutation.ts
similarity index 89%
rename from apps/timo-web/app/[locale]/(main)/settings/_queries/withdrawal/use-withdraw.ts
rename to apps/timo-web/app/[locale]/(main)/settings/_queries/withdrawal/use-withdraw-mutation.ts
index 5c5ecfde..6dddc62f 100644
--- a/apps/timo-web/app/[locale]/(main)/settings/_queries/withdrawal/use-withdraw.ts
+++ b/apps/timo-web/app/[locale]/(main)/settings/_queries/withdrawal/use-withdraw-mutation.ts
@@ -5,7 +5,7 @@ import { useMutation } from "@tanstack/react-query";
 import { withdraw } from "@/api/generated/endpoints/auth/auth";
 import { useClearSession } from "@/app/[locale]/(main)/settings/_hooks/use-clear-session";
 
-export const useWithdrawAction = () => {
+export const useWithdrawMutation = () => {
   const clearSession = useClearSession();
 
   return useMutation({
diff --git a/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsCalendarContainer.tsx b/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsCalendarContainer.tsx
index 8b640da3..2472c9a5 100644
--- a/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsCalendarContainer.tsx
+++ b/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsCalendarContainer.tsx
@@ -3,7 +3,7 @@
 import { useTranslations } from "next-intl";
 
 import { StatisticsCalendar } from "@/app/[locale]/(main)/statistics/_components/StatisticsCalendar";
-import { useStatisticsCalendarQuery } from "@/app/[locale]/(main)/statistics/_queries/statistics-queries";
+import { useStatisticsCalendarQuery } from "@/app/[locale]/(main)/statistics/_queries/use-statistics-query";
 import { LottiePlayer } from "@/components/lottie/LottiePlayer";
 import { formatDateKey } from "@/utils/date/date";
 
diff --git a/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsContainer.tsx b/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsContainer.tsx
index 23611f5c..73dd709f 100644
--- a/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsContainer.tsx
+++ b/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsContainer.tsx
@@ -12,7 +12,7 @@ import { StatisticsHeaderContainer } from "@/app/[locale]/(main)/statistics/_con
 import {
   useStatisticsDailyQuery,
   useStatisticsSummaryQuery,
-} from "@/app/[locale]/(main)/statistics/_queries/statistics-queries";
+} from "@/app/[locale]/(main)/statistics/_queries/use-statistics-query";
 import { formatStatisticsSidePanelDate } from "@/app/[locale]/(main)/statistics/_utils/format-statistics-date";
 import { formatDateKey } from "@/utils/date/date";
 
diff --git a/apps/timo-web/app/[locale]/(main)/statistics/_queries/statistics-queries.ts b/apps/timo-web/app/[locale]/(main)/statistics/_queries/use-statistics-query.ts
similarity index 100%
rename from apps/timo-web/app/[locale]/(main)/statistics/_queries/statistics-queries.ts
rename to apps/timo-web/app/[locale]/(main)/statistics/_queries/use-statistics-query.ts
diff --git a/apps/timo-web/app/[locale]/layout.tsx b/apps/timo-web/app/[locale]/layout.tsx
index 8f27108d..3409e676 100644
--- a/apps/timo-web/app/[locale]/layout.tsx
+++ b/apps/timo-web/app/[locale]/layout.tsx
@@ -9,7 +9,7 @@ import type { Metadata } from "next";
 import { routing } from "@/i18n/routing";
 import { AuthProvider } from "@/providers/auth/AuthProvider";
 import { LanguageSyncProvider } from "@/providers/locale/LanguageSyncProvider";
-import { OverlayProvider } from "@/providers/OverlayProvider";
+import { OverlayProvider } from "@/providers/overlay/OverlayProvider";
 import { QueryProvider } from "@/providers/query/QueryProvider";
 
 const pretendard = localFont({
diff --git a/apps/timo-web/app/[locale]/policy/_containers/PolicyContainer.tsx b/apps/timo-web/app/[locale]/policy/_containers/PolicyContainer.tsx
index e33ff9a7..4c40742a 100644
--- a/apps/timo-web/app/[locale]/policy/_containers/PolicyContainer.tsx
+++ b/apps/timo-web/app/[locale]/policy/_containers/PolicyContainer.tsx
@@ -2,10 +2,10 @@
 
 import { useTranslations } from "next-intl";
 
-import type { TermsType } from "@/types/terms-type";
+import type { TermsType } from "@/schemas/settings/terms-schema";
 
 import { PolicyDocument } from "@/components/policy/PolicyDocument";
-import { useTerms } from "@/queries/use-terms";
+import { useTermsQuery } from "@/queries/settings/use-terms-query";
 
 export interface PolicyContainerProps {
   type: TermsType;
@@ -13,7 +13,7 @@ export interface PolicyContainerProps {
 
 export const PolicyContainer = ({ type }: PolicyContainerProps) => {
   const t = useTranslations("Policy");
-  const { data: term } = useTerms(type);
+  const { data: term } = useTermsQuery(type);
 
   if (!term) {
     return <p className="typo-body-m-12 text-timo-gray-700">{t("empty")}</p>;
diff --git a/apps/timo-web/app/[locale]/policy/page.tsx b/apps/timo-web/app/[locale]/policy/page.tsx
index 2366061b..1d55e4bc 100644
--- a/apps/timo-web/app/[locale]/policy/page.tsx
+++ b/apps/timo-web/app/[locale]/policy/page.tsx
@@ -11,7 +11,7 @@ import { AsyncBoundary } from "@/components/boundary/AsyncBoundary";
 import { ROUTES } from "@/constants/routes";
 import { Link } from "@/i18n/navigation";
 import { routing } from "@/i18n/routing";
-import { termsTypeSchema } from "@/types/terms-type";
+import { termsTypeSchema } from "@/schemas/settings/terms-schema";
 
 interface PolicyPageProps {
   params: Promise<{ locale: string }>;
diff --git a/apps/timo-web/components/layout/sidebar/time/TimeboxPanel.tsx b/apps/timo-web/components/layout/sidebar/time/TimeboxPanel.tsx
index df34b929..da45c122 100644
--- a/apps/timo-web/components/layout/sidebar/time/TimeboxPanel.tsx
+++ b/apps/timo-web/components/layout/sidebar/time/TimeboxPanel.tsx
@@ -3,8 +3,8 @@
 import { cn } from "@repo/timo-design-system/utils";
 import { useEffect, useState } from "react";
 
-import { useActiveTimer } from "@/hooks/use-active-timer";
-import { useTimeBoxes } from "@/queries/use-time-boxes";
+import { useActiveTimer } from "@/hooks/timer/use-active-timer";
+import { useTimeBoxesQuery } from "@/queries/time-box/use-time-boxes-query";
 import { formatDateKey } from "@/utils/date/date";
 import { getHourLabel } from "@/utils/date/get-hour-label";
 import { convertDurationToTimeText } from "@/utils/duration/convert-duration-to-time-text";
@@ -38,7 +38,7 @@ export const TimeboxPanel = ({ currentTime }: TimeboxPanelProps) => {
   const time = currentTime ?? now;
   const currentTimeOffset = timeToOffset(time);
 
-  const { data: timeBoxes } = useTimeBoxes(formatDateKey(time));
+  const { data: timeBoxes } = useTimeBoxesQuery(formatDateKey(time));
   const { data: activeTimer } = useActiveTimer();
 
   return (
diff --git a/apps/timo-web/components/layout/sidebar/time/TimerPanel.tsx b/apps/timo-web/components/layout/sidebar/time/TimerPanel.tsx
index 96c3abd0..562b0e4a 100644
--- a/apps/timo-web/components/layout/sidebar/time/TimerPanel.tsx
+++ b/apps/timo-web/components/layout/sidebar/time/TimerPanel.tsx
@@ -14,10 +14,10 @@ import {
   TimerSessionControls,
   type TimerSessionControlsHandle,
 } from "@/components/timer/TimerSessionControls";
-import { useActiveTimer } from "@/hooks/use-active-timer";
-import { useTimerActions } from "@/hooks/use-timer-actions";
-import { useTimerOvertime } from "@/hooks/use-timer-overtime";
-import { useTimerQueryInvalidation } from "@/hooks/use-timer-query-invalidation";
+import { useActiveTimer } from "@/hooks/timer/use-active-timer";
+import { useTimerActions } from "@/hooks/timer/use-timer-actions";
+import { useTimerOvertime } from "@/hooks/timer/use-timer-overtime";
+import { useTimerQueryInvalidation } from "@/hooks/timer/use-timer-query-invalidation";
 import { formatDateKey } from "@/utils/date/date";
 import { convertDurationToMinutes } from "@/utils/duration/convert-duration-to-minutes";
 import { convertDurationToTimeText } from "@/utils/duration/convert-duration-to-time-text";
diff --git a/apps/timo-web/components/todo-modal/create/CreateTodoModalContent.tsx b/apps/timo-web/components/todo-modal/create/CreateTodoModalContent.tsx
index a09e600b..fcd580a0 100644
--- a/apps/timo-web/components/todo-modal/create/CreateTodoModalContent.tsx
+++ b/apps/timo-web/components/todo-modal/create/CreateTodoModalContent.tsx
@@ -6,10 +6,9 @@ import { CreateButton, TodoToolbar } from "@repo/timo-design-system/ui";
 import { useTranslations } from "next-intl";
 import { useController, useForm } from "react-hook-form";
 
-import type { CreateTodoRequest } from "@/api/common/todo-schema";
+import type { CreateTodoRequest } from "@/schemas/todo/todo-schema";
 import type { PriorityLevel } from "@repo/timo-design-system/ui";
 
-import { createTodoRequestSchema } from "@/api/common/todo-schema";
 import { OverlayModal } from "@/components/modal/OverlayModal";
 import { AnimatedToast } from "@/components/toast/AnimatedToast";
 import { TodoIconField } from "@/components/todo-modal/common/TodoIconField";
@@ -21,6 +20,7 @@ import { useRepeatField } from "@/hooks/todo-modal/create/use-repeat-field";
 import { useSubtaskField } from "@/hooks/todo-modal/create/use-subtask-field";
 import { useTimeField } from "@/hooks/todo-modal/create/use-time-field";
 import { useTitleField } from "@/hooks/todo-modal/create/use-title-field";
+import { createTodoRequestSchema } from "@/schemas/todo/todo-schema";
 import { formatDateKey, formatShortDateLabel } from "@/utils/date/date";
 
 const createDefaultValues = (defaultDate?: Date): CreateTodoRequest => ({
diff --git a/apps/timo-web/containers/todo-modal/create/CreateTodoModalContainer.tsx b/apps/timo-web/containers/todo-modal/create/CreateTodoModalContainer.tsx
index 23e069a8..0a04c1aa 100644
--- a/apps/timo-web/containers/todo-modal/create/CreateTodoModalContainer.tsx
+++ b/apps/timo-web/containers/todo-modal/create/CreateTodoModalContainer.tsx
@@ -5,7 +5,7 @@ import { useTranslations } from "next-intl";
 import { overlay } from "overlay-kit";
 import { useState } from "react";
 
-import type { CreateTodoRequest } from "@/api/common/todo-schema";
+import type { CreateTodoRequest } from "@/schemas/todo/todo-schema";
 
 import { AnimatedToast } from "@/components/toast/AnimatedToast";
 import { CreateTodoModalContent } from "@/components/todo-modal/create/CreateTodoModalContent";
diff --git a/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx b/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx
index ee442775..a2028a9d 100644
--- a/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx
+++ b/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx
@@ -9,9 +9,9 @@ import type { ReactNode } from "react";
 import { useGetTodoDetail } from "@/api/generated/endpoints/todo/todo";
 import { AnimatedToast } from "@/components/toast/AnimatedToast";
 import { DetailTodoModalContent } from "@/components/todo-modal/detail/DetailTodoModalContent";
+import { useActiveTimer } from "@/hooks/timer/use-active-timer";
 import { useDeleteTodoSubmit } from "@/hooks/todo-modal/detail/use-delete-todo-submit";
 import { useUpdateTodoSubmit } from "@/hooks/todo-modal/detail/use-update-todo-submit";
-import { useActiveTimer } from "@/hooks/use-active-timer";
 
 export interface DetailTodoModalContainerProps {
   todoId: number;
diff --git a/apps/timo-web/hooks/use-active-timer.ts b/apps/timo-web/hooks/timer/use-active-timer.ts
similarity index 95%
rename from apps/timo-web/hooks/use-active-timer.ts
rename to apps/timo-web/hooks/timer/use-active-timer.ts
index e3f36b20..5713a836 100644
--- a/apps/timo-web/hooks/use-active-timer.ts
+++ b/apps/timo-web/hooks/timer/use-active-timer.ts
@@ -7,7 +7,7 @@ import {
   getActiveTimer,
   getGetActiveTimerQueryKey,
 } from "@/api/generated/endpoints/timer/timer";
-import { activeTimerSchema } from "@/types/timer-type";
+import { activeTimerSchema } from "@/schemas/timer/timer-schema";
 
 export const useActiveTimer = () => {
   const query = useQuery({
diff --git a/apps/timo-web/hooks/use-timer-actions.ts b/apps/timo-web/hooks/timer/use-timer-actions.ts
similarity index 97%
rename from apps/timo-web/hooks/use-timer-actions.ts
rename to apps/timo-web/hooks/timer/use-timer-actions.ts
index e356af93..6860499d 100644
--- a/apps/timo-web/hooks/use-timer-actions.ts
+++ b/apps/timo-web/hooks/timer/use-timer-actions.ts
@@ -7,7 +7,7 @@ import type {
   useStopTimer,
 } from "@/api/generated/endpoints/timer/timer";
 import type { useChangeTodoStatus } from "@/api/generated/endpoints/todo/todo";
-import type { ActiveTimer } from "@/types/timer-type";
+import type { ActiveTimer } from "@/schemas/timer/timer-schema";
 
 type ChangeStatusMutate = ReturnType<typeof useChangeStatus>["mutate"];
 type ExtendTimerMutate = ReturnType<typeof useExtendTimer>["mutate"];
diff --git a/apps/timo-web/hooks/use-timer-overtime.ts b/apps/timo-web/hooks/timer/use-timer-overtime.ts
similarity index 93%
rename from apps/timo-web/hooks/use-timer-overtime.ts
rename to apps/timo-web/hooks/timer/use-timer-overtime.ts
index 59d24146..149be211 100644
--- a/apps/timo-web/hooks/use-timer-overtime.ts
+++ b/apps/timo-web/hooks/timer/use-timer-overtime.ts
@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from "react";
 
-import type { ActiveTimer } from "@/types/timer-type";
+import type { ActiveTimer } from "@/schemas/timer/timer-schema";
 
 const STORAGE_KEY_PREFIX = "timo:overtime-base:";
 
diff --git a/apps/timo-web/hooks/use-timer-query-invalidation.ts b/apps/timo-web/hooks/timer/use-timer-query-invalidation.ts
similarity index 100%
rename from apps/timo-web/hooks/use-timer-query-invalidation.ts
rename to apps/timo-web/hooks/timer/use-timer-query-invalidation.ts
diff --git a/apps/timo-web/hooks/todo-modal/common/use-tag-field.tsx b/apps/timo-web/hooks/todo-modal/common/use-tag-field.tsx
index 85ab0195..c8cfd5b8 100644
--- a/apps/timo-web/hooks/todo-modal/common/use-tag-field.tsx
+++ b/apps/timo-web/hooks/todo-modal/common/use-tag-field.tsx
@@ -5,10 +5,10 @@ import { useController } from "react-hook-form";
 
 import type { Control, FieldValues, Path } from "react-hook-form";
 
-import { tagCreateDataSchema } from "@/api/common/tag-schema";
 import { CreateTagModalContainer } from "@/components/tag/CreateTagModalContainer";
-import { useCreateTag } from "@/queries/tag/use-create-tag";
-import { useTags } from "@/queries/tag/use-tags";
+import { useCreateTagMutation } from "@/queries/tag/use-create-tag-mutation";
+import { useTagsQuery } from "@/queries/tag/use-tags-query";
+import { tagCreateDataSchema } from "@/schemas/tag/tag-schema";
 import { getDefaultTagLabelKey } from "@/utils/todo/tag-label";
 
 const MAX_TAG_COUNT = 8;
@@ -43,8 +43,8 @@ export const useTagField = <TFieldValues extends FieldValues>({
   const [isCreateTagErrorToastOpen, setIsCreateTagErrorToastOpen] =
     useState<boolean>(false);
 
-  const tagsQuery = useTags();
-  const { mutate: createTag } = useCreateTag();
+  const tagsQuery = useTagsQuery();
+  const { mutate: createTag } = useCreateTagMutation();
 
   const tagOptions = (tagsQuery.data?.tags ?? []).map((tag) => {
     const defaultLabelKey = getDefaultTagLabelKey(tag.tagId);
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 f0027f28..d7074344 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
@@ -3,12 +3,12 @@
 import { useQueryClient } from "@tanstack/react-query";
 import { useState } from "react";
 
-import type { CreateTodoRequest } from "@/api/common/todo-schema";
 import type { TodoCreateRequest } from "@/api/generated/models";
+import type { CreateTodoRequest } from "@/schemas/todo/todo-schema";
 
-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 "@/schemas/todo/todo-schema";
 
 const buildCreateTodoRequestBody = (
   data: CreateTodoRequest,
diff --git a/apps/timo-web/hooks/todo-modal/create/use-icon-field.ts b/apps/timo-web/hooks/todo-modal/create/use-icon-field.ts
index 42ad2f15..452f9624 100644
--- a/apps/timo-web/hooks/todo-modal/create/use-icon-field.ts
+++ b/apps/timo-web/hooks/todo-modal/create/use-icon-field.ts
@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { useController } from "react-hook-form";
 
-import type { CreateTodoRequest, TodoIcon } from "@/api/common/todo-schema";
+import type { CreateTodoRequest, TodoIcon } from "@/schemas/todo/todo-schema";
 import type { Control } from "react-hook-form";
 
 export interface UseIconFieldParams {
diff --git a/apps/timo-web/hooks/todo-modal/create/use-repeat-field.ts b/apps/timo-web/hooks/todo-modal/create/use-repeat-field.ts
index 7119de66..b1cc14ff 100644
--- a/apps/timo-web/hooks/todo-modal/create/use-repeat-field.ts
+++ b/apps/timo-web/hooks/todo-modal/create/use-repeat-field.ts
@@ -4,7 +4,7 @@ import { useController } from "react-hook-form";
 import type {
   CreateTodoRequest,
   TodoRepeatWeekday,
-} from "@/api/common/todo-schema";
+} from "@/schemas/todo/todo-schema";
 import type { RepeatFrequency } from "@repo/timo-design-system/ui";
 import type { Control } from "react-hook-form";
 
diff --git a/apps/timo-web/hooks/todo-modal/create/use-subtask-field.ts b/apps/timo-web/hooks/todo-modal/create/use-subtask-field.ts
index efd5319f..e18116ff 100644
--- a/apps/timo-web/hooks/todo-modal/create/use-subtask-field.ts
+++ b/apps/timo-web/hooks/todo-modal/create/use-subtask-field.ts
@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import { useController } from "react-hook-form";
 
-import type { CreateTodoRequest } from "@/api/common/todo-schema";
+import type { CreateTodoRequest } from "@/schemas/todo/todo-schema";
 import type { SubtaskInputEntry } from "@/utils/todo/subtask-input-list";
 import type { KeyboardEvent } from "react";
 import type { Control } from "react-hook-form";
diff --git a/apps/timo-web/hooks/todo-modal/create/use-time-field.ts b/apps/timo-web/hooks/todo-modal/create/use-time-field.ts
index 9223310b..231e0d3a 100644
--- a/apps/timo-web/hooks/todo-modal/create/use-time-field.ts
+++ b/apps/timo-web/hooks/todo-modal/create/use-time-field.ts
@@ -1,13 +1,13 @@
 import { useState } from "react";
 import { useController, useWatch } from "react-hook-form";
 
-import type { CreateTodoRequest } from "@/api/common/todo-schema";
+import type { CreateTodoRequest } from "@/schemas/todo/todo-schema";
 import type { TimeSelection } from "@repo/timo-design-system/ui";
 import type { Control } from "react-hook-form";
 
-import { recommendDurationResponseSchema } from "@/api/common/todo-schema";
 import { useRecommendDuration } from "@/api/generated/endpoints/ai/ai";
 import { SECONDS_PER_HOUR, SECONDS_PER_MINUTE } from "@/constants/time";
+import { recommendDurationResponseSchema } from "@/schemas/todo/todo-schema";
 import {
   convertApiDurationToSeconds,
   convertSecondsToApiDuration,
diff --git a/apps/timo-web/hooks/todo-modal/create/use-title-field.ts b/apps/timo-web/hooks/todo-modal/create/use-title-field.ts
index 8f1a28db..9239f170 100644
--- a/apps/timo-web/hooks/todo-modal/create/use-title-field.ts
+++ b/apps/timo-web/hooks/todo-modal/create/use-title-field.ts
@@ -1,6 +1,6 @@
 import { useController } from "react-hook-form";
 
-import type { CreateTodoRequest } from "@/api/common/todo-schema";
+import type { CreateTodoRequest } from "@/schemas/todo/todo-schema";
 import type { Control } from "react-hook-form";
 
 import {
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 96c127f5..dc74d87f 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 "@/api/common/todo-schema";
+import type { TodoSubtask } from "@/schemas/todo/todo-schema";
 import type { SubtaskInputEntry } from "@/utils/todo/subtask-input-list";
 import type { KeyboardEvent } from "react";
 
diff --git a/apps/timo-web/providers/locale/LanguageSyncProvider.tsx b/apps/timo-web/providers/locale/LanguageSyncProvider.tsx
index b7377bb5..4aca745e 100644
--- a/apps/timo-web/providers/locale/LanguageSyncProvider.tsx
+++ b/apps/timo-web/providers/locale/LanguageSyncProvider.tsx
@@ -5,14 +5,14 @@ import { useEffect } from "react";
 
 import { AsyncBoundary } from "@/components/boundary/AsyncBoundary";
 import { usePathname, useRouter } from "@/i18n/navigation";
-import { useMyProfile } from "@/queries/use-my-profile";
+import { useMyProfileQuery } from "@/queries/auth/use-my-profile-query";
 import { useAuthStore } from "@/stores/auth/useAuthStore";
 
 const isSupportedLocale = (value: string): value is "ko" | "en" =>
   value === "ko" || value === "en";
 
 const LanguageSync = () => {
-  const { data: profile } = useMyProfile();
+  const { data: profile } = useMyProfileQuery();
   const locale = useLocale();
   const router = useRouter();
   const pathname = usePathname();
diff --git a/apps/timo-web/providers/OverlayProvider.tsx b/apps/timo-web/providers/overlay/OverlayProvider.tsx
similarity index 100%
rename from apps/timo-web/providers/OverlayProvider.tsx
rename to apps/timo-web/providers/overlay/OverlayProvider.tsx
diff --git a/apps/timo-web/queries/use-my-profile.ts b/apps/timo-web/queries/auth/use-my-profile-query.ts
similarity index 82%
rename from apps/timo-web/queries/use-my-profile.ts
rename to apps/timo-web/queries/auth/use-my-profile-query.ts
index 474727dd..71e67bb3 100644
--- a/apps/timo-web/queries/use-my-profile.ts
+++ b/apps/timo-web/queries/auth/use-my-profile-query.ts
@@ -6,13 +6,13 @@ import {
   getGetMyProfileQueryKey,
   getMyProfile,
 } from "@/api/generated/endpoints/user/user";
-import { userProfileSchema } from "@/types/user-profile-type";
+import { userProfileSchema } from "@/schemas/auth/user-profile-schema";
 
 /**
  * 로그인한 유저의 프로필을 조회한다.
  * accessToken이 보장되는 화면(AuthGuardProvider 하위 등)에서만 사용해야 한다.
  */
-export const useMyProfile = () =>
+export const useMyProfileQuery = () =>
   useSuspenseQuery({
     queryKey: getGetMyProfileQueryKey(),
     queryFn: ({ signal }) => getMyProfile(undefined, signal),
diff --git a/apps/timo-web/queries/use-terms.ts b/apps/timo-web/queries/settings/use-terms-query.ts
similarity index 82%
rename from apps/timo-web/queries/use-terms.ts
rename to apps/timo-web/queries/settings/use-terms-query.ts
index 231999a0..0c1dae93 100644
--- a/apps/timo-web/queries/use-terms.ts
+++ b/apps/timo-web/queries/settings/use-terms-query.ts
@@ -7,14 +7,17 @@ import {
   getGetTermsByConditionQueryKey,
   getTermsByCondition,
 } from "@/api/generated/endpoints/terms/terms";
-import { termsDetailSchema, type TermsType } from "@/types/terms-type";
+import {
+  termsDetailSchema,
+  type TermsType,
+} from "@/schemas/settings/terms-schema";
 
 const TERMS_LANGUAGE_MAP: Record<"ko" | "en", string> = {
   ko: "KO",
   en: "EN",
 };
 
-export const useTerms = (type: TermsType) => {
+export const useTermsQuery = (type: TermsType) => {
   const locale = useLocale() as "ko" | "en";
   const params = { type, language: TERMS_LANGUAGE_MAP[locale] };
 
diff --git a/apps/timo-web/queries/tag/use-create-tag.ts b/apps/timo-web/queries/tag/use-create-tag-mutation.ts
similarity index 92%
rename from apps/timo-web/queries/tag/use-create-tag.ts
rename to apps/timo-web/queries/tag/use-create-tag-mutation.ts
index 89183f3f..2fffb2a4 100644
--- a/apps/timo-web/queries/tag/use-create-tag.ts
+++ b/apps/timo-web/queries/tag/use-create-tag-mutation.ts
@@ -10,7 +10,7 @@ import {
   getGetTagsQueryKey,
 } from "@/api/generated/endpoints/tag/tag";
 
-export const useCreateTag = () => {
+export const useCreateTagMutation = () => {
   const queryClient = useQueryClient();
 
   return useMutation({
diff --git a/apps/timo-web/queries/tag/use-delete-tag.ts b/apps/timo-web/queries/tag/use-delete-tag-mutation.ts
similarity index 90%
rename from apps/timo-web/queries/tag/use-delete-tag.ts
rename to apps/timo-web/queries/tag/use-delete-tag-mutation.ts
index 62d56bc3..092295e0 100644
--- a/apps/timo-web/queries/tag/use-delete-tag.ts
+++ b/apps/timo-web/queries/tag/use-delete-tag-mutation.ts
@@ -7,7 +7,7 @@ import {
   getGetTagsQueryKey,
 } from "@/api/generated/endpoints/tag/tag";
 
-export const useDeleteTag = () => {
+export const useDeleteTagMutation = () => {
   const queryClient = useQueryClient();
 
   return useMutation({
diff --git a/apps/timo-web/queries/tag/use-tags.ts b/apps/timo-web/queries/tag/use-tags-query.ts
similarity index 65%
rename from apps/timo-web/queries/tag/use-tags.ts
rename to apps/timo-web/queries/tag/use-tags-query.ts
index 9918b361..b43a2e2d 100644
--- a/apps/timo-web/queries/tag/use-tags.ts
+++ b/apps/timo-web/queries/tag/use-tags-query.ts
@@ -1,9 +1,9 @@
 "use client";
 
-import { tagListDataSchema } from "@/api/common/tag-schema";
 import { useGetTags } from "@/api/generated/endpoints/tag/tag";
+import { tagListDataSchema } from "@/schemas/tag/tag-schema";
 
-export const useTags = () =>
+export const useTagsQuery = () =>
   useGetTags({
     query: {
       select: ({ data }) => tagListDataSchema.parse(data),
diff --git a/apps/timo-web/queries/use-time-boxes.ts b/apps/timo-web/queries/time-box/use-time-boxes-query.ts
similarity index 75%
rename from apps/timo-web/queries/use-time-boxes.ts
rename to apps/timo-web/queries/time-box/use-time-boxes-query.ts
index f83bf6fd..d8e3b9b8 100644
--- a/apps/timo-web/queries/use-time-boxes.ts
+++ b/apps/timo-web/queries/time-box/use-time-boxes-query.ts
@@ -6,9 +6,9 @@ import {
   getGetTimeBoxesQueryKey,
   getTimeBoxes,
 } from "@/api/generated/endpoints/time-box/time-box";
-import { timeBoxListSchema } from "@/types/timebox-type";
+import { timeBoxListSchema } from "@/schemas/timebox/timebox-schema";
 
-export const useTimeBoxes = (date: string) =>
+export const useTimeBoxesQuery = (date: string) =>
   useQuery({
     queryKey: getGetTimeBoxesQueryKey({ date }),
     queryFn: ({ signal }) => getTimeBoxes({ date }, undefined, signal),
diff --git a/apps/timo-web/types/user-profile-type.ts b/apps/timo-web/schemas/auth/user-profile-schema.ts
similarity index 100%
rename from apps/timo-web/types/user-profile-type.ts
rename to apps/timo-web/schemas/auth/user-profile-schema.ts
diff --git a/apps/timo-web/types/terms-type.ts b/apps/timo-web/schemas/settings/terms-schema.ts
similarity index 100%
rename from apps/timo-web/types/terms-type.ts
rename to apps/timo-web/schemas/settings/terms-schema.ts
diff --git a/apps/timo-web/api/common/tag-schema.ts b/apps/timo-web/schemas/tag/tag-schema.ts
similarity index 100%
rename from apps/timo-web/api/common/tag-schema.ts
rename to apps/timo-web/schemas/tag/tag-schema.ts
diff --git a/apps/timo-web/types/timebox-type.ts b/apps/timo-web/schemas/timebox/timebox-schema.ts
similarity index 100%
rename from apps/timo-web/types/timebox-type.ts
rename to apps/timo-web/schemas/timebox/timebox-schema.ts
diff --git a/apps/timo-web/types/timer-type.ts b/apps/timo-web/schemas/timer/timer-schema.ts
similarity index 100%
rename from apps/timo-web/types/timer-type.ts
rename to apps/timo-web/schemas/timer/timer-schema.ts
diff --git a/apps/timo-web/api/common/todo-schema.ts b/apps/timo-web/schemas/todo/todo-schema.ts
similarity index 100%
rename from apps/timo-web/api/common/todo-schema.ts
rename to apps/timo-web/schemas/todo/todo-schema.ts

From faa3f1d22eac2a2c1449d913cd4327ff2cbed9fa Mon Sep 17 00:00:00 2001
From: kimminna <kmina121777@naver.com>
Date: Wed, 15 Jul 2026 15:17:07 +0900
Subject: [PATCH 74/75] =?UTF-8?q?docs(root):=20=EC=BF=BC=EB=A6=AC/?=
 =?UTF-8?q?=EB=AE=A4=ED=85=8C=EC=9D=B4=EC=85=98=20=ED=9B=85=20=EB=84=A4?=
 =?UTF-8?q?=EC=9D=B4=EB=B0=8D=20=EC=BB=A8=EB=B2=A4=EC=85=98=EC=9D=84=20?=
 =?UTF-8?q?=EB=AC=B8=EC=84=9C=ED=99=94=ED=96=88=EC=8A=B5=EB=8B=88=EB=8B=A4?=
 =?UTF-8?q?=20(#217)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- naming.md에 TanStack Query 훅의 파일명·함수명 컨벤션을 추가했습니다
- timo-api-integration 스킬의 _queries 훅 작성 가이드와 예시를 새 컨벤션에 맞게 갱신했습니다
---
 .../skills/api/timo-api-integration/SKILL.md  | 30 +++++++++++++++++--
 docs/conventions/naming.md                    | 10 +++++++
 2 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/.agents/skills/api/timo-api-integration/SKILL.md b/.agents/skills/api/timo-api-integration/SKILL.md
index 0fa82bd0..07369f40 100644
--- a/.agents/skills/api/timo-api-integration/SKILL.md
+++ b/.agents/skills/api/timo-api-integration/SKILL.md
@@ -38,11 +38,14 @@
 
 ### Phase 3 — `_queries/` 훅 작성
 
-- 위치: `app/(domain)/_queries/use-xxx.ts`
+- 위치: `app/(domain)/_queries/use-xxx-query.ts` (조회) / `use-xxx-mutation.ts` (변경)
+- 네이밍: 파일명은 `-query.ts`/`-mutation.ts`로, export하는 함수명은 `~Query`/`~Mutation`으로 끝낸다. 파일당 훅 1개가 기본이다. → `docs/conventions/naming.md` 참조
 - `useSuspenseQuery`를 쓸지 `useQuery`를 쓸지는 컴포넌트가 `AsyncBoundary`(Suspense) 안에 있는지로 결정한다. `AsyncBoundary`로 감싸져 있으면 `useSuspenseQuery`를 쓴다.
 - **주의**: 생성된 `getGetXxxQueryOptions()` 팩토리를 그대로 `useSuspenseQuery`에 스프레드하면 `UseQueryOptions`가 허용하는 `skipToken`과 `UseSuspenseQueryOptions`가 타입 충돌을 일으킨다. `queryKey`/`queryFn`은 생성된 `getGetXxxQueryKey` + 원본 fetcher 함수로 직접 조립한다.
 - `select`에서 `BaseResponse.data`를 언랩하고 로컬 zod 스키마로 `.parse()`해서 반환한다.
 
+조회 훅 예시 (`_queries/use-home-view-query.ts`):
+
 ```ts
 "use client";
 
@@ -54,7 +57,7 @@ import {
 } from "@/api/generated/endpoints/home/home";
 import { homeViewDataSchema } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_types/home-view-type";
 
-export const useHomeView = ({ filter, baseDate }: GetHomeViewParams) =>
+export const useHomeViewQuery = ({ filter, baseDate }: GetHomeViewParams) =>
   useSuspenseQuery({
     queryKey: getGetHomeQueryKey({ filter, baseDate }),
     queryFn: ({ signal }) => getHome({ filter, baseDate }, undefined, signal),
@@ -62,6 +65,28 @@ export const useHomeView = ({ filter, baseDate }: GetHomeViewParams) =>
   });
 ```
 
+변경 훅 예시 (`_queries/use-withdraw-mutation.ts`):
+
+```ts
+"use client";
+
+import { useMutation } from "@tanstack/react-query";
+
+import { withdraw } from "@/api/generated/endpoints/auth/auth";
+import { useClearSession } from "@/app/[locale]/(main)/settings/_hooks/use-clear-session";
+
+export const useWithdrawMutation = () => {
+  const clearSession = useClearSession();
+
+  return useMutation({
+    mutationFn: () => withdraw(),
+    onSuccess: () => {
+      clearSession();
+    },
+  });
+};
+```
+
 ### Phase 4 — 컨테이너 연결
 
 - mock 함수 import를 제거하고 새 훅으로 교체한다.
@@ -70,6 +95,7 @@ export const useHomeView = ({ filter, baseDate }: GetHomeViewParams) =>
 
 ### Phase 5 — 자가 검토
 
+- [ ] 훅 파일명/함수명이 `-query`/`~Query`, `-mutation`/`~Mutation` 컨벤션을 따르는가
 - [ ] `api/generated/` 내부 파일을 직접 수정하지 않았는가 (재생성 시 사라짐)
 - [ ] 응답을 로컬 zod 스키마로 `.parse()`해서 검증했는가 (gen 응답 스키마를 그대로 UI까지 노출하지 않았는가)
 - [ ] `useSuspenseQuery` 사용 시 `queryKey`/`queryFn`을 직접 조립해 타입 충돌을 피했는가
diff --git a/docs/conventions/naming.md b/docs/conventions/naming.md
index f9f2ef85..ba5d0791 100644
--- a/docs/conventions/naming.md
+++ b/docs/conventions/naming.md
@@ -6,3 +6,13 @@
 | 컴포넌트 파일      | `PascalCase` | `UserCard.tsx`                                 |
 | Hook / API / Utils | `kebab-case` | `use-auth.ts`, `auth-api.ts`, `format-date.ts` |
 | TanStack Query     | `kebab-case` | `use-user-query.ts`, `use-user-mutation.ts`    |
+
+## TanStack Query 훅 네이밍
+
+- 파일명: 조회(`useQuery`/`useSuspenseQuery`)는 `-query.ts`, 변경(`useMutation`)은 `-mutation.ts`로 끝난다.
+  - 예: `use-my-profile-query.ts`, `use-create-tag-mutation.ts`
+- 함수명: 파일명과 대응해 `~Query`, `~Mutation` 접미사를 붙인다.
+  - 예: `useMyProfileQuery`, `useCreateTagMutation`
+- 파일당 훅 1개가 기본이다. 같은 도메인의 조회/변경 훅을 한 파일에 묶지 않는다.
+- 이 규칙은 react-query를 직접 감싸는 순수 조회/변경 훅에 적용한다. 조회 결과에 추가 상태·로직을 합성한 훅(예: 타이머 tick 로직이 섞인 훅)은 대상이 아니다 — 이런 훅은 역할을 드러내는 이름을 그대로 쓴다.
+- 위치는 `docs/architecture/structure.md`의 `_queries/`(도메인 전용) / `queries/`(전역 공유) 규칙을 따른다.

From 155f618ac60ba0dbe66969bb4ee41459c6491d9b Mon Sep 17 00:00:00 2001
From: yumin-kim4757 <rladbals0211@gmail.com>
Date: Wed, 15 Jul 2026 15:30:27 +0900
Subject: [PATCH 75/75] =?UTF-8?q?fix(ui):=20=EC=BA=98=EB=A6=B0=EB=8D=94=20?=
 =?UTF-8?q?=ED=8C=9D=EC=97=85=20=ED=95=98=EB=8B=A8=20=EB=82=A0=EC=A7=9C=20?=
 =?UTF-8?q?=EC=9E=98=EB=A6=BC=20=EC=88=98=EC=A0=95=20(#218)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../timo-design-system/src/components/calendar/Calendar.tsx   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/timo-design-system/src/components/calendar/Calendar.tsx b/packages/timo-design-system/src/components/calendar/Calendar.tsx
index 8092af62..cb308731 100644
--- a/packages/timo-design-system/src/components/calendar/Calendar.tsx
+++ b/packages/timo-design-system/src/components/calendar/Calendar.tsx
@@ -88,7 +88,7 @@ export const Calendar = ({
   return (
     <div
       className={cn(
-        "shadow-timo h-66 w-67 rounded-[4px] bg-white px-6 py-4",
+        "shadow-timo w-67 rounded-[4px] bg-white px-6 py-4",
         className,
       )}
     >
@@ -115,7 +115,7 @@ export const Calendar = ({
         />
       </div>
 
-      <div className={cn("grid grid-cols-7 grid-rows-6 gap-x-1 gap-y-1.5")}>
+      <div className="grid grid-cols-7 gap-x-1 gap-y-1.5">
         {WEEKDAYS.map((weekday, index) => (
           <div
             key={`${weekday}-${index}`}