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

✨ Feature: 페이지간 data 전달 location 처리
Choco-Express · Sep 5, 2024 · aa39a95 · aa39a95
2 parents 147aca4 + 03f2c7b
commit aa39a95
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 9 deletions.
diff --git a/src/pages/CompletePage/CompletePage.jsx b/src/pages/CompletePage/CompletePage.jsx
@@ -1,12 +1,15 @@
 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";
+import { useNavigate, useParams, useLocation } from "react-router-dom";
 export const CompletePage = () => {
-  const { otherData } = useOtherBox();
   const { boxId } = useParams();
   const navigate = useNavigate();
+  const location = useLocation();
+  const otherData = location.state?.otherData;
+
+  if (!otherData) {
+    return <div>Data not found</div>;
+  }
   return (
     <S.Container>
       <HeartBackG />

diff --git a/src/pages/LetterPage/LetterPostPage.jsx b/src/pages/LetterPage/LetterPostPage.jsx
@@ -4,7 +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, useParams } from "react-router-dom";
+import { useNavigate, useParams, useLocation } from "react-router-dom";
 import { postChocolate } from "../../apis/postChoco";
 
 export const LetterPostPage = () => {
@@ -14,7 +14,8 @@ export const LetterPostPage = () => {
   const [isSelectedChoco, setIsSelectedChoco] = useState(false);
   const [nickName, setNickName] = useState("");
   const [isNameSetting, setIsNameSetting] = useState(false);
-
+  const location = useLocation();
+  const { otherData } = location.state || {};
   const handleSelectChoco = (id) => {
     setSelectedChoco(id);
     console.log(`choco ID: ${id}`);
@@ -44,10 +45,9 @@ export const LetterPostPage = () => {
 
     try {
       const res = await postChocolate(boxId, nickName, content, selectedChoco);
-      console.log("post된 값:", res);
       if (res.status === 201) {
         console.log("초콜릿전달 성공");
-        navigate(`/box/${boxId}/complete`);
+        navigate(`/box/${boxId}/complete`, { state: { otherData } });
       } else {
         console.log("초콜릿 전송 실패");
       }

diff --git a/src/pages/otherboxPage/otherboxPage.jsx b/src/pages/otherboxPage/otherboxPage.jsx
@@ -10,7 +10,7 @@ export const OtherboxPage = () => {
   const MoveOnLetterP = () => {
     const boxId = otherData.boxId;
 
-    navigate(`/box/${boxId}/choco`);
+    navigate(`/box/${boxId}/choco`, { state: { otherData } });
   };
   if (!otherData) {
     return <div>Loading...</div>; // 데이터가 로드되기 전에 로딩 메시지를 표시하거나 로딩 스피너를 추가할 수 있음