[소그룹스터디] routes를 static으로 관리

src/App.tsx

@@ -19,6 +19,7 @@ import ModifyEvent from 'page/ManageEvent/ModifyEvent';
 import LogPage from 'component/common/PageLog';
 import CommonLayout from 'page/Auth/components/Common';
 import FindPassword from 'page/Auth/FindPassword';
+import ROUTES from 'static/routes';
 
 interface ProtectedRouteProps {
   userTypeRequired: UserType;
@@ -30,10 +31,10 @@ function ProtectedRoute({ userTypeRequired }: ProtectedRouteProps) {
 
   if (userType !== userTypeRequired) {
     if (userType === 'OWNER') {
-      return <Navigate to="/owner" replace />;
+      return <Navigate to={ROUTES.Owner()} replace />;
     }
     if (userType === null) {
-      return <Navigate to="/login" replace />;
+      return <Navigate to={ROUTES.Login()} replace />;
     }
   }
 
@@ -44,30 +45,30 @@ function App() {
   return (
     <Suspense fallback={<div />}>
       <Routes>
-        <Route path="/" element={<Navigate to="/owner" />} />
+        <Route path={ROUTES.Main()} element={<Navigate to={ROUTES.Owner()} />} />
         <Route element={<ProtectedRoute userTypeRequired="OWNER" />}>
-          <Route path="/owner" element={<OwnerLayout />}>
-            <Route path="/owner" element={<MyShopPage />} />
-            <Route path="/owner/shop-registration" element={<ShopRegistration />} />
-            <Route path="/owner/add-menu" element={<AddMenu />} />
-            <Route path="/owner/modify-menu/:menuId" element={<ModifyMenu />} />
-            <Route path="/owner/modify-info" element={<PageNotFound />} />
-            <Route path="/owner/menu-management" element={<PageNotFound />} />
-            <Route path="/owner/order-management" element={<PageNotFound />} />
-            <Route path="/owner/sales-management" element={<PageNotFound />} />
-            <Route path="/owner/event-add/:id" element={<AddingEvent />} />
-            <Route path="/owner/event-modify/:id" element={<ModifyEvent />} />
+          <Route path={ROUTES.Owner()} element={<OwnerLayout />}>
+            <Route path={ROUTES.Owner()} element={<MyShopPage />} />
+            <Route path={ROUTES.OwnerShopRegistration()} element={<ShopRegistration />} />
+            <Route path={ROUTES.OwnerAddMenu()} element={<AddMenu />} />
+            <Route path={ROUTES.OwnerModifyMenu({ isLink: false })} element={<ModifyMenu />} />
+            <Route path={ROUTES.OwnerModifyInfo()} element={<PageNotFound />} />
+            <Route path={ROUTES.OwnerMenuManagement()} element={<PageNotFound />} />
+            <Route path={ROUTES.OwnerOrderManagement()} element={<PageNotFound />} />
+            <Route path={ROUTES.OwnerSalesmanagement()} element={<PageNotFound />} />
+            <Route path={ROUTES.OwnerEvent({ isLink: false })} element={<AddingEvent />} />
+            <Route path={ROUTES.OwnerEventModify({ isLink: false })} element={<ModifyEvent />} />
           </Route>
         </Route>
 
         <Route element={<AuthLayout />}>
           <Route element={<ProtectedRoute userTypeRequired={null} />}>
-            <Route path="/login" element={<Login />} />
+            <Route path={ROUTES.Login()} element={<Login />} />
             <Route element={<CommonLayout />}>
-              <Route path="/signup" element={<Signup />} />
-              <Route path="/find-password" element={<FindPassword />} />
+              <Route path={ROUTES.Signup()} element={<Signup />} />
+              <Route path={ROUTES.FindPW()} element={<FindPassword />} />
             </Route>
-            <Route path="/find-id" element={<PageNotFound />} />
+            <Route path={ROUTES.FindId()} element={<PageNotFound />} />
           </Route>
         </Route>
       </Routes>

src/component/common/Header/MobilePanel/index.tsx

@@ -11,6 +11,7 @@ import useMobileSidebar from 'component/common/Header/hooks/useMobileSidebar';
 import useUserTypeStore from 'store/useUserTypeStore';
 import { CATEGORY_OWNER, HeaderCategory } from 'utils/constant/category';
 import useSuspenseUser from 'utils/hooks/useSuspenseUser';
+import ROUTES from 'static/routes';
 import styles from './MobilePanel.module.scss';
 
 interface Prop {
@@ -63,8 +64,8 @@ export default function MobilePanel() {
   const handleLogout = () => {
     logout(undefined, {
       onSettled: () => {
-        setPrevPath('/login');
-        navigate('/login');
+        setPrevPath(ROUTES.Login());
+        navigate(ROUTES.Login());
       },
     });
   };
@@ -75,7 +76,7 @@ export default function MobilePanel() {
         className={styles['mobile-header']}
       >
         <span className={styles['mobile-header__title']}>
-          {pathname === '/owner' ? (
+          {pathname === ROUTES.Owner() ? (
             <MobileLogoIcon title="코인 로고" />
           ) : (targetCategory
             .flatMap((categoryValue) => categoryValue.submenu)
@@ -119,7 +120,7 @@ export default function MobilePanel() {
               </div>
               <ul className={styles['mobile-header__auth-menu']}>
                 <li className={styles['mobile-header__my-info']}>
-                  <Link to="/owner/modify-info">
+                  <Link to={ROUTES.OwnerModifyInfo()}>
                     내 정보
                   </Link>
                 </li>

src/component/common/Header/PCPanel/index.tsx

@@ -6,6 +6,7 @@ import { useLogout } from 'query/auth';
 import usePrevPathStore from 'store/path';
 import useMegaMenu from 'component/common/Header/hooks/useMegaMenu';
 import useUserTypeStore from 'store/useUserTypeStore';
+import ROUTES from 'static/routes';
 import styles from './PCPanel.module.scss';
 
 const ID: { [key: string]: string; } = {
@@ -94,8 +95,8 @@ export default function PCPanel() {
   const handleLogout = () => {
     logout(undefined, {
       onSettled: () => {
-        setPrevPath('/login');
-        navigate('/login');
+        setPrevPath(ROUTES.Login());
+        navigate(ROUTES.Login());
       },
     });
   };
@@ -104,20 +105,13 @@ export default function PCPanel() {
     <>
       <Link
         className={styles.header__logo}
-        to="/"
+        to={ROUTES.Main()}
         tabIndex={0}
       >
         <LogoIcon title="코인 로고" />
       </Link>
       <HeaderContent categoryArray={targetCategory} />
-
       <ul className={styles['header__auth-menu']}>
-        {/* Auth 완료시 수정 필요 */}
-        {/* <li className={styles['header__auth-link']}>
-          <Link to="/owner/modify-info">
-            정보수정
-          </Link>
-        </li> */}
         <li className={styles['header__auth-link']}>
           <button type="button" onClick={handleLogout}>
             로그아웃

src/component/common/Header/index.tsx

@@ -1,6 +1,7 @@
 import { ReactComponent as BackArrowIcon } from 'assets/svg/common/back-arrow.svg';
 import { Suspense } from 'react';
 import { useLocation } from 'react-router-dom';
+import ROUTES from 'static/routes';
 import useMediaQuery from 'utils/hooks/useMediaQuery';
 import styles from './Header.module.scss';
 import MobilePanel from './MobilePanel';
@@ -10,9 +11,9 @@ function Header() {
   const { pathname } = useLocation();
   const { isMobile } = useMediaQuery();
 
-  if ((pathname === '/owner/add-menu'
-    || pathname.startsWith('/owner/modify-menu/')
-    || pathname.startsWith('/owner/event-add/'))
+  if ((pathname === ROUTES.OwnerAddMenu()
+    || pathname.startsWith(ROUTES.OwnerModifyMenu({ isLink: false }))
+    || pathname.startsWith(ROUTES.OwnerEvent({ isLink: false })))
     && isMobile) {
     return (
       <header className={styles['add-menu-header']}>
@@ -25,9 +26,9 @@ function Header() {
           <BackArrowIcon title="뒤로 가기 버튼" />
         </button>
         <div className={styles['add-menu-header__caption']}>
-          {pathname === '/owner/add-menu' && '메뉴추가'}
-          {pathname.startsWith('/owner/modify-menu/') && '메뉴수정'}
-          {pathname.startsWith('/owner/event-add/') && '이벤트/공지 작성하기'}
+          {pathname === ROUTES.OwnerAddMenu() && '메뉴추가'}
+          {pathname.startsWith(ROUTES.OwnerModifyMenu({ isLink: false })) && '메뉴수정'}
+          {pathname.startsWith(ROUTES.OwnerEvent({ isLink: false })) && '이벤트/공지 작성하기'}
         </div>
       </header>
     );

src/layout/OwnerLayout/index.tsx

@@ -2,6 +2,7 @@ import ErrorBoundary from 'component/common/ErrorBoundary';
 import Header from 'component/common/Header';
 import { useEffect } from 'react';
 import { Outlet, useLocation, useNavigate } from 'react-router-dom';
+import ROUTES from 'static/routes';
 import usePrevPathStore from 'store/path';
 import useUserStore from 'store/user';
 import useErrorBoundary from 'utils/hooks/useErrorBoundary';
@@ -18,8 +19,8 @@ export default function OwnerLayout() {
       setUser()
         .catch(handleErrorBoundary)
         .catch(() => {
-          setPrevPath('/owner/shop-registration');
-          navigate('/owner/shop-registration');
+          setPrevPath(ROUTES.OwnerShopRegistration());
+          navigate(ROUTES.OwnerShopRegistration());
         });
     }
   }, [handleErrorBoundary, setUser, setPrevPath, navigate, user]);
@@ -28,7 +29,7 @@ export default function OwnerLayout() {
     <div>
       {user && (
         <>
-          {location.pathname !== '/owner/shop-registration' && <Header />}
+          {location.pathname !== ROUTES.OwnerShopRegistration() && <Header />}
           <ErrorBoundary message="에러가 발생했습니다.">
             <Outlet />
           </ErrorBoundary>

src/page/AddMenu/components/GoMyShop/index.tsx

@@ -1,5 +1,6 @@
 import { createPortal } from 'react-dom';
 import { Link } from 'react-router-dom';
+import ROUTES from 'static/routes';
 import styles from './GoMyShopModal.module.scss';
 
 interface CheckModalProps {
@@ -30,7 +31,7 @@ export default function GoMyShopModal({
       >
         <span className={styles['content__main-text']}>{mainMessage}</span>
         <span className={styles['content__sub-text']}>{subMessage}</span>
-        <Link to="/">
+        <Link to={ROUTES.Main()}>
           <button
             type="button"
             className={styles['content__goMyShop-button']}

src/page/AddMenu/index.tsx

@@ -7,6 +7,7 @@ import useAddMenuStore from 'store/addMenu';
 import { useErrorMessageStore } from 'store/errorMessageStore';
 import useScrollToTop from 'utils/hooks/useScrollToTop';
 import useLogger from 'utils/hooks/useLogger';
+import ROUTES from 'static/routes';
 import MenuImage from './components/MenuImage';
 import MenuName from './components/MenuName';
 import MenuPrice from './components/MenuPrice';
@@ -69,7 +70,7 @@ export default function AddMenu() {
     if (isComplete) {
       toggleConfirmClick();
     } else {
-      navigate('/owner');
+      navigate(ROUTES.Owner());
       logger.actionEventClick({ actionTitle: 'OWNER', title: 'add_menu_cancel', value: '메뉴 추가 취소' });
     }
   };

src/page/Auth/Login/index.tsx

@@ -13,6 +13,7 @@ import { LoginParams } from 'model/auth';
 import { useState } from 'react';
 import sha256 from 'utils/ts/SHA-256';
 import { useErrorMessageStore } from 'store/errorMessageStore';
+import ROUTES from 'static/routes';
 import styles from './Login.module.scss';
 import OPTION from './static/option';
 import ApprovalModal from './ApprovalModal';
@@ -129,7 +130,7 @@ export default function Login() {
             로그인
           </button>
           {isMobile && (
-            <button className={styles.form__button} type="button" onClick={() => navigate('/signup')}>
+            <button className={styles.form__button} type="button" onClick={() => navigate(ROUTES.Signup())}>
               회원가입
             </button>
           )}

src/page/Auth/SignupTmp/view/CompletePage/index.tsx

@@ -1,6 +1,7 @@
 import { Link } from 'react-router-dom';
 import { ReactComponent as Check } from 'assets/svg/auth/check.svg';
 import useStepStore from 'store/useStepStore';
+import ROUTES from 'static/routes';
 import styles from './Complete.module.scss';
 
 export default function Complete() {
@@ -22,7 +23,7 @@ export default function Complete() {
           가입 허가가 승인되면 로그인이 가능합니다.
         </span>
       </div>
-      <Link to="/login" className={styles['link-button']} onClick={initialize}>로그인 화면 바로가기</Link>
+      <Link to={ROUTES.Login()} className={styles['link-button']} onClick={initialize}>로그인 화면 바로가기</Link>
     </div>
   );
 }

src/page/Auth/SignupTmp/view/TermsOfServicePage/index.tsx

@@ -4,6 +4,7 @@ import useMediaQuery from 'utils/hooks/useMediaQuery';
 import TERMS from 'page/Auth/Signup/constant/terms';
 import React, { useEffect, useRef, useState } from 'react';
 
+import ROUTES from 'static/routes';
 import styles from './TermsOfService.module.scss';
 
 type ButtonClickEventProps = {
@@ -87,7 +88,7 @@ export default function TermsOfService({ clickEvent, termsRef }:ButtonClickEvent
       <div className={styles.buttons}>
         {isMobile ? (
           <>
-            <Link to="/login" className={styles['buttons__mobile-button']}>취소</Link>
+            <Link to={ROUTES.Login()} className={styles['buttons__mobile-button']}>취소</Link>
             <CustomButton buttonSize="mobile" content="확인" onClick={clickEvent} disable={!isAllAgree} />
           </>
         )

src/page/Auth/components/Common/index.tsx

@@ -3,15 +3,14 @@ import { FormProvider, useForm, UseFormSetError } from 'react-hook-form';
 import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 import cn from 'utils/ts/className';
 import { Register, RegisterUser } from 'model/auth';
-// eslint-disable-next-line
 import { changePassword } from 'api/auth';
 import { phoneRegisterUser } from 'api/register';
 import { isKoinError, sendClientError } from '@bcsdlab/koin';
 import { useStep } from 'page/Auth/hook/useStep';
 import sha256 from 'utils/ts/SHA-256';
 import { useDebounce } from 'utils/hooks/useDebounce';
-// eslint-disable-next-line
-import Done from '../Done/index';
+import ROUTES from 'static/routes';
+import Done from 'page/Auth/components/Done';
 import styles from './index.module.scss';
 
 const setNewPassword = async (
@@ -96,7 +95,7 @@ export default function CommonLayout() {
   const progressPercentage = (index + 1) / totalStep * 100;
 
   const stepCheck = async () => {
-    if (isComplete) navigate('/login');
+    if (isComplete) navigate(ROUTES.Login());
     if (!errors.root) {
       if (index + 1 === totalStep && isFindPassword) {
         setNewPassword(getValues('phone_number'), getValues('password'), setError);

src/page/Auth/components/Done/index.tsx

@@ -1,5 +1,6 @@
 import { ReactComponent as Success } from 'assets/svg/auth/done.svg';
 import { useNavigate } from 'react-router-dom';
+import ROUTES from 'static/routes';
 import styles from './index.module.scss';
 
 const completeFindPassword = {
@@ -36,7 +37,7 @@ export default function Done({ isFindPassword }: Props) {
       </div>
       <button
         type="button"
-        onClick={() => navigate('/login')}
+        onClick={() => navigate(ROUTES.Login())}
         className={styles.button}
       >
         {isFindPassword ? '로그인하러 가기' : '로그인 화면 바로가기'}

src/page/Error/PageNotFound/index.tsx

@@ -1,5 +1,6 @@
 import { ReactComponent as Error } from 'assets/svg/error/page-not-found-error.svg';
 import { useNavigate } from 'react-router-dom';
+import ROUTES from 'static/routes';
 import styles from './PageNotFound.module.scss';
 
 export default function PageNotFound() {
@@ -20,7 +21,7 @@ export default function PageNotFound() {
         <button
           type="button"
           className={styles.content__button}
-          onClick={() => navigate('/owner')}
+          onClick={() => navigate(ROUTES.Owner())}
         >
           메인 화면 바로가기
         </button>

src/page/ManageEvent/AddingEvent/index.tsx

@@ -15,6 +15,7 @@ import { ReactComponent as PictureDisalbe } from 'assets/svg/common/picture-disa
 import { createPortal } from 'react-dom';
 import AlertModal from 'component/common/Modal/alertModal';
 import useLogger from 'utils/hooks/useLogger';
+import ROUTES from 'static/routes';
 
 /* eslint-disable no-await-in-loop */
 /* eslint-disable jsx-a11y/label-has-associated-control */
@@ -419,7 +420,7 @@ export default function AddingEvent() {
           setIsOpen={setIsAlertModalOpen}
           cancelText="이어쓰기"
           acceptText="취소하기"
-          callBack={() => navigate('/')}
+          callBack={() => navigate(ROUTES.Main())}
         />,
         document.body,
       )}

src/page/ManageEvent/ModifyEvent/index.tsx

@@ -15,6 +15,7 @@ import { ReactComponent as Cancel } from 'assets/svg/common/cancel.svg';
 import { ReactComponent as Picture } from 'assets/svg/common/picture.svg';
 import { ReactComponent as PictureDisalbe } from 'assets/svg/common/picture-disable.svg';
 import { createPortal } from 'react-dom';
+import ROUTES from 'static/routes';
 
 /* eslint-disable jsx-a11y/label-has-associated-control */
 
@@ -349,7 +350,7 @@ export default function ModifyEvent() {
           setIsOpen={setIsAlertModalOpen}
           cancelText="이어쓰기"
           acceptText="취소하기"
-          callBack={() => navigate('/')}
+          callBack={() => navigate(ROUTES.Main())}
         />,
         document.body,
       )}