[REACT]월드컵게임

[게임 문항 전체 조회]

  const [currentIndex, setCurrentIndex] = useState(-1);
  const getQuestions = () => {
    CallApiToStore(gameStore.getQuestions(Number(id)), 'api', loadingStore)
      .then(() => {
        // _.shuffle([...toJS(gameStore.questions[0].itemList)]);
        // setAnswers(gameStore.questions[0].itemList);
      })
      .then(() => {
        setCurrentIndex(0);
      })
      .catch((e) => {
        console.log('e', e);
      });
  };

  const handleNextWorldcup = () => {
    if (currentIndex + 1 === gameStore.questions[0].itemList.length) {
      alert('END');
    } else {
      setCurrentIndex(currentIndex + 1);
    }
  };
  const handleNextBalance = () => {
    if (currentIndex + 1 === gameStore.questions.length) {
      alert('END');
    } else {
      setCurrentIndex(currentIndex + 1);
    }
  };

[시작하기 버튼]

   <Button
              variant={'contained'}
              size={'large'}
              color={'primary'}
              sx={{ mt: 1, borderRadius: 4, fontSize: pxToRem(22), fontWeight: 600, p: 1 }}
              onClick={() => {
                getQuestions();
                setOpen(true);
              }}
            >
              시작하기
</Button>

[월드컵게임]

{
        // 월드컵 게임
        gameStore.game.gameTypeCd &&
          gameStore.game.gameTypeCd.code === 430001 &&
          gameStore.questions.map((question: IGameQuestion, i: number) => {
            return currentIndex >= i ? (
              <Dialog
                key={`game-question-${i}`}
                fullWidth
                hideBackdrop
                keepMounted
                maxWidth={'md'}
                disableEscapeKeyDown
                open={open && currentIndex >= i}
                TransitionComponent={Transition}
                PaperProps={{
                  sx: {
                    p: 0,
                    m: '0 !important',
                    maxHeight: '100% !important',
                    minHeight: '100%',
                    borderRadius: '0 !important',
                    boxShadow: 'none',
                    overflowY: 'initial',
                  },
                }}
                onClose={(e: any, reason: string) => {
                  if (reason === 'backdropClick') {
                    e.preventDefault();
                    e.stopPropagation();
                  } else {
                    setCurrentIndex(currentIndex - 1);
                  }
                }}
                sx={{
                  margin: '0 !important',
                  zIndex: 100,
                  padding: 0,
                  borderRadius: 0,
                }}
              >
                <Worldcup
                  total={gameStore.questions[0].itemList.length}
                  question={question}
                  handleClose={() => {
                    scrollRef.current?.scrollIntoView();
                    getContent();
                    setOpen(false);
                    setCurrentIndex(-1);
                  }}
                  handleNext={handleNextWorldcup}
                />
              </Dialog>
            ) : null;
          })
      }