Skip to content
Snippets Groups Projects
Commit d6f7689b authored by Min Dong Hyeun's avatar Min Dong Hyeun
Browse files

[ADD] css

parent db7a03b1
No related branches found
No related tags found
No related merge requests found
Showing
with 169 additions and 86 deletions
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
"web-vitals": "^2.1.4" "web-vitals": "^2.1.4"
}, },
"scripts": { "scripts": {
"start": "export PORT=80 && react-scripts start", "start": "react-scripts start",
"build": "react-scripts build", "build": "react-scripts build",
"test": "react-scripts test", "test": "react-scripts test",
"eject": "react-scripts eject" "eject": "react-scripts eject"
......
function Button({type,text,onClick}){
function Button({type,text,onClick,disabled}){
return( return(
<button <button
className={disabled ? 'disabled' : 'active'}
type = {type} type = {type}
onClick={onClick} onClick={onClick}
disabled = {disabled}
> >
{text} {text}
</button> </button>
); );
} }
export default Button; export default Button;
\ No newline at end of file
...@@ -2,7 +2,7 @@ import { useState } from "react"; ...@@ -2,7 +2,7 @@ import { useState } from "react";
import Input from "../components/Input"; import Input from "../components/Input";
import Button from "../components/Button"; import Button from "../components/Button";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import "../styles/HomeMake.css";
function HomeMakeForm() { function HomeMakeForm() {
const [title, setTitle] = useState(""); const [title, setTitle] = useState("");
const [password, setPassword] = useState(""); const [password, setPassword] = useState("");
...@@ -18,36 +18,31 @@ function HomeMakeForm() { ...@@ -18,36 +18,31 @@ function HomeMakeForm() {
const handleSubmit = (event) => { const handleSubmit = (event) => {
event.preventDefault(); 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 ( return (
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<div> <div className="system-name">언제모임?</div>
<h1>When we meet?</h1> <div className="center-container">
<h1>원하는 약속을 만들어보세요</h1>
<Input <Input
type="text" type="text"
value={title} value={title}
onChange={onTitleChange} onChange={onTitleChange}
placeholder="약속 Title" placeholder="약속 이름을 입력해주세요"
/> />
<br />
<Input <Input
type="password" type="password"
value={password} value={password}
onChange={onPasswordChange} onChange={onPasswordChange}
placeholder="관리용 Password" placeholder="관리용 비밀번호를 입력해주세요"
/> />
<br />
<Button <Button
type="submit" type="submit"
text="시작하기" text="시작하기"
disabled={!isFormValid}
/> />
</div> </div>
</form> </form>
......
...@@ -101,8 +101,9 @@ function MeetingInfoForm() { ...@@ -101,8 +101,9 @@ function MeetingInfoForm() {
</select> </select>
</label> </label>
</div> </div>
<div>
<Calendar usingDate={usingDate} setUsingDate={setUsingDate} /> <Calendar usingDate={usingDate} setUsingDate={setUsingDate} />
</div>
<div className="timeStartEnd"> <div className="timeStartEnd">
투표 가능 시간 투표 가능 시간
<TimeInput onTimeChange={handleStartTimeChange} /> <TimeInput onTimeChange={handleStartTimeChange} />
......
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom/client'; import ReactDOM from 'react-dom/client';
import App from './App'; import App from './App';
import './styles/Global.css'
const root = ReactDOM.createRoot(document.getElementById('root')); 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( root.render(
<App /> <App />
); );
......
import HomeMakeForm from "../components/HomeMakeForm"; import HomeMakeForm from "../components/HomeMakeForm";
import "../styles/HomeMake.css";
function HomeMake() { function HomeMake() {
return ( return (
<div className="center-container"> <div>
<HomeMakeForm /> <HomeMakeForm />
</div> </div>
); );
......
import HomeParticipateForm from "../components/HomeParticipateForm"; import HomeParticipateForm from "../components/HomeParticipateForm";
import "../styles/HomeMake.css";
function HomeParticipate(){ function HomeParticipate(){
......
import LinkPageForm from "../components/LinkPageForm"; import LinkPageForm from "../components/LinkPageForm";
import "../styles/HomeMake.css"
function LinkPage() { function LinkPage() {
return ( return (
......
import MeetingInfoForm from "../components/MeetingInfoForm"; import MeetingInfoForm from "../components/MeetingInfoForm";
import "../styles/HomeMake.css" import '../styles/MeetingInfo.css'
function MeetingInfo() { function MeetingInfo() {
......
import ResultEndForm from "../components/ResultEndForm"; import ResultEndForm from "../components/ResultEndForm";
import "../styles/HomeMake.css";
function ResultEnd() { function ResultEnd() {
return ( return (
......
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import Button from "../components/Button"; import Button from "../components/Button";
import CalendarWeek2 from "../components/CalendarWeek2"; import CalendarWeek2 from "../components/CalendarWeek2";
import "../styles/HomeMake.css";
import axios from "axios"; import axios from "axios";
import { useLocation, useNavigate, useParams } from "react-router-dom"; import { useLocation, useNavigate, useParams } from "react-router-dom";
......
* {
font-family: 'Noto Sans KR', sans-serif;
}
\ No newline at end of file
/* HomeMake.css */
body { body {
background-color: #3cb371; /* Set the background color of the entire page */ background-color:white;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.center-container {
display: flex;
flex-direction: column; /* 세로 방향으로 정렬 */
align-items: center;
height: 100vh;
}
form { form {
width: 30%; width: 50%;
padding: 20px; padding: 20px;
background-color: #f4f4f4; margin: auto;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
text-align: center; text-align: center;
} }
h1 { h1 {
margin-top: 80px;
margin-bottom: 20px; margin-bottom: 20px;
color: #333333; color: #333333;
font-size: 24px; font-size: 20px;
font-family: "Lato";
} }
h2 { .system-name {
display: flex; color: #3498db;
align-items: center; font-size: 28px;
justify-content: space-between; font-weight: bold;
white-space: nowrap; margin-bottom: 20px;
margin: 0;
} }
.timeStartEnd { .center-container {
display: flex; display: flex;
flex-direction: column; /* 세로 방향으로 정렬 */
align-items: center; align-items: center;
justify-content: space-between;
white-space: nowrap;
margin: 0;
} }
input { input {
width: 100%; width: 60%;
padding: 10px; padding: 10px;
margin: 8px 0; margin: 8px 0;
box-sizing: border-box; box-sizing: border-box;
...@@ -53,7 +43,7 @@ input { ...@@ -53,7 +43,7 @@ input {
} }
button { button {
width: 100%; width: 60%;
padding: 10px; padding: 10px;
margin-top: 16px; margin-top: 16px;
background-color: #3498db; background-color: #3498db;
...@@ -63,53 +53,28 @@ button { ...@@ -63,53 +53,28 @@ button {
cursor: pointer; cursor: pointer;
} }
button:hover { .active {
background-color: #2980b9; background-color: #3498db;
} color: white;
.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 { .disabled {
background-color: red; background-color: #cccccc;
color: #666666;
cursor: not-allowed;
} }
.calendarTable .noDate { button:hover {
background-color: gray; 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 queries for responsiveness */
@media (max-width: 768px) { @media (max-width: 768px) {
form { form {
width: 80%; width: 80%;
} }
} }
@media (max-width: 576px) { @media (max-width: 576px) {
form { form {
width: 90%; width: 90%;
......
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%;
}
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment