Merge branch 'dev' into feature/Choco-Express#4

package.json

@@ -10,7 +10,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "axios": "^1.7.7",
+
+    "axios": "^1.7.6",
+
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-frame-component": "^5.2.7",

src/apis/instance.js

@@ -1,5 +1,4 @@
 import axios from "axios";
-// Axios 인스턴스 생성
 export const instance = axios.create({
   baseURL: import.meta.env.VITE_BASE_URL,
   withCredentials: true,

src/apis/otherBox.js

@@ -0,0 +1,11 @@
+import { instance } from "./instance";
+
+export const getOtherBoxContents = async (box_id) => {
+  try {
+    const res = await instance.get(`/api/box/${box_id}`);
+    return res;
+  } catch (err) {
+    console.log(err);
+    throw err;
+  }
+};

src/apis/postChoco.js

@@ -0,0 +1,15 @@
+import { instance } from "./instance";
+
+export const postChocolate = async (boxId, nickname, contents, chocoType) => {
+  try {
+    const res = await instance.post(`/api/box/${boxId}/choco`, {
+      nickname,
+      contents,
+      chocoType,
+    });
+    return res;
+  } catch (err) {
+    console.log(err);
+    throw err;
+  }
+};

src/components/ChocoSelector/styled.js

@@ -40,17 +40,19 @@ export const BoxItem = styled.div`
   display: flex;
   justify-self: center;
   align-self: center;
-  width: 98px;
-  height: 91px;
+  width: 100px;
+  height: 113.136px;
 
   img {
     width: 100%;
     height: 100%;
     object-fit: contain;
+
     filter: ${({ selected }) =>
       selected ? "drop-shadow(0px 0px 15px rgba(255, 20, 147, 0.8))" : "none"};
 
-    cursor: pointer;
+
+  
   }
 `;
 

src/components/common/Button/styled.js

@@ -16,4 +16,8 @@ export const Btn = styled.div`
   font-weight: 600;
   line-height: 120%; /* 20.4px */
   cursor: pointer;
+  &:hover,
+  :active {
+    background: #f34381;
+  }
 `;

src/constants/Chocolates/data.js

@@ -1,4 +1,4 @@
-import CHOCO_1 from "../../assets/images/Chocolates/chocolate_1.png";
+import CHOCO_1 from "../../assets/images/Chocolates/Chocolate_1.svg";
 import CHOCO_2 from "../../assets/images/Chocolates/Chocolate_2.svg";
 import CHOCO_3 from "../../assets/images/Chocolates/Chocolate_3.svg";
 import CHOCO_4 from "../../assets/images/Chocolates/Chocolate_4.svg";

src/hooks/useOtherBox.js

@@ -0,0 +1,24 @@
+import { getOtherBoxContents } from "../apis/otherBox";
+import React, { useState, useEffect } from "react";
+import { useParams } from "react-router-dom";
+
+export const useOtherBox = () => {
+  const { boxId } = useParams();
+  console.log("박스 id는 :", boxId);
+  const [otherData, setOtherData] = useState(null);
+
+  const fetchOtherBoxData = async () => {
+    try {
+      const res = await getOtherBoxContents(boxId);
+      setOtherData(res.data.result);
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  useEffect(() => {
+    fetchOtherBoxData();
+  }, []);
+
+  return { otherData };
+};

src/pages/LetterPage/LetterPostPage.jsx

@@ -5,8 +5,12 @@ 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 { postChocolate } from "../../apis/postChoco";
+
 export const LetterPostPage = () => {
   const navigate = useNavigate();
+  const { boxId } = useParams();
   const [selectedChoco, setSelectedChoco] = useState("");
   const [isSelectedChoco, setIsSelectedChoco] = useState(false);
   const [nickName, setNickName] = useState("");
@@ -35,11 +39,24 @@ export const LetterPostPage = () => {
     setIsNameSetting(false);
   };
 
-  const handleContentSubmit = (content) => {
+  const handleContentSubmit = async (content) => {
     console.log(content);
     //서버에 post 후 완료페이지로 이동
-    navigate("/box/complete");
+
+    try {
+      const res = await postChocolate(boxId, nickName, content, selectedChoco);
+
+      if (res.status === 201) {
+        console.log("초콜릿전달 성공");
+        navigate("/box/complete");
+      } else {
+        console.log("초콜릿 전송 실패");
+      }
+    } catch (err) {
+      console.log(err);
+    }
   };
+
   return (
     <S.Container>
       <HeartBackG />

src/pages/otherboxPage/otherboxPage.jsx

@@ -2,19 +2,29 @@ import * as S from "./styled";
 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("letter");
+    navigate(`box/${boxId}/choco`);
   };
+  if (!otherData) {
+    return <div>Loading...</div>; // 데이터가 로드되기 전에 로딩 메시지를 표시하거나 로딩 스피너를 추가할 수 있음
+  }
+  const selectedBox = BOXES.find((box) => box.id === otherData.boxType);
   return (
     <S.Container>
       <HeartBackG />
       <S.Wrapper>
         <div className="Box">
-          <div>[하채민] 의 초콜릿 상자</div>
+          <div>[{otherData.boxName}] 의 초콜릿 상자</div>
           <S.BoxContainer>
-            <img src={BOXES[1].src} className="boxImg" />
+            <img src={selectedBox.src} className="boxImg" />
           </S.BoxContainer>
         </div>
         <S.ButtonContainer>

src/router.jsx

@@ -18,15 +18,15 @@ const router = createBrowserRouter([
     element: <App />,
     children: [
       {
-        path: "/box",
+        path: "/box/:boxId",
         element: <OtherboxPage />,
       },
       {
         path: "/box/complete",
         element: <CompletePage />,
       },
       {
-        path: "/box/letter",
+        path: "box/:boxId/choco",
         element: <LetterPostPage />,
       },