@things-factory/operato-tools 7.0.0-y.0 → 7.0.1-alpha.0

package/client/pages/generator/grid-config-tab-mixin.js

@@ -1,102 +1,264 @@
-import{html}from"lit-element";import{TermsUtil}from"@things-factory/meta-ui/client/utils/terms-util";import{MetaApi}from"@things-factory/meta-ui/client/utils/meta-api";export const GridConfigTabMixin=e=>class extends e{setGridConfigTabValues(e){if(e){let{mobile_mode:i="",desk_mode:t="",pages:a=[],use_row_checker:r=!0,view_mode:d=[]}=e.option||{},l=(e.row||{multiple_select:!1}).multiple_select,s="unlimited"==a?"grid_term_unlimited":0==a.length?"":20==a[0]?"grid_term_default":`grid_term_${a[0]}`;this.viewGridData={mobile_mode:i,desk_mode:t,use_row_checker:r,pages:s,view_mode:d,multiple_select:l,use_filter_form:e.use_filter_form,grid_refresh_when_page_activated:e.grid_refresh_when_page_activated}}else this.setGridConfigTabDetaultValues()}getGridConfigTabValues(){let e={grid:{option:{},row:{click:"select-row-toggle"}}},i=this.getElementValueById("grid_row_check_use"),t=this.getElementValueById("grid_multi_select"),a=this.getElementValueById("grid_desk_view"),r=this.getElementValueById("grid_mobile_view"),d=this.getElementValueById("grid_use_filter"),l=this.getElementValueById("grid_refresh_when_page_activated"),s=this.getElementValueById("grid_pagination"),_=this.getElementValueById("grid_view_use"),o=this.getElementValueById("list_view_use"),n=this.getElementValueById("card_view_use");return e.grid.use_filter_form="true"==d,e.grid.grid_refresh_when_page_activated="true"==l,e.grid.row.multiple_select="true"==t,e.grid.option.use_row_checker="true"==i,e.grid.option.mobile_mode=r,e.grid.option.desk_mode=a,"grid_term_default"==s?e.grid.option.pages=[20,30,50,100]:"grid_term_50"==s?e.grid.option.pages=[50,100,500,1e3]:"grid_term_100"==s?e.grid.option.pages=[100,500,1e3,5e3]:"grid_term_1000"==s?e.grid.option.pages=[1e3,5e3,1e4,5e4,1e5]:"grid_term_unlimited"==s&&(e.grid.option.pages="unlimited"),e.grid.option.view_mode=[],"true"==_&&e.grid.option.view_mode.push("GRID"),"true"==o&&e.grid.option.view_mode.push("LIST"),"true"==n&&e.grid.option.view_mode.push("CARD"),e}async setGridConfigTabConfig(){let e=await MetaApi.codeItems("GRID_PAGE_OPTIONS"),i=await MetaApi.codeItems("GRID_VIEW_MODE");this.gridViewModes=i,this.gridPageOptions=e}setGridConfigTabDetaultValues(){this.viewGridData||(this.viewGridData={mobile_mode:this.gridViewModes?this.gridViewModes[1]:"LIST",desk_mode:this.gridViewModes?this.gridViewModes[0]:"GRID",use_row_checker:!0,pages:"grid_term_default",view_mode:[...this.gridViewModes?this.gridViewModes:["GRID","LIST","CARD"]],multiple_select:!0,use_filter_form:!0,grid_refresh_when_page_activated:!1})}renderGridConfigTab(){return this.setGridConfigTabDetaultValues(),html`
+import { html } from 'lit-element'
+
+import { TermsUtil } from '@things-factory/meta-ui/client/utils/terms-util'
+import { MetaApi } from '@things-factory/meta-ui/client/utils/meta-api'
+
+
+export const GridConfigTabMixin = (baseElement) => class extends baseElement {
+
+  setGridConfigTabValues(data) {
+    // 1. 기존 데이터가 있으면 기존 데이터 사용
+    if (data) {
+      let {
+        mobile_mode = '',
+        desk_mode = '',
+        pages = [],
+        use_row_checker = true,
+        view_mode = []
+      } = data.option || {};
+
+      let multiple_select = (data.row || { multiple_select : false }).multiple_select;
+      let pageCode = (function() {
+        if(pages == 'unlimited') {
+          return 'grid_term_unlimited';
+        } else if(pages.length == 0) {
+          return '';
+        } else if (pages[0] == 20) {
+          return 'grid_term_default'
+        } else {
+          return `grid_term_${pages[0]}`
+        }
+      }())
+
+      this.viewGridData = {
+        mobile_mode: mobile_mode,
+        desk_mode: desk_mode,
+        use_row_checker: use_row_checker,
+        pages: pageCode,
+        view_mode: view_mode,
+        multiple_select: multiple_select,
+        use_filter_form: data.use_filter_form,
+        grid_refresh_when_page_activated: data.grid_refresh_when_page_activated
+      }
+    } else {
+      // 3. 기존 데이터가 없으면 기본값 설정
+      this.setGridConfigTabDetaultValues();
+    }
+  }
+
+  getGridConfigTabValues() {
+    // 그리드 기본 옵션 
+    let retObject = {
+      grid: {
+        option: {},
+        row: {
+          click: 'select-row-toggle'
+        }
+      }
+    };
+
+    // input 객체에서 값 가져오기 
+    let grid_row_check_use = this.getElementValueById('grid_row_check_use');
+    let grid_multi_select = this.getElementValueById('grid_multi_select');
+    let grid_desk_view = this.getElementValueById('grid_desk_view');
+    let grid_mobile_view = this.getElementValueById('grid_mobile_view');
+
+    let grid_use_filter = this.getElementValueById('grid_use_filter');
+    let grid_refresh_when_page_activated = this.getElementValueById('grid_refresh_when_page_activated');
+
+    let grid_pagination = this.getElementValueById('grid_pagination');
+
+    let grid_view_use = this.getElementValueById('grid_view_use');
+    let list_view_use = this.getElementValueById('list_view_use');
+    let card_view_use = this.getElementValueById('card_view_use');
+
+    // 옵션 설정 
+    retObject.grid.use_filter_form = grid_use_filter == 'true' ? true : false;
+    retObject.grid.grid_refresh_when_page_activated = grid_refresh_when_page_activated == 'true' ? true : false;
+    retObject.grid.row.multiple_select = grid_multi_select == 'true' ? true : false;
+
+    retObject.grid.option.use_row_checker = grid_row_check_use == 'true' ? true : false;
+    retObject.grid.option.mobile_mode = grid_mobile_view;
+    retObject.grid.option.desk_mode = grid_desk_view;
+    
+    // 페이지 네이션 설정 변환 
+    if(grid_pagination == 'grid_term_default') {
+      retObject.grid.option.pages = [20, 30, 50, 100];
+    } else if (grid_pagination == 'grid_term_50') {
+      retObject.grid.option.pages = [50, 100, 500, 1000];
+    } else if (grid_pagination == 'grid_term_100') {
+      retObject.grid.option.pages = [100, 500, 1000, 5000];
+    } else if (grid_pagination == 'grid_term_1000') {
+      retObject.grid.option.pages = [1000, 5000, 10000, 50000, 100000];
+    } else if (grid_pagination == 'grid_term_unlimited') {
+      retObject.grid.option.pages = 'unlimited';
+    }
+
+    // 그리드 지원 뷰 옵션 설정 
+    retObject.grid.option.view_mode = [];
+    if(grid_view_use == 'true') retObject.grid.option.view_mode.push('GRID');
+    if(list_view_use == 'true') retObject.grid.option.view_mode.push('LIST');
+    if(card_view_use == 'true') retObject.grid.option.view_mode.push('CARD');
+
+    return retObject;
+  }
+
+  /**
+   * lifecycle
+   */
+  async setGridConfigTabConfig() {
+    // 1. 코드 조회 
+    let gridPageOptions = await MetaApi.codeItems('GRID_PAGE_OPTIONS');
+    let gridViewModes = await MetaApi.codeItems('GRID_VIEW_MODE');
+
+    this.gridViewModes = gridViewModes;
+    this.gridPageOptions = gridPageOptions;
+  }
+
+  /**
+   * 기본 값 설정 
+   */
+  setGridConfigTabDetaultValues() {
+    if (!this.viewGridData) {
+      this.viewGridData = {
+        mobile_mode: this.gridViewModes ? this.gridViewModes[1] : 'LIST',
+        desk_mode: this.gridViewModes ? this.gridViewModes[0] : 'GRID',
+        use_row_checker: true,
+        pages: 'grid_term_default',
+        view_mode: [...(this.gridViewModes ? this.gridViewModes : ['GRID', 'LIST', 'CARD'])],
+        multiple_select: true,
+        use_filter_form: true,
+        grid_refresh_when_page_activated: false
+      }
+    }
+  }
+
+
+  // 화면 
+  renderGridConfigTab() {
+    this.setGridConfigTabDetaultValues();
+
+    let renderHtml = html`
       <div field-2column>
         <div field>
           <h2>
-            <mwc-icon>list_alt</mwc-icon>${TermsUtil.tLabel("grid_use_row_check")}
+            <mwc-icon>list_alt</mwc-icon>${TermsUtil.tLabel('grid_use_row_check')}
           </h2>
           <label>
             <span>
               <input type="radio" id="grid_row_check_use" name="grid_row_check_use" value="true"
-                ?checked=${this.viewGridData.use_row_checker}>${TermsUtil.tLabel("use")}</input>
+                ?checked=${this.viewGridData.use_row_checker}>${TermsUtil.tLabel('use')}</input>
               <input type="radio" id="grid_row_check_use" name="grid_row_check_use"  value="false"
-                ?checked=${!this.viewGridData.use_row_checker}>${TermsUtil.tLabel("unuse")}</input>
+                ?checked=${!this.viewGridData.use_row_checker}>${TermsUtil.tLabel('unuse')}</input>
             </span>
           </label>
         </div>
         <div field>
           <h2>
-            <mwc-icon>list_alt</mwc-icon>${TermsUtil.tLabel("grid_support_multi_select")}
+            <mwc-icon>list_alt</mwc-icon>${TermsUtil.tLabel('grid_support_multi_select')}
           </h2>
           <label>
             <span>
               <input type="radio" id="grid_multi_select" name="grid_multi_select" value="true"
-                ?checked=${this.viewGridData.multiple_select}>${TermsUtil.tLabel("support")}</input>
+                ?checked=${this.viewGridData.multiple_select}>${TermsUtil.tLabel('support')}</input>
               <input type="radio" id="grid_multi_select" name="grid_multi_select" value="false"
-                ?checked=${!this.viewGridData.multiple_select}>${TermsUtil.tLabel("unsupport")}</input>
+                ?checked=${!this.viewGridData.multiple_select}>${TermsUtil.tLabel('unsupport')}</input>
             </span>
           </label>
         </div>
         <div field>
           <h2>
-            <mwc-icon>list_alt</mwc-icon>${TermsUtil.tLabel("grid_use_filter")}
+            <mwc-icon>list_alt</mwc-icon>${TermsUtil.tLabel('grid_use_filter')}
           </h2>
           <label>
             <span>
               <input type="radio" id="grid_use_filter" name="grid_use_filter" value="true"
-                ?checked=${this.viewGridData.use_filter_form}>${TermsUtil.tLabel("use")}</input>
+                ?checked=${this.viewGridData.use_filter_form}>${TermsUtil.tLabel('use')}</input>
               <input type="radio" id="grid_use_filter" name="grid_use_filter" value="false"
-                ?checked=${!this.viewGridData.use_filter_form}>${TermsUtil.tLabel("unuse")}</input>
+                ?checked=${!this.viewGridData.use_filter_form}>${TermsUtil.tLabel('unuse')}</input>
             </span>
           </label>
         </div>
         <div field>
           <h2>
-            <mwc-icon>list_alt</mwc-icon>${TermsUtil.tLabel("grid_refresh_when_page_activated")}
+            <mwc-icon>list_alt</mwc-icon>${TermsUtil.tLabel('grid_refresh_when_page_activated')}
           </h2>
           <label>
             <span>
               <input type="radio" id="grid_refresh_when_page_activated" name="grid_refresh_when_page_activated" value="true"
-                ?checked=${this.viewGridData.grid_refresh_when_page_activated}>${TermsUtil.tLabel("use")}</input>
+                ?checked=${this.viewGridData.grid_refresh_when_page_activated}>${TermsUtil.tLabel('use')}</input>
               <input type="radio" id="grid_refresh_when_page_activated" name="grid_refresh_when_page_activated" value="false"
-                ?checked=${!this.viewGridData.grid_refresh_when_page_activated}>${TermsUtil.tLabel("unuse")}</input>
+                ?checked=${!this.viewGridData.grid_refresh_when_page_activated}>${TermsUtil.tLabel('unuse')}</input>
             </span>
           </label>
         </div>
         <div field>
           <h2>
-            <mwc-icon>list_alt</mwc-icon>${TermsUtil.tLabel("grid_desk_view")}
+            <mwc-icon>list_alt</mwc-icon>${TermsUtil.tLabel('grid_desk_view')}
           </h2>
           <label>
             <select id="grid_desk_view" name="grid_desk_view">
-              ${this.gridViewModes?.map((e=>html`<option value=${e.name} ?selected=${this.viewGridData.desk_mode==e.name}>${e.description}</option>`))}
+              ${
+                this.gridViewModes?.map(x => {
+                  return html`<option value=${x.name} ?selected=${this.viewGridData.desk_mode == x.name}>${x.description}</option>`
+                })
+              }
             </select>
           </label>
         </div>
         <div field>
           <h2>
-            <mwc-icon>list_alt</mwc-icon>${TermsUtil.tLabel("grid_mobile_view")}
+            <mwc-icon>list_alt</mwc-icon>${TermsUtil.tLabel('grid_mobile_view')}
           </h2>
           <label>
           <select id="grid_mobile_view" name="grid_mobile_view">
-            ${this.gridViewModes?.map((e=>html`<option value=${e.name} ?selected=${this.viewGridData.mobile_mode==e.name}>${e.description}</option>`))}
+            ${
+                this.gridViewModes?.map(x => {
+                  return html`<option value=${x.name} ?selected=${this.viewGridData.mobile_mode == x.name}>${x.description}</option>`
+                })
+              }
             </select>
           </label>
         </div>
         <div field>
           <h2>
-            <mwc-icon>list_alt</mwc-icon>${TermsUtil.tLabel("grid_support_view")}
+            <mwc-icon>list_alt</mwc-icon>${TermsUtil.tLabel('grid_support_view')}
           </h2>
           <label>
-            ${this.gridViewModes?.map((e=>html`
-                  <span>${e.name}
-                    <input type="radio" name=${e.name.toLowerCase()+"_view_use"} id=${e.name.toLowerCase()+"_view_use"} ?checked=${this.viewGridData.view_mode.includes(e.name)} value="true">${TermsUtil.tLabel("use")}</input>
-                    <input type="radio" name=${e.name.toLowerCase()+"_view_use"} id=${e.name.toLowerCase()+"_view_use"} ?checked=${!this.viewGridData.view_mode.includes(e.name)} value="false">${TermsUtil.tLabel("unuse")}</input>
+            ${
+              this.gridViewModes?.map(x => {
+                return html`
+                  <span>${x.name}
+                    <input type="radio" name=${x.name.toLowerCase() + "_view_use"} id=${x.name.toLowerCase() + "_view_use"} ?checked=${this.viewGridData.view_mode.includes(x.name)} value="true">${TermsUtil.tLabel('use')}</input>
+                    <input type="radio" name=${x.name.toLowerCase() + "_view_use"} id=${x.name.toLowerCase() + "_view_use"} ?checked=${!this.viewGridData.view_mode.includes(x.name)} value="false">${TermsUtil.tLabel('unuse')}</input>
                   </span>
-                `))}
+                `
+              })
+            }
           </label>
         </div>
         <div field>
           <h2>
-            <mwc-icon>list_alt</mwc-icon>${TermsUtil.tLabel("grid_pagination")}
+            <mwc-icon>list_alt</mwc-icon>${TermsUtil.tLabel('grid_pagination')}
           </h2>
           <label>
-            ${this.gridPageOptions?.map((e=>html`
+            ${
+              this.gridPageOptions?.map(x => {
+                return html`
                   <span>
-                    <input type="radio" name="grid_pagination" id="grid_pagination" value=${e.name} ?checked=${this.viewGridData.pages==e.name}>${TermsUtil.tLabel(e.name)}</input>
+                    <input type="radio" name="grid_pagination" id="grid_pagination" value=${x.name} ?checked=${this.viewGridData.pages==x.name
+                      }>${TermsUtil.tLabel(x.name)}</input>
                   </span>
-                `))}
+                `
+              })
+            }
           </label>
         </div>
       </div>
       </div>
-    `}};
+    `
+
+    return renderHtml;
+  }
+}
+

