[Feat] 스케쥴러 반응형 슬롯 #684

components/admin/scheduler/SchedulerCurrent.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useState } from 'react';
-import instance from 'utils/axios';
 import styles from 'styles/admin/scheduler/SchedulerCurrent.module.scss';
 
 type Match = {
@@ -15,30 +14,82 @@ type Slots = {
   mode: string;
 };
 
-export default function SchedulerCurrent(props: { slotInfo: Match }) {
+type EditedSchedule = {
+  viewTimePast: number;
+  viewTimeFuture: number;
+  gameTime: number;
+  blindShowTime: number;
+  futurePreview: number;
+};
+
+export default function SchedulerCurrent(props: {
+  slotInfo: Match;
+  scheduleInfo: EditedSchedule;
+  firstHour: number;
+  lastHour: number;
+  currentHour: number;
+}) {
   const [slotInfo, setSlotInfo] = useState<Match>({
     intervalMinute: 0,
     matchBoards: [],
   });
 
   const initSlotInfo = () => {
-    setSlotInfo(props.slotInfo);
+    const noSlotIndex: number =
+      props.currentHour +
+      props.scheduleInfo.futurePreview -
+      props.scheduleInfo.viewTimePast;
+    const updatedMatchBoards = props.slotInfo.matchBoards.map(
+      (slots, index) => {
+        if (
+          parseInt(`${props.firstHour}`) + index <
+          /* noSlotIndex < 0 ? noSlotIndex + 24 :  */ noSlotIndex //todo: 오후 12시 전/후 확인필요
+        ) {
+          const updatedSlots: Slots[] = slots.map((slot) => {
+            return { ...slot, status: 'noSlot' };
+          });
+          return updatedSlots;
+        } else if (
+          index <
+          props.currentHour - props.firstHour + props.scheduleInfo.futurePreview
+        ) {
+          const updatedSlots: Slots[] = slots.map((slot) => {
+            return { ...slot, status: 'close' };
+          });
+          return updatedSlots;
+        } else {
+          return slots;
+        }
+      }
+    );
+    setSlotInfo({
+      ...props.slotInfo,
+      matchBoards: updatedMatchBoards,
+    });
   };
 
   useEffect(() => {
     initSlotInfo();
-  }, []);
+  }, [props]);
 
   return (
-    <div className={styles.current}>
+    <div>
       {slotInfo.matchBoards.map((slot: Slots[], index) => {
+        const slotTime =
+          parseInt(slot[0].time[11]) * 10 + parseInt(slot[0].time[12]);
         return (
           <div key={index} className={styles.hourContainer}>
-            <div className={styles.time}>
-              {slot[0].time[11] === '0' ? '' : slot[0].time[11]}
-              {slot[0].time[12]}시
+            <div
+              className={
+                slotTime ===
+                props.currentHour + props.scheduleInfo.futurePreview
+                  ? styles.currentTime
+                  : styles.time
+              }
+            >
+              {slotTime}시
             </div>
-            <div className={styles[`hourSlot${slot.length}`]}>
+            <div className={styles.hourSlot}>
               {slot.map((item) => (
                 <div
                   key={item.slotId}

components/admin/scheduler/SchedulerMain.tsx

@@ -9,6 +9,7 @@ type EditedSchedule = {
   viewTimeFuture: number;
   gameTime: number;
   blindShowTime: number;
+  futurePreview: number;
 };
 
 type Match = {
@@ -26,10 +27,11 @@ type Slots = {
 
 export default function SchedulerMain() {
   const [scheduleInfo, setScheduleInfo] = useState<EditedSchedule>({
-    viewTimePast: 0,
-    viewTimeFuture: 0,
+    viewTimePast: 12,
+    viewTimeFuture: 12,
     gameTime: 15,
     blindShowTime: 5,
+    futurePreview: 0,
   });
 
   const [slotInfo, setSlotInfo] = useState<Match>({
@@ -39,7 +41,8 @@ export default function SchedulerMain() {
 
   const [showTime, setShowTime] = useState<number>(0);
   const [lastHour, setLastHour] = useState<number>(0);
-
+  const [firstHour, setFirstHour] = useState<number>(0);
+  const currentHour = new Date().getHours();
   const initScheduleInfo = async () => {
     try {
       // const res = await instance.get(``); //ToDo: api 명세 나오면 바꾸기
@@ -54,6 +57,10 @@ export default function SchedulerMain() {
       const res = await instance.get(`/pingpong/match/tables/${1}/rank/single`);
       setSlotInfo({ ...res?.data });
       setShowTime(res?.data.matchBoards.length);
+      setFirstHour(
+        parseInt(res?.data.matchBoards[0][0].time[11]) * 10 +
+          parseInt(res?.data.matchBoards[0][0].time[12])
+      );
       setLastHour(
         parseInt(
           res?.data.matchBoards[res?.data.matchBoards.length - 1][0].time[11]
@@ -76,9 +83,18 @@ export default function SchedulerMain() {
 
   const inputHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
+    let intValue = parseInt(value);
+    if (isNaN(intValue)) intValue = 0;
+    if (
+      ((name === 'futurePreview' || name === 'blindShowTime') &&
+        intValue < 0) ||
+      ((name === 'viewTimePast' || name === 'viewTimeFuture') && intValue < 1)
+    )
+      return;
+
     setScheduleInfo((prev) => ({
       ...prev,
-      [name]: value,
+      [name]: intValue,
     }));
   };
 
@@ -96,13 +112,20 @@ export default function SchedulerMain() {
     <div className={styles.content}>
       <div className={styles.imgContainer}>
         {slotInfo.matchBoards.length > 0 && (
-          <SchedulerCurrent slotInfo={slotInfo} />
+          <SchedulerCurrent
+            slotInfo={slotInfo}
+            firstHour={firstHour}
+            lastHour={lastHour}
+            currentHour={currentHour}
+            scheduleInfo={scheduleInfo}
+          />
         )}
         {scheduleInfo.viewTimeFuture + scheduleInfo.viewTimeFuture > 0 &&
           showTime > 0 && (
             <SchedulerPreview
               lastHour={lastHour}
               showTime={showTime}
+              currentHour={currentHour}
               scheduleInfo={scheduleInfo}
             />
           )}
@@ -114,21 +137,45 @@ export default function SchedulerMain() {
         </div>
         <div>
           과거
-          <input type='number' name='viewTimePast' onChange={inputHandler} />
+          <input
+            type='number'
+            value={scheduleInfo.viewTimePast}
+            name='viewTimePast'
+            onChange={inputHandler}
+          />
           미래
-          <input type='number' name='viewTimeFuture' onChange={inputHandler} />
+          <input
+            type='number'
+            value={scheduleInfo.viewTimeFuture}
+            name='viewTimeFuture'
+            onChange={inputHandler}
+          />
         </div>
         <div>
           게임 시간
-          <select name='gameTime' onChange={inputNumHandler}>
+          <select name='gameTime' onChange={inputHandler}>
             <option value='15'>15분</option>
             <option value='30'>30분</option>
             <option value='60'>60분</option>
           </select>
         </div>
         <div>
           블라인드 해제 시간
-          <input type='number' name='blindShowTime' onChange={inputHandler} />
+          <input
+            type='number'
+            value={scheduleInfo.blindShowTime}
+            name='blindShowTime'
+            onChange={inputHandler}
+          />
+        </div>
+        <div>
+          N시간 후:
+          <input
+            type='number'
+            value={scheduleInfo.futurePreview}
+            name='futurePreview'
+            onChange={inputHandler}
+          />
         </div>
       </div>
     </div>

components/admin/scheduler/SchedulerPreview.tsx

@@ -1,15 +1,18 @@
 import { useEffect, useState } from 'react';
+import styles from 'styles/admin/scheduler/SchedulerCurrent.module.scss';
 
 type EditedSchedule = {
   viewTimePast: number;
   viewTimeFuture: number;
   gameTime: number;
   blindShowTime: number;
+  futurePreview: number;
 };
 
 type Slots = {
   status: string;
   time: number;
+  slotId: string;
 };
 
 type Match = {
@@ -21,39 +24,118 @@ export default function SchedulerPreview(props: {
   scheduleInfo: EditedSchedule;
   showTime: number;
   lastHour: number;
+  currentHour: number;
 }) {
-  const { showTime, lastHour, scheduleInfo } = props;
+  const { showTime, lastHour, scheduleInfo, currentHour } = props;
   const [slotInfo, setSlotInfo] = useState<Match>({
     intervalMinute: 0,
     matchBoards: [],
   });
 
-  useEffect(() => {
-    console.log(slotInfo);
-  }, [slotInfo]);
-
-  useEffect(() => {
-    initSlotInfo();
-  }, [props]);
+  const initEmptySlot = () => {
+    const slots: Slots[][] = Array(0).fill(null);
+    return slots;
+  };
 
-  const initSlotInfo = () => {
+  const initSlotInfo = (slots: Slots[][]) => {
     const scheduleTime: number =
-      parseInt(`${scheduleInfo.viewTimePast}`) +
-      parseInt(`${scheduleInfo.viewTimeFuture}`);
-    if (scheduleTime >= showTime) {
-      const slots: Slots[][] = Array(scheduleTime - showTime + 1)
+      lastHour - currentHour < 0
+        ? lastHour - currentHour + 24
+        : lastHour - currentHour;
+    if (
+      scheduleTime <=
+        scheduleInfo.viewTimeFuture + scheduleInfo.futurePreview &&
+      scheduleInfo.futurePreview >= 0 &&
+      scheduleInfo.viewTimeFuture -
+        scheduleTime +
+        scheduleInfo.futurePreview +
+        1 >
+        0
+    ) {
+      const countNewSlot: number =
+        scheduleInfo.viewTimeFuture -
+        scheduleTime +
+        scheduleInfo.futurePreview +
+        1;
+      const newSlots: Slots[][] = Array(countNewSlot)
         .fill(null)
-        .map((i: number) =>
-          Array(60 / scheduleInfo.gameTime).fill({
-            status: 'open',
-            time: lastHour + i >= 24 ? (lastHour + i) % 24 : lastHour + i,
-          })
+        .map((_, index: number) =>
+          Array(60 / scheduleInfo.gameTime)
+            .fill(null)
+            .map((_, slotIndex: number) => ({
+              status:
+                currentHour +
+                  scheduleInfo.futurePreview -
+                  scheduleInfo.viewTimePast >
+                lastHour + index
+                  ? 'noSlot'
+                  : currentHour + scheduleInfo.futurePreview > lastHour + index
+                  ? 'close'
+                  : scheduleInfo.futurePreview > 0 &&
+                    index !==
+                      scheduleInfo.viewTimeFuture -
+                        scheduleTime +
+                        scheduleInfo.futurePreview
+                  ? 'open'
+                  : 'preview',
+              time:
+                lastHour + index >= 24
+                  ? (lastHour + index) % 24
+                  : lastHour + index,
+              slotId: `${index}-${slotIndex}`,
+            }))
         );
+      setSlotInfo({
+        intervalMinute: scheduleInfo.gameTime,
+        matchBoards: newSlots.concat(slots),
+      });
+    } else {
+      const slots: Slots[][] = Array(0).fill(null);
       setSlotInfo({
         intervalMinute: scheduleInfo.gameTime,
         matchBoards: slots,
       });
     }
   };
-  return <div></div>;
+
+  useEffect(() => {
+    const emptySlots = initEmptySlot();
+    initSlotInfo(emptySlots);
+  }, [props]);
+
+  return (
+    <div className={styles.current}>
+      {slotInfo.matchBoards.map((slot: Slots[], index) => {
+        return (
+          <div key={index} className={styles.hourContainer}>
+            <div
+              className={
+                slot[0].time ===
+                (currentHour + scheduleInfo.futurePreview >= 24
+                  ? (currentHour + scheduleInfo.futurePreview) % 24
+                  : currentHour + scheduleInfo.futurePreview)
+                  ? styles.currentTime
+                  : styles.time
+              }
+            >
+              {slot[0].time}시
+            </div>
+            <div className={styles.hourSlot}>
+              {slot.map((item) => (
+                <div
+                  key={item.slotId}
+                  className={`${
+                    styles[`minuteSlot${slot.length}`]
+                  } //todo slot.length가 1,2,4가 아닐 때 처리 필요
+                ${styles[`${item.status}`]}`}
+                >
+                  <div>{item.status}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
 }