Global Style & Theme

Global Style

전역으로 스타일을 지정

createGlobalStyle

전역 스타일을 처리하는 특별한 스타일드 컴포넌트를 생성하는 헬퍼 함수

일반적인 스타일드 컴포넌트는 자동으로 클래스 범위가 지정되어 다른 컴포넌트로부터 격리되지만 createGlobalStyle 은 이러한 제한이 없어서 전역 스타일링이 가능하다.

전역 스타일에 reset css를 추가하여 초기화도 가능하다.

The 62.5% Font Size Trick

// styles/GlobalStyle.ts
import { createGlobalStyle } from 'styled-components';
import reset from 'styled-reset';

const GlobalStyle = createGlobalStyle`
  ${reset}
  html {
    box-sizing: border-box;
  }

  *,
  *::before,
  *::after {
    box-sizing: inherit;
  }

  html {
  // 브라우저의 폰트 크기 설정과 연동되는 rem 단위를 사용,
  // rem 단위를 계산하기 쉽게 하기 위해 기본 폰트를 62.5%(10px)로 설정한다.
    font-size: 62.5%; // 10px, (100% === 16px)
  }

  body {
    font-size: 1.6rem;
  }

  :lang(ko) {
  // 한글로 작성된 요소 중 헤딩 태그에 의도치 않은 줄바꿈을 방지하기 위해 설정
    h1, h2, h3 {
      word-break: keep-all;
    }
  }
`;

export default GlobalStyle;

import GlobalStyle from './styles/GlobalStyle';

export default function App() {
  return (
    <>
      <GlobalStyle />
      <Greeting />
    </>
  );
}

Reset CSS란 브라우저에 기본적으로 설정된 스타일을 제거하기 위해 사용된다.

Install

npm i styled-reset

Usage

import { Reset } from 'styled-reset';

export default function App() {
  return (
    <>
      <Reset />
      <Greeting />
    </>
  );
}

Theme

디자인 시스템 전체에서 사용되는 색상, 타이포그래피, 아이콘 등의 디자인 요소의 집합

테마를 정의할 때 디자인 시스템에서 사용되는 컬러 팔레트, 타이포그래피, 간격 등을 토큰으로 관리하고, 이를 이용해서 디자인 시스템 전체의 일관성 있는 디자인을 유지하고 작업의 효율성을 높힌다.

디자인 토큰(token)이란 디자인 요소의 속성 값을 변수화하여 관리하는 방식

Token Naming

눈에 보이는 단편적인 정보를 넘어서, “의미”에 집중

디자인 시스템 사용자가 특정 토큰의 디자인 의도와 사용법을 이해할 수 있도록 하는 것이 가장 중요하다.

이러한 철학은 의도에 따른 디자인을 가능케 한다.

컬러 토큰을 예로 들면 색상 값에 얽매이지 않고 의도가 더 잘 담긴 추상화된 네이밍을 사용하는 것이 좋다,

추후 색상값이 변경되는 상황이 생겨도 코드 변경이 쉽고, 유지보수성이 높다.

하지만 어떤 경우는 의도가 담긴 네이밍을 사용하기 어려울 수도 있다. 중요한건 일관성과 가독성이다.

Theme Provider

스타일드 컴포넌트에서 제공되는 ThemeProvider는 내부적으로 Context API를 사용하여 자식들에게 테마 데이터를 제공한다.

import { ThemeProvider } from 'styled-components';

import { GlobalStyle, theme } from '@/styles';

const App = () => (
  <ThemeProvider theme={theme}>
    <GlobalStyle />
    <Greeting />
  </ThemeProvider>
);

export default App;

테마 타입 선언 병합

스타일 컴포넌트 타입 정의 파일에 선언된 테마 인터페이스 타입을 사용자가 만든 테마의 타입으로 확장하려면, 선언 병합을 사용해야 한다.

사용자가 정의한 테마에서 역으로 타입을 추출해서 확장하면 편-하다.

styled.d.ts

import 'styled-components';

import { defaultTheme } from '@/styles';

type Theme = typeof defaultTheme;

declare module 'styled-components' {
  export interface DefaultTheme extends Theme {}
}

타입 속성을 확장하는 것을 선언 병합(declaration merging)이라 한다. 같은 interface를 재선언 함으로써 타입 속성을 추가시킬 수 있다. → 보강

.d.ts는 TypeScript에서 타입 정의(type definition)를 위한 파일 확장자,

declare module은 Typescript에서 외부 모듈에 대한 타입 선언을 제공하는 구문

DarkMode 구현하기

테마를 갈아끼우는 식으로 다크모드를 구현 가능

useDarkTheme

import { useLocalStorage, useMediaQuery, useUpdateEffect } from 'usehooks-ts'

const COLOR_SCHEME_QUERY = '(prefers-color-scheme: dark)'

interface UseDarkModeOutput {
  isDarkMode: boolean
  toggle: () => void
  enable: () => void
  disable: () => void
}

function useDarkMode(defaultValue?: boolean): UseDarkModeOutput {
  const isDarkOS = useMediaQuery(COLOR_SCHEME_QUERY)
  const [isDarkMode, setDarkMode] = useLocalStorage<boolean>(
    'usehooks-ts-dark-mode',
    defaultValue ?? isDarkOS ?? false,
  )

  // Update darkMode if os prefers changes
  useUpdateEffect(() => {
    setDarkMode(isDarkOS)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isDarkOS])

  return {
    isDarkMode,
    toggle: () => setDarkMode(prev => !prev),
    enable: () => setDarkMode(true),
    disable: () => setDarkMode(false),
  }
}

export default useDarkMode

export default function App() {
const { isDarkMode, toggle } = useDarkMode();

const theme = isDarkMode ? darkTheme : defaultTheme;

return (
  <ThemeProvider theme={theme}>
    <GlobalStyle />
    <Greeting />
    <Button onClick={toggle}>
      Dark Theme Toggle
    </Button>
  </ThemeProvider>
  );
}

jest 'window.matchMedia' 오류

jest에서 사용되는 jsdom에서 구현되지 않은 메서드를 사용할 때 오류를 발생시킨다.

이 경우 모킹을 통해 해결이 가능하다

setupTests.ts

Object.defineProperty(window, 'matchMedia', {
  writable: true,
  value: jest.fn().mockImplementation((query) => ({
    matches: false,
    media: query,
    onchange: null,
    addListener: jest.fn(), // deprecated
    removeListener: jest.fn(), // deprecated
    addEventListener: jest.fn(),
    removeEventListener: jest.fn(),
    dispatchEvent: jest.fn(),
  })),
});