@things-factory/meta-ui 10.1.190 → 10.1.192

package/dist-client/mixin/meta-base-mixin.js

@@ -0,0 +1,287 @@
+// @ts-nocheck
+import { MetaApi } from './../utils/meta-api';
+import { ValueUtil } from './../utils/value-util';
+import { TermsUtil } from './../utils/terms-util';
+/**
+ * @license
+ * Copyright © HatioLab Inc. All rights reserved.
+ * @author Shortstop shortstop@hatiolab.com
+ * @description 메타 기반의 화면 생성을 위한 기본 믹스인
+ *   화면에 필요한 프로퍼티 정의, 메타 데이터 조회 및 파싱, 기본 데이터 조회, 변경 이벤트 핸들러 등록 등
+ */
+export const MetaBaseMixin = baseElement => class extends baseElement {
+    /**
+     * @override properties
+     ***************************
+     * @returns {Object} 프로퍼티 오브젝트
+     */
+    static get properties() {
+        return {
+            /**
+             * @description 메뉴 메타 정보
+             ****************************
+             * @type {Object}
+             */
+            menuInfo: Object,
+            /**
+             * @description 화면 라우팅 정보, 상세 뷰는 호출시에 route_name 변수를 설정하여 넘겨준다.
+             ****************************
+             * @type {String}
+             */
+            route_name: String,
+            /**
+             * 상세 폼 뷰 상위 데이터 ID, 상세 뷰는 호출시에 parent_id 변수를 설정하여 넘겨준다.
+             ****************************
+             * @type {String}
+             */
+            parent_id: String,
+            /**
+             * @description 페이지 내 컴포넌트 여부, 상세 뷰는 호출시에 is_detail 변수를 설정하여 넘겨준다.
+             ****************************
+             * @type {Boolean}
+             */
+            is_detail: {
+                type: Boolean,
+                converter(value) {
+                    return Boolean(value);
+                }
+            },
+            /**
+             * @description 팝업 여부, 팝업 뷰는 호출시에 is_popup 변수를 설정하여 넘겨준다.
+             ****************************
+             * @type {Boolean}
+             */
+            is_popup: {
+                type: Boolean,
+                converter(value) {
+                    return Boolean(value);
+                }
+            },
+            /**
+             * @description 작업, 결제 관련 화면에서 호출 된 경우
+             ****************************
+             * @type {Boolean}
+             */
+            is_activity: {
+                type: Boolean,
+                converter(value) {
+                    return Boolean(value);
+                }
+            },
+            /**
+             * @description 수정 불가 페이지
+             ****************************
+             * @type {Boolean}
+             */
+            is_readonly: {
+                type: Boolean,
+                converter(value) {
+                    return Boolean(value);
+                }
+            }
+        };
+    }
+    /**
+     * @description 엘리먼트 (페이지 내 컴포넌트 혹은 팝업인 경우) 여부
+     ********************************************************
+     * @returns {Boolean} 엘리먼트 여부
+     */
+    get isElement() {
+        return this.is_detail === true || this.is_popup === true;
+    }
+    /**
+     * @description 페이지 내 포함된 하나의 컴포넌트 여부
+     *******************************************
+     * @returns {Boolean} 컴포넌트 여부
+     */
+    get isDetail() {
+        return ValueUtil.isEmpty(this.is_detail) ? false : this.is_detail;
+    }
+    /**
+     * @description 시나리오 기반 데이터 변경 이벤트 핸들러
+     **********************************************
+     */
+    async dataChangeEventHandler(e) {
+        // 이벤트 디테일 추출
+        let { after, before, column, record, row } = e.detail;
+        // 데이터 변경 컬럼 명
+        let columnName = column.name;
+        // 해당 컬럼에 컬럼 변경 핸들러가 등록되어 있다면 해당 컬럼 변경 이벤트 핸들러 (시나리오)를 실행
+        if (Object.keys(this.fieldChangeHandlers || {}).includes(columnName)) {
+            let response = await MetaApi.callScenario(columnName, this.fieldChangeHandlers[columnName], {
+                columnName,
+                column,
+                record,
+                after,
+                before,
+                row,
+                parentId: this.parent_id ? this.parent_id : ''
+            }, false);
+            let result = response.data.runScenario.result.result;
+            if (!result)
+                return;
+            // 이벤트 타겟 추출
+            let eventTarget = this.grist ? this.grist.grist.body : this;
+            // 이벤트 타겟에 필드 변경 이벤트 전파
+            Object.keys(result).forEach(key => {
+                eventTarget.dispatchEvent(new CustomEvent('field-change', {
+                    bubbles: true,
+                    composed: true,
+                    detail: {
+                        record,
+                        row,
+                        after: result[key],
+                        before: record[key],
+                        column: { name: key }
+                    }
+                }));
+            });
+        }
+        // 데이터 변경 이벤트 전파
+        this.dispatchEvent(new CustomEvent('data-changed', {
+            bubbles: true,
+            composed: true,
+            detail: e.detail
+        }));
+    }
+    /**
+     * @override connectedCallback
+     ********************************
+     */
+    async connectedCallback() {
+        if (super.connectedCallback) {
+            await super.connectedCallback();
+        }
+        // meta-form 계열인 경우 form-field-change 이벤트에 대한 핸들러를 등록
+        if (this.tagName.toLowerCase().startsWith('meta-form-')) {
+            this.addEventListener('form-field-change', async (e) => {
+                await this.dataChangeEventHandler(e);
+            });
+            // 그렇지 않으면 field-change 이벤트에 대한 핸들러를 등록
+        }
+        else {
+            this.addEventListener('field-change', async (e) => {
+                await this.dataChangeEventHandler(e);
+            });
+        }
+    }
+    /**
+     * @override pageUpdated : URL 파라미터에 대한 triggering
+     ******************************************************
+     * @returns
+     */
+    async pageUpdated(changes, lifecycle, before) {
+        let navParams = this.lifecycle?.params ? this.lifecycle.params : {};
+        if (this.isPage && this.active && before.active == false && ValueUtil.isNotEmpty(navParams)) {
+            this.fetch();
+        }
+    }
+    /**
+     * @description 팝업으로 오픈되었는지 여부
+     *************************************
+     * @returns {Boolean} 팝업 오픈 여부
+     */
+    get isPopup() {
+        return ValueUtil.isEmpty(this.is_popup) ? false : this.is_popup;
+    }
+    /**
+     * @description 페이지 여부 리턴 (마스터 디테일의 디테일 엘리먼트나 팝업 화면은 페이지가 아니다.)
+     *   - 페이지란 라우트 정보를 가지는 페이지를 뜻한다.
+     ******************************************
+     * @returns {Boolean} 페이지 여부
+     */
+    get isPage() {
+        return !this.is_detail && !this.is_popup;
+    }
+    /**
+     * @description 메뉴 메타 정보 조회 && 화면 생성을 위한 Configuration 구성
+     *****************************************************************
+     * @returns {Object} 화면 생성을 위한 메타 정보 리턴
+     */
+    async getAndParseMenuMeta() {
+        let menuMeta = await MetaApi.getMenuMeta(this);
+        if (menuMeta) {
+            // 기본 메뉴 정보
+            this.menuInfo = menuMeta.menu;
+            // 기타 설정
+            this.etcConfig = menuMeta.etc;
+            // 그리드 정보 파싱
+            if (this.parseBasicGridConfigs) {
+                this.parseBasicGridConfigs(menuMeta);
+            }
+            // GraphQL 이용을 위한 서비스 Configuration
+            if (this.parseBasicServiceConfigs) {
+                this.parseBasicServiceConfigs(menuMeta);
+            }
+            // 폼 정보 구성을 위한 폼 Configuration
+            if (this.parseBasicFormConfigs) {
+                this.parseBasicFormConfigs(menuMeta);
+            }
+            // MetaTabMixin
+            if (this.parseBasicTabConfigs) {
+                this.parseBasicTabConfigs(menuMeta);
+            }
+            // 버튼 정보 파싱
+            if (this.parseBasicButtonConfigs) {
+                this.parseBasicButtonConfigs(menuMeta);
+            }
+        }
+    }
+    /**
+     * @description 화면에 구성된 콤포넌트에 따라 조회를 호출
+     ***********************************************
+     */
+    async fetch() {
+        if (ValueUtil.isNotEmpty(this.grist)) {
+            this.grist.fetch();
+        }
+        else if (ValueUtil.isNotEmpty(this.filterForm)) {
+            await this.fetchHandler();
+        }
+        else if (this.fetchHandler) {
+            await this.fetchHandler();
+        }
+    }
+    /**
+     * @description 팝업 오픈 버튼 처리
+     ********************************
+     * @param {Object} action
+     * @param {Object} record
+     * @param {Function} closeCallback
+     */
+    async excuteOpenPopupButtonClick(action, record, closeCallback) {
+        // 타이틀 변환
+        let title = TermsUtil.tTitle(action.title);
+        // 타이틀 상세 필드 정의 확인
+        if (ValueUtil.isNotEmpty(action.title_detail)) {
+            title = `${title}-${ValueUtil.getParams(record, ...action.title_detail.split('.'))}`;
+        }
+        // 팝업 오픈
+        MetaApi.openDynamicPopup(title, action, record, closeCallback);
+    }
+    /**
+     * @description 시나리오 호출 버튼 처리
+     ***********************************
+     * @param {Object} action
+     * @param {Object or Array} params
+     * @param {Function} afterCallback
+     */
+    async executeCallScenarioButtonClick(action, params, afterCallback) {
+        // 시나리오 호출
+        let response = await MetaApi.callScenario(action.name, action.name, params);
+        // 처리 중 에러가 발생했으면 시나리오 호출 후 처리가 없으면 return
+        if (response !== false && !response.errors && ValueUtil.isNotEmpty(action.after)) {
+            afterCallback();
+        }
+    }
+    /**
+     * @description 상위 페이지 에서 하위 엘리먼트로 전달하는 ID 저장 및 조회 실행
+     ***********************************
+     * @param {String} id
+     */
+    setParentId(id) {
+        this.parent_id = id;
+        this.fetch();
+    }
+};
+//# sourceMappingURL=meta-base-mixin.js.map

