feat: 꿀조합 페이지 접속 시 이전 페이지 로컬스토리지에 경로 저장

woowacourse-teams · Oct 19, 2023 · 69c68d8 · 69c68d8
1 parent c4bb04f
commit 69c68d8
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 10 deletions.
diff --git a/frontend/src/constants/index.ts b/frontend/src/constants/index.ts
@@ -72,4 +72,4 @@ export const ENVIRONMENT = window.location.href.includes('dev')
 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}`;
+export const PREVIOUS_PATH_LOCAL_STORAGE_KEY = `funeat-previous-path-${ENVIRONMENT}`;
diff --git a/frontend/src/mocks/handlers/recipeHandlers.ts b/frontend/src/mocks/handlers/recipeHandlers.ts
@@ -7,6 +7,12 @@ import mockRecipes from '../data/recipes.json';
 
 export const recipeHandlers = [
   rest.get('/api/recipes/:recipeId', (req, res, ctx) => {
+    const { mockSessionId } = req.cookies;
+
+    if (!mockSessionId) {
+      return res(ctx.status(401));
+    }
+
     return res(ctx.status(200), ctx.json(recipeDetail), ctx.delay(1000));
   }),
 

diff --git a/frontend/src/pages/AuthPage.tsx b/frontend/src/pages/AuthPage.tsx
@@ -2,7 +2,7 @@ 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 { PREVIOUS_PATH_LOCAL_STORAGE_KEY } from '@/constants';
 import { PATH } from '@/constants/path';
 import { useMemberQuery } from '@/hooks/queries/members';
 import { getLocalStorage, removeLocalStorage } from '@/utils/localStorage';
@@ -49,11 +49,11 @@ export const AuthPage = () => {
       return;
     }
 
-    const productPath = getLocalStorage(PRODUCT_PATH_LOCAL_STORAGE_KEY);
-    const redirectLocation = productPath ? productPath : location;
+    const previousPath = getLocalStorage(PREVIOUS_PATH_LOCAL_STORAGE_KEY);
+    const redirectLocation = previousPath ? previousPath : location;
 
     navigate(redirectLocation, { replace: true });
-    removeLocalStorage(PRODUCT_PATH_LOCAL_STORAGE_KEY);
+    removeLocalStorage(PREVIOUS_PATH_LOCAL_STORAGE_KEY);
     refetchMember();
   }, [location]);
 

diff --git a/frontend/src/pages/ProductDetailPage.tsx b/frontend/src/pages/ProductDetailPage.tsx
@@ -17,7 +17,7 @@ import {
 } from '@/components/Common';
 import { ProductDetailItem, ProductRecipeList } from '@/components/Product';
 import { BestReviewItem, ReviewList, ReviewRegisterForm } from '@/components/Review';
-import { PRODUCT_PATH_LOCAL_STORAGE_KEY, RECIPE_SORT_OPTIONS, REVIEW_SORT_OPTIONS } from '@/constants';
+import { PREVIOUS_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';
@@ -78,7 +78,7 @@ export const ProductDetailPage = () => {
   };
 
   const handleLoginButtonClick = () => {
-    setLocalStorage(PRODUCT_PATH_LOCAL_STORAGE_KEY, pathname);
+    setLocalStorage(PREVIOUS_PATH_LOCAL_STORAGE_KEY, pathname);
     navigate(PATH.LOGIN);
   };
 

diff --git a/frontend/src/pages/RecipePage.tsx b/frontend/src/pages/RecipePage.tsx
@@ -1,7 +1,7 @@
 import { BottomSheet, Heading, Link, Spacing, useBottomSheet } from '@fun-eat/design-system';
 import { useQueryErrorResetBoundary } from '@tanstack/react-query';
-import { Suspense, useRef, useState } from 'react';
-import { Link as RouterLink } from 'react-router-dom';
+import { Suspense, useEffect, useRef, useState } from 'react';
+import { Link as RouterLink, useLocation } from 'react-router-dom';
 import styled from 'styled-components';
 
 import {
@@ -15,10 +15,11 @@ import {
   SvgIcon,
 } from '@/components/Common';
 import { RecipeList, RecipeRegisterForm } from '@/components/Recipe';
-import { RECIPE_SORT_OPTIONS } from '@/constants';
+import { PREVIOUS_PATH_LOCAL_STORAGE_KEY, RECIPE_SORT_OPTIONS } from '@/constants';
 import { PATH } from '@/constants/path';
 import RecipeFormProvider from '@/contexts/RecipeFormContext';
 import { useGA, useSortOption } from '@/hooks/common';
+import { setLocalStorage } from '@/utils/localStorage';
 
 const RECIPE_PAGE_TITLE = '🍯 꿀조합';
 const REGISTER_RECIPE = '꿀조합 작성하기';
@@ -30,9 +31,14 @@ export const RecipePage = () => {
   const { isOpen, isClosing, handleOpenBottomSheet, handleCloseBottomSheet } = useBottomSheet();
   const { reset } = useQueryErrorResetBoundary();
   const { gaEvent } = useGA();
+  const { pathname } = useLocation();
 
   const recipeRef = useRef<HTMLDivElement>(null);
 
+  useEffect(() => {
+    setLocalStorage(PREVIOUS_PATH_LOCAL_STORAGE_KEY, pathname);
+  }, []);
+
   const handleOpenRegisterRecipeSheet = () => {
     setActiveSheet('registerRecipe');
     handleOpenBottomSheet();