diff --git a/react-whenMeet/src/components/Calendar.js b/react-whenMeet/src/components/Calendar.js index dc67dd717b9ca90bcd60ca8ccff68442edd8f254..5c70e12fe71080fb2e95b6288f3943a1efe834bd 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 bc9fc7abb693c4058f0c55ca5c70c5d9b1ac7fe4..c9aeba42c062b87d4bbec8267693e75c3b211a50 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 6d8d69d636037b6d5a6a7ae1498ba27d54fa7786..e60b43506187e37e86bddd8be40675236ffe915e 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 0d68f7eff1e3664a766a656f67023c9bf318d287..7c691d085e5994418b035be720165938f9ce2d9a 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 7eb60d109255c679e38d4967295adb35c2147cd0..877540c05905a272d9acb354d52d29e621342703 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 9d2a7795bdbe758530d46c3d180c8c53efaf98c2..f11adaafde7ef270810b11ff9e918a5879e3ecb6 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 0000000000000000000000000000000000000000..f4868b584a0f9181835bf29e245c634ac6cf8fd6 --- /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%; +}