package/dist-client/mixin/meta-base-mixin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta-base-mixin.js","sourceRoot":"","sources":["../../client/mixin/meta-base-mixin.ts"],"names":[],"mappings":"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","sourcesContent":["// @ts-nocheck\nimport { MetaApi } from './../utils/meta-api'\nimport { ValueUtil } from './../utils/value-util'\nimport { TermsUtil } from './../utils/terms-util'\n\n/**\n * @license\n * Copyright © HatioLab Inc. All rights reserved.\n * @author Shortstop shortstop@hatiolab.com\n * @description 메타 기반의 화면 생성을 위한 기본 믹스인\n *   화면에 필요한 프로퍼티 정의, 메타 데이터 조회 및 파싱, 기본 데이터 조회, 변경 이벤트 핸들러 등록 등\n */\nexport const MetaBaseMixin = baseElement =>\n  class extends baseElement {\n    /**\n     * @override properties\n     ***************************\n     * @returns {Object} 프로퍼티 오브젝트\n     */\n    static get properties() {\n      return {\n        /**\n         * @description 메뉴 메타 정보\n         ****************************\n         * @type {Object}\n         */\n        menuInfo: Object,\n\n        /**\n         * @description 화면 라우팅 정보, 상세 뷰는 호출시에 route_name 변수를 설정하여 넘겨준다.\n         ****************************\n         * @type {String}\n         */\n        route_name: String,\n\n        /**\n         * 상세 폼 뷰 상위 데이터 ID, 상세 뷰는 호출시에 parent_id 변수를 설정하여 넘겨준다.\n         ****************************\n         * @type {String}\n         */\n        parent_id: String,\n\n        /**\n         * @description 페이지 내 컴포넌트 여부, 상세 뷰는 호출시에 is_detail 변수를 설정하여 넘겨준다.\n         ****************************\n         * @type {Boolean}\n         */\n        is_detail: {\n          type: Boolean,\n          converter(value) {\n            return Boolean(value)\n          }\n        },\n\n        /**\n         * @description 팝업 여부, 팝업 뷰는 호출시에 is_popup 변수를 설정하여 넘겨준다.\n         ****************************\n         * @type {Boolean}\n         */\n        is_popup: {\n          type: Boolean,\n          converter(value) {\n            return Boolean(value)\n          }\n        },\n\n        /**\n         * @description 작업, 결제 관련 화면에서 호출 된 경우\n         ****************************\n         * @type {Boolean}\n         */\n        is_activity: {\n          type: Boolean,\n          converter(value) {\n            return Boolean(value)\n          }\n        },\n\n        /**\n         * @description 수정 불가 페이지\n         ****************************\n         * @type {Boolean}\n         */\n        is_readonly: {\n          type: Boolean,\n          converter(value) {\n            return Boolean(value)\n          }\n        }\n      }\n    }\n\n    /**\n     * @description 엘리먼트 (페이지 내 컴포넌트 혹은 팝업인 경우) 여부\n     ********************************************************\n     * @returns {Boolean} 엘리먼트 여부\n     */\n    get isElement() {\n      return this.is_detail === true || this.is_popup === true\n    }\n\n    /**\n     * @description 페이지 내 포함된 하나의 컴포넌트 여부\n     *******************************************\n     * @returns {Boolean} 컴포넌트 여부\n     */\n    get isDetail() {\n      return ValueUtil.isEmpty(this.is_detail) ? false : this.is_detail\n    }\n\n    /**\n     * @description 시나리오 기반 데이터 변경 이벤트 핸들러\n     **********************************************\n     */\n    async dataChangeEventHandler(e) {\n      // 이벤트 디테일 추출\n      let { after, before, column, record, row } = e.detail\n\n      // 데이터 변경 컬럼 명\n      let columnName = column.name\n      // 해당 컬럼에 컬럼 변경 핸들러가 등록되어 있다면 해당 컬럼 변경 이벤트 핸들러 (시나리오)를 실행\n      if (Object.keys(this.fieldChangeHandlers || {}).includes(columnName)) {\n        let response = await MetaApi.callScenario(\n          columnName,\n          this.fieldChangeHandlers[columnName],\n          {\n            columnName,\n            column,\n            record,\n            after,\n            before,\n            row,\n            parentId: this.parent_id ? this.parent_id : ''\n          },\n          false\n        )\n        let result = response.data.runScenario.result.result\n        if (!result) return\n\n        // 이벤트 타겟 추출\n        let eventTarget = this.grist ? this.grist.grist.body : this\n        // 이벤트 타겟에 필드 변경 이벤트 전파\n        Object.keys(result).forEach(key => {\n          eventTarget.dispatchEvent(\n            new CustomEvent('field-change', {\n              bubbles: true,\n              composed: true,\n              detail: {\n                record,\n                row,\n                after: result[key],\n                before: record[key],\n                column: { name: key }\n              }\n            })\n          )\n        })\n      }\n\n      // 데이터 변경 이벤트 전파\n      this.dispatchEvent(\n        new CustomEvent('data-changed', {\n          bubbles: true,\n          composed: true,\n          detail: e.detail\n        })\n      )\n    }\n\n    /**\n     * @override connectedCallback\n     ********************************\n     */\n    async connectedCallback() {\n      if (super.connectedCallback) {\n        await super.connectedCallback()\n      }\n\n      // meta-form 계열인 경우 form-field-change 이벤트에 대한 핸들러를 등록\n      if (this.tagName.toLowerCase().startsWith('meta-form-')) {\n        this.addEventListener('form-field-change', async e => {\n          await this.dataChangeEventHandler(e)\n        })\n        // 그렇지 않으면 field-change 이벤트에 대한 핸들러를 등록\n      } else {\n        this.addEventListener('field-change', async e => {\n          await this.dataChangeEventHandler(e)\n        })\n      }\n    }\n\n    /**\n     * @override pageUpdated : URL 파라미터에 대한 triggering\n     ******************************************************\n     * @returns\n     */\n    async pageUpdated(changes, lifecycle, before) {\n      let navParams = this.lifecycle?.params ? this.lifecycle.params : {}\n      if (this.isPage && this.active && before.active == false && ValueUtil.isNotEmpty(navParams)) {\n        this.fetch()\n      }\n    }\n\n    /**\n     * @description 팝업으로 오픈되었는지 여부\n     *************************************\n     * @returns {Boolean} 팝업 오픈 여부\n     */\n    get isPopup() {\n      return ValueUtil.isEmpty(this.is_popup) ? false : this.is_popup\n    }\n\n    /**\n     * @description 페이지 여부 리턴 (마스터 디테일의 디테일 엘리먼트나 팝업 화면은 페이지가 아니다.)\n     *   - 페이지란 라우트 정보를 가지는 페이지를 뜻한다.\n     ******************************************\n     * @returns {Boolean} 페이지 여부\n     */\n    get isPage() {\n      return !this.is_detail && !this.is_popup\n    }\n\n    /**\n     * @description 메뉴 메타 정보 조회 && 화면 생성을 위한 Configuration 구성\n     *****************************************************************\n     * @returns {Object} 화면 생성을 위한 메타 정보 리턴\n     */\n    async getAndParseMenuMeta() {\n      let menuMeta = await MetaApi.getMenuMeta(this)\n\n      if (menuMeta) {\n        // 기본 메뉴 정보\n        this.menuInfo = menuMeta.menu\n        // 기타 설정\n        this.etcConfig = menuMeta.etc\n\n        // 그리드 정보 파싱\n        if (this.parseBasicGridConfigs) {\n          this.parseBasicGridConfigs(menuMeta)\n        }\n\n        // GraphQL 이용을 위한 서비스 Configuration\n        if (this.parseBasicServiceConfigs) {\n          this.parseBasicServiceConfigs(menuMeta)\n        }\n\n        // 폼 정보 구성을 위한 폼 Configuration\n        if (this.parseBasicFormConfigs) {\n          this.parseBasicFormConfigs(menuMeta)\n        }\n\n        // MetaTabMixin\n        if (this.parseBasicTabConfigs) {\n          this.parseBasicTabConfigs(menuMeta)\n        }\n\n        // 버튼 정보 파싱\n        if (this.parseBasicButtonConfigs) {\n          this.parseBasicButtonConfigs(menuMeta)\n        }\n      }\n    }\n\n    /**\n     * @description 화면에 구성된 콤포넌트에 따라 조회를 호출\n     ***********************************************\n     */\n    async fetch() {\n      if (ValueUtil.isNotEmpty(this.grist)) {\n        this.grist.fetch()\n      } else if (ValueUtil.isNotEmpty(this.filterForm)) {\n        await this.fetchHandler()\n      } else if (this.fetchHandler) {\n        await this.fetchHandler()\n      }\n    }\n\n    /**\n     * @description 팝업 오픈 버튼 처리\n     ********************************\n     * @param {Object} action\n     * @param {Object} record\n     * @param {Function} closeCallback\n     */\n    async excuteOpenPopupButtonClick(action, record, closeCallback) {\n      // 타이틀 변환\n      let title = TermsUtil.tTitle(action.title)\n\n      // 타이틀 상세 필드 정의 확인\n      if (ValueUtil.isNotEmpty(action.title_detail)) {\n        title = `${title}-${ValueUtil.getParams(record, ...action.title_detail.split('.'))}`\n      }\n\n      // 팝업 오픈\n      MetaApi.openDynamicPopup(title, action, record, closeCallback)\n    }\n\n    /**\n     * @description 시나리오 호출 버튼 처리\n     ***********************************\n     * @param {Object} action\n     * @param {Object or Array} params\n     * @param {Function} afterCallback\n     */\n    async executeCallScenarioButtonClick(action, params, afterCallback) {\n      // 시나리오 호출\n      let response = await MetaApi.callScenario(action.name, action.name, params)\n\n      // 처리 중 에러가 발생했으면 시나리오 호출 후 처리가 없으면 return\n      if (response !== false && !response.errors && ValueUtil.isNotEmpty(action.after)) {\n        afterCallback()\n      }\n    }\n\n    /**\n     * @description 상위 페이지 에서 하위 엘리먼트로 전달하는 ID 저장 및 조회 실행\n     ***********************************\n     * @param {String} id\n     */\n    setParentId(id) {\n      this.parent_id = id\n      this.fetch()\n    }\n  }\n"]}

