refactor: 일정 수정 버튼 리스트로 바꾸기

Author: jane1107

src/components/MyCalendar/CreateEventButton.tsx

@@ -1,4 +1,3 @@
-import DialogButton from '@/components/common/DialogButton';
 import { InputRef } from '../common/InputForm.tsx';
 import { useState, useRef, useEffect } from 'react';
 import { Events } from '@/utils/index.ts';
@@ -11,7 +10,7 @@ export interface eventProps {
   end_date?: string;
 }
 
-const CreateEventButton = ({ id, title, start_date, end_date }: eventProps) => {
+const CreateEventDialog = ({ id, title, start_date, end_date }: eventProps) => {
   const [eventTitle, setTitle] = useState('');
   const [startDate, setStartDate] = useState('');
   const [endDate, setEndDate] = useState('');
@@ -78,7 +77,7 @@ const CreateEventButton = ({ id, title, start_date, end_date }: eventProps) => {
     }
   };
 
-  const eventForm = (
+  return (
     <div>
       <hr className="mt-1" />
       <InputRef title="일정 제목" placeholder="새 일정 제목" onChange={onTitleChanged} ref={titleRef} />
@@ -90,16 +89,6 @@ const CreateEventButton = ({ id, title, start_date, end_date }: eventProps) => {
       </button>
     </div>
   );
-  return (
-    <div className="p-8 pl-0 pr-0">
-      <DialogButton
-        classname="btn bg-primary text-base-100 w-full"
-        name={id ? '수정' : '새 일정 추가하기'}
-        title={id ? '일정 수정' : '일정 추가'}
-        desc={''}
-        children={eventForm}
-      />
-    </div>
-  );
 };
-export default CreateEventButton;
+
+export default CreateEventDialog;

src/components/common/Calendar.tsx

@@ -5,7 +5,13 @@ import { useRef, useState, useEffect, useCallback } from 'react';
 // import { formatDateRange, formatTime } from '../../utils/dateUtils';
 import { Events, DB_Events } from '../../utils/index.ts';
 import { formatDateRange } from '../../utils/dateUtils';
-import CreateEventButton from '@/components/MyCalendar/CreateEventButton.tsx';
+import CreateEventDialog from '@/components/MyCalendar/CreateEventButton.tsx';
+import Dialog from './Dialog.tsx';
+
+interface DialogElement {
+  openModal: () => void;
+  closeModal: () => void;
+}
 
 interface EventInfo {
   timeText: string;
@@ -191,6 +197,13 @@ function EventCards({ events, date, onDelete }: EventCardsProps) {
   console.log(events, date);
   const [menuOpen, setMenuOpen] = useState(-1);
 
+  const dialogRef = useRef<DialogElement | null>(null);
+  const openModal = (dialogRef: React.RefObject<DialogElement>) => {
+    if (dialogRef.current) {
+      dialogRef.current?.openModal();
+    }
+  };
+
   if (!events.length) {
     return (
       <div className="min-h-[150px] min-w-[240px] bg-white p-4 text-black">
@@ -225,14 +238,22 @@ function EventCards({ events, date, onDelete }: 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">
-                      <CreateEventButton
-                        id={event.id}
-                        title={event.title}
-                        start_date={event.start_date}
-                        end_date={event.end_date}
-                      />
+                    <li className="cursor-pointer p-2 hover:bg-gray-100" onClick={() => openModal(dialogRef)}>
+                      수정
                     </li>
+                    <Dialog
+                      ref={dialogRef}
+                      title="일정 수정"
+                      desc={''}
+                      children={
+                        <CreateEventDialog
+                          id={event.id}
+                          title={event.title}
+                          start_date={event.start_date}
+                          end_date={event.end_date}
+                        />
+                      }
+                    />
                     <li className="cursor-pointer p-2 hover:bg-gray-100" onClick={() => onDelete(event.id)}>
                       삭제
                     </li>

src/pages/GroupSchedulePage.tsx

@@ -1,7 +1,7 @@
 import AppBar from '@/components/common/AppBar';
 import HamburgerButton from '@/components/common/SideBar/HamburgerButton';
 import Calendar from '@/components/common/Calendar';
-import CreateEventButton from '@/components/MyCalendar/CreateEventButton';
+import CreateEventDialog from '@/components/MyCalendar/CreateEventButton';
 import { useParams } from 'react-router-dom';
 import { useGetOneGroupSchedule } from '@/react-queries/useGetOneGroupSchedule';
 import { Loading } from '.';
@@ -42,7 +42,7 @@ const GroupSchedulePage = () => {
           </div>
         </div>
       </main>
-      <CreateEventButton />
+      <CreateEventDialog />
     </div>
   );
 };

src/pages/MyCalendarPage.tsx

@@ -1,10 +1,16 @@
 import AppBar from '@/components/common/AppBar.tsx';
 import Calendar from '../components/common/Calendar.tsx';
-import CreateEventButton from '@/components/MyCalendar/CreateEventButton.tsx';
+import CreateEventDialog from '@/components/MyCalendar/CreateEventButton.tsx';
 import HamburgerButton from '@/components/common/SideBar/HamburgerButton.tsx';
 import { getPersonalSchedule, deletePersonalSchedule } from '@/apis/personalScheduleApi';
 import { useEventState } from '@/stores/myEventsStore';
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
+import Dialog from '@/components/common/Dialog.tsx';
+
+interface DialogElement {
+  openModal: () => void;
+  closeModal: () => void;
+}
 
 const MyCalendarPage: React.FC = () => {
   const { db_events, addDBEvents } = useEventState();
@@ -28,14 +34,25 @@ const MyCalendarPage: React.FC = () => {
       });
   };
 
+  const dialogRef = useRef<DialogElement | null>(null);
+
+  const openModal = (dialogRef: React.RefObject<DialogElement>) => {
+    if (dialogRef.current) {
+      dialogRef.current?.openModal();
+    }
+  };
+
   return (
     <div className="lg:ml-80">
       <AppBar backButton={false} IconButton={<HamburgerButton />} calendarName="내 캘린더" />
       <main className="z-1 relative flex-grow">
         <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
           <div>
             <Calendar db_events={db_events} onDeleteClicked={onDeleteClicked} />
-            <CreateEventButton />
+            <button type="button" className="btn w-full bg-primary text-base-100" onClick={() => openModal(dialogRef)}>
+              새 일정 추가하기
+            </button>
+            <Dialog ref={dialogRef} title="일정 추가" desc={''} children={<CreateEventDialog />} />
           </div>
         </div>
       </main>