From 86278e98a3ffa1102b804051248d15271dc04924 Mon Sep 17 00:00:00 2001
From: "rnjsals0905@gmail.com" <rnjsals0905@ajou.ac.kr>
Date: Thu, 7 Dec 2023 16:29:51 +0900
Subject: [PATCH] =?UTF-8?q?[EDIT]=20=EB=8B=AC=EB=A0=A5=20=EC=9E=88?=
=?UTF-8?q?=EB=8A=94=20=ED=8E=98=EC=9D=B4=EC=A7=80(MeetingInfoForm,=20User?=
=?UTF-8?q?TimeInfo)=20CSS=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
react-whenMeet/src/components/Calendar.js | 11 +---
.../src/components/CalendarWeek2.jsx | 6 +-
.../src/components/MeetingInfoForm.js | 3 +
react-whenMeet/src/routes/UserTimeInfo.js | 16 +++---
react-whenMeet/src/styles/Calendar.css | 55 +++++++++----------
react-whenMeet/src/styles/MeetingInfo.css | 26 ++++++++-
react-whenMeet/src/styles/UserTimeInfo.css | 38 +++++++++++++
7 files changed, 107 insertions(+), 48 deletions(-)
create mode 100644 react-whenMeet/src/styles/UserTimeInfo.css
diff --git a/react-whenMeet/src/components/Calendar.js b/react-whenMeet/src/components/Calendar.js
index dc67dd7..5c70e12 100644
--- a/react-whenMeet/src/components/Calendar.js
+++ b/react-whenMeet/src/components/Calendar.js
@@ -1,15 +1,8 @@
-import React from "react";
-import { useState } from "react";
-import Input from "./Input";
import CalendarMonth from "./CalendarMonth";
-// import CalendarWeek2 from './CalendarWeek2';
+import "../styles/Calendar.css";
function Calendar({ onChange, usingDate, setUsingDate }) {
- return (
- <div>
- <CalendarMonth usingDate={usingDate} setUsingDate={setUsingDate} />
- </div>
- );
+ return <CalendarMonth usingDate={usingDate} setUsingDate={setUsingDate} />;
}
export default Calendar;
diff --git a/react-whenMeet/src/components/CalendarWeek2.jsx b/react-whenMeet/src/components/CalendarWeek2.jsx
index bc9fc7a..c9aeba4 100644
--- a/react-whenMeet/src/components/CalendarWeek2.jsx
+++ b/react-whenMeet/src/components/CalendarWeek2.jsx
@@ -233,7 +233,11 @@ function CalendarWeek2({
<button onClick={nextWeek}>next</button>
</h2>
</div>
- {state ? <p>가능한 시간</p> : <p>불가능한 시간</p>}
+ {state ? (
+ <p>가능한 시간을 선택합니다.</p>
+ ) : (
+ <p>불가능한 시간을 선택합니다.</p>
+ )}
<div className="calendarTable">
<table>
<MakeDay2 />
diff --git a/react-whenMeet/src/components/MeetingInfoForm.js b/react-whenMeet/src/components/MeetingInfoForm.js
index 6d8d69d..e60b435 100644
--- a/react-whenMeet/src/components/MeetingInfoForm.js
+++ b/react-whenMeet/src/components/MeetingInfoForm.js
@@ -3,6 +3,9 @@ import Input from "../components/Input";
import Button from "../components/Button";
import Calendar from "../components/Calendar";
import TimeInput from "./TimeInput";
+
+import "../styles/MeetingInfo.css";
+
import { useNavigate, useLocation } from "react-router-dom";
import axios from "axios";
diff --git a/react-whenMeet/src/routes/UserTimeInfo.js b/react-whenMeet/src/routes/UserTimeInfo.js
index 0d68f7e..7c691d0 100644
--- a/react-whenMeet/src/routes/UserTimeInfo.js
+++ b/react-whenMeet/src/routes/UserTimeInfo.js
@@ -195,11 +195,11 @@ function UserTimeInfo() {
return (
<div className="center-container">
- <div className="cc">
- <Button type="button" text="가능한 시간" onClick={handleState1} />
- <Button type="button" text="불가능한 시간" onClick={handleState2} />
- </div>
- <div className="cld">
+ <div className="calendarForm">
+ <div className="cc1">
+ <Button type="button" text="가능한 시간" onClick={handleState1} />
+ <Button type="button" text="불가능한 시간" onClick={handleState2} />
+ </div>
<CalendarWeek2
state={state}
startDate={startDate}
@@ -212,9 +212,9 @@ function UserTimeInfo() {
setAvailableTimes={setAvailableTimes}
isContain={isContain}
/>
- </div>
- <div className="cc">
- <Button type="submit" text="시작하기" onClick={handleAlert} />
+ <div className="cc">
+ <Button type="submit" text="제출하기" onClick={handleAlert} />
+ </div>
</div>
</div>
);
diff --git a/react-whenMeet/src/styles/Calendar.css b/react-whenMeet/src/styles/Calendar.css
index 7eb60d1..877540c 100644
--- a/react-whenMeet/src/styles/Calendar.css
+++ b/react-whenMeet/src/styles/Calendar.css
@@ -1,30 +1,29 @@
-.calendar{
- .day{
- display: flex;
- }
- .cells{
- display: flex;
- }
- .cella{
- width: 14%;
- }
- .cellb{
- width: 14%;
- }
+.calendar-month .calendar {
+ min-height: 430px;
+}
+
+.header {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: center;
+ text-align: center; /* h4 태그를 가운데 정렬합니다. */
+ gap: 10px;
+}
+
+.header button {
+ width: 30%;
+ padding: 8px;
+ margin: auto;
}
-table {
- /* width: 100%; */
- border: 1px solid #444444;
- .ttt{
- /* width: 100%; */
- height: 10px;
- border: 1px solid #444444;
- }
-
- .table_head{
- margin-left: auto;
- margin-right: auto;
- }
-
-}
\ No newline at end of file
+.header h4 {
+ width: 60%;
+ margin: 0; /* 기본 마진을 제거합니다. */
+ font-size: 16px; /* 원하는 크기로 조절합니다. */
+}
+
+table {
+ /* width: 100%; */
+ border: 1px solid #444444;
+}
diff --git a/react-whenMeet/src/styles/MeetingInfo.css b/react-whenMeet/src/styles/MeetingInfo.css
index 9d2a779..f11adaa 100644
--- a/react-whenMeet/src/styles/MeetingInfo.css
+++ b/react-whenMeet/src/styles/MeetingInfo.css
@@ -19,6 +19,7 @@ form {
}
h1 {
+ margin-top: 0;
margin-bottom: 10px;
color: #333333;
font-size: 24px;
@@ -67,14 +68,35 @@ button:hover {
.header {
display: flex;
- gap: 100px;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: center;
+ text-align: center; /* h4 태그를 가운데 정렬합니다. */
+ gap: 10px;
+}
+
+.header button {
+ width: 70px;
+ padding: 8px;
+ margin: auto;
+}
+.header button:first-child {
+ margin-right: 20px;
+}
+.header button:last-child {
+ margin-left: 20px;
}
.purpose-selector {
margin: 20px;
}
.calendarTable {
- margin: 0 auto; /* 가운데 정렬을 위해 margin을 auto로 설정합니다. */
+ display: flex;
+ justify-content: center;
+ width: 100%;
+ border-collapse: collapse;
+ text-align: center;
+ margin-bottom: 4%;
}
.calendarTable .cellb {
diff --git a/react-whenMeet/src/styles/UserTimeInfo.css b/react-whenMeet/src/styles/UserTimeInfo.css
new file mode 100644
index 0000000..f4868b5
--- /dev/null
+++ b/react-whenMeet/src/styles/UserTimeInfo.css
@@ -0,0 +1,38 @@
+.calendarForm {
+ display: flex;
+ flex-direction: column;
+ padding: 20px;
+ text-align: center;
+}
+.calendarForm .calendar {
+ height: auto;
+}
+
+.cc1 {
+ display: flex;
+ gap: 30px;
+ margin-bottom: 10px;
+ justify-content: center;
+}
+.cc {
+ display: flex;
+ gap: 30px;
+ margin-bottom: 10px;
+ justify-content: center;
+}
+
+.calendarTable {
+ display: flex;
+ justify-content: center;
+ width: 100%;
+ border-collapse: collapse;
+ text-align: center;
+ margin-bottom: 4%;
+}
+.cld .calendar .header h2 {
+ display: flex;
+}
+
+.cld .calendar .header h2 button {
+ width: 30%;
+}
--
GitLab