From 0ce4f1230b6ce5c6460bee2bb5f754e824cf5633 Mon Sep 17 00:00:00 2001
From: jhkang0516 <jhkang0516@ajou.ac.kr>
Date: Thu, 7 Dec 2023 13:09:53 +0900
Subject: [PATCH] =?UTF-8?q?[EDIT]=20CSS=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../src/components/PasswordModal.jsx | 19 ++++++++++++++++---
.../src/components/ResultEndForm.jsx | 2 +-
react-whenMeet/src/styles/CalendarWeek.css | 1 +
react-whenMeet/src/styles/ResultEnd.css | 9 +++++++++
react-whenMeet/src/styles/ResultMake.css | 4 ++++
5 files changed, 31 insertions(+), 4 deletions(-)
diff --git a/react-whenMeet/src/components/PasswordModal.jsx b/react-whenMeet/src/components/PasswordModal.jsx
index c9870ad..2642b37 100644
--- a/react-whenMeet/src/components/PasswordModal.jsx
+++ b/react-whenMeet/src/components/PasswordModal.jsx
@@ -20,8 +20,14 @@ function PasswordModal({ isOpen, onRequestClose, onSubmit }) {
bottom: "auto",
marginRight: "-50%",
transform: "translate(-50%, -50%)",
+ padding: "20px 20px 0 20px",
},
};
+ const buttonContainerStyle = {
+ display: "flex",
+ justifyContent: "center",
+ marginTop: "30px",
+ };
return (
<Modal
@@ -30,15 +36,22 @@ function PasswordModal({ isOpen, onRequestClose, onSubmit }) {
contentLabel="비밀번호 입력"
style={customStyles}
>
- <h2>관리자 비밀번호를 입력하세요</h2>
+ <h2 style={{ justifyContent: "center" }}>관리자 비밀번호를 입력하세요</h2>
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="비밀번호"
+ style={{ margin: "15px 0 0 0" }}
/>
- <button onClick={handleSubmit}>확인</button>
- <button onClick={onRequestClose}>취소</button>
+ <div style={buttonContainerStyle}>
+ <button onClick={handleSubmit} style={{ margin: "0 10px" }}>
+ 확인
+ </button>
+ <button onClick={onRequestClose} style={{ margin: "0 10px" }}>
+ 취소
+ </button>
+ </div>
</Modal>
);
}
diff --git a/react-whenMeet/src/components/ResultEndForm.jsx b/react-whenMeet/src/components/ResultEndForm.jsx
index a94ae41..1b12110 100644
--- a/react-whenMeet/src/components/ResultEndForm.jsx
+++ b/react-whenMeet/src/components/ResultEndForm.jsx
@@ -238,7 +238,7 @@ export default function ResultEndForm() {
const timeIndex = dateTime.slice(lastIndex + 1);
return (
- <label key={index}>
+ <label key={index} className="radio-label">
<input
type="radio"
name="date"
diff --git a/react-whenMeet/src/styles/CalendarWeek.css b/react-whenMeet/src/styles/CalendarWeek.css
index 7acfc43..4dad962 100644
--- a/react-whenMeet/src/styles/CalendarWeek.css
+++ b/react-whenMeet/src/styles/CalendarWeek.css
@@ -1,6 +1,7 @@
.calendar-container {
margin-top: 20px;
width: 100%;
+ background-color: #5fbdff;
}
.button-container {
display: flex;
diff --git a/react-whenMeet/src/styles/ResultEnd.css b/react-whenMeet/src/styles/ResultEnd.css
index 1cd12ec..9b944ae 100644
--- a/react-whenMeet/src/styles/ResultEnd.css
+++ b/react-whenMeet/src/styles/ResultEnd.css
@@ -7,6 +7,15 @@
padding: 0;
width: 100%;
}
+.form-container label {
+ display: flex;
+ align-items: center; /* 라디오 버튼과 텍스트를 세로 중앙에 맞춤 */
+ margin: 20px 0; /* 라벨 간에 여백을 추가 */
+}
+.form-container input[type="radio"] {
+ margin-right: 10px; /* 라디오 버튼과 텍스트 사이의 공간 조정 */
+ width: 20%;
+}
.calendar {
border: 1px solid;
diff --git a/react-whenMeet/src/styles/ResultMake.css b/react-whenMeet/src/styles/ResultMake.css
index 610193b..e678d31 100644
--- a/react-whenMeet/src/styles/ResultMake.css
+++ b/react-whenMeet/src/styles/ResultMake.css
@@ -14,6 +14,10 @@
display: flex;
flex-direction: row;
justify-content: center;
+ border-top: 2px solid #5fbdff; /* 기본 구분선 */
+ box-shadow: 0px 1px 5px rgba(95, 189, 255, 0.5); /* 구분선에 그림자 효과 추가 */
+ padding-top: 20px;
+ margin-top: 30px;
}
.mostTime {
--
GitLab