Grid란

Grid는 두 방향(가로-세로) 레이아웃 시스템 (2차원)입니다.

더 복합적인 레이아웃 표현이 가능합니다.

용어

• 그리드 컨테이너 (Grid Container)
  display: grid를 적용하는, Grid의 전체 영역입니다. Grid 컨테이너 안의 요소들이 Grid 규칙의 영향을 받아 정렬된다고 생각하면 됩니다.
• 그리드 아이템 (Grid Item)
  Grid 컨테이너의 자식 요소들입니다. 바로 이 아이템들이 Grid 규칙에 의해 배치됩니다.
• 그리드 트랙 (Grid Track)
  Grid의 행(Row) 또는 열(Column)
• 그리드 셀 (Grid Cell)
  Grid의 한 칸을 가리키는 말이에요. <div>같은 실제 html 요소는 그리드 아이템이고, 이런 Grid 아이템 하나가 들어가는 “가상의 칸(틀)”이라고 생각하면 됩니다.
• 그리드 라인(Grid Line)
  Grid 셀을 구분하는 선입니다.
• 그리드 번호(Grid Number)
  Grid 라인의 각 번호입니다.
• 그리드 갭(Grid Gap)
  Grid 셀 사이의 간격입니다.
• 그리드 영역(Grid Area)
  Grid 라인으로 둘러싸인 사각형 영역으로, 그리드 셀의 집합이에요.

grid 형태 정의

• grid-template-rows는 행(row)의 배치
• grid-template-columns는 열(column)의 배치

위의 내용은 아래의 블로그를 참고해서 작성했습니다.
참고자료

위의 간단한 grid에 대한 정리였습니다.

사용한 이유

그래서 그리드를 사용한 이유는 넥슨 오픈 api를 활용해서 게임 데이터를 가져와 정보를 보여주는 사이트를 만드는 중에 메이플이라는 게임에 유니온 공격대라는 정보를 가져왔을 때 유니온의 배치도라는게 있는데 그거를 x,y좌표를 통해서 주는 것을 확인했습니다.

이 좌표를 통해서 유니온의 배치도를 그대로 가져올 수 있게 할려고 사용하게 되었습니다.

블록 기준점 좌표
중앙 4칸 중 오른쪽 아래 칸이 x : 0, y : 0 포지션
좌측으로 1칸씩 이동하면 x가 1씩 감소
우측으로 1칸씩 이동하면 x가 1씩 증가
아래로 1칸씩 이동하면 y가 1씩 감소
위로 1칸씩 이동하면 y가 1씩 증가

위의 조건을 기반으로 제작 하게 되었습니다.

사용

완성된 이미지는 아래와 같습니다.

게임 내의 배치도에서 맞게 22*20으로 만들었고 뒤의 배경은 이미지로 입혀놨습니다.

• 중앙 4칸 중 오른쪽 아래 칸이 x : 0, y : 0 포지션
• 좌측으로 1칸씩 이동하면 x가 1씩 감소
• 우측으로 1칸씩 이동하면 x가 1씩 증가
• 아래로 1칸씩 이동하면 y가 1씩 감소
• 위로 1칸씩 이동하면 y가 1씩 증가

위의 조건을 만족하기 위해서
x 좌표는 + 12
y 좌표는 -11 을해서 주는 값을 변경하여 적용하였습니다.

코드

import React from "react";

import type { UnionBlock } from "@/types/maple/union";

const RaiderGrid = ({ item }: { item: UnionBlock[] }) => {
  return (
    {/* 22*20을 맞추가 위해 cols및 rows를 tailwind에서 더 setting하여 사용 */}
    <div className="grid grid-cols-22 grid-rows-20 w-[311px] h-[282px] bg-gray-600 bg-union bg-cover">
      {item.map((block) => {
        return block.block_position.map((item, idx) => (
          <div
            key={idx}
            className="bg-[#fdd88e] bg-opacity-80"
            style={{
              gridColumnStart: item.x + 12, {/* x좌표 */}
              gridRowStart: 11 - item.y,    {/* y좌표 */}
            }}
          ></div>
        ));
      })}
    </div>
  );
};

export default RaiderGrid;

tailwind 추가 setting 코드

import type { Config } from "tailwindcss";

const config: Config = {
	content:[],
	theme:{
    	extend:{
			gridTemplateRows: {
        		"20": "repeat(20, minmax(0, 1fr))",
      		},
      		gridTemplateColumns: {
        		"22": "repeat(22, minmax(0, 1fr))",
      		},
          // 기타 커스텀 setting
    	}
    }
}