From 2fb6c5fde2a95298bc2475c181b4fe38b3e4dad5 Mon Sep 17 00:00:00 2001
From: "rnjsals0905@gmail.com" <rnjsals0905@ajou.ac.kr>
Date: Sat, 9 Dec 2023 20:11:32 +0900
Subject: [PATCH] [EDIT] CSS
---
.../src/components/CalendarWeek.jsx | 2 +-
.../src/components/CalendarWeek2.jsx | 6 +-
react-whenMeet/src/components/MakeDay2.jsx | 2 +-
react-whenMeet/src/routes/UserTimeInfo.js | 66 ++++++++++---------
react-whenMeet/src/styles/Global.css | 22 +++----
react-whenMeet/src/styles/UserTimeInfo.css | 59 ++++++++++++++++-
6 files changed, 106 insertions(+), 51 deletions(-)
diff --git a/react-whenMeet/src/components/CalendarWeek.jsx b/react-whenMeet/src/components/CalendarWeek.jsx
index 604d8f0..305a9b2 100644
--- a/react-whenMeet/src/components/CalendarWeek.jsx
+++ b/react-whenMeet/src/components/CalendarWeek.jsx
@@ -113,7 +113,7 @@ const CalendarWeek = ({
};
const weekDates = weeks[currentWeekIndex] || [];
-
+ console.log(endTimeSlot, startTimeSlot);
return (
<div className="calendarWeekContainer wrap">
<div className="button-container">
diff --git a/react-whenMeet/src/components/CalendarWeek2.jsx b/react-whenMeet/src/components/CalendarWeek2.jsx
index c9aeba4..f4b1e10 100644
--- a/react-whenMeet/src/components/CalendarWeek2.jsx
+++ b/react-whenMeet/src/components/CalendarWeek2.jsx
@@ -74,7 +74,7 @@ function CaculateWeek({
const weekArr = [];
const selectArr = [];
- weekArr.push(<td></td>);
+ weekArr.push(<td className="tt"></td>);
for (let i = startTime; i < endTime; i++) {
const forSelect = [];
const minute = i * 30;
@@ -135,7 +135,7 @@ function CaculateWeek({
selectArr.push(
<tr key={i}>
- <td>{time}</td>
+ <td className="tt">{time}</td>
{forSelect}
</tr>
);
@@ -227,7 +227,7 @@ function CalendarWeek2({
return (
<div className="calendar">
<div className="header">
- <h2>
+ <h2 className="UTH2">
<button onClick={prevWeek}>prev</button>
{nowYear}년 {nowMonth}월 {nowWeek}주차
<button onClick={nextWeek}>next</button>
diff --git a/react-whenMeet/src/components/MakeDay2.jsx b/react-whenMeet/src/components/MakeDay2.jsx
index 6e47b1b..4a72e3b 100644
--- a/react-whenMeet/src/components/MakeDay2.jsx
+++ b/react-whenMeet/src/components/MakeDay2.jsx
@@ -9,7 +9,7 @@ export default function MakeDay2() {
return (
<thead>
<tr>
- <th className="table_head"></th>
+ <th className="table_head tt"></th>
{days}
</tr>
</thead>
diff --git a/react-whenMeet/src/routes/UserTimeInfo.js b/react-whenMeet/src/routes/UserTimeInfo.js
index 82d223a..e905faa 100644
--- a/react-whenMeet/src/routes/UserTimeInfo.js
+++ b/react-whenMeet/src/routes/UserTimeInfo.js
@@ -194,38 +194,40 @@ function UserTimeInfo() {
};
return (
- <div className="center-container">
- <div className="calendarForm">
- <div className="cc1">
- <button
- type="button"
- className={"now" + !state}
- onClick={handleState1}
- >
- 가능한 시간
- </button>
- <button
- type="button"
- className={"now" + state}
- onClick={handleState2}
- >
- 불가능한 시간
- </button>
- </div>
- <CalendarWeek2
- state={state}
- startDate={startDate}
- endDate={endDate}
- startTime={startTime}
- endTime={endTime}
- today={today}
- availableSchedules={availableSchedules}
- availableTimes={availableTimes}
- setAvailableTimes={setAvailableTimes}
- isContain={isContain}
- />
- <div className="cc">
- <Button type="submit" text="제출하기" onClick={handleAlert} />
+ <div className="what">
+ <div className="center-container3">
+ <div className="calendarForm">
+ <div className="cc1">
+ <button
+ type="button"
+ className={"now" + !state}
+ onClick={handleState1}
+ >
+ 가능한 시간
+ </button>
+ <button
+ type="button"
+ className={"now" + state}
+ onClick={handleState2}
+ >
+ 불가능한 시간
+ </button>
+ </div>
+ <CalendarWeek2
+ state={state}
+ startDate={startDate}
+ endDate={endDate}
+ startTime={startTime}
+ endTime={endTime}
+ today={today}
+ availableSchedules={availableSchedules}
+ availableTimes={availableTimes}
+ setAvailableTimes={setAvailableTimes}
+ isContain={isContain}
+ />
+ <div className="cc">
+ <Button type="submit" text="제출하기" onClick={handleAlert} />
+ </div>
</div>
</div>
</div>
diff --git a/react-whenMeet/src/styles/Global.css b/react-whenMeet/src/styles/Global.css
index be95dc3..b5d369d 100644
--- a/react-whenMeet/src/styles/Global.css
+++ b/react-whenMeet/src/styles/Global.css
@@ -1,21 +1,21 @@
* {
- font-family: 'Noto Sans KR', sans-serif;
+ font-family: "Noto Sans KR", sans-serif;
}
/* Media queries for responsiveness */
@media (max-width: 768px) {
- form {
- width: 80%;
- }
+ form {
+ width: 80%;
+ }
}
@media (max-width: 576px) {
- form {
- width: 90%;
- }
+ form {
+ width: 90%;
+ }
}
@media (max-width: 376px) {
- form {
- width: 77%;
- }
- }
\ No newline at end of file
+ form {
+ width: 77%;
+ }
+}
diff --git a/react-whenMeet/src/styles/UserTimeInfo.css b/react-whenMeet/src/styles/UserTimeInfo.css
index d64bea4..b91de28 100644
--- a/react-whenMeet/src/styles/UserTimeInfo.css
+++ b/react-whenMeet/src/styles/UserTimeInfo.css
@@ -1,11 +1,57 @@
+.center-container3 {
+ display: flex;
+ flex-direction: column; /* 세로 방향으로 정렬 */
+ align-items: center;
+ height: 100vh;
+ margin: auto;
+}
+
+.what {
+ width: 30%;
+ padding: 20px;
+ /* background-color: #00adb5;s */
+ text-align: center;
+ margin: auto;
+}
+
+.tt {
+ font-size: 10px;
+}
+
+h2.UTH2 {
+ font-size: 16px;
+}
+
+.calendarTable table {
+ width: 100%;
+ border-collapse: collapse;
+ text-align: center;
+ margin-bottom: 4%;
+}
+
+.calendarTable td {
+ border: 1px solid #ddd;
+ padding: 10px;
+}
+
+.calendarTable table tbody td.tt {
+ text-align: center;
+}
+
+.calendarTable th {
+ background-color: #f4f4f4;
+}
+
+.calendarTable td {
+ background-color: #f4f4f4;
+ cursor: pointer;
+}
+
.calendarForm {
display: flex;
flex-direction: column;
padding: 20px;
text-align: center;
- align-items: stretch;
- width: auto;
- margin: 0 auto; /* 가운데 정렬을 위한 추가 */
}
.calendarForm .calendar {
height: auto;
@@ -23,6 +69,13 @@
background-color: skyblue; /* 배경색 지정 */
}
+.header button:first-child {
+ margin-right: 10%;
+}
+.header button:last-child {
+ margin-left: 10%;
+}
+
.cc1 {
display: flex;
gap: 30px;
--
GitLab