[FE] 은행 아이콘 이미지 변경 및 계좌번호 + 은행 아이콘 컴포넌트 제작

[jinhokim98]

issue

• close [FE] 은행 아이콘 이미지 변경 및 계좌번호 + 은행 아이콘 컴포넌트 제작 #974

구현 사항

기존 은행 이미지 png -> svg로 변경

이전의 은행 이미지를 png로 처리하여 은행 이미지가 흐리게 보이는 현상이 있었습니다.

그래서 이를 svg로 개선하여 선명하게 보이도록 했습니다. 하지만 이 이미지들을 각각 불러오면 네트워크 요청이 낭비되기 때문에 svg sprite 방식을 사용했습니다.

svg sprite 방식 설명

기존 png sprite 방식은 background image를 이용해서 특정 px을 잘라서 사용하는 방식이라면 svg sprite는 하단에 보이지 않는 svg 묶음을 띄워 놓고 특정 svg만 보이도록 설정하는 기법입니다.

아래 브라우저 elements와 같이 width=0, height=0으로 둔 svg sprite를 띄워 놓고 특정 이미지를 사용하는 방식입니다.

여기서 특정 svg 아이콘을 불러올 수 있도록 아래와 같이 각 svg 아이콘에 symbol 태그를 부여하고 여기에 id를 부여합니다.

<symbol width="36" height="36" viewbox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg" id="bank19_toss">
.... svg 속성
</symbol>

그리고 사용처에서 use tag를 사용해서 특정 아이콘을 불러올 수 있게 됩니다.

<svg className={className} fill="none" width={size} height={size}>
  <use href={`#${name}`} />
</svg>

하지만 피그마에서 그냥 svg를 export하게 되면 symbol, id가 설정되지 않습니다. svg sprite generator를 이용하면 파일 이름을 id로 설정해서 보여줄 수 있게 됩니다.

그리고 svg sprite를 띄워 놓고 특정 이미지를 사용하기 때문에 createPortal을 사용해서 svg sprite 파일을 띄우게 되면 svg sprite에서 특정 아이콘을 가져와 svg로 보여줄 수 있게 됩니다.

import {createPortal} from 'react-dom';

import BankSprite from '@assets/image/largeBankSprites.svg';

export const BankSpriteInitializer = () => {
  return createPortal(<BankSprite />, document.body);
};

const Component = () => {
 return (
    <>
      <BankSpriteInitializer />
      <BankIcon iconId={iconId} />
    </>
}

svg sprite를 보여주기 위한 webpack 설정

webpack에서 svg를 보여주기 위해 @svgr/webpack 플러그인을 사용합니다.
이 플러그인을 단순히 사용하기만 하면 symbol과 id를 인식하지 못하는 문제가 있어 아래 옵션을 설정하여 인식할 수 있도록 설정을 해줘야 합니다.

  {
        test: /\.svg$/,
        use: [
          {
            loader: '@svgr/webpack',
            options: {
              svgoConfig: {
                plugins: [
                  {
                    name: 'removeViewBox',
                    active: false, // viewBox 유지
                  },
                ],
                icon: true, // `symbol` 방식으로 출력
              },
            },
          },
        ],
      },

혹시나 다른 svg에 영향이 있을까 싶어 살펴봤지만 문제는 없었습니다.

svg sprite 적용 결과

개선 전	개선 후

매우 선명합니다.

BankSelect Storybook 에서도 확인하실 수 있습니다.

메인 페이지에서 계좌번호를 은행 아이콘과 같이 보여주도록 설정

계좌번호와 은행 아이콘을 같이 보여주자는 회의 결과를 반영하여 아래 이미지와 같이 아이콘을 추가했습니다.
여기서는 svg sprite를 사용하지 않았습니다. 그 이유는 한 번에 한 개 이미지를 보여주므로 굳이 전체를 다 가져와서 하나만 선택해서 보여줄 필요가 없기 때문입니다.

아래 계좌번호는 제 실제 계좌번호입니다ㅋㅋㅋㅋㅋ

🫡 참고사항

[github-actions]

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-lcmuzkzuqj.chromatic.com/

[Todari]

확실히 보기 좋아졌군용~!
계좌 정보에 아이콘이 같이 보이는 것도 좋은 것 같습니다~!

[pakxe]

더 이뻐졌네요..!! 👍

[soi-ha]

캬~ 저번 회의때 말씀드렸던 부분 구현해주셔서 너무 감사합니다! 그리고 이미지 너무 깔끔해서 행복하네요...👍

[github-actions]

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-lwawkkvhxp.chromatic.com/