✨ Feature: ReDirect 경로 설정

src/apis/otherBox.js

@@ -2,7 +2,11 @@ import { instance } from "./instance";
 
 export const getOtherBoxContents = async (box_id) => {
   try {
-    const res = await instance.get(`/api/box/${box_id}`);
+    const res = await instance.get(`/api/box/${box_id}`, {
+      headers: {
+        // Authorization 헤더를 포함하지 않음
+      },
+    });
     return res;
   } catch (err) {
     console.log(err);

src/pages/CompletePage/CompletePage.jsx

@@ -20,7 +20,10 @@ export const CompletePage = () => {
         </div>
         <S.ButtonContainer>
           <S.Button onClick={() => navigate(`/box/${boxId}`)}>확인 </S.Button>
-          <S.Button>저도 초콜릿 받아볼래요</S.Button>
+          {/* 나만의 박스 조회로 이동 */}
+          <S.Button onClick={() => navigate(`/mypage`)}>
+            저도 초콜릿 받아볼래요
+          </S.Button>
         </S.ButtonContainer>
       </S.Wrapper>
     </S.Container>

src/pages/LoginPage/LoginPage.jsx

@@ -1,6 +1,5 @@
 import React, { useState } from "react";
 import * as S from "./Styled";
-
 import HeartBackGlogin from "../../components/common/Heartbackground/heartBackGlogin";
 import KakaoLogo from "../../assets/images/Icon/KakaoLogo.svg";
 import GoogleLogo from "../../assets/images/Icon/GoogleLogo.svg";
@@ -11,81 +10,91 @@ import { Link } from "react-router-dom";
 import { instance } from "../../apis/instance";
 
 const LoginPage = () => {
-
   const handleKakaoLogin = async () => {
     try {
-      const response = await instance.post('/oauth2/authorization/kakao');
-      console.log('Kakao login success', response.data);
+      const response = await instance.post("/oauth2/authorization/kakao");
+      console.log("Kakao login success", response.data);
     } catch (error) {
       if (error.response && error.response.status === 401) {
-        console.warn('Token expired, reissuing...');
+        console.warn("Token expired, reissuing...");
         await handleTokenReissue();
         handleKakaoLogin();
       } else {
-        console.error('Kakao login failed', error);
+        console.error("Kakao login failed", error);
       }
     }
   };
 
   const handleGoogleLogin = async () => {
     try {
-      const response = await instance.post('/oauth2/authorization/Google');
-      console.log('Google login success', response.data);
+      const response = await instance.post("/oauth2/authorization/Google");
+      console.log("Google login success", response.data);
     } catch (error) {
       if (error.response && error.response.status === 401) {
-        console.warn('Token expired, reissuing...');
+        console.warn("Token expired, reissuing...");
         await handleTokenReissue();
         handleGoogleLogin();
       } else {
-        console.error('Google login failed', error);
+        console.error("Google login failed", error);
       }
     }
   };
 
   const handleNaverLogin = async () => {
     try {
-      const response = await instance.post('/oauth2/authorization/Naver');
-      console.log('Naver login success', response.data);
+      const response = await instance.post("/oauth2/authorization/Naver");
+      console.log("Naver login success", response.data);
     } catch (error) {
       if (error.response && error.response.status === 401) {
-        console.warn('Token expired, reissuing...');
+        console.warn("Token expired, reissuing...");
         await handleTokenReissue();
         handleNaverLogin();
       } else {
-        console.error('Naver login failed', error);
+        console.error("Naver login failed", error);
       }
     }
   };
 
   const handleTokenReissue = async () => {
     try {
-      const response = await instance.post('/api/auth/reissue');
-      console.log('Token reissue success', response.data);
-      instance.defaults.headers.common['Authorization'] = `Bearer ${response.data.newToken}`;
+      const response = await instance.post("/api/auth/reissue");
+      console.log("Token reissue success", response.data);
+      instance.defaults.headers.common[
+        "Authorization"
+      ] = `Bearer ${response.data.newToken}`;
     } catch (error) {
-      console.error('Token reissue fail', error);
+      console.error("Token reissue fail", error);
     }
-  }
+  };
 
   // 토큰을 초기에 발급받은 것이 만료 즉 401 상태일경우 handleTokenReissue를 통해 재발급을 받고 다시 로그인에 시도한다!
   // but 재차 발급받는 것에 다시 오류가 발생하였을 경우 (토큰 재발급에 실패한 경우)
   // 다시 로그인 할 수 있도록 페이지를 전환한다거나 alert을 띄우는 등 새로운 로직이 필요하다
-  
+
   return (
     <S.Container>
       <HeartBackGlogin />
       <S.Wrapper>
         <S.Btn_list>
           <Link to="https://api.choco-express.site/oauth2/authorization/kakao">
-            <S.Btn_Kakaologin><img src={KakaoLogo} alt="Kakao logo" />Log in with Kakao</S.Btn_Kakaologin>
+            <S.Btn_Kakaologin>
+              <img src={KakaoLogo} alt="Kakao logo" />
+              Log in with Kakao
+            </S.Btn_Kakaologin>
           </Link>
 
-          <S.Btn_Googlelogin onClick={handleGoogleLogin}><img src={GoogleLogo} alt="Google logo" />Log in with Google</S.Btn_Googlelogin>
-          <S.Btn_Naverlogin onClick={handleNaverLogin}><img src={NaverLogo} alt="Naver logo" />Log in with NAVER</S.Btn_Naverlogin>
+          <S.Btn_Googlelogin onClick={handleGoogleLogin}>
+            <img src={GoogleLogo} alt="Google logo" />
+            Log in with Google
+          </S.Btn_Googlelogin>
+          <S.Btn_Naverlogin onClick={handleNaverLogin}>
+            <img src={NaverLogo} alt="Naver logo" />
+            Log in with NAVER
+          </S.Btn_Naverlogin>
         </S.Btn_list>
       </S.Wrapper>
     </S.Container>
-  )
-}
+  );
+};
 
