[Test]LikeLion-at-DGU#27 - API 연결 test

src/apis/booth.js

@@ -7,9 +7,20 @@ export const getBoothList = async ({
   is_reservable,
 }) => {
   try {
-    const res = await instance.get(
-      `api/v1/booth/?day=${day}&category=${category}&location=${location}&is_night=${is_night}&is_reservable=${is_reservable}`
-    );
+    // URLSearchParams 객체 생성
+    const params = new URLSearchParams();
+
+    // 파라미터가 존재할 때만 추가
+    if (day) params.append("day", day);
+    if (category) params.append("category", category);
+    if (location) params.append("location", location);
+    if (is_night !== undefined) params.append("is_night", is_night);
+    if (is_reservable !== undefined)
+      params.append("is_reservable", is_reservable);
+
+    // 파라미터들을 포함한 GET 요청
+    const res = await instance.get(`api/v1/booth/?${params.toString()}`);
+    console.log("booth.js에서의 res 값", res);
     return res;
   } catch (err) {
     console.log(err);

src/apis/boothDetail.js

@@ -1,5 +1,5 @@
 import { instance } from "./instance";
-export const getBoothDetail = async ({ booth_id }) => {
+export const getBoothDetail = async (booth_id) => {
   try {
     const res = await instance.get(`api/v1/booth/detail/${booth_id}`);
     return res;

src/components/common/BoothDetail/BoothDetail.jsx

@@ -7,12 +7,17 @@ import {
   Detailtitle,
   BoothDetailData,
 } from "../../../constant/StarDetail/data";
-// import { useBoothDetailData } from "../../../apis/boothDetail";
-export const BoothDetail = ({ onClose }) => {
+import { useBoothDetailData } from "../../../hook/useBoothDetail";
+
+export const BoothDetail = ({ onClose, booth_id }) => {
   const navigate = useNavigate();
   const [currentIndex, setCurrentIndex] = useState(0);
   const imgWrapperRef = useRef(null);
-
+  const { boothDetailData } = useBoothDetailData(booth_id);
+  console.log("boothDetail컴포넌트에서 :", boothDetailData);
+  if (!boothDetailData) {
+    return <div>Loading...</div>;
+  }
   const totalImages = BoothDetailData[0].src.length;
 
   const handleTouchStart = (e) => {

src/hook/useBooth.js

@@ -1,11 +1,15 @@
 // src/hooks/useMain.js
 import { useState, useEffect } from "react";
 import { getBoothList } from "../apis/booth";
-import { useParams } from "react-router-dom";
 
-export const useBoothData = () => {
+export const useBoothData = ({
+  day,
+  category,
+  location,
+  is_night,
+  is_reservable,
+}) => {
   const [boothData, setBoothData] = useState(null);
-  const { day, category, location, is_night, is_reservable } = useParams();
   const fetchBoothData = async () => {
     try {
       const res = await getBoothList(
@@ -26,7 +30,7 @@ export const useBoothData = () => {
 
   useEffect(() => {
     fetchBoothData();
-  }, []);
+  }, [day, category, location, is_night, is_reservable]);
 
   return { boothData };
 };

src/hook/useBoothDetail.js

@@ -1,11 +1,9 @@
 // src/hooks/useMain.js
 import { useState, useEffect } from "react";
 import { getBoothDetail } from "../apis/boothDetail";
-import { useParams } from "react-router-dom";
 
-export const useBoothDetailData = () => {
+export const useBoothDetailData = (booth_id) => {
   const [boothDetailData, setBoothDetailData] = useState(null);
-  const { booth_id } = useParams();
   const fetchBoothDetailData = async () => {
     try {
       const res = await getBoothDetail(booth_id);
@@ -19,8 +17,10 @@ export const useBoothDetailData = () => {
   };
 
   useEffect(() => {
-    fetchBoothDetailData();
-  }, []);
+    if (booth_id) {
+      fetchBoothDetailData();
+    }
+  }, [booth_id]);
 
   return { boothDetailData };
 };

src/pages/about/AboutPage.jsx

@@ -2,11 +2,9 @@ import * as S from "./AboutPage.styled";
 import { AboutCard } from "@components/about/AboutCard/AboutCard";
 import { LikeLionLink } from "@components/about/LikeLionLink/LikeLionLink";
 import { Review } from "@components/about/Review/Review";
-import { BoothDetail } from "@components/common/BoothDetail/BoothDetail";
 export const AboutPage = () => {
   return (
     <S.MainWrapper>
-      <BoothDetail />
       <LikeLionLink />
       <AboutCard />
       <Review />