코드 스플리팅, Vite 설정 수정 후 배포

src/Pages/Applicants/index.tsx

@@ -14,7 +14,7 @@ import { P, match } from 'ts-pattern';
 import { useStudyDetail } from '@/Hooks/study/useStudyDetail';
 import { Applicant } from '@/Types/study';
 
-export const ApplicantsPage = () => {
+const ApplicantsPage = () => {
   const studyId = Number(useParams().studyId);
   const { user } = useUserStore();
   const { data: ApplicantsDetail, status } = useApplicantsDetail(studyId);
@@ -329,3 +329,5 @@ const PlaceHolderTitle = styled.span`
   color: ${({ theme }) => theme.color.black4};
   ${({ theme }) => theme.typo.ListLabel};
 `;
+
+export default ApplicantsPage;

src/Pages/MyPageReviews/index.tsx

@@ -6,7 +6,7 @@ import { StudyReviewsType } from '@/Types/review';
 import { Children, PropsWithChildren, ReactNode } from 'react';
 import styled from 'styled-components';
 
-export const MyPageReviews = () => {
+const MyPageReviews = () => {
   const { data: allStudyreviews, isLoading } = useReviews();
 
   return (
@@ -71,3 +71,5 @@ const PlaceHolderTitle = styled.span`
   color: ${({ theme }) => theme.color.black4};
   ${({ theme }) => theme.typo.ListLabel};
 `;
+
+export default MyPageReviews;

src/Pages/Notifications/index.tsx

@@ -9,7 +9,7 @@ import ChipMenu from '@/Components/Common/ChipMenu';
 import { useState } from 'react';
 import { media } from '@/Styles/theme';
 
-export const Notifications = () => {
+const Notifications = () => {
   const { data: notifications, isLoading } = useNotifications();
 
   const [selectedNotificationType, setSelectedNotificationType] = useState<'REVIEW' | 'RECRUITMENT' | 'STUDY'>('STUDY');
@@ -109,3 +109,5 @@ const PlaceHolderTitle = styled.span`
   color: ${({ theme }) => theme.color.black4};
   ${({ theme }) => theme.typo.ListLabel};
 `;
+
+export default Notifications;

src/Pages/NotificationsSettings/index.tsx

@@ -6,7 +6,7 @@ import { Loading } from '@/Assets';
 import { KeywordsSettingForm } from './KeywordsSettingForm';
 import { NOTIFICATIONS_SETTINGS_CONTENTS } from '@/Constants/messages';
 
-export const NotificationsSettings = () => {
+const NotificationsSettings = () => {
   const { data: notificationsSetting, isLoading } = useNotificationsSetting();
 
   return (
@@ -139,3 +139,5 @@ const ToggleSwitches = styled.div`
   width: 100%;
   flex-direction: column;
 `;
+
+export default NotificationsSettings;

src/Pages/Review/index.tsx

@@ -41,7 +41,7 @@ const reviewDataList = {
 
 type ReviewResult = Record<keyof typeof reviewDataList, number>;
 
-export const ReviewPage = () => {
+const ReviewPage = () => {
   const { studyId, userId } = useParams();
   const navigate = useNavigate();
 
@@ -238,3 +238,5 @@ const FooterInner = styled.div`
     flex: 1;
   }
 `;
+
+export default ReviewPage;

src/Router/index.tsx

@@ -1,33 +1,33 @@
 import { lazy, Suspense } from 'react';
 import { Outlet, createBrowserRouter } from 'react-router-dom';
 import { ROUTES } from '@/Constants/route';
-import SignUpPage from '@/Pages/SignUp';
-import { ApplicantsPage } from '@/Pages/Applicants';
-import MainPage from '@/Pages/Main';
-import RecruitmentsPage from '@/Pages/Recruitments';
-import StudyDetailPage from '@/Pages/StudyDetail';
-import CreateStudyPage from '@/Pages/Studies/CreateStudy';
-import ModifyStudyPage from '@/Pages/Studies/EditStudy';
-import CreateRecruitmentPage from '@/Pages/CreateRecruitment';
-import LoginFailPage from '@/Pages/LoginFail';
-import SignUpFailPage from '@/Pages/SignUpFail';
-import MyPageHome from '@/Pages/MyPageHome/index';
 import { Saved } from '@/Pages/Saved';
 import Header from '@/Components/Header';
 import Footer from '@/Components/Footer';
+import { Loading } from '@/Assets';
 import ErrorBoundary from '@/Components/ErrorBoundary';
 import { EditRecruitmentPage } from '@/Pages/EditRecruitment';
 import { MyPageLayout } from '@/Layout/MyPageLayout';
-import { SettingLayout } from '@/Layout/SettingLayout';
-import { NotificationsSettings } from '@/Pages/NotificationsSettings';
-import { ReviewPage } from '@/Pages/Review';
-import { Notifications } from '@/Pages/Notifications';
-import { MyPageReviews } from '@/Pages/MyPageReviews';
 import { ProfileLayout } from '@/Layout/ProfileLayout';
-import { Loading } from '@/Assets';
+import { SettingLayout } from '@/Layout/SettingLayout';
+import MainPage from '@/Pages/Main';
+import RecruitmentsPage from '@/Pages/Recruitments';
 
 const LoginPage = lazy(() => import('@/Pages/Login'));
+const SignUpPage = lazy(() => import('@/Pages/SignUp'));
 const RecruitmentDetailPage = lazy(() => import('@/Pages/RecruitmentDetail'));
+const StudyDetailPage = lazy(() => import('@/Pages/StudyDetail'));
+const ApplicantsPage = lazy(() => import('@/Pages/Applicants'));
+const CreateStudyPage = lazy(() => import('@/Pages/Studies/CreateStudy'));
+const ModifyStudyPage = lazy(() => import('@/Pages/Studies/EditStudy'));
+const CreateRecruitmentPage = lazy(() => import('@/Pages/CreateRecruitment'));
+const LoginFailPage = lazy(() => import('@/Pages/LoginFail'));
+const SignUpFailPage = lazy(() => import('@/Pages/SignUpFail'));
+const MyPageHome = lazy(() => import('@/Pages/MyPageHome/index'));
+const NotificationsSettings = lazy(() => import('@/Pages/NotificationsSettings'));
+const ReviewPage = lazy(() => import('@/Pages/Review'));
+const Notifications = lazy(() => import('@/Pages/Notifications'));
+const MyPageReviews = lazy(() => import('@/Pages/MyPageReviews'));
 
 const SuspenseWrapper = ({ children }: { children: React.ReactNode }) => (
   <Suspense fallback={<Loading />}>{children}</Suspense>
@@ -59,15 +59,21 @@ export const RouterPath = createBrowserRouter([
       },
       {
         path: ROUTES.AUTH.LOGINFAIL,
-        element: <LoginFailPage />,
+        element: (
+          <SuspenseWrapper>
+            <LoginFailPage />
+          </SuspenseWrapper>
+        ),
       },
       {
         // 마이페이지
         path: ROUTES.MYPAGE.HOME,
         // 마이페이지 공통 사이드바
         element: (
           <MyPageLayout>
-            <Outlet />
+            <SuspenseWrapper>
+              <Outlet />
+            </SuspenseWrapper>
           </MyPageLayout>
         ),
         children: [
@@ -115,11 +121,19 @@ export const RouterPath = createBrowserRouter([
       },
       {
         path: ROUTES.STUDY.DETAIL,
-        element: <StudyDetailPage />,
+        element: (
+          <SuspenseWrapper>
+            <StudyDetailPage />
+          </SuspenseWrapper>
+        ),
       },
       {
         path: ROUTES.RECRUITMENT.RECRUITMENTS,
-        element: <RecruitmentsPage />,
+        element: (
+          <SuspenseWrapper>
+            <RecruitmentsPage />
+          </SuspenseWrapper>
+        ),
       },
       {
         path: ROUTES.RECRUITMENT.DETAIL,
@@ -131,42 +145,74 @@ export const RouterPath = createBrowserRouter([
       },
       {
         path: ROUTES.AUTH.SIGNUP,
-        element: <SignUpPage />,
+        element: (
+          <SuspenseWrapper>
+            <SignUpPage />
+          </SuspenseWrapper>
+        ),
       },
       {
         path: ROUTES.AUTH.SIGNUPFAIL,
-        element: <SignUpFailPage />,
+        element: (
+          <SuspenseWrapper>
+            <SignUpFailPage />
+          </SuspenseWrapper>
+        ),
       },
     ],
   },
   {
     // 스터디원 평가 페이지
     path: ROUTES.STUDY.REVIEW,
-    element: <ReviewPage />,
+    element: (
+      <SuspenseWrapper>
+        <ReviewPage />
+      </SuspenseWrapper>
+    ),
   },
   {
     // 스터디 생성 페이지
     path: ROUTES.STUDY.CREATE,
-    element: <CreateStudyPage />,
+    element: (
+      <SuspenseWrapper>
+        <CreateStudyPage />
+      </SuspenseWrapper>
+    ),
   },
   {
     // 스터디 수정 페이지
     path: ROUTES.STUDY.MODIFY,
-    element: <ModifyStudyPage />,
+    element: (
+      <SuspenseWrapper>
+        <ModifyStudyPage />
+      </SuspenseWrapper>
+    ),
   },
   {
     // 스터디 지원자 페이지
     path: ROUTES.STUDY.APPLICANTS,
-    element: <ApplicantsPage />,
+    element: (
+      <SuspenseWrapper>
+        <ApplicantsPage />
+      </SuspenseWrapper>
+    ),
   },
   {
     // 모집공고 생성 페이지
     path: ROUTES.RECRUITMENT.CREATE,
-    element: <CreateRecruitmentPage />,
+    element: (
+      <SuspenseWrapper>
+        <CreateRecruitmentPage />
+      </SuspenseWrapper>
+    ),
   },
   // 모집공고 수정 페이지
   {
     path: ROUTES.RECRUITMENT.EDIT,
-    element: <EditRecruitmentPage />,
+    element: (
+      <SuspenseWrapper>
+        <EditRecruitmentPage />
+      </SuspenseWrapper>
+    ),
   },
 ]);

vite.config.ts

@@ -3,24 +3,9 @@ import svgr from 'vite-plugin-svgr';
 import react from '@vitejs/plugin-react';
 import * as path from 'path';
 import mkcert from 'vite-plugin-mkcert';
-import { VitePluginRadar } from 'vite-plugin-radar';
 
 export default defineConfig({
-  plugins: [
-    react(),
-    svgr(),
-    mkcert(),
-    VitePluginRadar({
-      // GA measurement id
-      analytics: {
-        id: 'G-VW71YW2W58',
-      },
-      // GTM container id
-      gtm: {
-        id: 'GTM-WLWBHQRJ',
-      },
-    }),
-  ],
+  plugins: [react(), svgr(), mkcert()],
   resolve: {
     alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }],
   },