diff --git a/src/pages/challenge-detail/components/challenge/index.tsx b/src/pages/challenge-detail/components/challenge/index.tsx index af8821b..409f8e7 100644 --- a/src/pages/challenge-detail/components/challenge/index.tsx +++ b/src/pages/challenge-detail/components/challenge/index.tsx @@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom'; import * as S from './styles'; import { joinChallenge } from '@/apis/challenge-detail/challenge.detail.api'; import { type Challenge } from '@/apis/challenge-detail/challenge.detail.response'; -import { RouterPath } from '@/routes/path'; +import { getDynamicPath } from '@/routes/protected-route'; type Props = { challenge: Challenge; @@ -14,7 +14,7 @@ const Challenge = ({ challenge, maxDifficulty }: Props) => { const difficultyRate = (challenge.difficulty / maxDifficulty) * 100; const navigate = useNavigate(); - const clickJoinChallenge = () => { + const handleJoinChallenge = () => { joinChallenge(challenge.id) .then((res) => { alert(res.message); @@ -24,7 +24,7 @@ const Challenge = ({ challenge, maxDifficulty }: Props) => { if (error.result === 'FAIL') { if (error.errorCode === 'UNAUTHORIZED') { alert('로그인 후 시도해주세요.'); - navigate(RouterPath.auth); + navigate(getDynamicPath.login()); } else { alert(error.message || '다시 시도해주세요.'); } @@ -74,7 +74,7 @@ const Challenge = ({ challenge, maxDifficulty }: Props) => { - 참여하기 + 참여하기 ); }; diff --git a/src/routes/protected-route.tsx b/src/routes/protected-route.tsx index 30c44c3..c5827b9 100644 --- a/src/routes/protected-route.tsx +++ b/src/routes/protected-route.tsx @@ -1,5 +1,5 @@ import { ReactNode, useEffect } from 'react'; -import { useNavigate, useLocation } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; import { RouterPath } from './path'; @@ -10,23 +10,22 @@ interface ProtectedRouteProps { export const ProtectedRoute = ({ children }: ProtectedRouteProps) => { const accessToken = localStorage.getItem('accessToken'); const navigate = useNavigate(); - const location = useLocation(); // accessToken이 없으면 로그인페이지로 리다이렉트, 있으면 자식 요소(페이지) 렌더링 useEffect(() => { if (!accessToken) { alert('로그인 후 이용해주세요.'); - navigate(getDynamicPath.login(location.pathname)); // host 빼고 경로만 + navigate(getDynamicPath.login()); } - }, [accessToken, location.pathname, navigate]); + }, [accessToken, navigate]); return accessToken ? <>{children} : null; }; // 로그인 필요한 페이지라면 로그인 페이지로 리다이렉트, 로그인 완료 시 원래 페이지로 돌아가는 함수 -const getDynamicPath = { +export const getDynamicPath = { login: (redirect?: string) => { - const currentRedirect = redirect ?? window.location.href; + const currentRedirect = redirect ?? window.location.pathname; // host 뺀 경로(pathname)로 접근 return `/${RouterPath.auth}?redirect=${encodeURIComponent(currentRedirect)}`; }, };