refactor: add MyCalendarPage

Author: jane1107

src/App.tsx

@@ -1,59 +1,7 @@
-import { Calendar } from './components/common/Calendar.tsx';
+import MyCalendarPage from './pages/MyCalendarPage';
 
 function App() {
-  return (
-    <div>
-      <header className="relative z-10">
-        <div className="drawer">
-          <input id="my-drawer-3" type="checkbox" className="drawer-toggle" />
-          <div className="drawer-content flex flex-col">
-            {/* Navbar */}
-            <div className="navbar w-full">
-              <div className="flex-none lg:hidden">
-                <label htmlFor="my-drawer-3" aria-label="open sidebar" className="btn btn-square btn-ghost">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    className="inline-block h-6 w-6 stroke-current"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth="2"
-                      d="M4 6h16M4 12h16M4 18h16"
-                    ></path>
-                  </svg>
-                </label>
-              </div>
-              <div className="flex-1">
-                <h1 className="base-200 min-w-40 p-2 text-center">개인 일정 캘린더</h1>
-              </div>
-            </div>
-          </div>
-          <div className="drawer-side">
-            <label htmlFor="my-drawer-3" aria-label="close sidebar" className="drawer-overlay"></label>
-            <ul className="menu min-h-full w-80 bg-base-200 p-4">
-              {/* Sidebar content here */}
-              <li>
-                <a>그룹 일정 캘린더 1</a>
-              </li>
-              <li>
-                <a>그룹 일정 캘린더 2</a>
-              </li>
-            </ul>
-          </div>
-        </div>
-      </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">
-            <Calendar />
-          </div>
-        </div>
-      </main>
-    </div>
-  );
+  return <MyCalendarPage />;
 }
 
 export default App;

src/components/common/Calendar.tsx

@@ -5,12 +5,12 @@ import { useRef, useState, useEffect } from 'react';
 
 const events = [
   { title: 'Meeting', start: new Date() },
-  { title: 'Meeting', start: '2024-05-08' },
-  { title: 'Meeting', start: '2024-05-08' },
-  { title: 'Meeting', start: '2024-05-08' },
+  { title: 'Meeting2', start: '2024-05-08', end: '2024-05-12' },
+  { title: 'Meeting3', start: '2024-05-08', end: '2024-05-10' },
+  { title: 'Meeting4', start: '2024-05-08', end: '2024-05-11' },
 ];
 
-export function Calendar() {
+const Calendar: React.FC = () => {
   const [calendarHeight, setCalendarHeight] = useState<string | number>('auto');
   const calendarRef = useRef<FullCalendar | null>(null);
   const handlePrev = () => {
@@ -81,7 +81,7 @@ export function Calendar() {
       />
     </div>
   );
-}
+};
 
 interface EventInfo {
   timeText: string;
@@ -98,3 +98,5 @@ function renderEventContent(eventInfo: EventInfo) {
     </>
   );
 }
+
+export default Calendar;

src/pages/MyCalendarPage.tsx

@@ -0,0 +1,59 @@
+import Calendar from '../components/common/Calendar.tsx';
+
+const MyCalendarPage: React.FC = () => {
+  return (
+    <div>
+      <header className="relative z-10">
+        <div className="drawer">
+          <input id="my-drawer-3" type="checkbox" className="drawer-toggle" />
+          <div className="drawer-content flex flex-col">
+            {/* Navbar */}
+            <div className="navbar w-full">
+              <div className="flex-none lg:hidden">
+                <label htmlFor="my-drawer-3" aria-label="open sidebar" className="btn btn-square btn-ghost">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    className="inline-block h-6 w-6 stroke-current"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="2"
+                      d="M4 6h16M4 12h16M4 18h16"
+                    ></path>
+                  </svg>
+                </label>
+              </div>
+              <div className="flex-1">
+                <h1 className="base-200 min-w-40 p-2 text-center">개인 일정 캘린더</h1>
+              </div>
+            </div>
+          </div>
+          <div className="drawer-side">
+            <label htmlFor="my-drawer-3" aria-label="close sidebar" className="drawer-overlay"></label>
+            <ul className="menu min-h-full w-80 bg-base-200 p-4">
+              {/* Sidebar content here */}
+              <li>
+                <a>그룹 일정 캘린더 1</a>
+              </li>
+              <li>
+                <a>그룹 일정 캘린더 2</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </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">
+            <Calendar />
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+};
+
+export default MyCalendarPage;