@things-factory/meta-ui 8.0.0 → 9.0.0-beta.3

package/client/utils/meta-ui-util.js

@@ -1,3304 +0,0 @@
-import '@material/web/icon/icon.js'
-import '@operato/data-grist/ox-record-creator.js'
-import 'ses'
-
-import { css, html, render, nothing } from 'lit'
-
-import { getEditor, getRenderer } from '@operato/data-grist'
-import { getValueGenerators } from '@operato/time-calculator'
-import moment from '@operato/moment-timezone-es'
-import {
-  ScrollbarStyles,
-  CommonGristStyles,
-  CommonButtonStyles,
-  ButtonContainerStyles,
-  CommonHeaderStyles
-} from '@operato/styles'
-
-import { MetaCrypto } from './meta-crypto'
-import { TermsUtil } from './terms-util'
-import { ValueUtil } from './value-util'
-import { ServiceUtil } from './service-util'
-import { UiUtil } from './ui-util'
-import { MetaApi } from './meta-api'
-
-/**
- * @license
- * Copyright © HatioLab Inc. All rights reserved.
- * @author Shortstop shortstop@hatiolab.com
- * @description 메타 UI에서 필요한 유틸리티 함수 정의
- */
-export class MetaUiUtil {
-  /**
-   * @description 메뉴 ID 정보로 메뉴 메타 정보 조회
-   ********************************************
-   * @param {String} menuId 메뉴 ID 값
-   * @returns {Object} 메뉴 메타 정보
-   */
-  static async findMenuMeta(menuId) {
-    let menu = await ServiceUtil.findOne('menu', menuId, 'template')
-
-    if (!menu) {
-      throw new Error(TermsUtil.tText('value_is_not_exist', { value: `${TermsUtil.tMenu('menu')} ${menuId}` }))
-    }
-
-    if (!menu.template) {
-      throw new Error(
-        TermsUtil.tText('value_is_not_exist', { value: `${TermsUtil.tMenu('menu')} ${TermsUtil.tLabel('model')}` })
-      )
-    }
-
-    this.menuId = menuId
-    return JSON.parse(menu.template)
-  }
-
-  /**
-   * @description 메뉴 라우팅 정보로 메뉴 메타 정보 조회
-   **********************************************
-   * @param {String} menuRouting 메뉴 route 값
-   * @returns {Object} 메뉴 메타 정보 (암호)
-   */
-  static async getMenuMetaData(menuRouting) {
-    let filters = [{ name: 'routing', operator: 'eq', value: menuRouting }]
-    let data = await ServiceUtil.searchByPagination('menus', filters, null, 0, 0, 'id,template')
-    return data
-  }
-
-  /**
-   * @description 메뉴 라우팅 정보로 메뉴 메타 정보 조회
-   **********************************************
-   * @param {Object} pageView
-   * @param {String} menuRouting 메뉴 route 값
-   * @returns {Object} 메뉴 메타 정보
-   */
-  static async findMenuMetaByRouting(pageView, menuRouting) {
-    let data = await MetaUiUtil.getMenuMetaData(menuRouting)
-    let menu = undefined
-
-    if (!data || !data.records || data.records.length == 0) {
-      if (pageView.defaultPageConfig) {
-        menu = { id: menuRouting, template: pageView.defaultPageConfig }
-      }
-    } else {
-      menu = data.records[0]
-      if (!menu.template && pageView.defaultPageConfig) {
-        menu.template = pageView.defaultPageConfig
-      }
-    }
-
-    if (!menu) {
-      throw new Error(TermsUtil.tText('value_is_not_exist', { value: `${TermsUtil.tMenu('menu')} ${menuRouting}` }))
-    } else if (!menu.template) {
-      throw new Error(
-        TermsUtil.tText('value_is_not_exist', { value: `${TermsUtil.tMenu('menu')} ${TermsUtil.tLabel('model')}` })
-      )
-    }
-
-    pageView.menuId = menu.id
-    return JSON.parse(MetaCrypto.dec(menu.template))
-  }
-
-  /**
-   * @description 기본 그리스트 페이지 프로퍼티 리턴
-   *******************************************
-   * @returns {Object} 기본 그리스트 페이지 프로퍼티
-   */
-  static getBasicGristPageProperties() {
-    return {
-      /* 메뉴 메타 정보  */
-      menuInfo: Object, // 메뉴 기본 정보
-      gridConfig: Object, // 그리드 구성 정보
-      gridColumnConfig: Array, // 그리드 컬럼 정보
-      formColumnConfig: Array, // form 컬럼 정보
-      buttonConfig: Array, // 버튼 구성 정보
-      searchConfig: Array, // 서치폼 구성 정보
-      gqlInfo: String, // GraphQL 정보
-      gqlFetchField: String, // GraphQL 조회 필드
-      searchFormElement: String, // 화면에서 사용 되는 서치폼 (grist, filter, not)
-      useFilterForm: Boolean, // 그리드내 filter 폼 사용 여부
-
-      /* 화면 구성  */
-      gristConfigSet: Object, // 메타정보에서 변환된 그리드 구성 정보
-      formConfigSet: Array, // 메타정보에서 변환된 폼 구성 정보
-      useButtonExport: Boolean, // 내보내기 버튼 사용 여부
-      useButtonImport: Boolean, // 가져오기 버튼 사용 여부
-      useButtonAdd: Boolean, // 추가 버튼 사용 여부
-      gridMobileMode: String, // 모바일 기기에서 그리드 뷰
-      gridDeskMode: String, // 데스크탑에서 그리드 뷰
-      gridViewOptions: Array, // 그리드 뷰 옵션
-      gridMode: String, // 현재 그리드 뷰 모드
-      infinityPage: true, // 페이지 사용시 false
-
-      route_name: String, // Element 로드시 화면을 그릴 메뉴 정보,
-      parent_id: String, // 상세 폼 뷰 상위 데이터 ID
-
-      /* 속성 ? */
-      is_detail: {
-        // 페이지 컴포넌트 여부
-        type: Boolean,
-        converter(value) {
-          let retVal = Boolean(value)
-          return retVal
-        }
-      },
-
-      is_popup: {
-        // 팝업 여부
-        type: Boolean,
-        converter(value) {
-          let retVal = Boolean(value)
-          return retVal
-        }
-      },
-
-      is_activity: {
-        // 작업 결재 관련 화면에서 호출 여부
-        type: Boolean,
-        converter(value) {
-          let retVal = Boolean(value)
-          return retVal
-        }
-      },
-
-      is_readonly: {
-        // 수정 불가 페이지
-        type: Boolean,
-        converter(value) {
-          let retVal = Boolean(value)
-          return retVal
-        }
-      }
-    }
-  }
-
-  /**
-   * @description 메뉴 메타 정보를 조회한 후 파싱...
-   ********************************************
-   * @param {HTMLElement} pageView
-   * @returns {Object} 메뉴 메타 정보
-   */
-  static async getMenuMeta(pageView) {
-    // 1. 라우팅 추출 및 메뉴 메타 정보 조회
-    let currentRouting = pageView.isPage ? UiUtil.currentRouting() : pageView.route_name
-    pageView.currentRouting = currentRouting
-    let menuMetaData = await MetaUiUtil.findMenuMetaByRouting(pageView, currentRouting)
-
-    // 2. Activity 여부에 따라 버튼 / 검색 삭제
-    if (pageView.is_activity === true) {
-      menuMetaData.grid.option.grid_refresh_when_page_activated = false
-      menuMetaData.grid.option.use_row_checker = false
-      menuMetaData.grid.option.pages = 'unlimited'
-      menuMetaData.grid.use_filter_form = false
-      menuMetaData.grid.button = []
-      menuMetaData.button = menuMetaData.button.filter(x => x.name == 'add')
-    }
-
-    // 3. 화면이 읽기 전용인 경우 그리드 Configuration 처리
-    if (pageView.is_readonly === true) {
-      menuMetaData.grid_column.forEach(x => {
-        x.editable = false
-      })
-      menuMetaData.button = menuMetaData.button.filter(x => x.name != 'add')
-    }
-
-    // 4. 필터 폼 사용 여부 강제 설정
-    if (pageView.use_filter_form === false) {
-      menuMetaData.grid.use_filter_form = false
-    }
-
-    // 5. 필드 변경 이벤트 처리자 설정
-    menuMetaData.grid_column
-      .filter(x => x.change_event_handler)
-      .forEach(x => {
-        if (!pageView.fieldChangeHandlers) pageView.fieldChangeHandlers = {}
-        pageView.fieldChangeHandlers[x.name] = x.change_event_handler
-      })
-
-    // 6. 그리드 타입 통합 처리 : object, resource-object -> meta-object-selector, resource-code-selector -> meta-code-selector
-    menuMetaData.grid_column.forEach(x => {
-      if (['resource-object', 'object'].includes(x.type)) {
-        x.type = 'meta-object-selector'
-      } else if (['resource-code-selector'].includes(x.type)) {
-        x.type = 'meta-code-selector'
-      }
-    })
-
-    // 7. 검색 필드의 검색 Operator가 in인 경우 디폴트 값을 배열로 변경
-    if (menuMetaData.search && menuMetaData.search.length > 0) {
-      menuMetaData.search.forEach(c => {
-        let value = c.value
-        if (value && c.operator == 'in' && value.indexOf(',') > 0) {
-          c.value = value.split(',')
-        }
-      })
-    }
-
-    // 8. 메뉴 메타 정보 리턴
-    return menuMetaData
-  }
-
-  /**
-   * @description 파라미터로 받은 pageLimits로 페이지네이션 페이지 수를 표시
-   ***************************************************************
-   * @param {Array} 페이지네이션 페이지 수 배열
-   * @returns {Object} 페이지네이션 페이지 수
-   */
-  static getGristPaginationCustomConfig(...pageLimits) {
-    return { pages: pageLimits }
-  }
-
-  /**
-   * @description 그리스트 기본 gutter 설정 리턴
-   ********************************************
-   * @param {Boolean} useRowSelector 행 선택 기능 사용 여부
-   * @param {Boolean} multiple 여러 행 선택 가능 여부
-   * @returns {Object} 그리스트 기본 gutter 설정
-   */
-  static getGristGuttersConfig(useRowSelector, multiple) {
-    let configList = [
-      { type: 'gutter', gutterName: 'dirty' },
-      { type: 'gutter', gutterName: 'sequence' }
-    ]
-
-    if (useRowSelector) {
-      configList.push({ type: 'gutter', gutterName: 'row-selector', multiple: multiple })
-    }
-
-    return configList
-  }
-
-  /**
-   * @description 그리스트 선택 모드 설정
-   ***************************************
-   * @returns {Object} 그리스트 선택 모드 설정
-   */
-  static getGristSelectableConfig(multiple) {
-    return { selectable: { multiple: multiple } }
-  }
-
-  /**
-   * @description 메뉴 메타 정보를 기반으로 그리드 설정 셋을 파싱하여 리턴
-   ************************************************************
-   * @param {Object} pageView 페이지
-   * @returns {Object} 그리드 설정 셋
-   */
-  static async parseGridConfigSet(pageView) {
-    // 0. GraphQL 예외 처리를 위한 오브젝트 초기 화
-    if (!pageView.gqlInfo) pageView.gqlInfo = {}
-    if (!pageView.gqlInfo.query) pageView.gqlInfo.query = {}
-    if (!pageView.gqlInfo.query.after_set_fields) pageView.gqlInfo.query.after_set_fields = {}
-
-    if (!pageView.gqlInfo.mutation) pageView.gqlInfo.mutation = {}
-    if (!pageView.gqlInfo.mutation.multiple) pageView.gqlInfo.mutation.multiple = {}
-    if (!pageView.gqlInfo.mutation.multiple.skip_fields) pageView.gqlInfo.mutation.multiple.skip_fields = []
-
-    // 1. 그리드 옵션
-    let gridOption = MetaUiUtil.getGridOptionSet(pageView)
-
-    // 2. 그리드 리스트 설정
-    let gridList = MetaUiUtil.getGridListSet(pageView)
-
-    // 3. 그리드 row 설정
-    let gridRow = MetaUiUtil.getGridRowSet(pageView)
-
-    // 4. 그리드 버튼 설정
-    let gridButton = MetaUiUtil.getGridButtonSet(pageView)
-
-    // 5. 그리드 컬럼 설정
-    let gridColumns = await MetaUiUtil.getGridColumnSet(pageView)
-
-    // 6. 그리드 meta-object-selector 타입이면서 검색 조건에 해당하는 컬럼을 찾아 숨김 컬럼으로 등록
-    gridColumns
-      .filter(x => ['meta-object-selector'].includes(x.type))
-      .forEach(col => {
-        pageView.searchConfig
-          .filter(x => x.name == col.name)
-          .forEach(x => {
-            const options = col.record.options
-            // 6.1. 검색 필드 명 설정
-            const filterName = options.referenceField ? options.referenceField : `${col.name}Id`
-
-            // 6.2. 검색 필드 설정 찾기
-            const filterIdx = pageView.searchConfig.findIndex(item => {
-              return item.name == col.name
-            })
-
-            // 6.3. 검색 필드를 그리드 컬럼 리스트에 추가
-            gridColumns.push({
-              type: 'meta-object-selector',
-              header: col.header,
-              name: filterName,
-              hidden: true,
-              record: {
-                editable: false,
-                mandatory: false,
-                options: options
-              },
-              unusable: true
-            })
-
-            // 6.4. 조회시 skip 필드 추가
-            pageView.gqlInfo.query.after_set_fields[filterName] = 'x'
-
-            // 6.5. 저장시 skip 필드 추가
-            pageView.gqlInfo.mutation.multiple.skip_fields.push(filterName)
-
-            // 6.6. 검색 설정 이름 변경
-            pageView.searchConfig[filterIdx].name = filterName
-            pageView.searchConfig[filterIdx].type = 'meta-object-selector'
-          })
-      })
-
-    // 7. 누적 계산 설정 컬럼 추출
-    let accumulatorCols = gridColumns.filter(col => (col.accumulator ? true : false))
-    if (accumulatorCols && accumulatorCols.length > 0) {
-      gridRow.accumulator = true
-    }
-
-    // 8. default 그리드 gutter
-    let gutterConfigs = MetaUiUtil.getGristGuttersConfig(gridOption.use_row_checker, gridRow.selectable.multiple)
-
-    // 9. 필터 폼에 검색 조건 필드 정의
-    if (pageView.useFilterForm == true) {
-      gridColumns = MetaUiUtil.setGridColumnSearchOption(pageView, gridColumns)
-    }
-
-    // 10. 그리드 강조 설정
-    if (pageView.gridEmphasized) {
-      // 10.1. 그리드 row
-      if (pageView.gridEmphasized && pageView.gridEmphasized.row && pageView.gridEmphasized.row.length > 0) {
-        gridRow.classifier = function (recordData, rowIdx) {
-          let settings = pageView.gridEmphasized.row
-
-          for (let idx = 0; idx < settings.length; idx++) {
-            const logic = settings[idx].logic
-            const c = new Compartment({ record: recordData, rowIdx })
-            const evalFunc = c.evaluate(`(record, rowIdx) => {
-                ${logic}
-            }`)
-            if (evalFunc(recordData, rowIdx)) {
-              return {
-                emphasized: [settings[idx].backgroundColor, settings[idx].fontColor]
-              }
-            }
-          }
-        }
-      }
-
-      // 10.2. 그리드 column
-      if (pageView.gridEmphasized && pageView.gridEmphasized.column) {
-        let columSetting = pageView.gridEmphasized.column
-
-        Object.keys(columSetting).forEach(key => {
-          let settings = columSetting[key]
-          let colIdx = gridColumns.findIndex(x => x.name == key)
-          if (!gridColumns[colIdx].record) gridColumns[colIdx].record = {}
-
-          gridColumns[colIdx].record.classifier = function (recordData, rowIdx) {
-            for (let idx = 0; idx < settings.length; idx++) {
-              const logic = settings[idx].logic
-              const c = new Compartment({ record: recordData, rowIdx })
-              const evalFunc = c.evaluate(`(record, rowIdx) => {
-                ${logic}
-              }`)
-              if (evalFunc(recordData, rowIdx)) {
-                return {
-                  emphasized: [settings[idx].backgroundColor, settings[idx].fontColor]
-                }
-              }
-            }
-          }
-        })
-      }
-    }
-
-    // 11. 그리드 최종 Configuration
-    return {
-      list: gridList,
-      pagination: gridOption.pages,
-      sorters: gridOption.sorters,
-      rows: gridRow,
-      columns: [...gutterConfigs, ...gridButton, ...gridColumns]
-    }
-  }
-
-  /**
-   * @description 메뉴 메타 정보를 기반으로 폼 설정 셋을 파싱하여 리턴
-   ********************************************************
-   * @param {Object} pageView 페이지
-   * @returns {Object} 폼 설정 셋
-   */
-  static async parseFormConfigSet(pageView) {
-    let formColumnConfig = pageView.formColumnConfig
-    let columns = []
-    let defaultValueGenerators = Object.keys(getValueGenerators())
-
-    for (let idx = 0; idx < formColumnConfig.length; idx++) {
-      let {
-        type = 'string',
-        name = undefined,
-        header = undefined,
-        hidden = false,
-        editable = true,
-        mandatory = false,
-        align = 'left',
-        select_opt = undefined,
-        object_opt = undefined,
-        default_value = undefined
-      } = formColumnConfig[idx]
-
-      // 컬럼 config 으로 변경 및 문자열 처리
-      let column = {
-        type: type,
-        name: name,
-        header_txt: ValueUtil.isEmpty(header) ? TermsUtil.tLabel(name) : TermsUtil.tLabel(header),
-        header: {
-          renderer: function (column) {
-            return column.header_txt
-          }
-        },
-        hidden: hidden,
-        record: {
-          editable: editable,
-          mandatory: mandatory,
-          align: align,
-          classifier: function () {},
-          renderer: getRenderer(type)
-        }
-      }
-
-      if (editable) {
-        column.record.editor = getEditor(type)
-      }
-
-      if (default_value) {
-        let defaultSet = default_value.split(',')
-        let defaultName = defaultSet[0]
-
-        if (defaultValueGenerators.includes(defaultName)) {
-          column.record.defaultValue =
-            defaultSet.length == 1 ? { name: defaultName } : { name: defaultName, params: { calc: defaultSet[1] } }
-        } else {
-          column.record.defaultValue = type === 'number' ? Number(default_value) : default_value
-        }
-      }
-
-      if (type == 'boolean-all') {
-        column.type = 'boolean'
-      }
-
-      // meta- 로 시작 되는 타입은 공통으로 메뉴를 조회 template 을 가져간다.
-      if (type.startsWith('meta-') && object_opt && object_opt.menu) {
-        object_opt = await MetaUiUtil.getGristMetaObjectOptions(type, object_opt)
-      }
-
-      // select-option
-      if (type === 'select' && ValueUtil.isNotEmpty(select_opt)) {
-        if (Array.isArray(select_opt)) {
-          column.record.options = select_opt
-        } else {
-          if (select_opt.type === 'code') {
-            // 공통 코드
-            column.record.options = await ServiceUtil.getCodeSelectorData(
-              select_opt.values ? select_opt.values : select_opt.name
-            )
-          } else if (select_opt.type === 'scenario') {
-            // 시나리오
-            column.record.options = await ServiceUtil.getCodeByScenario(select_opt.name, select_opt.args)
-          } else if (select_opt.type === 'entity') {
-            // 엔티티
-            column.record.options = await ServiceUtil.getCodeByEntity(select_opt.args)
-          }
-        }
-      }
-
-      if (type === 'meta-object-selector' && ValueUtil.isNotEmpty(object_opt)) {
-        column.record.options = { ...object_opt }
-      } else if (type === 'meta-code-selector' && ValueUtil.isNotEmpty(object_opt)) {
-        if (object_opt.dispField) {
-          object_opt.codes = await ServiceUtil.getCodeByEntity(object_opt)
-        }
-        column.record.options = { ...object_opt }
-      }
-      columns.push(column)
-    }
-
-    return columns
-  }
-
-  /**
-   * @description 메타 설정에서 그리드 옵션을 추출
-   *****************************************
-   * @param {Object} pageView
-   * @returns {Object}
-   */
-  static getGridOptionSet(pageView) {
-    let gridConfig = pageView.gridConfig
-    pageView.useFilterForm = gridConfig && gridConfig.use_filter_form != undefined ? gridConfig.use_filter_form : true
-
-    let {
-      mobile_mode = 'LIST',
-      desk_mode = 'GRID',
-      view_mode = [],
-      use_row_checker = true,
-      sorters = [],
-      pages = [50, 100, 500, 1000]
-    } = ValueUtil.isEmpty(gridConfig.option) ? {} : gridConfig.option
-
-    // 페이지 설정 변환
-    if (pages === 'unlimited' || pages === '-1') {
-      pageView.infinityPage = true
-      pages = { infinite: true }
-    } else {
-      pageView.infinityPage = false
-      pages.sort(function (a, b) {
-        return a - b
-      })
-      pages = { pages: pages }
-    }
-
-    // 모바일 데스크 뷰 모드
-    if (ValueUtil.isNotEmpty(view_mode)) {
-      if (view_mode.length == 1) {
-        desk_mode = view_mode[0]
-        mobile_mode = view_mode[0]
-      } else if (view_mode.length >= 2) {
-        if (!view_mode.includes(mobile_mode)) {
-          mobile_mode = view_mode[1]
-        }
-
-        if (!view_mode.includes(desk_mode)) {
-          desk_mode = view_mode[0]
-        }
-      }
-    }
-
-    pageView.gridMobileMode = mobile_mode
-    pageView.gridDeskMode = desk_mode
-    pageView.gridViewOptions = view_mode
-    pageView.gridMode = UiUtil.isMobileEnv() ? pageView.gridMobileMode : pageView.gridDeskMode
-
-    return {
-      use_row_checker: use_row_checker,
-      sorters: sorters,
-      pages: pages
-    }
-  }
-
-  /**
-   * @description 메타 설정에서 그리드 리스트 설정을 추출
-   ***********************************************
-   * @param {Object} pageView
-   * @returns {Object}
-   */
-  static getGridListSet(pageView) {
-    let gridList = {
-      fields: [ValueUtil.getParams(pageView.menuInfo, 'name'), ValueUtil.getParams(pageView.menuInfo, 'desc')]
-    }
-
-    // 기본 리스트 설정과 메타에서 가져온 설정 merge
-    if (pageView.gridConfig.list) {
-      Object.assign(gridList, pageView.gridConfig.list)
-    }
-
-    return gridList
-  }
-
-  /**
-   * @description 메타 설정에서 그리드 Row 옵션을 추출
-   *********************************************
-   * @param {Object} pageView
-   * @returns {Object}
-   */
-  static getGridRowSet(pageView) {
-    // 기본 옵션, 메타와 상관없이 그리드 로우 멀티 셀렉트는 false, click 이벤트는 없다.
-    let { multiple_select = false, click = undefined } = ValueUtil.isEmpty(pageView.gridConfig.row)
-      ? {}
-      : pageView.gridConfig.row
-
-    let retObject = {
-      selectable: { multiple: multiple_select },
-      appendable: pageView.useButtonAdd
-    }
-
-    if (ValueUtil.isNotEmpty(click)) {
-      retObject.handlers = { click: click }
-    }
-
-    return retObject
-  }
-
-  /**
-   * @description 메타 설정에서 그리드 버튼 옵션을 추출
-   *********************************************
-   * @param {Object} pageView
-   * @returns {Array}
-   */
-  static getGridButtonSet(pageView) {
-    let gridButtons = pageView.gridConfig.button
-    return ValueUtil.isEmpty(gridButtons)
-      ? []
-      : // 그리드 버튼 정보로 버튼 설정 정보를 구성하여 리턴
-        gridButtons.map(btn => {
-          // 기본 그리드 버튼
-          let button = { type: 'gutter', gutterName: 'button' }
-
-          // 레코드 특정 필드 값 조건에 따라서 아이콘을 변경 ...
-          if (ValueUtil.isNotEmpty(btn.icon)) {
-            // 아이콘이 Array 타입
-            if (Array.isArray(btn.icon)) {
-              // 지정 된 조건에 따라 아이콘을 바꾼다.
-              button.icon = record => {
-                if (ValueUtil.isNotEmpty(record)) {
-                  // 지정된 조건 Loop
-                  for (let i = 0; i < btn.icon.length; i++) {
-                    let logic = btn.icon[i]
-                    let useIcon = ValueUtil.compareObjectValues(
-                      logic,
-                      record,
-                      Object.keys(logic).filter(key => key != 'icon')
-                    )
-                    if (useIcon === true) {
-                      return logic.icon
-                    }
-                  }
-                }
-              }
-            } else {
-              button.icon = btn.icon
-            }
-          }
-
-          // 이름이 지정되어 있으면 변환
-          if (ValueUtil.isNotEmpty(btn.name)) {
-            button.name = btn.name
-          }
-          // Tooltip
-          if (ValueUtil.isNotEmpty(btn.label)) {
-            button.title = TermsUtil.tButton(btn.label)
-          }
-
-          // 버튼 유형이 기본이면 ( 그리스트 기본 제공 기능 및 추가 기능 )
-          if (btn.type === 'basic') {
-            let logicTxt = ValueUtil.getParams(btn, 'logic')
-
-            if (['history_copy', 'history_json'].includes(logicTxt)) {
-              button.handlers = {
-                click: (_columns, _data, _column, record, _rowIdx) => {
-                  if (record.id) {
-                    let action = {
-                      title: 'data_history_list',
-                      type: 'popup',
-                      tagname: logicTxt == 'history_copy' ? 'history-copy-list-popup' : 'history-json-list-popup',
-                      location:
-                        logicTxt == 'history_copy'
-                          ? 'pages/hgistory/history-copy-list-popup.js'
-                          : 'pages/hgistory/history-json-list-popup.js',
-                      menu: pageView.currentRouting,
-                      size: 'large',
-                      popup_field: 'open_param',
-                      parent_field: 'id'
-                    }
-
-                    let params = {
-                      ...record,
-                      gqlFunc: ValueUtil.getParams(pageView.gqlInfo, 'query', 'find_one_func'),
-                      gristConfig: JSON.parse(JSON.stringify(pageView.grist.config))
-                    }
-
-                    MetaUiUtil.gristButtonHandler(pageView, { logic: action }, params)
-                  }
-                }
-              }
-            } else {
-              button.handlers = { click: logicTxt }
-            }
-
-            // 버튼 유형이 커스텀이면 ...
-          } else {
-            button.handlers = {
-              click: (_columns, _data, _column, record, _rowIdx) => {
-                if (record.id) {
-                  MetaUiUtil.gristButtonHandler(pageView, btn, record)
-                }
-              }
-            }
-          }
-
-          return button
-        })
-  }
-
-  /**
-   * @description 메타 데이터에서 그리드 렌더링 config 을 생성
-   ***************************************************
-   * @param {Object} pageView 페이지
-   * @returns {Array} 그리드 컬럼 설정 리스트
-   */
-  static async getGridColumnSet(pageView) {
-    let gridColumnConfig = pageView.gridColumnConfig
-
-    // 메타에 그리드 컬럼 정보가 없으면
-    if (ValueUtil.isEmpty(gridColumnConfig)) {
-      return []
-    }
-
-    // CARD, LIST인 경우 컬럼 정보를 표시하기 위한 컬럼들 추출
-    let mobileDisplayColumns =
-      UiUtil.isMobileEnv() && pageView.etcConfig && pageView.etcConfig.mobile_display_columns
-        ? pageView.etcConfig.mobile_display_columns.split(',')
-        : []
-
-    let defaultValueGenerators = Object.keys(getValueGenerators())
-    let columns = []
-    for (let idx = 0; idx < gridColumnConfig.length; idx++) {
-      let {
-        type = 'string',
-        name = undefined,
-        header = undefined,
-        hidden = false,
-        editable = true,
-        mandatory = false,
-        sortable = false,
-        align = 'left',
-        width = 0,
-        exportable = false,
-        select_opt = undefined,
-        object_opt = undefined,
-        format = undefined,
-        default_value = undefined,
-        accumulator = undefined,
-        fixed = false
-      } = gridColumnConfig[idx]
-
-      // 컬럼 config 으로 변경 및 문자열 처리
-      let column = {
-        type: type,
-        name: name,
-        header: ValueUtil.isEmpty(header) ? '' : TermsUtil.tLabel(header),
-        hidden: hidden,
-        sortable: sortable,
-        width: width,
-        fixed: fixed,
-        record: { editable: editable, mandatory: mandatory, align: align, format: format }
-      }
-
-      // accumulator 설정이 있고 type이 number이면 accumulator 설정 추가
-      if (type.indexOf('number') >= 0 && accumulator) {
-        column.accumulator = accumulator
-      }
-
-      if (default_value) {
-        let defaultSet = default_value.split(',')
-        let defaultName = defaultSet[0]
-
-        if (defaultValueGenerators.includes(defaultName)) {
-          column.record.defaultValue =
-            defaultSet.length == 1 ? { name: defaultName } : { name: defaultName, params: { calc: defaultSet[1] } }
-        } else {
-          column.record.defaultValue = type === 'number' ? Number(default_value) : default_value
-        }
-      }
-
-      if (type == 'boolean-all') {
-        column.type = 'boolean'
-        let colHeaderTxt = column.header
-        column.header = {
-          renderer: function (col) {
-            return html`
-              <span>${colHeaderTxt}
-                <input type='checkbox'
-                  @change=${e => {
-                    e.stopPropagation()
-
-                    let targetElement = e.target
-                    let selected = targetElement.checked
-                    let grist = pageView.grist
-
-                    if (grist._data && grist._data.records) {
-                      let records = grist._data.records
-                      for (let idx = 0; idx < records.length; idx++) {
-                        targetElement.dispatchEvent(
-                          new CustomEvent('field-change', {
-                            bubbles: true,
-                            composed: true,
-                            detail: {
-                              before: records[idx][col.name],
-                              after: selected,
-                              record: records[idx],
-                              column: col,
-                              row: idx
-                            }
-                          })
-                        )
-                      }
-                    }
-                  }}
-                ></input>
-              </span>
-            `
-          }
-        }
-      }
-
-      // meta- 로 시작 되는 타입은 공통으로 메뉴를 조회 template 을 가져간다.
-      if (type.startsWith('meta-') && object_opt && object_opt.menu) {
-        object_opt = await MetaUiUtil.getGristMetaObjectOptions(type, object_opt)
-      }
-
-      // select-option
-      if (type === 'select' && ValueUtil.isNotEmpty(select_opt)) {
-        if (Array.isArray(select_opt)) {
-          column.record.options = select_opt
-        } else {
-          // 공통 코드
-          if (select_opt.type === 'code') {
-            column.record.options = await ServiceUtil.getCodeSelectorData(
-              select_opt.values ? select_opt.values : select_opt.name
-            )
-            // 시나리오
-          } else if (select_opt.type === 'scenario') {
-            column.record.options = await ServiceUtil.getCodeByScenario(select_opt.name, select_opt.args)
-            // 엔티티
-          } else if (select_opt.type === 'entity') {
-            column.record.options = await ServiceUtil.getCodeByEntity(select_opt.args)
-          }
-        }
-      }
-
-      // object-option
-      if (type === 'meta-object-selector' && ValueUtil.isNotEmpty(object_opt)) {
-        column.record.options = { ...object_opt }
-      } else if (type === 'meta-code-selector' && ValueUtil.isNotEmpty(object_opt)) {
-        if (object_opt.dispField) {
-          object_opt.codes = await ServiceUtil.getCodeByEntity(object_opt)
-        }
-        column.record.options = { ...object_opt }
-      }
-
-      // attributes (확장 속성)
-      if (type === 'attributes' && format) {
-        column.record.options = await ServiceUtil.getAttributeSetOptionFor(format)
-      }
-
-      // mask
-      if (type == 'mask') {
-        column.record.renderer = (value, column, record, rowIndex, field) => {
-          let maskVal = ''
-          if (value) {
-            let valCount = value.length
-            for (let i = 1; i <= valCount; i++) {
-              maskVal += '*'
-            }
-          } else {
-            maskVal = '********'
-          }
-          return maskVal
-        }
-      }
-
-      // LIST, CARD 에서 컬럼 정보 표시
-      if (mobileDisplayColumns.includes(name)) {
-        column.record.renderer = (value, column, record, rowIndex, field) => {
-          return TermsUtil.tLabel(header) + ': ' + value
-        }
-      }
-
-      // 내보내기 버튼 사용, 컬럼 내보내기 옵션
-      if (pageView.useButtonExport === true && exportable === true) {
-        column.imex = { header: column.header, key: column.name, width: column.width / 6, type: column.type }
-      }
-
-      columns.push(column)
-    }
-
-    if (this.is_activity !== true) {
-      return columns
-    }
-
-    return columns
-  }
-
-  /**
-   * @description meta-object, meta-code에 대한 설정을 가져온다. (menu or 설정)
-   ***********************************************************************
-   * @param {String} type 컬럼 타입
-   * @param {Object} options 컬럼 오브젝트 설정
-   * @returns {Object} 메타 변경 결과
-   */
-  static async getGristMetaObjectOptions(type, options) {
-    let data = await MetaUiUtil.getMenuMetaData(options.menu)
-
-    if (data && data.records && data.records.length > 0 && data.records[0].template) {
-      let menu = data.records[0]
-      let menu_template = JSON.parse(MetaCrypto.dec(menu.template))
-
-      if (!options.queryName) {
-        options.queryName = menu_template.gql.query.list_func
-      }
-
-      if (!options.select) {
-        options.select = menu_template.grid_column
-      }
-
-      if (!options.filterFields || options.filterFields.length == 0) {
-        options.filterFields = menu_template.search
-      }
-
-      if (!options.selectorName) {
-        options.selectorName = menu_template.menu.title
-      }
-
-      if (!options.filters) {
-        options.filters = menu_template.gql.query.filters || []
-      }
-
-      if (type.includes('-object-')) {
-        if (!options.nameField) {
-          options.nameField = menu_template.menu.name || 'name'
-        }
-      } else if (type.includes('-code-')) {
-        if (!options.codeField) {
-          options.codeField = menu_template.menu.name || 'code'
-        }
-
-        if (!options.dispField) {
-          options.dispField = menu_template.menu.desc || undefined
-        }
-      }
-    }
-
-    return options
-  }
-
-  /**
-   * @description 필터 폼에 검색 조건 필드 정의
-   *****************************************
-   * @param {HTMLElement} pageView 페이지
-   * @param {Array} gridColumns 그리드 컬럼 설정
-   * @returns
-   */
-  static setGridColumnSearchOption(pageView, gridColumns) {
-    let searchConfig = pageView.searchConfig
-
-    if (searchConfig) {
-      searchConfig.forEach(config => {
-        if (typeof config === 'string') {
-          gridColumns
-            .filter(col => col.name == config)
-            .forEach(col => {
-              col.filter = 'search'
-            })
-        } else if (typeof config === 'object') {
-          gridColumns
-            .filter(col => col.name == config.name)
-            .forEach(col => {
-              col.filter = config
-              col.filter.type = col.type === 'datetime' && config.operator == 'eq' ? 'datetime-local' : col.type
-              let defValue = col.filter.value
-              let dateKeywords = ['today', 'year', 'month', 'date', 'hour', 'min', 'sec']
-
-              if (
-                defValue &&
-                typeof defValue == 'string' &&
-                dateKeywords.filter(x => defValue.startsWith(x)).length > 0
-              ) {
-                let defRes = []
-                let dateFormat = { date: 'YYYY-MM-DD', datetime: 'YYYY-MM-DD HH:mm:ss' }
-                let durationType = {
-                  today: 'day',
-                  year: 'year',
-                  month: 'month',
-                  date: 'day',
-                  hour: 'hour',
-                  min: 'minute',
-                  sec: 'second'
-                }
-                let defDates = defValue.split(',')
-
-                defDates.forEach(x => {
-                  const todayMoment = moment()
-
-                  if (dateKeywords.includes(x)) {
-                    defRes.push(todayMoment.startOf(durationType[x]).format(dateFormat[col.type]))
-                  } else if (x.includes('-')) {
-                    let wordSplits = x.split('-')
-                    let key = wordSplits[0]
-                    let value = wordSplits[1]
-                    defRes.push(
-                      todayMoment
-                        .subtract(value, durationType[key])
-                        .startOf(durationType[key])
-                        .format(dateFormat[col.type])
-                    )
-                  } else if (x.includes('+')) {
-                    let wordSplits = x.split('+')
-                    let key = wordSplits[0]
-                    let value = wordSplits[1]
-                    defRes.push(
-                      todayMoment.add(value, durationType[key]).startOf(durationType[key]).format(dateFormat[col.type])
-                    )
-                  }
-                })
-
-                if (defRes.length > 0) col.filter.value = defRes.length == 1 ? defRes[0] : defRes
-              }
-            })
-        }
-      })
-    }
-
-    return gridColumns
-  }
-
-  /**
-   * @description 컨텍스트 오브젝트 리턴
-   **********************************
-   * @param {Object} pageView
-   * @returns {Object} 컨텍스트 오브젝트
-   */
-  static getContextObject(pageView) {
-    let ctx =
-      pageView && pageView.menuInfo
-        ? {
-            title: TermsUtil.tTitle(pageView.menuInfo.title),
-            help: pageView.menuInfo.help || '',
-            actions: [...MetaUiUtil.getContextButtons(pageView)]
-          }
-        : {}
-
-    // export 버튼
-    if (pageView.useButtonExport) {
-      ctx.exportable = {
-        name: ctx.title,
-        data: pageView.export.bind(pageView)
-      }
-    }
-
-    // import 버튼
-    if (pageView.useButtonImport) {
-      ctx.importable = {
-        handler: pageView.import.bind(pageView)
-      }
-    }
-
-    // Context
-    return ctx
-  }
-
-  /**
-   * @description 메뉴 컨텍스트에서 사용할 버튼 정보 추출
-   **********************************************
-   * @param {Object} pageView 페이지 뷰
-   * @returns {Array} 버튼 엘리먼트 리스트
-   */
-  static getContextButtons(pageView) {
-    let buttonConfig = pageView.buttonConfig
-    return ValueUtil.isEmpty(buttonConfig)
-      ? []
-      : buttonConfig
-          .filter(b => b.name != 'export' && b.name != 'import' && b.name != 'add')
-          .map(btn => {
-            let {
-              name = undefined,
-              label = undefined,
-              style = undefined,
-              type = 'basic',
-              action = undefined,
-              logic = undefined
-            } = btn
-
-            if (ValueUtil.isEmpty(name)) {
-              return { title: '-1' }
-            }
-
-            if (ValueUtil.isEmpty(label)) label = name
-            if (ValueUtil.isEmpty(style)) style = name
-            if (ValueUtil.isEmpty(action)) action = name
-
-            let btnStylecss = ValueUtil.isNotEmpty(style)
-              ? CommonButtonStyles[style] || {
-                  icon: style,
-                  emphasis: {
-                    raised: true,
-                    outlined: false,
-                    dense: false,
-                    danger: false
-                  }
-                }
-              : {}
-
-            return {
-              title: TermsUtil.tButton(label),
-              action: MetaUiUtil.getButtonActionHandler(pageView, type, action, logic),
-              ...btnStylecss
-            }
-          })
-          .filter(btn => btn.title != '-1')
-  }
-
-  /**
-   * @description element로 로드시 버튼 element를 container에 직접 추가
-   ****************************************************************
-   * @param {Object} pageView 페이지 뷰
-   * @returns {Array}  버튼 엘리먼트 리스트
-   */
-  static getContainerButtons(pageView) {
-    let buttonConfig = pageView && pageView.buttonConfig ? pageView.buttonConfig : null
-    return !buttonConfig
-      ? []
-      : buttonConfig
-          .filter(b => b.name != 'add')
-          .map(b => {
-            let {
-              name = undefined,
-              label = undefined,
-              style = undefined,
-              type = 'basic',
-              action = undefined,
-              logic = undefined
-            } = b
-
-            if (ValueUtil.isEmpty(label)) label = name
-            if (ValueUtil.isEmpty(style)) style = name
-            if (ValueUtil.isEmpty(action)) action = name
-
-            let btn = MetaUiUtil.createButtonElement(TermsUtil.tButton(label), style)
-            btn.onclick = MetaUiUtil.getButtonActionHandler(pageView, type, action, logic)
-            return btn
-          })
-  }
-
-  /**
-   * @description 버튼 엘리먼트를 생성
-   ********************************
-   * @param {String} buttonName
-   * @param {String} style
-   * @returns {HTMLElement} 버튼 엘리먼트
-   */
-  static createButtonElement(buttonName, style) {
-    let btnStyle = CommonButtonStyles[style] || {
-      icon: style,
-      emphasis: {
-        raised: true,
-        outlined: false,
-        dense: false,
-        danger: false
-      }
-    }
-
-    const { raised, outlined, dense, danger, icon } = btnStyle.emphasis
-
-    const template = html`
-      <button ?dense=${dense} ?raised=${raised} ?outlined=${outlined} ?danger=${danger}>
-        <md-icon>${icon || 'done'}</md-icon>
-        ${buttonName}
-      </button>
-    `
-
-    const container = document.createElement('div')
-    render(template, container)
-
-    const element = container.firstElementChild
-    return container.removeChild(element)
-  }
-
-  /**
-   * @description 버튼과 연결할 핸들러를 리턴
-   *************************************
-   * @param {Object} pageView 화면
-   * @param {String} type 버튼 유형 (기본, 커스텀, 그리드 버튼)
-   * @param {String} action 버튼 명
-   * @param {Object} logic 버튼 로직 (String || JSON)
-   * @returns {Function} 버튼 클릭시 실행될 액션 핸들러
-   */
-  static getButtonActionHandler(pageView, type, action, logic) {
-    if (type == 'basic') {
-      if (pageView[action]) {
-        return pageView[action].bind(pageView)
-      }
-    } else if (type == 'custom') {
-      return () => MetaUiUtil.customButtonHandler(pageView, action, logic)
-    }
-
-    // 버튼과 연결된 함수가 없습니다.
-    return () => {
-      UiUtil.showAlertPopup('title.warning', 'text.button_bind_func_is_not_exist', 'info', 'confirm')
-    }
-  }
-
-  /**
-   * @description 그리스트 버튼 (그리드에 추가된 버튼)에 대한 커스텀 액션 분기
-   ***************************************************************
-   * @param {Object} pageView
-   * @param {Object} actionInfo
-   * @param {Object} record
-   */
-  static async gristButtonHandler(pageView, actionInfo, record) {
-    let action = ValueUtil.getParams(actionInfo, 'logic')
-    let buttonName = ValueUtil.getParams(actionInfo, 'name')
-    let eventType = ValueUtil.getParams(action, 'type')
-
-    // 폼 팝업
-    if (eventType === 'form') {
-      // 상세 폼 뷰는 기본 정의된 로직으로 셋팅
-      action.tagname = 'meta-form-element'
-      action.location = 'pages/meta-form-element.js'
-      action.parent_field = 'id'
-      await MetaUiUtil.commonButtonOpenPopup(pageView, action, record)
-
-      // 다른 객체로 파라미터 전달
-    } else if (eventType === 'pass_param') {
-      MetaUiUtil.gristButtonPassParam(pageView, action, record)
-
-      // 페이지 이동
-    } else if (eventType === 'page') {
-      let passParams = action.param_field ? {} : record
-
-      if (action.param_field) {
-        Object.keys(record)
-          .filter(x => Object.keys(action.param_field).includes(x))
-          .map(x => {
-            if (Object.keys(action.param_field).includes(x)) {
-              let data = record[x]
-              passParams[action.param_field[x]] =
-                Array.isArray(data) === false && typeof data === 'object' && data.id ? { id: data.id } : data
-            }
-          })
-      }
-
-      UiUtil.pageNavigate(action.url, [passParams])
-
-      // 팝업 실행
-    } else if (eventType === 'popup') {
-      await MetaUiUtil.commonButtonOpenPopup(pageView, action, record)
-
-      // 서비스 호출
-    } else if (eventType === 'graphql') {
-      await MetaUiUtil.commonButtonCallService(pageView, action, record, record)
-
-      // 시나리오 호출
-    } else if (eventType === 'scenario') {
-      await MetaUiUtil.commonButtonCallScenario(pageView, buttonName, action, record)
-
-      // 설정된 조건에 따라 커스텀 로직 처리
-    } else if (eventType === 'value_reference') {
-      await MetaUiUtil.gristButtonValueReference(pageView, action, record)
-
-      // 첨부파일 다운로드 처리
-    } else if (eventType === 'download') {
-      MetaUiUtil.downloadFile(action, record)
-    }
-  }
-
-  /**
-   * @description 폼 화면에서의 커스텀 버튼에 대한 액션
-   *********************************************
-   * @param {Object} pageView
-   * @param {String} buttonName
-   * @param {Object} logic
-   */
-  static async formScreenCustomButtonHandler(pageView, buttonName, logic) {
-    if (ValueUtil.isEmpty(logic)) return
-
-    // TODO 현재 폼 엘리먼트에 검색 폼 기능이 없으므로 추후 추가 필요 && gristButtonHandler 함수와 거의 동일하게 로직이 처리되어야 하는데 로직이 약간 다름...
-    let formData = pageView.currentData
-    let eventType = ValueUtil.getParams(logic, 'type')
-    let paramInfo = ValueUtil.getParams(logic, 'param')
-    let params = { form: paramInfo && paramInfo.includes('form_changed') ? pageView.patchData() : formData }
-
-    /**
-     * data 정보가 있는 경우 폼 데이터로 부터 아래 구조대로 변형 처리
-     * data: {
-     *    "id": "$id",
-     *    "name": "$name",
-     *    "description": "$description",
-     *    "activeFlag": true,
-     *    "cuFlag": "M"
-     * }
-     */
-    let dataSchema = ValueUtil.getParams(logic, 'data')
-    // data schema (데이터 형태) 추출
-    if (ValueUtil.isNotEmpty(dataSchema)) {
-      params.form = ValueUtil.replaceVariableObject(dataSchema, formData)
-    }
-
-    // 페이지 이동
-    if (eventType === 'page') {
-      UiUtil.pageNavigate(logic.url, [params.form])
-
-      // 팝업 오픈
-    } else if (eventType === 'popup') {
-      await MetaUiUtil.commonButtonOpenPopup(pageView, logic, params)
-
-      // 서비스 호출
-    } else if (eventType === 'graphql') {
-      await MetaUiUtil.commonButtonCallService(pageView, logic, params.filter, params.form)
-
-      // 시나리오 호출
-    } else if (eventType === 'scenario') {
-      await MetaUiUtil.commonButtonCallScenario(pageView, buttonName, logic, params)
-    }
-  }
-
-  /**
-   * @description 그리드 화면에서의 커스텀 버튼에 대한 액션
-   ************************************************
-   * @param {Object} pageView 화면
-   * @param {String} buttonName 버튼 명
-   * @param {Object} logic 버튼 커스텀 로직 JSON
-   */
-  static async gristScreenCustomButtonHandler(pageView, buttonName, logic) {
-    if (ValueUtil.isEmpty(logic)) return
-
-    let grist = pageView.grist
-    let filterForm = pageView.filterForm
-
-    let eventType = ValueUtil.getParams(logic, 'type')
-    let paramInfo = ValueUtil.getParams(logic, 'param')
-    let includeGristParams = paramInfo.filter(p => p.startsWith('grist'))
-
-    // 오류 메시지 처리
-    if (ValueUtil.isNotEmpty(includeGristParams)) {
-      // 그리스트 존재 여부
-      if (!grist) {
-        // 그리드가 없습니다.
-        UiUtil.showAlertPopup('title.info', 'text.grid_is_not_exist', 'info', 'confirm')
-        return
-      }
-
-      // 그리스트 데이터 존재 여부 (편집중 데이터도 체크)
-      if ((grist?.data?.records || []).length == 0 && (grist?.dirtyData?.records || []).length == 0) {
-        // 비어있는 그리드 입니다.
-        UiUtil.showAlertPopup('title.info', 'text.grid_data_is_empty', 'info', 'confirm')
-        return
-      }
-
-      if (paramInfo.includes('grist_one') || paramInfo.includes('grist_selected')) {
-        // 선택된 행이 있는지 확인
-        let selectedRows = grist.selected
-
-        if (ValueUtil.isEmpty(selectedRows)) {
-          // 선택된 항목이 없습니다.
-          UiUtil.showAlertPopup('text.nothing_selected', 'text.there_is_no_selected_items', 'info', 'confirm')
-          return
-        }
-
-        if (paramInfo.includes('grist_one')) {
-          // 하나의 행만 선택 되었는지 확인
-          if (selectedRows.length > 1) {
-            //  하나의 항목만 선택해주세요.
-            UiUtil.showAlertPopup('title.info', 'text.please_select_only_one', 'info', 'confirm')
-            return
-          }
-        }
-      }
-    }
-
-    let params = {}
-
-    if (paramInfo.includes('filter')) {
-      if (!filterForm) {
-        // 서치폼이 없습니다.
-        UiUtil.showAlertPopup('title.info', 'text.search_form_is_not_exist', 'info', 'confirm')
-        return
-      }
-
-      let filterValues = filterForm ? await filterForm.getQueryFilters() : []
-      params['filter'] = filterValues
-    }
-
-    if (paramInfo.includes('grist_all')) {
-      params['grist'] = grist.data.records
-    } else if (paramInfo.includes('grist_one')) {
-      params['grist'] = grist.selected[0]
-    } else if (paramInfo.includes('grist_selected')) {
-      params['grist'] = grist.selected
-    } else if (paramInfo.includes('grist_changed')) {
-      let changedList = ServiceUtil.patchesForUpdateMultiple(grist)
-      if (!changedList) {
-        return
-      }
-
-      // 화면이 팝업 화면이라면 부모 ID를 레코드에 추가한다.
-      let pId = pageView.parent_id ? pageView.parent_id : null
-      let parentIdField = ValueUtil.getParams(logic, 'parent_field')
-
-      changedList.forEach(item => {
-        if (pId && parentIdField && !item[parentIdField]) {
-          item[parentIdField] = pId
-        }
-      })
-
-      params['grist'] = changedList
-    }
-
-    // 페이지 이동
-    if (eventType === 'page') {
-      let records = Array.isArray(params['grist']) ? params['grist'] : [params['grist']]
-      let passParams = logic.param_field ? null : records
-
-      if (logic.param_field) {
-        passParams = records.map(record => {
-          let recordParams = {}
-          Object.keys(record)
-            .filter(x => Object.keys(logic.param_field).includes(x))
-            .map(x => {
-              if (Object.keys(logic.param_field).includes(x)) {
-                let data = record[x]
-                recordParams[logic.param_field[x]] =
-                  Array.isArray(data) === false && typeof data === 'object' && data.id ? { id: data.id } : data
-              }
-            })
-          return recordParams
-        })
-      }
-
-      UiUtil.pageNavigate(logic.url, passParams)
-
-      // 팝업 오픈
-    } else if (eventType === 'popup') {
-      let convParam = {
-        ...(params['grist'] ? params['grist'] : {}),
-        ...(params['filter'] ? params['filter'] : {})
-      }
-      await MetaUiUtil.commonButtonOpenPopup(pageView, logic, convParam)
-
-      // 서비스 호출
-    } else if (eventType === 'graphql') {
-      let filterParam = params['filter'] ? params['filter'] : {}
-      let dataParams = params['grist'] ? params['grist'] : filterParam
-      await MetaUiUtil.commonButtonCallService(pageView, logic, filterParam, dataParams)
-
-      // 시나리오 호출
-    } else if (eventType === 'scenario') {
-      await MetaUiUtil.commonButtonCallScenario(pageView, buttonName, logic, params)
-
-      // 첨부파일 다운로드 처리
-    } else if (eventType == 'download' && paramInfo.includes('grist_one')) {
-      MetaUiUtil.downloadFile(logic, params['grist'])
-    }
-  }
-
-  /**
-   * @description 커스텀 버튼에 대한 액션 처리
-   **************************************
-   * @param {Object} pageView 화면
-   * @param {String} buttonName 버튼 명
-   * @param {Object} logic 커스텀 버튼 로직 JSON
-   */
-  static async customButtonHandler(pageView, buttonName, logic) {
-    // 폼 화면의 버튼 핸들링인지 그리드 계열 화면의 버튼 핸들링 인지 구분
-    if (pageView.localName.startsWith('meta-form')) {
-      await MetaUiUtil.formScreenCustomButtonHandler(pageView, buttonName, logic)
-    } else {
-      await MetaUiUtil.gristScreenCustomButtonHandler(pageView, buttonName, logic)
-    }
-  }
-
-  /**
-   * @description 파라미터 전달 버튼 처리
-   **********************************
-   * @param {Object} pageView
-   * @param {Object} action
-   * @param {Object} record
-   */
-  static gristButtonPassParam(pageView, action, record) {
-    // 파라미터 전달 정보
-    let passInfoAll = action.pass_field
-    let elementTagName = pageView.tagName.toLowerCase()
-    let pageElement = pageView
-    let passInfo =
-      elementTagName.startsWith('meta-grist-tab-') || elementTagName.startsWith('meta-master-detail-')
-        ? passInfoAll.detail
-          ? { ...passInfoAll } // 그리스트 탭 페이지는 하단으로 보내는 이벤트만 허용
-          : { detail: { ...passInfoAll } }
-        : { ...passInfoAll } // tab+tab or tab+etc or main-tab
-
-    Object.keys(passInfo).forEach(tab => {
-      if (tab == 'master') {
-        pageElement = pageView.rootElement.masterElement
-      } else if (tab == 'detail') {
-        pageElement = pageView.rootElement ? pageView.rootElement.detailElement : pageView.detailElement
-      } else if (tab == 'self') {
-        pageElement = pageView
-      }
-
-      if (pageElement) {
-        if (pageElement.tagName.toLowerCase().startsWith('meta-tab-element')) {
-          // Object Key로 Element 검색.
-          Object.keys(passInfo[tab]).forEach(elementId => {
-            let targetElement = pageElement.shadowRoot.querySelector(`#${elementId}`)
-            // 상위 데이터 ID
-            if (record.id) {
-              targetElement.setParentId(record.id)
-            }
-
-            // 대상 엘리먼트에 매치할 필드 정보
-            let matchInfo = passInfo[tab][elementId]
-
-            // 필드 정보 Loop tField : target , sField : source
-            Object.keys(matchInfo).forEach(tField => {
-              let sField = matchInfo[tField]
-              // param 값이 * 이면 record 전체
-              let param = sField === '*' ? record : record[sField]
-              // tElement.tField에 파라미터 set
-              targetElement[tField] = param
-            })
-          })
-        } else {
-          let targetElement = pageElement
-          // 상위 데이터 ID
-          if (record.id) {
-            targetElement.setParentId(record.id)
-          }
-
-          // 대상 엘리먼트에 매치할 필드 정보
-          let matchInfo = passInfo[tab]
-
-          // 필드 정보 Loop tField : target , sField : source
-          Object.keys(matchInfo).forEach(tField => {
-            let sField = matchInfo[tField]
-            // param 값이 * 이면 record 전체
-            let param = sField === '*' ? record : record[sField]
-            // tElement.tField에 파라미터 set
-            targetElement[tField] = param
-          })
-        }
-      }
-    })
-  }
-
-  /**
-   * @description 팝업 오픈 버튼 처리
-   ********************************
-   * @param {Object} pageView
-   * @param {Object} action
-   * @param {Object} record
-   */
-  static async commonButtonOpenPopup(pageView, action, record) {
-    // 타이틀 변환
-    let title = TermsUtil.tTitle(action.title)
-
-    // 타이틀 상세 필드 정의 확인
-    if (ValueUtil.isNotEmpty(action.title_detail)) {
-      title = `${title}(${ValueUtil.getParams(record, ...action.title_detail.split('.'))})`
-    }
-
-    // closeCallback
-    let closeCallback =
-      action.after && typeof action.after === 'string' && action.after === 'fetch' && pageView && pageView.fetch
-        ? pageView.fetch.bind(pageView)
-        : undefined
-
-    // 팝업 오픈
-    UiUtil.openDynamicPopup(title, action, record, closeCallback)
-  }
-
-  /**
-   * @description 서비스 호출 버튼 처리
-   *************************************
-   * @param {Object} pageView 페이지 뷰
-   * @param {Object} action 액션
-   * @param {Object or Array} filterParam 필터 파라미터
-   * @param {Object or Array} records 선택 레코드
-   */
-  static async commonButtonCallService(pageView, action, filterParam, records) {
-    // Graphql 서비스 호출
-    let response = await ServiceUtil.callService(pageView, action, filterParam, records)
-
-    // 후 처리 액션 처리
-    if (!response.errors && action.after && ValueUtil.isNotEmpty(action.after)) {
-      let afterParams = null
-
-      if (typeof action.after === 'object') {
-        afterParams = Array.isArray(response) ? response : [response]
-      }
-
-      await MetaUiUtil.afterActionHandler(pageView, action, afterParams)
-    }
-  }
-
-  /**
-   * @description 시나리오 호출 버튼 처리
-   ***********************************
-   * @param {Object} pageView
-   * @param {String} buttonName
-   * @param {Object} action
-   * @param {Object or Array} params
-   */
-  static async commonButtonCallScenario(pageView, buttonName, action, params) {
-    // 시나리오 호출
-    let response = await ServiceUtil.callScenario(buttonName, action.name, params)
-
-    // 처리 중 에러가 발생했거나 시나리오 호출 후 처리가 없으면 return
-    if (!response.errors && action.after && ValueUtil.isNotEmpty(action.after)) {
-      let afterParams = null
-
-      // after가 오브젝트이면 후 처리 로직
-      if (typeof action.after === 'object') {
-        let after = action.after
-        afterParams = ValueUtil.getParams(response.data.runScenario.result, ...after.result_name.split('.'))
-
-        if (Array.isArray(afterParams) == false) {
-          afterParams = [afterParams]
-        }
-      }
-
-      // 후 처리 처리
-      await MetaUiUtil.afterActionHandler(pageView, action, afterParams)
-    }
-  }
-
-  /**
-   * @description 버튼 처리 후 처리
-   *******************************
-   * @param {Object} pageView
-   * @param {Object} action
-   * @param {Object or Array} afterParams
-   */
-  static async afterActionHandler(pageView, action, afterParams) {
-    // after가 오브젝트이면 후 처리 로직
-    if (typeof action.after === 'object') {
-      let after = action.after
-
-      // 상세 폼 뷰 팝업 실행
-      if (after.type === 'form') {
-        after.tagname = 'meta-form-element'
-        after.location = 'pages/meta-form-element.js'
-        after.parent_field = 'id'
-        afterParams = afterParams[0]
-        await MetaUiUtil.commonButtonOpenPopup(pageView, after, afterParams)
-
-        // 페이지 이동 처리
-      } else if (after.type === 'page') {
-        let records = afterParams
-        let passParams = after.param_field ? null : records
-
-        if (after.param_field) {
-          passParams = records.map(record => {
-            let recordParams = {}
-            Object.keys(record)
-              .filter(x => Object.keys(after.param_field).includes(x))
-              .map(x => {
-                if (Object.keys(after.param_field).includes(x)) {
-                  let data = record[x]
-                  recordParams[after.param_field[x]] =
-                    Array.isArray(data) === false && typeof data === 'object' && data.id ? { id: data.id } : data
-                }
-              })
-            return recordParams
-          })
-        }
-
-        UiUtil.pageNavigate(after.url, passParams)
-
-        // 다른 객체로 파라미터 전달
-      } else if (after.type === 'pass_param') {
-        afterParams = afterParams[0]
-        MetaUiUtil.gristButtonPassParam(pageView, after, afterParams)
-
-        // 팝업 오픈
-      } else if (after.type === 'popup') {
-        afterParams = afterParams[0]
-        await MetaUiUtil.commonButtonOpenPopup(pageView, after, afterParams)
-
-        // 설정된 조건에 따라 커스텀 로직 처리
-      } else if (after.type === 'value_reference') {
-        afterParams = afterParams[0]
-        await MetaUiUtil.gristButtonValueReference(pageView, after, afterParams)
-      }
-
-      // after가 fetch이면 리프레쉬
-    } else if (action.after === 'fetch') {
-      pageView.fetch()
-
-      // after가 close이면 팝업 닫기
-    } else if (action.after == 'close') {
-      UiUtil.closePopupBy(pageView)
-    }
-  }
-
-  /**
-   * @description UI에서 파일 다운로드 처리
-   *************************************
-   * @param {Object} config 설정
-   * @param {Object} record 레코드
-   */
-  static downloadFile(config, record) {
-    let attachmentRoot = config.attachment_root
-    let attachColumn = config.attachment_column
-    let downloadColumn = config.download_name_column ? config.download_name_column : null
-
-    if (!attachColumn) {
-      throw new Error('attachmentColumn 정보가 없습니다.')
-    }
-
-    let attachColumns = attachColumn.split('.')
-    let fileData = record[attachColumns[0]]
-    let fileName = attachColumns.length == 1 ? fileData : fileData[attachColumns[1]]
-    let downloadName = downloadColumn ? record[downloadColumn] : fileName
-
-    const link = document.createElement('a')
-    link.setAttribute('href', `./${attachmentRoot}/${fileName}`)
-    link.setAttribute('download', downloadName)
-    document.body.appendChild(link)
-    link.click()
-    link.parentNode.removeChild(link)
-  }
-
-  /**
-   * @description 설정된 조건과 record 의 값을 비교. 로직 처리
-   ****************************************************
-   * @param {Object} pageView
-   * @param {Object} config
-   * @param {Object} record
-   */
-  static async gristButtonValueReference(pageView, config, record) {
-    // 지정된 조건 Loop
-    for (let idx = 0; idx < config.relation.length; idx++) {
-      let relation = config.relation[idx]
-      let useRelation = ValueUtil.compareObjectValues(
-        relation,
-        record,
-        Object.keys(relation).filter(key => key != 'logic')
-      )
-      if (useRelation === true) {
-        // 조건 체크 후 버튼 핸들러 호출
-        await MetaUiUtil.gristButtonHandler(pageView, relation, record)
-      }
-    }
-  }
-
-  /**
-   * @description 그리스트 Hidden 컬럼 설정
-   *************************************
-   * @param {String} type
-   * @param {String} name
-   * @returns {Object} 그리스트 Hidden 컬럼 설정
-   */
-  static getGristHiddenColumnConfig(type, name) {
-    return {
-      type: type,
-      name: name,
-      sortable: false,
-      hidden: true
-    }
-  }
-
-  /**
-   * @description 그리스트 기본 컬럼 설정
-   ***********************************
-   * @param {String} type
-   * @param {String} name
-   * @param {String} align
-   * @param {Boolean} editable
-   * @param {Boolean} sortable
-   * @param {Number} width
-   * @returns {Object} 그리스트 기본 컬럼 설정
-   */
-  static getGristColumnConfig(type, name, align, editable, sortable, width) {
-    let dispName = TermsUtil.tLabel(name)
-    return {
-      type: type,
-      name: name,
-      header: dispName,
-      record: {
-        align: align,
-        editable: editable
-      },
-      sortable: sortable,
-      width: width,
-      imex: {
-        width: Math.floor(width / 6),
-        header: dispName,
-        type: type,
-        key: name
-      }
-    }
-  }
-
-  /**
-   * @description 그리스트 컬럼 설정
-   *******************************
-   * @param {String} type
-   * @param {String} name
-   * @param {String} displayName
-   * @param {String} align
-   * @param {Boolean} editable
-   * @param {Boolean} sortable
-   * @param {Number} width
-   * @returns {Object} 그리스트 기본 컬럼 설정
-   */
-  static getGristColumnConfig2(type, name, displayName, align, editable, sortable, width) {
-    let dispName = TermsUtil.tLabel(displayName)
-    return {
-      type: type,
-      name: name,
-      header: dispName,
-      record: {
-        align: align,
-        editable: editable
-      },
-      sortable: sortable,
-      width: width,
-      imex: {
-        width: Math.floor(width / 6),
-        header: dispName,
-        type: type,
-        key: name
-      }
-    }
-  }
-
-  /**
-   * @description 그리스트 컬럼 설정
-   *******************************
-   * @param {String} type
-   * @param {String} name
-   * @param {String} displayName
-   * @param {String} align
-   * @param {Boolean} editable
-   * @param {Boolean} sortable
-   * @param {Boolean} mandatory
-   * @param {Number} width
-   * @returns {Object} 그리스트 기본 컬럼 설정
-   */
-  static getGristColumnConfig3(type, name, displayName, align, editable, sortable, mandatory, width) {
-    let dispName = TermsUtil.tLabel(displayName)
-    return {
-      type: type,
-      name: name,
-      header: dispName,
-      record: {
-        align: align,
-        editable: editable,
-        mandatory: mandatory
-      },
-      sortable: sortable,
-      width: width,
-      imex: {
-        width: Math.floor(width / 6),
-        header: dispName,
-        type: type,
-        key: name
-      }
-    }
-  }
-
-  /**
-   * @description 그리스트 Selector 컬럼 설정
-   ***************************************
-   * @param {String} name
-   * @param {String} displayName
-   * @param {String} align
-   * @param {Boolean} sortable
-   * @param {Number} width
-   * @param {Boolean} mandatory
-   * @param {Array} optionValues
-   * @returns {Object} 그리스트 기본 컬럼 설정
-   */
-  static getGristSelectorColumnConfig(name, displayName, align, sortable, width, mandatory, optionValues) {
-    let dispName = TermsUtil.tLabel(displayName)
-    return {
-      type: 'select',
-      name: name,
-      header: dispName,
-      record: {
-        align: align,
-        editable: true,
-        mandatory: mandatory,
-        options: optionValues
-      },
-      sortable: sortable,
-      width: width,
-      imex: {
-        width: Math.floor(width / 6),
-        header: dispName,
-        type: 'string',
-        key: name
-      }
-    }
-  }
-
-  /**
-   * @description 그리스트 Code Selector 컬럼 설정
-   ********************************************
-   * @param {String} name
-   * @param {String} displayName
-   * @param {String} align
-   * @param {Boolean} sortable
-   * @param {Number} width
-   * @param {Boolean} mandatory
-   * @param {String} codeName
-   * @returns {Object} 그리스트 기본 컬럼 설정
-   */
-  static async getGristCodeSelectorColumnConfig(name, displayName, align, sortable, width, mandatory, codeName) {
-    let optionValue = await ServiceUtil.getCodeSelectorData(codeName)
-    return MetaUiUtil.getGristSelectorColumnConfig(name, displayName, align, sortable, width, mandatory, optionValue)
-  }
-
-  /**
-   * @description 그리스트 검색 편집기 설정
-   ************************************
-   * @param {String} name
-   * @param {String} type
-   * @param {String} label
-   * @param {String} operator
-   * @param {Array} optionValues
-   * @returns {Object} 그리스트 검색 편집기 설정
-   */
-  static getGristSearchColumnConfig(name, type, label, operator, optionValues) {
-    let dispName = TermsUtil.tLabel(label)
-    let column = {
-      name: name,
-      type: type,
-      label: dispName,
-      operator: operator,
-      imex: {
-        width: 16,
-        header: dispName,
-        type: type,
-        key: name
-      }
-    }
-
-    if (optionValues) {
-      column.options = optionValues
-    }
-
-    return column
-  }
-
-  /**
-   * @description 그리스트 검색 코드 편집기 설정
-   ***************************************
-   * @param {String} name 검색 필드 명
-   * @param {String} type 검색 편집기 유형
-   * @param {String} label 검색 필드 라벨명
-   * @param {String} operator 검색 연산자
-   * @param {String} codeName 코드 이름
-   * @returns {Object} 그리스트 검색 코드 편집기 설정
-   */
-  static async getGristSearchCodeColumnConfig(name, type, label, operator, codeName) {
-    let optionValues = await ServiceUtil.getCodeSelectorData(codeName)
-    return MetaUiUtil.getGristSearchColumnConfig(name, type, label, operator, optionValues)
-  }
-
-  /**
-   * @description 기본 컨텍스트 버튼이 아닌 커스텀 버튼 컨테이너 스타일
-   *********************************************************
-   * @returns {Array} 커스텀 버튼 컨테이너 CSS 리턴
-   */
-  static getCustomButtonContainerStyles() {
-    return [ButtonContainerStyles]
-  }
-
-  /**
-   * @description 그리스트 강조 스타일 리턴
-   ************************************
-   * @returns {Array} 그리스트 강조 스타일 CSS
-   */
-  static getGristEmphasizedStyles() {
-    return [
-      css`
-        :host {
-          --grid-record-emphasized-background-color: red;
-          --grid-record-emphasized-color: yellow;
-        }
-      `
-    ]
-  }
-
-  /**
-   * @description 기본 그리스트 스타일 리턴
-   ************************************
-   * @returns {Array} 기본 그리스트 스타일 CSS 리턴
-   */
-  static getBasicGristStyles() {
-    return [
-      ScrollbarStyles,
-      CommonGristStyles,
-      CommonHeaderStyles,
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-          overflow-x: overlay;
-          background-color: var(--md-sys-color-background);
-        }
-
-        ox-grist {
-          overflow-y: auto;
-          flex: 1;
-        }
-
-        ox-filters-form {
-          flex: 1;
-        }
-      `,
-      ...MetaUiUtil.getGristEmphasizedStyles(),
-      ...MetaUiUtil.getCustomButtonContainerStyles()
-    ]
-  }
-
-  /**
-   * @description 기본 그리스트 탭 스타일 리턴
-   **************************************
-   * @returns {Array} 기본 그리스트 탭 스타일 CSS 리턴
-   */
-  static getBasicGristTabStyles() {
-    return [
-      ScrollbarStyles,
-      CommonGristStyles,
-      CommonHeaderStyles,
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-          overflow-x: overlay;
-          background-color: var(--md-sys-color-background);
-        }
-
-        .container {
-          flex: 1;
-          display: grid;
-          overflow: hidden;
-        }
-
-        .container_detail {
-          background-color: var(--md-sys-color-background);
-          display: flex;
-          flex-direction: column;
-          flex: 1;
-          overflow-y: auto;
-        }
-
-        h2 {
-          padding: var(--subtitle-padding);
-          font: var(--subtitle-font);
-          color: var(--subtitle-text-color);
-          border-bottom: var(--subtitle-border-bottom);
-        }
-
-        .container_detail h2 {
-          margin: var(--grist-title-margin);
-          border: var(--grist-title-border);
-          font: var(--grist-title-font);
-          color: var(--md-sys-color-secondary);
-        }
-
-        .container_detail h2 md-icon {
-          --md-icon-size: var(--grist-title-icon-size);
-          vertical-align: middle;
-          margin: var(--grist-title-icon-margin);
-          color: var(--grist-title-icon-color);
-        }
-
-        h2 {
-          padding-bottom: var(--grist-title-with-grid-padding);
-        }
-
-        ox-grist {
-          overflow-y: auto;
-          flex: 1;
-        }
-
-        ox-filters-form {
-          flex: 1;
-        }
-      `,
-      ...MetaUiUtil.getGristEmphasizedStyles(),
-      ...MetaUiUtil.getCustomButtonContainerStyles()
-    ]
-  }
-
-  /**
-   * @description 기본 마스터 디테일 스타일 리턴
-   ****************************************
-   * @returns {Array} 기본 마스터 디테일 스타일 CSS 리턴
-   */
-  static getBasicMasterDetailStyles() {
-    return [
-      ScrollbarStyles,
-      CommonGristStyles,
-      CommonHeaderStyles,
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-          overflow-x: overlay;
-          background-color: var(--md-sys-color-background);
-        }
-
-        .container {
-          flex: 1;
-          display: grid;
-          overflow: hidden;
-        }
-
-        .container_detail {
-          background-color: var(--md-sys-color-background);
-          display: flex;
-          flex-direction: column;
-          flex: 1;
-          overflow-y: auto;
-        }
-
-        h2 {
-          padding: var(--subtitle-padding);
-          font: var(--subtitle-font);
-          color: var(--subtitle-text-color);
-          border-bottom: var(--subtitle-border-bottom);
-        }
-
-        .container_detail h2 {
-          margin: var(--grist-title-margin);
-          border: var(--grist-title-border);
-          font: var(--grist-title-font);
-          color: var(--md-sys-color-secondary);
-        }
-
-        .container_detail h2 md-icon {
-          --md-icon-size: var(--grist-title-icon-size);
-          vertical-align: middle;
-          margin: var(--grist-title-icon-margin);
-          color: var(--grist-title-icon-color);
-        }
-
-        h2 {
-          padding-bottom: var(--grist-title-with-grid-padding);
-        }
-
-        ox-grist {
-          overflow-y: auto;
-          flex: 1;
-        }
-
-        ox-filters-form {
-          flex: 1;
-        }
-      `,
-      ...MetaUiUtil.getGristEmphasizedStyles(),
-      ...MetaUiUtil.getCustomButtonContainerStyles()
-    ]
-  }
-
-  /**
-   * @description 기본 TAB 디테일 스타일 리턴
-   **************************************
-   * @returns {Array} 기본 TAB 디테일 스타일 CSS 리턴
-   */
-  static getBasicTabDetailStyles() {
-    return [
-      ScrollbarStyles,
-      CommonGristStyles,
-      CommonHeaderStyles,
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-          overflow-x: overlay;
-          background-color: var(--md-sys-color-background);
-        }
-
-        .container {
-          flex: 1;
-          display: grid;
-          overflow: hidden;
-        }
-
-        .container_detail {
-          background-color: var(--md-sys-color-background);
-          display: flex;
-          flex-direction: column;
-          flex: 1;
-          overflow-y: auto;
-        }
-
-        h2 {
-          padding: var(--subtitle-padding);
-          font: var(--subtitle-font);
-          color: var(--subtitle-text-color);
-          border-bottom: var(--subtitle-border-bottom);
-        }
-
-        .container_detail h2 {
-          margin: var(--grist-title-margin);
-          border: var(--grist-title-border);
-          font: var(--grist-title-font);
-          color: var(--md-sys-color-secondary);
-        }
-
-        .container_detail h2 md-icon {
-          --md-icon-size: var(--grist-title-icon-size);
-          vertical-align: middle;
-          margin: var(--grist-title-icon-margin);
-          color: var(--grist-title-icon-color);
-        }
-
-        h2 {
-          padding-bottom: var(--grist-title-with-grid-padding);
-        }
-
-        ox-grist {
-          overflow-y: auto;
-          flex: 1;
-        }
-
-        ox-filters-form {
-          flex: 1;
-        }
-      `,
-      ...MetaUiUtil.getGristEmphasizedStyles(),
-      ...MetaUiUtil.getCustomButtonContainerStyles()
-    ]
-  }
-
-  /**
-   * @description 기본 MAIN TAB 스타일 리턴
-   **************************************
-   * @returns {Array} 기본 MAIN TAB 스타일 CSS 리턴
-   */
-  static getBasicMainTabStyles() {
-    return [
-      ScrollbarStyles,
-      CommonGristStyles,
-      CommonHeaderStyles,
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-          overflow-x: overlay;
-          background-color: var(--md-sys-color-background);
-        }
-
-        .container {
-          flex: 1;
-          display: grid;
-          overflow: hidden;
-        }
-
-        ox-grist {
-          overflow-y: auto;
-          flex: 1;
-        }
-
-        ox-filters-form {
-          flex: 1;
-        }
-      `,
-      ...MetaUiUtil.getGristEmphasizedStyles(),
-      ...MetaUiUtil.getCustomButtonContainerStyles()
-    ]
-  }
-
-  /**
-   * @description 기본 마스터 디테일 그리스트 스타일 리턴
-   *********************************************************
-   * @param {String} masterDetailType top-down / left-right
-   * @returns {Array} 마스터 디테일 그리스트 스타일 CSS
-   */
-  static getBasicMasterDetailGristStyle(masterDetailType) {
-    if (masterDetailType == 'top-down') {
-      return MetaUiUtil.getMasterDetailTopDownGristStyle()
-    } else {
-      return MetaUiUtil.getMasterDetailLeftRightGristStyle()
-    }
-  }
-
-  /**
-   * @description top-down 형태의 마스터 디테일 그리스트 스타일 리턴
-   ************************************************************
-   * @returns {Array} top-down 형태의 마스터 디테일 그리스트 스타일 CSS
-   */
-  static getMasterDetailTopDownGristStyle() {
-    return [
-      ButtonContainerStyles,
-      CommonGristStyles,
-      CommonHeaderStyles,
-      ScrollbarStyles,
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-          overflow-x: auto;
-          background-color: var(--md-sys-color-background);
-        }
-
-        .container {
-          flex: 1;
-          display: grid;
-          overflow: hidden;
-          grid-template-rows: 50% 50%;
-        }
-
-        .container_detail {
-          background-color: var(--md-sys-color-background);
-          display: flex;
-          flex-direction: column;
-          flex: 1;
-          overflow-y: auto;
-        }
-
-        h2 {
-          padding: var(--subtitle-padding);
-          font: var(--subtitle-font);
-          color: var(--subtitle-text-color);
-          border-bottom: var(--subtitle-border-bottom);
-        }
-
-        .container_detail h2 {
-          margin: var(--grist-title-margin);
-          border: var(--grist-title-border);
-          font: var(--grist-title-font);
-          color: var(--md-sys-color-secondary);
-        }
-
-        .container_detail h2 md-icon {
-          --md-icon-size: var(--grist-title-icon-size);
-          vertical-align: middle;
-          margin: var(--grist-title-icon-margin);
-          color: var(--grist-title-icon-color);
-        }
-
-        h2 {
-          padding-bottom: var(--grist-title-with-grid-padding);
-        }
-
-        ox-grist {
-          overflow-y: auto;
-          flex: 1;
-        }
-
-        ox-filters-form {
-          flex: 1;
-        }
-      `
-    ]
-  }
-
-  /**
-   * @description left-rigth 형태의 마스터 디테일 그리스트 스타일 리턴
-   **************************************************************
-   * @returns {Array} left-rigth 형태의 마스터 디테일 그리스트 스타일 CSS
-   */
-  static getMasterDetailLeftRightGristStyle() {
-    return [
-      ButtonContainerStyles,
-      CommonGristStyles,
-      CommonHeaderStyles,
-      ScrollbarStyles,
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-          overflow-x: auto;
-          background-color: var(--md-sys-color-background);
-        }
-
-        .container {
-          flex: 1;
-          display: grid;
-          overflow: hidden;
-          grid-template-columns: 50% 50%;
-        }
-
-        .container_detail {
-          background-color: var(--md-sys-color-background);
-          display: flex;
-          flex-direction: column;
-          flex: 1;
-          overflow-y: auto;
-        }
-
-        h2 {
-          padding: var(--subtitle-padding);
-          font: var(--subtitle-font);
-          color: var(--subtitle-text-color);
-          border-bottom: var(--subtitle-border-bottom);
-        }
-
-        .container_detail h2 {
-          margin: var(--grist-title-margin);
-          border: var(--grist-title-border);
-          font: var(--grist-title-font);
-          color: var(--md-sys-color-secondary);
-        }
-
-        .container_detail h2 md-icon {
-          --md-icon-size: var(--grist-title-icon-size);
-          vertical-align: middle;
-          margin: var(--grist-title-icon-margin);
-          color: var(--grist-title-icon-color);
-        }
-
-        h2 {
-          padding-bottom: var(--grist-title-with-grid-padding);
-        }
-
-        ox-grist {
-          overflow-y: auto;
-          flex: 1;
-        }
-
-        ox-filters-form {
-          flex: 1;
-        }
-      `
-    ]
-  }
-
-  /**
-   * @description 기본 폼 스타일 리턴
-   ************************************
-   * @returns {Array} 기본 폼 스타일 CSS 리턴
-   */
-  static getBasicFormStyles() {
-    return [
-      ScrollbarStyles,
-      CommonHeaderStyles,
-      css`
-        :host {
-          display: flex;
-          flex: 1;
-          flex-direction: column;
-          overflow-x: overlay;
-          background-color: var(--md-sys-color-background);
-        }
-
-        .container {
-          display: grid;
-          grid-auto-rows: min-content;
-          grid-gap: var(--record-view-gap);
-          padding: var(--record-view-padding);
-          overflow-y: auto;
-          height: 100%;
-          border-bottom: var(--record-view-border-bottom);
-        }
-
-        .root_container {
-          display: flex;
-          flex: 1;
-          flex-direction: column;
-          padding: var(--record-view-padding);
-          overflow-y: auto;
-          height: 100%;
-          border-bottom: var(--record-view-border-bottom);
-        }
-
-        .content_container {
-          display: grid;
-          grid-auto-rows: min-content;
-          grid-gap: var(--record-view-gap);
-          padding: var(--record-view-padding);
-        }
-
-        h2 {
-          border: var(--grist-title-border);
-          font: var(--grist-title-font);
-          color: var(--md-sys-color-secondary);
-          margin: var(--grist-title-margin);
-          padding-bottom: var(--grist-title-with-grid-padding);
-          padding-top: var(--grist-title-with-grid-padding);
-          border-bottom: var(--subtitle-border-bottom);
-        }
-
-        h2 md-icon {
-          --md-icon-size: var(--grist-title-icon-size);
-          vertical-align: middle;
-          margin: var(--grist-title-icon-margin);
-          color: var(--grist-title-icon-color);
-        }
-
-        label {
-          display: flex;
-          align-items: center;
-          position: relative;
-          text-transform: capitalize;
-
-          padding: var(--record-view-item-padding);
-          border-bottom: var(--record-view-border-bottom);
-          font: var(--record-view-label-font);
-          color: var(--record-view-label-color);
-        }
-
-        label md-icon {
-          display: none;
-        }
-
-        label[editable] md-icon {
-          --md-icon-size: var(--record-view-label-icon-size);
-          display: inline-block;
-          opacity: 0.5;
-        }
-
-        ox-grid-field {
-          border-top: none;
-          border-bottom: var(--record-view-border-bottom);
-          font: var(--record-view-font);
-          color: var(--record-view-color);
-          background-color: transparent;
-          margin-right: 10px;
-        }
-
-        ox-grid-field[editing='true'] {
-          border-bottom: var(--record-view-edit-border-bottom);
-        }
-      `,
-      ...MetaUiUtil.getCustomButtonContainerStyles()
-    ]
-  }
-
-  /**
-   * @description 기본 탭 스타일 리턴
-   ************************************
-   * @returns {Array} 기본 탭 스타일 CSS 리턴
-   */
-  static getBasicTabStyles() {
-    return [
-      css`
-        :host {
-          display: flex;
-          flex: 1;
-          flex-direction: column;
-          overflow-x: overlay;
-          background-color: var(--md-sys-color-background);
-        }
-
-        .tabs {
-          display: flex;
-          padding: 0 0 0 var(--spacing-medium);
-          border-bottom: 1px solid var(--md-sys-color-primary);
-        }
-
-        .tab {
-          background-color: var(--md-sys-color-secondary-container);
-          color: var(--md-sys-color-on-secondary-container);
-          margin-top: var(--spacing-medium);
-          padding: var(--spacing-small) var(--spacing-large) 0 var(--spacing-large);
-          border-radius: 9px 9px 0 0;
-          border-right: 1px solid rgba(0, 0, 0, 0.4);
-          text-transform: capitalize;
-          opacity: 0.7;
-          font-size: 15px;
-          cursor: pointer;
-        }
-
-        .tab[activate] {
-          background-color: var(--md-sys-color-primary);
-          color: var(--md-sys-color-on-primary);
-          box-shadow: 2px -2px 2px 0px rgba(0, 0, 0, 0.15);
-          opacity: 1;
-          font-weight: bold;
-        }
-
-        .tab > md-icon {
-          width: 15px;
-          height: 20px;
-          padding: 0;
-          margin: 0;
-          --md-icon-size: 15px;
-          vertical-align: middle;
-        }
-
-        .content-container {
-          flex: 1;
-          display: flex;
-          flex-direction: column;
-          background-color: var(--md-sys-color-surface);
-          border-radius: 0 var(--border-radius) var(--border-radius) var(--border-radius);
-          border: var(--border-dim-color);
-          border-width: 0 1px 1px 1px;
-          box-shadow: var(--box-shadow);
-          overflow: auto;
-        }
-
-        .tab-contents {
-          display: flex;
-          flex: 1;
-          flex-direction: column;
-          overflow-x: overlay;
-          background-color: var(--md-sys-color-background);
-        }
-      `
-    ]
-  }
-
-  /**
-   * @description 그리드 설정에 버튼 이름이 buttonName인 버튼이 있는지 체크
-   **************************************************************
-   * @param {Object} buttonConfig 버튼 설정
-   * @param {String} buttonName 버튼 명
-   * @returns
-   */
-  static isButtonExist(buttonConfig, buttonName) {
-    let button = buttonConfig
-      ? buttonConfig.find(b => {
-          return b.name == buttonName
-        })
-      : null
-    return button ? true : false
-  }
-
-  /**
-   * @description 그리드 설정에 버튼 이름이 buttonName인 버튼이 있는지 체크
-   **************************************************************
-   * @param {Object} gridConfig 그리드 설정
-   * @param {String} buttonName 버튼 명
-   * @returns
-   */
-  static isGridButtonExist(gridConfig, buttonName) {
-    let button =
-      gridConfig && gridConfig.button
-        ? gridConfig.button.find(b => {
-            return b.name == buttonName
-          })
-        : null
-    return button ? true : false
-  }
-
-  /**
-   * @description 그리드 설정에서 셀렉트 컬럼을 추출
-   *******************************************
-   * @param {Array} gridColumns 그리드 컬럼 설정
-   * @returns {String} 셀렉트 필드 정보
-   */
-  static getSelectColumns(gridColumns) {
-    let fields = ''
-
-    gridColumns
-      .filter(x => x.type != 'gutter')
-      .forEach(c => {
-        fields += '\n'
-        fields += ['meta-object-selector', 'object', 'resource-object'].includes(c.type)
-          ? `${c.name}\n{${MetaUiUtil.getObjctColumnSelectFields(c)}}`
-          : c.type == 'board'
-            ? `${c.name}\n{${'\nid\nname\nthumbnail'}}`
-            : c.name
-      })
-
-    return fields
-  }
-
-  /**
-   * Object 타입의 컬럼에 대한 셀렉트 필드 추출 후 리턴
-   ********************************************
-   * @param {Object} gridCol
-   * @returns {String} Object 타입의 필드 문자열
-   */
-  static getObjctColumnSelectFields(gridCol) {
-    let colStr = ''
-
-    if (
-      ValueUtil.isNotEmpty(gridCol.record) &&
-      ValueUtil.isNotEmpty(gridCol.record.options) &&
-      ValueUtil.isNotEmpty(gridCol.record.options.select)
-    ) {
-      // 설정에 정의가 되어 있으면
-      gridCol.record.options.select.forEach(x => {
-        if (x.name && x.name !== '') {
-          if (['meta-object-selector', 'object', 'resource-object'].includes(x.type)) {
-            colStr += `\n${x.name} { ${MetaUiUtil.getObjctColumnSelectFields(x)} \n }`
-          } else {
-            colStr += `\n${x.name}`
-          }
-        }
-      })
-    }
-
-    if (colStr == '') {
-      // 설정에 정의가 되어 있지 않으면 기본 id, name, description 필드
-      colStr += '\nid\nname\ndescription'
-    }
-
-    return colStr
-  }
-
-  /**
-   * @description pageView의 그리드 정보로 기본 그리스트 Html을 생성하여 리턴
-   *****************************************************************
-   * @param {String} pageView 페이지 뷰
-   * @returns {HTMLElement} 그리스트 HTML
-   */
-  static getBasicGristHtml(pageView) {
-    let gristConfigSet = pageView.gristConfigSet
-    if (!gristConfigSet) {
-      return html``
-    } else {
-      let gristElementId = pageView.gristId ? pageView.gristId : 'ox-grist'
-      let gridMode = pageView.gridMode
-      return html`
-        <ox-grist
-          id=${gristElementId}
-          .config=${gristConfigSet}
-          .mode=${gridMode}
-          auto-fetch
-          .personalConfigProvider=${pageView.getPagePreferenceProvider(gristElementId)}
-          .fetchHandler=${pageView.fetchHandler.bind(pageView)}
-        >
-          ${MetaUiUtil.getGridDetailHtml(pageView)}
-
-          <ox-grist-personalizer slot="setting"></ox-grist-personalizer>
-        </ox-grist>
-      `
-    }
-  }
-
-  /**
-   * @description pageView의 폼 정보로 기본 폼 Html을 생성하여 리턴
-   *********************************************************
-   * @param {Object} pageView 페이지 뷰
-   * @returns {HTMLElement} 폼을 HTML
-   */
-  static getBasicFormHtml(pageView) {
-    if (!pageView) return html``
-    if (!pageView.formConfigSet) return html``
-
-    let cols = pageView.formConfigSet
-    let record = pageView.record || {}
-    let columns = cols.filter(x => x.hidden == false)
-
-    // 폼 렌더링 옵션 여부
-    if (ValueUtil.isEmpty(pageView.formRenderConfig)) {
-      return MetaUiUtil.getBasicFormHtmlNoOption(pageView, columns, record)
-    } else {
-      return MetaUiUtil.getBasicFormHtmlOnOption(pageView, columns, record)
-    }
-  }
-
-  /**
-   * @description pageView의 폼 정보로 폼렌더링 옵션을 적용한 폼 Html을 생성하여 리턴
-   ***********************************************************************
-   * @param {Object} pageView 페이지 뷰
-   * @param {Array} columns 구성 컬럼
-   * @param {Object} record 표현 데이터
-   * @returns {HTMLElement} 폼을 HTML
-   */
-  static getBasicFormHtmlOnOption(pageView, columns, record) {
-    let renderConfig = pageView.formRenderConfig
-
-    return html`
-      <div class="root_container">
-        ${renderConfig.map(config => {
-          let renderCols = []
-
-          config.column_list.forEach(x => {
-            let columnInfo = columns.filter(col => x == col.name) || []
-
-            if (columnInfo.length > 0) {
-              renderCols.push(columnInfo[0])
-            }
-          })
-
-          // 그리드 구분 스타일
-          let divStyle = 'height:auto;grid-template-columns:'
-          for (let i = 0; i < config.column; i++) {
-            divStyle += ' 1fr 2fr'
-          }
-
-          divStyle += ';'
-          let rowIndex = 0
-          return html`
-            <h2><md-icon>list_alt</md-icon>${TermsUtil.tTitle(config.display)}</h2>
-            <div id="content_container" class="content_container" style="${divStyle}">
-              ${renderCols.map(column => {
-                let { editable = false, mandatory = false } = column.record
-                let dirtyFields = record['__dirtyfields__'] || {}
-
-                return html`
-                  <label ?editable=${editable}
-                    ><span>${mandatory ? '*' : ''}${column.header_txt}</span>
-                    ${editable ? html`<md-icon>edit</md-icon>` : ''}
-                  </label>
-                  <ox-grid-field
-                    .rowIndex=${rowIndex}
-                    .column=${column}
-                    .record=${record}
-                    .value=${record[column.name]}
-                    ?dirty=${!!dirtyFields[column.name]}
-                  ></ox-grid-field>
-                `
-              })}
-            </div>
-          `
-        })}
-      </div>
-      ${pageView.isPage ? html`` : MetaUiUtil.getButtonContainer(pageView)}
-    `
-  }
-
-  /**
-   * @description pageView의 폼 정보로 기본 폼 Html을 생성하여 리턴
-   *********************************************************
-   * @param {Object} pageView 페이지 뷰
-   * @param {Array} columns 구성 컬럼
-   * @param {Object} record 표현 데이터
-   * @returns {HTMLElement} 폼을 HTML
-   */
-  static getBasicFormHtmlNoOption(pageView, columns, record) {
-    // 그리드 구분 스타일
-    let divStyle = 'grid-template-columns:'
-    if (!pageView.column || pageView.column == 0) {
-      pageView.column = 1
-    }
-
-    pageView.column = parseInt((pageView.etcConfig || {}).default_form_column || pageView.column)
-
-    for (let i = 0; i < pageView.column; i++) {
-      divStyle += ' 1fr 2fr'
-    }
-
-    divStyle += ';'
-    let rowIndex = 0
-
-    return html`
-      <div id="container" class="container" style="${divStyle}">
-        ${columns.map(column => {
-          let { editable = false, mandatory = false } = column.record
-          let dirtyFields = record['__dirtyfields__'] || {}
-
-          return html`
-            <label ?editable=${editable}
-              ><span>${mandatory ? '*' : ''}${column.header_txt}</span>
-              ${editable ? html`<md-icon>edit</md-icon>` : ''}
-            </label>
-            <ox-grid-field
-              .rowIndex=${rowIndex}
-              .column=${column}
-              .record=${record}
-              .value=${record[column.name]}
-              ?dirty=${!!dirtyFields[column.name]}
-            ></ox-grid-field>
-          `
-        })}
-      </div>
-      ${pageView.isPage ? html`` : MetaUiUtil.getButtonContainer(pageView)}
-    `
-  }
-
-  /**
-   * @description pageView의 탭 정보로 기본 탭 Html을 생성하여 리턴
-   **********************************************************
-   * @param {Object} pageView 페이지 뷰
-   * @returns {HTMLElement} 탭 HTML
-   */
-  static getBasicTabHtml(pageView) {
-    if (!pageView) return html``
-    if (!pageView.tabRenderConfig) return html``
-
-    let tabs = pageView.tabRenderConfig
-    if (!pageView.currentTabKey) pageView.currentTabKey = tabs[0]?.name || undefined
-
-    return html`
-      <div class="tabs">
-        ${tabs.map(tab => {
-          let label = TermsUtil.tLabel(tab.display)
-          let key = tab.name
-
-          return html`
-            <div
-              class="tab"
-              ?activate="${key === pageView.currentTabKey}"
-              @click="${() => (pageView.currentTabKey = key)}"
-            >
-              ${tab.icon ? html`<md-icon>${tab.icon}</md-icon>` : html``}
-              <span>${label}</span>
-            </div>
-          `
-        })}
-      </div>
-      <div class="content-container">
-        ${tabs.map(tab => {
-          let displayStyle = 'display:none'
-          let key = tab.name
-          if (key == pageView.currentTabKey) {
-            displayStyle = 'display:flex'
-          }
-
-          return html`
-            <div class="tab-contents" style="${displayStyle}">${MetaUiUtil.getBasicTabContent(pageView, tab)}</div>
-          `
-        })}
-      </div>
-    `
-  }
-
-  /**
-   * @description Grist 탭 Html을 생성하여 리턴
-   *****************************************
-   * @param {Object} pageView 페이지 뷰
-   * @returns {HTMLElement} 탭 HTML
-   */
-  static getGristTabHtml(pageView) {
-    let type = (pageView.etcConfig || {}).master_detail_type || 'top_bottom'
-    let size = (pageView.etcConfig || {}).master_detail_size || '50% 50%'
-
-    let layoutContainerStyle = type == 'left_right' ? `grid-template-columns:${size};` : `grid-template-rows:${size};`
-    let currentRouting = pageView.isPage ? UiUtil.currentRouting() : pageView.route_name
-
-    return html`
-      ${pageView.useMasterFilterForm == false
-        ? html``
-        : html`
-            <div slot="headroom" class="header">
-              <div class="filters">
-                <ox-filters-form-base
-                  id="ox-filters-form"
-                  .filters=${pageView.searchFields || []}
-                  .value=${pageView.searchFieldValues || []}
-                  @filters-change=${e => {
-                    pageView.grist?.fetch()
-                  }}
-                ></ox-filters-form-base>
-              </div>
-            </div>
-          `}
-      <div id="container" class="container" style="${layoutContainerStyle}">
-        <div class="container_detail">
-          ${MetaApi.getBasicGristHtml(pageView)} ${MetaUiUtil.getButtonContainer(pageView)}
-        </div>
-        <div class="container_detail">
-          ${pageView.is_activity === true
-            ? html`${pageView.is_readonly === true
-                ? html`<meta-tab-element
-                    id="detail"
-                    route_name="${currentRouting}"
-                    .activityDataSet=${(pageView.activityDataSet || {}).detail}
-                    is_readonly="true"
-                    is_activity="true"
-                    is_detail="true"
-                  >
-                  </meta-tab-element>`
-                : html`<meta-tab-element
-                    id="detail"
-                    route_name="${currentRouting}"
-                    .activityDataSet=${(pageView.activityDataSet || {}).detail}
-                    is_activity="true"
-                    is_detail="true"
-                  >
-                  </meta-tab-element>`}`
-            : html`${pageView.is_readonly === true
-                ? html`<meta-tab-element
-                    id="detail"
-                    route_name="${currentRouting}"
-                    is_readonly="true"
-                    is_detail="true"
-                  ></meta-tab-element>`
-                : html`<meta-tab-element
-                    id="detail"
-                    route_name="${currentRouting}"
-                    is_detail="true"
-                  ></meta-tab-element>`}`}
-        </div>
-      </div>
-    `
-  }
-
-  /**
-   * @description Tab Detail Html을 생성하여 리턴
-   ********************************************
-   * @param {Object} pageView 페이지 뷰
-   * @returns {HTMLElement} 탭 HTML
-   */
-  static getTabDetailHtml(pageView) {
-    let type = pageView.etcConfig.master_detail_type || 'top_bottom'
-    let size = pageView.etcConfig.master_detail_size || '50% 50%'
-    let detailInfoTxt = pageView.etcConfig.master_detail_element
-    let detailInfo = JSON.parse(detailInfoTxt || '{}')
-    let layoutContainerStyle = type == 'left_right' ? `grid-template-columns:${size};` : `grid-template-rows:${size};`
-
-    MetaUiUtil.createMasterElement(pageView)
-    MetaUiUtil.createDetailElement(pageView, detailInfo)
-
-    return html`
-      ${pageView.useMasterFilterForm == false
-        ? html``
-        : html`
-            <div slot="headroom" class="header">
-              <div class="filters">
-                <ox-filters-form-base
-                  id="ox-filters-form"
-                  .filters=${pageView.searchFields || []}
-                  .value=${pageView.searchFieldValues || []}
-                  @filters-change=${e => {
-                    pageView.fetch()
-                  }}
-                ></ox-filters-form-base>
-              </div>
-            </div>
-          `}
-      <div id="container" class="container" style="${layoutContainerStyle}">
-        <div class="container_detail">${pageView.masterElement}</div>
-        <div class="container_detail">
-          ${detailInfo.tagname == '' || detailInfo.tagname == 'meta-tab-element'
-            ? html``
-            : html`<h2 id="detail_title"><md-icon>list_alt</md-icon>${TermsUtil.tTitle(`${detailInfo.display}`)}</h2>`}
-          ${pageView.detailElement}
-        </div>
-      </div>
-    `
-  }
-
-  /**
-   * @description 메인 탭 Html을 생성하여 리턴
-   ***************************************
-   * @param {Object} pageView 페이지 뷰
-   * @returns {HTMLElement} 탭 HTML
-   */
-  static getMainTabHtml(pageView) {
-    MetaUiUtil.createMasterElement(pageView)
-
-    return html`
-      ${pageView.useMasterFilterForm == false
-        ? html``
-        : html`
-            <div slot="headroom" class="header">
-              <div class="filters">
-                <ox-filters-form-base
-                  id="ox-filters-form"
-                  .filters=${pageView.searchFields || []}
-                  .value=${pageView.searchFieldValues || []}
-                  @filters-change=${e => {
-                    pageView.fetch()
-                  }}
-                ></ox-filters-form-base>
-              </div>
-            </div>
-          `}
-      <div id="container" class="container">${pageView.masterElement}</div>
-    `
-  }
-
-  /**
-   * @description 마스터 디테일 Html을 생성하여 리턴
-   ********************************************
-   * @param {Object} pageView 페이지 뷰
-   * @returns {HTMLElement} 탭 HTML
-   */
-  static getMasterDetailHtml(pageView) {
-    let type = pageView.etcConfig.master_detail_type || 'top_bottom'
-    let size = pageView.etcConfig.master_detail_size || '50% 50%'
-    let masterDisplay = (pageView.masterOption || {}).display
-    let detailInfoTxt = pageView.etcConfig.master_detail_element
-    let detailInfo = JSON.parse(detailInfoTxt || '{}')
-    let layoutContainerStyle = type == 'left_right' ? `grid-template-columns:${size};` : `grid-template-rows:${size};`
-    MetaUiUtil.createDetailElement(pageView, detailInfo)
-
-    return html`
-      ${pageView.useMasterFilterForm == false
-        ? html``
-        : html`
-            <div slot="headroom" class="header">
-              <div class="filters">
-                <ox-filters-form-base
-                  id="ox-filters-form"
-                  .filters=${pageView.searchFields || []}
-                  .value=${pageView.searchFieldValues || []}
-                  @filters-change=${e => {
-                    pageView.grist?.fetch()
-                  }}
-                ></ox-filters-form-base>
-              </div>
-            </div>
-          `}
-      <div id="container" class="container" style="${layoutContainerStyle}">
-        <div class="container_detail">
-          ${pageView.useFilterForm
-            ? masterDisplay
-              ? html`<h2 id="detail_title"><md-icon>list_alt</md-icon>${TermsUtil.tTitle(`${masterDisplay}`)}</h2>`
-              : html``
-            : html``}
-          ${MetaApi.getBasicGristHtml(pageView)} ${MetaUiUtil.getButtonContainer(pageView)}
-        </div>
-        <div class="container_detail">
-          ${detailInfo.tagname == '' || detailInfo.tagname == 'meta-tab-element'
-            ? html``
-            : detailInfo.display
-              ? html`<h2 id="detail_title"><md-icon>list_alt</md-icon>${TermsUtil.tTitle(`${detailInfo.display}`)}</h2>`
-              : html``}
-          ${pageView.detailElement}
-        </div>
-      </div>
-    `
-  }
-
-  /**
-   * @descrtiption 디테일 엘리먼트 렌더링
-   **********************************
-   * @param {Object} pageView
-   * @param {Object} detailInfo
-   * @returns htmlElement
-   */
-  static createDetailElement(pageView, detailInfo) {
-    if (!pageView.detailElement) {
-      let name = detailInfo.name ? detailInfo.name : 'detail'
-      let elementTxt = `<${detailInfo.tagname} id="${name}" name="${name}" route_name="${detailInfo.routing}" ${
-        pageView.is_activity === true ? 'is_activity=true' : ''
-      } ${pageView.is_readonly === true ? 'is_readonly=true' : ''} is_detail=true style="flex:1;"></${detailInfo.tagname}>`
-      pageView.detailElement = UiUtil.htmlToElement(elementTxt)
-      pageView.detailElement.activityDataSet = (pageView.activityDataSet || {}).detail
-
-      if (pageView.tagName.toLowerCase().startsWith('meta-tab-detail-')) {
-        pageView.detailElement.rootElement = pageView
-      }
-    }
-  }
-  /**
-   * @descrtiption 마스터 엘리먼트 렌더링
-   **********************************
-   * @param {Object} pageView
-   * @returns {HTMLElement} 마스터 엘리먼트 HTML
-   */
-  static createMasterElement(pageView) {
-    if (!pageView.masterElement && pageView.filterForm) {
-      let name = 'master'
-      let elementTxt = `<meta-tab-element id="${name}" name="${name}" route_name="${pageView.currentRouting}" ${
-        pageView.is_activity === true ? 'is_activity=true' : ''
-      } ${pageView.is_readonly === true ? 'is_readonly=true' : ''} is_detail=true style="flex:1;"></meta-tab-element>`
-      pageView.masterElement = UiUtil.htmlToElement(elementTxt)
-      pageView.masterElement.activityDataSet = (pageView.activityDataSet || {}).master
-      pageView.masterElement.includeMainList = true
-      pageView.masterElement.mainFilterForm = pageView.filterForm
-      pageView.masterElement.rootElement = pageView
-    }
-  }
-
-  /**
-   * @descrtiption 기본 탭 컨텐트 리턴
-   ********************************
-   * @param {Object} pageView
-   * @param {Object} tabConfig
-   * @returns {HTMLElement} 탭 컨텐트 HTML
-   */
-  static getBasicTabContent(pageView, tabConfig) {
-    if (!pageView.tabElements) {
-      pageView.tabElements = {}
-    }
-
-    if (Object.keys(pageView.tabElements).filter(key => key == tabConfig.name).length > 0) {
-      return pageView.tabElements[tabConfig.name]
-    }
-
-    let htmlText = `<${tabConfig.tagname} id='${tabConfig.name}' route_name='${tabConfig.menu}' style="flex:1;" ${
-      pageView.is_activity === true ? 'is_activity=true' : ''
-    } ${pageView.is_readonly === true ? 'is_readonly=true' : ''} is_detail=true></${tabConfig.tagname}>`
-    let tabElement = UiUtil.htmlToElement(htmlText)
-    tabElement.activityDataSet = (pageView.activityDataSet || {})[tabConfig.name]
-
-    if (pageView.parent_id) {
-      tabElement.parent_id = pageView.parent_id
-    }
-
-    if (pageView.rootElement) {
-      tabElement.rootElement = pageView.rootElement
-    } else {
-      tabElement.detailElement = pageView
-    }
-
-    if (tabConfig.filter_from === false) {
-      tabElement.use_filter_form = false
-    }
-
-    if (tabConfig.main_filter_form) {
-      tabElement.mainFilterForm = tabConfig.main_filter_form
-    }
-
-    pageView.tabElements[tabConfig.name] = tabElement
-    return tabElement
-  }
-
-  /**
-   * @description 그리드 상세 내용 HTML 생성
-   **************************************
-   * @param {Object} pageView 페이지 뷰
-   * @returns {HTMLElement} 그리드 상세 내용 HTML
-   */
-  static getGridDetailHtml(pageView) {
-    let useAddButton = pageView.useButtonAdd
-    let useFilterForm = pageView.useFilterForm
-    let useFilterAddButton = JSON.parse((pageView.etcConfig || {}).use_filter_add_button || 'false')
-    let recordCreationCallback = pageView.recordCreationCallback
-    let useSortButton = JSON.parse((pageView.etcConfig || {}).use_grid_sort_button || 'false')
-    useFilterAddButton = useFilterAddButton === true && useAddButton === true
-
-    return html`
-      ${useFilterForm
-        ? html`
-            <div slot="headroom" class="header">
-              <div class="filters">
-                <ox-filters-form></ox-filters-form>
-                ${useSortButton
-                  ? html`
-                      <div id="sorters">
-                        <md-icon
-                          @click=${e => {
-                            const target = e.currentTarget
-                            target.nextElementSibling.open({
-                              right: 0,
-                              top: target.offsetTop + target.offsetHeight
-                            })
-                          }}
-                          >sort</md-icon
-                        >
-                        <ox-popup id="sorter-control">
-                          <ox-sorters-control></ox-sorters-control>
-                        </ox-popup>
-                      </div>
-                    `
-                  : nothing}
-                ${MetaUiUtil.getGridViewOption(pageView)}
-                <ox-record-creator id="add" ?hidden="${!useFilterAddButton}" .callback=${recordCreationCallback}>
-                  <button style="display: flex; justify-content: center">
-                    <md-icon>add</md-icon>
-                  </button>
-                </ox-record-creator>
-              </div>
-            </div>
-          `
-        : nothing}
-    `
-  }
-
-  /**
-   * @description 그리드 보기 옵션 버튼을 그린다.
-   ****************************************
-   * @param {Object} pageView 페이지 뷰
-   * @return {HTMLElement} 그리드 뷰 옵션 HTML
-   */
-  static getGridViewOption(pageView) {
-    if (ValueUtil.isEmpty(pageView.gridViewOptions) || pageView.gridViewOptions.length == 1) {
-      return html``
-    } else {
-      return html`
-        <div id="modes">
-          ${pageView.gridViewOptions.includes('GRID')
-            ? html`<md-icon @click="${() => (pageView.gridMode = 'GRID')}" ?active="${pageView.gridMode == 'GRID'}"
-                >grid_on</md-icon
-              >`
-            : ``}
-          ${pageView.gridViewOptions.includes('LIST')
-            ? html`<md-icon @click="${() => (pageView.gridMode = 'LIST')}" ?active="${pageView.gridMode == 'LIST'}"
-                >format_list_bulleted</md-icon
-              >`
-            : ``}
-          ${pageView.gridViewOptions.includes('CARD')
-            ? html`<md-icon @click="${() => (pageView.gridMode = 'CARD')}" ?active="${pageView.gridMode == 'CARD'}"
-                >apps</md-icon
-              >`
-            : ``}
-        </div>
-      `
-    }
-  }
-
-  /**
-   * @description 버튼 컨테이너 엘리먼트 생성
-   *************************************
-   * @param {Object} pageView
-   * @returns {HTMLElement}
-   */
-  static getButtonContainer(pageView) {
-    return html`<div class="button-container">${MetaUiUtil.getContainerButtons(pageView)}</div>`
-  }
-}