diff --git a/react-whenMeet/package.json b/react-whenMeet/package.json
index 600f87f5fb7656835882ba780874569b60d46f25..3f1a4cc072d1f88d37b8a85ed838b858e5d12ecb 100644
--- a/react-whenMeet/package.json
+++ b/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"
diff --git a/react-whenMeet/src/components/CalendarWeek.jsx b/react-whenMeet/src/components/CalendarWeek.jsx
index 305a9b2b97c72c73481424943c3c6271fcd572d8..7d48fc432cda15aea1f6b6b15c33e49dfaba4bee 100644
--- a/react-whenMeet/src/components/CalendarWeek.jsx
+++ b/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));
diff --git a/react-whenMeet/src/components/HomeMakeForm.js b/react-whenMeet/src/components/HomeMakeForm.js
index 6656322d2ff8e869789a6f4ec8905b3c26f1c1d5..42755ae2679593dbebc1ef9c3f335962e056125c 100644
--- a/react-whenMeet/src/components/HomeMakeForm.js
+++ b/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"
diff --git a/react-whenMeet/src/components/HomeParticipateForm.js b/react-whenMeet/src/components/HomeParticipateForm.js
index c3470bf160e993e84feed0c3bb7f7bc83202a709..6a3cbbdf3b3e2f12a90417f9e6e056e963e60c87 100644
--- a/react-whenMeet/src/components/HomeParticipateForm.js
+++ b/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}
diff --git a/react-whenMeet/src/components/MeetingInfoForm.js b/react-whenMeet/src/components/MeetingInfoForm.js
index 8b98be7e1d6725f49413cb184e4e39fc89761246..34cfe383dbd9cccd8c707941f25c1f6d8a257228 100644
--- a/react-whenMeet/src/components/MeetingInfoForm.js
+++ b/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>
diff --git a/react-whenMeet/src/routes/MeetingInfo.js b/react-whenMeet/src/routes/MeetingInfo.js
index af7e843aa8a1e315745c26ae4329f43aff1c6815..1c8031938fa5087b449dbfb24746d36aeb0218f8 100644
--- a/react-whenMeet/src/routes/MeetingInfo.js
+++ b/react-whenMeet/src/routes/MeetingInfo.js
@@ -4,7 +4,7 @@ import '../styles/MeetingInfo.css'
function MeetingInfo() {
return (
- <div className="center-container">
+ <div>
<MeetingInfoForm />
</div>
);
diff --git a/react-whenMeet/src/styles/HomeMake.css b/react-whenMeet/src/styles/HomeMake.css
index 91c9efc5159871c91872320fc5c18672f8f17761..d2114b50981585d9c3bf3443e535d448a5ad8179 100644
--- a/react-whenMeet/src/styles/HomeMake.css
+++ b/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 {
diff --git a/react-whenMeet/src/styles/HomeParticipateForm.css b/react-whenMeet/src/styles/HomeParticipateForm.css
index 3bb970982a5e5caaa32984d524b92dcdb0fdaa72..e476dc0435d214074711a880c9f1d8271dd93723 100644
--- a/react-whenMeet/src/styles/HomeParticipateForm.css
+++ b/react-whenMeet/src/styles/HomeParticipateForm.css
@@ -1,4 +1,4 @@
-h2 {
+h2.h2{
font-size: 12px;
font-weight: lighter;
}
\ No newline at end of file
diff --git a/react-whenMeet/src/styles/MeetingInfo.css b/react-whenMeet/src/styles/MeetingInfo.css
index 0202e5dc6b6033c1273e48c72f296691d2965931..59ff1c19da24a70abcf2f6b562228c3df4cdd531 100644
--- a/react-whenMeet/src/styles/MeetingInfo.css
+++ b/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;
diff --git a/react-whenMeet/src/styles/ResultEnd.css b/react-whenMeet/src/styles/ResultEnd.css
index 02692e2138f8850c3fd15639fdfe48288ac0e20c..b2e2c2e10511b90321913ce0540cdaec1f3cfcf5 100644
--- a/react-whenMeet/src/styles/ResultEnd.css
+++ b/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%;
diff --git a/react-whenMeet/src/styles/ResultMake.css b/react-whenMeet/src/styles/ResultMake.css
index 482917bc63f5ac5ec045244ab796af8d9b21736f..fcc270ae6f6cfb0a3202ab723040a79850fd7e6c 100644
--- a/react-whenMeet/src/styles/ResultMake.css
+++ b/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;