FIX: 바텀시트 컴포넌트 취소 완료 버튼 추가 및 trigger 추가

Author: Wonchang0314

src/feature/todo/weeklyTodoList/components/AddTodoButton.tsx

@@ -37,6 +37,7 @@ export const AddTodoButton = ({ goal, selectedPlanId, selectedDate }: AddTodoBut
       showToast('투두가 추가되었습니다.', 'success');
     },
     onError: error => {
+      setOpen(false);
       showToast(error?.response?.data.message || '투두 추가에 실패했습니다.', 'error');
     },
   });
@@ -46,7 +47,9 @@ export const AddTodoButton = ({ goal, selectedPlanId, selectedDate }: AddTodoBut
     handleSubmit,
     setValue,
     watch,
-    formState: { errors, isValid },
+    trigger,
+    clearErrors,
+    formState: { errors },
     reset,
   } = useForm<AddTodoFormData>({
     mode: 'onChange',
@@ -56,7 +59,6 @@ export const AddTodoButton = ({ goal, selectedPlanId, selectedDate }: AddTodoBut
     },
   });
 
-  const watchedContent = watch('content');
   const watchedSelectedDate = watch('selectedDate');
   const startDate = new Date(goal.duration.startDate);
   const endDate = new Date(goal.duration.endDate);
@@ -83,7 +85,17 @@ export const AddTodoButton = ({ goal, selectedPlanId, selectedDate }: AddTodoBut
     setValue('selectedDate', date, { shouldValidate: true });
   };
 
+  const handleCompleteClick = async () => {
+    const isFormValid = await trigger(['content', 'selectedDate']);
+
+    if (!isFormValid) {
+      return;
+    }
+    handleSubmit(onSubmit)();
+  };
+
   const handlePlusClick = () => {
+    clearErrors(); // Sheet를 열 때 에러 상태 초기화
     trackButtonClick({
       eventName: GTM_EVENTS.HOME_TODO_CLICK,
       buttonName: GTM_BUTTON_NAME.ADD_TODO,
@@ -103,6 +115,7 @@ export const AddTodoButton = ({ goal, selectedPlanId, selectedDate }: AddTodoBut
         buttonName: GTM_BUTTON_NAME.ADD_TODO_SHEET,
       });
       reset({ content: '', selectedDate: selectedDate || undefined });
+      clearErrors(); // 에러 상태 초기화
     }
   };
 
