@things-factory/meta-ui 8.0.0-beta.9 → 8.0.0

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

@@ -0,0 +1,3304 @@
+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>`
+  }
+}