package/client/pages/generator/grid-emphasized-config-tab-mixin.js

@@ -1,18 +1,307 @@
-import{html}from"lit-element";import{TermsUtil}from"@things-factory/meta-ui/client/utils/terms-util";import{MetaApi}from"@things-factory/meta-ui/client/utils/meta-api";export const GridEmphasizedConfigTabMixin=e=>class extends e{setGridEmphasizedConfigTabValues(e){if(e){this.viewEmphasizedData={rowEmphasizedData:[],columnEmphasizedData:[]};let i=1;this.viewEmphasizedData.rowEmphasizedData=(e.row||[]).map((e=>({id:i,rank:i++,backgroundColor:e.backgroundColor||"",fontColor:e.fontColor||"",logic:e.logic||""}))),i=1;let t=e.column||[];Object.keys(t).forEach((e=>{let a=t[e]||[],o=1;a.forEach((t=>{this.viewEmphasizedData.columnEmphasizedData.push({id:i++,rank:o++,column:e,backgroundColor:t.backgroundColor||"",fontColor:t.fontColor||"",logic:t.logic||""})}))})),this.emphasizedConfigTabColumnEmphasizedGrist?.fetch(),this.emphasizedConfigTabRowEmphasizedGrist?.fetch()}else this.setGridEmphasizedConfigTabDefaultValues()}getGridEmphasizedConfigTabValues(){let e=this.getElementValueById("row-emphasized-grist"),i=this.getElementValueById("column-emphasized-grist"),t=[];this.sortRecordByRank(e)?.forEach((e=>{t.push({backgroundColor:e.backgroundColor,fontColor:e.fontColor,logic:e.logic})}));let a={};return this.sortRecordByRank(i)?.forEach((e=>{a[e.column]||(a[e.column]=[]),a[e.column].push({backgroundColor:e.backgroundColor,fontColor:e.fontColor,logic:e.logic})})),{gridEmphasized:{row:t||[],column:a||{}}}}get emphasizedConfigTabRowEmphasizedGrist(){return this.shadowRoot.querySelector("#row-emphasized-grist")}get emphasizedConfigTabColumnEmphasizedGrist(){return this.shadowRoot.querySelector("#column-emphasized-grist")}setGridEmphasizedConfigTabConfig(){this.rowEmphasizedConfig={rows:MetaApi.getGristSelectableConfig(!1),pagination:{infinite:!0},appendable:!0,columns:[...MetaApi.getGristGuttersConfig(!1,!1),{type:"gutter",gutterName:"button",icon:"delete",handlers:{click:(e,i,t,a,o)=>{a.id&&this.deleteRow(this.emphasizedConfigTabRowEmphasizedGrist,a)}}},{type:"string",name:"id",hidden:!0},{type:"integer",name:"rank",header:TermsUtil.tLabel("rank"),sortable:!1,width:55,record:{align:"right",editable:!0,mandatory:!0}},{type:"string",name:"backgroundColor",header:TermsUtil.tLabel("background-color"),record:{align:"left",editable:!0,mandatory:!0},width:130},{type:"string",name:"fontColor",header:TermsUtil.tLabel("font-color"),record:{align:"left",editable:!0,mandatory:!0},width:130},{type:"code-input",name:"logic",header:TermsUtil.tLabel("logic"),record:{align:"left",editable:!0,mandatory:!0},width:850}]},this.columnEmphasizedConfig={rows:MetaApi.getGristSelectableConfig(!1),pagination:{infinite:!0},appendable:!0,columns:[...MetaApi.getGristGuttersConfig(!1,!1),{type:"gutter",gutterName:"button",icon:"delete",handlers:{click:(e,i,t,a,o)=>{a.id&&this.deleteRow(this.emphasizedConfigTabColumnEmphasizedGrist,a)}}},{type:"string",name:"id",hidden:!0},{type:"integer",name:"rank",header:TermsUtil.tLabel("rank"),sortable:!1,width:55,record:{align:"right",editable:!0,mandatory:!0}},{type:"string",name:"column",header:TermsUtil.tLabel("column"),record:{align:"left",editable:!0,mandatory:!0},width:130},{type:"string",name:"backgroundColor",header:TermsUtil.tLabel("background-color"),record:{align:"left",editable:!0,mandatory:!0},width:130},{type:"string",name:"fontColor",header:TermsUtil.tLabel("font-color"),record:{align:"left",editable:!0,mandatory:!0},width:130},{type:"code-input",name:"logic",header:TermsUtil.tLabel("logic"),record:{align:"left",editable:!0,mandatory:!0},width:725}]}}setGridEmphasizedConfigTabDefaultValues(){this.viewEmphasizedData||(this.viewEmphasizedData={rowEmphasizedData:[],columnEmphasizedData:[]})}renderGridEmphasizedConfigTab(){return this.setGridEmphasizedConfigTabDefaultValues(),html`
+import { html } from 'lit-element'
+
+import { TermsUtil } from '@things-factory/meta-ui/client/utils/terms-util'
+import { MetaApi } from '@things-factory/meta-ui/client/utils/meta-api'
+
+
+export const GridEmphasizedConfigTabMixin = (baseElement) => class extends baseElement {
+
+  setGridEmphasizedConfigTabValues(data) {
+    // 1. 조회 데이터 설정 
+    if (data) {
+      this.viewEmphasizedData = {
+        rowEmphasizedData: [],
+        columnEmphasizedData: [],
+      }
+
+      let idx = 1;
+      this.viewEmphasizedData.rowEmphasizedData
+        = (data.row || []).map(x => {
+          return {
+            id: idx,
+            rank: idx++,
+            backgroundColor: x.backgroundColor || '',
+            fontColor: x.fontColor || '',
+            logic: x.logic || '',
+          };
+        })
+
+      idx = 1;
+      let columnData = data.column || [];
+      Object.keys(columnData).forEach(key => {
+
+        let columnList = columnData[key] || [];
+        let columnIdx = 1;
+
+        columnList.forEach(x=>{
+          this.viewEmphasizedData.columnEmphasizedData.push({
+            id: idx++,
+            rank: columnIdx++,
+            column: key,
+            backgroundColor: x.backgroundColor || '',
+            fontColor: x.fontColor || '',
+            logic: x.logic || '',
+          })
+        })
+      })
+
+
+      this.emphasizedConfigTabColumnEmphasizedGrist?.fetch();
+      this.emphasizedConfigTabRowEmphasizedGrist?.fetch();
+    } else {
+      this.setGridEmphasizedConfigTabDefaultValues();
+    }
+
+  }
+
+  getGridEmphasizedConfigTabValues() {
+    // 설정 데이터 
+    let rowGristData = this.getElementValueById('row-emphasized-grist');
+    let columnGristData = this.getElementValueById('column-emphasized-grist');
+
+    let rowEmphasized = [];
+    this.sortRecordByRank(rowGristData)?.forEach(x=>{
+      rowEmphasized.push({
+        backgroundColor: x.backgroundColor,
+        fontColor: x.fontColor,
+        logic: x.logic
+      })
+    })
+
+    let columnEmphasized = {};
+    this.sortRecordByRank(columnGristData)?.forEach(x=>{
+      if(!columnEmphasized[x.column]){
+        columnEmphasized[x.column] = [];
+      }
+
+      columnEmphasized[x.column].push({
+        backgroundColor: x.backgroundColor,
+        fontColor: x.fontColor,
+        logic: x.logic
+      })
+    })
+    
+    // 리턴 오브젝트로 가공 
+    let retObject = {
+      gridEmphasized: {
+        row: rowEmphasized || [],
+        column: columnEmphasized || {}
+      }
+    };
+
+    return retObject;
+  }
+
+  get emphasizedConfigTabRowEmphasizedGrist() {
+    return this.shadowRoot.querySelector('#row-emphasized-grist')
+  }
+  get emphasizedConfigTabColumnEmphasizedGrist() {
+    return this.shadowRoot.querySelector('#column-emphasized-grist')
+  }
+
+
+  setGridEmphasizedConfigTabConfig() {
+
+    // 1. 행 강조 그리드 설정 
+    this.rowEmphasizedConfig = {
+      rows: MetaApi.getGristSelectableConfig(false),
+      pagination: { infinite: true },
+      appendable: true,
+      columns: [
+        ...MetaApi.getGristGuttersConfig(false, false),
+        {
+          type: 'gutter', gutterName: 'button', icon: 'delete',
+          handlers: {
+            click: (_columns, _data, _column, record, _rowIndex) => {
+              if (record.id) {
+                this.deleteRow(this.emphasizedConfigTabRowEmphasizedGrist, record);
+              }
+            }
+          },
+        },
+        {
+          type: 'string',
+          name: 'id',
+          hidden: true
+        },
+        {
+          type: 'integer',
+          name: 'rank',
+          header: TermsUtil.tLabel('rank'),
+          sortable: false,
+          width: 55,
+          record: {
+            align: 'right',
+            editable: true,
+            mandatory: true
+          }
+        },
+        {
+          type: 'string',
+          name: 'backgroundColor',
+          header: TermsUtil.tLabel('background-color'),
+          record: {
+            align: 'left',
+            editable: true,
+            mandatory: true
+          },
+          width: 130
+        },
+        {
+          type: 'string',
+          name: 'fontColor',
+          header: TermsUtil.tLabel('font-color'),
+          record: {
+            align: 'left',
+            editable: true,
+            mandatory: true
+          },
+          width: 130
+        },
+        {
+          type: 'code-input',
+          name: 'logic',
+          header: TermsUtil.tLabel('logic'),
+          record: {
+            align: 'left',
+            editable: true,
+            mandatory: true
+          },
+          width: 850
+        }
+      ]
+    };
+
+    // 2. 컬럼 강조 그리드 설정
+    this.columnEmphasizedConfig = {
+      rows: MetaApi.getGristSelectableConfig(false),
+      pagination: { infinite: true },
+      appendable: true,
+      columns: [
+        ...MetaApi.getGristGuttersConfig(false, false),
+        {
+          type: 'gutter', gutterName: 'button', icon: 'delete',
+          handlers: {
+            click: (_columns, _data, _column, record, _rowIndex) => {
+              if (record.id) {
+                this.deleteRow(this.emphasizedConfigTabColumnEmphasizedGrist, record);
+              }
+            }
+          },
+        },
+        {
+          type: 'string',
+          name: 'id',
+          hidden: true
+        },
+        {
+          type: 'integer',
+          name: 'rank',
+          header: TermsUtil.tLabel('rank'),
+          sortable: false,
+          width: 55,
+          record: {
+            align: 'right',
+            editable: true,
+            mandatory: true
+          }
+        },
+        {
+          type: 'string',
+          name: 'column',
+          header: TermsUtil.tLabel('column'),
+          record: {
+            align: 'left',
+            editable: true,
+            mandatory: true
+          },
+          width: 130
+        },
+        {
+          type: 'string',
+          name: 'backgroundColor',
+          header: TermsUtil.tLabel('background-color'),
+          record: {
+            align: 'left',
+            editable: true,
+            mandatory: true
+          },
+          width: 130
+        },
+        {
+          type: 'string',
+          name: 'fontColor',
+          header: TermsUtil.tLabel('font-color'),
+          record: {
+            align: 'left',
+            editable: true,
+            mandatory: true
+          },
+          width: 130
+        },
+        {
+          type: 'code-input',
+          name: 'logic',
+          header: TermsUtil.tLabel('logic'),
+          record: {
+            align: 'left',
+            editable: true,
+            mandatory: true
+          },
+          width: 725
+        }
+      ]
+    };
+  }
+
+
+  setGridEmphasizedConfigTabDefaultValues() {
+    if (!this.viewEmphasizedData) {
+      this.viewEmphasizedData = {
+        rowEmphasizedData: [],
+        columnEmphasizedData: []
+      }
+    }
+  }
+
+
+  // 화면 
+  renderGridEmphasizedConfigTab() {
+    this.setGridEmphasizedConfigTabDefaultValues();
+
+    let renderHtml = html`
     <div style='grid-template-rows: 50% 50%;display:grid;flex:1;'>
       <div field >
         <h2>
-          <mwc-icon>list_alt</mwc-icon>${TermsUtil.tLabel("grid_row_emphasized_config")}
+          <mwc-icon>list_alt</mwc-icon>${TermsUtil.tLabel('grid_row_emphasized_config')}
         </h2>
-        <ox-grist id="row-emphasized-grist" .config=${this.rowEmphasizedConfig} .mode=${"GRID"} auto-fetch
+        <ox-grist id="row-emphasized-grist" .config=${this.rowEmphasizedConfig} .mode=${'GRID'} auto-fetch
         .fetchHandler=${this.fetchRowEmphasized.bind(this)}></ox-grist>
       </div>
       <div field >
         <h2>
-          <mwc-icon>list_alt</mwc-icon>${TermsUtil.tLabel("grid_column_emphasized_config")}
+          <mwc-icon>list_alt</mwc-icon>${TermsUtil.tLabel('grid_column_emphasized_config')}
         </h2>
-        <ox-grist id="column-emphasized-grist" .config=${this.columnEmphasizedConfig} .mode=${"GRID"} auto-fetch
+        <ox-grist id="column-emphasized-grist" .config=${this.columnEmphasizedConfig} .mode=${'GRID'} auto-fetch
         .fetchHandler=${this.fetchColumnEmphasized.bind(this)}></ox-grist>
       </div>      
     </div>
-    `}async fetchRowEmphasized(){return{records:this.viewEmphasizedData.rowEmphasizedData,total:0}}async fetchColumnEmphasized(){return{records:this.viewEmphasizedData.columnEmphasizedData,total:0}}};
+    `
+    return renderHtml;
+  }
+
+
+  async fetchRowEmphasized() {
+    return {
+      records: this.viewEmphasizedData.rowEmphasizedData,
+      total: 0
+    }
+  }
+
+  async fetchColumnEmphasized() {
+    return {
+      records: this.viewEmphasizedData.columnEmphasizedData,
+      total: 0
+    }
+  }
+}