Skip to content
Snippets Groups Projects
Commit 07161314 authored by 준현 강's avatar 준현 강
Browse files

[EDIT] CSS수정

parent e5cbb7b6
No related branches found
No related tags found
No related merge requests found
......@@ -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>
......
......@@ -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>
);
......
......@@ -3,11 +3,9 @@ import "../styles/HomeMake.css";
function ResultEnd() {
return (
<div
style={{ display: "flex", alignItems: "center", flexDirection: "column" }}
>
<>
<ResultEndForm />
</div>
</>
);
}
......
.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;
......
.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%;
}
.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;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment