[추가] checkout modal 추가 #50

src/css/CheckoutModal.css

@@ -0,0 +1,18 @@
+.Checkout {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 15px;
+}
+#CheckoutBtn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border: none;
+  background-color: #50b4d2;
+  width: 100px;
+}
+#CheckoutOKBtn {
+  border: none;
+  background-color: #50b4d2;
+}

src/css/Navigation.css

@@ -9,12 +9,6 @@
   background-color: #50b4d2;
 }
 
-.menu__list {
-  display: flex;
-  justify-content: center;
-  color: white;
-}
-
 @media (max-width: 1799px) {
   .burger__menu,
   .x__menu {
@@ -50,7 +44,7 @@
     position: fixed;
     left: 0;
     top: 75px;
-    background-color: #50b4d2;
+    background-color: white;
     z-index: 1;
     box-shadow: 2px 0px 1px rgba(44, 44, 44, 0.137);
   }
@@ -95,43 +89,33 @@
 }
 
 .Hello {
-  padding-left: 20px;
-  /* padding: 30px; */
+  padding: 10px 20px;
   display: flex;
+  font-size: larger;
   justify-content: center;
   flex-direction: column;
-  white-space: pre-line;
+  margin-bottom: 0px;
+  padding-right: 0px;
 }
 
 .Use_List {
-  padding-left: 20px;
-  /* padding: 30px; */
+  padding: 10px 20px;
   display: flex;
   justify-content: center;
   flex-direction: column;
-  padding-bottom: 20px;
-  margin-top: 20px;
+  border: 1px solid rgba(0, 0, 0, 60%);
+  margin: 10px;
+  font-size: large;
 }
 
 .info {
   padding-top: 10px;
   padding-left: 5px;
 }
 
-.checkOut {
-  background-color: white;
-  border-radius: 30px;
-  padding: auto;
-  /* width: fit-content;
-    display: flex;
-    justify-content: center; */
-}
-
 .dividingLine {
-  margin-top: 0%;
-  margin-bottom: 0%;
-  margin-left: 2%;
-  margin-right: 2%;
+  margin: 0px;
+  color: black;
 }
 
 .headerText {
@@ -144,5 +128,15 @@
 
 .headerTextTitle {
   color: white;
-  font-size: large;
+  font-size: larger;
+}
+
+#LogoutBtn {
+  background-color: #d5d5d5;
+  border: none;
+  cursor: pointer;
+  margin-left: 105px;
+  bottom: 0;
+  font-size: medium;
+  border-radius: 5px;
 }

src/tsx/CheckoutModal.tsx

@@ -0,0 +1,40 @@
+import React, { useState } from "react";
+import Button from "react-bootstrap/Button";
+import Modal from "react-bootstrap/Modal";
+import "bootstrap/dist/css/bootstrap.min.css";
+import "../css/CheckoutModal.css";
+
+export default function CheckoutModal() {
+  const [show, setShow] = useState(false);
+
+  const handleShow = () => setShow(!show);
+
+  return (
+    <>
+      <div className="Checkout">
+        <Button id={"CheckoutBtn"} onClick={handleShow}>
+          퇴실
+        </Button>
+        <Modal
+          show={show}
+          onHide={handleShow}
+          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="CheckoutOKBtn" onClick={handleShow}>
+              퇴실
+            </Button>
+          </Modal.Footer>
+        </Modal>
+      </div>
+    </>
+  );
+}

src/tsx/Navigation.tsx

@@ -1,6 +1,6 @@
 import "../css/Navigation.css?after";
 import { useState } from "react";
-
+import CheckoutModal from "./CheckoutModal";
 function Navigation(): JSX.Element {
   const [menuToggle, setMenuToggle] = useState<boolean>(false);
   //초기값은 false
@@ -40,6 +40,7 @@ function Navigation(): JSX.Element {
                 <b>홍길동</b>님
               </div>
               <div>반갑습니다!</div>
+              <button id="LogoutBtn">로그아웃</button>
             </div>
           </p>
           <hr className="dividingLine" />
@@ -55,9 +56,8 @@ function Navigation(): JSX.Element {
               <div>{"2022-09-05"}</div>
               <div>{"12:37~15:37"}</div>
             </div>
+            <CheckoutModal />
           </div>
-
-          <button className="checkOut">퇴실하기</button>
         </div>
       </div>
     </nav>