feat: 삭제시 단일 이벤트 삭제 기능 구현

Author: ldhldh07

src/__tests__/medium.integration.spec.tsx

@@ -106,7 +106,7 @@ describe('일정 CRUD 및 기본 기능', () => {
     expect(await eventList.findByText('삭제할 이벤트')).toBeInTheDocument();
 
     // 삭제 버튼 클릭
-    const allDeleteButton = await screen.findAllByLabelText('Delete event');
+    const allDeleteButton = await screen.findAllByTestId('DeleteIcon');
     await user.click(allDeleteButton[0]);
 
     expect(eventList.queryByText('삭제할 이벤트')).not.toBeInTheDocument();

src/__tests__/repeat/integration/integration.spec.tsx

@@ -6,14 +6,13 @@ import { http, HttpResponse } from 'msw';
 import { SnackbarProvider } from 'notistack';
 import { ReactElement } from 'react';
 
-import { handlers } from '../../../__mocks__/handlers';
 import {
   setupMockHandlerCreation,
   setupMockHandlerUpdating,
 } from '../../../__mocks__/handlersUtils';
-import { setupMockHandlerDeletion } from '../../../__mocks__/handlersUtils';
 import App from '../../../App';
 import { server } from '../../../setupTests';
+import { Event } from '../../../types';
 import { makeEvent } from '../../utils';
 
 const theme = createTheme();
@@ -106,10 +105,8 @@ describe('반복 UI 및 표시', () => {
   });
 
   it('반복일정을 단일 삭제하면 해당 날짜 셀에서만 사라진다', async () => {
-    // 현재 주간 뷰 범위에 10/16, 10/17이 포함되도록 고정
     vi.setSystemTime(new Date('2025-10-16'));
 
-    // 반복: daily 10/15 시작 ~ 10/22 종료, 서버에는 베이스 이벤트 1건만 존재
     const series = makeEvent({
       id: 'r1',
       title: '반복 삭제 테스트',
@@ -140,6 +137,16 @@ describe('반복 UI 및 표시', () => {
       http.get('/api/events', () => {
         return HttpResponse.json({ events: mockEvents });
       }),
+      http.put('/api/events/:id', async ({ params, request }) => {
+        const { id } = params;
+        const updatedEvent = (await request.json()) as Event;
+
+        const index = mockEvents.findIndex((event) => event.id === id);
+        if (index !== -1) {
+          mockEvents[index] = { ...mockEvents[index], ...updatedEvent };
+        }
+        return HttpResponse.json(mockEvents[index]);
+      }),
       http.delete('/api/events/:id', ({ params }) => {
         const { id } = params;
         mockEvents = mockEvents.filter((event) => event.id !== id);

src/hooks/useEventOperations.ts

@@ -55,10 +55,37 @@ export const useEventOperations = (editing: boolean, onSave?: () => void) => {
 
   const deleteEvent = async (id: string) => {
     try {
-      const response = await fetch(`/api/events/${id}`, { method: 'DELETE' });
+      const isInstanceId = id.includes('_') && id.match(/_\d{4}-\d{2}-\d{2}$/);
 
-      if (!response.ok) {
-        throw new Error('Failed to delete event');
+      if (isInstanceId) {
+        const [baseId, dateToExclude] = id.split('_');
+        const baseEvent = events.find((event) => event.id === baseId);
+
+        if (baseEvent && baseEvent.repeat.type !== 'none') {
+          const updatedEvent = {
+            ...baseEvent,
+            repeat: {
+              ...baseEvent.repeat,
+              excludedDates: [...(baseEvent.repeat.excludedDates || []), dateToExclude],
+            },
+          };
+
+          const response = await fetch(`/api/events/${baseId}`, {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(updatedEvent),
+          });
+
+          if (!response.ok) {
+            throw new Error('Failed to exclude event instance');
+          }
+        }
+      } else {
+        const response = await fetch(`/api/events/${id}`, { method: 'DELETE' });
+
+        if (!response.ok) {
+          throw new Error('Failed to delete event');
+        }
       }
 
       await fetchEvents();

src/types.ts

@@ -4,6 +4,7 @@ export interface RepeatInfo {
   type: RepeatType;
   interval: number;
   endDate?: string;
+  excludedDates?: string[]; // 제외할 날짜들 (YYYY-MM-DD 형식)
 }
 
 export interface EventForm {

src/utils/repeat/actions.ts

@@ -24,8 +24,15 @@ function appendIfInRange(
   rangeEnd: Date,
   acc: Event[]
 ): Event[] {
+  const dateString = toDateStringUTC(cursor);
+
+  if (event.repeat.excludedDates?.includes(dateString)) {
+    return acc;
+  }
+
   if (cursor >= rangeStart && cursor <= rangeEnd) {
-    return [...acc, { ...event, date: toDateStringUTC(cursor) }];
+    const instanceId = dateString === event.date ? event.id : `${event.id}_${dateString}`;
+    return [...acc, { ...event, date: dateString, id: instanceId }];
   }
   return acc;
 }