From 9337b60a7cde0907eef74517d02216ea3656f881 Mon Sep 17 00:00:00 2001
From: Leeyh1121 <130335980+Leeyh1121@users.noreply.github.com>
Date: Thu, 25 Jul 2024 20:25:28 +0900
Subject: [PATCH] =?UTF-8?q?feat=20:=20API=20Key=20=EA=B4=80=EB=A6=AC=20?=
 =?UTF-8?q?=EB=A9=94=EB=89=B4=20=EC=B6=94=EA=B0=80.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../java/cokr/xit/adds/nims/ApiKeyQuery.java  |  83 +++++
 .../cokr/xit/adds/nims/dao/ApiKeyMapper.java  |  45 +++
 .../xit/adds/nims/service/ApiKeyService.java  |  32 ++
 .../nims/service/bean/ApiKeyServiceBean.java  |  58 +++
 .../sql/mapper/adds/nims/apiKey-mapper.xml    |  60 ++++
 .../WEB-INF/jsp/adds/nims/apiKey-info.jsp     | 229 ++++++++++++
 .../WEB-INF/jsp/adds/nims/apiKey-main.jsp     | 334 ++++++++++++++++++
 7 files changed, 841 insertions(+)
 create mode 100644 src/main/java/cokr/xit/adds/nims/ApiKeyQuery.java
 create mode 100644 src/main/java/cokr/xit/adds/nims/dao/ApiKeyMapper.java
 create mode 100644 src/main/java/cokr/xit/adds/nims/service/ApiKeyService.java
 create mode 100644 src/main/java/cokr/xit/adds/nims/service/bean/ApiKeyServiceBean.java
 create mode 100644 src/main/resources/sql/mapper/adds/nims/apiKey-mapper.xml
 create mode 100644 src/main/webapp/WEB-INF/jsp/adds/nims/apiKey-info.jsp
 create mode 100644 src/main/webapp/WEB-INF/jsp/adds/nims/apiKey-main.jsp

