🚛 vue2 + storybook6

🚨 StoryBook이란

컴퍼넌트를 다양한 형태를 보여줄 수 있는 툴, AppButton이라는 것이 있을때 props에 따라 보여지는것이 다른데 그것들을 한 곳에서 관리하는 것이 용이하다.

🚔 도입배경

사내에 기존에는 버튼들이 css만 공유하고 그 css도 잘못 복붙하거나 했을때, 버튼에 형태가 조금씩 달라졌다. 그리하여 컴퍼넌트화 시키고 다양한 형태를 보여주는 필요성을 느꼈다 그리고 props를 어떤것을 받는지 문서화 시킬 필요가 있었다.

그리고 디자이너 <=> 개발자간의 커뮤니케이션이 필요한데, 기준이되는 문서가 있을 경우 , 하나의 문서가지고 커뮤니케이션 하기에 용이했다.

🚡 환경세팅

vue2 버전에 맞는 패키지 설치

기존에 프로젝트가 vue2이므로 vue2 기준으로 관련 패키지 설치가 필요하였다. 사내 프로젝트의 코드들을 올릴 수 없으므로 vue2프로젝트를 새롭게 생성하였다. 그리고 관련 있는 패키지들을 아래와 같이 설치하였다

npm install --save-dev @storybook/vue@6.5.16 @storybook/addon-actions@6.5.16 @storybook/addon-essentials@6.5.16 @storybook/addon-links@6.5.16 storybook-addon-designs@6.3.1

 

• @storybook/vue@6.5.16 : storybook vue 전용 설치
• @storybook/addon-actions@6.5.16  :  storybook action(click 등 이벤트 사용)
•  @storybook/addon-essentials@6.5.16 : storybook 필수 플러그인
• storybook-addon-designs@6.3.1 : 피그마와 연결을 위해 설치 필요

 

main.js 

• main.js은 storybook을 실행시키기 위한 파일이다. 위치는 root/.storybook/main.js이다

const path = require("path");

module.exports = {
  // 어떤 파일들을 Storybook이 **스토리(컴포넌트 예제)**로 인식할지 패턴 지정
  stories: ["../src/**/*.stories.@(js|ts|vue|mdx)"],
  // 사용할 addon 목록 배열 정의
  addons: [
    "@storybook/addon-essentials", // 필수 애드온 묶음
    "@storybook/addon-docs", // 문서 자동 생성
    "storybook-addon-designs", // 디자인 시안(Figma 등) 연결
  ],
  // 어떤 프레임워크를 사용할지 정의
  framework: {
    name: "@storybook/vue",
    options: {},
  },
  webpackFinal: async (config) => {
    config.resolve.alias = {
      ...(config.resolve.alias || {}),
      "@": path.resolve(__dirname, "../src"),
    };

    return config;
  },
  // 문서 자동 생성 옵션
  docs: {
    autodocs: true,
  },
};

 

preview.js

스토리들이 렌더링되는 방식과 환경을 설정하는 파일

import "../src/assets/styles/reset.css"; // reset.css 적용
export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" }, // onClick, onChange 같은 props를 자동으로 Action 탭에 연결
  controls: {
    matchers: {
      color: /(background|color)$/i, // 이름이 background, color로 끝나는 props를 "색상 선택기"로 처리
      date: /Date$/, // 이름이 Date로 끝나는 props를 "날짜 선택기"로 처리
    },
  },
};

 

실행 스크립트 등록

{
  "scripts": {
    "storybook": "start-storybook -p 6006 -s public"
  }
}

 

 

🚜 AppButton 을 storybook만들기

AppButton은 앱에서 사용되는 버튼이며, 사용예시이다. 아래는 AppButton 파일이다

• props 으로 color(primary,success,warning), size(lg,md,sm),disabled(true,false)를 받는다
• click,focus이벤트가 존재한다.

<template>
  <div>
    <button
      class="app-button"
      :disabled="disabled"
      :class="[...css]"
      @focus="handleFocus"
      @click="onClickBtn"
    >
      버튼
    </button>
  </div>
</template>
<script>
export default {
  props: {
    color: {
      type: String,
      default: "primary", // primary , success , warning
      required: false,
    },
    size: {
      type: String,
      default: "md", // lg , md , sm
      required: false,
    },
    disabled: {
      type: Boolean,
      default: false,
      required: false,
    },
  },
  emits: ["click", "focus"],
  methods: {
    onClickBtn() {
      this.$emit("click");
    },
    handleFocus() {
      this.$emit("focus");
    },
  },
  computed: {
    css() {
      return [this.color, this.size];
    },
  },
};
</script>
<style scoped>
.app-button {
  font-size: 16px;
  cursor: pointer;
  line-height: 1.2;
  border: none;
  box-sizing: border-box;
  font-weight: 400;
  text-align: center;
  user-select: none;
  border: 1px solid transparent;
  display: inline-block;
  width: 100%;
}

.app-button:disabled {
  opacity: 0.65;
  cursor: initial;
}

/** 버튼 색상 */
.app-button.primary {
  background-color: #007bff;
  color: white;
}
.app-button.success {
  background-color: #28a745;
  color: white;
}
.app-button.warning {
  background-color: #ffc107;
  color: white;
}

/* 버튼 사이즈 */
.app-button.lg {
  padding: 0.75rem 1.25rem;
  font-size: 1.5rem;
  line-height: 1.5;
  border-radius: 0.4rem;
}

.app-button.md {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
  border-radius: 0.3rem;
}

.app-button.sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.2rem;
}
</style>

 

그리고 아래 코드는 AppButton.stories.js이다

import AppButton from "./AppButton.vue";

export default {
  title: "Button/AppButton",
  component: AppButton,
  // argTypes
  argTypes: {
    color: {
      control: {
        type: "select",
        options: ["primary", "success", "warning"], // 선택 가능한 항목들
      },
    },
    size: {
      control: {
        type: "select",
        options: ["lg", "md", "sm"], // 선택 가능한 항목들
      },
    },
    disabled: {
      control: "boolean",
      description: "disabled 여부",
      defaultValue: false,
    },
    click: { action: "clicked" }, // ✅ click 이벤트를 actions로 연결
    focus: { action: "focus" }, // ✅ focus 이벤트를 actions로 연결
  },
};
const Template = (args, { argTypes }) => ({
  components: { AppButton },
  props: Object.keys(argTypes),
  template: '<AppButton v-bind="$props"  @click="click" @focus="focus"/>',
});

export const Default = Template.bind({});
Default.args = {
  color: "primary",
  size: "md",
};

• argTypes으로 color, size,disabled ,click,focus를 넣는다
  • color,size은 선택값이 정해져있으므로 control을 type:select와, options에 사용할 값을 리스트 형태로 넣는다
• Template라는 변수에 components,props,template에 값을 넣는다
• export const Default = Template.bind({})를 해야 storybook실행시킬때 화면에 보여진다

 

 

AppButton 결과

Button의 primary,success,warning , lg,md,sm, disabled의 결과가 아래와 같이 화면에서 보여진다

• Primary

• Success

 

• Warning

• lg

• md

• sm

• disabled

🩼  독립적인 컴퍼넌트들을 만들어야 한다

컴퍼넌트들이 storybook에 사용하기 위해서는, 컴퍼넌트들이 독립적이어야 하고 비지니스로직과 별개로 동작해야한다.

그래야 테스트하기가 용이하고 유지보수에 편하다