Vue Storybook6 - 간단한 버튼 만들기

목차

• Introduction
• Implement MyButton
• MyButton story
• Conclusion
• Reference

📌 Introduction

안녕하세요. 오늘은 간단하게 뷰로 MyButton을 만들고 그걸 storybook으로 한번 활용 해보겠습니다. 🎉

📌 Implement MyButton

MyButton은 간단하게 색을 props로 받아 변경하는 것으로 구현을 해보겠습니다.

<template>
  <button @click="onClick" :class="['my-button', btnTypeClass]">
    <slot></slot>
  </button>
</template>

export default {
  name: "MyButton",
  props: {
    btnType: {
      type: String,
      default: "blue",
    },
  },
  computed: {
    btnTypeClass() {
      return `my-button__${this.btnType}`;
    },
  },
  methods: {
    onClick() {
      this.$emit("click");
    },
  },
};

.my-button {
  border-radius: 20px;
  border: none;
  color: white;
}
.my-button__blue {
  background-color: blue;
}
.my-button__red {
  background-color: red;
}

이제 이렇게 받은 MyButton을 한번 storybook으로 구현을 해보겠습니다.

📌 MyButton story

일단 먼저 storybook은 react에 최적화가 되어있다는 느낌을 많이 받았습니다.

그래서 props를 건내주는 방식이 react와 흡사해요. 한번 코드를 볼게요.

import MyButton from "../components/MyButton";

// 이름을 정의해줘용! 
export default { title: "MyButton" };

// 이렇게 기본적인 템플릿을 만들 수 있습니다.
const Template = (args, { argTypes }) => ({
  components: { MyButton },
  props: Object.keys(argTypes),
  methods: {
    onClick() {
      console.log("HELLO");
    },
  },
  template: `
  <div>
    <my-button :btn-type="btnType" @click="onClick">HELLO</my-button>
  </div>
  `,
});

// 이제 각각의 스토리를 보여주는 부분 입니다.
export const Primary = Template.bind({});
// 마치 react 처럼 이렇게 props를 전달해요.
Primary.args = { btnType: "blue" };

export const Secondary = Template.bind({});
Secondary.args = { btnType: "red" };

신기한건 이제 storybook6에는 자동적으로 addons의 기능이 붙어서 story가 생성이 됩니다.🎉 한번 스크린 샷으로 확인 해볼게용.

이렇게 생성이 되게 됩니다. 마찬가지로 Secondary도 이렇게 생성이 됩니다.

그리고 props를 자동적으로 이렇게 control할 수 있어요.

📌 Conclusion

이제 다음은 한번 문서를 작성해볼게요. docs는 mdx파일로 만들어지게 됩니다. 그럼 다음 포스팅을 기대해주세요~ 안녕

📌 Reference

• 스토리북 공식문서