feat: [게임] 반응형 레이아웃 설정

🍯 작업 내용

그리드 반응형 레이아웃 적용 1023이하에서 row 레이아웃 적용

chakra 컴포넌트

  createBreakpoints({
    sm: '480px',
    md: '768px',
    lg: '1024px',
    xl: '1280px',
  });

// ex. base (1024 미만) 까지 value1 값 적용, lg (1024px)이상부터 value2 값 적용
<GridItem {{base: value1, lg: value2}} />

css 보정이 필요할 경우


// 아래 믹스인 사용
@mixin mobileDevice() {
  @media (max-width: 1023px) {
    @content;
  }
}

@include mobileDevice {
  //속성
}

Aug-01-2022 15-01-55