[EDIT] CSS

react-whenMeet/package.json

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

react-whenMeet/src/components/CalendarWeek.jsx

@@ -19,17 +19,20 @@ const CalendarWeek = ({
   const [schedule, setSchedule] = useState({});
 
   const parseTime = (time) => {
-    // 자정("00:00:00")을 확인하여 48을 반환
     if (time === "00:00:00") {
-      return 48;
+      return 0;
     }
 
     const [hours, minutes] = time.split(":").map(Number);
     return hours * 2 + (minutes >= 30 ? 1 : 0); // 30분 단위로 계산
   };
 
-  const startTimeSlot = parseTime(availableVotingStartTime);
-  const endTimeSlot = parseTime(availableVotingEndTime);
+  let startTimeSlot = parseTime(availableVotingStartTime);
+  let endTimeSlot = parseTime(availableVotingEndTime);
+
+  if (availableVotingEndTime === "00:00:00") {
+    endTimeSlot = 47;
+  }
 
   const handlePrevWeek = () => {
     setCurrentWeekIndex(Math.max(0, currentWeekIndex - 1));

react-whenMeet/src/components/HomeMakeForm.js

@@ -18,14 +18,14 @@ function HomeMakeForm() {
 
     const handleSubmit = (event) => {
         event.preventDefault();
-        navigate("/MeetingInfo", {state : {title, password}});
+        navigate("/MeetingInfo", { state: { title, password } });
     };
     const isFormValid = title.trim() !== "" && password.trim() !== "";
 
     return (
         <form onSubmit={handleSubmit}>
-            <div className="system-name">언제모임?</div>
             <div className="center-container">
+                <div className="system-name">언제모임?</div>
                 <h1>원하는 약속을 만들어보세요</h1>
                 <Input
                     type="text"

react-whenMeet/src/components/HomeParticipateForm.js

@@ -187,7 +187,7 @@ function HomeParticipateForm() {
     <form>
       <div>
         <h1>투표에 참여하기</h1>
-        <h2> 아이디가 없다면 아래 양식에 맞춰 작성 후 참여하기를 누르세요</h2>
+        <h2 className="h2"> 아이디가 없다면 아래 양식에 맞춰 작성 후 참여하기를 누르세요</h2>
         <Input
           type="text"
           value={name}

react-whenMeet/src/components/MeetingInfoForm.js

@@ -90,7 +90,7 @@ function MeetingInfoForm() {
   };
   return (
     <form onSubmit={handleSubmit}>
-      <div className="center-container">
+      <div className="center-container2">
         <h1>약속 일정 만들기</h1>
         <div className="purpose">
           <h2 className="not-enter">약속 목적 </h2>

react-whenMeet/src/routes/MeetingInfo.js

@@ -4,7 +4,7 @@ import '../styles/MeetingInfo.css'
 function MeetingInfo() {
     
     return (
-        <div className="center-container">
+        <div>
             <MeetingInfoForm />
         </div>
     );

react-whenMeet/src/styles/HomeMake.css

@@ -27,9 +27,10 @@ h1 {
 
 .center-container {
   display: flex;
-  flex-direction: column; /* 세로 방향으로 정렬 */
+  flex-direction: column;
   align-items: center;
-  height: 100vh;
+  justify-content: center; /* Add this line to center vertically */
+  min-height: 100vh;
 }
 
 input {

react-whenMeet/src/styles/HomeParticipateForm.css

-h2 {
+h2.h2{
     font-size: 12px;
     font-weight: lighter;
 }
\ No newline at end of file

react-whenMeet/src/styles/MeetingInfo.css

@@ -9,7 +9,7 @@ body {
   padding: 0px;
 }
 
-.center-container {
+.center-container2 {
   display: flex;
   flex-direction: column; /* 세로 방향으로 정렬 */
   align-items: center;

react-whenMeet/src/styles/ResultEnd.css

@@ -44,12 +44,22 @@
   align-items: center;
 }
 @media screen and (max-width: 768px) {
+  .flex-bottom-container {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+
+    bottom: 0;
+    left: 0;
+  }
+
+  .mostTime,
   .possible {
-    position: static;
+    position: relative;
     width: 40%;
     margin: 200px 20px;
+    height: 40%;
   }
-
   .flex-row {
     flex-direction: column;
     width: 100%;

react-whenMeet/src/styles/ResultMake.css

@@ -55,6 +55,10 @@
 }
 
 @media screen and (max-width: 768px) {
+  .mostTime {
+    position: relative;
+    top: 200px;
+  }
   .flex-bottom-container {
     display: flex;
     justify-content: space-between;
@@ -64,11 +68,11 @@
     left: 0;
   }
 
-  .mostTime,
   .possible {
     position: static;
     width: 40%;
     margin: 200px 20px;
+    height: 40%;
   }
   .flex-row {
     flex-direction: column;