From 90223a4d907652a434f5fe136d83036c6a47f286 Mon Sep 17 00:00:00 2001
From: kimminna <kmina121777@naver.com>
Date: Mon, 13 Jul 2026 00:08:00 +0900
Subject: [PATCH 1/6] =?UTF-8?q?feat(web):=20=EB=A9=94=EB=AA=A8=20=ED=95=84?=
 =?UTF-8?q?=EB=93=9C=20300=EC=9E=90=20=EC=A0=9C=ED=95=9C=20=EC=8A=A4?=
 =?UTF-8?q?=ED=82=A4=EB=A7=88=20=EA=B2=80=EC=A6=9D=20=EC=B6=94=EA=B0=80=20?=
 =?UTF-8?q?(#157)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 메모 필드에 최대 300자 zod 검증을 추가했습니다
---
 apps/timo-web/api/todo/todo-schema.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/timo-web/api/todo/todo-schema.ts b/apps/timo-web/api/todo/todo-schema.ts
index f1516663..ec98b4e4 100644
--- a/apps/timo-web/api/todo/todo-schema.ts
+++ b/apps/timo-web/api/todo/todo-schema.ts
@@ -42,7 +42,7 @@ export const createTodoRequestSchema = z
     repeatType: todoRepeatTypeSchema,
     repeatWeekdays: z.array(todoRepeatWeekdaySchema).nullable(),
     repeatDayOfMonth: z.number().int().min(1).max(31).nullable(),
-    memo: z.string().nullable(),
+    memo: z.string().max(300).nullable(),
   })
   .superRefine((value, ctx) => {
     if (

From 9e9c6ce9e72cd12c5f0ade26ba05f6edb35fb458 Mon Sep 17 00:00:00 2001
From: kimminna <kmina121777@naver.com>
Date: Mon, 13 Jul 2026 00:08:57 +0900
Subject: [PATCH 2/6] =?UTF-8?q?feat(web):=20=EB=A9=94=EB=AA=A8=20=ED=95=84?=
 =?UTF-8?q?=EB=93=9C=20=EC=9E=90=EB=8F=99=20=EB=86=92=EC=9D=B4=20=EC=A1=B0?=
 =?UTF-8?q?=EC=A0=88=20=EB=B0=8F=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EC=B2=98?=
 =?UTF-8?q?=EB=A6=AC=20(#157)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 입력 시 scrollHeight 기준으로 자동 높이 조절 기능을 추가했습니다
- 뷰포트의 40%를 넘으면 내부 스크롤되도록 max-height와 overflow 처리를 추가했습니다
---
 .../_components/todo-modal/CreateTodoMemoField.tsx  | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-modal/CreateTodoMemoField.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-modal/CreateTodoMemoField.tsx
index b12a565a..5f80837c 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-modal/CreateTodoMemoField.tsx
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-modal/CreateTodoMemoField.tsx
@@ -1,3 +1,11 @@
+const MEMO_MAX_LENGTH = 300;
+
+const resizeTextarea = (element: HTMLTextAreaElement | null) => {
+  if (!element) return;
+  element.style.height = "auto";
+  element.style.height = `${element.scrollHeight}px`;
+};
+
 export interface CreateTodoMemoFieldProps {
   value: string;
   placeholder: string;
@@ -12,10 +20,13 @@ export const CreateTodoMemoField = ({
   return (
     <textarea
       value={value}
+      ref={resizeTextarea}
       onChange={(event) => onChange(event.target.value)}
+      onInput={(event) => resizeTextarea(event.currentTarget)}
       placeholder={placeholder}
+      maxLength={MEMO_MAX_LENGTH}
       rows={1}
-      className="typo-body-r-12 text-timo-gray-800 w-full resize-none outline-none"
+      className="typo-body-r-12 text-timo-gray-800 max-h-[40vh] w-full resize-none overflow-y-auto wrap-break-word outline-none"
     />
   );
 };

From 994540d3ef533821975f74711ccfb80e27cb5ca1 Mon Sep 17 00:00:00 2001
From: kimminna <kmina121777@naver.com>
Date: Mon, 13 Jul 2026 00:09:46 +0900
Subject: [PATCH 3/6] =?UTF-8?q?feat(web):=20=ED=95=98=EC=9C=84=20=ED=83=9C?=
 =?UTF-8?q?=EC=8A=A4=ED=81=AC=20=EB=8B=A4=EC=A4=91=20=EC=9E=85=EB=A0=A5=20?=
 =?UTF-8?q?=EB=B0=8F=20=ED=88=AC=EB=91=90=EB=AA=85=20=EA=B8=80=EC=9E=90=20?=
 =?UTF-8?q?=EC=88=98=20=EC=A0=9C=ED=95=9C=20=EA=B5=AC=ED=98=84=20(#157)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 하위 태스크 입력 중 Enter 시 최대 10개까지 필드를 추가하고, 빈 값에서 Backspace 시 필드를 삭제하도록 구현했습니다
- 투두명/하위 태스크 텍스트 폭 초과 시 자동 줄바꿈되도록 textarea 기반으로 변경했습니다
- 투두명 길이를 한국어 20자/영어 30자 기준 가중치로 제한하고, 계산 로직을 유틸로 분리했습니다
---
 .../todo-modal/CreateTodoTaskFields.tsx       | 76 ++++++++++-----
 .../todo-modal/CreateTodoModalContent.tsx     | 39 ++++----
 .../_hooks/todo-modal/use-subtask-field.ts    | 93 +++++++++++++++++++
 .../home/_hooks/todo-modal/use-title-field.ts | 26 ++++++
 .../home/_utils/text-length.ts                | 55 +++++++++++
 5 files changed, 246 insertions(+), 43 deletions(-)
 create mode 100644 apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-subtask-field.ts
 create mode 100644 apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-title-field.ts
 create mode 100644 apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_utils/text-length.ts

diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-modal/CreateTodoTaskFields.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-modal/CreateTodoTaskFields.tsx
index 8259c706..9b9f5936 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-modal/CreateTodoTaskFields.tsx
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-modal/CreateTodoTaskFields.tsx
@@ -1,42 +1,76 @@
 import { Checkbox } from "@repo/timo-design-system/ui";
 
-import type { CreateTodoRequest } from "@/api/todo/todo-schema";
-import type { UseFormRegister } from "react-hook-form";
+import type { KeyboardEvent } from "react";
+
+const resizeTextarea = (element: HTMLTextAreaElement | null) => {
+  if (!element) return;
+  element.style.height = "auto";
+  element.style.height = `${element.scrollHeight}px`;
+};
 
 export interface CreateTodoTaskFieldsProps {
-  register: UseFormRegister<CreateTodoRequest>;
+  titleValue: string;
   titlePlaceholder: string;
-  subtaskInput: string;
+  onTitleChange: (value: string) => void;
+  subtaskInputs: string[];
   subtaskPlaceholder: string;
-  onSubtaskInputChange: (value: string) => void;
+  registerSubtaskInputRef: (
+    index: number,
+  ) => (element: HTMLTextAreaElement | null) => void;
+  onSubtaskInputChange: (index: number, value: string) => void;
+  onSubtaskInputKeyDown: (
+    index: number,
+    event: KeyboardEvent<HTMLTextAreaElement>,
+  ) => void;
 }
 
 export const CreateTodoTaskFields = ({
-  register,
+  titleValue,
   titlePlaceholder,
-  subtaskInput,
+  onTitleChange,
+  subtaskInputs,
   subtaskPlaceholder,
+  registerSubtaskInputRef,
   onSubtaskInputChange,
+  onSubtaskInputKeyDown,
 }: CreateTodoTaskFieldsProps) => {
   return (
     <div className="flex w-full flex-col items-start gap-1.5">
-      <div className="flex w-full items-center gap-2">
-        <Checkbox checked={false} onChange={() => {}} disabled />
-        <input
-          {...register("title")}
+      <div className="flex w-full items-center justify-center gap-2">
+        <Checkbox checked={false} onChange={() => {}} />
+        <textarea
+          value={titleValue}
+          ref={resizeTextarea}
+          onChange={(event) => {
+            onTitleChange(event.target.value);
+            resizeTextarea(event.currentTarget);
+          }}
           placeholder={titlePlaceholder}
-          className="typo-headline-b-14 text-timo-black min-w-0 flex-1 outline-none"
-        />
-      </div>
-      <div className="flex w-full items-center gap-2">
-        <Checkbox checked={false} onChange={() => {}} disabled />
-        <input
-          value={subtaskInput}
-          onChange={(event) => onSubtaskInputChange(event.target.value)}
-          placeholder={subtaskPlaceholder}
-          className="typo-body-r-12 text-timo-gray-800 min-w-0 flex-1 outline-none"
+          rows={1}
+          className="typo-headline-b-14 text-timo-black min-w-0 flex-1 resize-none overflow-hidden wrap-break-word outline-none"
         />
       </div>
+
+      {subtaskInputs.map((value, index) => (
+        <div
+          key={index}
+          className="flex w-full items-center justify-center gap-2"
+        >
+          <Checkbox checked={false} onChange={() => {}} />
+          <textarea
+            value={value}
+            ref={registerSubtaskInputRef(index)}
+            onChange={(event) => {
+              onSubtaskInputChange(index, event.target.value);
+              resizeTextarea(event.currentTarget);
+            }}
+            onKeyDown={(event) => onSubtaskInputKeyDown(index, event)}
+            placeholder={subtaskPlaceholder}
+            rows={1}
+            className="typo-body-r-12 text-timo-gray-800 min-w-0 flex-1 resize-none overflow-hidden wrap-break-word outline-none"
+          />
+        </div>
+      ))}
     </div>
   );
 };
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/todo-modal/CreateTodoModalContent.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/todo-modal/CreateTodoModalContent.tsx
index c4bf70ff..9489bcb3 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/todo-modal/CreateTodoModalContent.tsx
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/todo-modal/CreateTodoModalContent.tsx
@@ -4,8 +4,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { DeleteIcon } from "@repo/timo-design-system/icons";
 import { CreateButton, TodoToolbar } from "@repo/timo-design-system/ui";
 import { useTranslations } from "next-intl";
-import { useState } from "react";
-import { useController, useForm, useWatch } from "react-hook-form";
+import { useController, useForm } from "react-hook-form";
 
 import type { CreateTodoRequest } from "@/api/todo/todo-schema";
 import type { PriorityLevel } from "@repo/timo-design-system/ui";
@@ -16,11 +15,13 @@ import { CreateTodoMemoField } from "@/app/[locale]/(main)/(with-time-sidebar)/h
 import { CreateTodoTaskFields } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-modal/CreateTodoTaskFields";
 import { useIconField } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-icon-field";
 import { useRepeatField } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-repeat-field";
+import { useSubtaskField } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-subtask-field";
 import {
   DEFAULT_TAG,
   useTagField,
 } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-tag-field";
 import { useTimeField } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-time-field";
+import { useTitleField } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-title-field";
 import { formatDateToIsoDate } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_utils/date";
 import { OverlayModal } from "@/components/modal/OverlayModal";
 import { AnimatedToast } from "@/components/toast/AnimatedToast";
@@ -63,15 +64,11 @@ export const CreateTodoModalContent = ({
   const tCommon = useTranslations("Common");
   const tToast = useTranslations("Toast");
 
-  const [subtaskInput, setSubtaskInput] = useState("");
-
-  const { register, control, handleSubmit, setValue, reset } =
-    useForm<CreateTodoRequest>({
-      resolver: zodResolver(createTodoRequestSchema),
-      defaultValues: createDefaultValues(defaultDate),
-    });
+  const { control, handleSubmit, reset } = useForm<CreateTodoRequest>({
+    resolver: zodResolver(createTodoRequestSchema),
+    defaultValues: createDefaultValues(defaultDate),
+  });
 
-  const title = useWatch({ control, name: "title" });
   const { field: dateField } = useController({ name: "date", control });
   const { field: memoField } = useController({ name: "memo", control });
   const { field: priorityField } = useController({
@@ -83,25 +80,20 @@ export const CreateTodoModalContent = ({
   const tagField = useTagField({ control });
   const timeField = useTimeField({ control });
   const repeatField = useRepeatField({ control });
+  const subtaskField = useSubtaskField({ control });
+  const titleField = useTitleField({ control });
 
   const dateValue = dateField.value
     ? new Date(`${dateField.value}T00:00:00`)
     : undefined;
 
-  const handleSubtaskInputChange = (value: string) => {
-    setSubtaskInput(value);
-    setValue("subtasks", value.trim() ? [value] : [], {
-      shouldValidate: true,
-    });
-  };
-
   const handleFormSubmit = (data: CreateTodoRequest) => {
     const tag = tagField.selectedTagOption ?? DEFAULT_TAG;
 
     onSubmit(data, { id: data.tagId ?? tag.id, name: tag.name });
 
     reset(createDefaultValues(defaultDate));
-    setSubtaskInput("");
+    subtaskField.reset();
     timeField.resetTime();
     onClose();
   };
@@ -142,11 +134,14 @@ export const CreateTodoModalContent = ({
             />
 
             <CreateTodoTaskFields
-              register={register}
+              titleValue={titleField.title}
               titlePlaceholder={t("createModal.titlePlaceholder")}
-              subtaskInput={subtaskInput}
+              onTitleChange={titleField.handleTitleChange}
+              subtaskInputs={subtaskField.subtaskInputs}
               subtaskPlaceholder={t("createModal.subtaskPlaceholder")}
-              onSubtaskInputChange={handleSubtaskInputChange}
+              registerSubtaskInputRef={subtaskField.registerInputRef}
+              onSubtaskInputChange={subtaskField.handleInputChange}
+              onSubtaskInputKeyDown={subtaskField.handleInputKeyDown}
             />
           </div>
 
@@ -214,7 +209,7 @@ export const CreateTodoModalContent = ({
 
           <CreateButton
             label={t("createModal.create")}
-            disabled={!title.trim()}
+            disabled={!titleField.title.trim()}
             onClick={handleSubmit(handleFormSubmit)}
           />
         </div>
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-subtask-field.ts b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-subtask-field.ts
new file mode 100644
index 00000000..fb39a706
--- /dev/null
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-subtask-field.ts
@@ -0,0 +1,93 @@
+import { useEffect, useRef, useState } from "react";
+import { useController } from "react-hook-form";
+
+import type { CreateTodoRequest } from "@/api/todo/todo-schema";
+import type { KeyboardEvent } from "react";
+import type { Control } from "react-hook-form";
+
+const MAX_SUBTASK_COUNT = 10;
+
+export interface UseSubtaskFieldParams {
+  control: Control<CreateTodoRequest>;
+}
+
+export const useSubtaskField = ({ control }: UseSubtaskFieldParams) => {
+  const { field } = useController({ name: "subtasks", control });
+  const [subtaskInputs, setSubtaskInputs] = useState<string[]>([""]);
+  const inputRefs = useRef<Array<HTMLTextAreaElement | null>>([]);
+  const pendingFocusIndex = useRef<number | null>(null);
+
+  useEffect(() => {
+    if (pendingFocusIndex.current === null) return;
+
+    const index = pendingFocusIndex.current;
+    pendingFocusIndex.current = null;
+
+    const element = inputRefs.current[index];
+    if (!element) return;
+
+    element.focus();
+    const caretPosition = element.value.length;
+    element.setSelectionRange(caretPosition, caretPosition);
+  }, [subtaskInputs.length]);
+
+  const syncFormValue = (inputs: string[]) => {
+    field.onChange(inputs.map((input) => input.trim()).filter(Boolean));
+  };
+
+  const registerInputRef =
+    (index: number) => (element: HTMLTextAreaElement | null) => {
+      inputRefs.current[index] = element;
+    };
+
+  const handleInputChange = (index: number, value: string) => {
+    setSubtaskInputs((prev) => {
+      const next = prev.map((input, i) => (i === index ? value : input));
+      syncFormValue(next);
+      return next;
+    });
+  };
+
+  const handleInputKeyDown = (
+    index: number,
+    event: KeyboardEvent<HTMLTextAreaElement>,
+  ) => {
+    if (event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault();
+
+      setSubtaskInputs((prev) => {
+        const isLastField = index === prev.length - 1;
+        const hasValue = Boolean(prev[index]?.trim());
+        const canAddMore = prev.length < MAX_SUBTASK_COUNT;
+
+        if (!isLastField || !hasValue || !canAddMore) return prev;
+
+        pendingFocusIndex.current = prev.length;
+        return [...prev, ""];
+      });
+      return;
+    }
+
+    const isFieldEmpty = subtaskInputs[index] === "";
+    const canMergeIntoPrevious = index > 0;
+
+    if (event.key === "Backspace" && isFieldEmpty && canMergeIntoPrevious) {
+      event.preventDefault();
+      pendingFocusIndex.current = index - 1;
+      setSubtaskInputs((prev) => prev.filter((_, i) => i !== index));
+    }
+  };
+
+  const reset = () => {
+    setSubtaskInputs([""]);
+    inputRefs.current = [];
+  };
+
+  return {
+    subtaskInputs,
+    registerInputRef,
+    handleInputChange,
+    handleInputKeyDown,
+    reset,
+  };
+};
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-title-field.ts b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-title-field.ts
new file mode 100644
index 00000000..31efcae7
--- /dev/null
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-title-field.ts
@@ -0,0 +1,26 @@
+import { useController } from "react-hook-form";
+
+import type { CreateTodoRequest } from "@/api/todo/todo-schema";
+import type { Control } from "react-hook-form";
+
+import {
+  TITLE_MAX_WEIGHTED_LENGTH,
+  truncateToWeightedLength,
+} from "@/app/[locale]/(main)/(with-time-sidebar)/home/_utils/text-length";
+
+export interface UseTitleFieldParams {
+  control: Control<CreateTodoRequest>;
+}
+
+export const useTitleField = ({ control }: UseTitleFieldParams) => {
+  const { field } = useController({ name: "title", control });
+
+  const handleTitleChange = (value: string) => {
+    field.onChange(truncateToWeightedLength(value, TITLE_MAX_WEIGHTED_LENGTH));
+  };
+
+  return {
+    title: field.value,
+    handleTitleChange,
+  };
+};
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_utils/text-length.ts b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_utils/text-length.ts
new file mode 100644
index 00000000..c6139bad
--- /dev/null
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_utils/text-length.ts
@@ -0,0 +1,55 @@
+const HANGUL_CHAR_WEIGHT = 1.5;
+const DEFAULT_CHAR_WEIGHT = 1;
+
+/**
+ * 투두명(title) 입력 제한에 사용하는 최대 가중 길이.
+ * 한글 문자 가중치(1.5)를 적용하면 한국어 20자(20 * 1.5 = 30) 또는
+ * 영어 30자(30 * 1 = 30)까지 입력 가능한 것과 동일한 값이다.
+ */
+export const TITLE_MAX_WEIGHTED_LENGTH = 30;
+
+const HANGUL_RANGES: Array<[number, number]> = [
+  [0x1100, 0x11ff], // Hangul Jamo
+  [0x3130, 0x318f], // Hangul Compatibility Jamo
+  [0xac00, 0xd7a3], // Hangul Syllables
+];
+
+const isHangulChar = (char: string): boolean => {
+  const code = char.codePointAt(0) ?? 0;
+  return HANGUL_RANGES.some(([start, end]) => code >= start && code <= end);
+};
+
+const getCharWeight = (char: string): number =>
+  isHangulChar(char) ? HANGUL_CHAR_WEIGHT : DEFAULT_CHAR_WEIGHT;
+
+/**
+ * 문자열의 가중 길이를 계산한다. 한글 문자는 1.5, 그 외 문자는 1로 계산한다.
+ * @param value - 길이를 계산할 문자열
+ * @returns 가중치가 적용된 길이
+ */
+export const getWeightedLength = (value: string): number =>
+  Array.from(value).reduce((total, char) => total + getCharWeight(char), 0);
+
+/**
+ * 문자열을 주어진 가중 길이 한도에 맞춰 잘라낸다. 한글 문자는 1.5, 그 외 문자는
+ * 1의 가중치로 계산하며, 한도를 초과하는 지점부터는 잘려나간다.
+ * @param value - 잘라낼 문자열
+ * @param maxWeightedLength - 허용되는 최대 가중 길이
+ * @returns 가중 길이 한도를 넘지 않는 범위로 잘라낸 문자열
+ */
+export const truncateToWeightedLength = (
+  value: string,
+  maxWeightedLength: number,
+): string => {
+  let total = 0;
+  let result = "";
+
+  for (const char of Array.from(value)) {
+    const next = total + getCharWeight(char);
+    if (next > maxWeightedLength) break;
+    total = next;
+    result += char;
+  }
+
+  return result;
+};

From 602537314595fbe89cd453ef9857303c494ae2d4 Mon Sep 17 00:00:00 2001
From: kimminna <kmina121777@naver.com>
Date: Mon, 13 Jul 2026 00:22:30 +0900
Subject: [PATCH 4/6] =?UTF-8?q?fix(web):=20=EC=99=84=EB=A3=8C=EB=90=9C=20?=
 =?UTF-8?q?=ED=88=AC=EB=91=90=20=EC=B2=B4=ED=81=AC=EB=B0=95=EC=8A=A4=20?=
 =?UTF-8?q?=EB=B9=84=ED=99=9C=EC=84=B1=ED=99=94=20=EC=A0=9C=EA=B1=B0=20(#1?=
 =?UTF-8?q?57)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 완료된 투두/하위 태스크의 체크박스가 비활성화되어 다시 되돌릴 수 없던 문제를 수정했습니다
---
 .../home/_components/todo-card/HomeTodoCard.tsx            | 7 +------
 1 file changed, 1 insertion(+), 6 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 054b37a3..9d6120a9 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
@@ -84,11 +84,7 @@ export const HomeTodoCard = ({
   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">
-        <Checkbox
-          checked={isCompleted}
-          onChange={onToggleCompleted}
-          disabled={isCompleted}
-        />
+        <Checkbox checked={isCompleted} onChange={onToggleCompleted} />
         <p
           className={cn(
             "typo-body-sb-12 min-w-0 flex-1 truncate",
@@ -133,7 +129,6 @@ export const HomeTodoCard = ({
             <Checkbox
               checked={isSubtaskCompleted}
               onChange={(checked) => onToggleSubtaskCompleted?.(checked)}
-              disabled={isCompleted}
             />
             <p className="typo-body-r-12 text-timo-gray-700 min-w-0 flex-1 truncate">
               {subtaskTitle}

From 847e7040ee7530a05e0004b521c40c9df0accf44 Mon Sep 17 00:00:00 2001
From: kimminna <kmina121777@naver.com>
Date: Mon, 13 Jul 2026 00:48:29 +0900
Subject: [PATCH 5/6] =?UTF-8?q?fix(web):=20=ED=95=98=EC=9C=84=20=ED=83=9C?=
 =?UTF-8?q?=EC=8A=A4=ED=81=AC=20=EB=AA=A9=EB=A1=9D=EC=97=90=20=EC=95=88?=
 =?UTF-8?q?=EC=A0=95=EC=A0=81=EC=9D=B8=20id=20=EA=B8=B0=EB=B0=98=20key=20?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9=20(#157)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 하위 태스크를 {id, value} 객체로 관리하도록 변경했습니다
- index 대신 고유 id를 리스트 key로 사용해 중간 항목 삭제 시 엉뚱한 DOM 노드가 재사용되는 문제를 방지했습니다
---
 .../todo-modal/CreateTodoTaskFields.tsx       |  9 +++---
 .../_hooks/todo-modal/use-subtask-field.ts    | 31 ++++++++++++++-----
 2 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-modal/CreateTodoTaskFields.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-modal/CreateTodoTaskFields.tsx
index 9b9f5936..57949de5 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-modal/CreateTodoTaskFields.tsx
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-modal/CreateTodoTaskFields.tsx
@@ -1,5 +1,6 @@
 import { Checkbox } from "@repo/timo-design-system/ui";
 
+import type { SubtaskInputEntry } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-subtask-field";
 import type { KeyboardEvent } from "react";
 
 const resizeTextarea = (element: HTMLTextAreaElement | null) => {
@@ -12,7 +13,7 @@ export interface CreateTodoTaskFieldsProps {
   titleValue: string;
   titlePlaceholder: string;
   onTitleChange: (value: string) => void;
-  subtaskInputs: string[];
+  subtaskInputs: SubtaskInputEntry[];
   subtaskPlaceholder: string;
   registerSubtaskInputRef: (
     index: number,
@@ -51,14 +52,14 @@ export const CreateTodoTaskFields = ({
         />
       </div>
 
-      {subtaskInputs.map((value, index) => (
+      {subtaskInputs.map((entry, index) => (
         <div
-          key={index}
+          key={entry.id}
           className="flex w-full items-center justify-center gap-2"
         >
           <Checkbox checked={false} onChange={() => {}} />
           <textarea
-            value={value}
+            value={entry.value}
             ref={registerSubtaskInputRef(index)}
             onChange={(event) => {
               onSubtaskInputChange(index, event.target.value);
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-subtask-field.ts b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-subtask-field.ts
index fb39a706..9e327baa 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-subtask-field.ts
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-subtask-field.ts
@@ -7,13 +7,26 @@ import type { Control } from "react-hook-form";
 
 const MAX_SUBTASK_COUNT = 10;
 
+export interface SubtaskInputEntry {
+  id: number;
+  value: string;
+}
+
 export interface UseSubtaskFieldParams {
   control: Control<CreateTodoRequest>;
 }
 
 export const useSubtaskField = ({ control }: UseSubtaskFieldParams) => {
   const { field } = useController({ name: "subtasks", control });
-  const [subtaskInputs, setSubtaskInputs] = useState<string[]>([""]);
+  const nextEntryId = useRef(0);
+  const createEntry = (value = ""): SubtaskInputEntry => ({
+    id: nextEntryId.current++,
+    value,
+  });
+
+  const [subtaskInputs, setSubtaskInputs] = useState<SubtaskInputEntry[]>(
+    () => [createEntry()],
+  );
   const inputRefs = useRef<Array<HTMLTextAreaElement | null>>([]);
   const pendingFocusIndex = useRef<number | null>(null);
 
@@ -31,8 +44,8 @@ export const useSubtaskField = ({ control }: UseSubtaskFieldParams) => {
     element.setSelectionRange(caretPosition, caretPosition);
   }, [subtaskInputs.length]);
 
-  const syncFormValue = (inputs: string[]) => {
-    field.onChange(inputs.map((input) => input.trim()).filter(Boolean));
+  const syncFormValue = (entries: SubtaskInputEntry[]) => {
+    field.onChange(entries.map((entry) => entry.value.trim()).filter(Boolean));
   };
 
   const registerInputRef =
@@ -42,7 +55,9 @@ export const useSubtaskField = ({ control }: UseSubtaskFieldParams) => {
 
   const handleInputChange = (index: number, value: string) => {
     setSubtaskInputs((prev) => {
-      const next = prev.map((input, i) => (i === index ? value : input));
+      const next = prev.map((entry, i) =>
+        i === index ? { ...entry, value } : entry,
+      );
       syncFormValue(next);
       return next;
     });
@@ -57,18 +72,18 @@ export const useSubtaskField = ({ control }: UseSubtaskFieldParams) => {
 
       setSubtaskInputs((prev) => {
         const isLastField = index === prev.length - 1;
-        const hasValue = Boolean(prev[index]?.trim());
+        const hasValue = Boolean(prev[index]?.value.trim());
         const canAddMore = prev.length < MAX_SUBTASK_COUNT;
 
         if (!isLastField || !hasValue || !canAddMore) return prev;
 
         pendingFocusIndex.current = prev.length;
-        return [...prev, ""];
+        return [...prev, createEntry()];
       });
       return;
     }
 
-    const isFieldEmpty = subtaskInputs[index] === "";
+    const isFieldEmpty = subtaskInputs[index]?.value === "";
     const canMergeIntoPrevious = index > 0;
 
     if (event.key === "Backspace" && isFieldEmpty && canMergeIntoPrevious) {
@@ -79,7 +94,7 @@ export const useSubtaskField = ({ control }: UseSubtaskFieldParams) => {
   };
 
   const reset = () => {
-    setSubtaskInputs([""]);
+    setSubtaskInputs([createEntry()]);
     inputRefs.current = [];
   };
 

From 8cc09daf11a448e8f518615c3c373746e16a1d9d Mon Sep 17 00:00:00 2001
From: kimminna <kmina121777@naver.com>
Date: Mon, 13 Jul 2026 03:10:52 +0900
Subject: [PATCH 6/6] =?UTF-8?q?refactor(web):=20=ED=95=98=EC=9C=84=20?=
 =?UTF-8?q?=ED=83=9C=EC=8A=A4=ED=81=AC=20=EC=9E=85=EB=A0=A5=20=EC=97=94?=
 =?UTF-8?q?=ED=84=B0=C2=B7=EB=B0=B1=EC=8A=A4=ED=8E=98=EC=9D=B4=EC=8A=A4=20?=
 =?UTF-8?q?=EB=A1=9C=EC=A7=81=EC=9D=84=20=EA=B3=B5=ED=86=B5=20=EC=9C=A0?=
 =?UTF-8?q?=ED=8B=B8=EB=A1=9C=20=EB=B6=84=EB=A6=AC=20(#157)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 하위 태스크 입력 필드에서 Enter로 추가, Backspace로 병합·삭제하는 로직을 순수 함수(addSubtaskInputOnEnter, removeSubtaskInputOnBackspace)로 분리했습니다
- 도메인 종속 유틸이 아닌 공통 유틸(apps/timo-web/utils/todo)로 이동해 재사용 가능하도록 구조화했습니다
- 관련 타입 import 경로를 새 유틸 위치로 갱신했습니다
---
 .../todo-modal/CreateTodoTaskFields.tsx       |  2 +-
 .../_hooks/todo-modal/use-subtask-field.ts    | 44 +++++++------
 .../timo-web/utils/todo/subtask-input-list.ts | 62 +++++++++++++++++++
 3 files changed, 88 insertions(+), 20 deletions(-)
 create mode 100644 apps/timo-web/utils/todo/subtask-input-list.ts

diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-modal/CreateTodoTaskFields.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-modal/CreateTodoTaskFields.tsx
index 57949de5..e69118e7 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-modal/CreateTodoTaskFields.tsx
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-modal/CreateTodoTaskFields.tsx
@@ -1,6 +1,6 @@
 import { Checkbox } from "@repo/timo-design-system/ui";
 
-import type { SubtaskInputEntry } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-subtask-field";
+import type { SubtaskInputEntry } from "@/utils/todo/subtask-input-list";
 import type { KeyboardEvent } from "react";
 
 const resizeTextarea = (element: HTMLTextAreaElement | null) => {
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-subtask-field.ts b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-subtask-field.ts
index 9e327baa..c9a6c56a 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-subtask-field.ts
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-subtask-field.ts
@@ -2,15 +2,16 @@ import { useEffect, useRef, useState } from "react";
 import { useController } from "react-hook-form";
 
 import type { CreateTodoRequest } from "@/api/todo/todo-schema";
+import type { SubtaskInputEntry } from "@/utils/todo/subtask-input-list";
 import type { KeyboardEvent } from "react";
 import type { Control } from "react-hook-form";
 
-const MAX_SUBTASK_COUNT = 10;
+import {
+  addSubtaskInputOnEnter,
+  removeSubtaskInputOnBackspace,
+} from "@/utils/todo/subtask-input-list";
 
-export interface SubtaskInputEntry {
-  id: number;
-  value: string;
-}
+const MAX_SUBTASK_COUNT = 10;
 
 export interface UseSubtaskFieldParams {
   control: Control<CreateTodoRequest>;
@@ -71,25 +72,30 @@ export const useSubtaskField = ({ control }: UseSubtaskFieldParams) => {
       event.preventDefault();
 
       setSubtaskInputs((prev) => {
-        const isLastField = index === prev.length - 1;
-        const hasValue = Boolean(prev[index]?.value.trim());
-        const canAddMore = prev.length < MAX_SUBTASK_COUNT;
-
-        if (!isLastField || !hasValue || !canAddMore) return prev;
-
-        pendingFocusIndex.current = prev.length;
-        return [...prev, createEntry()];
+        const { entries, focusIndex } = addSubtaskInputOnEnter(
+          prev,
+          index,
+          createEntry,
+          MAX_SUBTASK_COUNT,
+        );
+
+        if (focusIndex !== null) pendingFocusIndex.current = focusIndex;
+        return entries;
       });
       return;
     }
 
-    const isFieldEmpty = subtaskInputs[index]?.value === "";
-    const canMergeIntoPrevious = index > 0;
+    if (event.key === "Backspace") {
+      const { entries, focusIndex } = removeSubtaskInputOnBackspace(
+        subtaskInputs,
+        index,
+      );
 
-    if (event.key === "Backspace" && isFieldEmpty && canMergeIntoPrevious) {
-      event.preventDefault();
-      pendingFocusIndex.current = index - 1;
-      setSubtaskInputs((prev) => prev.filter((_, i) => i !== index));
+      if (focusIndex !== null) {
+        event.preventDefault();
+        pendingFocusIndex.current = focusIndex;
+        setSubtaskInputs(entries);
+      }
     }
   };
 
diff --git a/apps/timo-web/utils/todo/subtask-input-list.ts b/apps/timo-web/utils/todo/subtask-input-list.ts
new file mode 100644
index 00000000..12602596
--- /dev/null
+++ b/apps/timo-web/utils/todo/subtask-input-list.ts
@@ -0,0 +1,62 @@
+export interface SubtaskInputEntry {
+  id: number;
+  value: string;
+}
+
+export interface SubtaskInputListChange {
+  entries: SubtaskInputEntry[];
+  focusIndex: number | null;
+}
+
+/**
+ * Enter 입력 시 하위 태스크 입력 필드를 추가한다. 마지막 필드에서 값이 있고
+ * 최대 개수를 넘지 않을 때만 새 필드를 추가하며, 그 외에는 원본 목록을 그대로 반환한다.
+ * @param entries - 현재 하위 태스크 입력 목록
+ * @param index - Enter가 입력된 필드의 인덱스
+ * @param createEntry - 새로 추가할 입력 엔트리를 생성하는 함수
+ * @param maxCount - 허용되는 최대 입력 필드 개수
+ * @returns 갱신된 입력 목록과 포커스를 이동할 인덱스(변경 없으면 null)
+ */
+export const addSubtaskInputOnEnter = (
+  entries: SubtaskInputEntry[],
+  index: number,
+  createEntry: () => SubtaskInputEntry,
+  maxCount: number,
+): SubtaskInputListChange => {
+  const isLastField = index === entries.length - 1;
+  const hasValue = Boolean(entries[index]?.value.trim());
+  const canAddMore = entries.length < maxCount;
+
+  if (!isLastField || !hasValue || !canAddMore) {
+    return { entries, focusIndex: null };
+  }
+
+  return {
+    entries: [...entries, createEntry()],
+    focusIndex: entries.length,
+  };
+};
+
+/**
+ * Backspace 입력 시 빈 하위 태스크 입력 필드를 이전 필드로 병합(삭제)한다.
+ * 필드가 비어 있고 이전 필드가 존재할 때만 제거하며, 그 외에는 원본 목록을 그대로 반환한다.
+ * @param entries - 현재 하위 태스크 입력 목록
+ * @param index - Backspace가 입력된 필드의 인덱스
+ * @returns 갱신된 입력 목록과 포커스를 이동할 인덱스(변경 없으면 null)
+ */
+export const removeSubtaskInputOnBackspace = (
+  entries: SubtaskInputEntry[],
+  index: number,
+): SubtaskInputListChange => {
+  const isFieldEmpty = entries[index]?.value === "";
+  const canMergeIntoPrevious = index > 0;
+
+  if (!isFieldEmpty || !canMergeIntoPrevious) {
+    return { entries, focusIndex: null };
+  }
+
+  return {
+    entries: entries.filter((_, i) => i !== index),
+    focusIndex: index - 1,
+  };
+};