Refactor. API 함수 이동

authInstance 는 자동으로 헤더에 토큰 포함
CodeSquad-Airbnb-Team07 · Jun 23, 2024 · 46edf68 · 46edf68
1 parent 8907288
commit 46edf68
Show file tree

Hide file tree

Showing 5 changed files with 115 additions and 74 deletions.
diff --git a/FE/src/api/AccommodationAPI.js b/FE/src/api/AccommodationAPI.js
@@ -1,13 +1,12 @@
-// src/api/accommodationAPI.js
-import axiosInstance from "./axiosInstance"; // axiosInstance 임포트
+import { baseInstance } from "./axiosInstance"; // axiosInstance 임포트
 
 export const fetchFilteredAccommodations = async (
   latitude,
   longitude,
   filters
 ) => {
   try {
-    const response = await axiosInstance.get("/products/available", {
+    const response = await baseInstance.get("/products/available", {
       params: {
         checkInDate: filters.checkIn,
         checkOutDate: filters.checkOut,

diff --git a/FE/src/api/BookingAPI.js b/FE/src/api/BookingAPI.js
@@ -0,0 +1,67 @@
+import { authInstance } from "./axiosInstance";
+
+export const fetchBookings = async (token) => {
+  try {
+    const response = await authInstance.get("/booking/my-bookings", {});
+    return response.data;
+  } catch (error) {
+    console.error("Error fetching bookings:", error);
+    throw error;
+  }
+};
+
+export const fetchPricing = async (
+  accommodationId,
+  checkIn,
+  checkOut,
+  headCount
+) => {
+  try {
+    const response = await authInstance.get("/booking", {
+      params: {
+        accommodationId,
+        checkIn,
+        checkOut,
+        headCount,
+      },
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+    return response.data;
+  } catch (error) {
+    console.error("Error fetching pricing:", error);
+    throw error;
+  }
+};
+
+export const handleBooking = async (
+  accommodationId,
+  checkIn,
+  checkOut,
+  headCount
+) => {
+  const bookingData = {
+    accommodationId,
+    checkIn,
+    checkOut,
+    headCount,
+  };
+
+  try {
+    const response = await authInstance.post("/booking", bookingData, {
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+
+    if (response.status !== 201) {
+      throw new Error("Network response was not created");
+    }
+
+    return response.data;
+  } catch (error) {
+    console.error("Error booking accommodation:", error);
+    throw error;
+  }
+};
diff --git a/FE/src/api/axiosInstance.js b/FE/src/api/axiosInstance.js
@@ -3,11 +3,13 @@ import axios from "axios";
 
 const token = localStorage.getItem("token");
 
-const axiosInstance = axios.create({
+export const authInstance = axios.create({
   baseURL: `https://${import.meta.env.VITE_API_BASE_URL}`, // 기본 URL 설정
   headers: {
     Authorization: token ? `Bearer ${token}` : "",
   },
 });
 
-export default axiosInstance;
+export const baseInstance = axios.create({
+  baseURL: `https://${import.meta.env.VITE_API_BASE_URL}`, // 기본 URL 설정
+});
diff --git a/FE/src/components/accommodation_detail/BookingInfo.jsx b/FE/src/components/accommodation_detail/BookingInfo.jsx
@@ -1,72 +1,35 @@
 import React, { useState } from "react";
 import { CSSTransition } from "react-transition-group";
-import axios from "axios";
 import "../../styles/BookingInfo.css";
+import { fetchPricing, handleBooking } from "/src/api/BookingAPI.js";
 
 const BookingInfo = ({ accommodationId, checkIn, checkOut, headCount }) => {
   const [pricingData, setPricingData] = useState(null);
   const [showPricing, setShowPricing] = useState(false);
 
-  const fetchPricing = async () => {
+  const fetchPricingData = async () => {
     try {
-      const response = await axios.get("https://squadbnb.site/api/booking", {
-        params: {
-          accommodationId,
-          checkIn,
-          checkOut,
-          headCount,
-        },
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: `Bearer ${localStorage.getItem("token")}`,
-        },
-      });
-      setPricingData(response.data);
+      const data = await fetchPricing(
+        accommodationId,
+        checkIn,
+        checkOut,
+        headCount
+      );
+      setPricingData(data);
       setShowPricing(true);
     } catch (error) {
       console.error("Error fetching pricing:", error);
     }
   };
 
-  const calculateTotalPrice = () => {
-    const { roughTotalPrice, discountPrice, serviceFee, accommodationFee } =
-      pricingData;
-    return roughTotalPrice + serviceFee + accommodationFee - discountPrice;
-  };
-
-  const calculateAveragePricePerNight = () => {
-    const totalPrice = calculateTotalPrice();
-    const nights =
-      (new Date(checkOut) - new Date(checkIn)) / (1000 * 60 * 60 * 24);
-    return totalPrice / nights;
-  };
-
-  const handleBooking = async () => {
-    const bookingData = {
-      accommodationId,
-      checkIn,
-      checkOut,
-      headCount,
-    };
-
+  const handleBookingClick = async () => {
     try {
-      const response = await axios.post(
-        "https://squadbnb.site/api/booking",
-        bookingData,
-        {
-          headers: {
-            "Content-Type": "application/json",
-            Authorization: `Bearer ${localStorage.getItem("token")}`,
-          },
-        }
+      const data = await handleBooking(
+        accommodationId,
+        checkIn,
+        checkOut,
+        headCount
       );
-
-      if (response.status !== 201) {
-        throw new Error("Network response was not created");
-      }
-
-      const data = response.data;
-      // Handle success - you can add any success handling logic here
       alert(`예약 성공!
       숙소 이름: ${data.accName}
       예약 번호: ${data.bookingId}
@@ -81,9 +44,22 @@ const BookingInfo = ({ accommodationId, checkIn, checkOut, headCount }) => {
     }
   };
 
+  const calculateTotalPrice = () => {
+    const { roughTotalPrice, discountPrice, serviceFee, accommodationFee } =
+      pricingData;
+    return roughTotalPrice + serviceFee + accommodationFee - discountPrice;
+  };
+
+  const calculateAveragePricePerNight = () => {
+    const totalPrice = calculateTotalPrice();
+    const nights =
+      (new Date(checkOut) - new Date(checkIn)) / (1000 * 60 * 60 * 24);
+    return totalPrice / nights;
+  };
+
   return (
     <div className="booking-info">
-      <button onClick={fetchPricing}>Check Pricing</button>
+      <button onClick={fetchPricingData}>Check Pricing</button>
 
       <CSSTransition
         in={showPricing}
@@ -120,7 +96,7 @@ const BookingInfo = ({ accommodationId, checkIn, checkOut, headCount }) => {
               <div className="average-price">
                 1박당 평균 요금 : ₩{calculateAveragePricePerNight()}
               </div>
-              <button className="book-now" onClick={handleBooking}>
+              <button className="book-now" onClick={handleBookingClick}>
                 예약하기
               </button>
             </div>

diff --git a/FE/src/pages/BookingListPage.jsx b/FE/src/pages/BookingListPage.jsx
@@ -1,28 +1,25 @@
-import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-import { useNavigate } from 'react-router-dom';
-import axios from 'axios';
-import styles from '/src/styles/BookingListPage.module.css';
+import PropTypes from "prop-types";
+import React, { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { fetchBookings } from "/src/api/bookingAPI"; // fetchBookings 임포트
+import styles from "/src/styles/BookingListPage.module.css";
 
 const BookingListPage = () => {
   const [bookings, setBookings] = useState([]);
   const navigate = useNavigate();
+  const token = localStorage.getItem("token"); // 토큰을 로컬 스토리지에서 가져옴
 
   useEffect(() => {
-    const fetchBookings = async () => {
+    const getBookings = async () => {
       try {
-        const response = await axios.get('https://squadbnb.site/api/booking/my-bookings', {
-          headers: {
-            Authorization: `Bearer ${localStorage.getItem("token")}`,
-          }
-        });
-        setBookings(response.data);
+        const data = await fetchBookings(token);
+        setBookings(data);
       } catch (error) {
-        console.error('Error fetching bookings:', error);
+        console.error("Error fetching bookings:", error);
       }
     };
 
-    fetchBookings();
+    getBookings();
   }, [token, navigate]);
 
   return (
@@ -53,4 +50,4 @@ BookingListPage.propTypes = {
   token: PropTypes.string,
 };
 
-export default BookingListPage;
+export default BookingListPage;