Merge pull request #139 from imaginer-dev/127--ui--calendarmain

127  UI  calendarmain

Author: Rose4tune

package.json

@@ -15,6 +15,10 @@
     "prepare": "husky"
   },
   "dependencies": {
+    "@fullcalendar/core": "^6.1.11",
+    "@fullcalendar/daygrid": "^6.1.11",
+    "@fullcalendar/interaction": "^6.1.11",
+    "@fullcalendar/react": "^6.1.11",
     "@lukemorales/query-key-factory": "^1.3.4",
     "@supabase/supabase-js": "^2.42.7",
     "@tanstack/react-query": "^5.29.0",

pnpm-lock.yaml

@@ -1,7 +1,57 @@
+import { Calendar } from './components/common/Calendar.tsx';
+
 function App() {
   return (
     <div>
-      <h1>메인 페이지</h1>
+      <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>
   );
 }

src/App.tsx

@@ -0,0 +1,100 @@
+import FullCalendar from '@fullcalendar/react';
+import dayGridPlugin from '@fullcalendar/daygrid';
+import interactionPlugin from '@fullcalendar/interaction';
+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' },
+];
+
+export function Calendar() {
+  const [calendarHeight, setCalendarHeight] = useState<string | number>('auto');
+  const calendarRef = useRef<FullCalendar | null>(null);
+  const handlePrev = () => {
+    const calendarApi = calendarRef?.current?.getApi();
+    if (calendarApi) {
+      calendarApi.prev();
+    } else {
+      console.error('Calendar API is not available.');
+    }
+  };
+
+  const handleNext = () => {
+    const calendarApi = calendarRef?.current?.getApi();
+    if (calendarApi) {
+      calendarApi.next();
+    } else {
+      console.error('Calendar API is not available.');
+    }
+  };
+
+  useEffect(() => {
+    const updateSize = () => {
+      const isMobile = window.innerWidth < 768;
+      setCalendarHeight(isMobile ? 500 : 'auto');
+    };
+
+    window.addEventListener('resize', updateSize);
+    updateSize();
+
+    return () => window.removeEventListener('resize', updateSize);
+  }, []);
+
+  return (
+    <div>
+      <FullCalendar
+        ref={calendarRef}
+        plugins={[dayGridPlugin, interactionPlugin]}
+        initialView="dayGridMonth"
+        events={events}
+        dayMaxEvents={2} //Max개수까지보이고 나머지는 more
+        navLinks={true} // 날짜/주 이름을 클릭하여 뷰를 변경할 수 있습니다.
+        editable={true} // 이벤트를 수정할 수 있습니다.
+        eventContent={renderEventContent}
+        contentHeight={calendarHeight}
+        titleFormat={{
+          year: 'numeric',
+          month: '2-digit',
+          meridiem: false,
+        }}
+        dayHeaderFormat={{
+          weekday: 'short',
+        }}
+        headerToolbar={{
+          left: 'prevButton',
+          center: 'title',
+          right: 'nextButton',
+        }}
+        customButtons={{
+          prevButton: {
+            icon: 'chevron-left',
+            click: handlePrev,
+          },
+          nextButton: {
+            icon: 'chevron-right',
+            click: handleNext,
+          },
+        }}
+      />
+    </div>
+  );
+}
+
+interface EventInfo {
+  timeText: string;
+  event: {
+    title: string;
+  };
+}
+
+function renderEventContent(eventInfo: EventInfo) {
+  return (
+    <>
+      <b>{eventInfo.timeText}</b>
+      <i>{eventInfo.event.title}</i>
+    </>
+  );
+}