diff --git a/meezzle-front/components/event/View/ViewTable.tsx b/meezzle-front/components/event/View/ViewTable.tsx index 3f471cd..14cf64c 100644 --- a/meezzle-front/components/event/View/ViewTable.tsx +++ b/meezzle-front/components/event/View/ViewTable.tsx @@ -88,10 +88,9 @@ const ViewTable = ({ }; const ref = useRef(false); - + const timeBlockStart: number = checkableTimes[0] % 100; // 선택 가능한 최초 시간대 + const timeBlockEnd: number = Math.max(...checkableTimes) % 100; // 선택 가능한 최후 시간대 useEffect(() => { - // 가상의 fetch - // setRows([]); const makeRows = (info: any, r: number) => { return (
@@ -102,6 +101,13 @@ const ViewTable = ({ ? false : true; + if ( + key % 100 < timeBlockStart || + key % 100 > timeBlockEnd || + isNaN(timeBlockStart) + ) + return false; + return ( {e}
; }) ); + + const startTime: number = Math.floor(timeBlockStart / 2); + const isHalfTime: number = timeBlockStart % 2; + const min: number | string = isHalfTime ? 30 : "00"; + const endTime: number = isHalfTime + ? Math.floor(timeBlockEnd / 2) + : Math.ceil(timeBlockEnd / 2); + + const makeTimeRow = (hour: number) => { + if (hour === 24 && min === 30) return false; // 24:30 제외 + + if (hour >= startTime && hour <= endTime) { + return ( + + {hour}:{min} + + ); + } else return false; + }; for (let i = 0; i <= 24; i++) { - setTime((time) => [...time, {i}:00]); + setTime((time) => [...time, makeTimeRow(i)]); } }, []); @@ -217,7 +242,6 @@ const TimeBlock = styled.span<{ const Time = styled.div` display: block; width: 8%; - height: 646px; font-size: 9px; margin-top: 14px;