From 9911a401fda96e83dc7fabff42de64ee7e9a7107 Mon Sep 17 00:00:00 2001
From: "icksishu@gmail.com" <icksishu@gmail.com>
Date: Wed, 10 Dec 2025 15:41:03 +0900
Subject: [PATCH] =?UTF-8?q?=EC=97=90=EC=9D=B4=EC=A0=84=ED=8A=B8=20?=
 =?UTF-8?q?=EC=84=A4=EC=A0=95=20=EC=9D=BC=EB=B0=98=20=EB=B6=80=EB=B6=84=20?=
 =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EC=99=84=EB=A3=8C,=20DropBox=20=EB=A1=9C?=
 =?UTF-8?q?=EC=A7=81=20=EC=99=84=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../front/src/components/AgentConfigView.vue  | 178 +++++++++++-------
 1 file changed, 108 insertions(+), 70 deletions(-)

diff --git a/src/main/front/src/components/AgentConfigView.vue b/src/main/front/src/components/AgentConfigView.vue
index 82792bc..a86251c 100644
--- a/src/main/front/src/components/AgentConfigView.vue
+++ b/src/main/front/src/components/AgentConfigView.vue
@@ -54,8 +54,13 @@ const agentConfigDeleted = {
   logging: {
     packages: [],
   },
+  dropBoxConfig: {
+    dropBoxList: [],
+  },
 }
 
