[EDIT] CSS수정

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>

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

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

react-whenMeet/src/styles/CalendarWeek.css

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

react-whenMeet/src/styles/ResultEnd.css

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

react-whenMeet/src/styles/ResultMake.css

+.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;