Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • websystem2023-2/whenmeet
1 result
Show changes
Commits on Source (2)
......@@ -116,7 +116,7 @@ const CalendarWeek = ({
};
const weekDates = weeks[currentWeekIndex] || [];
console.log(endTimeSlot, startTimeSlot);
return (
<div className="calendarWeekContainer wrap">
<div className="button-container">
......
......@@ -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>
......
......@@ -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>
......
......@@ -194,38 +194,40 @@ function UserTimeInfo() {
};
return (
<div className="center-container2">
<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>
......
* {
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%;
}
}
.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: 40%;
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;
......