diff --git a/src/apis/axiosBookingApi.jsx b/src/apis/axiosBookingApi.jsx
new file mode 100644
index 0000000..31390ab
--- /dev/null
+++ b/src/apis/axiosBookingApi.jsx
@@ -0,0 +1,43 @@
+import React, { useEffect, useState } from "react";
+import axios from "axios";
+
+const URL = "booking/";
+
+const JsonBookingResource = (() => {
+  // const [bookingData, setBookingData] = useState([]);
+  // const [bookingDataAry, setBookingDataAry] = useState([]);
+  // const [loading, setLoading] = useState(false);
+
+  const instance = axios.create({
+    baseURL: "/booking",
+    withCredentials: true,
+  });
+
+  // useEffect(() => {
+  //   fetchBooking();
+  // }, []);
+
+  const fetchBooking = async () => {
+    return (await instance.get("/booking")).data;
+    // try {
+    //   // setBookingData(bookingData);
+    //   // setBookingDataAry(bookingData.content);
+
+    //   console.log(bookingData);
+    //   // console.log(bookingDataAry);
+    // } catch (error) {
+    //   console.error(error);
+    // }
+  };
+
+  const fetchBookingAry = async () => {
+    return (await instance.get("/booking")).data.content;
+  };
+
+  return {
+    booking: fetchBooking,
+    bookingAry: fetchBookingAry,
+  };
+})();
+
+export default JsonBookingResource;
diff --git a/src/components/LoginComponent.jsx b/src/components/LoginComponent.jsx
index 5459b1b..714acd0 100644
--- a/src/components/LoginComponent.jsx
+++ b/src/components/LoginComponent.jsx
@@ -1,5 +1,4 @@
 import React, { useNavigate, useEffect, axios } from "react";
-import { getCookie } from "./cookieUtils"; // Import the getCookie function
 
 import "../styles/fonts.scss";
 import "../styles/LoginComponent.scss";
