From a7975cc2e0be6fe7ffe4f735eb7fb2907752a599 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9C=A0=EC=A7=80=EC=9D=B8?= <jiyoo@dbnt.co.kr>
Date: Thu, 13 Nov 2025 16:09:17 +0900
Subject: [PATCH] =?UTF-8?q?API=20=EC=8B=A0=EC=B2=AD=EA=B4=80=EB=A6=AC=20?=
 =?UTF-8?q?=EC=8A=B9=EC=9D=B8=EC=83=81=ED=83=9C=20=EB=B3=80=EA=B2=BD?=
 =?UTF-8?q?=EC=B2=98=EB=A6=AC=20-=20=EA=B0=9C=EB=B3=84=EC=B2=98=EB=A6=AC,?=
 =?UTF-8?q?=20=EA=B8=B0=EA=B4=80=EB=B3=84=20=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ApiKeyManagementController.java           |  11 +-
 .../mappers/admins/mgmt/Mgmt_Api_Key_SQL.xml  |  15 +-
 .../mgmtApi/api-request-statistics-index.jsp  |   1 -
 .../views/admins/mgmtApi/mgmt-api-key.jsp     | 140 ++++++++++++++++--
 .../views/admins/mgmtApi/mgmt-api-outdata.jsp |   2 -
 5 files changed, 148 insertions(+), 21 deletions(-)

diff --git a/src/main/java/geoinfo/admins/apiManagement/ApiKeyManagementController.java b/src/main/java/geoinfo/admins/apiManagement/ApiKeyManagementController.java
index c77ca86..ffaa6e7 100644
--- a/src/main/java/geoinfo/admins/apiManagement/ApiKeyManagementController.java
+++ b/src/main/java/geoinfo/admins/apiManagement/ApiKeyManagementController.java
@@ -69,7 +69,6 @@ public class ApiKeyManagementController {
 		
 		return result;
 	}
-	
 
 	/**
 	 * API 관리 > API신청 승인상태 변경
@@ -82,12 +81,16 @@ public class ApiKeyManagementController {
 	 */
 	@ResponseBody
 	@RequestMapping(value = "/admins/mgmtApiKey/approve.do", method = RequestMethod.POST)
