Merge pull request #42 from Chaem03/feature/#27

[Feature]#27 -부스페이지 API 연결 세팅

package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.7.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-ga": "^3.3.1",

src/apis/booth.js

@@ -0,0 +1,18 @@
+import { instance } from "./instance";
+export const getBoothList = async ({
+  day,
+  category,
+  location,
+  is_night,
+  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}`
+    );
+    return res;
+  } catch (err) {
+    console.log(err);
+    throw err;
+  }
+};

src/apis/boothDetail.js

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

src/apis/instance.js

@@ -0,0 +1,28 @@
+import axios from "axios";
+
+// Axios 인스턴스 생성
+export const instance = axios.create({
+  baseURL: import.meta.env.VITE_BASE_URL,
+  withCredentials: true,
+  headers: {
+    "Content-Type": "application/json",
+  },
+  timeout: 10000, // 10초 타임아웃 설정
+});
+
+// 요청 인터셉터 추가
+instance.interceptors.request.use(
+  (config) => config,
+  (error) => Promise.reject(error)
+);
+
+// 응답 인터셉터 추가
+instance.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    if (error.code === "ECONNABORTED") {
+      console.log("Request timeout");
+    }
+    return Promise.reject(error);
+  }
+);

src/hook/useBooth.js

@@ -0,0 +1,32 @@
+// src/hooks/useMain.js
+import { useState, useEffect } from "react";
+import { getBoothList } from "../apis/booth";
+import { useParams } from "react-router-dom";
+
+export const useBoothData = () => {
+  const [boothData, setBoothData] = useState(null);
+  const { day, category, location, is_night, is_reservable } = useParams();
+  const fetchBoothData = async () => {
+    try {
+      const res = await getBoothList(
+        day,
+        category,
+        location,
+        is_night,
+        is_reservable
+      );
+      console.log("response:", res);
+      const resData = res.data;
+      console.log("resData:", resData);
+      setBoothData(resData);
+    } catch (error) {
+      // console.error("error:", error);
+    }
+  };
+
+  useEffect(() => {
+    fetchBoothData();
+  }, []);
+
+  return { boothData };
+};

src/hook/useBoothDetail.js

@@ -0,0 +1,26 @@
+// src/hooks/useMain.js
+import { useState, useEffect } from "react";
+import { getBoothDetail } from "../apis/boothDetail";
+import { useParams } from "react-router-dom";
+
+export const useBoothDetailData = () => {
+  const [boothDetailData, setBoothDetailData] = useState(null);
+  const { booth_id } = useParams();
+  const fetchBoothDetailData = async () => {
+    try {
+      const res = await getBoothDetail(booth_id);
+      console.log("response:", res);
+      const resData = res.data;
+      console.log("resData:", resData);
+      setBoothDetailData(resData);
+    } catch (error) {
+      // console.error("error:", error);
+    }
+  };
+
+  useEffect(() => {
+    fetchBoothDetailData();
+  }, []);
+
+  return { boothDetailData };
+};