Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • websystem2023-2/whenmeet
1 result
Show changes
Commits on Source (2)
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>
......
......@@ -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>
......
.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;
}
}
......@@ -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;
......
......@@ -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%;
......