-	public HashMap<String, Object> modMgmtApiKeyApprove(@RequestParam(value="apiSeq") int apiSeq, ModelMap model, HttpServletResponse response, HttpServletRequest request) throws Exception {
+	public HashMap<String, Object> modMgmtApiKeyApprove(
+			@RequestParam(value="seqArr", required=false) List<Integer> seqArr,
+	        @RequestParam(value="approveYn", required=false) String approveYn, 
+	        @RequestParam(value="otype", required=false) String otype, ModelMap model, HttpServletResponse response, HttpServletRequest request) throws Exception {
 		HashMap<String, Object> result = new HashMap<String, Object>();
 
 	    HashMap<String,Object> params = new HashMap<>();
-	    params.put("apiSeq", apiSeq);
-	    params.put("approveYn", "Y");
+	    params.put("seqArr", seqArr);
+	    params.put("approveYn", approveYn);
+	    params.put("otype", otype); 
 
 		apiKeyManagementService.updateWebApiKeyApprove(params);
 		
diff --git a/src/main/resources/geoinfo/sqlmap/mappers/admins/mgmt/Mgmt_Api_Key_SQL.xml b/src/main/resources/geoinfo/sqlmap/mappers/admins/mgmt/Mgmt_Api_Key_SQL.xml
index 054dc20..d2dd8ac 100644
--- a/src/main/resources/geoinfo/sqlmap/mappers/admins/mgmt/Mgmt_Api_Key_SQL.xml
+++ b/src/main/resources/geoinfo/sqlmap/mappers/admins/mgmt/Mgmt_Api_Key_SQL.xml
@@ -34,7 +34,20 @@
 		<if test="approveYn != null and approveYn !=''">
 			APPROVE_YN 	= #{approveYn}
 		</if>
-		WHERE API_SEQ IN (#{apiSeq})
+	    <where>
+	        <!-- seqArr 조건 -->
+	        <if test="seqArr != null and seqArr.size() > 0">
+	            API_SEQ IN
+	            <foreach item="item" index="index" collection="seqArr" open="(" separator=", " close=")">
+	                #{item}
+	            </foreach>
+	        </if>
+	
+	        <!-- otype 조건 -->
+	        <if test="otype != null and otype != ''">
+	            AND USER_TYPE = #{otype}
+	        </if>
+	    </where>
 	</update>
 	
 	<!-- 사용자 API 신청 삭제하기 -->
diff --git a/src/main/webapp/WEB-INF/views/admins/mgmtApi/api-request-statistics-index.jsp b/src/main/webapp/WEB-INF/views/admins/mgmtApi/api-request-statistics-index.jsp
index 08562dd..964aa4a 100644
--- a/src/main/webapp/WEB-INF/views/admins/mgmtApi/api-request-statistics-index.jsp
+++ b/src/main/webapp/WEB-INF/views/admins/mgmtApi/api-request-statistics-index.jsp
@@ -13,7 +13,6 @@
     
     <!-- MUI + Chart.js + jQuery -->
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-<!--     <link href="https://cdn.jsdelivr.net/npm/@mui/material@5.15.14/dist/material.min.css" rel="stylesheet"> -->
     <style>
         body { font-family: 'Pretendard', 'Roboto', sans-serif; background-color: #f5f6fa; color: #333; margin: 0; padding: 20px; }
 
diff --git a/src/main/webapp/WEB-INF/views/admins/mgmtApi/mgmt-api-key.jsp b/src/main/webapp/WEB-INF/views/admins/mgmtApi/mgmt-api-key.jsp
index 55ac374..ed4d0b8 100644
--- a/src/main/webapp/WEB-INF/views/admins/mgmtApi/mgmt-api-key.jsp
+++ b/src/main/webapp/WEB-INF/views/admins/mgmtApi/mgmt-api-key.jsp
@@ -8,7 +8,6 @@
 	<head>
 		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <!-- MUI + Chart.js + jQuery -->
-    <link href="https://cdn.jsdelivr.net/npm/@mui/material@5.15.14/dist/material.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
 
@@ -16,8 +15,83 @@
         body { font-family: 'Pretendard', 'Roboto', sans-serif; background-color: #f5f6fa; margin: 0; padding: 20px; }
 
 		.text-center {text-align: center}
+		
+		/* 승인 토글스위치 */
+		/* 스위치들을 한 줄에 나란히 */
+		.switch-group {
+		    display: flex;
+		    align-items: center;
+		    gap: 15px; /* 스위치 간 간격 */
+		}
+		.molit-g-switch,.mois-g-switch, .mof-g-switch {
+		    display: flex;
+		    align-items: center;
+		    gap: 5px;
+		    margin-right: 10px;
+		
+		}  
+		/* 스위치 디자인 */
+		.mui-switch {
+		    position: relative;
+		    flex-shrink: 0;        /* 스위치 크기 줄어들지 않게 */
+		    display: inline-block;
+		    width: 48px;
+		    height: 26px;
+		}
+		
+		.mui-switch input {
+		    opacity: 0;
+		    width: 0;
+		    height: 0;
+		}
+		
+		.mui-slider {
+		    position: absolute;
+		    cursor: pointer;
+		    top: 0;
+		    left: 0;
+		    right: 0;
+		    bottom: 0;
+		    background-color: #ccc;
+		    transition: 0.4s;
+		    border-radius: 34px;
+		    display: flex;
+		    align-items: center;
+		    justify-content: ${''}; /* 가운데 맞춤 */
+		}
+		
+		.mui-slider:before {
+		    position: absolute;
+		    content: "OFF";
+		    color: #fff;
+		    font-size: 10px;
+		    height: 20px;
+		    width: 20px;
+		    left: 3px;
+		    bottom: 3px;
+		    background-color: #999;
+		    display: flex;
+		    justify-content: center;
+		    align-items: center;
+		    border-radius: 50%;
+		    transition: 0.4s;
+		}
+		
+		input:checked + .mui-slider {
+		    background-color: #4A90E2;
+		}
+		
+		input:checked + .mui-slider:before {
+		    transform: translateX(22px);
+		    content: "ON";
+		    background-color: #1A73E8;
+		}
+		
         /* API 신청 내역 테이블 */
         .table-container {
+    		display: flex;
+		    align-items: center;
+		    justify-content: space-between; /* 제목 왼쪽, 스위치 오른쪽 */
             margin-top: 25px; background: #fff; border-radius: 12px; padding: 20px;
             box-shadow: 0 2px 8px rgba(0,0,0,0.05);
         }
@@ -56,6 +130,29 @@
     <!-- API 신청 테이블 -->
     <div class="table-container home-trainning">
         <h3>API 신청 내역</h3>
+
+		<div class="switch-group">
+	        <div class="molit-g-switch">국토교통부
+				<label class="mui-switch">
+					<input type="checkbox" class="globalSwitch" data-otype="국토교통부" onchange="toggleApproveKey(this)" checked>
+					<span class="mui-slider"></span>
+				</label>
+	        </div>
+	        <div class="mois-g-switch">행정안전부
+				<label class="mui-switch">
+					<input type="checkbox" class="globalSwitch" data-otype="행정안전부" onchange="toggleApproveKey(this)" checked>
+					<span class="mui-slider"></span>
+				</label>
+	        </div>
+	        <div class="mof-g-switch">해양수산부
+				<label class="mui-switch">
+					<input type="checkbox" class="globalSwitch" data-otype="해양수산부" onchange="toggleApproveKey(this)" checked>
+					<span class="mui-slider"></span>
+				</label>
+	        </div>
+		</div>
+    </div>
+   	<div class="table-container home-trainning">
         <table class="Table_Main course-list-table">
 			<colgroup>
 				<col style="width: 3%">
@@ -121,13 +218,9 @@
 			});
 	    }
         function drawApiKeyList(item) {
-            // 승인 상태에 따른 표시
-            let approveHtml = "";
-            if (item.approveYn == "Y") {
-                approveHtml = "승인됨";
-            } else {
-                approveHtml = `<button class="approve-btn" data-id="\${item.apiSeq}" onclick="approveKey(this);">승인</button>`;
-            }
+
+	        // approveYn 이 "Y"이면 체크 상태, 아니면 체크 해제
+	        const isChecked = item.approveYn === "Y" ? "checked" : "";
 	        // HTML 문자열 생성
 			const html = `
 				<tr data-idx="\${item.apiSeq}">
@@ -137,20 +230,41 @@
 					<td>\${item.apiKey}</td>
 					<td class="text-center">\${item.startDt}</td>
 					<td class="text-center">\${item.endDt}</td>
-		            <td class="text-center">\${approveHtml}</td>
+		            <td class="text-center approve-switch">
+				        <label class="mui-switch">
+			            <input type="checkbox" class="key-toggle" data-seq="\${item.apiSeq}" onchange="toggleApproveKey(this)" \${isChecked}>
+			            <span class="mui-slider"></span>
+			        </label></td>
 		            <td class="text-center"><button class="approve-btn" data-id="\${item.apiSeq}" onclick="revokeKey(this);">삭제</button></td>
 	            </tr>
 			`;
 			return html;
         }
-        
+
         // 승인처리하기
-        function approveKey(e) {
-        	let apiSeq = $(e).data("id")
+        function toggleApproveKey(ele) {
+        	let apiSeq = $(ele).data("seq")
+        	let seqArr = [];
+        	let otype = !$(ele).data("otype") ? '' : $(ele).data("otype");	// 일괄변경 스위치 클릭한 경우
+        	let approve = $(ele).is(":checked") ? "Y" : "N";
+        	
+        	if (otype == '') {
+           		seqArr.push($(ele).data("seq"));
+        	} 
+        			
+        			
+//            	if (btnType == 'globalSwitch') {
+//            		$('.approve-switch').each(function(i, el) {
+//            		    const idx = $(el).data('seq');
+//            		 seqArr.push(idx);
+//            		});
+//            	} else {
+//            		seqArr.push($(ele).data("seq"));
+//            	}
     		$.ajax({
     			type : "POST",
     			url	: "/admins/mgmtApiKey/approve.do" ,
-    			data : {apiSeq:apiSeq},
+    			data : {seqArr:seqArr, approveYn: approve, otype: otype},
     		    traditional: true,
     			dataType :"json",
     			success : function(res){	// res.code, res.msg, res.data
diff --git a/src/main/webapp/WEB-INF/views/admins/mgmtApi/mgmt-api-outdata.jsp b/src/main/webapp/WEB-INF/views/admins/mgmtApi/mgmt-api-outdata.jsp
index a46d96f..1db5e79 100644
--- a/src/main/webapp/WEB-INF/views/admins/mgmtApi/mgmt-api-outdata.jsp
+++ b/src/main/webapp/WEB-INF/views/admins/mgmtApi/mgmt-api-outdata.jsp
@@ -14,7 +14,6 @@
     
     <!-- MUI + Chart.js + jQuery -->
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-    <link href="https://cdn.jsdelivr.net/npm/@mui/material@5.15.14/dist/material.min.css" rel="stylesheet">
     <style>
         body { font-family: 'Pretendard', 'Roboto', sans-serif; background-color: #f5f6fa; margin: 0; padding: 20px; }
 
@@ -479,7 +478,6 @@
 		// API 호출 로그 목록 조회
         function getMgmtApiChart(){
 			var chartDate = $('#chartDate').val();
-			console.log($('#chartDate').val())
     		$.ajax({
     			type : "POST",
     			url	: "/admins/mgmtApi/charts.do" ,