package/dist-client/mixin/meta-basic-grist-mixin.d.ts

@@ -0,0 +1,190 @@
+import '@operato/data-grist';
+/**
+ * @description 메뉴 메타 정보를 이용해 그리드를 렌더링
+ ******************************************************
+ * @param {Object} MetaButtonMixin
+ * @returns
+ */
+export declare const MetaBasicGristMixin: (baseElement: any) => {
+    new (): {
+        [x: string]: any;
+        /**
+         * @description 그리스트
+         ***********************
+         * @returns {HTMLElement}
+         */
+        get grist(): any;
+        /**
+         * @description 필터 폼
+         ***********************
+         * @returns {HTMLElement}
+         */
+        get filterForm(): any;
+        /**
+         * @description 컨텍스트
+         ***********************
+         * @returns {HTMLElement}
+         */
+        get context(): {
+            title: string;
+            help: any;
+            actions: any[];
+        } | {
+            title?: undefined;
+            help?: undefined;
+            actions?: undefined;
+        };
+        /******************************************************
+         *                      LifeCycle
+         ******************************************************/
+        connectedCallback(): Promise<void>;
+        firstUpdated(): Promise<void>;
+        pageInitialized(lifecycle: any): Promise<void>;
+        pageUpdated(changes: any, lifecycle: any, before: any): Promise<void>;
+        render(): import("lit-html").TemplateResult<1>;
+        /**
+         * @descrtiption 메뉴 메타에서 기본 그리드 정보 파싱 처리
+         ************************************************
+         * @param {Object} menuMeta 메뉴 메타 정보
+         */
+        parseBasicGridConfigs(menuMeta: any): void;
+        /**
+         * @descrtiption 그리스트 구성 정보 파싱 처리
+         ***************************************
+         */
+        parseGristConfigs(): Promise<void>;
+        /********************************************************************
+         *                          C R U D Functions
+         ********************************************************************/
+        fetch(): Promise<void>;
+        back(): void;
+        save(): Promise<void>;
+        find(): Promise<any>;
+        delete(): Promise<void>;
+        export(): Promise<{
+            header: any;
+            data: any;
+        } | undefined>;
+        import(): Promise<void>;
+        clear(): Promise<void>;
+        getData(): any;
+        getCustomButtonContainerStyle(): import("lit").CSSResult[];
+        getContextButtons(): any;
+        getButtonContainer(): import("lit-html").TemplateResult<1>;
+        getBasicButtonHandler(type: any, action: any, logic: any): Promise<any>;
+        customButtonHandler(logic: any): Promise<void>;
+        gristButtonHandler(actionInfo: any, record: any): Promise<void>;
+        parseBasicButtonConfigs(menuMeta: any): void;
+        parseBasicServiceConfigs(menuMeta: any): void;
+        fetchHandler({ page, limit, sortings, filters }: {
+            page?: number | undefined;
+            limit?: number | undefined;
+            sortings?: never[] | undefined;
+            filters?: never[] | undefined;
+        }): Promise<any>;
+        getPageNavigateParams(): never[];
+        findOne(id: any): Promise<any>;
+        deleteByIds(ids: any): Promise<boolean>;
+        updateMultiple(params: any): Promise<boolean>;
+        get isElement(): boolean;
+        get isDetail(): any;
+        dataChangeEventHandler(e: any): Promise<void>;
+        get isPopup(): any;
+        get isPage(): boolean;
+        getAndParseMenuMeta(): Promise<void>;
+        excuteOpenPopupButtonClick(action: any, record: any, closeCallback: any): Promise<void>;
+        executeCallScenarioButtonClick(action: any, params: any, afterCallback: any): Promise<void>;
+        setParentId(id: any): void;
+    };
+    /**
+     * @description 스타일 정의
+     **************************
+     * @returns {Array} 스타일
+     */
+    get styles(): import("lit").CSSResult[];
+    /**
+     * @description 프로퍼티 정의
+     ***************************************
+     * @returns {Object} 프로퍼티
+     */
+    get properties(): {
+        /**
+         * @description 그리드 구성 정보
+         *****************************
+         * @type {Object}
+         */
+        gridConfig: ObjectConstructor;
+        /**
+         * @description 그리드 컬럼 구성 정보
+         *********************************
+         * @type {Array}
+         */
+        gridColumnConfig: ArrayConstructor;
+        /**
+         * @description 검색 폼 구성 정보
+         *******************************
+         * @type {Array}
+         */
+        searchConfig: ArrayConstructor;
+        /**
+         * @description 화면에서 사용되는 서치 폼 : grist, filter, not
+         *********************************************************
+         * @type {String}
+         */
+        searchFormElement: StringConstructor;
+        /**
+         * @description 메뉴 메타 정보로 부터 추출한 후 그리스트를 위해 설정 정보 구성
+         *****************************************************************
+         * @type {Object}
+         */
+        gristConfigSet: ObjectConstructor;
+        /**
+         * @description 필터 폼 사용 여부
+         *****************************
+         * @type {Boolean}
+         */
+        useFilterForm: BooleanConstructor;
+        /**
+         * @description 모바일 기기에서 그리드 모드 : GRID, LIST, CARD
+         *********************************************************
+         * @type {String}
+         */
+        gridMobileMode: StringConstructor;
+        /**
+         * @description 데스크탑에서 그리드 모드 : GRID, LIST, CARD
+         ******************************************************
+         * @type {String}
+         */
+        gridDeskMode: StringConstructor;
+        /**
+         * @description 그리드 뷰 모드 : GRID, LIST, CARD
+         **********************************************
+         * @type {Array}
+         */
+        gridViewOptions: ArrayConstructor;
+        /**
+         * @description 현재 그리드 뷰 모드 : GRID, LIST, CARD
+         ***************************************************
+         * @type {String}
+         */
+        gridMode: StringConstructor;
+        /**
+         * @description Infinity Page 사용 여부
+         **************************************
+         * @type {Boolean}
+         */
+        infinityPage: BooleanConstructor;
+        /**
+         * @description 그리스트 엘리먼트 ID
+         ***************************
+         * @type {String}
+         */
+        gristId: StringConstructor;
+        /**
+         * @description 필터 폼 엘리먼트 ID
+         ***************************
+         * @type {String}
+         */
+        filterFormId: StringConstructor;
+    };
+};