From 07161314d510083ba421817d289e3f5ff565d1f2 Mon Sep 17 00:00:00 2001
From: jhkang0516 <jhkang0516@ajou.ac.kr>
Date: Wed, 22 Nov 2023 12:09:20 +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/CalendarWeek.jsx | 22 +++++-----
.../src/components/ResultEndForm.jsx | 41 ++++++++++++-------
react-whenMeet/src/routes/ResultEnd.jsx | 6 +--
react-whenMeet/src/styles/CalendarWeek.css | 11 ++++-
react-whenMeet/src/styles/ResultEnd.css | 12 +++++-
react-whenMeet/src/styles/ResultMake.css | 9 ++--
6 files changed, 66 insertions(+), 35 deletions(-)
diff --git a/react-whenMeet/src/components/CalendarWeek.jsx b/react-whenMeet/src/components/CalendarWeek.jsx
index c57b4ad..bb00895 100644
--- a/react-whenMeet/src/components/CalendarWeek.jsx
+++ b/react-whenMeet/src/components/CalendarWeek.jsx
@@ -97,16 +97,18 @@ const CalendarWeek = ({
const weekDates = weeks[currentWeekIndex] || [];
return (
- <div>
- <button onClick={handlePrevWeek} disabled={currentWeekIndex === 0}>
- Prev Week
- </button>
- <button
- onClick={handleNextWeek}
- disabled={currentWeekIndex === weeks.length - 1}
- >
- Next Week
- </button>
+ <div className="wrap">
+ <div className="button-container">
+ <button onClick={handlePrevWeek} disabled={currentWeekIndex === 0}>
+ Prev Week
+ </button>
+ <button
+ onClick={handleNextWeek}
+ disabled={currentWeekIndex === weeks.length - 1}
+ >
+ Next Week
+ </button>
+ </div>
<table className="calendar-container">
<thead>
<tr>
diff --git a/react-whenMeet/src/components/ResultEndForm.jsx b/react-whenMeet/src/components/ResultEndForm.jsx
index 466bda4..87e1c92 100644
--- a/react-whenMeet/src/components/ResultEndForm.jsx
+++ b/react-whenMeet/src/components/ResultEndForm.jsx
@@ -67,6 +67,15 @@ export default function ResultEndForm() {
},
],
},
+ {
+ name: "test6",
+ availableSchedules: [
+ {
+ availableDate: "2023-12-22",
+ availableTimes: [38],
+ },
+ ],
+ },
],
};
const [title, setTitle] = useState(meetingData.title);
@@ -84,14 +93,19 @@ export default function ResultEndForm() {
return (
<div
- style={{ textAlign: "center", display: "flex", flexDirection: "column" }}
+ style={{
+ textAlign: "center",
+ display: "flex",
+ flexDirection: "column",
+ alignItems: "center",
+ }}
>
<span className="row1">
<h1 className="title-box">{title}</h1>
<p>투표가 종료되었습니다.</p>
<p style={{ color: "blue" }}>약속 시간은 {resultTime}입니다.</p>
<div>
- <h2>총 참여한 인원수</h2>
+ <h2 style={{ flex: "none" }}>총 참여한 인원수</h2>
<p>{completedPeopleNum}</p>
<form className="form-container">
{possibleDates.map((date, index) => (
@@ -117,17 +131,16 @@ export default function ResultEndForm() {
랜덤으로 약속 시간 확정하기
</button>
</div>
- <span style={{ display: "flex", flexDirection: "row" }}>
- <div className="calander-container">
- <CalendarWeek
- participants={meetingData.participants}
- startDate={meetingData.startDate}
- endDate={meetingData.endDate}
- maxParticipants={meetingData.maxParticipants}
- hoveredInfo={hoveredInfo}
- setHoveredInfo={setHoveredInfo}
- />
- </div>
+ <div style={{ display: "flex", flexDirection: "row" }}>
+ <CalendarWeek
+ participants={meetingData.participants}
+ startDate={meetingData.startDate}
+ endDate={meetingData.endDate}
+ maxParticipants={meetingData.maxParticipants}
+ hoveredInfo={hoveredInfo}
+ setHoveredInfo={setHoveredInfo}
+ />
+
<div className="row2">
<span className="possible">
{hoveredInfo && (
@@ -144,7 +157,7 @@ export default function ResultEndForm() {
)}
</span>
</div>
- </span>
+ </div>
</span>
</div>
);
diff --git a/react-whenMeet/src/routes/ResultEnd.jsx b/react-whenMeet/src/routes/ResultEnd.jsx
index f7c0b48..ad510ea 100644
--- a/react-whenMeet/src/routes/ResultEnd.jsx
+++ b/react-whenMeet/src/routes/ResultEnd.jsx
@@ -3,11 +3,9 @@ import "../styles/HomeMake.css";
function ResultEnd() {
return (
- <div
- style={{ display: "flex", alignItems: "center", flexDirection: "column" }}
- >
+ <>
<ResultEndForm />
- </div>
+ </>
);
}
diff --git a/react-whenMeet/src/styles/CalendarWeek.css b/react-whenMeet/src/styles/CalendarWeek.css
index 12876b8..8a8bc6b 100644
--- a/react-whenMeet/src/styles/CalendarWeek.css
+++ b/react-whenMeet/src/styles/CalendarWeek.css
@@ -1,7 +1,16 @@
.calendar-container {
- margin-top: 20px;;
+ margin-top: 20px;
+ width: 100%;
+}
+.button-container {
+ display: flex;
+ justify-content: space-between;
+ width: 65%;
}
+.wrap {
+ width: 70%;
+}
table {
width: 100%;
border-collapse: collapse;
diff --git a/react-whenMeet/src/styles/ResultEnd.css b/react-whenMeet/src/styles/ResultEnd.css
index f25c598..5a60360 100644
--- a/react-whenMeet/src/styles/ResultEnd.css
+++ b/react-whenMeet/src/styles/ResultEnd.css
@@ -1,3 +1,8 @@
+.title-box {
+ width: 30%;
+ margin: 0 auto;
+ text-align: center;
+}
.form-container {
width: 100%;
margin-bottom: 20px;
@@ -9,9 +14,8 @@
padding: 10px;
}
.possible {
- margin-left: 0px;
position: fixed;
- width: 20em;
+ width: 20%;
border-width: 1px;
border-color: black;
border-style: solid;
@@ -21,3 +25,7 @@
display: flex;
justify-content: center;
}
+
+.calendar-container {
+ width: 65%;
+}
diff --git a/react-whenMeet/src/styles/ResultMake.css b/react-whenMeet/src/styles/ResultMake.css
index 154467e..78b91cd 100644
--- a/react-whenMeet/src/styles/ResultMake.css
+++ b/react-whenMeet/src/styles/ResultMake.css
@@ -1,3 +1,8 @@
+.title-box {
+ width: 30%;
+ margin: 0 auto;
+ text-align: center;
+}
.column-container {
display: flex;
flex-direction: column;
@@ -12,10 +17,6 @@
flex-direction: row;
}
-.calendar-container {
- margin-right: 30px;
-}
-
.mostTime {
background-color: white;
position: fixed;
--
GitLab