vbalien commented 3 years ago

material ui내부에서 emotion를 사용하고 있기 때문에 material ui에서 제공하는 style 기능을 사용하는게 좋으며 css파일은 불필요합니다.

reference

https://mui.com/customization/typography/#self-hosted-fonts

그리고 각 페이지별로 theme 생성하지 마시고 폰트를 변경할 컴포넌트의 fontFamily속성을 사용해주세요. background도 마찬가지입니다.

예)

function MarketPage() {
  ...

  return (
    <Box fontFamily="NotoSans">
       <....>
    </Box>
  );
}

ThemeProvider는 보통의 경우 main.tsx(루트 컴포넌트)에 하나만 존재하는게 이상적입니다. CssBaseline을 여러 곳에서 사용하면 global style을 오염시키게 됩니다.

또한 js import구문으로 가져올 수 있는 리소스 파일은 src/assets/image.png(global하게 사용될 경우) 혹은 src/[사용되는 컴포넌트 폴더경로]/assets/image.png(단일 컴포넌트에서만 사용되는 경우)과 같은 디렉토리로 옮겨서 import하는게 좋을 것 같습니다. (webpack build시 import된 파일은 file-loader로 정리됩니다.)

RaonPark commented 3 years ago

src 밑으로 옮겼을 때 파일 경로를 찾지 못하는데 webpack.config.js에 publicPath를 추가해야 할까요? 아니면 다른 방법이 있나요? 아 그리고 참고로 이번에 추가한 파일은 발표하기 위한 더미 파일입니다.

vbalien commented 3 years ago

import구문으로 가져오면 되는데 타입스크립트에서 인식하도록 타입을 추가해주셔야됩니다.

file-loader는 파일의 URI(string)를 반환하므로 다음과 같이 타입을 추가해줍니다.

declare module "*.png" { // png파일의 경우
  const uri: string;
  export default uri;
}

사용 예:

import myPng from "./my.png";

console.log(myPng); // file-loader에 의해서 생성된 png파일의 uri

SSUKYP / frontend

App.css 대신 material ui의 기능을 사용 #13

reference