diff --git a/components/common/DatepickerTimeSelectBox.vue b/components/common/DatepickerTimeSelectBox.vue
index 5b2ec0e..2a7b67b 100644
--- a/components/common/DatepickerTimeSelectBox.vue
+++ b/components/common/DatepickerTimeSelectBox.vue
@@ -52,6 +52,7 @@
             selectBoxTimeItemList.minInterval ? selectBoxTimeItemList.minInterval : 1
           "
           @update:propsValue="selectTimeValue1 = $event"
+          customClass="select-large"
         />
         <!-- <div v-show="isRange" class="mx-3" :style="{ lineHeight: 0 }">~</div> -->
 
@@ -99,6 +100,7 @@
             selectBoxTimeItemList.minInterval ? selectBoxTimeItemList.minInterval : 1
           "
           @update:propsValue="selectTimeValue2 = $event"
+          customClass="select-large"
         />
       </div>
     </v-col>
diff --git a/components/common/button/ActionButtons.vue b/components/common/button/ActionButtons.vue
index 9e75209..4d6a7f3 100644
--- a/components/common/button/ActionButtons.vue
+++ b/components/common/button/ActionButtons.vue
@@ -1,5 +1,7 @@
 <template>
-	<div class="d-flex flex-row justify-center align-center" style="gap: 12px">
+	<div class="d-flex justify-center align-center" 
+		:class="directionBtn === 'vertically'?'flex-row':'flex-column'" 
+		style="gap: 12px">
 		<a-button @click="btnActionsFnc('removeRightToLeft')" type="primary" ghost :icon="icons.remove" >
 		</a-button>
 		<a-button   @click="btnActionsFnc('addLeftToRight')" type="primary" ghost :icon="icons.add">
diff --git a/components/common/select/SelectBoxTime.vue b/components/common/select/SelectBoxTime.vue
index b701a9f..1046a54 100644
--- a/components/common/select/SelectBoxTime.vue
+++ b/components/common/select/SelectBoxTime.vue
@@ -22,7 +22,7 @@
         outlined
         :menu-props="{ auto: true, offsetY: true }"
         :hide-details="true"
-        :class="'v-select__custom'"
+        :class="['v-select__custom', customClass]"
         :disabled="disabled"
         :readonly="readonly"
         @click="setDatepickerHide"
@@ -106,6 +106,10 @@ export default {
       require: false,
       default: 1,
     },
