Skip to content
Snippets Groups Projects
Commit 2fb6c5fd authored by 이권민's avatar 이권민
Browse files

[EDIT] CSS

parent 268d524e
Branches
No related tags found
No related merge requests found
......@@ -113,7 +113,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-container">
<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: auto;
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;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment