Merge pull request #151 from KNU-HAEDAL/Fix/issue-#150

챌린지 참여 시 로그인 필요한 경우 로직 수정 #150

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) => {
         </S.RowWrapper>
       </S.Wrapper>
 
-      <S.CTA onClick={clickJoinChallenge}>참여하기</S.CTA>
+      <S.CTA onClick={handleJoinChallenge}>참여하기</S.CTA>
     </S.Outer>
   );
 };

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