Developer(Future Feature)

WEVY는 컴포넌트를 개발자들이 개발할 수 있는 기능을 준비중입니다. 이 도움말 문서는 WEVY의 기본 컴포넌트를 개발하는 내용입니다. 간단한 버튼 컴포넌트를 만들어보며 기본 컴포넌트를 개발하는 법을 배워보도록 합시다.

폴더 구성

기본 컴포넌트는 하나의 폴더 단위로 구성되며, 폴더 내의 파일은 아래와 같습니다.

[BasicComponent].info.json
[BasicComponent].info.js
[BasicComponent].jsx
preview.png

`[BasicComponent].info.json`

이 JSON파일은 컴포넌트에 대한 기본 정보를 가지고 있습니다. 이 정보들을 기반으로 Add Component 화면에서 내용을 구성하게 됩니다.

ButtonComponent.info.json
{
  "name": "Button",
  "version": "0.1.1",
  "category": "Basic",
  "description": "Button Component"
}

`[BasicComponent].info.js`

이 파일은 컴포넌트의 속성과 액션에 대해 정의합니다. 아래의 예제를 참고하세요.

ButtonComponent.info.js
export default {
  props: {
    title: {
      type: PROPS_TYPE.STRING,
      defaultValue: "Confirm",
      isProps: true,
      description: "Button name",
      propsType: "data",
      helpText:
        "Enter the name of the button. This will be displayed as button text.",
    },
    buttonSize: {
      type: PROPS_TYPE.STRING,
      defaultValue: "100%",
      label: "button size(px)",
      description: "Button size(px)",
      isProps: true,
      placeholder: "Button size",
      propsType: "view",
      helpText: "Define the size of the button in pixels.",
    },
    fontSize: {
      type: PROPS_TYPE.NUMBER,
      defaultValue: 15,
      description: "Font size",
      isProps: true,
      placeholder: "Font size",
      propsType: "view",
      helpText: "Define the font size for the text on the button.",
    },
    color: {
      type: PROPS_TYPE.COLOR_PICKER,
      defaultValue: "#ffffff",
      description: "Font color",
      isProps: true,
      placeholder: "Please select a color",
      propsType: "view",
      helpText: "Select a color for the button text.",
    },
  },
  actions: [ACTIONS.ON_CLICK],
  actionInfo: {
    [ACTIONS.ON_CLICK]: {
      title: "Button On Click Event",
      link: "Link URL Data",
    },
  },
  result: {
    type: RESULT_TYPE.NONE,
  },
};

속성

props Object를 살펴보도록 하겠습니다. 오브젝트의 key는 데이터를 구분할 수 있는 구분자로 사용됩니다. title속성을 봅시다.

 title: {
      type: PROPS_TYPE.STRING,
      defaultValue: "Confirm",
      isProps: true,
      description: "Button name",
      propsType: "data",
      helpText:
        "Enter the name of the button. This will be displayed as button text.",
},

type : 속성의 타입을 정의합니다. 속성값을 입력 받는 폼의 타입을 정합니다. PROPS_TYPE에 포함된 상수를 추가해주세요.
defaultValue : 기본값입니다.
description : 간단한 설명글입니다.
propsType : 속성의 타입입니다. view or data를 입력해주세요.
helpText : 속성에 대한 도움말입니다. 복잡한 값을 가지고 있는 속성의 경우 도움말이 필요할 수 있습니다.

이벤트

이 곳에 이벤트를 정의하여야 WEVY 시스템에 컴포넌트 이벤트가 노출되게 됩니다. key는 이벤트를 구분할 수 있는 구분자로 사용됩니다.

events:{
    onClick: {
        title: "Button On Click Event",
        data:{
            link: "Link URL Data"
        }
    },
}

title : 이벤트에 대한 이름을 정의합니다.
data : 이벤트를 통해 넘어오는 데이터입니다. 이 값은 컴포넌트 이벤트에 대한 설명에 포함됩니다.

`[BasicComponent].jsx`

jsx 파일은 react 기반으로 작성합니다. 소스를 먼저 살펴보겠습니다.

ButtonComponent.jsx
import { Box, Button } from "@mui/material";
import BasicComponent from "@site/BasicComponent/BasicComponent";
import componentInfo from "./ButtonComponent.info";

class ButtonComponent extends BasicComponent {
  constructor() {
    super();

    this.componentInfo = componentInfo;
  }


  render() {
    const componentProps = this.getComponentProps();
    const componentActions = this.getComponentAction();
    const { systemApplicationUniqPath } = this.props;

    return (
      <Box
        style={{
          width: componentProps.buttonSize,
        }}
        css={style}
      >
        <Button
          sx={
            width: "100%",
            height: "100%",
            fontSize: parseInt(componentProps.fontSize)
          }}
          onClick={() => {
            componentActions.onClick();
          }}
        >
          {componentProps.title}
        </Button>
      </Box>
    );
  }
}

ButtonComponent.componentInfo = componentInfo;
export default ButtonComponent;

BasicComponent를 상속받는 Class형 컴포넌트를 구성해야 합니다. 생성자에는 [BasicComponent].info.js 파일을 this.componentInfo에 할당합니다. BasicComponent는 componentDidMount, componentDidUpdate, componentWillUnMount와 관련된 로직이 존재하므로 생애주기를 관리할 경우 부모 클래스의 생애주기를 실행해주어야 합니다.

Example
componentDidMount(){
    super.componentDidMount();

    //...
}

BasicComponent에는 getComponentProps, getComponentAction 함수가 존재하며, 이 함수들은 시스템으로부터 속성 값을 가져오거나, 등록된 이벤트를 기반으로 시스템으로 이벤트 발생여부를 전달합니다. getComponentProps로 가져온 데이터는 componentInfo에 정의된 key로 데이터를 가져올 수 있습니다.

getComponentAction로 가져온 이벤트는 함수입니다. 이 함수를 호출하면 시스템에 특정 이벤트가 일어났음을 전달할 수 있습니다. 이벤트 데이터를 시스템으로 보내기 위해서는 이벤트 함수를 호출하기 전에 데이터를 설정해야 합니다. setEventData를 이용해서 데이터를 등록합니다.

Example
const componentActions = this.getComponentAction();
this.setEventData({
  data: { key: value },
});
componentActions.onClick();

`preview.png`

프리뷰 이미지는 Add Component 화면에서 이미지로 사용됩니다.

Developer(Future Feature)

폴더 구성​

[BasicComponent].info.json​

[BasicComponent].info.js​

속성​

이벤트​

[BasicComponent].jsx​

preview.png​

폴더 구성

`[BasicComponent].info.json`

`[BasicComponent].info.js`

속성

이벤트

`[BasicComponent].jsx`

`preview.png`