[FEAT] Add task 버튼 클릭 시 투두 20개 제한 토스트 추가

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

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

apps/timo-web/components/todo-modal/create/CreateTodoModalContainer.tsx

@@ -3,31 +3,42 @@
 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";
 
 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>
+          </>
+        }
+      />
     </>
   );
 };

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

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.",

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 추천 소요 시간을 가져오지 못했어요. 다시 시도해 주세요.",