이제 우린 필요한 정보를 담은 배열도 있겠다, 유저가 클릭해서 문제를 풀 수 있는 격자를 만들어 줘야 한다. 격자를 어떻게 만들까 고민하다가 최근 사용한 mui 라는 라이브러리를 이용해 구현해 볼까 한다. mui는 공식 문서가 정말 잘 정리되어 있어서 사용하기 편리하다.

npm install @mui/material @emotion/react @emotion/styled

바로 설치한다.

https://mui.com/material-ui/react-grid2/

여기를 보고 만들어 볼 것이다. 필요한 라이브러리를 import 해 주고

function App() {
  var answerGrid = gameData[0].answer;
  var gridData = [CreateGrid_X(answerGrid), CreateGrid_Y(answerGrid)];
  console.log(gridData);
  return (
    <div>
      <h1>Test React</h1>
      <Box>
        {Array.from(answerGrid).map((_, x) => (
          <Grid container>
            {Array.from(
              answerGrid[x].map((_, y) => (
                <Item>
                  {x},{y}
                </Item>
              ))
            )}
          </Grid>
        ))}
      </Box>
    </div>
  );
}

이렇게 테스트 코드를 짜 봤다. 그리고 격자를 더 잘 보기 위해 App.css를 추가했다. 사실 별 내용은 없다. 그냥 배경을 검은색으로 만들었다.

그럼 이렇게 좌표와 함께 격자가 표시된다.

더 어려운 퍼즐을 추가하기 위해 데이터를 추가했다. 혹시 5 x 5 이상으로 하면 깨질 수도 있기 때문에.. 넉넉하게 14 x 16으로 준비했다. 정사각형 형태의 퍼즐만 존재하는게 아니기 때문이다. 잘 생성되는 것 같다. 그런데 뭔가 겹쳐져 있다고 해야 하나, Paper를 사용해서 그런 거 같다. 간격을 조금씩만 벌려주겠다.

const Item = styled(Paper)(({ theme }) => ({
  backgroundColor: theme.palette.mode === "dark" ? "#1A2027" : "#fff",
  ...theme.typography.body2,
  margin: "5px",
  padding: theme.spacing(2),
  textAlign: "center",
  borderRadius: "5px",
  width: "20px",
  height: "20px",
  color: theme.palette.text.secondary,
}));

Item의 style을 다음과 같이 수정한다.

이제 위와 옆에 힌트를 적는 코드를 작성해 보겠다.