diff --git a/react-whenMeet/src/components/CalendarWeek.jsx b/react-whenMeet/src/components/CalendarWeek.jsx index c57b4ade0abbd46f8eaf8df9428cc0e0c2752097..bb00895ab80563b1fe6deb5f5a75f76b67e6095c 100644 --- a/react-whenMeet/src/components/CalendarWeek.jsx +++ b/react-whenMeet/src/components/CalendarWeek.jsx @@ -97,16 +97,18 @@ const CalendarWeek = ({ const weekDates = weeks[currentWeekIndex] || []; return ( - <div> - <button onClick={handlePrevWeek} disabled={currentWeekIndex === 0}> - Prev Week - </button> - <button - onClick={handleNextWeek} - disabled={currentWeekIndex === weeks.length - 1} - > - Next Week - </button> + <div className="wrap"> + <div className="button-container"> + <button onClick={handlePrevWeek} disabled={currentWeekIndex === 0}> + Prev Week + </button> + <button + onClick={handleNextWeek} + disabled={currentWeekIndex === weeks.length - 1} + > + Next Week + </button> + </div> <table className="calendar-container"> <thead> <tr> diff --git a/react-whenMeet/src/components/ResultEndForm.jsx b/react-whenMeet/src/components/ResultEndForm.jsx index 466bda463699693867e09e07bd21443164c8ef56..87e1c92e79fce637ee2ff2099268098bcf8374e5 100644 --- a/react-whenMeet/src/components/ResultEndForm.jsx +++ b/react-whenMeet/src/components/ResultEndForm.jsx @@ -67,6 +67,15 @@ export default function ResultEndForm() { }, ], }, + { + name: "test6", + availableSchedules: [ + { + availableDate: "2023-12-22", + availableTimes: [38], + }, + ], + }, ], }; const [title, setTitle] = useState(meetingData.title); @@ -84,14 +93,19 @@ export default function ResultEndForm() { return ( <div - style={{ textAlign: "center", display: "flex", flexDirection: "column" }} + style={{ + textAlign: "center", + display: "flex", + flexDirection: "column", + alignItems: "center", + }} > <span className="row1"> <h1 className="title-box">{title}</h1> <p>투표가 종료되었습니다.</p> <p style={{ color: "blue" }}>약속 시간은 {resultTime}입니다.</p> <div> - <h2>총 참여한 인원수</h2> + <h2 style={{ flex: "none" }}>총 참여한 인원수</h2> <p>{completedPeopleNum}</p> <form className="form-container"> {possibleDates.map((date, index) => ( @@ -117,17 +131,16 @@ export default function ResultEndForm() { 랜덤으로 약속 시간 확정하기 </button> </div> - <span style={{ display: "flex", flexDirection: "row" }}> - <div className="calander-container"> - <CalendarWeek - participants={meetingData.participants} - startDate={meetingData.startDate} - endDate={meetingData.endDate} - maxParticipants={meetingData.maxParticipants} - hoveredInfo={hoveredInfo} - setHoveredInfo={setHoveredInfo} - /> - </div> + <div style={{ display: "flex", flexDirection: "row" }}> + <CalendarWeek + participants={meetingData.participants} + startDate={meetingData.startDate} + endDate={meetingData.endDate} + maxParticipants={meetingData.maxParticipants} + hoveredInfo={hoveredInfo} + setHoveredInfo={setHoveredInfo} + /> + <div className="row2"> <span className="possible"> {hoveredInfo && ( @@ -144,7 +157,7 @@ export default function ResultEndForm() { )} </span> </div> - </span> + </div> </span> </div> ); diff --git a/react-whenMeet/src/routes/ResultEnd.jsx b/react-whenMeet/src/routes/ResultEnd.jsx index f7c0b486a0571a3a2e691ea82073ab4fdf320341..ad510eababc0ccc00d437693808e5bbc4ca18de3 100644 --- a/react-whenMeet/src/routes/ResultEnd.jsx +++ b/react-whenMeet/src/routes/ResultEnd.jsx @@ -3,11 +3,9 @@ import "../styles/HomeMake.css"; function ResultEnd() { return ( - <div - style={{ display: "flex", alignItems: "center", flexDirection: "column" }} - > + <> <ResultEndForm /> - </div> + </> ); } diff --git a/react-whenMeet/src/styles/CalendarWeek.css b/react-whenMeet/src/styles/CalendarWeek.css index 12876b8328a21e3f61f1e27ee29aeeeb817bb04a..8a8bc6b072c3460d60b81413b7a6799d529e3a68 100644 --- a/react-whenMeet/src/styles/CalendarWeek.css +++ b/react-whenMeet/src/styles/CalendarWeek.css @@ -1,7 +1,16 @@ .calendar-container { - margin-top: 20px;; + margin-top: 20px; + width: 100%; +} +.button-container { + display: flex; + justify-content: space-between; + width: 65%; } +.wrap { + width: 70%; +} table { width: 100%; border-collapse: collapse; diff --git a/react-whenMeet/src/styles/ResultEnd.css b/react-whenMeet/src/styles/ResultEnd.css index f25c598989dc3905dd92bfcb1e2ea8bd091171a7..5a60360440413bd733e9115a9a1c8689d75a57b5 100644 --- a/react-whenMeet/src/styles/ResultEnd.css +++ b/react-whenMeet/src/styles/ResultEnd.css @@ -1,3 +1,8 @@ +.title-box { + width: 30%; + margin: 0 auto; + text-align: center; +} .form-container { width: 100%; margin-bottom: 20px; @@ -9,9 +14,8 @@ padding: 10px; } .possible { - margin-left: 0px; position: fixed; - width: 20em; + width: 20%; border-width: 1px; border-color: black; border-style: solid; @@ -21,3 +25,7 @@ display: flex; justify-content: center; } + +.calendar-container { + width: 65%; +} diff --git a/react-whenMeet/src/styles/ResultMake.css b/react-whenMeet/src/styles/ResultMake.css index 154467e917257f6480783c34c1c420d96aa5939a..78b91cd8a51f6ad6b08c55eb33bfe0039c3132ce 100644 --- a/react-whenMeet/src/styles/ResultMake.css +++ b/react-whenMeet/src/styles/ResultMake.css @@ -1,3 +1,8 @@ +.title-box { + width: 30%; + margin: 0 auto; + text-align: center; +} .column-container { display: flex; flex-direction: column; @@ -12,10 +17,6 @@ flex-direction: row; } -.calendar-container { - margin-right: 30px; -} - .mostTime { background-color: white; position: fixed;