Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 3 commits into from
Oct 13, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion frontend/src/constants/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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}`;
1 change: 0 additions & 1 deletion frontend/src/hooks/common/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';

16 changes: 11 additions & 5 deletions frontend/src/pages/AuthPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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}`,
Expand Down Expand Up @@ -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 <></>;
};
31 changes: 22 additions & 9 deletions frontend/src/pages/ProductDetailPage.tsx
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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펀잇에 가입하고 편의점 상품 리뷰를 확인해보세요 😊';
Expand All @@ -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));

Expand All @@ -46,7 +50,7 @@ export const ProductDetailPage = () => {

const productDetailPageRef = useRef<HTMLDivElement>(null);

if (!category) {
if (!category || !productId) {
return null;
}

Expand All @@ -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} />
Expand Down Expand Up @@ -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} />
Expand Down Expand Up @@ -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`
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/router/index.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { createBrowserRouter } from 'react-router-dom';
import { Navigate, createBrowserRouter } from 'react-router-dom';

import App from './App';

Expand All @@ -15,7 +15,7 @@ const router = createBrowserRouter([
<App />
</AuthLayout>
),
errorElement: <NotFoundPage />,
errorElement: <Navigate to={PATH.LOGIN} replace />,
children: [
{
path: `${PATH.RECIPE}/:recipeId`,
Expand Down
26 changes: 26 additions & 0 deletions frontend/src/utils/localStorage.ts
Original file line number Diff line number Diff line change
@@ -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);
};
Loading