Storybook을 활용해서 개발해보자

프론트엔드 개발자라면 스토리북에 대해서 한 번쯤은 들어봤을 것이다.

안타깝게도, 저는 이전까지 프론트 개발자가 아니었나 봅니다.

 

TIFY 프로젝트를 하면서 처음 스토리북을 사용해봤다.

처음 써볼 때는 굳이 컴포넌트 만들고 테스트해볼 이유가 있나..?라고 생각했었는데, 잘못된 생각이었다.

내가 생각한 테스트라는 건 프론트엔드 개발자에 한정된 것이었고, 스토리북을 사용하면 프론트 개발자뿐만 아니라 디자이너와도 현재 진행된 상황 공유 및 직접 테스트까지 진행해볼 수 있다는 장점이 있었다.

스토리북의 또 다른 장점으로는 UI 컴포넌트를 문서화까지 진행할 수 있다는 것이다.

이에 대해서는 차차 알아가보도록 하자.

 

Storybook 사용법

Storybook 초기 세팅 관련해서는 별도의 글을 올릴 예정이니 그 부분이 궁금한 사람은 해당 글을 읽어보면 될 거 같다.

초기 세팅은 뛰어 넘고 사용법부터 알아보도록 하자.

 

일단 TIFY 프로젝트에서 생성한 Category 컴포넌트 하나와 스토리북을 예시로 알아보자.

아래 사진을 보면 index.tsx 파일 하나와 Category.stories.tsx 파일이 있다.

 

index.tsx 파일은 Category 컴포넌트를 위한 파일이고, Category.stories.tsx 파일은 Category 컴포넌트를 스토리북으로 테스트해보기 위해서 작성한 스토리이다.

 

아래와 같이 Category 컴포넌트를 생성해주었다.

import styled from "@emotion/styled";
import { theme } from "@styles/theme";

import SmallRightChevron from "@assets/icons/SmallRightChevron";
import { RoundButton } from "../RoundButton";

import { Text } from "../Text";
import Svg from "../Svg";

type CategoryPropsType = {
  categoryName: string;
  children: React.ReactNode[];
  onPlusButtonClick?: () => void;
  onShowMorePreferencesClick?: () => void;
};

export const Category = ({
  categoryName,
  children,
  onPlusButtonClick,
  onShowMorePreferencesClick,
}: CategoryPropsType) => {
  return (
    <Wrapper>
      <Heading>
        <Text children={categoryName} typo={"Headline_16"} color={"white"} as={"div"} />
        <RoundButton variant={"circle"} children={"+"} onClick={onPlusButtonClick} />
      </Heading>
      <TagWrapper>
        {children.map((child, index) => (
          <TagItem key={index}>{child}</TagItem>
        ))}
      </TagWrapper>
      <MorePreferencesContainer>
        <Text children={"취향 더보기"} typo={"Caption_12R"} color={"gray_300"} as={"div"} />
        <Svg children={<SmallRightChevron stroke={theme.palette.gray_300} />} onClick={onShowMorePreferencesClick} />
      </MorePreferencesContainer>
    </Wrapper>
  );
};

const Wrapper = styled.div`
  width: 328px;
  border-radius: 16px;
  padding: 16px 18px;
  background-color: ${theme.palette.gray_800};
`;

const Heading = styled.div`
  width: 100%;
  height: 24px;
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
`;

const TagWrapper = styled.div`
  width: 100%;
  height: 76px;
  margin-bottom: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
`;

const TagItem = styled.div``;

const MorePreferencesContainer = styled.div`
  width: 100%;
  height: 20px;
  display: flex;
  justify-content: space-between;
`;

 

그리고 Category 스토리도 아래와 같이 작성해주었는데, 이에 대해서 조금 더 자세히 살펴보자.

import { Meta, StoryObj } from "@storybook/react";
import { Category } from ".";
import { Tag } from "../Tag";

const meta = {
  title: "Atom/Category",
  component: Category,
  tags: ["autodocs"],
} as Meta<typeof Category>;

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

export const category: Story = {
  args: {
    categoryName: "카테고리명",
    children: [
      <Tag index={0} children={"여름쿨톤"} />,
      <Tag index={1} children={"글로시 립"} />,
      <Tag index={2} children={"페리페라"} />,
      <Tag index={3} children={"페리페라"} />,
      <Tag index={4} children={"페리페라"} />,
      <Tag index={5} children={"페리페라"} />,
    ],
  },
};

 

meta라고 적힌 부분은 어떤 설정으로 스토리를 작성할 것인지 나타내는 정보이다.

나는 title, component, tags를 설정해주었는데, tags로 "autodocs"를 설정해주게 되면 자동 문서화를 진행해준다.

 

스토리북을 실행시켜 보면, 아래와 같이 docs와 Category 스토리를 확인해볼 수 있다.

 

Docs 파일에 들어가보면 다음과 같이 해당 컴포넌트에 대해 문서화가 진행된 것을 볼 수 있다.

props로 넘겨줄 인자들에 대한 설명, 컴포넌트 자체도 보여주는 것을 확인할 수 있다.

 

메타 정보 설정 후 해당 정보를 사용해서 스토리를 작성해주면 된다.

위의 경우, Category 컴포넌트의 props로 줄 인자들을 args 내부에 작성을 해주었다.

필수 props인 categoryName과 children을 작성해서 스토리를 작성했고, 그 결과는 다음과 같다.

 

이제 스토리를 활용해서 테스트해보면 된다.

예를 들어서, props로 전달되는 인자 하나를 변경해서 테스트해보고 싶다면 스토리를 통해서 해보면 된다.

categoryName을 변경하면 바로바로 스토리에 반영되기 때문에 편리하다.

 

이에 그치지 않고, 버튼 클릭과 같은 동작도 인식해서 특정 코드를 실행시키는 것도 가능하다.

예를 들어서 취향 더보기 오른쪽 > 버튼을 클릭했다고 해보자.

버튼을 클릭하면 Actions에 어떤 동작이 실행됐는지도 다 뜬다.

 

내가 오늘 소개한 부분들은 스토리북을 사용하기 위한 정말 최소의 것들이고, 여기에 Decorator 같은 속성을 추가해서 스토리북 상에서의 style 적용 등을 해볼 수도 있다.

이에 대한 글도 추후 작성해보려 한다.

 

다음에 프로젝트를 한다고 하면 무조건 스토리북을 쓸 예정이다.

스토리북은 최고다.