UI 개선 및 메인 렌더링 버그 수정

UI 개선 및 메인 렌더링 버그 수정

src/app/layout.tsx

@@ -94,7 +94,6 @@ export default async function RootLayout({
             theme="light"
           />
           <NaverMapsProviders>{children}</NaverMapsProviders>
-          {children}
           <ControlOptions />
           <Footer />
           <MobileNav />

src/components/Calendar/BasicCalendar.tsx

@@ -1,5 +1,5 @@
 'use client';
-import isSameDay from 'date-fns/isSameDay';
+import { differenceInCalendarMonths, isSameMonth, isSameDay } from 'date-fns';
 import ko from 'date-fns/locale/ko';
 import { useEffect, useState, memo } from 'react';
 import { DayPicker, CaptionProps } from 'react-day-picker';
@@ -49,6 +49,7 @@ const BasicCalendar = ({
   const modifiersClassNames = getBasicCalendarModifiersClassNames(mode);
   const classNames = mode === 'dayoff' ? DAY_OFF_ClassNames : undefined;
   const disabled = mode === 'dayoff' ? disabledDays : undefined;
+  const defaultMonth = findClosestDate(selectedDates, new Date());
 
   return (
     <DayPicker
@@ -57,7 +58,7 @@ const BasicCalendar = ({
       showOutsideDays
       selected={selected}
       onSelect={setSelected}
-      defaultMonth={selectedDates[0] || new Date()}
+      defaultMonth={defaultMonth}
       disabled={disabled}
       modifiers={modifiers}
       modifiersClassNames={modifiersClassNames}
@@ -73,3 +74,33 @@ const BasicCalendar = ({
 };
 
 export default memo(BasicCalendar);
+
+const findClosestDate = (selectedDates: Date[], targetDate: Date) => {
+  let left = 0;
+  let right = selectedDates.length - 1;
+  let closest = selectedDates[0];
+
+  while (left <= right) {
+    const mid = Math.floor((left + right) / 2);
+    const currentDate = selectedDates[mid];
+
+    if (isSameMonth(currentDate, targetDate)) {
+      return currentDate;
+    }
+
+    if (
+      Math.abs(differenceInCalendarMonths(currentDate, targetDate)) <
+      Math.abs(differenceInCalendarMonths(closest, targetDate))
+    ) {
+      closest = currentDate;
+    }
+
+    if (currentDate < targetDate) {
+      left = mid + 1;
+    } else {
+      right = mid - 1;
+    }
+  }
+
+  return closest;
+};

src/components/ClassPreview/ClassDates.tsx

@@ -27,11 +27,10 @@ const ClassDates = ({ id }: { id: string | number }) => {
       if (showCalendar) {
         const data = await getClassSchedules(id);
         const { schedules, regularLectureStatus } = data;
-        if (!schedules || !regularLectureStatus) return;
+        if (!schedules && !regularLectureStatus) return Promise.resolve([]);
         const selectedDatesFromSchedule = getDatesFromSchedules(
           schedules || regularLectureStatus,
         );
-
         setSelectedDates(selectedDatesFromSchedule);
       }
 

src/utils/calendarUtils/BigCalendarToolBar.tsx

@@ -21,7 +21,7 @@ const BigCalendarToolBar = ({
   onView,
 }: IToolbarProps) => (
   <div className="mb-2.5 flex items-center justify-between">
-    <div className="grid h-[1.875rem] w-[8.7rem] grid-cols-4 divide-x divide-solid overflow-hidden rounded-md border border-solid border-gray-500">
+    <div className="grid h-[1.875rem] w-32 grid-cols-4 divide-x divide-solid overflow-hidden rounded-md border border-solid border-gray-500">
       <button onClick={() => onNavigate('PREV')} className={NavButtonStyle}>
         <ArrowUpSVG className="h-7 w-full origin-center -rotate-90 fill-black" />
       </button>
@@ -31,7 +31,10 @@ const BigCalendarToolBar = ({
       >
         Today
       </button>
-      <button onClick={() => onNavigate('NEXT')} className={NavButtonStyle}>
+      <button
+        onClick={() => onNavigate('NEXT')}
+        className={`h-7 ${NavButtonStyle}`}
+      >
         <ArrowUpSVG className="h-7 w-full origin-center rotate-90 fill-black" />
       </button>
     </div>
@@ -56,7 +59,7 @@ const NavButtonStyle =
   'flex w-full h-full items-center justify-center hover:bg-gray-700';
 
 const getButtonClass = (isActive: boolean) =>
-  `flex h-7 w-[4.25rem] items-center justify-center rounded-md border border-solid ${
+  `flex h-7 w-[4.25rem] items-center justify-center rounded-md border border-solid px-2 ${
     isActive
       ? 'border-black'
       : 'border-gray-500 text-gray-500 hover:border-gray-500 hover:bg-gray-700 hover:text-gray-500'

src/utils/scheduleDateUtils.ts

@@ -123,8 +123,10 @@ export const calculateRegularFinalClass = (
 };
 
 export const getDatesFromSchedules = (
-  schedules: IRegularClassSchedule[] | IClassSchedule[],
+  schedules?: IRegularClassSchedule[] | IClassSchedule[],
 ) => {
+  if (!schedules) return [];
+
   if ('regularLectureSchedule' in schedules[0]) {
     return (schedules as IRegularClassSchedule[])
       .flatMap((schedule) => schedule.regularLectureSchedule)

tailwind.config.ts

@@ -6,7 +6,11 @@ const config: Config = {
     './src/components/**/*.{js,ts,jsx,tsx,mdx}',
     './src/app/**/*.{js,ts,jsx,tsx,mdx}',
   ],
-  safelist: ['hover:bg-main-color-transparent', 'accent-main-color'],
+  safelist: [
+    'hover:bg-main-color-transparent',
+    'accent-main-color',
+    'grid-cols-4',
+  ],
   theme: {
     extend: {
       colors: {