✨ feat:lazy-loading 적용

Issue Resolved: #

Author: qkdl60

front/eslint.config.js

@@ -29,6 +29,7 @@ export default tseslint.config(
       ...reactHooks.configs.recommended.rules,
       'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
       'prefer-const': ['off'],
+      'react-refresh/only-export-components': ['off'],
     },
   },
 );

front/src/constants/user.ts

@@ -0,0 +1 @@
+export const LOGIN_FAILED_MESSAGE = '아이디 또는 비밀번호가 일치하지 않습니다.';

front/src/pages/LoginPage/index.tsx

@@ -4,38 +4,37 @@ import { type CustomError } from '@/api/axios.ts';
 import { type UserData, postLogin } from '@/api/user.ts';
 
 import { useAuthContext } from '@/hooks/useAuthContext.tsx';
-import useForm, { type Validate } from '@/hooks/useForm';
+import useForm from '@/hooks/useForm';
 
 import { toast } from '@/components/Toast/index.ts';
 import Button from '@/components/common/Button';
 import Field from '@/components/common/Field';
 import Icon from '@/components/common/Icon';
 import Input from '@/components/common/Input';
 
+import { lengthValidate } from '@/pages/LoginPage/validate.ts';
+
+import { LOGIN_FAILED_MESSAGE } from '@/constants/user.ts';
+import type { LoginForm } from '@/type/user.ts';
 import { useMutation } from '@tanstack/react-query';
 import { AxiosResponse } from 'axios';
 
-type Form = {
-  id: string;
-  password: string;
-};
-type ResponseData = {
-  loginId: string;
-};
-
-const FAILED_MESSAGE = '아이디 또는 비밀번호가 일치하지 않습니다.';
 export default function LoginPage() {
+  type ResponseData = {
+    loginId: string;
+  };
+
   const {
     handleSubmit,
     register,
     formState: { errors },
-  } = useForm<Form>();
+  } = useForm<LoginForm>();
   const { login } = useAuthContext();
   const navigation = useNavigate();
   const { mutate, isPending, error } = useMutation<AxiosResponse<ResponseData>, CustomError, UserData>({
     mutationFn: postLogin,
     onError: () => {
-      toast.error(`로그인 실패\n 사유 : ${FAILED_MESSAGE}`);
+      toast.error(`로그인 실패\n 사유 : ${LOGIN_FAILED_MESSAGE}`);
     },
     onSuccess: (data) => {
       const { loginId } = data.data;
@@ -45,7 +44,7 @@ export default function LoginPage() {
     },
   });
 
-  const submit = async (data: Form) => {
+  const submit = async (data: LoginForm) => {
     const { id, password } = data;
     mutate({ loginId: id, loginPassword: password });
   };
@@ -59,7 +58,7 @@ export default function LoginPage() {
         <Field
           label="Id"
           isValid={!errors.id && !error}
-          errorMessage={errors.id ? errors.id : FAILED_MESSAGE}>
+          errorMessage={errors.id ? errors.id : LOGIN_FAILED_MESSAGE}>
           <Input
             disabled={isPending}
             {...register('id', {
@@ -71,7 +70,7 @@ export default function LoginPage() {
         <Field
           label="Password"
           isValid={!errors.password && !error}
-          errorMessage={errors.password ? errors.password : FAILED_MESSAGE}>
+          errorMessage={errors.password ? errors.password : LOGIN_FAILED_MESSAGE}>
           <Input
             type="password"
             disabled={isPending}
@@ -96,9 +95,3 @@ export default function LoginPage() {
     </div>
   );
 }
-
-const lengthValidate: Validate<Form> = ({ value }) => {
-  const isRightLength = value.length >= 4 && value.length <= 12;
-  if (!isRightLength) return '최소 4자리, 최대 12자리 입니다.';
-  return null;
-};

front/src/pages/LoginPage/validate.ts

@@ -0,0 +1,9 @@
+import type { Validate } from '@/hooks/useForm.tsx';
+
+import type { LoginForm } from '@/type/user.ts';
+
+export const lengthValidate: Validate<LoginForm> = ({ value }) => {
+  const isRightLength = value.length >= 4 && value.length <= 12;
+  if (!isRightLength) return '최소 4자리, 최대 12자리 입니다.';
+  return null;
+};

front/src/pages/NotFoundPage.tsx

@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 import Button from '@/components/common/Button.tsx';
 import Icon from '@/components/common/Icon.tsx';
 
-export default function NotFondPage() {
+export default function NotFoundPage() {
   return (
     <div className="flex h-[100vh] w-full items-center justify-center">
       <div className="flex w-[420px] flex-col items-center gap-8">

front/src/routes/index.tsx

@@ -1,31 +1,32 @@
+import { lazy } from 'react';
 import { Navigate, createBrowserRouter } from 'react-router-dom';
 
 import WithLogin from '@/components/loaders/WithLogin';
 import WithoutLogin from '@/components/loaders/WithoutLogin';
 
 import AdminPage from '@/pages/AdminPage';
-import LoginPage from '@/pages/LoginPage';
-import NotFondPage from '@/pages/NotFoundPage.tsx';
-import ProgramDetailPage from '@/pages/ProgramDetailPage';
-import ProgramsPage from '@/pages/ProgramsPage';
+import NotFoundPage from '@/pages/NotFoundPage.tsx';
 import ReservationPage from '@/pages/ReservationPage';
 import ReservationWaitingPage from '@/pages/ReservationWaitingPage';
-import SignUpPage from '@/pages/SignupPage';
 import WaitingQueuePage from '@/pages/WaitingQueuePage/index.tsx';
 
 import { ROUTE_URL } from '@/constants/index.ts';
 import Layout from '@/layout/Layout';
 
+const LoginPage = lazy(() => import('@/pages/LoginPage'));
+const SignUpPage = lazy(() => import('@/pages/SignupPage'));
+const ProgramsPage = lazy(() => import('@/pages/ProgramsPage'));
+const ProgramDetailPage = lazy(() => import('@/pages/ProgramDetailPage'));
+
 //TODO lazyloading,suspene, fallback 적용, withLogin hoc접근 권한 설정, flat보다는 next 처럼 밑으로 최적화도 더 좋다
 const router = createBrowserRouter([
   {
     path: '/',
     element: <Layout />,
-    errorElement: <NotFondPage />,
+    errorElement: <NotFoundPage />,
     children: [
-      { path: '*', element: <NotFondPage /> },
+      { path: '*', element: <NotFoundPage /> },
       { path: '', element: <Navigate to={ROUTE_URL.PROGRAM.DEFAULT} /> },
-
       { path: ROUTE_URL.PROGRAM.DEFAULT, element: <ProgramsPage /> },
       { path: `${ROUTE_URL.PROGRAM.DEFAULT}/:programId`, element: <ProgramDetailPage /> },
       {

front/src/type/user.ts

@@ -1,3 +1,8 @@
 export interface UserInformation {
   loginId: string;
 }
+
+export type LoginForm = {
+  id: string;
+  password: string;
+};