[EDIT] CSS수정

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>
   );
 };

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>
   );

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>
     </>
   );

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%;

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;

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%;
-}

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;
 }