[Bugfix] 임시 일정/할 일 삭제 시 서버 요청 방지

src/features/Calendar/components/EventDetailCard/EventDetailCard.style.ts

@@ -43,6 +43,7 @@ export const Content = styled.div`
 export const TextWrapper = styled.div`
   display: flex;
   flex-direction: column;
+  align-items: flex-start;
   gap: 8px;
 `
 

src/features/Calendar/hooks/useCalendarDraftEvent.ts

@@ -32,11 +32,16 @@ export const useCalendarDraftEvent = ({
   updateEventTiming,
 }: UseCalendarDraftEventArgs) => {
   const handleCloseModalWithCleanup = useCallback(() => {
-    if (!isModalEditing && modal.eventId != null) {
-      removeEvent(modal.eventId)
+    if (modal.eventId != null) {
+      const shouldRemoveDraft =
+        !isModalEditing ||
+        events.some((eventItem) => eventItem.id === modal.eventId && eventItem.isTemporary)
+      if (shouldRemoveDraft) {
+        removeEvent(modal.eventId)
+      }
     }
     handleCloseModal()
-  }, [handleCloseModal, isModalEditing, modal.eventId, removeEvent])
+  }, [events, handleCloseModal, isModalEditing, modal.eventId, removeEvent])
 
   const clearPendingDraftEvent = useCallback(() => {
     if (!modal.isOpen || isModalEditing || modal.eventId == null) return

src/features/Calendar/hooks/useCalendarEvents.ts

@@ -144,7 +144,9 @@ export const useCalendarEvents = (options: UseCalendarEventsOptions = {}) => {
   // 서버 응답 후 임시 이벤트 id를 실제 id로 교체
   const updateEventId = useCallback((tempId: CalendarEvent['id'], nextId: CalendarEvent['id']) => {
     setEvents((prev) =>
-      prev.map((event) => (event.id === tempId ? { ...event, id: nextId } : event)),
+      prev.map((event) =>
+        event.id === tempId ? { ...event, id: nextId, isTemporary: false } : event,
+      ),
     )
   }, [])
 

src/features/Calendar/utils/helpers/calendarPageHelpers.ts

@@ -34,6 +34,7 @@ export const createEvent = (date: Date, index: number, allDay = false): Calendar
     recurrenceGroup: null,
     friendIds: [],
     type: 'schedule',
+    isTemporary: true,
   }
 }
 

src/features/Todo/components/TodoCard/TodoCard.style.ts

@@ -45,6 +45,15 @@ export const ButtonWrapper = styled.div`
     }
   }
 `
+export const DeleteButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+`
 export const TodoLeftWrapper = styled.div`
   display: flex;
   gap: 16px;

src/features/Todo/components/TodoCard/TodoCard.tsx

@@ -86,13 +86,16 @@ const TodoCard = ({
       </S.TodoLeftWrapper>
       <S.ButtonWrapper>
         <PriorityBadge priority={priority} />
-        <Trash
-          color="#c5c5c5"
+        <S.DeleteButton
+          type="button"
+          aria-label={`${title} 삭제`}
           onClick={(event) => {
             event.stopPropagation()
             handleDelete()
           }}
-        />
+        >
+          <Trash color="#c5c5c5" />
+        </S.DeleteButton>
       </S.ButtonWrapper>
       {openDeleteModal && isRecurringTodo && (
         <DeleteConfirmModal

src/shared/hooks/addSchedule/useScheduleFooter.tsx

@@ -58,6 +58,7 @@ export const useScheduleFooter = ({
   const occurrenceDateRef = useRef(occurrenceDate)
   const closeModalRef = useRef(closeModal)
   const deleteEventMutateRef = useRef(deleteEventMutate)
+  const isTemporaryEventRef = useRef(Boolean(initialEvent?.isTemporary))
   const canEditRef = useRef(canEdit)
   const onReadOnlyAttemptRef = useRef(onReadOnlyAttempt)
   const eventColorRef = useRef(eventColor)
@@ -72,6 +73,7 @@ export const useScheduleFooter = ({
   occurrenceDateRef.current = occurrenceDate
   closeModalRef.current = closeModal
   deleteEventMutateRef.current = deleteEventMutate
+  isTemporaryEventRef.current = Boolean(initialEvent?.isTemporary)
   canEditRef.current = canEdit
   onReadOnlyAttemptRef.current = onReadOnlyAttempt
   eventColorRef.current = eventColor
@@ -86,6 +88,11 @@ export const useScheduleFooter = ({
       onReadOnlyAttemptRef.current?.()
       return
     }
+    if (eventIdRef.current == null || eventIdRef.current === 0 || isTemporaryEventRef.current) {
+      setDeleteWarningVisible(false)
+      closeModalRef.current()
+      return
+    }
     if (repeatConfigRef.current.repeatType !== 'none') {
       setDeleteWarningVisible(true)
       return
@@ -130,7 +137,7 @@ export const useScheduleFooter = ({
     if (currentEventId != null && currentEventId !== 0) {
       onEventColorChangeRef.current?.(currentEventId, value)
     }
-    if (!isEditingRef.current) {
+    if (!isEditingRef.current || isTemporaryEventRef.current) {
       return
     }
     const nextValues = { ...getValuesRef.current(), eventColor: value }

src/shared/hooks/addSchedule/useSchedulePatch.ts

@@ -80,7 +80,7 @@ export const useSchedulePatch = ({
 }: UseSchedulePatchArgs) =>
   useCallback(
     (values: ScheduleEditorFormValues, scope?: RecurrenceEventScope, occurrenceDate?: string) => {
-      if (eventId == null || eventId === 0) return Promise.resolve()
+      if (eventId == null || eventId === 0 || initialEvent?.isTemporary) return Promise.resolve()
       const startDate = values.eventStartDate ?? new Date(date)
       const endDate = values.eventEndDate ?? startDate
       const [start, end] = values.isAllday

src/shared/hooks/addSchedule/useScheduleSubmitFlow.ts

@@ -81,6 +81,7 @@ export const useScheduleSubmitFlow = ({
   }, [])
 
   const showToast = useToastStore.getState().showToast
+  const isTemporaryEvent = Boolean(initialEvent?.isTemporary)
 
   const confirmTitle = useCallback(
     (values: ScheduleEditorFormValues) => {
@@ -163,7 +164,7 @@ export const useScheduleSubmitFlow = ({
         return
       }
       await submitScheduleValues(values, {
-        mode: isEditing ? 'patch' : 'create',
+        mode: isEditing && !isTemporaryEvent ? 'patch' : 'create',
       })
     },
     (errors) => {

src/shared/hooks/addTodo/useTodoDetailHydration.ts

@@ -12,6 +12,7 @@ type UseTodoDetailHydrationProps = {
   date: string
   eventId: CalendarEvent['id']
   isEditing: boolean
+  initialEvent?: CalendarEvent | null
   todoDate: Date | null
   setValue: UseFormSetValue<TodoEditorFormValues>
 }
@@ -20,11 +21,13 @@ export const useTodoDetailHydration = ({
   date,
   eventId,
   isEditing,
+  initialEvent,
   todoDate,
   setValue,
 }: UseTodoDetailHydrationProps) => {
   const hydratedDetailKeyRef = useRef<string | null>(null)
-  const isPersistedTodo = isEditing && eventId != null && eventId !== 0
+  const isPersistedTodo =
+    isEditing && eventId != null && eventId !== 0 && !initialEvent?.isTemporary
   const shouldFetchDetail = isPersistedTodo
   const detailOccurrenceDate = moment(date).format('YYYY-MM-DD')
   const { data: detailData } = useGetDetailTodoQuery(

src/shared/hooks/addTodo/useTodoFooter.tsx

@@ -99,7 +99,12 @@ export const useTodoFooter = ({
     if (eventIdRef.current != null && eventIdRef.current !== 0) {
       onEventColorChangeRef.current?.(eventIdRef.current, value)
     }
-    if (!isEditingRef.current || eventIdRef.current == null || eventIdRef.current === 0) {
+    if (
+      !isEditingRef.current ||
+      eventIdRef.current == null ||
+      eventIdRef.current === 0 ||
+      !isPersistedTodoRef.current
+    ) {
       return
     }
     patchTodoMutateRef.current(

src/shared/hooks/form/useTodoEditorForm.ts

@@ -127,7 +127,7 @@ export const useTodoEditorForm = ({
       recurrenceGroup,
     }
 
-    const isPersistedTodoId = typeof id === 'number' && id > 0
+    const isPersistedTodoId = typeof id === 'number' && id > 0 && !initialEvent?.isTemporary
     if (isEditing && isPersistedTodoId) {
       const occurrenceDate = options?.occurrenceDate ?? formatIsoDate(date)
       return patchTodoMutate({

src/shared/types/calendar/types.ts

@@ -31,6 +31,7 @@ export type CalendarEvent = Omit<Event, 'start' | 'end'> & {
   type?: 'todo' | 'schedule'
   isDone?: boolean
   isRecurring?: boolean
+  isTemporary?: boolean
 }
 
 export type GetEventsResponseDTO = {

src/shared/ui/Modals/TodoEditor/TodoEditorContent.tsx

@@ -39,6 +39,7 @@ const TodoEditorContent = ({
       date,
       eventId,
       isEditing,
+      initialEvent,
       todoDate: todo.todoDate,
       setValue,
     })