diff --git a/react-whenMeet/src/components/PasswordModal.jsx b/react-whenMeet/src/components/PasswordModal.jsx index c9870adc6359584a5783ee0bd9072596eb8043c5..2642b372da00b6702cb45ecf4da423d10a92b308 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 a94ae41fb9451c636900c8256b849b832887c214..1b12110a351a29a2114ae955c9b982907cafd898 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 7acfc43cd24b9e8331f45201371b6f5baafe8179..4dad962ab3fe1224346354e3ef2ad33c837bfcf0 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 1cd12ecc77cc2f2ef9b21389594ec48a34073d9b..9b944aef28649883f68f10ddd03efbb25fd3afd8 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 610193b13be197b43d038ca2354819dc409bda27..e678d31596e9b64343b57eade4f32b55fe151783 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 {