From d6f7689b217d4956f217eb80c32330e754e47bb2 Mon Sep 17 00:00:00 2001
From: mindongmindong <dcmin123@ajou.ac.kr>
Date: Thu, 7 Dec 2023 12:18:59 +0900
Subject: [PATCH] [ADD] css
---
react-whenMeet/package.json | 2 +-
react-whenMeet/src/components/Button.js | 6 +-
react-whenMeet/src/components/HomeMakeForm.js | 23 ++--
.../src/components/MeetingInfoForm.js | 5 +-
react-whenMeet/src/index.js | 5 +
react-whenMeet/src/routes/HomeMake.js | 3 +-
react-whenMeet/src/routes/HomeParticipate.js | 1 -
react-whenMeet/src/routes/LinkPage.js | 1 -
react-whenMeet/src/routes/MeetingInfo.js | 2 +-
react-whenMeet/src/routes/ResultEnd.jsx | 1 -
react-whenMeet/src/routes/UserTimeInfo.js | 1 -
react-whenMeet/src/styles/Global.css | 3 +
react-whenMeet/src/styles/HomeMake.css | 87 ++++---------
react-whenMeet/src/styles/MeetingInfo.css | 115 ++++++++++++++++++
14 files changed, 169 insertions(+), 86 deletions(-)
create mode 100644 react-whenMeet/src/styles/Global.css
create mode 100644 react-whenMeet/src/styles/MeetingInfo.css
diff --git a/react-whenMeet/package.json b/react-whenMeet/package.json
index 4173958..dafb6ea 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 8ddf720..678fe8b 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 315b9fd..6656322 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 992206e..9fe51d3 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 821a0b9..9fea0ae 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 0a7bd91..6850cc1 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 9f383a5..2a4cf3a 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 94a9ecd..0cea92b 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 7f6aa35..af7e843 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 ad510ea..044d549 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 0103683..be845a7 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 0000000..8d01e25
--- /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 e85f64b..248e257 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 0000000..9d2a779
--- /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%;
+ }
+}
--
GitLab