From 7481ae31a9c6210c6825738daaf7780e22d49c72 Mon Sep 17 00:00:00 2001
From: "rnjsals0905@gmail.com" <rnjsals0905@ajou.ac.kr>
Date: Sat, 9 Dec 2023 00:44:00 +0900
Subject: [PATCH] [EDIT] CSS
---
react-whenMeet/package.json | 2 +-
react-whenMeet/src/components/Button.js | 26 ++++++++++------------
react-whenMeet/src/routes/UserTimeInfo.js | 16 +++++++++++--
react-whenMeet/src/styles/Calendar.css | 4 ----
react-whenMeet/src/styles/MeetingInfo.css | 16 +++++++++++--
react-whenMeet/src/styles/UserTimeInfo.css | 21 +++++++++++++----
6 files changed, 58 insertions(+), 27 deletions(-)
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 678fe8b..82c6e48 100644
--- a/react-whenMeet/src/components/Button.js
+++ b/react-whenMeet/src/components/Button.js
@@ -1,16 +1,14 @@
-
-function Button({type,text,onClick,disabled}){
- return(
- <button
- className={disabled ? 'disabled' : 'active'}
- type = {type}
- onClick={onClick}
- disabled = {disabled}
- >
- {text}
- </button>
- );
+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
+export default Button;
diff --git a/react-whenMeet/src/routes/UserTimeInfo.js b/react-whenMeet/src/routes/UserTimeInfo.js
index 7c691d0..82d223a 100644
--- a/react-whenMeet/src/routes/UserTimeInfo.js
+++ b/react-whenMeet/src/routes/UserTimeInfo.js
@@ -197,8 +197,20 @@ function UserTimeInfo() {
<div className="center-container">
<div className="calendarForm">
<div className="cc1">
- <Button type="button" text="가능한 시간" onClick={handleState1} />
- <Button type="button" text="불가능한 시간" onClick={handleState2} />
+ <button
+ type="button"
+ className={"now" + !state}
+ onClick={handleState1}
+ >
+ 가능한 시간
+ </button>
+ <button
+ type="button"
+ className={"now" + state}
+ onClick={handleState2}
+ >
+ 불가능한 시간
+ </button>
</div>
<CalendarWeek2
state={state}
diff --git a/react-whenMeet/src/styles/Calendar.css b/react-whenMeet/src/styles/Calendar.css
index 877540c..6379f3c 100644
--- a/react-whenMeet/src/styles/Calendar.css
+++ b/react-whenMeet/src/styles/Calendar.css
@@ -1,7 +1,3 @@
-.calendar-month .calendar {
- min-height: 430px;
-}
-
.header {
display: flex;
flex-direction: column;
diff --git a/react-whenMeet/src/styles/MeetingInfo.css b/react-whenMeet/src/styles/MeetingInfo.css
index f11adaa..1a33c0d 100644
--- a/react-whenMeet/src/styles/MeetingInfo.css
+++ b/react-whenMeet/src/styles/MeetingInfo.css
@@ -4,6 +4,12 @@ body {
padding: 0;
}
+.calendar-month .calendar {
+ border: 0px;
+ padding: 0px;
+ min-height: 26em;
+}
+
.center-container {
display: flex;
flex-direction: column; /* 세로 방향으로 정렬 */
@@ -52,7 +58,7 @@ input {
}
button {
- width: 60%;
+ width: 100%;
padding: 10px;
margin-top: 16px;
background-color: #3498db;
@@ -109,13 +115,19 @@ button:hover {
}
.calendarTable .dragging {
- background-color: red;
+ background-color: skyblue;
}
.calendarTable .noDate {
background-color: gray;
}
+.calendarTable td.dragging {
+ text-align: center; /* 텍스트를 가운데 정렬 */
+ vertical-align: middle; /* 텍스트를 수직 가운데 정렬 */
+ background-color: skyblue; /* 배경색 지정 */
+}
+
.title-box {
text-align: center;
border-width: 1px;
diff --git a/react-whenMeet/src/styles/UserTimeInfo.css b/react-whenMeet/src/styles/UserTimeInfo.css
index 26416ce..d64bea4 100644
--- a/react-whenMeet/src/styles/UserTimeInfo.css
+++ b/react-whenMeet/src/styles/UserTimeInfo.css
@@ -9,6 +9,18 @@
}
.calendarForm .calendar {
height: auto;
+ border: 0px;
+ padding: 0px;
+}
+
+.calendarForm button.nowtrue {
+ background-color: gray;
+}
+
+.calendarTable td.dragging {
+ text-align: center; /* 텍스트를 가운데 정렬 */
+ vertical-align: middle; /* 텍스트를 수직 가운데 정렬 */
+ background-color: skyblue; /* 배경색 지정 */
}
.cc1 {
@@ -40,13 +52,14 @@
width: 30%;
}
-@media (max-width: 768px) {
- form {
+/* @media (max-width: 768px) {
+ .calendarForm {
width: 80%;
}
}
+
@media (max-width: 576px) {
- form {
+ .calendarForm {
width: 90%;
}
-}
+} */
--
GitLab