feat: 입력받은 데이터를 DB에 저장 & DB에서 일정불러오기

Author: jane1107

src/apis/personalScheduleApi.ts

@@ -0,0 +1,48 @@
+import supabase from '@/supabase';
+import { Events } from '@/utils/index';
+
+export const getPersonalSchedule = async () => {
+  const { data, error } = await supabase.from('personal_schedules').select();
+  if (error) {
+    throw error;
+  }
+  return data;
+};
+
+// 가장 최근 데이터 하나 가져오기
+export const getLastPersonalSchedule = async () => {
+  const { data, error } = await supabase
+    .from('personal_schedules')
+    .select()
+    .order('created_at', { ascending: false })
+    .limit(1)
+    .maybeSingle();
+  if (error) {
+    throw error;
+  }
+  return data;
+};
+
+export const addPersonalSchedule = async ({ start, end, ...props }: Events) => {
+  const { error } = await supabase.from('personal_schedules').insert({ ...props, start_date: start, end_date: end });
+  if (error) {
+    throw error;
+  }
+};
+
+export const updatePersonalSchedule = async (id: number, { start, end, ...props }: Events) => {
+  const { error } = await supabase
+    .from('personal_schedules')
+    .update({ ...props, start_date: start, end_date: end })
+    .eq('id', id);
+  if (error) {
+    throw error;
+  }
+};
+
+export const deletePersonalSchedule = async (id: number) => {
+  const { error } = await supabase.from('personal_schedules').delete().eq('id', id);
+  if (error) {
+    throw error;
+  }
+};

src/components/MyCalendar/CreateEventButton.tsx

@@ -1,10 +1,10 @@
-import { useEventState } from '@/stores/myEventsStore.ts';
 import DialogButton from '@/components/common/DialogButton';
 import { InputRef } from '../common/InputForm.tsx';
 import { useState, useRef } from 'react';
+import { Events } from '@/utils/index.ts';
+import { addPersonalSchedule } from '@/apis/personalScheduleApi.ts';
 
 const CreateEventButton = () => {
-  const { addEvents } = useEventState();
   const [eventTitle, setTitle] = useState('');
   const [startDate, setStartDate] = useState('');
   const [endDate, setEndDate] = useState('');
@@ -26,8 +26,14 @@ const CreateEventButton = () => {
 
   const onCreateClicked = () => {
     if (eventTitle !== '' && startDate !== '') {
-      addEvents({ title: eventTitle, start: startDate, end: endDate === '' ? startDate : endDate });
+      const newEvent: Events = {
+        title: eventTitle,
+        start: startDate,
+        end: endDate === '' ? startDate : endDate,
+      };
+      addPersonalSchedule(newEvent);
     }
+
     setTitle('');
     setStartDate('');
     setEndDate('');

src/components/common/Calendar.tsx

@@ -3,6 +3,7 @@ import dayGridPlugin from '@fullcalendar/daygrid';
 import interactionPlugin from '@fullcalendar/interaction';
 import { useRef, useState, useEffect } from 'react';
 import { useEventState } from '@/stores/myEventsStore';
+import { getPersonalSchedule } from '@/apis/personalScheduleApi';
 
 const Calendar: React.FC = () => {
   const [calendarHeight, setCalendarHeight] = useState<string | number>('auto');
@@ -49,6 +50,8 @@ const Calendar: React.FC = () => {
     }
   };
 
+  const { events, addEvents } = useEventState();
+
   useEffect(() => {
     const calendarApi = calendarRef?.current?.getApi();
 
@@ -62,15 +65,19 @@ const Calendar: React.FC = () => {
     window.addEventListener('resize', updateSize);
     updateSize(); // 컴포넌트 마운트 시 화면 크기에 따른 업데이트
 
+    const data = getPersonalSchedule();
+    data.then((schedule) => {
+      schedule.map((x) => addEvents({ ...x, start: x.start_date, end: x.end_date }));
+    });
+
     return () => {
       window.removeEventListener('resize', updateSize);
       if (calendarApi) {
         calendarApi.off('datesSet', updateTitle);
       }
     };
-  }, [updateSize]);
+  }, [updateSize, addEvents]);
 
-  const events = useEventState();
   return (
     <div>
       <FullCalendar

src/stores/myEventsStore.ts

@@ -1,21 +1,14 @@
 import { create } from 'zustand';
 import { Events } from '../utils/index.ts';
 
-const initialEventsState: Events[] = [
-  { title: 'Meeting', start: new Date(), end: new Date() },
-  { title: 'Meeting2', start: '2024-05-08', end: '2024-05-12', backgroundColor: 'red', borderColor: 'red' },
-  { title: 'Meeting3', start: '2024-05-08', end: '2024-05-10', backgroundColor: 'green', borderColor: 'green' },
-  { title: 'Meeting4', start: '2024-05-08', end: '2024-05-11' },
-];
-
 interface EventsState {
   events: Events[];
   addEvents: (event: Events) => void;
   initEvents: () => void;
 }
 
 export const useEventState = create<EventsState>()((set) => ({
-  events: [...initialEventsState],
+  events: [],
 
   addEvents: (newEvent: Events) => set((state) => ({ events: [...state.events, newEvent] })),
   initEvents: () => set(() => ({ events: [] })),

src/utils/index.ts

@@ -1,8 +1,7 @@
 export interface Events {
-  id?: string;
   title: string;
-  start: Date | string;
-  end: Date | string;
+  start: string;
+  end: string;
   backgroundColor?: string;
   borderColor?: string;
   textColor?: string;