[GGFE-58] match slot 토글버튼 -> 라디오버튼 변경

components/match/MatchBoard.tsx

@@ -14,10 +14,10 @@ import { currentMatchState } from 'utils/recoil/match';
 
 interface MatchBoardProps {
   type: string;
-  toggleMode: MatchMode;
+  radioMode: MatchMode;
 }
 
-export default function MatchBoard({ type, toggleMode }: MatchBoardProps) {
+export default function MatchBoard({ type, radioMode }: MatchBoardProps) {
   const [match, setMatch] = useState<Match | null>(null);
   const [spinReloadButton, setSpinReloadButton] = useState<boolean>(false);
   const setModal = useSetRecoilState(modalState);
@@ -27,7 +27,7 @@ export default function MatchBoard({ type, toggleMode }: MatchBoardProps) {
     setMatch,
     setSpinReloadButton,
     type,
-    toggleMode,
+    radioMode,
   });
 
   useEffect(() => {
@@ -45,7 +45,7 @@ export default function MatchBoard({ type, toggleMode }: MatchBoardProps) {
     return <div className={styles.notice}>❌ 열린 슬롯이 없습니다 😵‍💫 ❌</div>;
 
   const openManual = () => {
-    setModal({ modalName: 'MATCH-MANUAL', manual: { toggleMode: toggleMode } });
+    setModal({ modalName: 'MATCH-MANUAL', manual: { radioMode: radioMode } });
   };
 
   const getFirstOpenSlot = () => {
@@ -89,9 +89,9 @@ export default function MatchBoard({ type, toggleMode }: MatchBoardProps) {
               ref={getScrollCurrentRef(stringToHourMin(slot.startTime).nHour)}
             >
               {stringToHourMin(slot.startTime).sMin === '00' && (
-                <MatchTime key={index} startTime={slot.startTime} />
+                <MatchTime startTime={slot.startTime} />
               )}
-              <MatchSlot key={index - 1} toggleMode={toggleMode} slot={slot} />
+              <MatchSlot radioMode={radioMode} slot={slot} />
             </div>
           ))}
         </div>
@@ -125,11 +125,11 @@ export const MatchTime = ({ startTime }: MatchTimeProps) => {
 };
 
 interface MatchSlotProps {
-  toggleMode: MatchMode;
+  radioMode: MatchMode;
   slot: Slot;
 }
 
-export const MatchSlot = ({ toggleMode, slot }: MatchSlotProps) => {
+export const MatchSlot = ({ radioMode, slot }: MatchSlotProps) => {
   const setModal = useSetRecoilState<Modal>(modalState);
   const { event } = useRecoilValue<Live>(liveState);
   const { match } = useRecoilValue<CurrentMatchList>(currentMatchState);
@@ -154,7 +154,7 @@ export const MatchSlot = ({ toggleMode, slot }: MatchSlotProps) => {
         enroll: {
           startTime: startTime,
           endTime: endTime,
-          mode: toggleMode,
+          mode: radioMode,
         },
       });
     }
@@ -164,8 +164,8 @@ export const MatchSlot = ({ toggleMode, slot }: MatchSlotProps) => {
     () => ({
       mytable: status === 'mytable' ? styles.mytable : styles.disabled,
       close: styles.disabled,
-      open: toggleMode === 'RANK' ? styles.rank : styles.normal,
-      match: toggleMode === 'RANK' ? styles.rank : styles.normal,
+      open: radioMode === 'RANK' ? styles.rank : styles.normal,
+      match: radioMode === 'RANK' ? styles.rank : styles.normal,
     }),
     [slot]
   );

components/modal/match/MatchManualModal.tsx

@@ -1,36 +1,36 @@
-import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { useState } from 'react';
+import { useSetRecoilState } from 'recoil';
 import { MatchMode } from 'types/mainType';
 import { Manual } from 'types/modalTypes';
 import { modalState } from 'utils/recoil/modal';
-import { seasonListState } from 'utils/recoil/seasons';
-import styles from 'styles/modal/match/MatchManualModal.module.scss';
-import useModeToggle from 'hooks/mode/useModeToggle';
 import ModeToggle from 'components/mode/modeItems/ModeToggle';
+import styles from 'styles/modal/match/MatchManualModal.module.scss';
 
-export default function MatchManualModal({ toggleMode }: Manual) {
+export default function MatchManualModal({ radioMode }: Manual) {
   const setModal = useSetRecoilState(modalState);
-  const seasonMode = 'both';
-  const { onToggle, Mode } = useModeToggle(toggleMode);
+  const [manualMode, setManualMode] = useState<MatchMode>(radioMode);
 
   const onReturn = () => {
     setModal({ modalName: null });
   };
 
+  const onToggle = () => {
+    setManualMode(manualMode === ('RANK' || 'BOTH') ? 'NORMAL' : 'RANK');
+  };
+
   return (
     <div className={styles.container}>
       <div className={styles.title}>Please!!</div>
-      {seasonMode === 'both' && (
-        <div className={styles.toggleContainer}>
-          <ModeToggle
-            checked={Mode === 'RANK'}
-            onToggle={onToggle}
-            id={'manualToggle'}
-            text={Mode === 'RANK' ? '랭크' : '일반'}
-          />
-        </div>
-      )}
+      <div className={styles.toggleContainer}>
+        <ModeToggle
+          checked={manualMode === 'RANK'}
+          onToggle={onToggle}
+          id={'manualToggle'}
+          text={manualMode === 'RANK' ? '랭크' : '일반'}
+        />
+      </div>
       <ul className={styles.ruleList}>
-        {manualSelect(Mode).map(
+        {manualSelect(radioMode).map(
           (item: { title: string; description: string[] }, index) => (
             <li key={index}>
               {item.title}
@@ -127,5 +127,5 @@ const modalContentsRank: { title: string; description: string[] }[] = [
   },
 ];
 
-const manualSelect = (modalToggleMode: MatchMode) =>
-  modalToggleMode === 'RANK' ? modalContentsRank : modalContentsNormal;
+const manualSelect = (radioMode: MatchMode) =>
+  radioMode === ('RANK' || 'BOTH') ? modalContentsRank : modalContentsNormal;

components/mode/modeWraps/MatchModeWrap.tsx

@@ -1,35 +1,28 @@
-import React from 'react';
+import React, { SetStateAction } from 'react';
 import { MatchMode } from 'types/mainType';
-import ModeToggle from 'components/mode/modeItems/ModeToggle';
-import useModeToggle from 'hooks/mode/useModeToggle';
-import styles from 'styles/mode/ModeWrap.module.scss';
+import { Dispatch } from 'react';
+import ModeRadiobox from '../modeItems/ModeRadiobox';
 
 interface MatchModeWrapProps {
   children: React.ReactNode;
-  toggleMode: MatchMode;
+  radioMode: MatchMode;
+  setRadioMode: Dispatch<SetStateAction<MatchMode>>;
 }
 
 export default function MatchModeWrap({
   children,
-  toggleMode,
+  radioMode,
+  setRadioMode,
 }: MatchModeWrapProps) {
-  const seasonMode = 'RANK';
-  const { onToggle, Mode } = useModeToggle(toggleMode);
+  const modeChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setRadioMode(e.target.value as MatchMode);
+  };
 
   return (
     <div>
-      {seasonMode === 'RANK' && (
-        <div className={styles.matchModeWrap}>
-          <ModeToggle
-            checked={Mode === 'RANK'}
-            onToggle={onToggle}
-            id={'matchToggle'}
-            text={Mode === 'RANK' ? '랭크' : '일반'}
-          />
-        </div>
-      )}
+      <ModeRadiobox mode={radioMode} onChange={modeChangeHandler} />
       {React.cloneElement(children as React.ReactElement, {
-        toggleMode: Mode,
+        mode: radioMode,
       })}
     </div>
   );

hooks/match/useGetReloadMatchHandler.ts

@@ -11,19 +11,19 @@ interface useGetReloadMatchHandlerProps {
   setMatch: Dispatch<SetStateAction<Match | null>>;
   setSpinReloadButton: Dispatch<SetStateAction<boolean>>;
   type: string;
-  toggleMode: MatchMode;
+  radioMode: MatchMode;
 }
 
 const useGetReloadMatchHandler = ({
   setMatch,
   setSpinReloadButton,
-  toggleMode,
+  radioMode,
 }: useGetReloadMatchHandlerProps): (() => void) => {
   const [reloadMatch, setReloadMatch] =
     useRecoilState<boolean>(reloadMatchState);
 
   const getMatchHandler = useAxiosGet({
-    url: `/pingpong/match/time/scope?mode=${toggleMode}`,
+    url: `/pingpong/match/time/scope?mode=${radioMode}`,
     setState: setMatch,
     err: 'SJ01',
     type: 'setError',
@@ -37,7 +37,7 @@ const useGetReloadMatchHandler = ({
 
   useEffect(() => {
     getMatchHandler();
-  }, [toggleMode]);
+  }, [radioMode]);
 
   useEffect(() => {
     if (reloadMatch) getMatchHandler();

pages/match.tsx

@@ -5,18 +5,19 @@ import MatchModeWrap from 'components/mode/modeWraps/MatchModeWrap';
 import styles from 'styles/match/match.module.scss';
 
 export default function Match() {
-  const [toggleMode] = useState<MatchMode>('RANK');
   const content = {
     NORMAL: { style: styles.normal },
     RANK: { style: '' },
     BOTH: { style: '' },
   };
 
+  const [radioMode, setRadioMode] = useState<MatchMode>('BOTH');
+
   return (
     <div className={styles.container}>
-      <h1 className={`${styles.title} ${content[toggleMode].style}`}>Match</h1>
-      <MatchModeWrap toggleMode={toggleMode}>
-        <MatchBoard toggleMode={toggleMode} type='single' />
+      <h1 className={`${styles.title} ${content[radioMode].style}`}>Match</h1>
+      <MatchModeWrap radioMode={radioMode} setRadioMode={setRadioMode}>
+        <MatchBoard radioMode={radioMode} type='single' />
       </MatchModeWrap>
     </div>
   );

types/modalTypes.ts

@@ -49,11 +49,11 @@ export interface Exp {
 }
 
 export interface Manual {
-  toggleMode: MatchMode;
+  radioMode: MatchMode;
 }
 
 export interface manual {
-  toggleMode: MatchMode;
+  radioMode: MatchMode;
 }
 
 export interface ISeason {