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)}`;
},
};