-export default LoginPage;
+export default LoginPage;

src/pages/NotFound/NotFound.jsx

@@ -2,7 +2,9 @@ import * as S from "./styled";
 import HeartBackG from "../../components/common/Heartbackground/heartBackG";
 import Dots from "../../assets/images/3Dots.svg";
 import NotFoundLogo from "../../assets/images/NotFoundLogo.svg";
+import { useNavigate } from "react-router-dom";
 export const NotFound = () => {
+  const navigate = useNavigate();
   return (
     <S.Container>
       <HeartBackG />
@@ -16,6 +18,13 @@ export const NotFound = () => {
           <div>앗! 안전한 배송을 위한 재정비가 필요해요</div>
           <div className="coment">오류가 발생했습니다</div>
         </S.ComentContainer>
+        <S.HomeBtn
+          onClick={() => {
+            navigate(`/mypage`);
+          }}
+        >
+          메인으로
+        </S.HomeBtn>
       </S.Wrapper>
     </S.Container>
   );

src/pages/NotFound/styled.js

@@ -59,3 +59,25 @@ export const ComentContainer = styled.div`
     font-size: 12px;
   }
 `;
+export const HomeBtn = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 131px;
+  height: 50px;
+  gap: 10px;
+  border-radius: 30px;
+  border: 2px solid #fef7e2;
+  background: #532a13;
+  color: #fef7e2;
+  font-family: "Pretendard-Regular";
+  font-size: 17px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 120%; /* 20.4px */
+  cursor: pointer;
+  &:hover,
+  :active {
+    background: #f34381;
+  }
+`;

src/pages/otherboxPage/otherboxPage.jsx

@@ -1,19 +1,47 @@
 import * as S from "./styled";
 import HeartBackG from "../../components/common/Heartbackground/heartBackG";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 import { BOXES } from "../../constants/Boxes/data";
 import { useOtherBox } from "../../hooks/useOtherBox";
+import Cookies from "js-cookie";
+
 export const OtherboxPage = () => {
   const { otherData } = useOtherBox();
-  console.log("otherData:", otherData);
+  console.log("상대방 박스 조회 data:", otherData);
   const navigate = useNavigate();
+  const location = useLocation();
+  const token = Cookies.get("access_token");
+  const boxId = otherData.boxId;
+
   const MoveOnLetterP = () => {
-    const boxId = otherData.boxId;
+    if (!token) {
+      // 토큰이 없으면 로그인 페이지로 리다이렉트하고, 돌아올 페이지 정보를 함께 전달
+      sessionStorage.setItem(
+        "redirectURL",
+        `https://choco-express.site/box/${boxId}/choco`
+      );
+      navigate("");
+    } else {
+      // 토큰이 있으면 초콜릿 보내기 페이지로 이동
+      navigate(`/box/${boxId}/choco`, { state: { otherData } });
+    }
+  };
 
-    navigate(`/box/${boxId}/choco`, { state: { otherData } });
+  const MoveOnMainP = () => {
+    if (!token) {
+      // 토큰이 없으면 로그인 페이지로 리다이렉트하고, 돌아올 페이지 정보를 함께 전달
+      sessionStorage.setItem(
+        "redirectURL",
+        `https://choco-express.site/box/${boxId}/choco`
+      );
+      navigate("");
+    } else {
+      // 토큰이 있으면 나만의 박스 조회 페이지로 이동
+      navigate(`/mypage`);
+    }
   };
   if (!otherData) {
-    return <div>Loading...</div>; // 데이터가 로드되기 전에 로딩 메시지를 표시하거나 로딩 스피너를 추가할 수 있음
+    return <div>Loading...</div>;
   }
   const selectedBox = BOXES.find((box) => box.id === otherData.boxType);
   return (
@@ -34,7 +62,13 @@ export const OtherboxPage = () => {
           >
             초콜릿 보내기
           </S.Button>
-          <S.Button>내 초콜릿 상자 보러가기</S.Button>
+          <S.Button
+            onClick={() => {
+              MoveOnMainP();
+            }}
+          >
+            내 초콜릿 상자 보러가기
+          </S.Button>
         </S.ButtonContainer>
       </S.Wrapper>
     </S.Container>