styled-components 폰트적용

구글폰트 링크 index.html에 삽입

//index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="<https://fonts.googleapis.com>" />
    <link rel="preconnect" href="<https://fonts.gstatic.com>" crossorigin />
    <link rel="preconnect" href="<https://fonts.googleapis.com>" />
    <link rel="preconnect" href="<https://fonts.gstatic.com>" crossorigin />
    <link rel="preconnect" href="<https://fonts.googleapis.com>" />
    <link rel="preconnect" href="<https://fonts.gstatic.com>" crossorigin />
    
    <title>Document</title>
  </head>

  <body>
    <div id="root"></div>
  </body>
</html>

GlobalStyle.js의 body에 아래와 같이 적용

import { createGlobalStyle } from 'styled-components';
import reset from 'styled-reset';

const GlobalStyle = createGlobalStyle`
  ${reset}
  * {
    box-sizing : border-box;
  }
  body{
    font-family: 'Noto Sans KR', sans-serif;
  }
`;

export default GlobalStyle;

theme.js에 fontLogo부분도 변경

import { css } from 'styled-components';

export const theme = {
  mainBlack: '#000000',
  mainWhite: '#FFFFFF',
  mainPink: '#FF385C',
  mainGrey: '#F7F7F7',
  darkGrey: '#797979',

  fontLogo: "'Song Myung', serif",

  fontLarge: '48px',
  fontMedium: '28px',
  fontSemiMedium: '20px',
  fontRegular: '18px',
  fontSmall: '16px',
  fontMicro: '14px',

  weightBold: 700,
  weightSemiBold: 600,
  weightRegular: 400,

  absoluteCenter: css`
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  `,
};

export const mixins = {
  // flex
  flexBox: (direction = 'row', align = 'center', justify = 'center') => `
    display: flex;
    flex-direction: ${direction};
    align-items: ${align};
    justify-content: ${justify};
  `,
};

index.js 파일 다음과 같이 변경. (react version 18로 업데이트 하여 ReactDom.render은 더이 상 사용되지 않음)

import React from 'react';
import ReactDOM from 'react-dom';
import Router from './Router';
import GlobalStyle from './styles/GlobalStyle';
import { ThemeProvider } from 'styled-components';
import { theme, mixins } from './styles/theme';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <>
    <GlobalStyle />
    <ThemeProvider theme={{ ...theme, ...mixins }}>
      <Router />
    </ThemeProvider>
  </>
);