image

현재 mildang Frontend 에서는 이미지 확장자로 svg, png 2가지를 사용하고 있음

각각의 이미지를 바로 사용하는 것이 아닌 최적화 과정, 사용하기 편하도록 변환 하는 과정을 거쳐서 이미지를 사용하고 있습니다.

이미지 사용 전 공통적으로 해야 하는 최적화

1. imageOptim을 사용해서 이미지 최적화 작업 [링크1 - imageoptim] [링크2 - squoosh]
   • 이미지를 사용하기 전에 이미지를 최적화 하는 작업을 진행
   • 해당 작업을 진행하면 대부분의 이미지가 용량이 줄어드는 것을 확인할 수 있음

사용하는 이미지가 png인 경우

1. mildang-ui 에 있는 Image 컴포넌트를 사용하여 PNG 이미지를 사용
   • 주로 png 파일을 assets 폴더에 정리해서 사용

사용하는 이미지가 svg인 경우

1. mildang Frontend에서는 svg를 jsx로 변환해서 사용중

방법 1. svg2jsx를 통해서 변환 후에 사용 [링크]

1. 해당 페이지에 svg 파일을 업로드 하면 JSX로 형태를 바꿔줌

2. 변환된 JSX 코드를 design-system/src/svgs에 복사

3. 복사한 svg에 props를 받아서 사용하기 위해서는 추가로 코드를 수정해야함

   코드 수정은 다른 svg.tsx를 참고

4. 만들어진 svg.tsx는 design-system/src/components/Icons/IconsDemo.tsx 에 svg 추가

   • 추가 이후에 Storybook에서 추가되었는지 확인 가능

방법 2. @svgr 을 통해서 변환 후 사용

• @svgr/cli를 통해서 웹사이트에 들어가지 않고 JSX로 바로 변환이 가능하다
• 자세한 사용 방법은 [링크] 에서 svg 로고 추가하는 법 참고
• 변환 후에는 위의 4번과 같은 과정을 진행하면 됨

** 참고 : npx @svgr/cli --icon --replace-attr-values "#2b2d36=currentColor" [fileName].svg | pbcopy | pbpaste > [fileName].tsx

• 사용하면 tsx를 만들어 주기는 함 ( mac 한정, linux는 xclip 필요함 )