Chore. css 수정 , 불필요한 probs 삭제

.

.

FE/src/api/BookingAPI.js

@@ -1,6 +1,6 @@
 import { authInstance } from "./axiosInstance";
 
-export const fetchBookings = async (token) => {
+export const fetchBookings = async () => {
   try {
     const response = await authInstance.get("/booking/my-bookings", {});
     return response.data;

FE/src/components/global/nav.jsx

@@ -11,7 +11,7 @@ import { logout } from "/src/api/auth.js";
 const Nav = () => {
   const [menuOpen, setMenuOpen] = useState(false);
   const [isLoggedIn, setIsLoggedIn] = useState(false);
-  const [activeItem, setActiveItem] = useState("");
+  const [activeItem, setActiveItem] = useState("숙소");
   const [showModal, setShowModal] = useState(false);
   const [userName, setUserName] = useState("");
   const [profileImage, setProfileImage] = useState(placeholderIcon);

FE/src/pages/BookingListPage.jsx

@@ -1,53 +1,49 @@
-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";
+import styles from "../styles/BookingListPage.module.css";
 
 const BookingListPage = () => {
   const [bookings, setBookings] = useState([]);
   const navigate = useNavigate();
-  const token = localStorage.getItem("token"); // 토큰을 로컬 스토리지에서 가져옴
 
   useEffect(() => {
     const getBookings = async () => {
       try {
-        const data = await fetchBookings(token);
+        const data = await fetchBookings();
         setBookings(data);
       } catch (error) {
         console.error("Error fetching bookings:", error);
       }
     };
 
     getBookings();
-  }, [token, navigate]);
+  }, [navigate]);
 
   return (
     <div className={styles.page}>
-      <h2>내 예약</h2>
-      {bookings.length > 0 ? (
-        <ul>
-          {bookings.map((booking) => (
-            <li key={booking.id}>
-              <p>예약자: {booking.bookerName}</p>
-              <p>체크인: {booking.checkIn}</p>
-              <p>체크아웃: {booking.checkOut}</p>
-              <p>인원: {booking.headCount}명</p>
-              <p>상태: {booking.status}</p>
-              <p>결제 상태: {booking.payment.status}</p>
-              <p>총 요금: ₩{booking.payment.totalPrice}</p>
-            </li>
-          ))}
-        </ul>
-      ) : (
-        <p>예약 내역이 없습니다.</p>
-      )}
+      <div className={styles.title}>내 예약</div>
+      <div className={styles.container}>
+        {bookings.length > 0 ? (
+          <ul>
+            {bookings.map((booking) => (
+              <li key={booking.id}>
+                <p>예약자: {booking.bookerName}</p>
+                <p>체크인: {booking.checkIn}</p>
+                <p>체크아웃: {booking.checkOut}</p>
+                <p>인원: {booking.headCount}명</p>
+                <p>상태: {booking.status}</p>
+                <p>결제 상태: {booking.payment.status}</p>
+                <p>총 요금: ₩{booking.payment.totalPrice}</p>
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <p>예약 내역이 없습니다.</p>
+        )}
+      </div>
     </div>
   );
 };
 
-BookingListPage.propTypes = {
-  token: PropTypes.string,
-};
-
 export default BookingListPage;

FE/src/styles/BookingListPage.module.css

@@ -1,29 +1,47 @@
 .page {
-    padding: 20px;
-    max-width: 800px;
-    margin: 0 auto;
-    background: white;
-    border-radius: 10px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  }
-
-  h2 {
-    text-align: center;
-    margin-bottom: 20px;
-  }
-
-  ul {
-    list-style: none;
-    padding: 0;
-  }
-
-  li {
-    margin-bottom: 20px;
-    padding: 10px;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-  }
-
-  p {
-    margin: 5px 0;
-  }
+  padding: 20px;
+  max-width: 800px;
+  background: white;
+  border-radius: 10px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  z-index: 2;
+  margin-left: auto;
+  margin-right: auto;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100vh;
+  padding-top: 80px;
+}
+
+.title {
+  margin: 0 auto;
+  text-align: center;
+  font-weight: bolder;
+  font-size: x-large;
+}
+
+.container {
+  margin-top: 20px;
+  flex: 1; /* 남은 공간을 차지하도록 설정 */
+  overflow-y: auto; /* 세로 스크롤 가능하게 설정 */
+  width: 100%; /* 가로 크기를 부모 요소에 맞춤 */
+}
+
+.container ul {
+  list-style: none;
+  padding: 0;
+  margin: 0; /* ul 요소의 기본 마진 제거 */
+}
+
+.container li {
+  margin-bottom: 20px;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+}
+
+.page p {
+  margin: 5px 0;
+  text-align: center;
+}

FE/src/styles/nav.module.css

@@ -1,12 +1,11 @@
 /* src/styles/nav.module.css */
-
 .navbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 10px 20px;
   background-color: transparent;
-  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
+  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.1);
   position: fixed;
   top: 0;
   width: 100%;