feat: 캘린더 레이아웃 깨짐 수정

Author: jeongah2651

src/components/common/Calendar.tsx

@@ -138,7 +138,7 @@ export default function Calendar() {
 
   return (
     <div>
-      <div className="rounded bg-white p-6 px-4">
+      <div className="rounded bg-white p-7 px-4">
         <FullCalendar
           ref={calendarRef}
           plugins={[dayGridPlugin, interactionPlugin]}
@@ -218,7 +218,7 @@ function EventCards({ events, date }: EventCardsProps) {
 
   return (
     <div>
-      <h2 className="ml-2">{date}</h2>
+      <h2 className="ml-2 mb-2">{date}</h2>
       <div className="flex gap-5 overflow-x-auto">
         {events.map((event, index) => {
           const eventDateRange = formatDateRange(event.start_date, event.end_date);

src/pages/MyCalendarPage.tsx

@@ -9,7 +9,7 @@ const MyCalendarPage: React.FC = () => {
       <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 className="rounded p-6 px-4 sm:px-0">
+          <div>
             <Calendar />
             <CreateEventButton />
           </div>

src/styles/index.css

@@ -72,23 +72,24 @@
 
 @media (min-width: 1024px) {
   main {
-    padding-left: 15%;
-    padding-right: 25%;
+    padding-right: 25vw;
   }
   .eventCardList {
     position: fixed;
     right: 0;
     top: 0;
-    width: 25%;
+    width: 25vw;
     height: 100%;
     padding: 0 1rem;
     padding-left: 0;
-    margin-top: 4rem;
+    margin-top: 4.5rem;
   }
   .eventCardList .flex {
     overflow-y: auto;
     overflow-x: hidden;
     flex-flow: column;
+    max-height: calc(90vh - 72px);
+    overflow-y: auto;
   }
   .drawer-toggle {
     display: none;
@@ -97,7 +98,6 @@
     flex-direction: row;
   }
   .drawer-side {
-    width: 15%;
     visibility: visible;
     overflow-y: auto;
     pointer-events: auto;