[EDIT] 달력 있는 페이지(MeetingInfoForm, UserTimeInfo) CSS 수정

react-whenMeet/src/components/Calendar.js

-import React from "react";
-import { useState } from "react";
-import Input from "./Input";
 import CalendarMonth from "./CalendarMonth";
-// import CalendarWeek2 from './CalendarWeek2';
+import "../styles/Calendar.css";
 
 function Calendar({ onChange, usingDate, setUsingDate }) {
-  return (
-    <div>
-      <CalendarMonth usingDate={usingDate} setUsingDate={setUsingDate} />
-    </div>
-  );
+  return <CalendarMonth usingDate={usingDate} setUsingDate={setUsingDate} />;
 }
 
 export default Calendar;

react-whenMeet/src/components/CalendarWeek2.jsx

@@ -233,7 +233,11 @@ function CalendarWeek2({
           <button onClick={nextWeek}>next</button>
         </h2>
       </div>
-      {state ? <p>가능한 시간</p> : <p>불가능한 시간</p>}
+      {state ? (
+        <p>가능한 시간을 선택합니다.</p>
+      ) : (
+        <p>불가능한 시간을 선택합니다.</p>
+      )}
       <div className="calendarTable">
         <table>
           <MakeDay2 />

react-whenMeet/src/components/MeetingInfoForm.js

@@ -3,6 +3,9 @@ import Input from "../components/Input";
 import Button from "../components/Button";
 import Calendar from "../components/Calendar";
 import TimeInput from "./TimeInput";
+
+import "../styles/MeetingInfo.css";
+
 import { useNavigate, useLocation } from "react-router-dom";
 import axios from "axios";
 

react-whenMeet/src/routes/UserTimeInfo.js

@@ -195,11 +195,11 @@ function UserTimeInfo() {
 
   return (
     <div className="center-container">
-      <div className="cc">
-        <Button type="button" text="가능한 시간" onClick={handleState1} />
-        <Button type="button" text="불가능한 시간" onClick={handleState2} />
-      </div>
-      <div className="cld">
+      <div className="calendarForm">
+        <div className="cc1">
+          <Button type="button" text="가능한 시간" onClick={handleState1} />
+          <Button type="button" text="불가능한 시간" onClick={handleState2} />
+        </div>
         <CalendarWeek2
           state={state}
           startDate={startDate}
@@ -212,9 +212,9 @@ function UserTimeInfo() {
           setAvailableTimes={setAvailableTimes}
           isContain={isContain}
         />
-      </div>
-      <div className="cc">
-        <Button type="submit" text="시작하기" onClick={handleAlert} />
+        <div className="cc">
+          <Button type="submit" text="제출하기" onClick={handleAlert} />
+        </div>
       </div>
     </div>
   );

react-whenMeet/src/styles/Calendar.css

-.calendar{
-    .day{
-        display: flex;
-    }
-    .cells{
-        display: flex;
-    }
-    .cella{
-        width: 14%;
-    }
-    .cellb{
-        width: 14%;
-    }
+.calendar-month .calendar {
+  min-height: 430px;
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  text-align: center; /* h4 태그를 가운데 정렬합니다. */
+  gap: 10px;
+}
+
+.header button {
+  width: 30%;
+  padding: 8px;
+  margin: auto;
 }
-table {
-    /* width: 100%; */
-    border: 1px solid #444444;
 
-    .ttt{
-        /* width: 100%;  */
-        height: 10px;
-        border: 1px solid #444444;
-    }
-    
-    .table_head{
-        margin-left: auto;
-        margin-right: auto;
-    }
-    
-}
\ No newline at end of file
+.header h4 {
+  width: 60%;
+  margin: 0; /* 기본 마진을 제거합니다. */
+  font-size: 16px; /* 원하는 크기로 조절합니다. */
+}
+
+table {
+  /* width: 100%; */
+  border: 1px solid #444444;
+}

react-whenMeet/src/styles/MeetingInfo.css

@@ -19,6 +19,7 @@ form {
 }
 
 h1 {
+  margin-top: 0;
   margin-bottom: 10px;
   color: #333333;
   font-size: 24px;
@@ -67,14 +68,35 @@ button:hover {
 
 .header {
   display: flex;
-  gap: 100px;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  text-align: center; /* h4 태그를 가운데 정렬합니다. */
+  gap: 10px;
+}
+
+.header button {
+  width: 70px;
+  padding: 8px;
+  margin: auto;
+}
+.header button:first-child {
+  margin-right: 20px;
+}
+.header button:last-child {
+  margin-left: 20px;
 }
 
 .purpose-selector {
   margin: 20px;
 }
 .calendarTable {
-  margin: 0 auto; /* 가운데 정렬을 위해 margin을 auto로 설정합니다. */
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  border-collapse: collapse;
+  text-align: center;
+  margin-bottom: 4%;
 }
 
 .calendarTable .cellb {

react-whenMeet/src/styles/UserTimeInfo.css

+.calendarForm {
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+  text-align: center;
+}
+.calendarForm .calendar {
+  height: auto;
+}
+
+.cc1 {
+  display: flex;
+  gap: 30px;
+  margin-bottom: 10px;
+  justify-content: center;
+}
+.cc {
+  display: flex;
+  gap: 30px;
+  margin-bottom: 10px;
+  justify-content: center;
+}
+
+.calendarTable {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  border-collapse: collapse;
+  text-align: center;
+  margin-bottom: 4%;
+}
+.cld .calendar .header h2 {
+  display: flex;
+}
+
+.cld .calendar .header h2 button {
+  width: 30%;
+}