diff --git a/apps/member/src/components/calendar/CalendarSchedule/CalendarSchedule.tsx b/apps/member/src/components/calendar/CalendarSchedule/CalendarSchedule.tsx
deleted file mode 100644
index 8fc9465a..00000000
--- a/apps/member/src/components/calendar/CalendarSchedule/CalendarSchedule.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { cn } from '@clab-platforms/utils';
-
-import { useModal } from '@hooks/common/useModal';
-import { formattedDatePeriod, now } from '@utils/date';
-import dayjs from 'dayjs';
-
-import type { ScheduleItem } from '@type/schedule';
-
-interface CalendarScheduleProps extends ScheduleItem {
-  day: dayjs.Dayjs;
-}
-
-const today = now();
-
-const CalendarSchedule = ({
-  day,
-  title,
-  detail,
-  startDateTime,
-  endDateTime,
-}: CalendarScheduleProps) => {
-  const { open } = useModal();
-  const isDateDiff = dayjs(startDateTime).diff(endDateTime, 'd');
-  const isBeforeToday = day.isBefore(today, 'day');
-
-  const handleScheduleClick = (
-    detail: string,
-    startDateTime: string,
-    endDateTime: string,
-  ) => {
-    open({
-      title: '📆 일정',
-      content: `일시: ${formattedDatePeriod(startDateTime, endDateTime)}\n내용: ${detail}`,
-    });
-  };
-
-  return (
-    <button
-      className={cn(
-        'w-full truncate px-2 text-left text-xs',
-        isDateDiff === 0 ? 'rounded bg-blue-100' : 'bg-red-100',
-        {
-          'rounded-l bg-red-100':
-            isDateDiff !== 0 && day.isSame(startDateTime, 'date'),
-        },
-        {
-          'bg-red-100':
-            isDateDiff !== 0 &&
-            day.isAfter(startDateTime, 'date') &&
-            day.isBefore(endDateTime, 'date'),
-        },
-        {
-          'rounded-r bg-red-100':
-            isDateDiff !== 0 && day.isSame(endDateTime, 'date'),
-        },
-        { 'opacity-50': isBeforeToday },
-      )}
-      onClick={() => handleScheduleClick(detail, startDateTime, endDateTime)}
-    >
-      {title}
-    </button>
-  );
-};
-
-export default CalendarSchedule;
diff --git a/apps/member/src/components/calendar/AddScheduleForm/AddScheduleForm.tsx b/apps/member/src/components/calendar/ScheduleFormSection.tsx
similarity index 94%
rename from apps/member/src/components/calendar/AddScheduleForm/AddScheduleForm.tsx
rename to apps/member/src/components/calendar/ScheduleFormSection.tsx
index fc118994..4706aadc 100644
--- a/apps/member/src/components/calendar/AddScheduleForm/AddScheduleForm.tsx
+++ b/apps/member/src/components/calendar/ScheduleFormSection.tsx
@@ -7,11 +7,11 @@ import Textarea from '@components/common/Textarea/Textarea';
 import useToast from '@hooks/common/useToast';
 import { useScheduleMutation } from '@hooks/queries';
 
