AppBar 및 웹 폰트 적용하여 디자인 개편

App bar with search field

필요한 라이브러리 설치

yarn add @mui/icons-material

필요한 경로에 설치해야한다. 여기서는 client

코드 템플릿에 있는 css 부분 모두 복붙한다.

AppBar에 해당하는 부분도 출력 코드 상단에 추가한다.

mui 컴포넌트라 아닌 놈들은 sx가 안먹으니 style로 먹인다.

한글 폰트 적용

index.css

상단에 추가한다.

@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);

"Noto Sans KR을 최고 우선순위 폰트로 설정한다.

body {
  margin: 0;
  font-family: "Noto Sans KR", -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

index.js

테마 관련 라이브러리를 불러오는데 중괄호로 감싸야한다.

import { createTheme } from '@mui/material/styles';
import { ThemeProvider } from '@mui/material/styles';

테마를 설정하고

const theme = createTheme({
  typography: {
    fontFamily: '"Noto Sans KR", serif',
  }
});

App 또한 ThmeProvider로 감싸야한다.

  <ThemeProvider theme={theme}>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </ThemeProvider>