_[React js]_ nonogram 개발 일지 2 일차
이제 우린 필요한 정보를 담은 배열도 있겠다, 유저가 클릭해서 문제를 풀 수 있는 격자를 만들어 줘야 한다. 격자를 어떻게 만들까 고민하다가 최근 사용한 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을 다음과 같이 수정한다.
이제 위와 옆에 힌트를 적는 코드를 작성해 보겠다.