[FEAT] 투두 API 연결 (상세조회 / 수정 / 삭제)

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 />

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

@@ -17,7 +17,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 { 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 { convertDurationToMinutes } from "@/utils/duration/convert-duration-to-minutes";
@@ -151,7 +151,8 @@ export const HomeTodoContainer = () => {
                   return (
                     <DetailTodoModalContainer
                       key={todo.todoId}
-                      todo={todo}
+                      todoId={todo.todoId}
+                      date={dateKey}
                       onTogglePlay={() =>
                         handleTogglePlay(dateKey, todo.todoId)
                       }

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 {

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

@@ -6,7 +6,7 @@ import { DateInformation } from "@/app/[locale]/(main)/(with-time-sidebar)/_comp
 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 { AnimatedToast } from "@/components/toast/AnimatedToast";
-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";
 

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)}
           >

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, formatShortDateLabel } from "@/utils/date/date";
 
 const createDefaultValues = (defaultDate?: Date): CreateTodoRequest => ({

apps/timo-web/components/todo-modal/detail/DetailTodoMemoField.tsx

@@ -5,13 +5,15 @@ export interface DetailTodoMemoFieldProps {
   placeholder: string;
   onChange: (value: string) => void;
   maxLength: number;
+  disabled?: boolean;
 }
 
 export const DetailTodoMemoField = ({
   value,
   placeholder,
   onChange,
   maxLength,
+  disabled = false,
 }: DetailTodoMemoFieldProps) => {
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
@@ -30,7 +32,8 @@ 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"
+      disabled={disabled}
+      className="typo-headline-r-14 text-timo-gray-700 min-h-20 w-full resize-none overflow-hidden p-1 outline-none"
     />
   );
 };