react-whenMeet/src/components/PasswordModal.jsx

 import React, { useState } from "react";
 import Modal from "react-modal";
+import "../styles/ModalStyle.css";
 
 Modal.setAppElement("#root");
 
@@ -10,31 +11,14 @@ function PasswordModal({ isOpen, onRequestClose, onSubmit }) {
     onSubmit(password);
     setPassword("");
   };
-  const customStyles = {
-    content: {
-      width: "400px", // 모달의 너비
-      height: "200px", // 모달의 높이
-      top: "50%",
-      left: "50%",
-      right: "auto",
-      bottom: "auto",
-      marginRight: "-50%",
-      transform: "translate(-50%, -50%)",
-      padding: "20px 20px 0 20px",
-    },
-  };
-  const buttonContainerStyle = {
-    display: "flex",
-    justifyContent: "center",
-    marginTop: "30px",
-  };
 
   return (
     <Modal
       isOpen={isOpen}
       onRequestClose={onRequestClose}
       contentLabel="비밀번호 입력"
-      style={customStyles}
+      overlayClassName={"modal-overlay"} // 오버레이 클래스 추가
+      className={"modal-content"} // 컨텐츠(모달 창) 클래스
     >
       <h2 style={{ justifyContent: "center" }}>관리자 비밀번호를 입력하세요</h2>
       <input
@@ -44,11 +28,11 @@ function PasswordModal({ isOpen, onRequestClose, onSubmit }) {
         placeholder="비밀번호"
         style={{ margin: "15px 0 0 0" }}
       />
-      <div style={buttonContainerStyle}>
-        <button onClick={handleSubmit} style={{ margin: "0 10px" }}>
+      <div>
+        <button onClick={handleSubmit} className="button-modal">
           확인
         </button>
-        <button onClick={onRequestClose} style={{ margin: "0 10px" }}>
+        <button onClick={onRequestClose} className="button-modal">
           취소
         </button>
       </div>

react-whenMeet/src/components/ResultMakeForm.js

@@ -101,14 +101,11 @@ function ResultMakeForm() {
         return { days: 0, hours: 0, minutes: 0, seconds: 0 };
       }
 
-      // 서버의 voteExpiresAt 값을 한국 시간대로 가정하여 파싱
       const voteExpiresKST = new Date(meetingData.voteExpiresAt);
 
-      // 현재 로컬 시간 (브라우저 시간대를 한국 시간대로 조정)
       const now = new Date();
       const nowKST = new Date(now.getTime() + 9 * 60 * 60 * 1000); // UTC 시간에 9시간을 더해 KST로 조정
 
-      // 남은 시간 계산
       const difference = voteExpiresKST - nowKST;
 
       if (difference > 0) {
@@ -212,7 +209,9 @@ function ResultMakeForm() {
             <div>현재 완료한 인원수 : {meetingData?.currentParticipants}</div>
           )}
 
-          <div>종료까지 남은 시간 : {timeLeft}</div>
+          {meetingData.voteExpiresAt && (
+            <div>종료까지 남은 시간 : {timeLeft}</div>
+          )}
           <button onClick={handleEdit}>수정하기</button>
           <button onClick={closeMeeting}>투표 종료하기</button>
         </div>

react-whenMeet/src/styles/ModalStyle.css

+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.modal-content {
+  position: relative;
+  width: 40%;
+  padding: 20px;
+  background: white;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  border-radius: 10px;
+}
+
+.button-modal {
+  padding: 10px 15px; /* 버튼의 패딩 조정 */
+  border: none; /* 테두리 제거 */
+  color: white; /* 글자색 */
+  border-radius: 5px; /* 둥근 모서리 */
+  cursor: pointer; /* 마우스 오버 시 커서 변경 */
+}
+@media (max-width: 500px) {
+  .modal-content {
+    width: 70%;
+    height: auto;
+  }
+}

react-whenMeet/src/styles/ResultEnd.css

@@ -44,21 +44,20 @@
   align-items: center;
 }
 @media screen and (max-width: 768px) {
-  .flex-bottom-container {
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-
-    bottom: 0;
-    left: 0;
-  }
-
   .mostTime,
   .possible {
     position: relative;
-    width: 40%;
-    margin: 200px 20px;
-    height: 40%;
+    width: 100%;
+    margin: 20px 0;
+    height: auto;
+    top: 200px;
+  }
+
+  .flex-bottom-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
   }
   .flex-row {
     flex-direction: column;

react-whenMeet/src/styles/ResultMake.css

@@ -14,8 +14,8 @@
   display: flex;
   flex-direction: row;
   justify-content: center;
-  border-top: 2px solid #5fbdff; /* 기본 구분선 */
-  box-shadow: 0px 1px 5px rgba(95, 189, 255, 0.5); /* 구분선에 그림자 효과 추가 */
+  border-top: 2px solid #5fbdff;
+  box-shadow: 0px 1px 5px rgba(95, 189, 255, 0.5);
   padding-top: 20px;
   margin-top: 30px;
   width: 50%;
@@ -26,11 +26,11 @@
 .possible {
   border: 1px solid #ddd;
   padding: 20px;
-  margin: 10px; /* 각 요소 주변의 공간을 더욱 명확히 */
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 세련된 그림자 효과 */
-  border-radius: 8px; /* 모서리를 둥글게 */
-  background-color: #ffffff; /* 배경색 설정 */
-  box-sizing: border-box; /* 패딩과 보더를 너비에 포함 */
+  margin: 10px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  background-color: #ffffff;
+  box-sizing: border-box;
 }
 
 .mostTime {
@@ -59,15 +59,21 @@
     position: relative;
     top: 200px;
   }
+
+  .mostTime,
+  .possible {
+    position: relative;
+    width: 100%;
+    margin: 20px 0;
+    height: auto;
+  }
+
   .flex-bottom-container {
     display: flex;
-    justify-content: space-between;
+    flex-direction: column;
+    align-items: center;
     width: 100%;
-
-    bottom: 0;
-    left: 0;
   }
-
   .possible {
     position: static;
     width: 40%;