react-whenMeet/src/components/CalendarWeek.jsx

@@ -116,7 +116,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,38 +194,40 @@ function UserTimeInfo() {
   };
 
   return (
-    <div className="center-container2">
-      <div className="calendarForm">
-        <div className="cc1">
-          <button
-            type="button"
-            className={"now" + !state}
-            onClick={handleState1}
-          >
-            가능한 시간
-          </button>
-          <button
-            type="button"
-            className={"now" + state}
-            onClick={handleState2}
-          >
-            불가능한 시간
-          </button>
-        </div>
-        <CalendarWeek2
-          state={state}
-          startDate={startDate}
-          endDate={endDate}
-          startTime={startTime}
-          endTime={endTime}
-          today={today}
-          availableSchedules={availableSchedules}
-          availableTimes={availableTimes}
-          setAvailableTimes={setAvailableTimes}
-          isContain={isContain}
-        />
-        <div className="cc">
-          <Button type="submit" text="제출하기" onClick={handleAlert} />
+    <div className="what">
+      <div className="center-container3">
+        <div className="calendarForm">
+          <div className="cc1">
+            <button
+              type="button"
+              className={"now" + !state}
+              onClick={handleState1}
+            >
+              가능한 시간
+            </button>
+            <button
+              type="button"
+              className={"now" + state}
+              onClick={handleState2}
+            >
+              불가능한 시간
+            </button>
+          </div>
+          <CalendarWeek2
+            state={state}
+            startDate={startDate}
+            endDate={endDate}
+            startTime={startTime}
+            endTime={endTime}
+            today={today}
+            availableSchedules={availableSchedules}
+            availableTimes={availableTimes}
+            setAvailableTimes={setAvailableTimes}
+            isContain={isContain}
+          />
+          <div className="cc">
+            <Button type="submit" text="제출하기" onClick={handleAlert} />
+          </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 */
 @media (max-width: 768px) {
-    form {
-        width: 80%;
-    }
+  form {
+    width: 80%;
+  }
 }
 
 @media (max-width: 576px) {
-    form {
-        width: 90%;
-    }
+  form {
+    width: 90%;
+  }
 }
 @media (max-width: 376px) {
-    form {
-      width: 77%;
-    }
-  }
\ No newline at end of file
+  form {
+    width: 77%;
+  }
+}

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