+window.debugData = agentConfig
+
 onMounted(() => {
   if (modalEl.value) {
     // 인스턴스가 있으면 재사용, 없으면 생성
@@ -133,7 +138,7 @@ function deleteKnownAgent() {
     if (agentConfig.knownAgentList[i].selected) {
       let splicedList = agentConfig.knownAgentList.splice(i, 1)
       if (Object.keys(splicedList[0]).indexOf('added') == -1) {
-        agentConfigDeleted.knownAgentList.push(splicedList)
+        agentConfigDeleted.knownAgentList.push(splicedList[0])
       }
     }
   }
@@ -163,7 +168,7 @@ function deleteDataSource() {
     if (agentConfig.dataSourceConfig[i].selected) {
       let splicedList = agentConfig.dataSourceConfig.splice(i, 1)
       if (Object.keys(splicedList[0]).indexOf('added') == -1) {
-        agentConfigDeleted.dataSourceConfig.push(splicedList)
+        agentConfigDeleted.dataSourceConfig.push(splicedList[0])
       }
     }
   }
@@ -174,14 +179,15 @@ function addLoggingPackage() {
 }
 
 function deleteLoggingPackage() {
-  for (let i = agentConfig.dataSourceConfig.length - 1; i >= 0; i--) {
-    if (agentConfig.dataSourceConfig[i].selected) {
-      let splicedList = agentConfig.dataSourceConfig.splice(i, 1)
-      if (Object.keys(splicedList[0]).indexOf('added') == -1) {
-        agentConfigDeleted.dataSourceConfig.push(splicedList)
-      }
+  const checkboxList = document.getElementsByClassName('agent-config-logging-packages-checkbox')
+  for (let i = checkboxList.length - 1; i >= 0; i--) {
+    if (checkboxList[i].checked) {
+      agentConfig.logging.packages.splice(i, 1)
     }
   }
+  for (let i = checkboxList.length - 1; i >= 0; i--) {
+    checkboxList[i].checked = false
+  }
 }
 
 function changeLoggingPackageName(loggingPackageObject, loggingPackageName, newLoggingPackageName) {
@@ -196,6 +202,31 @@ function changeLoggingPackageName(loggingPackageObject, loggingPackageName, newL
   delete loggingPackageObject[loggingPackageName]
 }
 
+// dropBox 한 줄 추가
+function addDropBox() {
+  const dropBox = {
+    dropBoxId: '',
+    taskType: 'RECEIVE_DB_TO_DB_SAVE',
+    dataSourceId: '',
+    sqlId: '',
+    description: '',
+    added: true,
+  }
+  agentConfig.dropBoxConfig.dropBoxList.push(dropBox)
+}
+
+// 선택된 dropBox 삭제
+function deleteDropBox() {
+  for (let i = agentConfig.dropBoxConfig.dropBoxList.length - 1; i >= 0; i--) {
+    if (agentConfig.dropBoxConfig.dropBoxList[i].selected) {
+      let splicedList = agentConfig.dropBoxConfig.dropBoxList.splice(i, 1)
+      if (Object.keys(splicedList[0]).indexOf('added') == -1) {
+        agentConfigDeleted.dropBoxConfig.dropBoxList.push(splicedList[0])
+      }
+    }
+  }
+}
+
 defineExpose({
   open,
   close,
@@ -445,7 +476,7 @@ defineExpose({
                       </thead>
                       <tbody class="table-group-divider">
                         <tr v-if="agentConfig.logging.packages.length > 0" v-for="(loggingPackage, rowIndex) in agentConfig.logging.packages">
-                          <td scope="row" class="text-center"><input type="checkbox" class="form-check-input" /></td>
+                          <td scope="row" class="text-center"><input type="checkbox" class="form-check-input agent-config-logging-packages-checkbox" /></td>
                           <template v-for="(level, packageName) in loggingPackage" :key="packageName">
                             <td>
                               <input type="text" class="form-control" :value="packageName" @change="changeLoggingPackageName(loggingPackage, packageName, $event.target.value)" />
@@ -476,19 +507,19 @@ defineExpose({
             <div class="tab-pane fade tab-pane-scroll" id="dropbox-tab-pane" role="tabpanel" aria-labelledby="dropbox-tab" tabindex="0">
               <div class="row mb-2">
                 <div class="col-md-12">
-                  <h5>DropBox General</h5>
+                  <h5>드롭박스 일반(DropBox General)</h5>
                 </div>
               </div>
               <div class="row mb-2">
                 <div class="col-md-5">
                   <div class="input-group">
-                    <span class="input-group-text" id="agent-config-received-message-storage-root-label">receivedMessageStorageRoot</span>
+                    <span class="input-group-text" id="agent-config-received-message-storage-root-label">수신 메시지 저장 경로(receivedMessageStorageRoot)</span>
                     <input type="text" class="form-control" id="agent-config-received-message-storage-root-input" aria-describedby="agent-config-received-message-storage-root-label agent-config-received-message-storage-root-input" v-model="agentConfig.dropBoxConfig.receivedMessageStorageRoot" />
                   </div>
                 </div>
                 <div class="col-md-5">
                   <div class="input-group">
-                    <span class="input-group-text" id="agent-config-processed-message-storage-root-label">processedMessageStorageRoot</span>
+                    <span class="input-group-text" id="agent-config-processed-message-storage-root-label">처리 메시지 저장 경로(processedMessageStorageRoot)</span>
                     <input type="text" class="form-control" id="agent-config-processed-message-storage-root-input" aria-describedby="agent-config-processed-message-storage-root-label agent-config-processed-message-storage-root-input" v-model="agentConfig.dropBoxConfig.processedMessageStorageRoot" />
                   </div>
                 </div>
@@ -496,13 +527,13 @@ defineExpose({
               <div class="row mb-2">
                 <div class="col-md-5">
                   <div class="input-group">
-                    <span class="input-group-text" id="agent-config-failure-message-storage-root-label">failureMessageStorageRoot</span>
+                    <span class="input-group-text" id="agent-config-failure-message-storage-root-label">실패 메시지 저장 경로(failureMessageStorageRoot)</span>
                     <input type="text" class="form-control" id="agent-config-failure-message-storage-root-input" aria-describedby="agent-config-failure-message-storage-root-label agent-config-failure-message-storage-root-input" v-model="agentConfig.dropBoxConfig.failureMessageStorageRoot" />
                   </div>
                 </div>
                 <div class="col-md-5">
                   <div class="input-group">
-                    <span class="input-group-text" id="agent-config-manual-message-storage-root-label">manualMessageStorageRoot</span>
+                    <span class="input-group-text" id="agent-config-manual-message-storage-root-label">수동 메시지 저장 경로(manualMessageStorageRoot)</span>
                     <input type="text" class="form-control" id="agent-config-manual-message-storage-root-input" aria-describedby="agent-config-manual-message-storage-root-label agent-config-manual-message-storage-root-input" v-model="agentConfig.dropBoxConfig.manualMessageStorageRoot" />
                   </div>
                 </div>
@@ -510,13 +541,13 @@ defineExpose({
               <div class="row mb-2">
                 <div class="col-md-5">
                   <div class="input-group">
-                    <span class="input-group-text" id="agent-config-drop-box-thread-pool-size-label">threadPoolSize</span>
+                    <span class="input-group-text" id="agent-config-drop-box-thread-pool-size-label">드롭박스 처리 쓰레드풀 크기(threadPoolSize)</span>
                     <input type="number" class="form-control" id="agent-config-drop-box-thread-pool-size-input" aria-describedby="agent-config-drop-box-thread-pool-size-label agent-config-drop-box-thread-pool-size-input" v-model="agentConfig.dropBoxConfig.threadPoolSize" />
                   </div>
                 </div>
                 <div class="col-md-5">
                   <div class="input-group">
-                    <span class="input-group-text" id="agent-config-drop-box-retent-days-of-processed-message-label">retentionDaysOfProcessedMessage</span>
+                    <span class="input-group-text" id="agent-config-drop-box-retent-days-of-processed-message-label">메시지 파일 유지 기간(retentionDaysOfProcessedMessage)</span>
                     <input type="number" class="form-control" id="agent-config-drop-box-retent-days-of-processed-message-input" aria-describedby="agent-config-drop-box-retent-days-of-processed-message-label agent-config-drop-box-retent-days-of-processed-message-input" v-model="agentConfig.dropBoxConfig.retentionDaysOfProcessedMessage" />
                   </div>
                 </div>
@@ -524,28 +555,36 @@ defineExpose({
               <hr />
               <div class="row m-1">
                 <div class="card p-0">
-                  <div class="card-header"><h5>dropBoxList</h5></div>
-                  <div class="card-body">
-                    <table class="table table-striped table-bordered align-middle">
+                  <div class="card-header d-flex">
+                    <h5 class="mb-0">드롭박스 목록 설정(dropBoxList)</h5>
+                    <div class="ms-auto">
+                      <button type="button" class="btn btn-sm btn-success" @click.prevent="addDropBox">추가</button>
+                      <button type="button" class="btn btn-sm btn-danger ms-2" @click.prevent="deleteDropBox">삭제</button>
+                    </div>
+                  </div>
+                  <div class="card-body table-scroll">
+                    <table class="table table-striped table-bordered align-middle table-sticky">
                       <thead>
                         <tr>
-                          <th scope="col" class="text-center">dropBoxId</th>
-                          <th scope="col" class="text-center">taskType</th>
-                          <th scope="col" class="text-center">dataSourceId</th>
-                          <th scope="col" class="text-center">sqlId</th>
-                          <th scope="col" class="text-center">description</th>
+                          <th scope="col" class="text-center">선택</th>
+                          <th scope="col" class="text-center">드롭박스ID (dropBoxId)</th>
+                          <th scope="col" class="text-center">동작 방식 (taskType)</th>
+                          <th scope="col" class="text-center">데이터소스ID (dataSourceId)</th>
+                          <th scope="col" class="text-center">SQL ID(sqlId)</th>
+                          <th scope="col" class="text-center">설명 (description)</th>
                         </tr>
                       </thead>
                       <tbody class="table-group-divider">
                         <tr v-if="agentConfig.dropBoxConfig.dropBoxList.length > 0" v-for="dropBox in agentConfig.dropBoxConfig.dropBoxList" :key="dropBox.dropBoxId">
-                          <td scope="row">{{ dropBox.dropBoxId }}</td>
-                          <td>{{ dropBox.taskType }}</td>
-                          <td>{{ dropBox.dataSourceId }}</td>
-                          <td>{{ dropBox.sqlId }}</td>
-                          <td>{{ dropBox.description }}</td>
+                          <td scope="row" class="text-center"><input type="checkbox" class="form-check-input" v-model="dropBox.selected" /></td>
+                          <td><input type="text" class="form-control" v-model="dropBox.dropBoxId" /></td>
+                          <td><input type="text" class="form-control" v-model="dropBox.taskType" /></td>
+                          <td><input type="text" class="form-control" v-model="dropBox.dataSourceId" /></td>
+                          <td><input type="text" class="form-control" v-model="dropBox.sqlId" /></td>
+                          <td><input type="text" class="form-control" v-model="dropBox.description" /></td>
                         </tr>
                         <tr v-else>
-                          <td scope="row" class="text-center" colspan="5">no dropBox.</td>
+                          <td scope="row" class="text-center" colspan="6">no dropBox.</td>
                         </tr>
                       </tbody>
                     </table>
@@ -572,8 +611,8 @@ defineExpose({
               <div class="row m-1">
                 <div class="card p-0">
                   <div class="card-header"><h5>postmanList</h5></div>
-                  <div class="card-body data-table-wrapper">
-                    <table class="table table-striped table-bordered align-middle data-table">
+                  <div class="card-body table-scroll">
+                    <table class="table table-striped table-bordered align-middle table-sticky">
                       <thead>
                         <tr>
                           <th scope="col" class="text-center" rowspan="2">postmanId</th>
@@ -627,8 +666,8 @@ defineExpose({
 <style scoped>
 /* 모달이 화면을 거의 꽉 채우게 */
 .data-modal-dialog {
-  max-width: calc(100% - 4vh); /* 좌우 95% */
-  margin: 2vh auto; /* 위아래 여백 조금 */
+  max-width: calc(100% - 4vh);
+  margin: 2vh auto;
 }
 
 /* 모달 전체 높이를 화면의 95% 정도로 */
@@ -641,54 +680,26 @@ defineExpose({
 /* 헤더/푸터 빼고 나머지 영역을 테이블 영역으로 */
 .data-modal-body {
   flex: 1 1 auto;
-  overflow: hidden; /* 여기서는 스크롤 안 하고 */
+  overflow: hidden;
   padding: 0.5rem;
   display: flex;
   flex-direction: column;
 }
 
-/* 실제 스크롤이 일어나는 영역 */
-.data-table-wrapper {
-  height: 100%;
-  overflow: auto; /* 세로/가로 스크롤 모두 */
-}
-
-/* 컬럼이 많을 때 한 줄에 계속 붙게(가로 스크롤) */
-.data-table {
-  white-space: nowrap;
-  border-collapse: separate;
-  border-spacing: 0;
-}
-
-/* 헤더 전체를 sticky 처리 */
-.data-table thead {
-  position: sticky;
-  top: 0;
-  z-index: 2;
-}
-
-/* 헤더 배경/글자 색 지정 */
-.data-table thead th {
-  background-color: #343a40;
-  color: #fff;
-}
-
 /* 모달 header 패딩 조정 */
 .modal-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  /* 상·하 4px, 좌·우는 기존처럼 16px */
   padding: 0.5rem 1rem;
 }
 
 /* 큰 스위치용 커스텀 클래스 */
 .form-switch.form-switch-lg .form-check-input {
-  width: 3rem; /* 가로 길이 늘리기 */
-  height: 1.5rem; /* 세로 길이 늘리기 */
+  width: 3rem;
+  height: 1.5rem;
 }
 
-/* 너무 붙어 보이면 왼쪽 여백 조정 */
 .form-switch.form-switch-lg {
   padding-left: 3.5rem;
   padding-top: 0.2rem;
@@ -696,13 +707,40 @@ defineExpose({
 
 .tab-content {
   flex: 1 1 auto;
-  min-height: 0; /* 이거 중요: 자식이 줄어들 수 있어야 스크롤 생김 */
+  min-height: 0;
 }
 
-/* 실제 스크롤이 생기는 곳: general 탭 pane */
 .tab-pane-scroll {
-  height: 100%;
-  overflow-y: auto; /* 세로 스크롤만 */
-  overflow-x: hidden; /* 가로 스크롤 숨김 */
+  height: 100%; /* tab-content 높이에 맞추기 */
+  overflow-y: auto; /* 세로 스크롤 */
+  overflow-x: hidden; /* 가로 스크롤은 숨기기 */
+}
+
+/* 카드 안에서만 스크롤되는 테이블 영역 */
+.table-scroll {
+  max-height: 50vh; /* 필요에 따라 조절 */
+  overflow: auto;
+  position: relative; /* sticky 기준 컨테이너 */
+  padding-top: 0;
+}
+
+/* sticky header를 쓰는 테이블 공용 스타일 */
+.table-sticky {
+  white-space: nowrap;
+  border-collapse: separate;
+  border-spacing: 0;
+}
+
+/* thead 전체를 sticky로 고정 */
+.table-sticky thead {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+
+/* 헤더 셀 스타일 */
+.table-sticky thead th {
+  background-color: #343a40; /* 덮어씌우는 느낌으로 진하게 */
+  color: #fff;
 }
 </style>