@@ -7,26 +6,11 @@ import "../styles/LoginComponent.scss";
 export default function LoginComponents() {
   const imgSrcKakao = "/img/kakaobtn-img.png";
   const REST_API_KEY = "b5d91872e5fa2c8c0a684e8f5c696e16";
-  // const REDIRECT_URI = "http://localhost:3000/kakaoLogin";
   const REDIRECT_URI = "http://localhost:8080/kakao";
-  // const link = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`;
   const link = REDIRECT_URI;
 
   // const code = window.location.search; // code?=이상한코드가한가득
-  const code = "b5d91872e5fa2c8c0a684e8f5c696e16";
-  // const navigate = useNavigate();
-
-  // useEffect(() => {
-  //   console.log(process.env.REACT_APP_URL);
-  //   axios.post(`${process.env.REACT_APP_URL}kakaoLogin${code}`).then((r) => {
-  //     console.log(r.data);
-
-  //     // 토큰을 받아서 localStorage같은 곳에 저장하는 코드를 여기에 쓴다.
-  //     // localStorage.setItem("name", r.data.user_name); // 일단 이름만 저장했다.
-
-  //     // navigate("/loginSuccess");
-  //   });
-  // }, []);
+  // const code = "b5d91872e5fa2c8c0a684e8f5c696e16";
 
   const loginHandler = () => {
     window.location.href = link;
@@ -56,10 +40,6 @@ export default function LoginComponents() {
         <img src={process.env.PUBLIC_URL + imgSrcKakao} alt="" />
         카카오 계정으로 1초 로그인
       </a>
-
-      <button type="button" onClick={loginHandler}>
-        로그인 하기2
-      </button>
     </div>
   );
 }
diff --git a/src/components/ReservationDetails.jsx b/src/components/ReservationDetails.jsx
index 41c9539..f8f74a6 100644
--- a/src/components/ReservationDetails.jsx
+++ b/src/components/ReservationDetails.jsx
@@ -3,34 +3,38 @@ import axios from "axios";
 
 import "../styles/ReservationDetails.scss";
 import PassDetailContainer from "./PassDetailContainer";
+import JsonBookingResource from "../apis/axiosBookingApi";
 
 export default function ReservationDetails() {
   const URL = "booking/";
 
+  const bookingCheck = JsonBookingResource.booking;
+
   const [bookingData, setBookingData] = useState([]);
   const [bookingDataAry, setBookingDataAry] = useState([]);
 
   const [loading, setLoading] = useState(false);
   const [pass, setPass] = useState([]);
+  const [passtypeText, setPasstypeText] = useState([]);
 
-  async function fetchDataPass() {
-    console.log("Fetching data...");
-    try {
-      const response = await axios.get("/pass?page=1&size=4&sort=startedDay", {
-        withCredentials: true,
-      });
+  // async function fetchDataPass() {
+  //   console.log("Fetching data...");
+  //   try {
+  //     const response = await axios.get("/pass?page=1&size=4&sort=startedDay", {
+  //       withCredentials: true,
+  //     });
 
-      if (!response.data) {
-        throw new Error("Failed to fetch data from the server");
-      }
-      setPass((predata) => response.data);
-      console.log("pass check");
-      console.log(pass);
-      setLoading((preloading) => true);
-    } catch (error) {
-      console.error(error);
-    } ///
-  }
+  //     if (!response.data) {
+  //       throw new Error("Failed to fetch data from the server");
+  //     }
+  //     setPass((predata) => response.data);
+  //     console.log("pass check");
+  //     console.log(pass);
+  //     setLoading((preloading) => true);
+  //   } catch (error) {
+  //     console.error(error);
+  //   } ///
+  // }
 
   async function fetchData() {
     console.log("Fetching data...");
@@ -55,13 +59,11 @@ export default function ReservationDetails() {
 
   useEffect(() => {
     fetchData();
-    // fetchDataCheck();
-    fetchDataPass();
-    console.log(bookingData);
+    // fetchDataPass();
+    // console.log(bookingData);
   }, [loading]);
 
   const text = "생성";
-  const passtypeText = "예약 등록 - 필라테스 이용권1";
   const date = "2023-06-09";
   const time = "13:00~14:00";
   const trainer = "오영선";
@@ -70,7 +72,7 @@ export default function ReservationDetails() {
     <div className="ReservationDetails-wrapper ">
       <div className="ReservationDetails-title align-center">
         <span className="ReservationDetails-text titlefont1">
-          {passtypeText}
+          {bookingCheck}
         </span>
 
         <button className="ReservationDetails-title-btn-groups"> 초기화</button>
diff --git a/src/components/ReservationLists.jsx b/src/components/ReservationLists.jsx
index bf27064..7ad82ba 100644
--- a/src/components/ReservationLists.jsx
+++ b/src/components/ReservationLists.jsx
@@ -1,4 +1,5 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
+import axios from "axios";
 import {
   faChevronLeft,
   faChevronRight,
@@ -8,6 +9,58 @@ import "../styles/ReservationLists.scss";
 import renderPassType from "./PassType";
 
 export default function ReservationLists() {
+  const URL = "booking/";
+  const [pass, setPass] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [bookingData, setBookingData] = useState([]);
+  const [bookingDataAry, setBookingDataAry] = useState([]);
+
+  useEffect(() => {
+    fetchData();
+    fetchDataPass();
+    console.log(bookingData);
+  }, [loading]);
+
+  async function fetchDataPass() {
+    console.log("Fetching data...");
+    try {
+      const response = await axios.get("/pass?page=1&size=4&sort=startedDay", {
+        withCredentials: true,
+      });
+
+      if (!response.data) {
+        throw new Error("Failed to fetch data from the server");
+      }
+      setPass((predata) => response.data);
+      console.log("pass");
+      console.log(pass);
+      setLoading((preloading) => true);
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  async function fetchData() {
+    console.log("Fetching data...");
+    try {
+      const response = await axios.get(URL, {
+        withCredentials: true,
+      });
+
+      if (!response.data) {
+        throw new Error("Failed to fetch data from the server");
+      }
+      const data = response.data.content;
+      setBookingData((predata) => response.data);
+      setBookingDataAry((predata) => response.data.content);
+      // console.log("bookingDataAry check");
+      // console.log(bookingDataAry);
+      setLoading((preloading) => true);
+    } catch (error) {
+      console.error(error);
+    } ///
+  }
+
   const passTypeName1 = "헬스 이용권 1";
   const passTypeName2 = "헬스 이용권 2";
   const passTypeName3 = "헬스 이용권 3";
diff --git a/src/pages/ApiTest.jsx b/src/pages/ApiTest.jsx
index 033a6d4..5f5910b 100644
--- a/src/pages/ApiTest.jsx
+++ b/src/pages/ApiTest.jsx
@@ -3,17 +3,6 @@ import axios from "axios";
 
 const URL = "booking/";
 
-// const bookingDataDummy = [
-//   {
-//     bookingId: 0,
-//     endedTime: "2023-08-04T03:49:38.068Z",
-//     passId: 0,
-//     startTime: "2023-08-04T03:49:38.068Z",
-//     teacher: "string",
-//     userId: 0,
-//   },
-// ];
-
 const apiRoot = axios.create({
   baseURL: "http:localhost:3000/",
   withCredentials: true,
@@ -23,10 +12,7 @@ export default function ApiTest() {
   const [bookingData, setBookingData] = useState([]);
   const [bookingDataAry, setBookingDataAry] = useState([]);
   const [pass, setPass] = useState([]);
-
   const [loading, setLoading] = useState(false);
-  const [check, setCheck] = useState("");
-  const [hello, setHello] = useState("");
 
   async function fetchDataPass() {
     console.log("Fetching data...");
@@ -38,14 +24,13 @@ export default function ApiTest() {
       if (!response.data) {
         throw new Error("Failed to fetch data from the server");
       }
-      console.log(response.data);
       setPass((predata) => response.data);
       console.log("pass");
       console.log(pass);
       setLoading((preloading) => true);
     } catch (error) {
       console.error(error);
-    } ///
+    }
   }
 
   async function fetchData() {
diff --git a/src/styles/ReservationDetails.scss b/src/styles/ReservationDetails.scss
index 95bbe80..d8048c2 100644
--- a/src/styles/ReservationDetails.scss
+++ b/src/styles/ReservationDetails.scss
@@ -120,6 +120,7 @@ width: 464px;
 height: 38px;
 left: 2rem;
 
+justify-content: center;
 }
 
   /* ReservationDetails-item-groups */