-interface AddScheduleFormProps {
+interface Props {
   onSubmit: () => void;
 }
 
-const AddScheduleForm = ({ onSubmit }: AddScheduleFormProps) => {
+export function ScheduleFormSection({ onSubmit }: Props) {
   const toast = useToast();
   const [inputs, setInputs] = useState({
     title: '',
@@ -93,6 +93,4 @@ const AddScheduleForm = ({ onSubmit }: AddScheduleFormProps) => {
       </Button>
     </div>
   );
-};
-
-export default AddScheduleForm;
+}
diff --git a/apps/member/src/components/manage/ManageCalendarSection/ManageCalendarSection.tsx b/apps/member/src/components/manage/ManageCalendarSection/ManageCalendarSection.tsx
index 69047777..342c8c8b 100644
--- a/apps/member/src/components/manage/ManageCalendarSection/ManageCalendarSection.tsx
+++ b/apps/member/src/components/manage/ManageCalendarSection/ManageCalendarSection.tsx
@@ -4,7 +4,7 @@ import { useNavigate } from 'react-router-dom';
 import { Menubar, Table } from '@clab-platforms/design-system';
 import { toDecodeHTMLEntities } from '@clab-platforms/utils';
 
-import AddScheduleForm from '@components/calendar/AddScheduleForm/AddScheduleForm';
+import { ScheduleFormSection } from '@components/calendar/ScheduleFormSection';
 import ActionButton from '@components/common/ActionButton/ActionButton';
 import Pagination from '@components/common/Pagination/Pagination';
 import { Section } from '@components/common/Section';
@@ -83,7 +83,9 @@ const ManageCalendarSection = () => {
         )}
       </Table>
     ),
-    add: <AddScheduleForm onSubmit={() => handleMenubarItemClick('view')} />,
+    add: (
+      <ScheduleFormSection onSubmit={() => handleMenubarItemClick('view')} />
+    ),
   }[mode];
 
   return (
diff --git a/apps/member/src/hooks/queries/schedule/index.ts b/apps/member/src/hooks/queries/schedule/index.ts
index b98e5e9a..76355118 100644
--- a/apps/member/src/hooks/queries/schedule/index.ts
+++ b/apps/member/src/hooks/queries/schedule/index.ts
@@ -1,3 +1,2 @@
 export * from './useSchedule';
 export * from './useScheduleMutation';
-export * from './useScheduleCollect';
diff --git a/apps/member/src/pages/CalendarPage/CalendarPage.tsx b/apps/member/src/pages/CalendarPage/CalendarPage.tsx
deleted file mode 100644
index 2fa9999d..00000000
--- a/apps/member/src/pages/CalendarPage/CalendarPage.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Suspense } from 'react';
-
-import CalendarSection from '@components/calendar/CalendarSection/CalendarSection';
-import CalendarStatusSection from '@components/calendar/CalendarStatusSection/CalendarStatusSection';
-import CalendarTableSection from '@components/calendar/CalendarTableSection/CalendarTableSection';
-import Content from '@components/common/Content/Content';
-import Header from '@components/common/Header/Header';
-
-const CalendarPage = () => {
-  return (
-    <Content>
-      <Header title="일정" />
-      <Suspense>
-        <CalendarStatusSection />
-      </Suspense>
-      <Suspense>
-        <CalendarSection />
-      </Suspense>
-      <Suspense>
-        <CalendarTableSection />
-      </Suspense>
-    </Content>
-  );
-};
-
-export default CalendarPage;
diff --git a/apps/member/src/components/calendar/CalendarSection/CalendarSection.tsx b/apps/member/src/pages/CalendarPage/components/CalendarSection.tsx
similarity index 68%
rename from apps/member/src/components/calendar/CalendarSection/CalendarSection.tsx
rename to apps/member/src/pages/CalendarPage/components/CalendarSection.tsx
index cdd47fc4..f5029659 100644
--- a/apps/member/src/components/calendar/CalendarSection/CalendarSection.tsx
+++ b/apps/member/src/pages/CalendarPage/components/CalendarSection.tsx
@@ -7,12 +7,15 @@ import Section from '@components/common/Section/Section';
 
 import { useSchedule } from '@hooks/queries';
 import { now, transformEvents } from '@utils/date';
+import dayjs from 'dayjs';
 
-import CalendarSchedule from '../CalendarSchedule/CalendarSchedule';
+import type { ScheduleItem } from '@type/schedule';
+
+import { useScheduleInfoModal } from '../hooks/useScheduleInfoModal';
 
 const today = now();
 
