[Feat/FE] 비대면 진료 예약 목록 대시보드 컴포넌트의 API를 예비 연결하고 및 페이지를 간소화한다.

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,

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 = () => {
                 <ToggleButton
                   key={item.index}
                   selected={item.index === index}
-                  disabled={!available[i]}
+                  disabled={disabledTime.includes(item.index)}
                   onClick={() => onSelect(item.index)}
                 >
                   {item.value}

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 (
     <Modal id={id}>
@@ -48,7 +59,7 @@ const ReservationInfoModal = () => {
         <Input label="AI 비대면 진료 요약" value={aiSummary} disabled={true} />
         <ButtonContainer>
           <Button type="primary">환자 차트 페이지로</Button>
-          <Button>예약 취소</Button>
+          <Button onClick={onCancelButtonClick}>예약 취소</Button>
         </ButtonContainer>
       </Container>
     </Modal>

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,28 +131,33 @@ 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 <Btn type="disabled">종료되었습니다</Btn>;
-    } else if (isOpen) {
-      return (
-        <Btn type="primary" onClick={() => navigate("/untact/meeting/" + id)}>
-          입장
-        </Btn>
-      );
+  const buttonStyle = useMemo(() => {
+    if (isReservationDone) {
+      return buttonStyleList.complete;
+    } else if (isRoomOpen) {
+      return buttonStyleList.normal;
     } else {
-      return <Btn type="disabled">예약 시간이 아닙니다</Btn>;
+      return buttonStyleList.notReady;
     }
+  }, [isRoomOpen, isReservationDone]);
+
+  function onJoinButtonClick() {
+    if (isReservationDone || !isRoomOpen) {
+      return;
+    }
+
+    navigate("/untact/meeting/" + id);
   }
 
-  function showDetail() {
+  function onInfoButtonClick() {
     dispatch(
       show({
         id: "reservation_detail",
         props: {
+          reservationId: 999,
           chartDetail: null,
           description: dummyText,
           aiSummary: notReadyText,
@@ -182,8 +193,10 @@ const ReservationItem = ({ id, name, role, dept, date, index }) => {
         </Line>
       </Info>
       <ButtonContainer>
-        {firstButton()}
-        <Btn type="info" onClick={showDetail}>
+        <Btn type={buttonStyle.type} onClick={onJoinButtonClick}>
+          {buttonStyle.text}
+        </Btn>
+        <Btn type="info" onClick={onInfoButtonClick}>
           상세 정보
         </Btn>
       </ButtonContainer>

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";