diff --git a/react-whenMeet/package.json b/react-whenMeet/package.json
index 4173958719d5ee37867ca76e78478100d7137d51..dafb6ea7b18bff19ba9b489f9521e02e3c51cfff 100644
--- a/react-whenMeet/package.json
+++ b/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"
diff --git a/react-whenMeet/src/components/Button.js b/react-whenMeet/src/components/Button.js
index 8ddf720c4e8136001e6bd9c6d86d05af4b6be203..678fe8b637cb34ead9dedaf5dd51670eb44c7132 100644
--- a/react-whenMeet/src/components/Button.js
+++ b/react-whenMeet/src/components/Button.js
@@ -1,12 +1,16 @@
-function Button({type,text,onClick}){
+
+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
diff --git a/react-whenMeet/src/components/HomeMakeForm.js b/react-whenMeet/src/components/HomeMakeForm.js
index 315b9fd7c21cb9026b0d2fa4283d2fbe8fdd8cdc..6656322d2ff8e869789a6f4ec8905b3c26f1c1d5 100644
--- a/react-whenMeet/src/components/HomeMakeForm.js
+++ b/react-whenMeet/src/components/HomeMakeForm.js
@@ -2,7 +2,7 @@ import { useState } from "react";
import Input from "../components/Input";
import Button from "../components/Button";
import { useNavigate } from "react-router-dom";
-
+import "../styles/HomeMake.css";
function HomeMakeForm() {
const [title, setTitle] = useState("");
const [password, setPassword] = useState("");
@@ -18,36 +18,31 @@ function HomeMakeForm() {
const handleSubmit = (event) => {
event.preventDefault();
- if (title === "") {
- return alert("Title을 입력하세요");
- } else if (password === "") {
- return alert("Password를 입력하세요");
- } else {
- navigate("/MeetingInfo", {state : {title, password}});
- }
+ navigate("/MeetingInfo", {state : {title, password}});
};
+ const isFormValid = title.trim() !== "" && password.trim() !== "";
return (
<form onSubmit={handleSubmit}>
- <div>
- <h1>When we meet?</h1>
+ <div className="system-name">언제모임?</div>
+ <div className="center-container">
+ <h1>원하는 약속을 만들어보세요</h1>
<Input
type="text"
value={title}
onChange={onTitleChange}
- placeholder="약속 Title"
+ placeholder="약속 이름을 입력해주세요"
/>
- <br />
<Input
type="password"
value={password}
onChange={onPasswordChange}
- placeholder="관리용 Password"
+ placeholder="관리용 비밀번호를 입력해주세요"
/>
- <br />
<Button
type="submit"
text="시작하기"
+ disabled={!isFormValid}
/>
</div>
</form>
diff --git a/react-whenMeet/src/components/MeetingInfoForm.js b/react-whenMeet/src/components/MeetingInfoForm.js
index 992206e11addd71d27179f72f4f3a2a1ced65b71..9fe51d31cd48fa6257c590889b8716f6f5cbe1a4 100644
--- a/react-whenMeet/src/components/MeetingInfoForm.js
+++ b/react-whenMeet/src/components/MeetingInfoForm.js
@@ -101,8 +101,9 @@ function MeetingInfoForm() {
</select>
</label>
</div>
-
- <Calendar usingDate={usingDate} setUsingDate={setUsingDate} />
+ <div>
+ <Calendar usingDate={usingDate} setUsingDate={setUsingDate} />
+ </div>
<div className="timeStartEnd">
투표 가능 시간
<TimeInput onTimeChange={handleStartTimeChange} />
diff --git a/react-whenMeet/src/index.js b/react-whenMeet/src/index.js
index 821a0b9a384922afbe89c6e11dbeeac25bcdffe7..9fea0aea78a63a16256b4c7f6f0aa8ac18288aa4 100644
--- a/react-whenMeet/src/index.js
+++ b/react-whenMeet/src/index.js
@@ -1,8 +1,13 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
+import './styles/Global.css'
const root = ReactDOM.createRoot(document.getElementById('root'));
+const link = document.createElement('link');
+link.rel = 'stylesheet';
+link.href = 'https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap';
+document.head.appendChild(link);
root.render(
<App />
);
diff --git a/react-whenMeet/src/routes/HomeMake.js b/react-whenMeet/src/routes/HomeMake.js
index 0a7bd9157ed42cbafd8b975b86b61aa744648e46..6850cc1b430443f6f7785aae2cca8a7f0ed6260c 100644
--- a/react-whenMeet/src/routes/HomeMake.js
+++ b/react-whenMeet/src/routes/HomeMake.js
@@ -1,10 +1,9 @@
import HomeMakeForm from "../components/HomeMakeForm";
-import "../styles/HomeMake.css";
function HomeMake() {
return (
- <div className="center-container">
+ <div>
<HomeMakeForm />
</div>
);
diff --git a/react-whenMeet/src/routes/HomeParticipate.js b/react-whenMeet/src/routes/HomeParticipate.js
index 9f383a5a169d1b899073735825a801b80c035c57..2a4cf3a912b3a2fffdb13f70356d47be9f08507a 100644
--- a/react-whenMeet/src/routes/HomeParticipate.js
+++ b/react-whenMeet/src/routes/HomeParticipate.js
@@ -1,5 +1,4 @@
import HomeParticipateForm from "../components/HomeParticipateForm";
-import "../styles/HomeMake.css";
function HomeParticipate(){
diff --git a/react-whenMeet/src/routes/LinkPage.js b/react-whenMeet/src/routes/LinkPage.js
index 94a9ecd6717d44a6eb848070106d7f1f4511145a..0cea92b79f3097edd68ee28b2d34c586b2cd200e 100644
--- a/react-whenMeet/src/routes/LinkPage.js
+++ b/react-whenMeet/src/routes/LinkPage.js
@@ -1,5 +1,4 @@
import LinkPageForm from "../components/LinkPageForm";
-import "../styles/HomeMake.css"
function LinkPage() {
return (
diff --git a/react-whenMeet/src/routes/MeetingInfo.js b/react-whenMeet/src/routes/MeetingInfo.js
index 7f6aa35bde3220ebce3e4bb8360f23a865433e90..af7e843aa8a1e315745c26ae4329f43aff1c6815 100644
--- a/react-whenMeet/src/routes/MeetingInfo.js
+++ b/react-whenMeet/src/routes/MeetingInfo.js
@@ -1,5 +1,5 @@
import MeetingInfoForm from "../components/MeetingInfoForm";
-import "../styles/HomeMake.css"
+import '../styles/MeetingInfo.css'
function MeetingInfo() {
diff --git a/react-whenMeet/src/routes/ResultEnd.jsx b/react-whenMeet/src/routes/ResultEnd.jsx
index ad510eababc0ccc00d437693808e5bbc4ca18de3..044d549a63162d9c000a8e911fea4c54f7f48717 100644
--- a/react-whenMeet/src/routes/ResultEnd.jsx
+++ b/react-whenMeet/src/routes/ResultEnd.jsx
@@ -1,5 +1,4 @@
import ResultEndForm from "../components/ResultEndForm";
-import "../styles/HomeMake.css";
function ResultEnd() {
return (
diff --git a/react-whenMeet/src/routes/UserTimeInfo.js b/react-whenMeet/src/routes/UserTimeInfo.js
index 01036830479d39d90aef8ac6a1922cad1ea385c6..be845a7d772374bf1f4754f30cd273e039565576 100644
--- a/react-whenMeet/src/routes/UserTimeInfo.js
+++ b/react-whenMeet/src/routes/UserTimeInfo.js
@@ -1,7 +1,6 @@
import { useState, useEffect } from "react";
import Button from "../components/Button";
import CalendarWeek2 from "../components/CalendarWeek2";
-import "../styles/HomeMake.css";
import axios from "axios";
import { useLocation, useNavigate, useParams } from "react-router-dom";
diff --git a/react-whenMeet/src/styles/Global.css b/react-whenMeet/src/styles/Global.css
new file mode 100644
index 0000000000000000000000000000000000000000..8d01e25f6172b104a8a65b6cb0551530b525bdb8
--- /dev/null
+++ b/react-whenMeet/src/styles/Global.css
@@ -0,0 +1,3 @@
+* {
+ font-family: 'Noto Sans KR', sans-serif;
+}
\ No newline at end of file
diff --git a/react-whenMeet/src/styles/HomeMake.css b/react-whenMeet/src/styles/HomeMake.css
index e85f64bb6d6a23fe2f53951fc48bc67b0d6d0dbc..248e257e3e2c01c41e7133bf26bc3b85cb502f59 100644
--- a/react-whenMeet/src/styles/HomeMake.css
+++ b/react-whenMeet/src/styles/HomeMake.css
@@ -1,50 +1,40 @@
+/* HomeMake.css */
+
body {
- background-color: #3cb371; /* Set the background color of the entire page */
+ background-color:white;
margin: 0;
padding: 0;
}
-.center-container {
- display: flex;
- flex-direction: column; /* 세로 방향으로 정렬 */
- align-items: center;
- height: 100vh;
-}
-
form {
- width: 30%;
+ width: 50%;
padding: 20px;
- background-color: #f4f4f4;
- border-radius: 8px;
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+ margin: auto;
text-align: center;
}
h1 {
+ margin-top: 80px;
margin-bottom: 20px;
color: #333333;
- font-size: 24px;
- font-family: "Lato";
+ font-size: 20px;
}
-h2 {
- display: flex;
- align-items: center;
- justify-content: space-between;
- white-space: nowrap;
- margin: 0;
+.system-name {
+ color: #3498db;
+ font-size: 28px;
+ font-weight: bold;
+ margin-bottom: 20px;
}
-.timeStartEnd {
+.center-container {
display: flex;
+ flex-direction: column; /* 세로 방향으로 정렬 */
align-items: center;
- justify-content: space-between;
- white-space: nowrap;
- margin: 0;
}
input {
- width: 100%;
+ width: 60%;
padding: 10px;
margin: 8px 0;
box-sizing: border-box;
@@ -53,7 +43,7 @@ input {
}
button {
- width: 100%;
+ width: 60%;
padding: 10px;
margin-top: 16px;
background-color: #3498db;
@@ -63,53 +53,28 @@ button {
cursor: pointer;
}
-button:hover {
- background-color: #2980b9;
-}
-
-.header {
- display: flex;
- gap: 100px;
-}
-
-.purpose-selector {
- margin: 20px;
-}
-.calendarTable {
- margin: 0 auto; /* 가운데 정렬을 위해 margin을 auto로 설정합니다. */
-}
-
-.calendarTable .cellb {
- color: gray; /* 회색으로 글자색 지정 */
-}
-
-/* cella 클래스에 대한 스타일 */
-.calendarTable .cella {
- color: black; /* 검정색으로 글자색 지정 */
+.active {
+ background-color: #3498db;
+ color: white;
}
-.calendarTable .dragging {
- background-color: red;
+.disabled {
+ background-color: #cccccc;
+ color: #666666;
+ cursor: not-allowed;
}
-.calendarTable .noDate {
- background-color: gray;
+button:hover {
+ background-color: #2980b9;
}
-.title-box {
- text-align: center;
- border-width: 1px;
- border-color: black;
- border-style: solid;
- margin: 10px;
- padding: 2px 10px;
-}
/* Media queries for responsiveness */
@media (max-width: 768px) {
form {
width: 80%;
}
}
+
@media (max-width: 576px) {
form {
width: 90%;
diff --git a/react-whenMeet/src/styles/MeetingInfo.css b/react-whenMeet/src/styles/MeetingInfo.css
new file mode 100644
index 0000000000000000000000000000000000000000..9d2a7795bdbe758530d46c3d180c8c53efaf98c2
--- /dev/null
+++ b/react-whenMeet/src/styles/MeetingInfo.css
@@ -0,0 +1,115 @@
+body {
+ background-color: #eeeeee; /* Set the background color of the entire page */
+ margin: 0;
+ padding: 0;
+}
+
+.center-container {
+ display: flex;
+ flex-direction: column; /* 세로 방향으로 정렬 */
+ align-items: center;
+ height: 100vh;
+}
+
+form {
+ width: 30%;
+ padding: 20px;
+ /* background-color: #00adb5;s */
+ text-align: center;
+}
+
+h1 {
+ margin-bottom: 10px;
+ color: #333333;
+ font-size: 24px;
+ font-family: "Lato";
+}
+
+h2 {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ white-space: nowrap;
+ margin: 0;
+}
+
+.timeStartEnd {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ white-space: nowrap;
+ margin: 0;
+}
+
+input {
+ width: 100%;
+ padding: 10px;
+ margin: 8px 0;
+ box-sizing: border-box;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+}
+
+button {
+ width: 60%;
+ padding: 10px;
+ margin-top: 16px;
+ background-color: #3498db;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+}
+
+button:hover {
+ background-color: #2980b9;
+}
+
+.header {
+ display: flex;
+ gap: 100px;
+}
+
+.purpose-selector {
+ margin: 20px;
+}
+.calendarTable {
+ margin: 0 auto; /* 가운데 정렬을 위해 margin을 auto로 설정합니다. */
+}
+
+.calendarTable .cellb {
+ color: gray; /* 회색으로 글자색 지정 */
+}
+
+/* cella 클래스에 대한 스타일 */
+.calendarTable .cella {
+ color: black; /* 검정색으로 글자색 지정 */
+}
+
+.calendarTable .dragging {
+ background-color: red;
+}
+
+.calendarTable .noDate {
+ background-color: gray;
+}
+
+.title-box {
+ text-align: center;
+ border-width: 1px;
+ border-color: black;
+ border-style: solid;
+ margin: 10px;
+ padding: 2px 10px;
+}
+/* Media queries for responsiveness */
+@media (max-width: 768px) {
+ form {
+ width: 80%;
+ }
+}
+@media (max-width: 576px) {
+ form {
+ width: 90%;
+ }
+}