@@ -138,7 +151,7 @@ export const AddTodoButton = ({ goal, selectedPlanId, selectedDate }: AddTodoBut
               onClick={() => setOpen(false)}
               className="label-1-normal font-bold text-status-negative"
             >
-              닫기
+              취소
             </button>
             <DateSelector
               selectedDate={watchedSelectedDate}
@@ -149,8 +162,8 @@ export const AddTodoButton = ({ goal, selectedPlanId, selectedDate }: AddTodoBut
             />
             <button
               type="button"
-              onClick={handleSubmit(onSubmit)}
-              disabled={loading || !isValid}
+              onClick={handleCompleteClick}
+              disabled={loading}
               className="label-1-normal font-bold text-label-normal"
             >
               완료

src/feature/todo/weeklyTodoList/components/DateSelector.tsx

@@ -1,10 +1,9 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { Sheet, SheetContent, SheetTrigger } from '@/shared/components/ui/sheet';
 import DateSelectorPanel from './DateSelectorPanel';
 import { useGTMActions } from '@/shared/hooks/useGTM';
 import { GTM_BUTTON_NAME, GTM_EVENTS } from '@/shared/constants/gtm-events';
 import { Z_INDEX } from '@/shared/lib/z-index';
-import { XIcon } from 'lucide-react';
 
 interface DateSelectorProps {
   selectedDate: Date | undefined;
@@ -23,23 +22,28 @@ export const DateSelector = ({
 }: DateSelectorProps) => {
   const [open, setOpen] = useState(false);
   const [focusedDate, setFocusedDate] = useState<Date | undefined>(selectedDate);
+  const [selectedDateLocal, setSelectedDateLocal] = useState<Date | undefined>(selectedDate);
   const { trackButtonClick } = useGTMActions();
 
+  // selectedDate prop이 변경될 때 내부 상태 동기화
+  useEffect(() => {
+    setSelectedDateLocal(selectedDate);
+    setFocusedDate(selectedDate);
+  }, [selectedDate]);
+
   const formatDate = (date: Date) => {
     const year = date.getFullYear().toString().slice(-2);
     const month = String(date.getMonth() + 1).padStart(2, '0');
     const day = String(date.getDate()).padStart(2, '0');
     return `${year}-${month}-${day}`;
   };
 
-  const handleDateSelect = (date: Date) => {
-    onDateSelect(date);
-    setOpen(false);
-  };
-
   const handleOpenChange = (newOpen: boolean) => {
     setOpen(newOpen);
     if (newOpen) {
+      // Sheet가 열릴 때 selectedDate를 초기값으로 설정
+      setSelectedDateLocal(selectedDate);
+      setFocusedDate(selectedDate || new Date());
       trackButtonClick({
         eventName: GTM_EVENTS.SHEET_OPEN,
         buttonName: GTM_BUTTON_NAME.DATE_SELECTOR_SHEET,
@@ -52,6 +56,13 @@ export const DateSelector = ({
     }
   };
 
+  const handleComplete = () => {
+    if (selectedDateLocal) {
+      onDateSelect(selectedDateLocal);
+    }
+    setOpen(false);
+  };
+
   return (
     <Sheet open={open} onOpenChange={handleOpenChange}>
       <SheetTrigger asChild>
@@ -71,20 +82,31 @@ export const DateSelector = ({
           </button>
         </div> */}
         <div className="flex-1 p-4 space-y-4">
-          <div className="flex justify-end text-label-normal">
-            <button type="button" onClick={() => handleOpenChange(false)}>
-              <XIcon className="w-5 h-5" />
+          <div className="flex justify-between text-label-normal">
+            <button
+              type="button"
+              onClick={() => handleOpenChange(false)}
+              className="label-1-normal font-bold text-status-negative"
+            >
+              취소
+            </button>
+            <button
+              type="button"
+              onClick={handleComplete}
+              disabled={!selectedDateLocal}
+              className="label-1-normal font-bold"
+            >
+              완료
             </button>
           </div>
           <DateSelectorPanel
-            selectedDate={selectedDate}
+            selectedDate={selectedDateLocal}
             focusedDate={focusedDate || new Date()}
             isStartDate={false}
             minDate={minDate}
             maxDate={maxDate}
-            onDateSelect={handleDateSelect}
+            onDateSelect={setSelectedDateLocal}
             onFocusedDateChange={setFocusedDate}
-            onClose={() => handleOpenChange(false)}
           />
         </div>
       </SheetContent>

src/feature/todo/weeklyTodoList/components/DateSelectorPanel.tsx

@@ -12,22 +12,11 @@ interface DateSelectorPanelProps {
   maxDate?: Date; // 최대 선택 가능 날짜
   onDateSelect: (date: Date) => void;
   onFocusedDateChange: (date: Date) => void;
-  onClose: () => void;
 }
 
 const DateSelectorPanel = React.forwardRef<HTMLDivElement, DateSelectorPanelProps>(
   (
-    {
-      selectedDate,
-      focusedDate,
-      isStartDate,
-      allowedDaysOfWeek,
-      minDate,
-      maxDate,
-      onDateSelect,
-      onFocusedDateChange,
-      onClose,
-    },
+    { selectedDate, focusedDate, isStartDate, allowedDaysOfWeek, minDate, maxDate, onDateSelect, onFocusedDateChange },
     ref
   ) => {
     const [currentMonth, setCurrentMonth] = useState(focusedDate);
@@ -290,7 +279,7 @@ const DateSelectorPanel = React.forwardRef<HTMLDivElement, DateSelectorPanelProp
                 relative w-10 h-10 flex items-center justify-center label-1-regular rounded-full transition-colors
                 ${!isSelectable ? 'pointer-events-none text-label-assistive opacity-50' : ''}
                 ${isStartDate && day.getDay() !== 0 && 'pointer-events-none text-label-assistive'} 
-                ${isSelected ? 'bg-[var(--color-brand-neon)] text-black' : ''}
+                ${isSelected ? 'bg-[var(--color-brand-neon)]' : ''}
                 ${isFocused && !isSelected ? 'bg-gray-700 text-primary-normal' : ''}
                 ${!isInCurrentMonth ? 'text-gray-500' : ''}
                 ${isToday && !isSelected ? 'bg-gray-600' : ''}