Devcamp_modal

모달 구현

modal.tsx

import React, { useState, useEffect } from "react";
import Button from "react-bootstrap/Button";
import Modal from "react-bootstrap/Modal";
import "bootstrap/dist/css/bootstrap.min.css";
import "./Modal.css";

export default function ReserveModal(props: any) {
  const [showPossible, setShowPossible] = useState(false);
  const [showImpossible, setShowImpossible] = useState(false);
  const [buttonChange, setButtonChange] = useState(false);
  const [message, setMessage] = useState("room" + props.roomNumber);

  // const handleClose = () => setShowPossible(false);
  const handleShowPossible = () => setShowPossible(!showPossible);
  const handleShowImpossible = () => setShowImpossible(!showImpossible);
  const handleReserve = () => {
    setShowPossible(!showPossible);
    setMessage("사용중");
    setButtonChange(!buttonChange);
  };

  return (
    <>
      <Button
        id={"openModal" + (buttonChange ? "Impossible" : "Possible")}
        onClick={buttonChange ? handleShowImpossible : handleShowPossible}
      >
        <p className="btnMessage">{message}</p>
      </Button>

      <Modal
        show={showPossible}
        onHide={handleShowPossible}
        aria-labelledby="contained-modal-title-vcenter"
        centered
      >
        <Modal.Header>
          <Modal.Title>
            <p className="modalTitle">테라스 선택 확인</p>
          </Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <span className="modalBody">
            테라스 room{props.roomNumber}을 <br />
            예약하시겠습니까?
          </span>
        </Modal.Body>
        <Modal.Footer>
          <Button
            id="cancelBtn"
            variant="secondary"
            onClick={handleShowPossible}
          >
            취소
          </Button>
          <Button id="reserveBtn" onClick={handleReserve}>
            예약
          </Button>
        </Modal.Footer>
      </Modal>

      <Modal
        show={showImpossible}
        onHide={handleShowPossible}
        aria-labelledby="contained-modal-title-vcenter"
        centered
      >
        <Modal.Header>
          <Modal.Title>
            <p className="modalTitle">테라스 선택 확인</p>
          </Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <span className="modalBody">현재 사용중입니다.</span>
        </Modal.Body>
        <Modal.Footer>
          <Button id="okBtn" onClick={handleShowImpossible}>
            OK
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

• 우선 모달을 예약 가능과 예약 불가로 나누었다.
  • showPossible : 예약 가능 모달의 show 값
  • showImpossible : 이미 사용 중인 모달의 show 값
  • buttonChange : 예약을 클릭 시 버튼이 예약 불가 버튼으로 바뀜
  • message : 버튼의 문자 변경

• 처음 예약 버튼은 예약 가능 상태이다. 따라서 button이 바뀌지 않았으므로 buttonChange -> false이고 button의 id는 openModalPossible이 된다.

• 버튼의 message는 "room" + {props.roomNumber}가 되어 각 방마다 버튼을 생성한다.

• onClick 시 handleShowPossible로 인해 예약 가능 모달창이 뜨게 된다.

• 예약 가능 모달창의 예약 버튼 onClick 시 handleReserve가 실행되어 showPossible = false, message = "사용중", buttonChange = true가 된다.

modal.css

#openModalPossible {
  border: none;
  padding: 0%;
  background-color: #50b4d2;
  width: 31%;
  height: 55px;
  font-weight: bold;
}

#openModalImpossible {
  border: none;
  padding: 0%;
  background-color: #b5b5b5;
  width: 31%;
  height: 55px;
  font-weight: bold;
}

.btnMessage {
  margin: 0%;
}

.modal-dialog-centered {
  justify-content: center;
}

.modal-content {
  border-radius: 35px;
  width: 90%;
  /* width: 250px; */
  height: 324px;
  align-items: center;
}

.modal-header {
  justify-content: center;
  margin-top: 3%;
  margin-bottom: 3%;
  width: 90%;
}

.modalTitle {
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 0%;
}

.modal-body {
  padding: 0%;
}

.modalBody {
  display: flex;
  align-items: center;
  font-weight: 400;
  font-size: 20px;
  height: 100%;
  text-align: center;
  padding-bottom: 10%;
}

#cancelBtn {
  border: none;
  background-color: #b5b5b5;
  width: 40%;
  height: 90%;
}

#reserveBtn {
  border: none;
  background-color: #50b4d2;
  width: 40%;
  height: 90%;
}

#okBtn {
  border: none;
  background-color: #50b4d2;
  width: 90%;
}

.modal-footer {
  width: 80%;
  justify-content: center;
}

main.tsx

import React from "react";
import ReactDOM from "react-dom/client";
// import App from './App'
import ReserveModal from "./Modal";
import MainPage from "./MainPage";
import "./main.css";
import ScannerModal from "./ScannerModal";
import Timer from "./Timer";
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <MainPage />
    <div>
      <Timer />
    </div>
    <div id="mainReserveBtn">
      <span id="floor">2F</span>
      <div id="floorRoom">
        <ReserveModal roomNumber="1" />
        <ReserveModal roomNumber="2" />
        <ReserveModal roomNumber="3" />
      </div>
      <hr id="dividingLine" />
      <span id="floor">3F</span>
      <div id="floorRoom">
        <ReserveModal roomNumber="4" />
        <ReserveModal roomNumber="5" />
        <ReserveModal roomNumber="6" />
      </div>
      <hr id="dividingLine" />
      <span id="floor">4F</span>
      <div id="floorRoom">
        <ReserveModal roomNumber="7" />
        <ReserveModal roomNumber="8" />
        <ReserveModal roomNumber="9" />
      </div>
      <hr id="dividingLine" />
      <span id="floor">5F</span>
      <div id="floorRoom">
        <ReserveModal roomNumber="10" />
        <ReserveModal roomNumber="11" />
        <ReserveModal roomNumber="12" />
      </div>
      <ScannerModal />
    </div>
  </React.StrictMode>
);

• roomNumber에 각 방의 번호를 넣어준다