diff --git a/FE/src/api/AccommodationAPI.js b/FE/src/api/AccommodationAPI.js index 9d95719d..9ccb7cbf 100644 --- a/FE/src/api/AccommodationAPI.js +++ b/FE/src/api/AccommodationAPI.js @@ -1,5 +1,4 @@ -// src/api/accommodationAPI.js -import axiosInstance from "./axiosInstance"; // axiosInstance 임포트 +import { baseInstance } from "./axiosInstance"; // axiosInstance 임포트 export const fetchFilteredAccommodations = async ( latitude, @@ -7,7 +6,7 @@ export const fetchFilteredAccommodations = async ( 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 new file mode 100644 index 00000000..5ee48c47 --- /dev/null +++ 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 index 323de84a..558ff58a 100644 --- 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 index fd34524c..688f56e9 100644 --- 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 (
- + {
1박당 평균 요금 : ₩{calculateAveragePricePerNight()}
-
diff --git a/FE/src/pages/BookingListPage.jsx b/FE/src/pages/BookingListPage.jsx index 0bba0062..7a5414a7 100644 --- 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 "../api/BookingAPI"; +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; \ No newline at end of file +export default BookingListPage;