chore: Storybook 셋팅

[hsgh085]

💡 작업 내용

• Storybook 설치 및 셋팅
• Storybook 사용 예제 작성
• Chromatic을 통해 Storybook 배포
• Github Actions를 통해 배포 자동화

💡 자세한 설명

✅ Storybook 설치

설치 이후 Storybook을 Webpack과 동일한 환경으로 셋팅했습니다.
Storybook 문서 자동화 옵션을 통해 문서를 직접 작성하지 않아도 Docs가 생깁니다. 문서를 자세히 작성하시고 싶으시면 직접 작성하셔도 무방합니다!

✅ Storybook 사용 예제 작성

기존에 만들어둔 Button Component를 예시로 스토리북을 작성해보았습니다.
컴포넌트 Default랑, 모든 타입을 보여주는 All을 작성하는 형식으로 스토리북 형식을 Fix하는 것은 어떠신가요?

const meta = {
  title: 'Button',
  component: Button,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  argTypes: {
    size: {
      options: ['xSmall', 'small', 'medium', 'large'],
      control: { type: 'radio' },
    },
    variant: {
      options: ['default', 'outline', 'cancel'],
      control: { type: 'radio' },
    },
    children: { control: { type: 'text' } },
  },
  args: {
    variant: 'default',
    size: 'medium',
    children: 'Button',
  },
} satisfies Meta<typeof Button>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {
  args: {
    variant: 'default',
    size: 'medium',
  },
};

export const All: Story = {
  render: (args) => (
    <ul css={storyContainer}>
      <li css={storyInnerContainer}>
        <h3>Size</h3>
        <Button {...args} size="xSmall" variant="default">
          XSmall
        </Button>
        <Button {...args} size="small" variant="default">
          Small
        </Button>
        <Button {...args} size="medium" variant="default">
          Medium
        </Button>
        <Button {...args} size="large" variant="default">
          Large
        </Button>
      </li>
      <li css={storyInnerContainer}>
        <h3>Variant</h3>
        <Button {...args} size="medium" variant="default">
          Default
        </Button>
        <Button {...args} size="medium" variant="outline">
          Outline
        </Button>
        <Button {...args} size="medium" variant="cancel">
          Cancel
        </Button>
      </li>
    </ul>
  ),
};

✅ Chromatic을 통해 Storybook 배포

현재 배포된 주소는 아래와 같습니다.

https://666f1aee1aefa07ed4bda87d-nntajdvsfz.chromatic.com/?path=/docs/button--docs

✅ Github Actions를 통해 배포 자동화

dev 브랜치로 pr merge 될 때마다 storybook 배포가 자동화되도록 설정했습니다.
하지만 아직 실제로 잘 동작하지는 확인해보지 못했기 때문에 다음 pr merge시 스토리북이 제대로 자동 배포가 되는지 확인해 봐야 할 부분입니다.

📗 참고 자료 (선택)

스토리북 배포 1
스토리북 배포 2

📢 리뷰 요구 사항 (선택)

1. Storybook 작성 형식을 컴포넌트 Default랑, 모든 타입을 보여주는 All을 작성하는 형식으로 Fix하는 것은 어떠신 지 의견이 궁금합니다! 다른 좋은 형식이 있다면 언제든지 말씀해주세요!😀

🚩 후속 작업 (선택)

✅ 셀프 체크리스트

• PR 제목을 형식에 맞게 작성했나요?
• 브랜치 전략에 맞는 브랜치에 PR을 올리고 있나요? (master/main이 아닙니다.)
• 이슈는 close 했나요?
• Reviewers, Labels, Projects를 등록했나요?
• 작업 도중 문서 수정이 필요한 경우 잘 수정했나요?
• 테스트는 잘 통과했나요?
• 불필요한 코드는 제거했나요?

closes #113

[areumH]

All로 컴포넌트의 모든 타입를 보여주는 형식 보기에도 깔끔하고 너무 좋은 것 같습니다!!
고생하셨습니다 🤗

[kwaksj329]

스토리북 작성할 때 story.styles.ts에 작성된 공통 css 코드로 감싸서 사용하는 건가요?!

[hsgh085]

넵! 해당 css 코드를 공통으로 사용해서 story 기본 틀을 동일하게 맞추면 더 일관성 있게 보일 것 같아서 작성해두었습니다! 공통 css 사용하시는 것 어떠신가요??

[kwaksj329]

넵 좋습니다!

[kwaksj329]

고생 많으셨습니다! 저도 Default와 All 형식으로 작성하는게 좋을 것 같아요 👍🏻