[FE] feat: 라우팅 관련 처리 (#752)

* feat: 최근 상품 상세 페이지 로컬스토리지에 저장

* fix: 로그아웃 후 마이페이지 방문 시 에러 처리

* refactor: 로컬스토리지 로직 유틸로 이동

frontend/src/constants/index.ts

@@ -63,7 +63,13 @@ export const CATEGORY_TYPE = {
 
 export const IMAGE_MAX_SIZE = 5 * 1024 * 1024;
 
-export const ENVIRONMENT = window.location.href.includes('dev') ? 'dev' : 'prod';
+export const ENVIRONMENT = window.location.href.includes('dev')
+  ? 'dev'
+  : process.env.NODE_ENV === 'production'
+  ? 'prod'
+  : 'local';
 
 export const IMAGE_URL =
   ENVIRONMENT === 'dev' ? process.env.S3_DEV_CLOUDFRONT_PATH : process.env.S3_PROD_CLOUDFRONT_PATH;
+
+export const PRODUCT_PATH_LOCAL_STORAGE_KEY = `funeat-last-product-path-${ENVIRONMENT}`;

frontend/src/hooks/common/index.ts

@@ -12,4 +12,3 @@ export { default as useTabMenu } from './useTabMenu';
 export { default as useScrollRestoration } from './useScrollRestoration';
 export { default as useToast } from './useToast';
 export { default as useGA } from './useGA';
-

frontend/src/pages/AuthPage.tsx

@@ -2,8 +2,10 @@ import { useEffect, useState } from 'react';
 import { Navigate, useNavigate, useParams, useSearchParams } from 'react-router-dom';
 
 import { loginApi } from '@/apis';
+import { PRODUCT_PATH_LOCAL_STORAGE_KEY } from '@/constants';
 import { PATH } from '@/constants/path';
 import { useMemberQuery } from '@/hooks/queries/members';
+import { getLocalStorage, removeLocalStorage } from '@/utils/localstorage';
 
 export const AuthPage = () => {
   const { authProvider } = useParams();
@@ -14,10 +16,6 @@ export const AuthPage = () => {
   const [location, setLocation] = useState('');
   const navigate = useNavigate();
 
-  if (member) {
-    return <Navigate to={PATH.HOME} replace />;
-  }
-
   const getSessionId = async () => {
     const response = await loginApi.get({
       params: `/oauth2/code/${authProvider}`,
@@ -51,9 +49,17 @@ export const AuthPage = () => {
       return;
     }
 
+    const productPath = getLocalStorage(PRODUCT_PATH_LOCAL_STORAGE_KEY);
+    const redirectLocation = productPath ? productPath : location;
+
+    navigate(redirectLocation, { replace: true });
+    removeLocalStorage(PRODUCT_PATH_LOCAL_STORAGE_KEY);
     refetchMember();
-    navigate(location, { replace: true });
   }, [location]);
 
+  if (member) {
+    return <Navigate to={PATH.HOME} replace />;
+  }
+
   return <></>;
 };

frontend/src/pages/ProductDetailPage.tsx

@@ -1,7 +1,7 @@
-import { BottomSheet, Spacing, useBottomSheet, Text, Link } from '@fun-eat/design-system';
+import { BottomSheet, Spacing, useBottomSheet, Text, Button } from '@fun-eat/design-system';
 import { useQueryErrorResetBoundary } from '@tanstack/react-query';
 import { useState, useRef, Suspense } from 'react';
-import { useParams, Link as RouterLink } from 'react-router-dom';
+import { useParams, useLocation, useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 
 import {
@@ -17,12 +17,13 @@ import {
 } from '@/components/Common';
 import { ProductDetailItem, ProductRecipeList } from '@/components/Product';
 import { BestReviewItem, ReviewList, ReviewRegisterForm } from '@/components/Review';
-import { RECIPE_SORT_OPTIONS, REVIEW_SORT_OPTIONS } from '@/constants';
+import { PRODUCT_PATH_LOCAL_STORAGE_KEY, RECIPE_SORT_OPTIONS, REVIEW_SORT_OPTIONS } from '@/constants';
 import { PATH } from '@/constants/path';
 import ReviewFormProvider from '@/contexts/ReviewFormContext';
 import { useGA, useSortOption, useTabMenu } from '@/hooks/common';
 import { useMemberQuery } from '@/hooks/queries/members';
 import { useProductDetailQuery } from '@/hooks/queries/product';
+import { setLocalStorage } from '@/utils/localstorage';
 
 const LOGIN_ERROR_MESSAGE_REVIEW =
   '로그인 후 상품 리뷰를 볼 수 있어요.\n펀잇에 가입하고 편의점 상품 리뷰를 확인해보세요 😊';
@@ -31,6 +32,9 @@ const LOGIN_ERROR_MESSAGE_RECIPE =
 
 export const ProductDetailPage = () => {
   const { category, productId } = useParams();
+  const { pathname } = useLocation();
+  const navigate = useNavigate();
+
   const { data: member } = useMemberQuery();
   const { data: productDetail } = useProductDetailQuery(Number(productId));
 
@@ -46,7 +50,7 @@ export const ProductDetailPage = () => {
 
   const productDetailPageRef = useRef<HTMLDivElement>(null);
 
-  if (!category) {
+  if (!category || !productId) {
     return null;
   }
 
@@ -73,6 +77,11 @@ export const ProductDetailPage = () => {
     selectSortOption(currentSortOption);
   };
 
+  const handleLoginButtonClick = () => {
+    setLocalStorage(PRODUCT_PATH_LOCAL_STORAGE_KEY, pathname);
+    navigate(PATH.LOGIN);
+  };
+
   return (
     <ProductDetailPageContainer ref={productDetailPageRef}>
       <SectionTitle name={name} bookmark={bookmark} />
@@ -107,9 +116,15 @@ export const ProductDetailPage = () => {
           <ErrorDescription align="center" weight="bold" size="lg">
             {isReviewTab ? LOGIN_ERROR_MESSAGE_REVIEW : LOGIN_ERROR_MESSAGE_RECIPE}
           </ErrorDescription>
-          <LoginLink as={RouterLink} to={PATH.LOGIN} block>
+          <LoginButton
+            type="button"
+            customWidth="150px"
+            customHeight="60px"
+            onClick={handleLoginButtonClick}
+            color="white"
+          >
             로그인하러 가기
-          </LoginLink>
+          </LoginButton>
         </ErrorContainer>
       )}
       <Spacing size={100} />
@@ -171,10 +186,8 @@ const ErrorDescription = styled(Text)`
   white-space: pre-wrap;
 `;
 
-const LoginLink = styled(Link)`
-  padding: 16px 24px;
+const LoginButton = styled(Button)`
   border: 1px solid ${({ theme }) => theme.colors.gray4};
-  border-radius: 8px;
 `;
 
 const ReviewRegisterButtonWrapper = styled.div`

frontend/src/router/index.tsx

@@ -1,4 +1,4 @@
-import { createBrowserRouter } from 'react-router-dom';
+import { Navigate, createBrowserRouter } from 'react-router-dom';
 
 import App from './App';
 
@@ -15,7 +15,7 @@ const router = createBrowserRouter([
         <App />
       </AuthLayout>
     ),
-    errorElement: <NotFoundPage />,
+    errorElement: <Navigate to={PATH.LOGIN} replace />,
     children: [
       {
         path: PATH.MEMBER,

frontend/src/utils/localStorage.ts

@@ -0,0 +1,26 @@
+export const getLocalStorage = (key: string) => {
+  const item = localStorage.getItem(key);
+
+  if (item) {
+    try {
+      return JSON.parse(item);
+    } catch (error) {
+      return item;
+    }
+  }
+
+  return null;
+};
+
+export const setLocalStorage = (key: string, newValue: unknown) => {
+  if (typeof newValue === 'string') {
+    localStorage.setItem(key, newValue);
+    return;
+  }
+
+  localStorage.setItem(key, JSON.stringify(newValue));
+};
+
+export const removeLocalStorage = (key: string) => {
+  localStorage.removeItem(key);
+};