+    customClass: {
+      type: String,
+      require: false,
+    },
   },
   emits: ["update:propsValue"],
   data() {
diff --git a/components/pages/ems/ErcChrgInfo/ErcChrgInfoTab.vue b/components/pages/ems/ErcChrgInfo/ErcChrgInfoTab.vue
index e3ab3dd..47963c5 100644
--- a/components/pages/ems/ErcChrgInfo/ErcChrgInfoTab.vue
+++ b/components/pages/ems/ErcChrgInfo/ErcChrgInfoTab.vue
@@ -20,6 +20,12 @@
 				</v-card>
 			</v-col>
 		</v-row>
+		<!-- Create the line between date picker and form -->
+		<v-row class="my-5" no-gutters>
+			<v-col>
+				<div style="height: 1px; background-color: #ccc;"></div>
+			</v-col>
+		</v-row>
 		<v-row class="search-box" align="center" no-gutters style="height: 44px;">
 			<v-col :cols="4">
 				<label for="" class="search-box-label">
diff --git a/pages/comm/auth/MenuRoleMngPage.vue b/pages/comm/auth/MenuRoleMngPage.vue
index d2c1085..d45486f 100644
--- a/pages/comm/auth/MenuRoleMngPage.vue
+++ b/pages/comm/auth/MenuRoleMngPage.vue
@@ -5,22 +5,12 @@
 				<v-card class="searchFilter">
 					<v-row algin="end" no-gutters>
 						<v-col :cols="3">
-							<InputText
-								:parentPrgmId="myPrgmId"
-								label="역할ID"
-								valueNm="roleId"
-								:searchOption="true"
-								customClass="input-large"
-							/>
+							<InputText :parentPrgmId="myPrgmId" label="역할ID" valueNm="roleId" :searchOption="true"
+								customClass="input-large" />
 						</v-col>
 						<v-col :cols="3">
-							<InputText
-								:parentPrgmId="myPrgmId"
-								label="역할명"
-								valueNm="roleNm"
-								:searchOption="true"
-								customClass="input-large"
-							/>
+							<InputText :parentPrgmId="myPrgmId" label="역할명" valueNm="roleNm" :searchOption="true"
+								customClass="input-large" />
 						</v-col>
 						<v-col class="text-right d-flex justify-end align-end mr-3">
 							<BtnSearch size="large" />
@@ -30,81 +20,55 @@
 			</v-col>
 		</v-row>
 
-		<v-row ref="contents" >
-			<v-col cols="12" lg="2" >
+		<v-row ref="contents">
+			<v-col cols="12" lg="3">
 				<v-card>
 					<v-card-title>
 						<span class="custom-title-4">역할 리스트</span>
 					</v-card-title>
 					<div ref="gridParent" class="px-5" style="height: 60vh;">
-						<component
-							:is="loadGrid ? 'Grid' : null"
-							:ref="gridName + myPrgmId"
-							:gridName="gridName"
-							:parentPrgmId="myPrgmId"
-							@getRowsData="getRowData"
-						/>
+						<component :is="loadGrid ? 'Grid' : null" :ref="gridName + myPrgmId" :gridName="gridName"
+							:parentPrgmId="myPrgmId" @getRowsData="getRowData" />
 					</div>
 				</v-card>
 			</v-col>
-			<v-col cols="12" lg="10" >
+			<v-col cols="12" lg="9">
 				<v-card>
 					<v-card-title>
 						<span class="custom-title-4">역할 메뉴별 권한</span>
 					</v-card-title>
-					<v-row
-						align="center"
-						no-gutters
-						:style="{ height: 'calc(100% - 62px)' }"
-						class="px-5"
-					>
-						<v-col :cols="4" class="h100">
-							<span
-								class="body-1 font-weight-bold d-flex align-center"
-								:style="{ minHeight: '36px' }"
-								>[미배정]메뉴리스트</span
-							>
+					<v-row align="center" no-gutters :style="{ height: 'calc(100% - 62px)' }" class="px-5">
+						<v-col class="h100" style="max-width: 400px;">
+							<span class="body-1 font-weight-bold d-flex align-center"
+								:style="{ minHeight: '36px' }">[미배정]메뉴리스트</span>
 							<div ref="treeGridParent" class="px-0 mt-2" style="height: 60vh;">
 								<!-- <div
 									ref="treeGridParent"
 									class="w100 h100"
 								>
 							</div> -->
-								<component
-									:is="loadTreeGrid ? 'Grid' : null"
-									:ref="gridName2 + myPrgmId"
-									:gridName="gridName2"
-									:parentPrgmId="myPrgmId"
-									@getRowsData="getUnAsgnRowData"
-								/>
+								<component :is="loadTreeGrid ? 'Grid' : null" :ref="gridName2 + myPrgmId"
+									:gridName="gridName2" :parentPrgmId="myPrgmId" @getRowsData="getUnAsgnRowData" />
 							</div>
 						</v-col>
-						<v-col :cols="1">
-							<ActionButtons
-								:parentPrgmId="myPrgmId"
-								:leftGridName="gridName2"
-								:rightGridName="gridName3"
-								:btnActionsFnc="dualGridBtnActions"
-							/>
-						</v-col>
+						<!-- <v-col :cols="1.5">
+							<ActionButtons :parentPrgmId="myPrgmId" :leftGridName="gridName2" :rightGridName="gridName3"
+								:btnActionsFnc="dualGridBtnActions" />
+						</v-col> -->
+						<div class="px-2">
+							<ActionButtons :parentPrgmId="myPrgmId" :leftGridName="gridName2" :rightGridName="gridName3"
+								:btnActionsFnc="dualGridBtnActions" />
+						</div>
 						<v-col :cols="7" class="h100">
-							<v-row
-								justify="space-between"
-								align="center"
-								no-gutters
-								class="px-5"
-							>
+							<v-row justify="space-between" align="center" no-gutters class="px-5">
 								<v-col :cols="11">
-									<span class="body-1 font-weight-bold"
-										>[배정]메뉴별권한 리스트</span
-									>
+									<span class="body-1 font-weight-bold d-flex align-center"
+										:style="{ minHeight: '36px' }">[배정]메뉴별권한 리스트</span>
+									<!-- <span class="body-1 font-weight-bold">[배정]메뉴별권한 리스트</span> -->
 								</v-col>
 								<v-col :cols="1" class="text-right">
-									<Buttons
-										:parentPrgmId="myPrgmId"
-										:bindingData="gridName3"
-										:btnActionsFnc="btnActions"
-									/>
+									<Buttons :parentPrgmId="myPrgmId" :bindingData="gridName3"
+										:btnActionsFnc="btnActions" />
 								</v-col>
 							</v-row>
 							<div ref="treeGridParent2" class="px-0 mt-2" style="height: 60vh;">
@@ -113,14 +77,9 @@
 									class="w100 h100"
 								>
 							</div> -->
-								<component
-									:is="loadTreeGrid2 ? 'Grid' : null"
-									:ref="gridName3 + myPrgmId"
-									:gridName="gridName3"
-									:parentPrgmId="myPrgmId"
-									:editorGrid="true"
-									@getRowsData="getAsgnRowData"
-								/>
+								<component :is="loadTreeGrid2 ? 'Grid' : null" :ref="gridName3 + myPrgmId"
+									:gridName="gridName3" :parentPrgmId="myPrgmId" :editorGrid="true"
+									@getRowsData="getAsgnRowData" />
 							</div>
 						</v-col>
 					</v-row>
@@ -286,8 +245,8 @@ export default {
 		async gridInit() {
 			//---------------------gridOption 설정 시작----------------------------
 			const gridHeight = this.$refs.gridParent.offsetHeight - 30;
-			const treeGridHeight = this.$refs.treeGridParent.offsetHeight - 30;
-			const treeGridHeight2 = this.$refs.treeGridParent2.offsetHeight - 30;
+			const treeGridHeight = this.$refs.treeGridParent.offsetHeight - 50;
+			const treeGridHeight2 = this.$refs.treeGridParent2.offsetHeight - 50;
 			// const gridHeight = this.$refs.contents.offsetHeight - 30;
 
 			const myOptions = {
@@ -316,8 +275,10 @@ export default {
 				treeColumnOptions: {
 					name: 'menuNm',
 				},
-				scrollX: false,
-				// scrollY: false,
+				rowHeight: 37,
+				minRowHeight: 37,
+				scrollX: true,
+				scrollY: true,
 			};
 
 			this.setGridOption({
@@ -347,6 +308,9 @@ export default {
 					const el = document.createElement('input');
 					const { grid, rowKey, columnInfo } = props;
 					el.type = 'checkbox';
+					$(el).css('width', '16px');
+					$(el).css('height', '16px');
+					$(el).css('accent-color', '#1677FF');
 					el.value = props.value;
 					this.el = el;
 
@@ -380,12 +344,12 @@ export default {
 			const _this = this;
 
 			const myColumns = [
-				{ header: '역할ID', name: 'roleId', align: 'center', minWidth: 70 },
-				{ header: '역할명', name: 'roleNm', minWidth: 70 },
+				{ header: '역할ID', name: 'roleId', align: 'left', minWidth: 70,width:120 },
+				{ header: '역할명', name: 'roleNm', minWidth: 70, align: 'left',width:120 },
 				{
 					header: '사용여부',
 					name: 'useFg',
-					align: 'center',
+					align: 'left',
 					minWidth: 84,
 					formatter({ value }) {
 						const newValue = _this.pageData.useFgList.filter(
@@ -408,6 +372,7 @@ export default {
 				{
 					header: '메뉴명',
 					name: 'menuNm',
+					maxWidth: 120,
 					validation: {
 						dataType: 'string',
 						validatorFn: (value, row) => {
@@ -549,12 +514,12 @@ export default {
 						//rowKey: 0,
 						rowKey:
 							this.pageData.rowGridSelectKey == '' ||
-							this.pageData.rowGridSelectKey == null
+								this.pageData.rowGridSelectKey == null
 								? 0
 								: this.pageData.rowGridSelectKey ==
-								  this.$refs[this.gridName + this.myPrgmId].getData().length - 1
-								? this.pageData.rowGridSelectKey
-								: 0,
+									this.$refs[this.gridName + this.myPrgmId].getData().length - 1
+									? this.pageData.rowGridSelectKey
+									: 0,
 						columnName: 'roleId',
 						setScroll: true,
 					});
@@ -609,8 +574,8 @@ export default {
 						item.upMenuId && item.upMenuId != '0'
 							? item.upMenuId
 							: item.upMenuId == '0'
-							? '00'
-							: 'ROOT',
+								? '00'
+								: 'ROOT',
 				};
 				return newItem;
 			});
@@ -649,8 +614,8 @@ export default {
 						item.upMenuId && item.upMenuId != '0'
 							? item.upMenuId
 							: item.upMenuId == '0'
-							? '00'
-							: 'ROOT',
+								? '00'
+								: 'ROOT',
 				};
 				return newItem;
 			});
diff --git a/pages/comm/base/PrgmMngPage.vue b/pages/comm/base/PrgmMngPage.vue
index 7aa0ce8..1a0a984 100644
--- a/pages/comm/base/PrgmMngPage.vue
+++ b/pages/comm/base/PrgmMngPage.vue
@@ -7,28 +7,15 @@
 				<v-card class="searchFilter">
 					<v-row align="end" no-gutters>
 						<v-col :cols="3">
-							<component
-								:is="'selectCodeList'"
-								:parentPrgmId="myPrgmId"
-								:label="'사용여부'"
-								:dataKey="'selectUseFg'"
-								:sendParam="{ commGrpCd: 'CO_USEFG', useFg: '1' }"
-								:addAll="true"
-								customClass="select-large"
-							/>
+							<component :is="'selectCodeList'" :parentPrgmId="myPrgmId" :label="'사용여부'"
+								:dataKey="'selectUseFg'" :sendParam="{ commGrpCd: 'CO_USEFG', useFg: '1' }"
+								:addAll="true" customClass="select-large" />
 						</v-col>
 						<v-col :cols="3">
-							<InputText
-								:parentPrgmId="myPrgmId"
-								label="프로그램명"
-								valueNm="prgmNm"
-								:searchOption="true"
-								:labelCols="12"
-								:textCols="12"
-								customClass="input-large"
-							/>
+							<InputText :parentPrgmId="myPrgmId" label="프로그램명" valueNm="prgmNm" :searchOption="true"
+								:labelCols="12" :textCols="12" customClass="input-large" />
 						</v-col>
-						<v-col :cols="5" class="text-right">
+						<v-col :cols="6" class="text-right">
 							<BtnSearch size="large" />
 						</v-col>
 					</v-row>
@@ -38,46 +25,32 @@
 
 		<v-row ref="contents">
 			<!-- 프로그램 리스트 -->
-			<v-col :cols="5" >
+			<v-col :cols="5">
 				<v-card class="pb-5">
 					<div class="d-flex align-center justify-space-between pa-5">
 						<v-card-title class="pa-0">프로그램 리스트</v-card-title>
 						<div>
-							<Buttons
-								:parentPrgmId="myPrgmId"
-								:bindingData="gridName"
-								:detailList="detailList"
-								:btnActionsFnc="btnActions"
-							/>
+							<Buttons :parentPrgmId="myPrgmId" :bindingData="gridName" :detailList="detailList"
+								:btnActionsFnc="btnActions" />
 						</div>
 					</div>
 					<div ref="gridParent" style="height: 60vh">
 						<!-- <div ref="gridParent" class="px-5 h100">
 						</div> -->
-						<component
-							:ref="gridName"
-							:is="loadGrid ? 'Grid' : null"
-							:parentPrgmId="myPrgmId"
-							:gridName="gridName"
-							@getRowsData="getRowData"
-						/>
+						<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :parentPrgmId="myPrgmId"
+							:gridName="gridName" @getRowsData="getRowData" />
 					</div>
 				</v-card>
 			</v-col>
 			<!-- 프로그램 상세 -->
-			<v-col :cols="7" >
+			<v-col :cols="7">
 				<v-card class="pb-5">
 					<div class="d-flex align-center justify-space-between pa-5">
 						<v-card-title class="pa-0">프로그램 상세</v-card-title>
 					</div>
 					<div class="px-5" style="min-height:calc(100% - 76px)">
-						<component
-							:is="'Form'"
-							:parentPrgmId="myPrgmId"
-							:bindingData="gridName"
-							:detailList="detailList"
-							@gridEditingFinish="gridEditingFinish"
-						/>
+						<component :is="'Form'" :parentPrgmId="myPrgmId" :bindingData="gridName"
+							:detailList="detailList" @gridEditingFinish="gridEditingFinish" />
 						<!-- <div class="w100">
 						</div> -->
 					</div>
@@ -132,21 +105,19 @@ export default {
 			detailList: myDetail,
 
 			dataPathMock: {
-        'rowGrid': {
-          column: [
-            { header: '프로그램ID', name: 'field1', align: 'left' },
-            { header: '프로그램덤', name: 'field2', align: 'left' },
-            { header: '타임', name: 'field3', align: 'left' },
-            { header: '사용여부', name: 'field4', align: 'left' }
-          ],
-          data: dataPathDataExample,
-          defaultRow: dataPathDataExample,
-          option: {
+				'rowGrid': {
+					column: [
+						{ header: '프로그램ID', name: 'field1', align: 'left' },
+						{ header: '프로그램덤', name: 'field2', align: 'left' },
+						{ header: '타임', name: 'field3', align: 'left' },
+						{ header: '사용여부', name: 'field4', align: 'left' }
+					],
+					option: {
 						scrollY: false,
 						scrollX: false,
 					}
-        }
-      },
+				}
+			},
 		};
 	},
 	computed: {
@@ -295,7 +266,7 @@ export default {
 				value: newRes,
 			});
 			this.loadGrid = true;
-			
+
 			this.$nextTick(() => {
 				if (newRes.length > 0) {
 					this.$refs[this.gridName].focus({
@@ -303,12 +274,12 @@ export default {
 						//rowKey: this.chkRowGridSelectKey || 0,
 						rowKey:
 							this.pageData.rowGridSelectKey == '' ||
-							this.pageData.rowGridSelectKey == null
+								this.pageData.rowGridSelectKey == null
 								? 0
 								: this.pageData.rowGridSelectKey ==
-								  this.$refs[this.gridName].getData().length - 1
-								? this.pageData.rowGridSelectKey
-								: 0,
+									this.$refs[this.gridName].getData().length - 1
+									? this.pageData.rowGridSelectKey
+									: 0,
 						setScroll: true,
 					});
 				}
@@ -331,7 +302,7 @@ export default {
 				rowGridSelectKey: data.rowKey,
 				rowGridSelectData: data,
 			});
-			
+
 		},
 		compareData(type, newDt) {
 			if (this.selectedCommCdData[type] == newDt) {
@@ -487,7 +458,7 @@ const myDetail = [
 		valueNm: 'prgmTpCd',
 		essential: true,
 		cols: 6,
-		class: 'py-2',
+		class: 'py-2 pt-5',
 		list: [
 			{ text: '프로그램', value: '1' },
 			{ text: '팝업', value: '2' },
@@ -502,10 +473,11 @@ const myDetail = [
 		essential: true,
 		disabled: false,
 		cols: 6,
-		class: 'py-2',
+		class: 'py-2 pt-13',
 		value: { '1': true, '0': false },
 		required: true,
 		textCols: 12,
+		labelCols:12,
 		iconShow: true
 	},
 	{
@@ -514,7 +486,7 @@ const myDetail = [
 		valueNm: 'url',
 		disabled: false,
 		cols: 12,
-		class: 'py-2',
+		class: 'py-2 pt-4',
 		required: true,
 		textCols: 12,
 		iconShow: true
@@ -525,7 +497,7 @@ const myDetail = [
 		valueNm: 'regUserNo',
 		disabled: true,
 		cols: 6,
-		class: 'py-2',
+		class: 'py-2 pt-5',
 		placeholder: '시스템 자동입력',
 		textCols: 12,
 		iconShow: true
@@ -536,7 +508,7 @@ const myDetail = [
 		valueNm: 'regDttm',
 		disabled: true,
 		cols: 6,
-		class: 'py-2',
+		class: 'py-2 pt-5',
 		placeholder: '시스템 자동입력',
 		textCols: 12,
 		iconShow: true
@@ -547,7 +519,7 @@ const myDetail = [
 		valueNm: 'procUserNo',
 		disabled: true,
 		cols: 6,
-		class: 'py-2',
+		class: 'py-2 pt-5',
 		placeholder: '시스템 자동입력',
 		textCols: 12,
 		iconShow: true
@@ -558,19 +530,10 @@ const myDetail = [
 		valueNm: 'procDttm',
 		disabled: true,
 		cols: 6,
-		class: 'py-2',
+		class: 'py-2 pt-5',
 		placeholder: '시스템 자동입력',
 		textCols: 12,
 		iconShow: true
 	},
 ];
-
-
-import { getPathDataExample } from '@/const/const'
-const dataPathDataExample = getPathDataExample({
-  field1: 'PRG0001',
-  field2: '대시보드',
-  field3: '프로그램', 
-	field4: '사용'
-});
 </script>
diff --git a/pages/ems/base/DashboardPage.vue b/pages/ems/base/DashboardPage.vue
index 1cd6979..54d04df 100644
--- a/pages/ems/base/DashboardPage.vue
+++ b/pages/ems/base/DashboardPage.vue
@@ -803,7 +803,7 @@ export default {
           header: "NO",
           name: "rowNum",
           width: 70,
-          align: "center",
+          align: "right",
           // hidden: true,
         },
         {
diff --git a/pages/ems/base/EqpmKindPage.vue b/pages/ems/base/EqpmKindPage.vue
index 7fff026..f17c8d3 100644
--- a/pages/ems/base/EqpmKindPage.vue
+++ b/pages/ems/base/EqpmKindPage.vue
@@ -167,7 +167,7 @@ export default {
 					header: '설비종류ID',
 					name: 'eqpmKindId',
 					width: gridWidth * 0.5,
-					align: 'center',
+					align: 'left',
 				},
 				{
 					header: '설비종류명',
diff --git a/pages/ems/effc/EqpmIndMntrPage.vue b/pages/ems/effc/EqpmIndMntrPage.vue
index 067f144..f49c1f8 100644
--- a/pages/ems/effc/EqpmIndMntrPage.vue
+++ b/pages/ems/effc/EqpmIndMntrPage.vue
@@ -104,7 +104,6 @@
                 :is="loadGrid ? 'Grid' : null"
                 :gridName="gridName"
                 :parentPrgmId="myPrgmId"
-                @dblClick="gridDoubleClickEvent"
               />
               <!--
 							<component
@@ -143,7 +142,6 @@ import SelectBox from "@/components/common/select/SelectBox";
 import SelectCmCycle from "@/components/common/select/SelectCmCycle";
 import DatePicker from "@/components/common/Datepicker";
 import Grid from "~/components/common/Grid";
-import PageTitle from "@/components/common/PageTitle";
 
 let myTitle;
 let myPrgmId;
@@ -170,7 +168,6 @@ export default {
     SelectCmCycle,
     DatePicker,
     Grid,
-    PageTitle,
   },
   data() {
     return {
@@ -204,6 +201,7 @@ export default {
   computed: {
     ...mapState({
       pageData: (state) => state.pageData[myPrgmId],
+      isDarkMode: "isDarkMode",
     }),
     fromDt() {
       return this.pageData.fromDt;
@@ -237,6 +235,16 @@ export default {
         await this.search();
       }
     },
+    isDarkMode(newVal) {
+      // Switch mode for 10 tooltips
+      for (let i = 0; i < 10; i++) {
+        const tooltipEl = document.getElementById(`tooltipElement_${i}`);
+        if (tooltipEl) {
+          tooltipEl.classList.remove("light-mode", "dark-mode");
+          tooltipEl.classList.add(newVal ? "dark-mode" : "light-mode");
+        }
+      }
+    },
   },
   async beforeCreate() {
     myPrgmId = this.$route.query.prgmId;
@@ -357,13 +365,79 @@ export default {
     gridInit() {
       const gridHeight = this.$refs.gridParent.offsetHeight - 30;
       const _this = this;
+      // Define custom button
+      class CustomButton {
+				constructor(props,pageData) {
+					const { grid, rowKey, columnInfo } = props;
+					const gridData = grid.store.data.rawData;
+					const value = gridData[rowKey][columnInfo.name];
+          const onClickCallback = columnInfo.renderer.options.onClick; 
+
+					this.disabled = columnInfo.renderer.options.disabled || false;
+					const elDiv = document.createElement('div');
+					elDiv.innerHTML = `<span>${value}</span>`;
+					$(elDiv).addClass('tui-grid-cell-content d-flex justify-space-between');
+					const el2 = document.createElement('button');
+					$(el2).addClass('edit-btn blue--text');
+					el2.innerText = '보기';
+					elDiv.appendChild(el2);
+					this.el = elDiv;
+					if (!this.disabled && typeof onClickCallback === 'function') {
+						// click 이벤트
+						this.el.addEventListener('click', function(event) {
+							onClickCallback(rowKey); 
+						});
+					}
+				}
+				getElement() {
+					return this.el;
+				}
+				getValue() {
+					// return this.el.value;
+				}
+				mounted() {
+					// this.el.focus();
+				}
+			}
 
       var columnList = [
         { header: "NO", name: "no", align: "right", width: 80 },
         { header: "fabId", name: "fabId", hidden: true },
         { header: "FAB", name: "fabNm", align: "left" },
         { header: "eqpmGrpId", name: "eqpmGrpId", hidden: true },
-        { header: "설비그룹", name: "eqpmGrpNm", align: "left", width: 200 },
+        { header: "설비그룹", name: "eqpmGrpNm", align: "left", width: 200,
+          // Render custom button to switch page instead of double click on row
+          renderer: {
+            type: CustomButton,
+            options: {
+              value: '보기',
+              onClick: (rowKey) => {
+                const gridInstance = this.$refs[this.gridName].gridInstance;
+                const eventRowData = gridInstance.invoke("getRow", rowKey);
+
+                const data = {
+                  cmCycle: this.pageData.cmCycle,
+                  fromDt: this.pageData.fromDt,
+                  fabId: this.selectValue01,
+                  eqpmKindId: this.selectValue02,
+                  eqpmGrpId: this.selectValue03,
+                  eqpmId: eventRowData.eqpmId,
+                };
+                const key = "tick_" + Math.random();
+                this.$router.push({
+                  name: "ems-effc-EnrgUseEqpmDetlMntrPage",
+                  query: {
+                    prgmId: "PRG0082",
+                  },
+                  params: {
+                    ...data,
+                    key: key,
+                  },
+                });
+              }
+            }
+          }
+        },
         { header: "eqpmId", name: "eqpmId", hidden: true },
         { header: "설비명", name: "eqpmNm", align: "left", width: 200 },
         {
@@ -472,6 +546,10 @@ export default {
             },
           ],
         },
+        pageOptions: {
+          useClient: true,
+          perPage: 3,
+        }
       };
 
       this.setGridOption({
@@ -693,53 +771,83 @@ function numberFormatter({ value }) {
 }
 </script>
 <style lang="scss" scoped>
-@for $i from 0 through 9 {
-  #gridParent > * {
-    // .tui-grid-content-area{
-    background-color: red;
-    color: red;
-    overflow: visible;
-    position: relative;
-  }
-  #tooltipTargetElement_#{$i} {
-    overflow: visible;
-    position: relative; // 테스트3번쨰
-    white-space: nowrap; // 테스트3번쨰
-  }
-  #tooltipElement_#{$i} {
-    display: none;
-    overflow: visible;
-    position: relative;
-  }
-  #tooltipTargetElement_#{$i}:hover #tooltipElement_#{$i} {
-    display: block;
-    position: absolute;
-    min-width: 100%;
-    bottom: 30px;
-    z-index: 1000000000;
-    align: "center";
-    color: #f2f2f2;
-    background-color: #7f7f7f;
-    // width : 77px;
-    width: 200%;
-    left: -50%;
-    border-radius: 3px;
-    word-break: keep-all;
-    white-space: pre-wrap;
-  }
-  .tui-grid-rside-area {
-    display: none;
-    overflow: visible;
-    overflow-x: visible;
-    overflow-y: visible;
-  }
-  .tui-grid-header-area {
-    border-style: solid;
-    border-width: 0 0 1px;
-    position: relative;
-    overflow: visible;
-    overflow-x: visible;
-    overflow-y: visible;
+::v-deep {
+  @for $i from 0 through 9 {
+    #gridParent > * {
+      // .tui-grid-content-area{
+      background-color: red;
+      color: red;
+      overflow: visible;
+      position: relative;
+    }
+    #tooltipTargetElement_#{$i} {
+      overflow: visible;
+      position: relative; // 테스트3번쨰
+      white-space: nowrap; // 테스트3번쨰
+    }
+    #tooltipElement_#{$i} {
+      display: none;
+      overflow: visible;
+      position: relative;
+    }
+    #tooltipTargetElement_#{$i}:hover #tooltipElement_#{$i} {
+      display: block;
+      position: absolute;
+      min-width: 100%;
+      bottom: 40px;
+      z-index: 1000000000;
+      align: "center";
+      color: #f2f2f2;
+      background-color: #000000d9;
+      // width : 77px;
+      width: 200%;
+      left: -50%;
+      border-radius: 4px;
+      padding: 6px 0px;
+      word-break: keep-all;
+      white-space: pre-wrap;
+      // Light mode
+      &.light-mode {
+        background-color: #000000d9;
+      }
+      // Dark mode
+      &.dark-mode {
+        background-color: #424242;
+      }
+
+      &::after {
+        content: "";
+        position: absolute;
+        top: 100%;
+        left: 50%;
+        margin-left: -6px;
+        border-width: 6px;
+        border-style: solid;
+      }
+
+      &.light-mode::after {
+        border-color: #000000d9 transparent transparent transparent;
+      }
+
+      &.dark-mode::after {
+        border-color: #424242 transparent transparent transparent;
+      }
+    }
+
+    .tui-grid-rside-area {
+      display: none;
+      overflow: visible;
+      overflow-x: visible;
+      overflow-y: visible;
+    }
+    .tui-grid-header-area {
+      border-style: solid;
+      border-width: 0 0 1px;
+      position: relative;
+      overflow: visible;
+      overflow-x: visible;
+      overflow-y: visible;
+    }
   }
 }
 </style>