Setup storybook

[ChaeyeonAhn]

요약 *

It closes #27

Storybook 초기 세팅, 컴포넌트별로 확인할 수 있도록 stories 파일 생성

• 초기 세팅

• stories 파일 안에 Button, TextButton, BreadCrumb에 대한 story들을 만들어 보았습니다.

• 밑의 영상을 보시면 몇 가지 문제가 있습니다..!

• storybook에서 제공하는 유저가 커스텀하여 집어 넣을 수 있는 prop의 type들이 한정적입니다.

  • 텍스트, JSON, 숫자, 등은 가능한데, ReactNode 같은 걸 직접 넣어보지는 못합니다.
  • 그래서 Button 컴포넌트를 보시면, buttonText를 지우면 미리 넣어놓은 children이 들어가 있는 모습을 볼 수는 있지만, 다른 children을 넣어 확인해보기는 어려울 것 같습니다.

• chevron_right 같은 아이콘이 MUI Icon으로 나오지 않고 Icon 이름 그대로 나옵니다.. 이것은 아직 해결책을 찾지 못했습니다

MUI Icon 문제 해결완료! `.storybook/preview-head.html` 파일로 MUI Icon을 불러오는 것으로 해결했습니다.

스크린샷

2024-11-02.9.27.46.mov

2024-11-02.9.28.32.mov

이후 Task *

• 없음

[wjeongchoi]

아래 수정사항이 적용 가능한지 확인해주세요!

• 컴포넌트에 16px의 padding이 들어가는데 없앨 수 있는지, 아니면 원래 컴포넌트에 있는 부분인지
• Button의 iconType에 예시 string도 주어지면 좋을 것 같음
• breadcrumb에 밑줄

[ChaeyeonAhn]

네! 확인해 보겠습니다!

• BreadCrumb 밑줄 생기는 문제 해결
• Button의 iconType에 예시 string 주기
• 컴포넌트에 16px의 padding이 들어가는데 없앨 수 있는지, 아니면 원래 컴포넌트에 있는 부분인지

[ChaeyeonAhn]

말씀해주신 사항 모두 반영하여 푸시했습니다.

컴포넌트에 16px의 padding이 들어가는데 없앨 수 있는지, 아니면 원래 컴포넌트에 있는 부분인지

이에 대한 해결책은 컴포넌트에 대한 story를 만들 때마다 설정해주어야 하는 부분입니다.

const meta: Meta<typeof BreadCrumb> = {
  title: "components/BreadCrumb",
  component: BreadCrumb,
  parameters: {
    layout: "fullscreen",
  },

  argTypes: {
    items: {
      control: { type: "object" },
    },
  },
};

layout: "centered" 이렇게 하면 패딩이 생기는 대신 예시 컴포넌트가 화면 중앙에 옵니다.
layout: "fullscreen" 이렇게 하면 패딩이 없어지고 대신 예시 컴포넌트가 사진처럼 왼쪽 위에 정렬됩니다.

어떻게 통일하는 것이 좋을까요? @wjeongchoi

[wjeongchoi]

layout: "centered"로 통일하는걸로 합시다! 문서에도 남겨주세요