반응형 스타일 관리

• 중단점(breakpoints)이 설정된 JavaScript 객체 정의

• CSS 미디어 쿼리를 사용해 각 중단점에 대한 장치(device) 정의

• 스타일 컴포넌트에서 중단점이 설정된 객체를 가져와 활용

1. 중단점/장치 구성 설정

반응 스타일 환경설정 파일(src/config/responsiveConfig.js)을 만든 후, 다음과 같이 중단점(breakpoint)과 장치(device)를 구성한다.

중단점 설계(design)는 프로젝트 또는 상황에 따라 변동될 수 있다.

// 중단점
const breakpoint = {
  mobileS: 320,
  mobileM: 375,
  mobleL: 425,
  tablet: 768,
  laptop: 1024,
  laptopL: 1440,
  desktop: 2560,
};

// 장치
export const device = {
  mobileS: `(min-width: ${breakpoint.mobileS}px)`,
  mobileM: `(min-width: ${breakpoint.mobileM}px)`,
  mobleL: `(min-width: ${breakpoint.mobleL}px)`,
  tablet: `(min-width: ${breakpoint.tablet}px)`,
  laptop: `(min-width: ${breakpoint.laptop}px)`,
  laptopL: `(min-width: ${breakpoint.laptopL}px)`,
  desktop: `(min-width: ${breakpoint.desktop}px)`,
};

2. 스타일 컴포넌트 설정

반응형 스타일 구성 파일을 호출한 후, 장치(device) 객체의 속성 중 하나를 가져와 CSS 미디어 쿼리의 값으로 설정할 수 있다.

// 반응형 스타일 구성 파일에서 장치 정보 호출
import { device } from '@config/responsiveConfig';

// 스타일 컴포넌트
const StyledMain = styled.main`
  margin-top: 90px;
  max-width: 960px;
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 40px;

  @media screen and ${device.tablet} {
    margin-left: auto;
    margin-right: auto;
  }
`;

3. 오류

오류가 발생하는데.. 문제가 있는 거 아닌가요?

expectedts-styled-plugin(9999) 오류가 발생했음을 VS Code에서 보여주는데 컴파일 상에서는 문제가 없습니다. 이 문제는 설치된 vscode-styled-components 확장이 의존하는 typescript-styled-plugin 확장에서 문제 원인이 있는 것으로 파악됩니다. vscode-styled-components 확장을 '사용 안함'으로 설정하면 오류는 더 이상 표시되지 않습니다. mjbvz는 이 문제를 해결할 수 있도록 코드 수정을 요청 (opens new window)했으나 아직 받아들여지지 않아 미해결 상태입니다. 다소 오류가 거슬리더라도... 현재로선 무시해야 할 듯합니다.