[EDIT] CSS

react-whenMeet/src/components/CalendarWeek.jsx

@@ -113,7 +113,7 @@ const CalendarWeek = ({
   };
 
   const weekDates = weeks[currentWeekIndex] || [];
-
+  console.log(endTimeSlot, startTimeSlot);
   return (
     <div className="calendarWeekContainer wrap">
       <div className="button-container">

react-whenMeet/src/components/CalendarWeek2.jsx

@@ -74,7 +74,7 @@ function CaculateWeek({
   const weekArr = [];
   const selectArr = [];
 
-  weekArr.push(<td></td>);
+  weekArr.push(<td className="tt"></td>);
   for (let i = startTime; i < endTime; i++) {
     const forSelect = [];
     const minute = i * 30;
@@ -135,7 +135,7 @@ function CaculateWeek({
 
     selectArr.push(
       <tr key={i}>
-        <td>{time}</td>
+        <td className="tt">{time}</td>
         {forSelect}
       </tr>
     );
@@ -227,7 +227,7 @@ function CalendarWeek2({
   return (
     <div className="calendar">
       <div className="header">
-        <h2>
+        <h2 className="UTH2">
           <button onClick={prevWeek}>prev</button>
           {nowYear}년 {nowMonth}월 {nowWeek}주차
           <button onClick={nextWeek}>next</button>

react-whenMeet/src/components/MakeDay2.jsx

@@ -9,7 +9,7 @@ export default function MakeDay2() {
   return (
     <thead>
       <tr>
-        <th className="table_head"></th>
+        <th className="table_head tt"></th>
         {days}
       </tr>
     </thead>

react-whenMeet/src/routes/UserTimeInfo.js

@@ -194,7 +194,8 @@ function UserTimeInfo() {
   };
 
   return (
-    <div className="center-container">
+    <div className="what">
+      <div className="center-container3">
         <div className="calendarForm">
           <div className="cc1">
             <button
@@ -229,6 +230,7 @@ function UserTimeInfo() {
           </div>
         </div>
       </div>
+    </div>
   );
 }
 

react-whenMeet/src/styles/Global.css

 * {
-    font-family: 'Noto Sans KR', sans-serif;
+  font-family: "Noto Sans KR", sans-serif;
 }
 
 /* Media queries for responsiveness */

react-whenMeet/src/styles/UserTimeInfo.css

+.center-container3 {
+  display: flex;
+  flex-direction: column; /* 세로 방향으로 정렬 */
+  align-items: center;
+  height: 100vh;
+  margin: auto;
+}
+
+.what {
+  width: 30%;
+  padding: 20px;
+  /* background-color: #00adb5;s */
+  text-align: center;
+  margin: auto;
+}
+
+.tt {
+  font-size: 10px;
+}
+
+h2.UTH2 {
+  font-size: 16px;
+}
+
+.calendarTable table {
+  width: 100%;
+  border-collapse: collapse;
+  text-align: center;
+  margin-bottom: 4%;
+}
+
+.calendarTable td {
+  border: 1px solid #ddd;
+  padding: 10px;
+}
+
+.calendarTable table tbody td.tt {
+  text-align: center;
+}
+
+.calendarTable th {
+  background-color: #f4f4f4;
+}
+
+.calendarTable td {
+  background-color: #f4f4f4;
+  cursor: pointer;
+}
+
 .calendarForm {
   display: flex;
   flex-direction: column;
   padding: 20px;
   text-align: center;
-  align-items: stretch;
-  width: auto;
-  margin: 0 auto; /* 가운데 정렬을 위한 추가 */
 }
 .calendarForm .calendar {
   height: auto;
@@ -23,6 +69,13 @@
   background-color: skyblue; /* 배경색 지정 */
 }
 
+.header button:first-child {
+  margin-right: 10%;
+}
+.header button:last-child {
+  margin-left: 10%;
+}
+
 .cc1 {
   display: flex;
   gap: 30px;