Skip to content
Snippets Groups Projects
Commit 1f0133b6 authored by 조대희's avatar 조대희
Browse files

style: edit mode container 스타일 sticky하게 변경

parent 2f623b45
No related branches found
No related tags found
1 merge request!21[#13] 스케줄 페이지 스타일 개선
Pipeline #10887 passed
......@@ -312,12 +312,60 @@ const SchedulePage = () => {
</label>
</div>
{/* Sticky Container in Edit Mode */}
{isEditMode && (
<div className="fixed bottom-0 right-0 flex items-center justify-center w-full ">
{/* Schedule Grid */}
<div className="p-4 pb-[210px]">
<div className="overflow-auto scrollbar-hide">
<div className="w-[100vw] tablet:w-[960px] grid grid-cols-[64px,repeat(7,1fr)] gap-2">
{/* Header */}
<div className="min-w-[54px] p-2 font-bold text-center bg-grayscale-200 select-none">
Time
</div>
{days.map((day) => (
<div key={day} className="p-2 font-bold text-center select-none bg-grayscale-200">
{day}
</div>
))}
{/* Time Slots */}
{timeSlots.map((time, rowIndex) => (
<React.Fragment key={rowIndex}>
{/* Time Column */}
<div className="min-w-[54px] p-2 font-bold text-center bg-grayscale-100 select-none">
{time}
</div>
{days.map((_, colIndex) => {
const slotIndex = colIndex * timeSlots.length + rowIndex;
const isSelected = selectedSlots.includes(slotIndex);
const schedule = schedules.find((s) =>
s.time_indices.includes(slotIndex)
);
return (
<div
className={`transform transition-transform w-full max-w-[768px] tablet:rounded-2xl bg-primary-100 p-6 text-center shadow-lg`}
key={slotIndex}
className={`p-2 border rounded ${
schedule
? `${getColorForTitle(schedule.title)} text-white`
: isSelected
? "bg-primary-100 border-primary-300"
: "bg-grayscale-50"
} cursor-pointer`}
onClick={() => handleSlotClick(slotIndex)}
>
{schedule ? schedule.title : ""}
</div>
);
})}
</React.Fragment>
))}
</div>
</div>
</div>
{/* Sticky Container in Edit Mode */}
{isEditMode && (
<div className="fixed bottom-0 right-0 flex items-center justify-center w-full z-10">
<div className="transform transition-transform w-full max-w-[768px] tablet:rounded-2xl bg-primary-100/90 backdrop-blur-sm p-6 text-center shadow-lg">
{selectedSlots.length === 0 && selectedSchedule ? (
<div className="flex flex-col items-center justify-center w-full">
<h3 className="mb-2 heading-2 text-primary-500">스케줄 정보</h3>
......@@ -429,59 +477,6 @@ const SchedulePage = () => {
</div>
</div>
)}
{/* Schedule Grid */}
<div className="p-4">
<div className="overflow-auto scrollbar-hide">
<div className="w-[100vw] tablet:w-[960px] grid grid-cols-[64px,repeat(7,1fr)] gap-2">
{/* Header */}
<div className="min-w-[54px] p-2 font-bold text-center bg-grayscale-200 select-none">
Time
</div>
{days.map((day) => (
<div
key={day}
className="p-2 font-bold text-center select-none bg-grayscale-200"
>
{day}
</div>
))}
{/* Time Slots */}
{timeSlots.map((time, rowIndex) => (
<React.Fragment key={rowIndex}>
{/* Time Column */}
<div className="min-w-[54px] p-2 font-bold text-center bg-grayscale-100 select-none">
{time}
</div>
{days.map((_, colIndex) => {
const slotIndex = colIndex * timeSlots.length + rowIndex;
const isSelected = selectedSlots.includes(slotIndex);
const schedule = schedules.find((s) =>
s.time_indices.includes(slotIndex)
);
return (
<div
key={slotIndex}
className={`p-2 border rounded ${
schedule
? `${getColorForTitle(schedule.title)} text-white`
: isSelected
? "bg-primary-100 border-primary-300"
: "bg-grayscale-50 cursor-pointer"
}`}
onClick={() => handleSlotClick(slotIndex)}
>
{schedule ? schedule.title : ""}
</div>
);
})}
</React.Fragment>
))}
</div>
</div>
</div>
</div>
);
};
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment