[FEAT] 기존 카드 투두 클릭 모달 구현

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

@@ -22,8 +22,9 @@ import type {
   TodoPriorityTypes,
   TodoTimerStatusTypes,
 } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_types/todo-type";
+import type { KeyboardEvent, MouseEvent } from "react";
 
-import { convertDurationToTimeText } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_utils/todo-time";
+import { convertDurationToTimeText } from "@/utils/todo/todo-time";
 
 type PriorityLabelKeyTypes = "urgent" | "high" | "medium" | "low";
 
@@ -34,6 +35,10 @@ const PRIORITY_LABEL_KEY: Record<TodoPriorityTypes, PriorityLabelKeyTypes> = {
   LOW: "low",
 };
 
+const isInteractiveElement = (target: EventTarget | null) =>
+  target instanceof HTMLElement &&
+  Boolean(target.closest("button, input, label"));
+
 export interface HomeTodoCardProps {
   todoId: number;
   title: string;
@@ -46,6 +51,7 @@ export interface HomeTodoCardProps {
   timerStatus: TodoTimerStatusTypes;
   subtaskTitle?: string;
   isSubtaskCompleted?: boolean;
+  onClickTodo?: () => void;
   onToggleCompleted: (completed: boolean) => void;
   onTogglePlay: () => void;
   onToggleSubtaskCompleted?: (completed: boolean) => void;
@@ -63,6 +69,7 @@ export const HomeTodoCard = ({
   timerStatus,
   subtaskTitle,
   isSubtaskCompleted = false,
+  onClickTodo,
   onToggleCompleted,
   onTogglePlay,
   onToggleSubtaskCompleted,
@@ -81,6 +88,21 @@ export const HomeTodoCard = ({
 
   const priorityLabel = tCommon(`priority.${PRIORITY_LABEL_KEY[priority]}`);
 
+  const handleCardClick = (event: MouseEvent<HTMLDivElement>) => {
+    if (isInteractiveElement(event.target)) return;
+
+    onClickTodo?.();
+  };
+
+  const handleCardKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (isInteractiveElement(event.target)) return;
+    if (!onClickTodo) return;
+    if (event.key !== "Enter" && event.key !== " ") return;
+
+    event.preventDefault();
+    onClickTodo();
+  };
+
   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">
@@ -112,14 +134,19 @@ export const HomeTodoCard = ({
   );
 
   return (
-    <article
+    <div
       ref={setNodeRef}
       style={sortableStyle}
       {...attributes}
       {...listeners}
+      role={onClickTodo ? "button" : attributes.role}
+      tabIndex={onClickTodo ? 0 : attributes.tabIndex}
+      onClick={onClickTodo ? handleCardClick : undefined}
+      onKeyDown={onClickTodo ? handleCardKeyDown : undefined}
       className={cn(
         "border-timo-gray-500 flex w-full shrink-0 flex-col items-start gap-2 overflow-hidden rounded-[4px] border border-solid px-3.5 py-3",
         isCompleted ? "bg-timo-gray-200" : "bg-white",
+        onClickTodo && "cursor-pointer",
       )}
     >
       {subtaskTitle ? (
@@ -167,6 +194,6 @@ export const HomeTodoCard = ({
           {convertDurationToTimeText(durationSeconds)}
         </span>
       </div>
-    </article>
+    </div>
   );
 };

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

@@ -15,21 +15,10 @@ 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 { DndSortableListProvider } from "@/providers/dnd/DndSortableListProvider";
 import { formatDateKey } from "@/utils/date/date";
-
-const TAG_LABEL_KEYS = [
-  "dailyLife",
-  "work",
-  "exercise",
-  "assignment",
-  "additional",
-] as const;
-
-type TagLabelKey = (typeof TAG_LABEL_KEYS)[number];
-
-const isTagLabelKey = (value: string): value is TagLabelKey =>
-  (TAG_LABEL_KEYS as readonly string[]).includes(value);
+import { isTagLabelKey } from "@/utils/todo/tag-label";
 
 export const HomeTodoContainer = () => {
   const tCommon = useTranslations("Common");
@@ -48,6 +37,7 @@ export const HomeTodoContainer = () => {
     handleToggleCompleted,
     handleTogglePlay,
     handleToggleSubtaskCompleted,
+    handleDeleteTodo,
     handleReorderTodo,
   } = useHomeTodosByDate(days);
 
@@ -100,42 +90,57 @@ export const HomeTodoContainer = () => {
                   const [firstSubtask] = todo.subtasks;
 
                   return (
-                    <HomeTodoCard
+                    <DetailTodoModalContainer
                       key={todo.todoId}
-                      todoId={todo.todoId}
-                      title={todo.title}
-                      isCompleted={todo.completed}
-                      durationSeconds={todo.durationSeconds}
-                      priority={todo.priority}
-                      tagName={
-                        todo.tag &&
-                        (isTagLabelKey(todo.tag.name)
-                          ? tCommon(`tag.${todo.tag.name}`)
-                          : todo.tag.name)
-                      }
-                      hasMemo={todo.hasMemo}
-                      isRepeated={todo.isRepeated}
-                      timerStatus={todo.timerStatus}
-                      subtaskTitle={firstSubtask?.content}
-                      isSubtaskCompleted={firstSubtask?.completed}
-                      onToggleCompleted={(completed) =>
-                        handleToggleCompleted(dateKey, todo.todoId, completed)
-                      }
+                      todo={todo}
                       onTogglePlay={() =>
                         handleTogglePlay(dateKey, todo.todoId)
                       }
-                      onToggleSubtaskCompleted={
-                        firstSubtask
-                          ? (completed) =>
-                              handleToggleSubtaskCompleted(
-                                dateKey,
-                                todo.todoId,
-                                firstSubtask.subtaskId,
-                                completed,
-                              )
-                          : undefined
-                      }
-                    />
+                      onDelete={() => handleDeleteTodo(dateKey, todo.todoId)}
+                    >
+                      {(openDetailTodoModal) => (
+                        <HomeTodoCard
+                          todoId={todo.todoId}
+                          title={todo.title}
+                          isCompleted={todo.completed}
+                          durationSeconds={todo.durationSeconds}
+                          priority={todo.priority}
+                          tagName={
+                            todo.tag &&
+                            (isTagLabelKey(todo.tag.name)
+                              ? tCommon(`tag.${todo.tag.name}`)
+                              : todo.tag.name)
+                          }
+                          hasMemo={todo.hasMemo}
+                          isRepeated={todo.isRepeated}
+                          timerStatus={todo.timerStatus}
+                          subtaskTitle={firstSubtask?.content}
+                          isSubtaskCompleted={firstSubtask?.completed}
+                          onClickTodo={openDetailTodoModal}
+                          onToggleCompleted={(completed) =>
+                            handleToggleCompleted(
+                              dateKey,
+                              todo.todoId,
+                              completed,
+                            )
+                          }
+                          onTogglePlay={() =>
+                            handleTogglePlay(dateKey, todo.todoId)
+                          }
+                          onToggleSubtaskCompleted={
+                            firstSubtask
+                              ? (completed) =>
+                                  handleToggleSubtaskCompleted(
+                                    dateKey,
+                                    todo.todoId,
+                                    firstSubtask.subtaskId,
+                                    completed,
+                                  )
+                              : undefined
+                          }
+                        />
+                      )}
+                    </DetailTodoModalContainer>
                   );
                 })}
               </div>

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

@@ -5,8 +5,8 @@ import { useTranslations } from "next-intl";
 import type { ApiDayOfWeek } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_types/home-view-type";
 
 import { DateInformation } from "@/app/[locale]/(main)/(with-time-sidebar)/_components/DateInformation";
-import { CreateTodoModalContainer } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_containers/todo-modal/CreateTodoModalContainer";
 import { convertDateToDateText } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_utils/date";
+import { CreateTodoModalContainer } from "@/components/todo-modal/create/CreateTodoModalContainer";
 import { getToday, parseDateKey } from "@/utils/date/date";
 
 export interface HomeDayHeaderContainerProps {

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

@@ -106,6 +106,14 @@ export const useHomeTodosByDate = (apiDays: HomeViewDay[]) => {
     );
   };
 
+  const handleDeleteTodo = (dateKey: string, todoId: number) => {
+    // TODO: API
+    setTodosByDate((prev) => ({
+      ...prev,
+      [dateKey]: (prev[dateKey] ?? []).filter((todo) => todo.todoId !== todoId),
+    }));
+  };
+
   const handleReorderTodo = (
     dateKey: string,
     fromIndex: number,
@@ -136,6 +144,7 @@ export const useHomeTodosByDate = (apiDays: HomeViewDay[]) => {
     handleToggleCompleted,
     handleTogglePlay,
     handleToggleSubtaskCompleted,
+    handleDeleteTodo,
     handleReorderTodo,
   };
 };

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

@@ -6,7 +6,8 @@ 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 { CreateTodoModalContainer } from "@/app/[locale]/(main)/(with-time-sidebar)/today/_containers/todo-modal/CreateTodoModalContainer";
+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 { getToday } from "@/utils/date/date";
 import { getDayOfWeekKey } from "@/utils/date/get-day-of-week-key";
 
@@ -27,6 +28,7 @@ export const TodayDateHeaderContainer = ({
   const date = convertDateToDateText(today);
   const dayKey = getDayOfWeekKey(today);
   const dayOfWeek = tCommon(`weekday.${dayKey}`);
+  const { handleSubmit } = useCreateTodoSubmit({ onCreate: onCreateTodo });
 
   return (
     <div className="flex flex-col gap-3 pb-2">
@@ -38,7 +40,11 @@ export const TodayDateHeaderContainer = ({
         totalCount={totalCount}
         completedCount={completedCount}
       />
-      <CreateTodoModalContainer defaultDate={today} onCreate={onCreateTodo} />
+      <CreateTodoModalContainer
+        defaultDate={today}
+        buttonVariant="big"
+        onSubmit={handleSubmit}
+      />
     </div>
   );
 };

apps/timo-web/components/todo-modal/CreateTodoIconField.tsx → apps/timo-web/components/todo-modal/common/TodoIconField.tsx

@@ -4,7 +4,7 @@ import { cn } from "@repo/timo-design-system/utils";
 
 import type { TodoIconValue } from "@repo/timo-design-system/ui";
 
-export interface CreateTodoIconFieldProps {
+export interface TodoIconFieldProps {
   icon: TodoIconValue | null;
   isIconPanelOpen: boolean;
   addIconLabel: string;
@@ -14,15 +14,15 @@ export interface CreateTodoIconFieldProps {
   onRemoveIcon: () => void;
 }
 
-export const CreateTodoIconField = ({
+export const TodoIconField = ({
   icon,
   isIconPanelOpen,
   addIconLabel,
   onOpenPanel,
   onTogglePanel,
   onSelectIcon,
   onRemoveIcon,
-}: CreateTodoIconFieldProps) => {
+}: TodoIconFieldProps) => {
   return (
     <div className="flex w-full flex-col items-start gap-2">
       {!isIconPanelOpen && icon ? (

apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/todo-modal/CreateTodoModalContainer.tsx → apps/timo-web/components/todo-modal/create/CreateTodoModalContainer.tsx

@@ -4,21 +4,28 @@ import { AddTaskButton } from "@repo/timo-design-system/ui";
 import { useTranslations } from "next-intl";
 import { overlay } from "overlay-kit";
 
-import { useCreateTodoSubmit } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-create-todo-submit";
+import type { CreateTodoRequest } from "@/api/todo/todo-schema";
+
 import { AnimatedToast } from "@/components/toast/AnimatedToast";
-import { CreateTodoModalContent } from "@/components/todo-modal/CreateTodoModalContent";
+import { CreateTodoModalContent } from "@/components/todo-modal/create/CreateTodoModalContent";
+import { useCreateTodoSubmit } from "@/hooks/todo-modal/use-create-todo-submit";
 
 export interface CreateTodoModalContainerProps {
   defaultDate?: Date;
+  buttonVariant?: "default" | "big";
+  onSubmit?: (data: CreateTodoRequest) => void;
 }
 
 export const CreateTodoModalContainer = ({
   defaultDate,
+  buttonVariant = "default",
+  onSubmit,
 }: CreateTodoModalContainerProps) => {
   const t = useTranslations("Home");
   const tToast = useTranslations("Toast");
   const { handleSubmit, isErrorToastOpen, closeErrorToast } =
     useCreateTodoSubmit();
+  const submitTodo = onSubmit ?? handleSubmit;
 
   const handleAddClick = () => {
     overlay.open(({ isOpen, close, unmount }) => (
@@ -27,14 +34,18 @@ export const CreateTodoModalContainer = ({
         onClose={close}
         onExited={unmount}
         defaultDate={defaultDate}
-        onSubmit={handleSubmit}
+        onSubmit={submitTodo}
       />
     ));
   };
 
   return (
     <>
-      <AddTaskButton text={t("addTask")} onClick={handleAddClick} />
+      <AddTaskButton
+        variant={buttonVariant}
+        text={t("addTask")}
+        onClick={handleAddClick}
+      />
 
       <AnimatedToast
         isOpen={isErrorToastOpen}