Merge pull request #43 from Chaem03/feature/#22

✨ Feature: complete페이지 라우터 주소 변경

src/hooks/useOtherBox.js

@@ -1,5 +1,5 @@
 import { getOtherBoxContents } from "../apis/otherBox";
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import { useParams } from "react-router-dom";
 
 export const useOtherBox = () => {

src/pages/CompletePage/CompletePage.jsx

@@ -1,18 +1,22 @@
 import * as S from "./styled";
 import HeartBackG from "../../components/common/Heartbackground/heartBackG";
 import { useNavigate } from "react-router-dom";
+import { useParams } from "react-router-dom";
+import { useOtherBox } from "../../hooks/useOtherBox";
 export const CompletePage = () => {
+  const { otherData } = useOtherBox();
+  const { boxId } = useParams();
   const navigate = useNavigate();
   return (
     <S.Container>
       <HeartBackG />
       <S.Wrapper>
         <div className="Box">
-          <div>[하채민] 에게 초콜릿을 보냈어요!</div>
+          <div>[{otherData.boxName}] 에게 초콜릿을 보냈어요!</div>
           <S.BoxContainer></S.BoxContainer>
         </div>
         <S.ButtonContainer>
-          <S.Button onClick={() => navigate("/box")}>확인 </S.Button>
+          <S.Button onClick={() => navigate(`/box/${boxId}`)}>확인 </S.Button>
           <S.Button>저도 초콜릿 받아볼래요</S.Button>
         </S.ButtonContainer>
       </S.Wrapper>

src/pages/LetterPage/LetterPostPage.jsx

@@ -4,8 +4,7 @@ import { NameSetting } from "../../components/NameSetting/NameSetting";
 import HeartBackG from "../../components/common/Heartbackground/heartBackG";
 import ChocoSelector from "../../components/ChocoSelector/ChocoSelector";
 import { LetterPost } from "../../components/letterPost/LetterPost";
-import { useNavigate } from "react-router-dom";
-import { useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import { postChocolate } from "../../apis/postChoco";
 
 export const LetterPostPage = () => {
@@ -45,10 +44,10 @@ export const LetterPostPage = () => {
 
     try {
       const res = await postChocolate(boxId, nickName, content, selectedChoco);
-
+      console.log("post된 값:", res);
       if (res.status === 201) {
         console.log("초콜릿전달 성공");
-        navigate("/box/complete");
+        navigate(`/box/${boxId}/complete`);
       } else {
         console.log("초콜릿 전송 실패");
       }

src/pages/otherboxPage/otherboxPage.jsx

@@ -3,15 +3,14 @@ import HeartBackG from "../../components/common/Heartbackground/heartBackG";
 import { useNavigate } from "react-router-dom";
 import { BOXES } from "../../constants/Boxes/data";
 import { useOtherBox } from "../../hooks/useOtherBox";
-import { useParams } from "react-router-dom";
 export const OtherboxPage = () => {
-  const { boxId } = useParams();
   const { otherData } = useOtherBox();
   console.log("otherData:", otherData);
   const navigate = useNavigate();
-
   const MoveOnLetterP = () => {
-    navigate(`box/${boxId}/choco`);
+    const boxId = otherData.boxId;
+
+    navigate(`/box/${boxId}/choco`);
   };
   if (!otherData) {
     return <div>Loading...</div>; // 데이터가 로드되기 전에 로딩 메시지를 표시하거나 로딩 스피너를 추가할 수 있음

src/router.jsx

@@ -22,7 +22,7 @@ const router = createBrowserRouter([
         element: <OtherboxPage />,
       },
       {
-        path: "/box/complete",
+        path: "/box/:boxId/complete",
         element: <CompletePage />,
       },
       {