Merge pull request #162 from imaginer-dev/34-update-personal-schedule-ui

개인 일정 수정 삭제 구현..

Author: gihwan-dev

src/components/MyCalendar/CreateEventButton.tsx

@@ -1,17 +1,41 @@
 import DialogButton from '@/components/common/DialogButton';
 import { InputRef } from '../common/InputForm.tsx';
-import { useState, useRef } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import { Events } from '@/utils/index.ts';
-import { addPersonalSchedule } from '@/apis/personalScheduleApi.ts';
+import { addPersonalSchedule, updatePersonalSchedule } from '@/apis/personalScheduleApi.ts';
 
-const CreateEventButton = () => {
+export interface eventProps {
+  id?: number;
+  title?: string;
+  start_date?: string;
+  end_date?: string;
+}
+
+const CreateEventButton = (props: eventProps) => {
   const [eventTitle, setTitle] = useState('');
   const [startDate, setStartDate] = useState('');
   const [endDate, setEndDate] = useState('');
   const titleRef = useRef<HTMLInputElement>(null);
   const startRef = useRef<HTMLInputElement>(null);
   const endRef = useRef<HTMLInputElement>(null);
 
+  useEffect(() => {
+    console.log(props);
+
+    if (props.start_date) {
+      setStartDate(props.start_date);
+      startRef!.current!.value = props.start_date;
+    }
+    if (props.end_date) {
+      setEndDate(props.end_date);
+      endRef!.current!.value = props.end_date;
+    }
+    if (props.title) {
+      setTitle(props.title);
+      titleRef!.current!.value = props.title;
+    }
+  }, [props]);
+
   const onTitleChanged = (event: React.ChangeEvent<HTMLInputElement>) => {
     setTitle(event.target.value);
   };
@@ -31,7 +55,15 @@ const CreateEventButton = () => {
         start: startDate,
         end: endDate === '' ? startDate : endDate,
       };
-      addPersonalSchedule(newEvent);
+      if (props.id) {
+        updatePersonalSchedule(props.id, newEvent).catch((err) => {
+          console.log(err);
+        });
+      } else {
+        addPersonalSchedule(newEvent).catch((err) => {
+          console.log(err);
+        });
+      }
     }
 
     setTitle('');
@@ -56,16 +88,16 @@ const CreateEventButton = () => {
       <InputRef type="date" title="끝 날짜" placeholder="YYYY-MM-DD" onChange={onEndDateChanged} ref={endRef} />
       <hr className="mb-2 mt-2" />
       <button className="btn w-full bg-primary text-base-100" onClick={onCreateClicked}>
-        추가하기
+        {props.id ? '수정하기' : '추가하기'}
       </button>
     </div>
   );
   return (
     <div className="p-8">
       <DialogButton
         classname="btn bg-primary text-base-100 w-full"
-        name={'새 일정 추가하기'}
-        title={'일정 추가'}
+        name={props.id ? '수정' : '새 일정 추가하기'}
+        title={props.id ? '일정 수정' : '일정 추가'}
         desc={''}
         children={eventForm}
       />

src/components/common/Calendar.tsx

@@ -5,19 +5,10 @@ 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 { getPersonalSchedule, deletePersonalSchedule } from '@/apis/personalScheduleApi';
+import { DB_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;
-};
-*/
+import CreateEventButton from '@/components/MyCalendar/CreateEventButton.tsx';
 
 interface EventInfo {
   timeText: string;
@@ -27,15 +18,16 @@ interface EventInfo {
 }
 
 interface EventCardsProps {
-  events: Events[];
+  events: DB_Events[];
   date: string | null;
 }
 
 export default function Calendar() {
   const [calendarHeight, setCalendarHeight] = useState<string | number>('auto');
   const calendarRef = useRef<FullCalendar | null>(null);
-  const [selectedEvents, setSelectedEvents] = useState<Events[]>([]);
+  const [selectedEvents, setSelectedEvents] = useState<DB_Events[]>([]);
   const [selectedDate, setSelectedDate] = useState<string | null>(null);
+  const { events, addEvents, db_events, addDBEvents } = useEventState();
   // ! : 외부에서 이벤트 리스트를 받아오게 된다면 zustand 스토어도 필요 없을거 같습니다!
   const { events, addEvents } = useEventState();
 
@@ -58,10 +50,10 @@ export default function Calendar() {
     const clickedDateStr = dateClickInfo.dateStr;
     setSelectedDate(clickedDateStr);
     setSelectedEvents(
-      events.filter(
+      db_events.filter(
         (event) =>
-          clickedDateStr >= event.start.split('T')[0] &&
-          clickedDateStr <= (event.end ? event.end.split('T')[0] : event.start.split('T')[0]),
+          clickedDateStr >= event.start_date.split('T')[0] &&
+          clickedDateStr <= (event.end_date ? event.end_date.split('T')[0] : event.start_date.split('T')[0]),
       ),
     );
   };
@@ -90,26 +82,6 @@ export default function Calendar() {
     setCalendarHeight(window.innerWidth < 768 ? 500 : 'auto');
   }, []);
 
-  function convertEvents(
-    events: {
-      title: string;
-      start_date: string;
-      end_date: string;
-      backgroundColor?: string;
-      borderColor?: string;
-      textColor?: string;
-    }[],
-  ): Events[] {
-    return events.map((event) => ({
-      title: event.title,
-      start: event.start_date,
-      end: event.end_date,
-      backgroundColor: event.backgroundColor || '#3788d8',
-      borderColor: event.borderColor || '#296c98',
-      textColor: event.textColor || '#ffffff',
-    }));
-  }
-
   /*
   const updateTitle = () => {
     const calendarApi = calendarRef?.current?.getApi();
@@ -158,22 +130,13 @@ export default function Calendar() {
 
   // !: 이베트를 받아온다면 필요없는 코드가 될 수 있을거 같아요.
   useEffect(() => {
-    if (!isLoaded) {
-      getPersonalSchedule().then((schedule) => {
-        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));
-          setIsLoaded(true);
-        }
+    getPersonalSchedule().then((schedule) => {
+      schedule.map((x) => {
+        addDBEvents({ ...x });
+        addEvents({ ...x, start: x.start_date, end: x.end_date });
       });
-    }
-  }, [events, addEvents]);
+    });
+  }, []);
 
   return (
     <div>
@@ -242,13 +205,24 @@ function EventCards({ events, date }: EventCardsProps) {
     );
   }
 
+  const onDeleteClicked = (id: number) => {
+    console.log('delete : ', id);
+    deletePersonalSchedule(id)
+      .then((val) => {
+        console.log('delete done!', val);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
   return (
     <div>
       <h2 className="ml-2">{date}</h2>
       <div className="flex gap-5 overflow-x-auto">
         {events.map((event, index) => {
-          const eventDateRange = formatDateRange(event.start, event.end);
-          const eventTime = formatTime(event.start);
+          const eventDateRange = formatDateRange(event.start_date, event.end_date);
+          const eventTime = formatTime(event.start_date);
           return (
             <div key={index} className="relative min-h-[150px] min-w-[240px] bg-white p-4 text-black">
               <h3>{event.title}</h3>
@@ -267,8 +241,17 @@ function EventCards({ events, date }: EventCardsProps) {
               {menuOpen === index && (
                 <div className="absolute right-0 top-10 z-10 rounded-lg bg-white shadow-md">
                   <ul>
-                    <li className="cursor-pointer p-2 hover:bg-gray-100">편집</li>
-                    <li className="cursor-pointer p-2 hover:bg-gray-100">삭제</li>
+                    <li className="cursor-pointer p-2 hover:bg-gray-100">
+                      <CreateEventButton
+                        id={event.id}
+                        title={event.title}
+                        start_date={event.start_date}
+                        end_date={event.end_date}
+                      />
+                    </li>
+                    <li className="cursor-pointer p-2 hover:bg-gray-100" onClick={() => onDeleteClicked(event.id)}>
+                      삭제
+                    </li>
                   </ul>
                 </div>
               )}

src/main.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import './styles/index.css';
@@ -84,9 +83,7 @@ const router = createBrowserRouter([
 const queryClient = new QueryClient();
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <QueryClientProvider client={queryClient}>
-      <RouterProvider router={router} />
-    </QueryClientProvider>
-  </React.StrictMode>,
+  <QueryClientProvider client={queryClient}>
+    <RouterProvider router={router} />
+  </QueryClientProvider>,
 );

src/stores/myEventsStore.ts

@@ -1,15 +1,19 @@
 import { create } from 'zustand';
-import { Events } from '../utils/index.ts';
+import { Events, DB_Events } from '../utils/index.ts';
 
 interface EventsState {
   events: Events[];
   addEvents: (event: Events) => void;
   initEvents: () => void;
+
+  db_events: DB_Events[];
+  addDBEvents: (db_event: DB_Events) => void;
 }
 
 export const useEventState = create<EventsState>()((set) => ({
   events: [],
-
+  db_events: [],
   addEvents: (newEvent: Events) => set((state) => ({ events: [...state.events, newEvent] })),
   initEvents: () => set(() => ({ events: [] })),
+  addDBEvents: (newEvent: DB_Events) => set((state) => ({ db_events: [...state.db_events, newEvent] })),
 }));

src/utils/index.ts

@@ -6,3 +6,13 @@ export interface Events {
   borderColor?: string;
   textColor?: string;
 }
+
+export interface DB_Events {
+  id: number;
+  title: string;
+  start_date: string;
+  end_date: string;
+  backgroundColor?: string;
+  borderColor?: string;
+  textColor?: string;
+}