merge: Merge branch 'develop' into feat/#433_vitest-setting

package.json

@@ -23,7 +23,7 @@
     "axios": "^1.6.8",
     "date-fns": "^3.6.0",
     "firebase": "^10.12.4",
-    "lottie-react": "^2.4.0",
+    "lottie-web": "^5.12.2",
     "nanoid": "^5.0.7",
     "react": "^18.2.0",
     "react-daum-postcode": "^3.1.3",
@@ -58,6 +58,7 @@
     "eslint-plugin-vitest": "^0.5.4",
     "jsdom": "^25.0.0",
     "prettier": "^3.2.5",
+    "rollup-plugin-visualizer": "^5.12.0",
     "typescript": "^5.2.2",
     "vite": "^5.2.0",
     "vitest": "^2.0.5"

src/App.tsx

@@ -3,24 +3,28 @@ import { sessionReplayPlugin } from '@amplitude/plugin-session-replay-browser';
 import { MutationCache, QueryCache, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { AxiosError } from 'axios';
-import { useEffect, useRef, useState } from 'react';
+import { lazy, Suspense, useEffect, useRef, useState } from 'react';
 import { RouterProvider, createBrowserRouter } from 'react-router-dom';
 
 import Layout from '@components/Layout';
 import DeviceTypeProvider from 'contexts/DeviceTypeProvider';
 import RecruitingInfoProvider from 'contexts/RecruitingInfoProvider';
 import ThemeProvider, { useTheme } from 'contexts/ThemeProvider';
 import { dark, light } from 'styles/theme.css';
-import { SessionExpiredDialog } from 'views/dialogs';
-import ErrorPage from 'views/ErrorPage';
-import MainPage from 'views/MainPage';
-import PasswordPage from 'views/PasswordPage';
-import ResultPage from 'views/ResultPage';
-import ReviewPage from 'views/ReviewPage';
-import SignupPage from 'views/SignupPage';
+import BigLoading from 'views/loadings/BigLoding';
 
 import 'styles/reset.css';
 
+const SessionExpiredDialog = lazy(() =>
+  import('views/dialogs').then(({ SessionExpiredDialog }) => ({ default: SessionExpiredDialog })),
+);
+const MainPage = lazy(() => import('views/MainPage'));
+const PasswordPage = lazy(() => import('views/PasswordPage'));
+const ResultPage = lazy(() => import('views/ResultPage'));
+const ReviewPage = lazy(() => import('views/ReviewPage'));
+const SignupPage = lazy(() => import('views/SignupPage'));
+const ErrorPage = lazy(() => import('views/ErrorPage'));
+
 const router = createBrowserRouter([
   {
     path: '/',
@@ -113,7 +117,9 @@ const App = () => {
             <QueryClientProvider client={queryClient}>
               <ReactQueryDevtools />
               <div className={isLight ? light : dark}>
-                <RouterProvider router={router} />
+                <Suspense fallback={<BigLoading />}>
+                  <RouterProvider router={router} />
+                </Suspense>
               </div>
             </QueryClientProvider>
           </RecruitingInfoProvider>

src/common/apis/tokenInstance.ts

@@ -1,5 +1,5 @@
 import axios from 'axios';
-import { isBefore } from 'date-fns';
+import { isBefore } from 'date-fns/isBefore';
 
 const tokenInstance = axios.create({
   baseURL: import.meta.env.VITE_BASE_URL,

src/common/components/Input/components/Timer/index.tsx

@@ -1,4 +1,4 @@
-import { differenceInSeconds } from 'date-fns';
+import { differenceInSeconds } from 'date-fns/differenceInSeconds';
 import { useEffect, useState } from 'react';
 
 import { useDeviceType } from 'contexts/DeviceTypeProvider';

src/common/hooks/useDate.tsx

@@ -1,4 +1,5 @@
-import { isAfter, isBefore } from 'date-fns';
+import { isAfter } from 'date-fns/isAfter';
+import { isBefore } from 'date-fns/isBefore';
 import { useEffect } from 'react';
 
 import { useRecruitingInfo } from 'contexts/RecruitingInfoProvider';

src/views/ApplyPage/components/ApplyInfo/index.tsx

@@ -1,5 +1,6 @@
-import { format, subMinutes } from 'date-fns';
-import { ko } from 'date-fns/locale';
+import { format } from 'date-fns/format';
+import { ko } from 'date-fns/locale/ko';
+import { subMinutes } from 'date-fns/subMinutes';
 import { memo } from 'react';
 
 import Callout from '@components/Callout';

src/views/ApplyPage/index.tsx

@@ -1,5 +1,5 @@
 import { track } from '@amplitude/analytics-browser';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { lazy, useCallback, useEffect, useRef, useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 
@@ -9,8 +9,6 @@ import useCheckBrowser from '@hooks/useCheckBrowser';
 import useDate from '@hooks/useDate';
 import useScrollToHash from '@hooks/useScrollToHash';
 import { useDeviceType } from 'contexts/DeviceTypeProvider';
-import { DraftDialog, PreventApplyDialog, SubmitDialog } from 'views/dialogs';
-import NoMore from 'views/ErrorPage/components/NoMore';
 import BigLoading from 'views/loadings/BigLoding';
 
 import ApplyCategory from './components/ApplyCategory';
@@ -29,6 +27,13 @@ import { buttonWrapper, container, formContainerVar } from './style.css';
 
 import type { ApplyRequest } from './types';
 
+const DraftDialog = lazy(() => import('views/dialogs').then(({ DraftDialog }) => ({ default: DraftDialog })));
+const PreventApplyDialog = lazy(() =>
+  import('views/dialogs').then(({ PreventApplyDialog }) => ({ default: PreventApplyDialog })),
+);
+const SubmitDialog = lazy(() => import('views/dialogs').then(({ SubmitDialog }) => ({ default: SubmitDialog })));
+const NoMore = lazy(() => import('views/ErrorPage/components/NoMore'));
+
 interface ApplyPageProps {
   onSetComplete?: () => void;
 }

src/views/MyPage/index.tsx

@@ -1,12 +1,12 @@
 import { track } from '@amplitude/analytics-browser';
+import { lazy } from 'react';
 
 import Button from '@components/Button';
 import Callout from '@components/Callout';
 import Title from '@components/Title';
 import useDate from '@hooks/useDate';
 import { useDeviceType } from 'contexts/DeviceTypeProvider';
 import { useRecruitingInfo } from 'contexts/RecruitingInfoProvider';
-import NoMore from 'views/ErrorPage/components/NoMore';
 import BigLoading from 'views/loadings/BigLoding';
 
 import {
@@ -19,6 +19,8 @@ import {
   buttonWidthVar,
 } from './style.css';
 
+const NoMore = lazy(() => import('views/ErrorPage/components/NoMore'));
+
 const MyInfoItem = ({ label, value }: { label: string; value?: string | number | boolean }) => {
   const { deviceType } = useDeviceType();
   const isMasking = label !== '지원서';

src/views/PasswordPage/components/PasswordForm/index.tsx

@@ -1,17 +1,18 @@
 import { track } from '@amplitude/analytics-browser';
-import { useRef } from 'react';
+import { lazy, useRef } from 'react';
 import { FormProvider, useForm, type FieldValues } from 'react-hook-form';
 
 import Button from '@components/Button';
 import { TextBox비밀번호, TextBox이름, TextBox이메일 } from '@components/Input/components/InputTheme';
 import { VALIDATION_CHECK } from '@constants/validationCheck';
 import useVerificationStatus from '@hooks/useVerificationStatus';
 import { useRecruitingInfo } from 'contexts/RecruitingInfoProvider';
-import { CompleteDialog } from 'views/dialogs';
 import useMutateChangePassword from 'views/PasswordPage/hooks/useMutateChangePassword';
 
 import { formWrapper } from './style.css';
 
+const CompleteDialog = lazy(() => import('views/dialogs').then(({ CompleteDialog }) => ({ default: CompleteDialog })));
+
 const PasswordForm = () => {
   const completeDialog = useRef<HTMLDialogElement>(null);
   const {

src/views/PasswordPage/index.tsx

@@ -1,12 +1,15 @@
+import { lazy } from 'react';
+
 import Title from '@components/Title';
 import useDate from '@hooks/useDate';
 import { useDeviceType } from 'contexts/DeviceTypeProvider';
-import NoMore from 'views/ErrorPage/components/NoMore';
 import BigLoading from 'views/loadings/BigLoding';
 
 import PasswordForm from './components/PasswordForm';
 import { containerVar } from './style.css';
 
+const NoMore = lazy(() => import('views/ErrorPage/components/NoMore'));
+
 const PasswordPage = () => {
   const { deviceType } = useDeviceType();
   const { NoMoreRecruit, isLoading, isMakers } = useDate();

src/views/ResultPage/components/FinalResult.tsx

@@ -1,6 +1,6 @@
 import { track } from '@amplitude/analytics-browser';
-import { format } from 'date-fns';
-import { ko } from 'date-fns/locale';
+import { format } from 'date-fns/format';
+import { ko } from 'date-fns/locale/ko';
 import { useEffect } from 'react';
 
 import Title from '@components/Title';

src/views/ResultPage/components/ScreeningResult.tsx

@@ -1,6 +1,6 @@
 import { track } from '@amplitude/analytics-browser';
-import { format } from 'date-fns';
-import { ko } from 'date-fns/locale';
+import { format } from 'date-fns/format';
+import { ko } from 'date-fns/locale/ko';
 import { useEffect } from 'react';
 
 import Title from '@components/Title';

src/views/ResultPage/index.tsx

@@ -1,14 +1,15 @@
-import { useEffect } from 'react';
+import { useEffect, lazy } from 'react';
 
 import useDate from '@hooks/useDate';
 import { useTheme } from 'contexts/ThemeProvider';
-import NoMore from 'views/ErrorPage/components/NoMore';
 import BigLoading from 'views/loadings/BigLoding';
 import useGetMyInfo from 'views/SignedInPage/hooks/useGetMyInfo';
 
 import FinalResult from './components/FinalResult';
 import ScreeningResult from './components/ScreeningResult';
 
+const NoMore = lazy(() => import('views/ErrorPage/components/NoMore'));
+
 const ResultPage = () => {
   const { handleChangeMode } = useTheme();
   const { myInfoData, myInfoIsLoading } = useGetMyInfo();

src/views/ReviewPage/index.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { lazy, useCallback, useEffect, useRef, useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 
 import useDate from '@hooks/useDate';
@@ -15,10 +15,13 @@ import PartSection from 'views/ApplyPage/components/PartSection';
 import useGetDraft from 'views/ApplyPage/hooks/useGetDraft';
 import useGetQuestions from 'views/ApplyPage/hooks/useGetQuestions';
 import { container, formContainerVar } from 'views/ApplyPage/style.css';
-import { PreventReviewDialog } from 'views/dialogs';
-import NoMore from 'views/ErrorPage/components/NoMore';
 import BigLoading from 'views/loadings/BigLoding';
 
+const PreventReviewDialog = lazy(() =>
+  import('views/dialogs').then(({ PreventReviewDialog }) => ({ default: PreventReviewDialog })),
+);
+const NoMore = lazy(() => import('views/ErrorPage/components/NoMore'));
+
 const ReviewPage = () => {
   const { deviceType } = useDeviceType();
   const preventReviewDialog = useRef<HTMLDialogElement>(null);

src/views/SignInPage/index.tsx

@@ -1,12 +1,15 @@
+import { lazy } from 'react';
+
 import useDate from '@hooks/useDate';
 import { useDeviceType } from 'contexts/DeviceTypeProvider';
-import NoMore from 'views/ErrorPage/components/NoMore';
 import BigLoading from 'views/loadings/BigLoding';
 
 import SignInForm from './components/SignInForm';
 import SignInInfo from './components/SignInInfo';
 import { containerVar } from './style.css';
 
+const NoMore = lazy(() => import('views/ErrorPage/components/NoMore'));
+
 const SignInPage = () => {
   const { deviceType } = useDeviceType();
   const { isLoading, NoMoreRecruit, isMakers } = useDate();

src/views/SignupPage/components/SignupForm/index.tsx

@@ -1,5 +1,5 @@
 import { track } from '@amplitude/analytics-browser';
-import { useEffect, useRef } from 'react';
+import { lazy, useEffect, useRef } from 'react';
 import { type FieldValues, FormProvider, useForm } from 'react-hook-form';
 
 import Button from '@components/Button';
@@ -11,11 +11,14 @@ import { PRIVACY_POLICY } from '@constants/policy';
 import { VALIDATION_CHECK } from '@constants/validationCheck';
 import useVerificationStatus from '@hooks/useVerificationStatus';
 import { useRecruitingInfo } from 'contexts/RecruitingInfoProvider';
-import { ExistingApplicantDialog } from 'views/dialogs';
 import useMutateSignUp from 'views/SignupPage/hooks/useMutateSignUp';
 
 import { formWrapper } from './style.css';
 
+const ExistingApplicantDialog = lazy(() =>
+  import('views/dialogs').then(({ ExistingApplicantDialog }) => ({ default: ExistingApplicantDialog })),
+);
+
 const SignupForm = () => {
   const {
     recruitingInfo: { season, group },

src/views/SignupPage/index.tsx

@@ -1,12 +1,15 @@
+import { lazy } from 'react';
+
 import Title from '@components/Title';
 import useDate from '@hooks/useDate';
 import { useDeviceType } from 'contexts/DeviceTypeProvider';
-import NoMore from 'views/ErrorPage/components/NoMore';
 import BigLoading from 'views/loadings/BigLoding';
 
 import SignupForm from './components/SignupForm';
 import { containerVar } from './style.css';
 
+const NoMore = lazy(() => import('views/ErrorPage/components/NoMore'));
+
 const SignupPage = () => {
   const { deviceType } = useDeviceType();
   const { NoMoreRecruit, NoMoreApply, isLoading, isMakers } = useDate();

src/views/loadings/BigLoding/index.tsx

@@ -1,6 +1,5 @@
-import Lottie from 'lottie-react';
-
 import { container, loadingText, wrapper } from './style.css';
+import Lottie from '../Lottie';
 import mainLoading from '../lotties/mainLoading.json';
 
 const BigLoading = () => {

src/views/loadings/ButtonLoading/index.tsx

@@ -1,9 +1,8 @@
-import Lottie from 'lottie-react';
-
+import Lottie from '../Lottie';
 import buttonLoadingWhite from '../lotties/buttonLoadingWhite.json';
 
 const ButtonLoading = ({ width, height = 28 }: { width: number | undefined; height?: number }) => {
-  return <Lottie animationData={buttonLoadingWhite} style={{ width: width, height }} />;
+  return <Lottie animationData={buttonLoadingWhite} style={{ width, height }} />;
 };
 
 export default ButtonLoading;

src/views/loadings/Lottie/index.tsx

@@ -0,0 +1,45 @@
+import { type AnimationConfigWithData, type AnimationItem } from 'lottie-web';
+import lottie from 'lottie-web/build/player/lottie_light';
+import { type CSSProperties, useEffect, useRef } from 'react';
+
+const Lottie = ({ animationData, style }: { animationData: unknown; style?: CSSProperties }) => {
+  const animationInstanceRef = useRef<AnimationItem>();
+  const animationContainer = useRef<HTMLDivElement>(null);
+
+  const loadAnimation = () => {
+    // Return if the container ref is null
+    if (!animationContainer.current) {
+      return;
+    }
+
+    // Destroy any previous instance
+    animationInstanceRef.current?.destroy();
+
+    // Build the animation configuration
+    const config: AnimationConfigWithData = {
+      animationData,
+      container: animationContainer.current,
+    };
+
+    // Save the animation instance
+    animationInstanceRef.current = lottie.loadAnimation(config);
+
+    // Return a function that will clean up
+    return () => {
+      animationInstanceRef.current?.destroy();
+      animationInstanceRef.current = undefined;
+    };
+  };
+
+  useEffect(() => {
+    const onUnmount = loadAnimation();
+
+    // Clean up on unmount
+    return () => onUnmount?.();
+    // eslint-disable-next-line
+  }, [animationData]);
+
+  return <div ref={animationContainer} style={style} />;
+};
+
+export default Lottie;

src/views/loadings/SmallLoading/index.tsx

@@ -1,6 +1,5 @@
-import Lottie from 'lottie-react';
-
 import { container, loadingText, wrapper } from './style.css';
+import Lottie from '../Lottie';
 import mainLoading from '../lotties/mainLoading.json';
 
 const SmallLoading = () => {