diff --git a/react-whenMeet/src/components/CalendarWeek.jsx b/react-whenMeet/src/components/CalendarWeek.jsx
index bb00895ab80563b1fe6deb5f5a75f76b67e6095c..6ee4afdc4afa5ba5d4e0b2fbced1d00e3c5332f7 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 87e1c92e79fce637ee2ff2099268098bcf8374e5..daf4a17427b2115e9e3289f97570baaab85c4b5d 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 6d9ea07d117b719f401838f4f11653112bfc5919..5d6410363a1b9247065ed299142f9b8f556ed380 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 8a8bc6b072c3460d60b81413b7a6799d529e3a68..363c602f617b9b2fc00455b31be697fc9f1b7a23 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 5c02ee6f256eb43e39f6089a99e492443bda7279..026405fce42d07bd65a5c414e21f3f328e7900f0 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 5a60360440413bd733e9115a9a1c8689d75a57b5..913b4b6ef3ae5c2ef2b8e66ae5c18623d0186d99 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 78b91cd8a51f6ad6b08c55eb33bfe0039c3132ce..d300a1f756267f00749e9695b8393b6ea301fa3a 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;
}