From 6cc28ba638b3833d76310b29641f0ce6b56d590f Mon Sep 17 00:00:00 2001
From: mindongmindong <dcmin123@ajou.ac.kr>
Date: Sat, 9 Dec 2023 00:39:55 +0900
Subject: [PATCH] [ADD] CSS
---
.gitignore | 1 +
react-whenMeet/package.json | 2 +-
.../src/components/HomeParticipateForm.js | 4 +-
react-whenMeet/src/components/Input.js | 3 +-
react-whenMeet/src/components/LinkPageForm.js | 3 +-
react-whenMeet/src/components/MakeHeader.jsx | 2 +-
.../src/components/MeetingInfoForm.js | 65 +++++++++-------
react-whenMeet/src/components/TimeInput.js | 2 +-
react-whenMeet/src/styles/Calendar.css | 16 ++--
react-whenMeet/src/styles/Global.css | 20 ++++-
react-whenMeet/src/styles/HomeMake.css | 11 ++-
.../src/styles/HomeParticipateForm.css | 4 +
react-whenMeet/src/styles/MeetingInfo.css | 76 +++++++++++++++++--
13 files changed, 159 insertions(+), 50 deletions(-)
create mode 100644 react-whenMeet/src/styles/HomeParticipateForm.css
diff --git a/.gitignore b/.gitignore
index 67554aa..1d65852 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,4 @@
# Ignore node_modules directory
node_modules/
+package.json
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/HomeParticipateForm.js b/react-whenMeet/src/components/HomeParticipateForm.js
index f505918..c3470bf 100644
--- a/react-whenMeet/src/components/HomeParticipateForm.js
+++ b/react-whenMeet/src/components/HomeParticipateForm.js
@@ -3,6 +3,7 @@ import Input from "./Input";
import Button from "./Button";
import { useNavigate, useParams } from "react-router-dom";
import axios from "axios";
+import "../styles/HomeParticipateForm.css"
function HomeParticipateForm() {
const [name, setName] = useState("");
@@ -186,6 +187,7 @@ function HomeParticipateForm() {
<form>
<div>
<h1>투표에 참여하기</h1>
+ <h2> 아이디가 없다면 아래 양식에 맞춰 작성 후 참여하기를 누르세요</h2>
<Input
type="text"
value={name}
@@ -204,7 +206,7 @@ function HomeParticipateForm() {
onChange={handleEmail}
placeholder="이메일(선택)"
/>
- <Button type="submit" text="참여" onClick={handleSubmit} />
+ <Button type="submit" text="참여하기" onClick={handleSubmit} />
</div>
</form>
);
diff --git a/react-whenMeet/src/components/Input.js b/react-whenMeet/src/components/Input.js
index 1023ac9..1f7edd3 100644
--- a/react-whenMeet/src/components/Input.js
+++ b/react-whenMeet/src/components/Input.js
@@ -1,8 +1,9 @@
import PropTypes from "prop-types";
-function Input({ type, value, onChange, placeholder }) {
+function Input({ type, value, onChange, placeholder, classname }) {
return (
<input
+ className={classname}
type={type}
placeholder={placeholder}
onChange={onChange}
diff --git a/react-whenMeet/src/components/LinkPageForm.js b/react-whenMeet/src/components/LinkPageForm.js
index 8229809..652676b 100644
--- a/react-whenMeet/src/components/LinkPageForm.js
+++ b/react-whenMeet/src/components/LinkPageForm.js
@@ -28,8 +28,9 @@ function LinkPageForm() {
return (
<form onSubmit={handleSubmit}>
+ <h1>투표 링크가 생성되었습니다</h1>
+ <hr/>
<div>
- <p>hey</p>
<Input
value={`https://when-meet.link/HomeParticipate/${id}`}
/>
diff --git a/react-whenMeet/src/components/MakeHeader.jsx b/react-whenMeet/src/components/MakeHeader.jsx
index b9b6dae..152a32b 100644
--- a/react-whenMeet/src/components/MakeHeader.jsx
+++ b/react-whenMeet/src/components/MakeHeader.jsx
@@ -6,7 +6,7 @@ export default function MakeHeader({
}) {
return (
<div className="header">
- <h2>
+ <h2 className="calendarh2">
<button type="button" onClick={prevMonth}>
prev
</button>
diff --git a/react-whenMeet/src/components/MeetingInfoForm.js b/react-whenMeet/src/components/MeetingInfoForm.js
index 1f50093..8b98be7 100644
--- a/react-whenMeet/src/components/MeetingInfoForm.js
+++ b/react-whenMeet/src/components/MeetingInfoForm.js
@@ -90,38 +90,49 @@ function MeetingInfoForm() {
};
return (
<form onSubmit={handleSubmit}>
- <div>
- <div className="purpose-selector">
- <h1>약속 일정 만들기</h1>
- <label>
- 목적:
- <select value={meetingPurpose} onChange={handleOnChange}>
- <option value="선택">선택</option>
- <option value="스터디">스터디</option>
- <option value="회의">회의</option>
- <option value="놀기">놀기</option>
- <option value="식사">식사</option>
- <option value="기타">기타</option>
- </select>
- </label>
+ <div className="center-container">
+ <h1>약속 일정 만들기</h1>
+ <div className="purpose">
+ <h2 className="not-enter">약속 목적 </h2>
+ <select className="purpose-selector" value={meetingPurpose} onChange={handleOnChange}>
+ <option value="선택">선택</option>
+ <option value="스터디">스터디</option>
+ <option value="회의">회의</option>
+ <option value="놀기">놀기</option>
+ <option value="식사">식사</option>
+ <option value="기타">기타</option>
+ </select>
</div>
<div className="calendar-month">
<Calendar usingDate={usingDate} setUsingDate={setUsingDate} />
</div>
- <div className="timeStartEnd">
- 투표 가능 시간
- <TimeInput onTimeChange={handleStartTimeChange} />
- ~
- <TimeInput onTimeChange={handleEndTimeChange} />
+ <div className="form-input">
+ <h2>추가 설정</h2>
+ <div className="num-of-people">
+ <h2>투표 인원수</h2>
+ <Input
+ classname="voteNumber"
+ type="number"
+ value={number}
+ onChange={handleNumber}
+ placeholder="인원수"
+ />
+ </div>
+ <div className="timeStartEnd">
+ <h2>투표 가능 시간</h2>
+ <TimeInput onTimeChange={handleStartTimeChange} />
+ ~
+ <TimeInput onTimeChange={handleEndTimeChange} />
+ </div>
+ <div className="end-time">
+ <h2 className="not-enter">투표 종료 시간</h2>
+ <Input
+ classname= "vote-end"
+ type="datetime-local"
+ value={endVote}
+ onChange={handleVoteEnd} />
+ </div>
</div>
- <Input
- type="number"
- value={number}
- onChange={handleNumber}
- placeholder="예상 투표 인원(선택)"
- />
- <a>예상 투표 종료 시간(선택)</a>
- <Input type="datetime-local" value={endVote} onChange={handleVoteEnd} />
<Button type="submit" text="시작하기" />
</div>
</form>
diff --git a/react-whenMeet/src/components/TimeInput.js b/react-whenMeet/src/components/TimeInput.js
index a126852..224c6ed 100644
--- a/react-whenMeet/src/components/TimeInput.js
+++ b/react-whenMeet/src/components/TimeInput.js
@@ -11,7 +11,7 @@ function TimeInput({ onTimeChange }) {
return (
<div>
<label>
- <select value={time} onChange={handleTimeChange}>
+ <select className="time-selector" value={time} onChange={handleTimeChange}>
{Array.from({ length: 48 }, (_, i) => {
const paddedHour = Math.floor(i / 2).toString().padStart(2, "0");
const paddedMinute = (i % 2 === 0 ? "00" : "30");
diff --git a/react-whenMeet/src/styles/Calendar.css b/react-whenMeet/src/styles/Calendar.css
index 877540c..90d255c 100644
--- a/react-whenMeet/src/styles/Calendar.css
+++ b/react-whenMeet/src/styles/Calendar.css
@@ -1,5 +1,15 @@
.calendar-month .calendar {
- min-height: 430px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ border: 1px solid #ccc;
+}
+
+table{
+ table-layout: fixed;
+}
+.calendarTable{
+ width: 100%;
}
.header {
@@ -23,7 +33,3 @@
font-size: 16px; /* 원하는 크기로 조절합니다. */
}
-table {
- /* width: 100%; */
- border: 1px solid #444444;
-}
diff --git a/react-whenMeet/src/styles/Global.css b/react-whenMeet/src/styles/Global.css
index 8d01e25..be95dc3 100644
--- a/react-whenMeet/src/styles/Global.css
+++ b/react-whenMeet/src/styles/Global.css
@@ -1,3 +1,21 @@
* {
font-family: 'Noto Sans KR', sans-serif;
-}
\ No newline at end of file
+}
+
+/* Media queries for responsiveness */
+@media (max-width: 768px) {
+ form {
+ width: 80%;
+ }
+}
+
+@media (max-width: 576px) {
+ form {
+ width: 90%;
+ }
+}
+@media (max-width: 376px) {
+ form {
+ width: 77%;
+ }
+ }
\ No newline at end of file
diff --git a/react-whenMeet/src/styles/HomeMake.css b/react-whenMeet/src/styles/HomeMake.css
index 248e257..91c9efc 100644
--- a/react-whenMeet/src/styles/HomeMake.css
+++ b/react-whenMeet/src/styles/HomeMake.css
@@ -1,5 +1,3 @@
-/* HomeMake.css */
-
body {
background-color:white;
margin: 0;
@@ -9,7 +7,7 @@ body {
form {
width: 50%;
padding: 20px;
- margin: auto;
+ margin:auto;
text-align: center;
}
@@ -31,6 +29,7 @@ h1 {
display: flex;
flex-direction: column; /* 세로 방향으로 정렬 */
align-items: center;
+ height: 100vh;
}
input {
@@ -80,3 +79,9 @@ button:hover {
width: 90%;
}
}
+
+@media (max-width: 376px) {
+ form {
+ width: 100%;
+ }
+}
diff --git a/react-whenMeet/src/styles/HomeParticipateForm.css b/react-whenMeet/src/styles/HomeParticipateForm.css
new file mode 100644
index 0000000..3bb9709
--- /dev/null
+++ b/react-whenMeet/src/styles/HomeParticipateForm.css
@@ -0,0 +1,4 @@
+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 f11adaa..90eec09 100644
--- a/react-whenMeet/src/styles/MeetingInfo.css
+++ b/react-whenMeet/src/styles/MeetingInfo.css
@@ -23,17 +23,56 @@ h1 {
margin-bottom: 10px;
color: #333333;
font-size: 24px;
- font-family: "Lato";
}
h2 {
+ font-size: 16px;
+ padding : 5px;
+}
+
+.not-enter{
+ white-space: nowrap;
+}
+
+select {
+ width: 20%;
+ padding: 5px;
+ font-size: 16px;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ outline: none;
+ cursor: pointer;
+}
+.purpose-selector{
+ width: 50%;
+ padding: 5px;
+ font-size: 16px;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ outline: none;
+ cursor: pointer;
+}
+
+.time-selector{
+ width: 100%;
+ font-size: 16px;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ outline: none;
+ cursor: pointer;
+}
+.calendarh2{
+ display: flex;
+ white-space: nowrap;
+ margin: 0;
+}
+.num-of-people{
display: flex;
align-items: center;
justify-content: space-between;
white-space: nowrap;
margin: 0;
}
-
.timeStartEnd {
display: flex;
align-items: center;
@@ -41,7 +80,13 @@ h2 {
white-space: nowrap;
margin: 0;
}
-
+.end-time{
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ white-space: nowrap;
+ margin: 0;
+}
input {
width: 100%;
padding: 10px;
@@ -51,8 +96,21 @@ input {
border-radius: 4px;
}
-button {
+.voteNumber{
width: 60%;
+ box-sizing: border-box;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+}
+.vote-end{
+ width: 60%;
+ box-sizing: border-box;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+}
+
+button {
+ width: 100%;
padding: 10px;
margin-top: 16px;
background-color: #3498db;
@@ -81,15 +139,17 @@ button:hover {
margin: auto;
}
.header button:first-child {
- margin-right: 20px;
+ margin-right: 6em;
}
.header button:last-child {
- margin-left: 20px;
+ margin-left: 6em;
}
-.purpose-selector {
- margin: 20px;
+.purpose{
+ display: flex;
+ align-items: center;
}
+
.calendarTable {
display: flex;
justify-content: center;
--
GitLab