[EDIT] CSS

react-whenMeet/package.json

@@ -19,7 +19,7 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "export PORT=80 && react-scripts start",
+    "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

react-whenMeet/src/components/Button.js

-
-function Button({type,text,onClick,disabled}){
-    return(
-        <button
-        className={disabled ? 'disabled' : 'active'}
-        type = {type}
-        onClick={onClick}
-        disabled = {disabled}
-        >
-            {text}
-        </button>
-    );
+function Button({ type, text, onClick, disabled }) {
+  return (
+    <button
+      className={disabled ? "disabled" : "active"}
+      type={type}
+      onClick={onClick}
+      disabled={disabled}
+    >
+      {text}
+    </button>
+  );
 }
 
-
-export default Button;
\ No newline at end of file
+export default Button;

react-whenMeet/src/routes/UserTimeInfo.js

@@ -197,8 +197,20 @@ function UserTimeInfo() {
     <div className="center-container">
       <div className="calendarForm">
         <div className="cc1">
-          <Button type="button" text="가능한 시간" onClick={handleState1} />
-          <Button type="button" text="불가능한 시간" onClick={handleState2} />
+          <button
+            type="button"
+            className={"now" + !state}
+            onClick={handleState1}
+          >
+            가능한 시간
+          </button>
+          <button
+            type="button"
+            className={"now" + state}
+            onClick={handleState2}
+          >
+            불가능한 시간
+          </button>
         </div>
         <CalendarWeek2
           state={state}

react-whenMeet/src/styles/Calendar.css

-.calendar-month .calendar {
-  min-height: 430px;
-}
-
 .header {
   display: flex;
   flex-direction: column;

react-whenMeet/src/styles/MeetingInfo.css

@@ -4,6 +4,12 @@ body {
   padding: 0;
 }
 
+.calendar-month .calendar {
+  border: 0px;
+  padding: 0px;
+  min-height: 26em;
+}
+
 .center-container {
   display: flex;
   flex-direction: column; /* 세로 방향으로 정렬 */
@@ -52,7 +58,7 @@ input {
 }
 
 button {
-  width: 60%;
+  width: 100%;
   padding: 10px;
   margin-top: 16px;
   background-color: #3498db;
@@ -109,13 +115,19 @@ button:hover {
 }
 
 .calendarTable .dragging {
-  background-color: red;
+  background-color: skyblue;
 }
 
 .calendarTable .noDate {
   background-color: gray;
 }
 
+.calendarTable td.dragging {
+  text-align: center; /* 텍스트를 가운데 정렬 */
+  vertical-align: middle; /* 텍스트를 수직 가운데 정렬 */
+  background-color: skyblue; /* 배경색 지정 */
+}
+
 .title-box {
   text-align: center;
   border-width: 1px;

react-whenMeet/src/styles/UserTimeInfo.css

@@ -9,6 +9,18 @@
 }
 .calendarForm .calendar {
   height: auto;
+  border: 0px;
+  padding: 0px;
+}
+
+.calendarForm button.nowtrue {
+  background-color: gray;
+}
+
+.calendarTable td.dragging {
+  text-align: center; /* 텍스트를 가운데 정렬 */
+  vertical-align: middle; /* 텍스트를 수직 가운데 정렬 */
+  background-color: skyblue; /* 배경색 지정 */
 }
 
 .cc1 {
@@ -40,13 +52,14 @@
   width: 30%;
 }
 
-@media (max-width: 768px) {
-  form {
+/* @media (max-width: 768px) {
+  .calendarForm {
     width: 80%;
   }
 }
+
 @media (max-width: 576px) {
-  form {
+  .calendarForm {
     width: 90%;
   }
-}
+} */