Chore

CodeSquad-Airbnb-Team07 · Jun 21, 2024 · 4f1871d · 4f1871d
1 parent f624a34
commit 4f1871d
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 79 deletions.
diff --git a/FE/index.html b/FE/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/images/logo.png" />
+    <link rel="icon" type="image/svg+xml" href="/images/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Squadbnb</title>
   </head>

diff --git a/FE/public/images/favicon.png b/FE/public/images/favicon.png
diff --git a/FE/src/App.jsx b/FE/src/App.jsx
@@ -5,6 +5,7 @@ import MainPage from "./pages/main";
 import RedirectPage from "./services/redirect.jsx";
 import SearchPage from "./pages/SearchPage.jsx";
 import AccommodationDetail from "./pages/AccommodationDetail";
+import BookingListPage from "./pages/BookingListPage";
 
 const App = () => {
   return (
@@ -15,7 +16,7 @@ const App = () => {
             <Route index element={<MainPage />} />
             <Route path="search" element={<SearchPage />} />
             <Route path="accommodation-detail/:id" element={<AccommodationDetail />}/>
-            <Route path="/my-bookings" element={<BookingListPage token={token} />} />
+            <Route path="/my-bookings" element={<BookingListPage />} />
           </Route>
 
           {/*-- ETC --*/}

diff --git a/FE/src/components/accommodation_detail/BookingInfo.jsx b/FE/src/components/accommodation_detail/BookingInfo.jsx
@@ -1,40 +1,43 @@
-import React, { useState } from 'react';
-import { CSSTransition } from 'react-transition-group';
-import axios from 'axios';
-import '../../styles/BookingInfo.css';
+import React, { useState } from "react";
+import { CSSTransition } from "react-transition-group";
+import axios from "axios";
+import "../../styles/BookingInfo.css";
 
 const BookingInfo = ({ accommodationId, checkIn, checkOut, headCount }) => {
   const [pricingData, setPricingData] = useState(null);
   const [showPricing, setShowPricing] = useState(false);
 
   const fetchPricing = async () => {
     try {
-      const response = await axios.get('https://squadbnb.site/api/booking', {
+      const response = await axios.get("https://squadbnb.site/api/booking", {
         params: {
           accommodationId,
           checkIn,
           checkOut,
           headCount,
         },
         headers: {
-          'Content-Type': 'application/json',
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${localStorage.getItem("token")}`,
         },
       });
       setPricingData(response.data);
       setShowPricing(true);
     } catch (error) {
-      console.error('Error fetching pricing:', error);
+      console.error("Error fetching pricing:", error);
     }
   };
 
   const calculateTotalPrice = () => {
-    const { roughTotalPrice, discountPrice, serviceFee, accommodationFee } = pricingData;
+    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);
+    const nights =
+      (new Date(checkOut) - new Date(checkIn)) / (1000 * 60 * 60 * 24);
     return totalPrice / nights;
   };
 
@@ -47,14 +50,19 @@ const BookingInfo = ({ accommodationId, checkIn, checkOut, headCount }) => {
     };
 
     try {
-      const response = await axios.post('https://squadbnb.site/api/booking', bookingData, {
-        headers: {
-          'Content-Type': 'application/json',
-        },
-      });
+      const response = await axios.post(
+        "https://squadbnb.site/api/booking",
+        bookingData,
+        {
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${localStorage.getItem("token")}`,
+          },
+        }
+      );
 
       if (response.status !== 201) {
-        throw new Error('Network response was not created');
+        throw new Error("Network response was not created");
       }
 
       const data = response.data;
@@ -65,11 +73,11 @@ const BookingInfo = ({ accommodationId, checkIn, checkOut, headCount }) => {
       체크인: ${data.checkIn}
       체크아웃: ${data.checkOut}
       인원: ${data.headCount}명`);
-      
-      window.location.href = 'https://squadbnb.site';
+
+      window.location.href = "https://squadbnb.site";
     } catch (error) {
-      console.error('Error booking accommodation:', error);
-      alert('Failed to book the accommodation.');
+      console.error("Error booking accommodation:", error);
+      alert("Failed to book the accommodation.");
     }
   };
 
@@ -84,18 +92,37 @@ const BookingInfo = ({ accommodationId, checkIn, checkOut, headCount }) => {
         unmountOnExit
       >
         <div className="pricing-details">
-          <button className="close-button" onClick={() => setShowPricing(false)}>×</button>
+          <button
+            className="close-button"
+            onClick={() => setShowPricing(false)}
+          >
+            ×
+          </button>
           {pricingData && (
             <div className="pricing-content">
               <div className="price-info">
-                <div className="price-item green">총 숙박 요금: ₩{pricingData.roughTotalPrice}</div>
-                <div className="price-item red">할인 요금: -₩{pricingData.discountPrice}</div>
-                <div className="price-item green">서비스 수수료: ₩{pricingData.serviceFee}</div>
-                <div className="price-item green">숙박세와 수수료: ₩{pricingData.accommodationFee}</div>
+                <div className="price-item green">
+                  총 숙박 요금: ₩{pricingData.roughTotalPrice}
+                </div>
+                <div className="price-item red">
+                  할인 요금: -₩{pricingData.discountPrice}
+                </div>
+                <div className="price-item green">
+                  서비스 수수료: ₩{pricingData.serviceFee}
+                </div>
+                <div className="price-item green">
+                  숙박세와 수수료: ₩{pricingData.accommodationFee}
+                </div>
+              </div>
+              <div className="total-price">
+                결제 금액 : ₩{calculateTotalPrice()}
+              </div>
+              <div className="average-price">
+                1박당 평균 요금 : ₩{calculateAveragePricePerNight()}
               </div>
-              <div className="total-price">결제 금액 : ₩{calculateTotalPrice()}</div>
-              <div className="average-price">1박당 평균 요금 : ₩{calculateAveragePricePerNight()}</div>
-              <button className="book-now" onClick={handleBooking}>예약하기</button>
+              <button className="book-now" onClick={handleBooking}>
+                예약하기
+              </button>
             </div>
           )}
         </div>
@@ -104,4 +131,4 @@ const BookingInfo = ({ accommodationId, checkIn, checkOut, headCount }) => {
   );
 };
 
-export default BookingInfo;
+export default BookingInfo;
diff --git a/FE/src/components/booking/BookingListModal.jsx b/FE/src/components/booking/BookingListModal.jsx
diff --git a/FE/src/components/global/nav.jsx b/FE/src/components/global/nav.jsx
@@ -107,7 +107,7 @@ const Nav = () => {
           >
             {isLoggedIn ? (
               <>
-                <div className={styles.navMenuItem} onClick={goToBookings}>내 예약</div>
+                {/* <div className={styles.navMenuItem} onClick={goToBookings}>내 예약</div> */}
                 <div className={styles.navMenuItem}>예약 취소</div>
                 <div className={styles.navMenuItem}>위시리스트</div>
                 <div className={styles.navMenuItem} onClick={handleLogout}>

diff --git a/FE/src/pages/BookingListPage.jsx b/FE/src/pages/BookingListPage.jsx
@@ -4,21 +4,16 @@ import { useNavigate } from 'react-router-dom';
 import axios from 'axios';
 import styles from '/src/styles/BookingListPage.module.css';
 
-const BookingListPage = ({ token }) => {
+const BookingListPage = () => {
   const [bookings, setBookings] = useState([]);
   const navigate = useNavigate();
 
   useEffect(() => {
-    if (!token) {
-      navigate('/login'); // 로그인 페이지로 이동
-      return;
-    }
-
     const fetchBookings = async () => {
       try {
         const response = await axios.get('https://squadbnb.site/api/booking/my-bookings', {
           headers: {
-            'Authorization': `Bearer ${token}`
+            Authorization: `Bearer ${localStorage.getItem("token")}`,
           }
         });
         setBookings(response.data);