From 40ee627c4c4350d23d502e9786935cc6cb0fc802 Mon Sep 17 00:00:00 2001
From: jhkang0516 <jhkang0516@ajou.ac.kr>
Date: Wed, 22 Nov 2023 13:54:02 +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 | 10 ----
.../src/components/ResultEndForm.jsx | 36 +++++++-------
.../src/components/ResultMakeForm.js | 47 ++++++++++---------
react-whenMeet/src/styles/CalendarWeek.css | 10 ++--
react-whenMeet/src/styles/HomeMake.css | 23 +--------
react-whenMeet/src/styles/ResultEnd.css | 15 +++---
react-whenMeet/src/styles/ResultMake.css | 27 +++--------
7 files changed, 66 insertions(+), 102 deletions(-)
diff --git a/react-whenMeet/src/components/CalendarWeek.jsx b/react-whenMeet/src/components/CalendarWeek.jsx
index bb00895..6ee4afd 100644
--- a/react-whenMeet/src/components/CalendarWeek.jsx
+++ b/react-whenMeet/src/components/CalendarWeek.jsx
@@ -161,16 +161,6 @@ const CalendarWeek = ({
})}
</tbody>
</table>
- {hoveredInfo && (
- <div className="possibleMan" style={{ textAlign: "center" }}>
- <strong>가능한 사람:</strong>
- <ul>
- {hoveredInfo.participants.map((name) => (
- <li key={name}>{name}</li>
- ))}
- </ul>
- </div>
- )}
</div>
);
};
diff --git a/react-whenMeet/src/components/ResultEndForm.jsx b/react-whenMeet/src/components/ResultEndForm.jsx
index 87e1c92..daf4a17 100644
--- a/react-whenMeet/src/components/ResultEndForm.jsx
+++ b/react-whenMeet/src/components/ResultEndForm.jsx
@@ -106,7 +106,7 @@ export default function ResultEndForm() {
<p style={{ color: "blue" }}>약속 시간은 {resultTime}입니다.</p>
<div>
<h2 style={{ flex: "none" }}>총 참여한 인원수</h2>
- <p>{completedPeopleNum}</p>
+ <h3>{completedPeopleNum}</h3>
<form className="form-container">
{possibleDates.map((date, index) => (
<label key={index}>
@@ -131,7 +131,7 @@ export default function ResultEndForm() {
랜덤으로 약속 시간 확정하기
</button>
</div>
- <div style={{ display: "flex", flexDirection: "row" }}>
+ <span className="flex-row" style={{ width: "100%" }}>
<CalendarWeek
participants={meetingData.participants}
startDate={meetingData.startDate}
@@ -140,24 +140,22 @@ export default function ResultEndForm() {
hoveredInfo={hoveredInfo}
setHoveredInfo={setHoveredInfo}
/>
+ </span>
- <div className="row2">
- <span className="possible">
- {hoveredInfo && (
- <div style={{ textAlign: "center" }}>
- <strong>
- {hoveredInfo.date} {hoveredInfo.time}에 가능한 사람:
- </strong>
- <ul>
- {hoveredInfo.participants.map((name) => (
- <li key={name}>{name}</li>
- ))}
- </ul>
- </div>
- )}
- </span>
- </div>
- </div>
+ <span className="possible">
+ {hoveredInfo && (
+ <div style={{ textAlign: "center" }}>
+ <strong>
+ {hoveredInfo.date} {hoveredInfo.time}에 가능한 사람:
+ </strong>
+ <ul>
+ {hoveredInfo.participants.map((name) => (
+ <li key={name}>{name}</li>
+ ))}
+ </ul>
+ </div>
+ )}
+ </span>
</span>
</div>
);
diff --git a/react-whenMeet/src/components/ResultMakeForm.js b/react-whenMeet/src/components/ResultMakeForm.js
index 6d9ea07..5d64103 100644
--- a/react-whenMeet/src/components/ResultMakeForm.js
+++ b/react-whenMeet/src/components/ResultMakeForm.js
@@ -115,7 +115,7 @@ function ResultMakeForm() {
updateTimer();
const timerId = setInterval(updateTimer, 1000);
- return () => clearInterval(timerId); // 컴포넌트가 언마운트될 때 인터벌을 정리합니다.
+ return () => clearInterval(timerId);
}, [meetingData.voteExpiresAt]);
const handleEdit = () => {
@@ -151,28 +151,33 @@ function ResultMakeForm() {
/>
</div>
- <div className="row-container">
- <span className="mostTime">
+ <span className="mostTime">
+ <div style={{ textAlign: "center" }}>
+ 가장 많은 사람들이 가능한 일정
+ </div>
+ <ol>//일정 5개 나열</ol>
+ </span>
+ <span className="possible">
+ {!hoveredInfo && (
+ <div>
+ <strong>가능한 사람들이 표시됩니다.</strong>
+ <p>마우스를 달력 위에 올려보세요!</p>
+ </div>
+ )}
+
+ {hoveredInfo && (
<div style={{ textAlign: "center" }}>
- 가장 많은 사람들이 가능한 일정
+ <strong>
+ {hoveredInfo.date} {hoveredInfo.time}에 가능한 사람:
+ </strong>
+ <ul>
+ {hoveredInfo.participants.map((name) => (
+ <li key={name}>{name}</li>
+ ))}
+ </ul>
</div>
- <ol>//일정 5개 나열</ol>
- </span>
- <span className="possibleMan">
- {hoveredInfo && (
- <div style={{ textAlign: "center" }}>
- <strong>
- {hoveredInfo.date} {hoveredInfo.time}에 가능한 사람:
- </strong>
- <ul>
- {hoveredInfo.participants.map((name) => (
- <li key={name}>{name}</li>
- ))}
- </ul>
- </div>
- )}
- </span>
- </div>
+ )}
+ </span>
</span>
</>
);
diff --git a/react-whenMeet/src/styles/CalendarWeek.css b/react-whenMeet/src/styles/CalendarWeek.css
index 8a8bc6b..363c602 100644
--- a/react-whenMeet/src/styles/CalendarWeek.css
+++ b/react-whenMeet/src/styles/CalendarWeek.css
@@ -5,11 +5,15 @@
.button-container {
display: flex;
justify-content: space-between;
- width: 65%;
}
-
+.button-container button:first-child {
+ margin-right: 20px;
+}
+.button-container button:last-child {
+ margin-left: 20px;
+}
.wrap {
- width: 70%;
+ width: 600px;
}
table {
width: 100%;
diff --git a/react-whenMeet/src/styles/HomeMake.css b/react-whenMeet/src/styles/HomeMake.css
index 5c02ee6..026405f 100644
--- a/react-whenMeet/src/styles/HomeMake.css
+++ b/react-whenMeet/src/styles/HomeMake.css
@@ -88,29 +88,10 @@ button:hover {
color: black; /* 검정색으로 글자색 지정 */
}
-.calendarTable .dragging{
+.calendarTable .dragging {
background-color: red;
}
-.mostTime {
- position: absolute;
- margin-top: 200px;
- margin-left: 20px;
- width: 20em;
- border-width: 1px;
- border-color: black;
- border-style: solid;
- padding: 20px;
-}
-.possibleMan {
- position: absolute;
- margin-left: 20px;
- margin-top: 800px;
- width: 20em;
- border-width: 1px;
- border-color: black;
- border-style: solid;
- padding: 20px;
-}
+
.title-box {
text-align: center;
border-width: 1px;
diff --git a/react-whenMeet/src/styles/ResultEnd.css b/react-whenMeet/src/styles/ResultEnd.css
index 5a60360..913b4b6 100644
--- a/react-whenMeet/src/styles/ResultEnd.css
+++ b/react-whenMeet/src/styles/ResultEnd.css
@@ -13,19 +13,20 @@
border: 1px solid;
padding: 10px;
}
+
.possible {
position: fixed;
+ right: 0; /* 화면의 오른쪽 끝에 고정 */
+ top: 50%; /* 화면의 상단으로부터 50%의 위치에 고정 */
+ transform: translateY(
+ -50%
+ ); /* 상단 50% 위치에서 자기 자신의 높이의 절반을 위로 이동 */
width: 20%;
- border-width: 1px;
- border-color: black;
- border-style: solid;
+ border: 1px solid black;
padding: 20px;
}
+
.row {
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 78b91cd..d300a1f 100644
--- a/react-whenMeet/src/styles/ResultMake.css
+++ b/react-whenMeet/src/styles/ResultMake.css
@@ -3,38 +3,23 @@
margin: 0 auto;
text-align: center;
}
+
.column-container {
display: flex;
flex-direction: column;
}
-.row-container {
- display: flex;
-}
-
.flex-row {
display: flex;
flex-direction: row;
}
.mostTime {
- background-color: white;
- position: fixed;
- margin-left: 20px;
- width: 20em;
- border-width: 1px;
- border-color: black;
- border-style: solid;
- padding: 20px;
-}
-.possibleMan {
- background-color: white;
position: fixed;
- margin-left: 20px;
- margin-top: 200px;
- width: 20em;
- border-width: 1px;
- border-color: black;
- border-style: solid;
+ right: 0;
+ top: 30%;
+ transform: translateY(-50%);
+ width: 20%;
+ border: 1px solid black;
padding: 20px;
}
--
GitLab