From 344c82e20b746a4417592ef85f01e40c4fee32b1 Mon Sep 17 00:00:00 2001 From: PortalCube <35104213+PortalCube@users.noreply.github.com> Date: Fri, 10 Nov 2023 19:34:23 +0900 Subject: [PATCH 1/3] =?UTF-8?q?Feat:=20=EB=B9=84=EB=8C=80=EB=A9=B4=20?= =?UTF-8?q?=EC=A7=84=EB=A3=8C=20=EC=98=88=EC=95=BD=20=EB=AA=A9=EB=A1=9D=20?= =?UTF-8?q?(=EB=8C=80=EC=8B=9C=EB=B3=B4=EB=93=9C=20=EC=9A=94=EC=95=BD)=20A?= =?UTF-8?q?PI=20=EC=98=88=EB=B9=84=20=EC=97=B0=EA=B2=B0=20=EB=B0=8F=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B0=84=EC=86=8C=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DoctorDashBoard/DoctorReserve.jsx | 97 ------------ .../DoctorDashBoard/DoctorUntactList.jsx | 49 ------- src/components/Pagination/Pagination.jsx | 1 - .../Reservation/ReservationItem.jsx | 42 ++++-- .../Reservation/ReservationList.jsx | 1 - .../Reservation/ReservationMiniItem.jsx | 138 ++++++++++++++++++ .../Reservation/ReservationMiniList.jsx | 75 ++++++++++ .../TherapistDashBoard/TheraReserve.jsx | 97 ------------ .../TherapistDashBoard/TheraUntactList.jsx | 49 ------- src/pages/Doctor/DoctorDashBoardPage.jsx | 4 +- src/pages/Therapist/TheraDashBoardPage.jsx | 4 +- 11 files changed, 244 insertions(+), 313 deletions(-) delete mode 100644 src/components/DoctorDashBoard/DoctorReserve.jsx delete mode 100644 src/components/DoctorDashBoard/DoctorUntactList.jsx create mode 100644 src/components/Reservation/ReservationMiniItem.jsx create mode 100644 src/components/Reservation/ReservationMiniList.jsx delete mode 100644 src/components/TherapistDashBoard/TheraReserve.jsx delete mode 100644 src/components/TherapistDashBoard/TheraUntactList.jsx diff --git a/src/components/DoctorDashBoard/DoctorReserve.jsx b/src/components/DoctorDashBoard/DoctorReserve.jsx deleted file mode 100644 index 1a9b72c..0000000 --- a/src/components/DoctorDashBoard/DoctorReserve.jsx +++ /dev/null @@ -1,97 +0,0 @@ -import styled from "styled-components"; -import IconDate from "../../assets/icons/icondate.png"; -import { useState } from "react"; - -const CardContainer = styled.div` - display: flex; - flex-direction: column; - align-items: flex-start; - padding: 15px; - border: 1px solid #e0e0e0; - border-radius: 10px; - width: 320px; - height: 120px; - background-color: #ffffff; - margin-bottom: 20px; -`; - -const DateContainer = styled.div` - display: flex; - align-items: center; - margin-top: 5px; -`; - -const UserName = styled.div` - font-size: 25px; - font-weight: bold; - display: flex; - align-items: baseline; - - span { - font-size: 15px; - margin-left: 5px; - font-weight: 300; - } -`; - -const Icon = styled.img` - width: 18px; - height: 18px; - margin-right: 5px; -`; - -const InfoText = styled.span` - font-size: 14px; - font-weight: 300; - margin-left: 10px; -`; - -const Button = styled.button` - width: 120px; - height: 28px; - background-color: ${(props) => - props.cancelButton ? "#F3F3F3" : props.clicked ? "#888888" : "#3592FF"}; - color: ${(props) => - props.cancelButton ? "#000000" : props.clicked ? "#444444" : "#FEFDFD"}; - border: ${(props) => (props.cancelButton ? "1px solid #BBBBBB" : "none")}; - border-radius: 10px; - border: none; - cursor: pointer; - font-size: 14px; - -`; - -const ButtonContainer = styled.div` - display: flex; - justify-content: space-between; - width: 100%; - margin-top: 5px; -`; - -const DoctorReserve = () => { - const [buttonState, setButtonState] = useState(false); - - const toggleButtonState = () => { - setButtonState(!buttonState); - }; - - return ( - - - 오소현님 - - - - 2023/08/30 16:00 - - - - - - - ); -}; - -export default DoctorReserve; diff --git a/src/components/DoctorDashBoard/DoctorUntactList.jsx b/src/components/DoctorDashBoard/DoctorUntactList.jsx deleted file mode 100644 index aa16654..0000000 --- a/src/components/DoctorDashBoard/DoctorUntactList.jsx +++ /dev/null @@ -1,49 +0,0 @@ -import styled from "styled-components"; -import DoctorReserve from "./DoctorReserve"; - -const Container = styled.div` - width: 800px; - height: 555px; - margin: 0 auto; - padding: 20px; - border: 1px solid #0064ff; - border-radius: 10px; - background-color: #ffffff; - font-family: "Spoqa Han Sans Neo", "sans-serif"; - position: relative; - display: flex; - flex-wrap: wrap; - gap: 0px 80px; -`; - -const Title = styled.h1` - font-size: 28px; - font-weight: bold; - color: #333; - display: inline-block; -`; - -const Divider = styled.hr` - width: 100%; - height: 1px; - background-color: #d9d9d9; - border: none; - margin-bottom: 20px; -`; - -const DoctorUntactList = () => { - return ( - - 비대면 진료 예약 목록 - - - - - - - - - ); -}; - -export default DoctorUntactList; diff --git a/src/components/Pagination/Pagination.jsx b/src/components/Pagination/Pagination.jsx index 0fa2599..aee34a1 100644 --- a/src/components/Pagination/Pagination.jsx +++ b/src/components/Pagination/Pagination.jsx @@ -69,7 +69,6 @@ function Pagination({}) { const { totalPage } = state || {}; const handlePageClick = (data) => { - console.log(data); dispatch({ type: "page", payload: data.selected + 1, diff --git a/src/components/Reservation/ReservationItem.jsx b/src/components/Reservation/ReservationItem.jsx index 4f1248a..2e41531 100644 --- a/src/components/Reservation/ReservationItem.jsx +++ b/src/components/Reservation/ReservationItem.jsx @@ -95,6 +95,12 @@ const dummyText = `그러나 한 시와 강아지, 가을 보고, 새워 까닭 const notReadyText = `아직 비대면 진료 요약이 생성되지 않았습니다.`; +const buttonStyleList = { + normal: { type: "primary", text: "입장" }, + complete: { type: "disabled", text: "종료되었습니다" }, + notReady: { type: "disabled", text: "예약 시간이 아닙니다" }, +}; + const ReservationItem = ({ id, name, role, dept, date, index }) => { const dispatch = useDispatch(); const navigate = useNavigate(); @@ -125,24 +131,28 @@ const ReservationItem = ({ id, name, role, dept, date, index }) => { const time = useMemo(() => dayjs().diff(fullDate, "minute"), [fullDate]); const isUser = useMemo(() => classNames({ user: role === "USER" }), [role]); - const isOpen = time >= -10; - const isDone = time > 30; + const isRoomOpen = time >= -10; + const isReservationDone = time > 30; - function firstButton() { - if (isDone) { - return 종료되었습니다; - } else if (isOpen) { - return ( - navigate("/untact/meeting/" + id)}> - 입장 - - ); + const buttonStyle = useMemo(() => { + if (isReservationDone) { + return buttonStyleList.complete; + } else if (isRoomOpen) { + return buttonStyleList.normal; } else { - return 예약 시간이 아닙니다; + return buttonStyleList.notReady; } + }, [isRoomOpen, isReservationDone]); + + function onJoinButtonClick() { + if (isReservationDone || !isRoomOpen) { + return; + } + + navigate("/untact/meeting/" + id); } - function showDetail() { + function onInfoButtonClick() { dispatch( show({ id: "reservation_detail", @@ -182,8 +192,10 @@ const ReservationItem = ({ id, name, role, dept, date, index }) => { - {firstButton()} - + + {buttonStyle.text} + + 상세 정보 diff --git a/src/components/Reservation/ReservationList.jsx b/src/components/Reservation/ReservationList.jsx index 8cbec9f..b6430a1 100644 --- a/src/components/Reservation/ReservationList.jsx +++ b/src/components/Reservation/ReservationList.jsx @@ -9,7 +9,6 @@ import { } from "../../reducer/reservation-list.js"; import BlockContainer from "../Common/BlockContainer.jsx"; import TitleText from "../Common/TitleText.jsx"; -import { getAdminReservationList } from "../../librarys/api/reservation.js"; import ReservationInfoModal from "./ReservationInfoModal.jsx"; import { useSelector } from "react-redux"; import { selectEmail, selectRole } from "../../redux/userSlice.js"; diff --git a/src/components/Reservation/ReservationMiniItem.jsx b/src/components/Reservation/ReservationMiniItem.jsx new file mode 100644 index 0000000..bf627cb --- /dev/null +++ b/src/components/Reservation/ReservationMiniItem.jsx @@ -0,0 +1,138 @@ +import { useMemo } from "react"; +import styled from "styled-components"; +import PropTypes from "prop-types"; +import Button from "../Button/Button.jsx"; + +import { MdCalendarMonth } from "react-icons/md"; +import { DAYJS_FORMAT } from "../../librarys/type.js"; +import dayjs from "dayjs"; +import classNames from "classnames"; +import { useDispatch } from "react-redux"; +import { show } from "../../redux/modalSlice.js"; +import { useNavigate } from "react-router-dom"; + +const Container = styled.div` + width: 320px; + height: 120px; + padding: 12px 24px; + border: 1px solid #bbbbbb; + border-radius: 10px; + display: flex; + flex-direction: column; + gap: 8px; +`; + +const Row = styled.div` + display: flex; + width: 100%; + align-items: center; + font-size: 14px; +`; + +const Icon = styled(MdCalendarMonth)` + margin-right: 8px; +`; + +const Big = styled.span` + margin-right: 4px; + font-size: 22px; + font-weight: 800; +`; + +const Btn = styled(Button)` + width: 120px; + height: 28px; + padding: 0px 8px; + font-size: 12px; + font-weight: 500; + margin-right: 32px; +`; + +/* +1. Close !isOpen && !isDone 아직 열리지 않은 예약 +2. Open isOpen && !isDone 열려서 들어갈 수 있는 예약 +3. Done isOpen && isDone 완료된 예약 +*/ + +const dummyText = `그러나 한 시와 강아지, 가을 보고, 새워 까닭입니다. 까닭이요, 이름을 옥 별들을 많은 까닭입니다. 그리워 동경과 둘 이런 이런 계절이 거외다. 나의 오면 언덕 하나 무덤 이런 아직 있습니다. 자랑처럼 하나 무성할 패, 까닭입니다. 하나의 별 사람들의 너무나 별 피어나듯이 당신은 북간도에 봅니다.그러나 한 시와 강아지, 가을 보고, 새워 까닭입니다. 까닭이요, 이름을 옥 별들을 많은 까닭입니다. 그리워 동경과 둘 이런 이런 계절이 거외다. 나의 오면 언덕 하나 무덤 이런 아직 있습니다. 자랑처럼 하나 무성할 패, 까닭입니다. 하나의 별 사람들의 너무나 별 피어나듯이 당신은 북간도에 봅니다.`; +const notReadyText = `아직 비대면 진료 요약이 생성되지 않았습니다.`; + +const buttonStyleList = { + normal: { type: "primary", text: "입장" }, + complete: { type: "disabled", text: "종료되었습니다" }, + notReady: { type: "disabled", text: "예약 시간이 아님" }, +}; + +const ReservationMiniItem = ({ id, name, date, index }) => { + const dispatch = useDispatch(); + const navigate = useNavigate(); + + const fullDate = useMemo( + () => dayjs(date).add(index * 30, "minute"), + [date, index], + ); + + const time = useMemo(() => dayjs().diff(fullDate, "minute"), [fullDate]); + const isRoomOpen = time >= -10; + const isReservationDone = time > 30; + + const buttonStyle = useMemo(() => { + if (isReservationDone) { + return buttonStyleList.complete; + } else if (isRoomOpen) { + return buttonStyleList.normal; + } else { + return buttonStyleList.notReady; + } + }, [isRoomOpen, isReservationDone]); + + function onJoinButtonClick() { + if (isReservationDone || !isRoomOpen) { + return; + } + + navigate("/untact/meeting/" + id); + } + + function onInfoButtonClick() { + dispatch( + show({ + id: "reservation_detail", + props: { + chartDetail: null, + description: dummyText, + aiSummary: notReadyText, + }, + }), + ); + } + + return ( + + + {name}님 + + + + {fullDate.format(DAYJS_FORMAT)} + + + + {buttonStyle.text} + + + 상세 정보 + + + + ); +}; + +ReservationMiniItem.propTypes = { + id: PropTypes.string, + name: PropTypes.string, + date: PropTypes.string, + index: PropTypes.number, +}; + +export default ReservationMiniItem; diff --git a/src/components/Reservation/ReservationMiniList.jsx b/src/components/Reservation/ReservationMiniList.jsx new file mode 100644 index 0000000..a2a0f1b --- /dev/null +++ b/src/components/Reservation/ReservationMiniList.jsx @@ -0,0 +1,75 @@ +import styled from "styled-components"; +import Pagination from "../Pagination/Pagination"; +import { ReducerContext } from "../../reducer/context.js"; +import { useEffect, useReducer } from "react"; +import { + intialReservationListState, + reservationListReducer, +} from "../../reducer/reservation-list.js"; +import BlockContainer from "../Common/BlockContainer.jsx"; +import TitleText from "../Common/TitleText.jsx"; +import ReservationInfoModal from "./ReservationInfoModal.jsx"; +import { useSelector } from "react-redux"; +import { selectEmail, selectRole } from "../../redux/userSlice.js"; +import { + getReservationListAdmin, + getReservationListUser, +} from "../../librarys/dummy-api.js"; +import ReservationMiniItem from "./ReservationMiniItem.jsx"; + +const List = styled.div` + margin: 28px 0; + display: grid; + grid-template-columns: 320px 320px; + flex-direction: column; + justify-content: center; + gap: 28px 80px; +`; + +const ReservationMiniList = () => { + const [state, dispatch] = useReducer( + reservationListReducer, + intialReservationListState, + ); + const { list, page } = state; + const id = useSelector(selectEmail); + const role = useSelector(selectRole); + + useEffect(() => { + (async () => { + let data; + if (role === "USER") { + data = await getReservationListUser(id, page); + } else { + data = await getReservationListAdmin(id, page); + } + + dispatch({ + type: "data", + payload: data, + }); + })(); + }, [page]); + + return ( + + + + + + {list.map((item) => ( + + ))} + + + + ); +}; + +export default ReservationMiniList; diff --git a/src/components/TherapistDashBoard/TheraReserve.jsx b/src/components/TherapistDashBoard/TheraReserve.jsx deleted file mode 100644 index 97eca1b..0000000 --- a/src/components/TherapistDashBoard/TheraReserve.jsx +++ /dev/null @@ -1,97 +0,0 @@ -import styled from "styled-components"; -import IconDate from "../../assets/icons/icondate.png"; -import { useState } from "react"; - -const CardContainer = styled.div` - display: flex; - flex-direction: column; - align-items: flex-start; - padding: 15px; - border: 1px solid #e0e0e0; - border-radius: 10px; - width: 320px; - height: 120px; - background-color: #ffffff; - margin-bottom: 20px; -`; - -const DateContainer = styled.div` - display: flex; - align-items: center; - margin-top: 5px; -`; - -const UserName = styled.div` - font-size: 25px; - font-weight: bold; - display: flex; - align-items: baseline; - - span { - font-size: 15px; - margin-left: 5px; - font-weight: 300; - } -`; - -const Icon = styled.img` - width: 18px; - height: 18px; - margin-right: 5px; -`; - -const InfoText = styled.span` - font-size: 14px; - font-weight: 300; - margin-left: 10px; -`; - -const Button = styled.button` - width: 120px; - height: 28px; - background-color: ${(props) => - props.cancelButton ? "#F3F3F3" : props.clicked ? "#888888" : "#3592FF"}; - color: ${(props) => - props.cancelButton ? "#000000" : props.clicked ? "#444444" : "#FEFDFD"}; - border: ${(props) => (props.cancelButton ? "1px solid #BBBBBB" : "none")}; - border-radius: 10px; - border: none; - cursor: pointer; - font-size: 14px; - -`; - -const ButtonContainer = styled.div` - display: flex; - justify-content: space-between; - width: 100%; - margin-top: 5px; -`; - -const TheraReserve = () => { - const [buttonState, setButtonState] = useState(false); - - const toggleButtonState = () => { - setButtonState(!buttonState); - }; - - return ( - - - 오소현님 - - - - 2023/08/30 16:00 - - - - - - - ); -}; - -export default TheraReserve; diff --git a/src/components/TherapistDashBoard/TheraUntactList.jsx b/src/components/TherapistDashBoard/TheraUntactList.jsx deleted file mode 100644 index 8b40842..0000000 --- a/src/components/TherapistDashBoard/TheraUntactList.jsx +++ /dev/null @@ -1,49 +0,0 @@ -import styled from "styled-components"; -import TheraReserve from "./TheraReserve"; - -const Container = styled.div` - width: 800px; - height: 555px; - margin: 0 auto; - padding: 20px; - border: 1px solid #0064ff; - border-radius: 10px; - background-color: #ffffff; - font-family: "Spoqa Han Sans Neo", "sans-serif"; - position: relative; - display: flex; - flex-wrap: wrap; - gap: 0px 80px; -`; - -const Title = styled.h1` - font-size: 28px; - font-weight: bold; - color: #333; - display: inline-block; -`; - -const Divider = styled.hr` - width: 100%; - height: 1px; - background-color: #d9d9d9; - border: none; - margin-bottom: 20px; -`; - -const TheraUntactList = () => { - return ( - - 비대면 진료 예약 목록 - - - - - - - - - ); -}; - -export default TheraUntactList; diff --git a/src/pages/Doctor/DoctorDashBoardPage.jsx b/src/pages/Doctor/DoctorDashBoardPage.jsx index 26a54a3..37f4561 100644 --- a/src/pages/Doctor/DoctorDashBoardPage.jsx +++ b/src/pages/Doctor/DoctorDashBoardPage.jsx @@ -1,7 +1,7 @@ import styled from "styled-components"; import DoctorDashHeader from "../../components/DoctorDashBoard/DoctorDashHeader"; import CardhButton from "../../components/Button/CardButton"; -import DoctorUntactList from "../../components/DoctorDashBoard/DoctorUntactList"; +import ReservationMiniList from "../../components/Reservation/ReservationMiniList.jsx"; const PageContainer = styled.div` display: flex; @@ -37,7 +37,7 @@ const DoctorDashBoardPage = () => { - + ); diff --git a/src/pages/Therapist/TheraDashBoardPage.jsx b/src/pages/Therapist/TheraDashBoardPage.jsx index f71f698..ac367f8 100644 --- a/src/pages/Therapist/TheraDashBoardPage.jsx +++ b/src/pages/Therapist/TheraDashBoardPage.jsx @@ -1,7 +1,7 @@ import styled from "styled-components"; import TheraDashHeader from "../../components/TherapistDashBoard/TheraDashHeader"; import CardhButton from "../../components/Button/CardButton"; -import TheraUntactList from "../../components/TherapistDashBoard/TheraUntactList"; +import ReservationMiniList from "../../components/Reservation/ReservationMiniList.jsx"; const PageContainer = styled.div` display: flex; @@ -37,7 +37,7 @@ const TheraDashBoardPage = () => { - + ); From c0be7d6ad19eb54e8c61199ac1ed19822e2f81da Mon Sep 17 00:00:00 2001 From: PortalCube <35104213+PortalCube@users.noreply.github.com> Date: Sat, 11 Nov 2023 01:20:01 +0900 Subject: [PATCH 2/3] =?UTF-8?q?Feat:=20=EC=98=88=EC=95=BD=20=EC=B7=A8?= =?UTF-8?q?=EC=86=8C=20API=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Reservation/ReservationInfoModal.jsx | 17 ++++++++++++++--- src/components/Reservation/ReservationItem.jsx | 1 + .../Reservation/ReservationMiniItem.jsx | 1 + src/librarys/api/reservation.js | 7 +++++++ 4 files changed, 23 insertions(+), 3 deletions(-) diff --git a/src/components/Reservation/ReservationInfoModal.jsx b/src/components/Reservation/ReservationInfoModal.jsx index 8b6666f..31c2f87 100644 --- a/src/components/Reservation/ReservationInfoModal.jsx +++ b/src/components/Reservation/ReservationInfoModal.jsx @@ -3,12 +3,14 @@ import PropTypes from "prop-types"; import Modal from "../Common/Modal.jsx"; -import { selectProps } from "../../redux/modalSlice.js"; +import { hide, selectProps } from "../../redux/modalSlice.js"; import { useSelector } from "react-redux"; import ModalTitleText from "../Common/ModalTitleText.jsx"; import ChartSummary from "../Chart/ChartSummary.jsx"; import InputAreaContainer from "../Input/InputAreaContainer.jsx"; import Button from "../Button/Button.jsx"; +import { removeReservation } from "../../librarys/api/reservation.js"; +import { useDispatch } from "react-redux"; const Container = styled.div` display: flex; @@ -36,8 +38,17 @@ const ButtonContainer = styled.div` const id = "reservation_detail"; const ReservationInfoModal = () => { + const dispatch = useDispatch(); const value = useSelector(selectProps(id)); - const { description, aiSummary } = value || {}; + const { reservationId, description, aiSummary } = value || {}; + + async function onCancelButtonClick() { + const response = await removeReservation(reservationId); + 1; + alert("예약이 성공적으로 취소되었습니다."); + + dispatch(hide(id)); + } return ( @@ -48,7 +59,7 @@ const ReservationInfoModal = () => { - + diff --git a/src/components/Reservation/ReservationItem.jsx b/src/components/Reservation/ReservationItem.jsx index 2e41531..695da38 100644 --- a/src/components/Reservation/ReservationItem.jsx +++ b/src/components/Reservation/ReservationItem.jsx @@ -157,6 +157,7 @@ const ReservationItem = ({ id, name, role, dept, date, index }) => { show({ id: "reservation_detail", props: { + reservationId: 999, chartDetail: null, description: dummyText, aiSummary: notReadyText, diff --git a/src/components/Reservation/ReservationMiniItem.jsx b/src/components/Reservation/ReservationMiniItem.jsx index bf627cb..a1e9a15 100644 --- a/src/components/Reservation/ReservationMiniItem.jsx +++ b/src/components/Reservation/ReservationMiniItem.jsx @@ -99,6 +99,7 @@ const ReservationMiniItem = ({ id, name, date, index }) => { show({ id: "reservation_detail", props: { + reservationId: 999, chartDetail: null, description: dummyText, aiSummary: notReadyText, diff --git a/src/librarys/api/reservation.js b/src/librarys/api/reservation.js index 8c8a6ae..2b2a73d 100644 --- a/src/librarys/api/reservation.js +++ b/src/librarys/api/reservation.js @@ -31,3 +31,10 @@ export async function createReservation( const response = await axios.post("/reservation/", data); return response.data; } + +export async function removeReservation(id) { + const axios = getSpringAxios(); + + const response = await axios.put("/reservation/" + id); + return response.data; +} From 2c5a2b3a6eb3ead75b7dc714d585daf28e60b2b6 Mon Sep 17 00:00:00 2001 From: PortalCube <35104213+PortalCube@users.noreply.github.com> Date: Sat, 11 Nov 2023 01:44:11 +0900 Subject: [PATCH 3/3] =?UTF-8?q?Feat:=20=EC=A7=84=EB=A3=8C=20=EC=98=88?= =?UTF-8?q?=EC=95=BD=20=EC=8B=9C=EA=B0=84=20=EC=A1=B0=ED=9A=8C=20API=20?= =?UTF-8?q?=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Reservation/ReservationCreateModal.jsx | 34 ++++++++++++++----- src/librarys/api/reservation.js | 8 +++++ src/librarys/util.js | 4 +++ src/reducer/reservation-create.js | 8 ++--- 4 files changed, 42 insertions(+), 12 deletions(-) diff --git a/src/components/Reservation/ReservationCreateModal.jsx b/src/components/Reservation/ReservationCreateModal.jsx index b936421..bd473ef 100644 --- a/src/components/Reservation/ReservationCreateModal.jsx +++ b/src/components/Reservation/ReservationCreateModal.jsx @@ -7,13 +7,16 @@ import ToggleButton from "../Button/ToggleButton.jsx"; import Button from "../Button/Button.jsx"; import CalenderMonth from "../Calender/CalenderMonth.jsx"; import { ReducerContext } from "../../reducer/context.js"; -import { useEffect, useReducer, useState } from "react"; +import { useEffect, useMemo, useReducer, useState } from "react"; import { intialReserveCreateState, reserveCreateReducer, } from "../../reducer/reservation-create.js"; import dayjs from "dayjs"; -import { createReservation } from "../../librarys/api/reservation.js"; +import { + createReservation, + getAdminReservationTime, +} from "../../librarys/api/reservation.js"; const Container = styled.div` display: flex; @@ -72,14 +75,29 @@ export const ReservationCreateModal = () => { ); const [times, setTimes] = useState(createTimes()); - const { index, available, description } = state; + const { adminId, index, disabledTime, description, year, month, date } = + state; + const serverTime = useMemo( + () => [year, month + 1, date].join("-"), + [year, month, date], + ); useEffect(() => { dispatch({ - type: "available", - payload: [true, true, true, false, false], + type: "disabledTime", + payload: [36, 37, 38, 39, 40], }); - }, []); + + (async () => { + const response = await getAdminReservationTime(adminId, serverTime); + const payload = response.map((item) => item.index); + + dispatch({ + type: "disabledTime", + payload, + }); + })(); + }, [serverTime]); function onSelect(id) { dispatch({ @@ -100,7 +118,7 @@ export const ReservationCreateModal = () => { // state.adminId, // "ldh", // state.description, - // [state.year, state.month + 1, state.date].join("-"), + // serverTime, // state.index, // ); console.log(state); @@ -123,7 +141,7 @@ export const ReservationCreateModal = () => { onSelect(item.index)} > {item.value} diff --git a/src/librarys/api/reservation.js b/src/librarys/api/reservation.js index 2b2a73d..7f7e806 100644 --- a/src/librarys/api/reservation.js +++ b/src/librarys/api/reservation.js @@ -1,3 +1,4 @@ +import { sleep } from "../util.js"; import { getSpringAxios } from "./axios.js"; export async function getAdminReservationList(id, page = undefined) { @@ -38,3 +39,10 @@ export async function removeReservation(id) { const response = await axios.put("/reservation/" + id); return response.data; } + +export async function getAdminReservationTime(id, date) { + const axios = getSpringAxios(); + + const response = await axios.get(`/reserved-times/${id}/${date}`); + return response.data; +} diff --git a/src/librarys/util.js b/src/librarys/util.js index 77ddd07..47e1c18 100644 --- a/src/librarys/util.js +++ b/src/librarys/util.js @@ -17,3 +17,7 @@ export const throttle = (callback, delay) => { } }; }; + +export function sleep(ms) { + return new Promise((resolve) => setTimeout(resolve, ms)); +} diff --git a/src/reducer/reservation-create.js b/src/reducer/reservation-create.js index bb97e73..4b64538 100644 --- a/src/reducer/reservation-create.js +++ b/src/reducer/reservation-create.js @@ -21,10 +21,10 @@ function prevMonthState(state) { export const intialReserveCreateState = { ...getDate(), - available: [true, true, true, true, true], + disabledTime: [], index: null, description: "", - adminId: null, + adminId: "ldh", }; export function reserveCreateReducer(state, action) { @@ -54,10 +54,10 @@ export function reserveCreateReducer(state, action) { date: action.payload, index: null, }; - case "available": + case "disabledTime": return { ...state, - available: action.payload, + disabledTime: action.payload, }; case "index": return {