[CHORE] storybook의 스토리들의 기본 배경색을 검은색으로 설정하고, 필요한 배경색을 사용할 수 있도록 설정

[wzrabbit]

이슈 번호

close #16

작업 요약

본 PR에서는 storybook의 background 색상들을 설정하여,

• 스토리북에서 보이는 모든 스토리에 기본적으로 배경이 #000000 가 되도록 설정

• 고를 수 있는 색상을 #000000, #202020, #FFFFFF 로 설정

• #202020은 회의 중 페이지에서의 배경색이며, 이후 배경이 검은색인 컴포넌트에서 윤곽을 구별하기 위해서도 사용 가능한 색으로 보입니다.

하였습니다.

이 변경사항은 모든 스토리북 파일에 적용되는 설정 파일인 preview.tsx에 추가했습니다.

만약 컴포넌트를 구현할 때, 컴포넌트의 특성상 다른 배경 색상을 적용해야 하는 경우에는

• 해당 스토리북 파일의 meta 속성에 동일한 설정을 해 두시면 해당 스토리북 파일에 한하여 적용되고

  const meta = {
  title: 'components/common/IconBtn',
  component: IconBtn,
  parameters: { backgrounds: {} } // <--
  } satisfies Meta<typeof YourComponent>;

• 해당 스토리에 직접 설정을 해 두시면 해당 스토리에 한하여 적용됩니다.

  export const YourStory: Story = {
  args: {},
      parameters: { backgrounds: {} } // <--
  };

참고/인용 자료

1️⃣ 스크린샷

• 적용 완료 후의 storybook의 배경 설정 메뉴

  

• 컴포넌트에 적용된 모습

  

2️⃣ storybook의 backgrounds 애드온

• https://storybook.js.org/docs/essentials/backgrounds

논의

범용성이 높다고 생각하여 추가를 원하시는 색상이 혹시 더 있으실까요?

[wzrabbit]

네, 이후에도 자주 쓰일만한 기본 색상이 있다면 다시 한 번 이야기해 보는 것도 좋을 것 같네요. Merge 진행하겠습니다.