feat: 중복체크,일정등록시 같은 배열이 있는경우에만 새로운 일정추가

Author: jeongah2651

src/components/common/Calendar.tsx

@@ -1,23 +1,11 @@
-/* eslint-disable react-hooks/exhaustive-deps */
 import FullCalendar from '@fullcalendar/react';
-// import { EventClickArg } from '@fullcalendar/core';
 import dayGridPlugin from '@fullcalendar/daygrid';
 import interactionPlugin from '@fullcalendar/interaction';
 import { useRef, useState, useEffect, useCallback } from 'react';
 import { useEventState } from '@/stores/myEventsStore';
 import { getPersonalSchedule } from '@/apis/personalScheduleApi';
 import { Events } from '../../utils/index.ts';
 import { formatDateRange, formatTime } from '../../utils/dateUtils';
-/*
-type Event = {
-  title: string;
-  start: string;
-  end: string;
-  backgroundColor?: string;
-  borderColor?: string;
-  textColor?: string;
-};
-*/
 
 interface EventInfo {
   timeText: string;
@@ -154,24 +142,23 @@ export default function Calendar() {
   }, [updateSize]);
 
   const [isLoaded, setIsLoaded] = useState(false); // 데이터 로딩 상태
-
   useEffect(() => {
     if (!isLoaded) {
       getPersonalSchedule().then((schedule) => {
-        const uniqueEvents = schedule.filter(
-          (newEvent) =>
-            !events.some(
-              (existingEvent) => existingEvent.start === newEvent.start_date && existingEvent.title === newEvent.title,
-            ),
+        const uniqueEvents = schedule.filter(newEvent =>  
+          !events.some(existingEvent => 
+            existingEvent.start === newEvent.start_date && existingEvent.title === newEvent.title
+          )
         );
         if (uniqueEvents.length > 0) {
           const eventsToAdd = convertEvents(uniqueEvents);
-          eventsToAdd.forEach((eventToAdd) => addEvents(eventToAdd));
+          eventsToAdd.forEach(eventToAdd => addEvents(eventToAdd));
           setIsLoaded(true);
         }
       });
     }
-  }, [events, addEvents]);
+  }, [events, addEvents, isLoaded]);
+  
 
   return (
     <div>
@@ -214,6 +201,7 @@ export default function Calendar() {
       <div className="mt-10">{selectedDate && <EventCards events={selectedEvents} date={selectedDate} />}</div>
     </div>
   );
+
 }
 
 function renderEventContent(eventInfo: EventInfo) {

src/pages/MyCalendarPage.tsx

@@ -48,7 +48,7 @@ const MyCalendarPage: React.FC = () => {
       </header>
       <main className="z-1 relative flex-grow">
         <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-          <div className="rounded bg-white p-6 px-4 sm:px-0">
+          <div className="rounded p-6 px-4 sm:px-0">
             <Calendar />
           </div>
         </div>

src/stores/myEventsStore.ts

@@ -10,6 +10,17 @@ interface EventsState {
 export const useEventState = create<EventsState>()((set) => ({
   events: [],
 
-  addEvents: (newEvent: Events) => set((state) => ({ events: [...state.events, newEvent] })),
+  addEvents: (newEvent: Events) => set((state) => {
+    // 중복 검사 로직 추가
+    const isDuplicate = state.events.some(event => 
+      event.start === newEvent.start && event.title === newEvent.title
+    );
+
+    if (!isDuplicate) {
+      return { events: [...state.events, newEvent] };
+    } else {
+      return { events: [...state.events] }; // 중복된 경우 상태 변경 없음
+    }
+  }),
   initEvents: () => set(() => ({ events: [] })),
 }));