개요

이 글은 강좌가 아닙니다. 부족한 부분이 있더라도, 너그럽게 봐주신다면 감사하겠습니다. 피드백 언제나 환영입니다 :)

BingoBoard 파일 생성

src/containers 에 BingoBoard.tsx 파일을 만들어요.

우선, 필요한 타입들부터 정의해줘요.

    // 빙고 개수 
    interface CountProps {
         count: number;
    }

    // 빙고 아이템
    interface Square {
       contents: string,
       checked: boolean
    }

그리고, 빙고판을 그리기 위한 설계를 해줍시다.

    const [count, setCount] = useState<number>(5); // n×n 빙고의 n역할, 초기값을 5로 설정

   let matrix = [];
   for (let i = 0; i < count; i++) {
      matrix[i] = new Array(count).fill({ contents: "", checked: false });
   }

이러면 5×5 크기의 빙고 뼈대가 완성이 되었네요. 자, 뼈대를 만들었으니, 살을 한번 붙여볼게요.

    const Wrapper = styled("div")`
      display: flex;
      flex-basis: content;
      position: relative;
      align-items: center;
   `

   const Board = styled("div") <CountProps>`
      display: grid;
      grid-template-columns: repeat(${props => props.count}, 5rem);
      grid-template-rows: repeat(${props => props.count}, 5rem);
      grid-gap: 5px;
   `

    return (
      <Wrapper>
         <Board count={count}>
            {matrix.map((row: Square[], rowNumber: number) =>
               row.map((el: Square, columnNumber: number) => {
                  return <BingoItem rowNumber={rowNumber} columnNumber={columnNumber} />
               })
            )}
         </Board>
      </Wrapper>
   );

위 코드를 보시면, BingoItem 컴포넌트로 rowNumber, columnNumber을 넘기는데 이 값들은 나중에 아이템을 클릭하는데 활용될거에요.

이 코드를 짜면서 row, column 두개가 너무 헷갈렸네요.

BingoItem 파일 생성

이번 글에서 BingoItem을 완성할건 아니지만, 결과물을 보기위해 간단히 만들어볼게요.

src/componentsBingoItem.tsx파일을 만들어주세요.

    interface Props {
       rowNumber: number;
       columnNumber: number;
    }

    const BingoItem = ({ rowNumber, columnNumber }: Props) => {
       const Item = styled.div`
          display: flex;
          align-items: center;
          justify-content: center;
          width: 80px;
          height: 80px;
          background-color: #fff;
          font-size: 2rem;
       `

       return (
          <Item>😍</Item>
       );
    };

글을 쓰기 위해 코드를 보니 이 파일에서는 interface가 아니라 type으로 Props가 정의되어있었어요. 다음번에는 interface와 type의 차이에 공부해서 알려드리도록 할게요.

자, 그럼 결과물을 한번 볼까요?

결과물

자, 그럼 결과물을 한번 볼까요?

캡처.PNG

5×5 크기의 빙고가 완성되었어요! css때문에 고생한건 비밀...

다음에는

다음 글에서는 BingoItem을 더 예쁘게 만들어볼거에요. 미적감각이 없어서 힘들거 같긴한데.. 노력해보도록 할게요.

저장소

모든 코드와 진행과정은 https://github.com/mango906/EmojiBingo 에서 확인 가능합니다.