전역 스타일

지금까지 프로젝트를 하면서 전역스타일에 대해 알지 못했다. 그래서 지금까지 일일히 각각의 컴포넌트 지정해서 하나하나 css 작업을 했다.
지금 생각해도 너무 바보 같다.
그러다가 프로젝트를 같이 하시는 분이 전역스타일 이라는걸 만드셨고 알게 되었다.
전역스타일이란 스타일을 지정해서 애플리케이션 최상단에 두면 하위 컴포넌트가 해당 스타일을 쓸 수가 있다.
그래서 프로젝트를 할 때 디자인 시스템을 만들 수 있게 된다.

:root {
    /* Fonts */
    --main-font: 'Inter', sans-serif;

    /* Colors */
    --color-primary: #1B4B66;
    --color-primary-tint: #639599;
    --color-error: #B00020;
    --color-highlight: #FF8C4B;
    --color-dark: #13101E;
    --color-bright: #FFFFFF;
    --color-light-text: #B6B6B6;
    --color-high-emphasis: #171520;
    --color-low-emphasis: #626262;
    --color-grey: #F1F1F1;
    --color-accent: #F4F4F4;

    /* Font-sizes */
    --font-size-xl: 40px;
    --font-size-lg: 34px;
    --font-size-md: 20px;
    --font-size-sm: 16px;
    --font-size-xs: 14px;
    --font-size-xxs: 12px;

    /* Font-weights */
    --font-weight-bold: 700;
    --font-weight-semibold: 600;
    --font-weight-medium: 500;
    --font-weight-regular: 400;

    /* Line-heights */
    --line-height-xl: 52px;
    --line-height-lg: 44px;
    --line-height-md: 26px;
    --line-height-sm: 20px;
    --line-height-xs: 18px;
    --line-height-xxs: 16px;
}

body {
    font-family: var(--main-font);
    color: var(--color-high-emphasis);
}

이렇게 global.css로 만들어 주고

import "./styles/global.css";
import Router from "./shared/Router";
import { RecoilRoot } from "recoil";

function App() {
  return (
    <RecoilRoot>
      <Router />
    </RecoilRoot>
  );
}

export default App;

app.js 에 임포트 시켜주면 이제 모두 쓸 수있게 된다.
body에 메인폰트 및 컬러 등등 지정해 주면 기본 값을 설정된다.
매우 편리하다. 정말 알면 알수록 유용한 기술이 많은 것 같다