refactoring: dynamic import

src/components/home/MainPageIndex.tsx

@@ -1,4 +1,5 @@
 'use client';
+import dynamic from 'next/dynamic';
 import React from 'react';
 import BgPurpleLayout from './BgPurpleLayout';
 import MainHeader from './MainHeader';
@@ -7,10 +8,11 @@ import OfficeNotice from './OfficeNotice';
 import UserInfo from './UserInfo';
 import OfficeInfo from './OfficeInfo';
 import WeekSchedule from './weekSchedule/WeekSchedule';
-import AvailableRoom from './AvailableRoom';
+// import AvailableRoom from './AvailableRoom';
 import { useReservationStore } from '@/store/reservationModal.store';
-import OfficeDeleteModal from './officeInfo/OfficeDeleteModal';
-
+// import OfficeDeleteModal from './officeInfo/OfficeDeleteModal';
+const OfficeDeleteModal = dynamic(() => import('./officeInfo/OfficeDeleteModal'));
+const AvailableRoom = dynamic(() => import('./AvailableRoom'));
 const MainPageIndex = () => {
   const { deleteOpen, deleteDeskId } = useReservationStore();
   return (