Merge pull request #813 from 42organization/GGFE-48-Style-Match-Slot

[GGFE-48] �Match Slot 스타일
42organization · Jun 8, 2023 · 84b0d71 · 84b0d71
2 parents bfadcc7 + b9de4b0
commit 84b0d71
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 17 deletions.
diff --git a/components/match/MatchBoard.tsx b/components/match/MatchBoard.tsx
@@ -51,8 +51,8 @@ export default function MatchBoard({ type, radioMode }: MatchBoardProps) {
   const getFirstOpenSlot = () => {
     for (let i = 0; i < matchBoards.length; i++) {
       const matchSlot = matchBoards[i];
-      if (matchSlot.status === 'open') {
-        return stringToHourMin(matchSlot.startTime).nHour;
+      if (matchSlot[0].status === 'open') {
+        return stringToHourMin(matchSlot[0].startTime).nHour;
       }
     }
     return null;
@@ -83,17 +83,29 @@ export default function MatchBoard({ type, radioMode }: MatchBoardProps) {
           </button>
         </div>
         <div className={styles.matchBoard}>
-          {matchBoards.map((slot, index) => (
-            <div
-              key={index}
-              ref={getScrollCurrentRef(stringToHourMin(slot.startTime).nHour)}
-            >
-              {stringToHourMin(slot.startTime).sMin === '00' && (
-                <MatchTime startTime={slot.startTime} />
-              )}
-              <MatchSlot radioMode={radioMode} slot={slot} />
-            </div>
-          ))}
+          {matchBoards.map((slot, index) => {
+            return (
+              <div
+                key={index}
+                ref={getScrollCurrentRef(
+                  stringToHourMin(slot[0].startTime).nHour
+                )}
+              >
+                {stringToHourMin(slot[0].startTime).sMin === '00' && (
+                  <MatchTime key={index} startTime={slot[0].startTime} />
+                )}
+                <div className={styles.slotGrid}>
+                  {slot.map((minSlots, minIndex) => (
+                    <MatchSlot
+                      key={index + minIndex}
+                      radioMode={radioMode}
+                      slot={minSlots}
+                    />
+                  ))}
+                </div>
+              </div>
+            );
+          })}
         </div>
       </div>
     </>
@@ -186,7 +198,7 @@ export const MatchSlot = ({ radioMode, slot }: MatchSlotProps) => {
     status === 'close' ? 2 : status === 'mytable' || status === 'match' ? 1 : 0;
 
   return (
-    <div className={styles.slotGrid}>
+    <>
       <button
         className={`${styles.slotButton} ${buttonStyle[status]}`}
         // disabled={isDisabled}
@@ -207,6 +219,6 @@ export const MatchSlot = ({ radioMode, slot }: MatchSlotProps) => {
           {isAfterSlot && (headCount === 0 ? '+' : `${headCount}/2`)}
         </span>
       </button>
-    </div>
+    </>
   );
 };
diff --git a/styles/match/MatchBoard.module.scss b/styles/match/MatchBoard.module.scss
@@ -99,6 +99,8 @@
 .slotHour {
   display: flex;
   justify-content: space-between;
+  margin-top: 0.7rem;
+  margin-bottom: 0.5rem;
   margin-left: 0.3rem;
   color: white;
   font-size: $big-font;
@@ -107,5 +109,4 @@
 .slotGrid {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  margin-top: 0.6rem;
 }
diff --git a/types/matchTypes.ts b/types/matchTypes.ts
@@ -5,7 +5,7 @@ export interface Slot {
 }
 
 export interface Match {
-  matchBoards: Slot[];
+  matchBoards: Slot[][];
 }
 export interface CurrentMatchListElement {
   startTime: string;