From 14ab2890c3c5220bca8ca255078f696f94b24863 Mon Sep 17 00:00:00 2001 From: DingX2 <96682768+DingX2@users.noreply.github.com> Date: Wed, 16 Aug 2023 18:44:39 +0900 Subject: [PATCH] =?UTF-8?q?[FIX]=20API=20=EA=B4=80=EB=A6=AC=EB=B2=95=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 수정사항 발견 - 관리자 생성페이지 input 같이 움직임 - 호출되면서 빈 배열이 다시 들어감 - src/apis를 만들어 관리하기로 함 - 중복되는 api 문제를 모듈화해서 해결하기로 함 --- src/apis/axiosBookingApi.jsx | 43 +++++++++++++++++++++ src/components/LoginComponent.jsx | 22 +---------- src/components/ReservationDetails.jsx | 46 +++++++++++----------- src/components/ReservationLists.jsx | 55 ++++++++++++++++++++++++++- src/pages/ApiTest.jsx | 17 +-------- src/styles/ReservationDetails.scss | 1 + 6 files changed, 124 insertions(+), 60 deletions(-) create mode 100644 src/apis/axiosBookingApi.jsx 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() { 카카오 계정으로 1초 로그인 - - ); } 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() {
- {passtypeText} + {bookingCheck} 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 */