diff --git a/src/main/java/cokr/xit/adds/nims/ApiKeyQuery.java b/src/main/java/cokr/xit/adds/nims/ApiKeyQuery.java
new file mode 100644
index 0000000..24cd71f
--- /dev/null
+++ b/src/main/java/cokr/xit/adds/nims/ApiKeyQuery.java
@@ -0,0 +1,83 @@
+package cokr.xit.adds.nims;
+
+import cokr.xit.foundation.component.QueryRequest;
+
+/**폐기관리접수 정보 조회 요청
+*
+*/
+public class ApiKeyQuery extends QueryRequest{
+
+	private static final long serialVersionUID = 1L;
+
+	//폐기관리
+	private String schDeptCd;			// 조회 부서 코드
+	private String schUseYn;			// 사용여부
+	private String deptCd;				// 부서 코드
+	private String deptNm;				// 부서 명
+	private String prodApiKey;			// ApiKey
+	private String useYn;				// 사용여부
+	private String userId;				// 사용자 ID
+
+	public String getSchDeptCd() {
+		return ifEmpty(schDeptCd, () -> null);
+	}
+
+	public <T extends ApiKeyQuery> T setSchDeptCd(String schDeptCd) {
+		this.schDeptCd = schDeptCd;
+		return self();
+	}
+	
+	public String getSchUseYn() {
+		return ifEmpty(schUseYn, () -> null);
+	}
+
+	public <T extends ApiKeyQuery> T setSchUseYn(String schUseYn) {
+		this.schUseYn = schUseYn;
+		return self();
+	}	
+	
+	public String getDeptCd() {
+		return ifEmpty(deptCd, () -> null);
+	}
+
+	public <T extends ApiKeyQuery> T setDeptCd(String deptCd) {
+		this.deptCd = deptCd;
+		return self();
+	}
+	
+	public String getDeptNm() {
+		return ifEmpty(deptNm, () -> null);
+	}
+
+	public <T extends ApiKeyQuery> T setDeptNm(String deptNm) {
+		this.deptNm = deptNm;
+		return self();
+	}
+
+	public String getProdApiKey() {
+		return ifEmpty(prodApiKey, () -> null);
+	}
+
+	public <T extends ApiKeyQuery> T setProdApiKey(String prodApiKey) {
+		this.prodApiKey = prodApiKey;
+		return self();
+	}
+	
+	public String getuseYn() {
+		return ifEmpty(useYn, () -> null);
+	}
+
+	public <T extends ApiKeyQuery> T setuseYn(String useYn) {
+		this.useYn = useYn;
+		return self();
+	}
+	
+	public String getUserId() {
+		return ifEmpty(userId, () -> null);
+	}
+
+	public <T extends ApiKeyQuery> T setUserId(String userId) {
+		this.userId = userId;
+		return self();
+	}
+}
diff --git a/src/main/java/cokr/xit/adds/nims/dao/ApiKeyMapper.java b/src/main/java/cokr/xit/adds/nims/dao/ApiKeyMapper.java
new file mode 100644
index 0000000..b16cfbf
--- /dev/null
+++ b/src/main/java/cokr/xit/adds/nims/dao/ApiKeyMapper.java
@@ -0,0 +1,45 @@
+package cokr.xit.adds.nims.dao;
+
+import java.util.List;
+
+import org.egovframe.rte.psl.dataaccess.mapper.Mapper;
+
+import cokr.xit.adds.nims.ApiKeyQuery;
+import cokr.xit.adds.nims.DsuseMgtReceiptQuery;
+import cokr.xit.foundation.component.AbstractMapper;
+import cokr.xit.foundation.data.DataObject;
+
+/** 폐기관리상세 정보 DAO
+ */
+@Mapper("apiKeyMapper")
+public interface ApiKeyMapper extends AbstractMapper {
+
+	/**
+	 * 지정한 조건에 따라 폐기관리상세 목록을 조회하여 반환한다.<br />
+	 * @param req 폐기관리상세 조회 조건
+	 * @return 폐기관리상세 목록
+	 */
+	List<DataObject> selectApiKeyList(ApiKeyQuery req);
+
+	
+	/**
+	 * ApiKey 수정.
+	 * @param query ApiKeyQuery
+	 * @return 저장된 정보수
+	 */
+	int updateApiKey(ApiKeyQuery query);
+	
+	/**
+	 * ApiKey 수정.
+	 * @param query ApiKeyQuery
+	 * @return 저장된 정보수
+	 */
+	int createApiKey(ApiKeyQuery query);
+	
+	/**
+	 * ApiKey 중복 조회.
+	 * @param query ApiKeyQuery
+	 * @return 저장된 정보수
+	 */
+	int selectApiKey(ApiKeyQuery query);
+}
diff --git a/src/main/java/cokr/xit/adds/nims/service/ApiKeyService.java b/src/main/java/cokr/xit/adds/nims/service/ApiKeyService.java
new file mode 100644
index 0000000..d2db509
--- /dev/null
+++ b/src/main/java/cokr/xit/adds/nims/service/ApiKeyService.java
@@ -0,0 +1,32 @@
+package cokr.xit.adds.nims.service;
+
+import java.util.List;
+
+import cokr.xit.adds.nims.ApiKeyQuery;
+import cokr.xit.foundation.data.DataObject;
+
+public interface ApiKeyService {
+
+	/** 단속자료 목록을 조회한다.
+	 * @param query ApiKey 조회 조건
+	 * <ul><li>pageNum: 페이지 번호</li>
+	 *     <li>fetchSize: 페이지 목록 건수</li>
+	 * </ul>
+	 * @return ApiKey 목록
+	 */
+	List<DataObject> getApiKeyList(ApiKeyQuery query);
+	
+	/**
+	 * ApiKey 등록.
+	 * @param query ApiKeyQuery
+	 * @return 저장된 정보수
+	 */
+	String createApiKey(ApiKeyQuery query);
+	
+	/**
+	 * ApiKey 수정.
+	 * @param query ApiKeyQuery
+	 * @return 저장된 정보수
+	 */
+	String updateApiKey(ApiKeyQuery query);
+}
diff --git a/src/main/java/cokr/xit/adds/nims/service/bean/ApiKeyServiceBean.java b/src/main/java/cokr/xit/adds/nims/service/bean/ApiKeyServiceBean.java
new file mode 100644
index 0000000..eb867d6
--- /dev/null
+++ b/src/main/java/cokr/xit/adds/nims/service/bean/ApiKeyServiceBean.java
@@ -0,0 +1,58 @@
+package cokr.xit.adds.nims.service.bean;
+
+import java.util.List;
+
+import javax.annotation.Resource;
+
+import org.springframework.stereotype.Service;
+
+import cokr.xit.adds.nims.ApiKeyQuery;
+import cokr.xit.adds.nims.dao.ApiKeyMapper;
+import cokr.xit.adds.nims.service.ApiKeyService;
+import cokr.xit.foundation.component.AbstractServiceBean;
+import cokr.xit.foundation.data.DataObject;
+
+@Service("apiKeyService")
+public class ApiKeyServiceBean extends AbstractServiceBean implements ApiKeyService {
+
+	/** 폐기관리접수 정보 DAO */
+	@Resource(name = "apiKeyMapper")
+	private ApiKeyMapper apiKeyMapper;
+
+	@Override
+	public List<DataObject> getApiKeyList(ApiKeyQuery query){
+		if(ifEmpty(query.getOrderBy(), ()->"").equals("")) {
+			query.setOrderBy("DEPT_CD DESC");
+		}
+
+		return apiKeyMapper.selectApiKeyList(query);
+	}
+
+	/** apiKey 등록.
+	 * @param query ApiKeyQuery
+	 * @return 저장된 정보수
+	 */
+	@Override
+	public String createApiKey(ApiKeyQuery query) {
+		//if(apiKeyMapper.selectApiKey(query) )
+		
+		if(apiKeyMapper.createApiKey(query) == 1) {
+			return "[S]";
+		} else {
+			return "[F]";
+		}
+	}
+	
+	/** apiKey 수정.
+	 * @param query ApiKeyQuery
+	 * @return 저장된 정보수
+	 */
+	@Override
+	public String updateApiKey(ApiKeyQuery query) {
+		if(apiKeyMapper.updateApiKey(query) == 1) {
+			return "[S]";
+		} else {
+			return "[F]";
+		}
+	}
+}
diff --git a/src/main/resources/sql/mapper/adds/nims/apiKey-mapper.xml b/src/main/resources/sql/mapper/adds/nims/apiKey-mapper.xml
new file mode 100644
index 0000000..734b988
--- /dev/null
+++ b/src/main/resources/sql/mapper/adds/nims/apiKey-mapper.xml
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+<mapper namespace="cokr.xit.adds.nims.dao.ApiKeyMapper">
+
+<!-- 폐기관리상세 정보 매퍼
+ -->
+
+    <sql id="select">
+        SELECT 
+			  DEPT_CD											/* 폐기관리 ID */
+			, DEPT_NM											/* 폐기관리_순번 */
+			, PROD_API_KEY										/* 제품_코드 */
+			, USE_YN											/* 제품_명 */
+		FROM TB_DSUSE_API_KEY_INFO
+    </sql>
+
+    <select id="selectApiKeyList" parameterType="map" resultType="dataobject">
+    /* ApiKey 목록 조회(apiKey]Mapper.selectApiKeyList) */
+        <include refid="utility.paging-prefix" />
+        <include refid="select" />
+         WHERE 1=1
+			<if test="schDeptCd != null">
+				AND DEPT_CD       =  #{schDeptCd}  
+		    </if>
+			<if test=" schUseYn != null ">
+				AND USE_YN       =  "Y"  
+		    </if>
+        <include refid="utility.orderBy" />
+        <include refid="utility.paging-suffix" />
+    </select>
+
+    <update id="updateApiKey" parameterType="map" >
+        UPDATE TB_DSUSE_API_KEY_INFO
+           SET PROD_API_KEY = #{prodApiKey}
+             , USE_YN = #{useYn}
+             , MDFCN_DT = DATE_FORMAT(now(), '%Y%m%d%H%i%s')
+             , MDFR = #{userId}
+        WHERE DEPT_CD = #{deptCd}
+    </update>
+    
+    <insert id="createApiKey" parameterType="map" >
+        INSERT INTO TB_DSUSE_API_KEY_INFO
+        (DEPT_CD, DEPT_NM, PROD_API_KEY, USE_YN, REG_DT, RGTR)
+        VALUES
+        (#{deptCd}, #{deptNm}, #{prodApiKey}, #{useYn}, DATE_FORMAT(now(), '%Y%m%d%H%i%s'), #{userId})
+    </insert>
+
+    <select id="selectApiKey" parameterType="map" resultType="dataobject">
+    /* ApiKey 중복 조회(apiKey]Mapper.selectApiKeyList) */
+        <include refid="utility.paging-prefix" />
+        <include refid="select" />
+         WHERE 1=1
+			<if test="schDeptCd != null">
+				AND DEPT_CD       =  #{deptCd}  
+		    </if>
+        <include refid="utility.orderBy" />
+        <include refid="utility.paging-suffix" />
+    </select>
+
+</mapper>
diff --git a/src/main/webapp/WEB-INF/jsp/adds/nims/apiKey-info.jsp b/src/main/webapp/WEB-INF/jsp/adds/nims/apiKey-info.jsp
new file mode 100644
index 0000000..6ebccd7
--- /dev/null
+++ b/src/main/webapp/WEB-INF/jsp/adds/nims/apiKey-info.jsp
@@ -0,0 +1,229 @@
+<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" session="false"%>
+<%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>
+
+<c:set var="prefixName" scope="request">폐기관리 등록</c:set>
+
+<!-- inner page html -->
+<div class="content-wrapper">
+	<!-- Content -->
+	<div class="container flex-grow-1 px-0">
+		<!-- Page Body -->
+		<div class="card">
+			<!-- 입력 영역 -->
+			<form id="apiKey--${pageName}" name="apiKey">
+                <label for="apiKey--${pageName}" style="margin-top: 10px; padding-left: 20px;"><strong>취급 업체 정보</strong></label>
+				<div class="row my-1 mx-4 g-1 border-card rounded-3">
+					<div class="col-md-11">
+			            <label class="w-px-100 bg-lighter pe-2 col-form-label text-sm-end" for="deptCd--${pageName}">관할관청</label>
+			            <select class="form-select" id="deptCd--${pageName}" name="deptCd">
+		                    <c:forEach items="${DEPTList}" var="item">
+								<option value="${item.DEPT_CD}">${item.DEPT_NM}</option>
+							</c:forEach>
+			            </select>
+					</div>
+					<div class="col-md-11">
+						<label for="prodApiKey--${pageName}" class="w-px-100 bg-lighter pe-2 col-form-label text-sm-end">API KEY</label>
+						<input type="text" class="form-control w-px-550" id="prodApiKey--${pageName}" name="prodApiKey" data-map="prodApiKey">
+					</div>
+					<div class="col-md-11">
+						<label for="useYn--${pageName}" class="w-px-100 bg-lighter pe-2 col-form-label text-sm-end">사용여부</label>
+						<input type="checkbox" id="useYn--${pageName}" name="checkUseYn" value = "Y" title="사용여부" style="align-items: baseline"/>
+					</div>
+				</div>
+				<div class="row my-1 mx-1 g-1 border-card rounded"></div>
+			</form>
+		</div> <!-- <div class="card"> -->
+		<!-- 업무 버튼 표시 -->
+		<div>
+			<span class="container-page-btn">
+				<span class="container-window-btn-right">
+					<!-- 업무 버튼 -->
+					<button type="button" class="btn btn-primary w-px-80" id="btnSave--${pageName}" title="저장">저장</button>
+				</span>
+			</span>
+		</div>
+		<!-- / 업무 버튼 표시 -->
+	</div> <!-- / Content <div class="container flex-grow-1 px-0"> -->
+</div> <!-- / inner page html <div class="content-wrapper"> -->
+
+<script>
+/**************************************************************************
+ * Global Variable
+ **************************************************************************/
+pageObject["${pageName}"] = {};
+prdRowKey = 0;
+
+/**************************************************************************
+ * script 진입
+ **************************************************************************/
+$(document).ready(function() {
+	// pageObject
+	let $P = pageObject["${pageName}"];
+
+	// FormFields
+ 	$P.apiKeyFormFields = new AddsFormFields("#apiKey--${pageName}");
+
+	/**************************************************************************
+	 * DatasetControl
+	 **************************************************************************/
+	$P.control = new DatasetControl({
+		  prefix: "apiKey"
+		, prefixName: "마약류 취급업체 조회"
+		, keymapper: info => info ? info.deptCd : ""
+		, dataGetter: obj => obj.${infoPrefix}Info
+		, infoSize: "xl"
+	});
+
+	/**************************************************************************
+	 * DatasetControl 이벤트
+	 **************************************************************************/
+	// 현재 선택 자료 변경 이벤트
+	$P.control.onCurrentChange = item => {
+		if (item.data.deptCd == null){
+			$('#deptCd--${pageName}').removeAttr('disabled');
+			$('#btnSave--${pageName}').text("등록");
+		} else{
+			$('#btnSave--${pageName}').text("수정");
+			$P.apiKeyFormFields.set($P.control, item);
+			$('#deptCd--${pageName}').attr("disabled", true);
+			if (item.data.useYn == "Y"){
+				$("#apiKey--${pageName}").find("input[name='checkUseYn']").prop("checked", true);
+			}else{
+				$("#apiKey--${pageName}").find("input[name='checkUseYn']").prop("checked", false);
+			}
+		}
+	}
+	
+	// 저장 callback
+
+	// 저장
+	$P.control.save = (apiKey) => {
+		let useYnData = "Y"
+		if (apiKey.checkUseYn == "Y"){
+			useYnData = "Y"
+		}else{
+			useYnData = "N"
+		}			
+		let deptName = $('#deptCd--${pageName} option:checked').text();
+		
+		let saveApiKeyData = {
+			...apiKey,
+			deptNm: deptName,
+			useYn: useYnData,
+			userId: "${currentUser.account}"
+		}
+		if ($P.control.dataset.getCurrent().deptCd == null){
+			console.log('InsertData------------------');
+			console.log(saveApiKeyData);
+			upload({
+				  url: wctx.url("/adds/nims/inertApiKey.do")
+				, data: saveApiKeyData
+				, success: resp => {
+					  if(!resp.saved){
+						  dialog.alert({
+							  content: resp.rtnMsg
+						  });
+						  return;
+					  }
+					  dialog.alert("APIKey가 등록 되었습니다.");
+					  dialog.close("apiKeyPopupDialog");
+				}
+			});
+		}else{
+			console.log('updateData------------------');
+			console.log(saveApiKeyData);
+			upload({
+				  url: wctx.url("/adds/nims/updateApiKey.do")
+				, data: saveApiKeyData
+				, success: resp => {
+					  if(!resp.saved){
+						  dialog.alert({
+							  content: resp.rtnMsg
+						  });
+						  return;
+					  }
+					  dialog.alert("APIKey 수정에 성공 하였습니다");
+					  dialog.close("apiKeyPopupDialog");
+				}
+			});
+		}	
+/*
+		upload({
+			  url: wctx.url("/adds/nims/saveDsuseMgtReceipt.do")
+			, data: {
+				ApiJsonStr: JSON.stringify(saveApiKeyData)
+			}
+			, success: resp => {
+				  if(!resp.success){
+					  dialog.alert({
+						  content: resp.message
+					  });
+					  return;
+				  }
+				  dialog.alert("처리 되었습니다.");
+				  dialog.close("dsuseMgtReceiptDialog");
+			}
+		});*/
+	}
+	
+	/**************************************************************************
+	 * DataTables 이벤트
+	 **************************************************************************/
+
+	/**************************************************************************
+	 * 사용자 함수(function)
+	 **************************************************************************/
+
+	/**************************************************************************
+	 * 버튼 clickEvent
+	 **************************************************************************/
+	// 저장
+	$P.fnSave = async() => {
+		// validate 확인
+		if (!customValidate($("#frmEdit--${pageName}").find("input, select, textarea"))) return;
+
+		let apiKeyData = $P.apiKeyFormFields.get();
+
+		if(apiKeyData.prodApiKey == ""){
+			dialog.alert({
+				content: "APIKey를 입력해주세요."
+			});
+			return false;
+		}
+
+		dialog.alert({
+			  content: "현재 API KEY 정보를 저장 하시겠습니까?"
+			, init: () => { setDialogZindex(); }
+			, onOK: () => { $P.control.save(apiKeyData); }
+		});
+	}
+
+	/**************************************************************************
+	 * 초기 셋팅
+	 **************************************************************************/
+	// 이벤트 설정
+	$P.setEvent = () => {	
+		// 버튼 이벤트
+		$("#btnSave--${pageName}").on("click", () => $P.fnSave());			// 저장
+	}
+
+	// 초기 화면 설정
+	$P.initForm = () => {
+		$("#apiKey--${pageName}").find("input[name='checkUseYn']").prop("checked", true);
+	}
+
+
+	/**************************************************************************
+	 * 최초 실행 함수
+	 **************************************************************************/
+	// 1. 이벤트 설정
+	$P.setEvent();
+
+	// 2. 초기 화면 설정
+	$P.initForm();
+
+	// 3. Dataset 설정
+	$P.control.setData([${apiKeyInfo}]);
+	
+});
+</script>
diff --git a/src/main/webapp/WEB-INF/jsp/adds/nims/apiKey-main.jsp b/src/main/webapp/WEB-INF/jsp/adds/nims/apiKey-main.jsp
new file mode 100644
index 0000000..f432242
--- /dev/null
+++ b/src/main/webapp/WEB-INF/jsp/adds/nims/apiKey-main.jsp
@@ -0,0 +1,334 @@
+<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" session="false"%>
+<%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>
+<c:set var="prefixName" scope="request">Api Key 관리</c:set>
+<!-- Page Body -->
+<div class="container-page-btn">
+	<button type="button" class="btn btn-outline-dark w-px-120" id="btnReset--${pageName}" title="초기화">
+		초기화
+	</button>
+</div>
+
+<!-- 검색 조건 영역 -->
+<form id="frmSearch--${pageName}" name="frmSearch">
+	<div class="container-search">
+	    <div class="row g-1">
+	    	<div class="col-5">
+	            <label class="form-label fw-bold form-search-title text-end" for="schDeptCd--${pageName}">관할관청</label>
+	            <select class="form-select" id="schDeptCd--${pageName}" name="schDeptCd" >
+	            	<option value="">전체</option>
+                    <c:forEach items="${DEPTList}" var="item">
+						<option value="${item.DEPT_CD}">${item.DEPT_NM}</option>
+					</c:forEach>
+	            </select>
+	        </div>
+	        <div class="col-5">
+	        	<label class="form-label fw-bold form-search-title text-end">사용여부</label>
+		        <input type="checkbox" id="schUseYN--${pageName}" name="schUseYN" title="사용여부" style="align-items: baseline"/>
+	        </div>
+	        <div class="col-1">
+	            <button type="button" class="btn btn-search w-px-120" id="btnSearch--${pageName}" title="검색">
+	                검색
+	            </button>
+	        </div>
+	    </div>
+	</div>
+</form>
+<!-- 업무 버튼 및 건수 표시 -->
+<div class="d-flex flex-row justify-content-between p-3">
+    <div>
+        <div class="input-group" id="DataTables_Table_0_length">
+        </div>
+    </div>
+    <div>
+        <button type="button" class="btn btn-primary w-px-120" id="btnApiKeyCreate--${pageName}" title="ApiKey 등록">
+            등록
+        </button>
+<%--        <button type="button" class="btn btn-excel w-px-120" id="btnExcel--${pageName}" title="엑셀">--%>
+<%--            엑셀--%>
+<%--        </button>--%>
+    </div>
+</div>
+
+<!-- DataTables(그리드) -->
+<div class="card-datatable text-nowrap">
+	<div class="dataTables_wrapper dt-bootstrap5 no-footer" id="DataTables_Table_0_wrapper--${pageName}">
+		<div class="table-responsive ox-scroll oy-scroll" style="height: 580px !important;" id="table-responsive--${pageName}">
+			<table class="table-layout-fixed dataTable datatables-ajax table table-bordered no-footer" id="DataTables_Table_0--${pageName}" aria-describedby="DataTables_Table_0_info">
+				<thead class="sticky-thead">
+					<tr id="theadTr--${pageName}"
+						data-by="by--${pageName}" data-by-output="byOutput--${pageName}" data-main-option="mainOption--${pageName}" data-sub-option="subOption--${pageName}">
+						<th class="cmn" style="width: 20px;">No.</th>
+						<th class="cmn" style="width: 20px;">관할관청</th>
+						<th class="cmn" style="width: 120.141px;">ApiKey</th>
+						<th class="cmn" style="width: 20px;">사용여부</th>
+					</tr>
+				</thead>
+				<tbody id="tbody--${pageName}">
+				</tbody>
+				<template id="${infoPrefix}Row--${pageName}">
+					<tr data-key="{DEPT_CD}">
+						<td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{ROW_NUM}</td>
+						<td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{DEPT_NM}</td>
+						<td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{PROD_API_KEY}</td>
+						<td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{USE_YN}</td>
+					</tr>
+				</template>
+				<template id="${infoPrefix}NotFound--${pageName}">
+					<tr class="odd">
+						<td valign="top" colspan="3" class="dataTables_empty text-center">${prefixName} 정보를 찾지 못했습니다.</td>
+					</tr>
+				</template>
+			</table>
+		</div>
+	</div>
+</div>
+<!-- / DataTables(그리드) -->
+
+<div class="d-flex flex-row p-3 justify-content-between">
+    <label id="${infoPrefix}Paging--${pageName}PagingInfo" class="dataTables_info" role="status" aria-live="polite"></label>
+    <ul id="${infoPrefix}Paging--${pageName}" class="pagination pagination-primary" style="display: none;">
+    </ul>
+</div>
+
+
+<script>
+<!--/ Page Body -->
+	/**************************************************************************
+	 * Global Variable
+	 **************************************************************************/
+	pageObject["${pageName}"] = {};
+
+	/**************************************************************************
+	 * script 진입
+	 **************************************************************************/
+	$(document).ready(function() {
+		// pageObject
+		let $P = pageObject["${pageName}"];
+
+		// FormFields
+		$P.formFields = new AddsFormFields("#frmSearch--${pageName}");
+
+		/**************************************************************************
+		 * DatasetControl
+		 **************************************************************************/
+		$P.control = new DatasetControl({
+		    urls : {
+		    	load : wctx.url("/adds/nims/apiKey-list.do")
+		    }
+			, prefix: "apiKey"
+			, prefixName: "ApiKey 조회"
+			, keymapper: info => info ? info.DEPT_CD : ""
+			, dataGetter: obj => obj.${infoPrefix}List
+			, appendData: true
+			, infoSize: "xl"
+			, formats: {
+			}
+		});
+		// $P.control 설정
+		$P.control.defaultFetchSize = FETCH_XS;									// 1 페이지당 조회되는 자료 건수 index.jsp에서 확인 FETCH_XS = 30
+
+		$P.control.beforeCurrent = null;
+		
+
+		/**************************************************************************
+		 * DatasetControl 이벤트
+		 **************************************************************************/
+		// Dataset 변경 이벤트
+		$P.control.onDatasetChange = (obj) => {
+			$P.renderList(obj.${infoPrefix}Total);
+			
+			$("#${infoPrefix}Paging--${pageName}").setPaging({
+				  list: $P.control.dataset
+				, prefix: "${infoPrefix}Paging--${pageName}"
+				, start: obj.${infoPrefix}Start
+				, totalSize: obj.${infoPrefix}Total
+				, fetchSize: obj.${infoPrefix}Fetch
+				, func: "pageObject['${pageName}'].control.load({index})"
+			});
+
+			
+		};
+
+		// 현재 선택 자료 변경 이벤트
+		$P.control.onCurrentChange = (item) => {
+			if (!item) return;
+			let key = item.data.DEPT_CD;
+			$("#tbody--${pageName}").setCurrentRow(key);
+		};
+
+
+
+		/**************************************************************************
+		 * DataTables 이벤트
+		 **************************************************************************/
+		// DataTables에 click, dbclick 이벤트
+		$P.renderList = (totalSize) => {
+			let ${infoPrefix}List = $P.control.dataset;
+			let empty = ${infoPrefix}List.empty;
+
+			// 업무별 DataTables(그리드) tr, td
+			let foundContent = document.getElementById("${infoPrefix}Row--${pageName}").content;
+			let foundTr = $(foundContent).find("tr")[0].cloneNode(false);
+			let foundTds = $(foundContent).find("td");
+
+			foundTds.each(function() {
+				foundTr.appendChild(this.cloneNode(true));
+			});
+
+			//
+			let replacer = (str, dataItem) => str
+				.replace(/{onclick}/gi, "pageObject['${pageName}'].control.setCurrent('" + dataItem.getValue("DEPT_CD") + "');")
+				.replace(/{ondblclick}/gi, "pageObject['${pageName}'].control.getInfo('" + dataItem.getValue("DEPT_CD") + "');");
+
+			let trs = empty ? [document.getElementById("${infoPrefix}NotFound--${pageName}").content.outerHTML]
+							: ${infoPrefix}List.inStrings(foundTr.outerHTML, replacer);
+
+			$("#tbody--${pageName}").html(trs.join());
+
+		    
+		}
+
+        $P.control.getInfo = (deptCd) => {
+            let dialogTitle = "apiKey 등록";
+            params = {};
+            if(deptCd) {
+            	dialogTitle = "apiKey 상세";
+                let row = $P.control.dataset.getCurrent();
+                params = {
+                	deptCd: row.DEPT_CD,
+                	deptNm: row.DEPT_NM,
+                	prodApiKey: row.PROD_API_KEY,
+                	useYn: row.USE_YN,
+                };
+            }
+            ajax.get({
+                url : wctx.url("/adds/nims/apiKey-info.do")
+                , data : params
+                , success : resp => {
+                    dialog.open({
+                        id : "apiKeyPopupDialog"
+                        , title : dialogTitle
+                        , content : resp
+                        , size : $P.control.infoSize
+                        , onClose : () => {  }
+                    });
+                }
+            });
+        }
+
+		/**************************************************************************
+		 * 사용자 함수(function)
+		 **************************************************************************/
+		
+
+		// 사용자검색 callback
+		$P.callbackFindUser = (userId, userNm) => {
+			$("#schRgtrCd--${pageName}").val(userId);							// 사용자 ID
+			$("#schRgtrNm--${pageName}").val(userNm);							// 사용자 명
+		}
+
+
+		/**************************************************************************
+		 * 버튼 clickEvent
+		 **************************************************************************/
+		// 업무 구분 변경 이벤트
+		$P.fnReset = () => {
+			// 초기 기본 설정
+			$P.initForm();
+
+			// dataset 초기화
+	 		$P.control.dataset.clear();
+		}
+
+		// 검색 버튼 클릭 이벤트
+		$P.fnSearchList = () => {
+			// 검색조건
+			$P.control.query = $P.formFields.get();								// 검색 조건
+
+            if($('#schUseYN--${pageName}').is(":checked")){
+                $P.control.query.schUseYn = 'Y';
+            }
+			
+			$P.control.query.fetchSize = $P.control.defaultFetchSize;			// 한번에 조회되는 자료 건수
+
+			$P.control.load(1);
+		}
+		
+		$P.fnApiKeyCreate = () => {
+            $P.control.getInfo();
+        }
+
+		// 엑셀 버튼 클릭 이벤트
+		$P.fnExcel = () => {
+			if ($P.control.dataset.empty) {
+				dialog.alert({
+					  content: "검색된 자료가 없습니다."
+					, onOK: () => { }
+				});
+				return;
+			}
+
+			// DataTables(그리드)
+			let cellDefs = getCellDefs($("#theadTr--${pageName} th").not(".dummy-th").not(":eq(0)")
+					, $($("#${infoPrefix}Row--${pageName}")[0].content).find("td").not(".dummy-td").not(":eq(0)"));
+			$P.control.query.cellDefs = cellDefs;
+
+			$P.control.download();
+		}
+
+		/**************************************************************************
+		 * 초기 설정
+		 **************************************************************************/
+		// 이벤트 설정
+		$P.setEvent = () => {
+			// 기본 버튼 이벤트
+			$("#btnReset--${pageName}").on("click", () => $P.fnReset());	// 초기화
+			$("#btnSearch--${pageName}").on("click", () => $P.fnSearchList());			// 검색
+			$("#btnExcel--${pageName}").on("click", () => $P.fnExcel());				// 엑셀
+
+			// 동적검색에서 엔터(Enter) 키를 누르면 검색한다.
+			$("#term--${pageName}").keypress(function(e) {
+				if (e.keyCode == 13) {
+					$P.fnSearchList();
+				}
+			});
+			
+            // 폐기신청서 접수
+            $("#btnApiKeyCreate--${pageName}").on("click", function() {
+                $P.fnApiKeyCreate($(this).attr("title"));
+            });
+            
+
+			// DataTables width 변경 조정 (업무별 그리드가 존재 한다면.. crdn06010-main.jsp 참고)
+			fnMakeResizableTable($("#table-responsive--${pageName}")[0]);
+
+		}
+
+		// 초기 화면 설정
+		$P.initForm = () => {
+			// 화면 초기화
+	 		$("#frmSearch--${pageName}")[0].reset();
+
+			// input, select 초기화
+			let searchForm = $("#frmSearch--${pageName}");
+			searchForm.find("input[type='checkbox']").prop("checked", true);
+			searchForm.find("input[type='text']").val("");
+			searchForm.find("input[type='hidden']").val("");
+			searchForm.find("select").each(function() { $(this).find("option:eq(0)").prop("selected", true); });
+
+//			$('#schDeptCd--${pageName}').val("${currentUser.deptCode}");
+
+		}
+
+		/**************************************************************************
+		 * 최초 실행 함수
+		 **************************************************************************/
+		// 1. 이벤트 설정
+		$P.setEvent();
+
+		// 2. 초기 설정 및 업무 구분 변경
+		$P.fnReset();
+
+	});
+
+</script>