-const CalendarSection = () => {
+export default function CalendarSection() {
   const [date, setDate] = useState(today);
   const { data } = useSchedule({
     startDate: date.startOf('month').toString(),
@@ -103,6 +106,54 @@ const CalendarSection = () => {
       </Section.Body>
     </Section>
   );
-};
+}
+
+interface CalendarScheduleProps extends ScheduleItem {
+  day: dayjs.Dayjs;
+}
+
+const CalendarSchedule = ({
+  day,
+  title,
+  detail,
+  startDateTime,
+  endDateTime,
+}: CalendarScheduleProps) => {
+  const { open } = useScheduleInfoModal();
 
-export default CalendarSection;
+  const isDateDiff = dayjs(startDateTime).diff(endDateTime, 'd');
+  const isBeforeToday = day.isBefore(today, 'day');
+
+  return (
+    <button
+      className={cn(
+        'w-full truncate px-2 text-left text-xs',
+        isDateDiff === 0 ? 'rounded bg-blue-100' : 'bg-red-100',
+        {
+          'rounded-l bg-red-100':
+            isDateDiff !== 0 && day.isSame(startDateTime, 'date'),
+        },
+        {
+          'bg-red-100':
+            isDateDiff !== 0 &&
+            day.isAfter(startDateTime, 'date') &&
+            day.isBefore(endDateTime, 'date'),
+        },
+        {
+          'rounded-r bg-red-100':
+            isDateDiff !== 0 && day.isSame(endDateTime, 'date'),
+        },
+        { 'opacity-50': isBeforeToday },
+      )}
+      onClick={() =>
+        open({
+          detail,
+          startDateTime,
+          endDateTime,
+        })
+      }
+    >
+      {title}
+    </button>
+  );
+};
diff --git a/apps/member/src/components/calendar/CalendarStatusSection/CalendarStatusSection.tsx b/apps/member/src/pages/CalendarPage/components/StatusSection.tsx
similarity index 92%
rename from apps/member/src/components/calendar/CalendarStatusSection/CalendarStatusSection.tsx
rename to apps/member/src/pages/CalendarPage/components/StatusSection.tsx
index 66a8cda4..0131bd3e 100644
--- a/apps/member/src/components/calendar/CalendarStatusSection/CalendarStatusSection.tsx
+++ b/apps/member/src/pages/CalendarPage/components/StatusSection.tsx
@@ -8,10 +8,12 @@ import {
 import Section from '@components/common/Section/Section';
 import StatusCard from '@components/common/StatusCard/StatusCard';
 
-import { useSchedule, useScheduleCollect } from '@hooks/queries';
+import { useSchedule } from '@hooks/queries';
 import { calculateDDay, findClosestEvent, transformEvents } from '@utils/date';
 
-const CalendarStatusSection = () => {
+import { useScheduleCollect } from '../hooks/useScheduleCollect';
+
+export function StatusSection() {
   const { data: monthData } = useSchedule();
   const { data: yearData } = useScheduleCollect();
 
@@ -50,6 +52,4 @@ const CalendarStatusSection = () => {
       </Section.Body>
     </Section>
   );
-};
-
-export default CalendarStatusSection;
+}
diff --git a/apps/member/src/components/calendar/CalendarTableSection/CalendarTableSection.tsx b/apps/member/src/pages/CalendarPage/components/TableSection.tsx
similarity index 53%
rename from apps/member/src/components/calendar/CalendarTableSection/CalendarTableSection.tsx
rename to apps/member/src/pages/CalendarPage/components/TableSection.tsx
index 0728d0af..977e8290 100644
--- a/apps/member/src/components/calendar/CalendarTableSection/CalendarTableSection.tsx
+++ b/apps/member/src/pages/CalendarPage/components/TableSection.tsx
@@ -3,24 +3,14 @@ import { Table } from '@clab-platforms/design-system';
 import { Section } from '@components/common/Section';
 
 import { TABLE_HEAD } from '@constants/head';
-import { useModal } from '@hooks/common/useModal';
 import { useSchedule } from '@hooks/queries';
-import { formattedDate, formattedDatePeriod } from '@utils/date';
+import { formattedDate } from '@utils/date';
 
-const CalendarTableSection = () => {
-  const { open } = useModal();
-  const { data } = useSchedule();
+import { useScheduleInfoModal } from '../hooks/useScheduleInfoModal';
 
-  const handleScheduleClick = (
-    detail: string,
-    startDateTime: string,
-    endDateTime: string,
-  ) => {
-    open({
-      title: '📆 일정',
-      content: `일시: ${formattedDatePeriod(startDateTime, endDateTime)}\n내용: ${detail}`,
-    });
-  };
+export function TableSection() {
+  const { open } = useScheduleInfoModal();
+  const { data } = useSchedule();
 
   return (
     <Section>
@@ -28,9 +18,7 @@ const CalendarTableSection = () => {
         {data.items.map(({ id, title, detail, startDateTime, endDateTime }) => (
           <Table.Row
             key={id}
-            onClick={() =>
-              handleScheduleClick(detail, startDateTime, endDateTime)
-            }
+            onClick={() => open({ detail, startDateTime, endDateTime })}
           >
             <Table.Cell>{`${formattedDate(startDateTime)} ~ ${formattedDate(endDateTime)}`}</Table.Cell>
             <Table.Cell>{title}</Table.Cell>
@@ -39,6 +27,4 @@ const CalendarTableSection = () => {
       </Table>
     </Section>
   );
-};
-
-export default CalendarTableSection;
+}
diff --git a/apps/member/src/hooks/queries/schedule/useScheduleCollect.ts b/apps/member/src/pages/CalendarPage/hooks/useScheduleCollect.ts
similarity index 100%
rename from apps/member/src/hooks/queries/schedule/useScheduleCollect.ts
rename to apps/member/src/pages/CalendarPage/hooks/useScheduleCollect.ts
diff --git a/apps/member/src/pages/CalendarPage/hooks/useScheduleInfoModal.ts b/apps/member/src/pages/CalendarPage/hooks/useScheduleInfoModal.ts
new file mode 100644
index 00000000..028edf74
--- /dev/null
+++ b/apps/member/src/pages/CalendarPage/hooks/useScheduleInfoModal.ts
@@ -0,0 +1,25 @@
+import { useMemo } from 'react';
+
+import { useModal } from '@hooks/common/useModal';
+import { formattedDatePeriod } from '@utils/date';
+
+interface Options {
+  startDateTime: string;
+  endDateTime: string;
+  detail: string;
+}
+
+export function useScheduleInfoModal() {
+  const { open } = useModal();
+
+  return useMemo(
+    () => ({
+      open: (options: Options) =>
+        open({
+          title: '📆 일정',
+          content: `일시: ${formattedDatePeriod(options.startDateTime, options.endDateTime)}\n내용: ${options.detail}`,
+        }),
+    }),
+    [open],
+  );
+}
diff --git a/apps/member/src/pages/CalendarPage/index.tsx b/apps/member/src/pages/CalendarPage/index.tsx
new file mode 100644
index 00000000..bcab2aa5
--- /dev/null
+++ b/apps/member/src/pages/CalendarPage/index.tsx
@@ -0,0 +1,28 @@
+import { Suspense } from 'react';
+
+import Content from '@components/common/Content/Content';
+import Header from '@components/common/Header/Header';
+
+import CalendarSection from './components/CalendarSection';
+import { StatusSection } from './components/StatusSection';
+import { TableSection } from './components/TableSection';
+
+export default function CalendarPage() {
+  return (
+    <Content>
+      <Header title="일정" />
+
+      <Suspense>
+        <StatusSection />
+      </Suspense>
+
+      <Suspense>
+        <CalendarSection />
+      </Suspense>
+
+      <Suspense>
+        <TableSection />
+      </Suspense>
+    </Content>
+  );
+}
diff --git a/apps/member/src/pages/Routes.tsx b/apps/member/src/pages/Routes.tsx
index 67e0b04e..a226d791 100644
--- a/apps/member/src/pages/Routes.tsx
+++ b/apps/member/src/pages/Routes.tsx
@@ -41,10 +41,10 @@ const LibraryPage = lazy(() => import('@pages/LibraryPage'));
 const LibraryDetailPage = lazy(() => import('@pages/LibraryDetailPage'));
 const MyPage = lazy(() => import('@pages/MyPage'));
 const SupportPage = lazy(() => import('@pages/SupportPage'));
-const CalendarPage = lazy(() => import('@pages/CalendarPage/CalendarPage'));
+const CalendarPage = lazy(() => import('@pages/CalendarPage'));
 const LoginPage = lazy(() => import('@pages/LoginPage'));
-const AuthPage = lazy(() => import('@pages/AuthPage/AuthPage'));
-const BlogPage = lazy(() => import('@pages/BlogPage/BlogPage'));
+const AuthPage = lazy(() => import('@pages/AuthPage'));
+const BlogPage = lazy(() => import('@pages/BlogPage'));
 const ManagePage = lazy(() => import('@pages/ManagePage/ManagePage'));
 
 const router = createBrowserRouter([
@@ -213,11 +213,19 @@ const router = createBrowserRouter([
     children: [
       {
         path: PATH.LOGIN,
-        element: <LoginPage />,
+        element: (
+          <Suspense>
+            <LoginPage />
+          </Suspense>
+        ),
       },
       {
         path: PATH.AUTH,
-        element: <AuthPage />,
+        element: (
+          <Suspense>
+            <AuthPage />
+          </Suspense>
+        ),
       },
     ],
   },