diff --git a/src/main/front/src/components/AgentConfigView.vue b/src/main/front/src/components/AgentConfigView.vue
index eac9fda..5bad772 100644
--- a/src/main/front/src/components/AgentConfigView.vue
+++ b/src/main/front/src/components/AgentConfigView.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { defineProps, ref, onMounted, onBeforeUnmount, reactive } from 'vue'
 import * as bootstrap from 'bootstrap'
-import * as XSLX from 'xlsx'
 
 const props = defineProps({
   modalId: String,
@@ -122,7 +121,12 @@ defineExpose({
           </ul>
 
           <div class="tab-content m-1" id="agentConfigTabContent">
-            <div class="tab-pane fade show active" id="general-tab-pane" role="tabpanel" aria-labelledby="general-tab" tabindex="0">
+            <div class="tab-pane fade show active tab-pane-scroll" id="general-tab-pane" role="tabpanel" aria-labelledby="general-tab" tabindex="0">
+              <div class="row mb-2">
+                <div class="col-md-12">
+                  <h5>Agent General</h5>
+                </div>
+              </div>
               <div class="row mb-2">
                 <div class="input-group">
                   <span class="input-group-text" id="agent-config-description-label">description</span>
@@ -138,22 +142,270 @@ defineExpose({
                 </div>
                 <div class="col-md-3">
                   <div class="input-group">
-                    <span class="input-group-text" id="agent-config-my-host-name-label">myHostName</span>
+                    <span class="input-group-text" id="agent-config-hecker-console-host-name-label">myHostName</span>
                     <input type="text" class="form-control" id="agent-config-my-host-name-input" aria-describedby="agent-config-my-host-name-label agent-config-my-host-name-input" v-model="agentConfig.myHostName" readonly />
                   </div>
                 </div>
                 <div class="col-md-3">
                   <div class="input-group">
                     <span class="input-group-text" id="agent-config-my-listen-port-label">myListenPort</span>
-                    <input type="text" class="form-control" id="agent-config-my-listen-port-input" aria-describedby="agent-config-my-listen-port-label agent-config-my-listen-port-input" v-model="agentConfig.myListenPort" readonly />
+                    <input type="number" class="form-control" id="agent-config-my-listen-port-input" aria-describedby="agent-config-my-listen-port-label agent-config-my-listen-port-input" v-model="agentConfig.myListenPort" readonly />
+                  </div>
+                </div>
+              </div>
+              <hr />
+              <div class="row m-1">
+                <div class="card p-0">
+                  <div class="card-header"><h5>knownAgentList</h5></div>
+                  <div class="card-body">
+                    <table class="table table-striped table-bordered align-middle">
+                      <thead>
+                        <tr>
+                          <th scope="col" class="text-center">hostId</th>
+                          <th scope="col" class="text-center">hostName</th>
+                          <th scope="col" class="text-center">listenPort</th>
+                          <th scope="col" class="text-center">routingHostIdList</th>
+                        </tr>
+                      </thead>
+                      <tbody class="table-group-divider">
+                        <tr v-if="agentConfig.knownAgentList.length > 0" v-for="knownAgent in agentConfig.knownAgentList" :key="knownAgent.hostId">
+                          <td scope="row">{{ knownAgent.hostId }}</td>
+                          <td>{{ knownAgent.hostName }}</td>
+                          <td>{{ knownAgent.listenPort }}</td>
+                          <td>{{ knownAgent.routingHostIdList }}</td>
+                        </tr>
+                        <tr v-else>
+                          <td scope="row" class="text-center" colspan="3">no agent.</td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              </div>
+              <hr />
+              <div class="row mb-2">
+                <div class="col-md-12">
+                  <h5>statusChecker</h5>
+                </div>
+              </div>
+              <div class="row mb-2">
+                <div class="col-md-3">
+                  <div class="input-group">
+                    <span class="input-group-text" id="agent-config-status-checker-cron">cron</span>
+                    <input type="text" class="form-control" id="agent-config-status-checker-cron-input" aria-describedby="agent-config-status-checker-cron-label agent-config-status-checker-cron-input" v-model="agentConfig.statusChecker.cron" />
+                  </div>
+                </div>
+                <div class="col-md-3">
+                  <div class="input-group">
+                    <span class="input-group-text" id="agent-config-status-checker-console-host-name-label">consoleHostName</span>
+                    <input type="text" class="form-control" id="agent-config-status-checker-console-host-name-input" aria-describedby="agent-config-status-checker-console-host-name-label agent-config-status-checker-console-host-name-input" v-model="agentConfig.statusChecker.consoleHostName" />
+                  </div>
+                </div>
+                <div class="col-md-3">
+                  <div class="input-group">
+                    <span class="input-group-text" id="agent-config-status-checker-console-listen-port-label">consoleListenPort</span>
+                    <input type="number" class="form-control" id="agent-config-status-checker-console-listen-port-input" aria-describedby="agent-config-status-checker-console-listen-port-label agent-config-status-checker-console-listen-port-input" v-model="agentConfig.statusChecker.consoleListenPort" />
+                  </div>
+                </div>
+                <div class="col-md-3">
+                  <div class="input-group">
+                    <span class="input-group-text" id="agent-config-status-checker-console-ssl-enabled-label">consoleSslEnabled</span>
+                    <div class="form-check form-switch form-switch-lg">
+                      <input class="form-check-input" type="checkbox" role="switch" id="agent-config-status-checker-console-ssl-enabled-input" v-model="agentConfig.statusChecker.consoleSslEnabled" />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <hr />
+              <!-- dataSource Configuration-->
+              <div class="row m-1">
+                <div class="card p-0">
+                  <div class="card-header"><h5>dataSourceConfig</h5></div>
+                  <div class="card-body">
+                    <table class="table table-striped table-bordered align-middle">
+                      <thead>
+                        <tr>
+                          <th scope="col" class="text-center">dataSourceId</th>
+                          <th scope="col" class="text-center">driverClassName</th>
+                          <th scope="col" class="text-center">url</th>
+                          <th scope="col" class="text-center">username</th>
+                          <th scope="col" class="text-center">password</th>
+                          <th scope="col" class="text-center">initialSize</th>
+                          <th scope="col" class="text-center">minIdle</th>
+                          <th scope="col" class="text-center">maxIdle</th>
+                          <th scope="col" class="text-center">maxTotal</th>
+                          <th scope="col" class="text-center">maximumRowForTransaction</th>
+                        </tr>
+                      </thead>
+                      <tbody class="table-group-divider">
+                        <tr v-if="agentConfig.dataSourceConfig.length > 0" v-for="dataSource in agentConfig.dataSourceConfig" :key="dataSource.dataSourceId">
+                          <td scope="row">{{ dataSource.dataSourceId }}</td>
+                          <td>{{ dataSource.driverClassName }}</td>
+                          <td>{{ dataSource.url }}</td>
+                          <td>{{ dataSource.username }}</td>
+                          <td>{{ dataSource.password }}</td>
+                          <td>{{ dataSource.initialSize }}</td>
+                          <td>{{ dataSource.minIdle }}</td>
+                          <td>{{ dataSource.maxIdle }}</td>
+                          <td>{{ dataSource.maxTotal }}</td>
+                          <td>{{ dataSource.maximumRowForTransaction }}</td>
+                        </tr>
+                        <tr v-else>
+                          <td scope="row" class="text-center" colspan="10">no dataSource.</td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              </div>
+              <hr />
+              <div class="row m-1">
+                <div class="card p-0">
+                  <div class="card-header"><h5>logging</h5></div>
+                  <div class="card-body">
+                    <div class="row mb-2">
+                      <div class="col-md-3">
+                        <div class="input-group">
+                          <span class="input-group-text" id="agent-config-logging-log-directory">logDirectory</span>
+                          <input type="text" class="form-control" id="agent-config-logging-log-directory-input" aria-describedby="agent-config-logging-log-directory-label agent-config-logging-log-directory-input" v-model="agentConfig.logging.logDirectory" />
+                        </div>
+                      </div>
+                      <div class="col-md-3">
+                        <div class="input-group">
+                          <span class="input-group-text" id="agent-config-logging-log-file-name">logFileName</span>
+                          <input type="text" class="form-control" id="agent-config-logging-log-file-name-input" aria-describedby="agent-config-logging-log-file-name-label agent-config-logging-log-file-name-input" v-model="agentConfig.logging.logFileName" />
+                        </div>
+                      </div>
+                      <div class="col-md-3">
+                        <div class="input-group">
+                          <span class="input-group-text" id="agent-config-logging-log-name">logName</span>
+                          <input type="text" class="form-control" id="agent-config-logging-log-name-input" aria-describedby="agent-config-logging-log-name-label agent-config-logging-log-name-input" v-model="agentConfig.logging.logName" />
+                        </div>
+                      </div>
+                    </div>
+                    <div class="row mb-2">
+                      <div class="col-md-3">
+                        <div class="input-group">
+                          <span class="input-group-text" id="agent-config-logging-max-history">maxHistory</span>
+                          <input type="number" class="form-control" id="agent-config-logging-max-history-input" aria-describedby="agent-config-logging-max-history-label agent-config-logging-max-history-input" v-model="agentConfig.logging.maxHistory" />
+                        </div>
+                      </div>
+                      <div class="col-md-3">
+                        <div class="input-group">
+                          <span class="input-group-text" id="agent-config-logging-log-pattern">logPattern</span>
+                          <input type="text" class="form-control" id="agent-config-logging-log-pattern-input" aria-describedby="agent-config-logging-log-pattern-label agent-config-logging-log-pattern-input" v-model="agentConfig.logging.logPattern" />
+                        </div>
+                      </div>
+                      <div class="col-md-3">
+                        <div class="input-group">
+                          <span class="input-group-text" id="agent-config-logging-root-log-level">rootLogLevel</span>
+                          <input type="text" class="form-control" id="agent-config-root-log-level-input" aria-describedby="agent-config-logging-root-log-level-label agent-config-logging-root-log-level-input" v-model="agentConfig.logging.rootLogLevel" />
+                        </div>
+                      </div>
+                    </div>
+                    <h6>logging packages</h6>
+                    <table class="table table-striped table-bordered align-middle" v-for="loggingPackages in agentConfig.logging.packages">
+                      <thead>
+                        <tr>
+                          <th>package</th>
+                          <th>level</th>
+                        </tr>
+                      </thead>
+                      <tbody class="table-group-divider">
+                        <tr v-for="(value, key) in loggingPackages">
+                          <td>{{ key }}</td>
+                          <td>{{ value }}</td>
+                        </tr>
+                      </tbody>
+                    </table>
                   </div>
                 </div>
               </div>
               <hr />
             </div>
 
-            <div class="tab-pane fade" id="dropbox-tab-pane" role="tabpanel" aria-labelledby="dropbox-tab" tabindex="0">dropbox</div>
-            <div class="tab-pane fade" id="postman-tab-pane" role="tabpanel" aria-labelledby="postman-tab" tabindex="0">postman</div>
+            <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>
+                </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>
+                    <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>
+                    <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>
+              </div>
+              <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>
+                    <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>
+                    <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>
+              </div>
+              <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>
+                    <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>
+                    <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>
+              </div>
+              <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">
+                      <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>
+                        </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>
+                        </tr>
+                        <tr v-else>
+                          <td scope="row" class="text-center" colspan="5">no dropBox.</td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              </div>
+              <hr />
+            </div>
+            <div class="tab-pane fade tab-pane-scroll" id="postman-tab-pane" role="tabpanel" aria-labelledby="postman-tab" tabindex="0">postman</div>
           </div>
         </div>
       </div>
@@ -180,6 +432,8 @@ defineExpose({
   flex: 1 1 auto;
   overflow: hidden; /* 여기서는 스크롤 안 하고 */
   padding: 0.5rem;
+  display: flex;
+  flex-direction: column;
 }
 
 /* 실제 스크롤이 일어나는 영역 */
@@ -216,4 +470,28 @@ defineExpose({
   /* 상·하 4px, 좌·우는 기존처럼 16px */
   padding: 0.5rem 1rem;
 }
+
+/* 큰 스위치용 커스텀 클래스 */
+.form-switch.form-switch-lg .form-check-input {
+  width: 3rem; /* 가로 길이 늘리기 */
+  height: 1.5rem; /* 세로 길이 늘리기 */
+}
+
+/* 너무 붙어 보이면 왼쪽 여백 조정 */
+.form-switch.form-switch-lg {
+  padding-left: 3.5rem;
+  padding-top: 0.2rem;
+}
+
+.tab-content {
+  flex: 1 1 auto;
+  min-height: 0; /* 이거 중요: 자식이 줄어들 수 있어야 스크롤 생김 */
+}
+
+/* 실제 스크롤이 생기는 곳: general 탭 pane */
+.tab-pane-scroll {
+  height: 100%;
+  overflow-y: auto; /* 세로 스크롤만 */
+  overflow-x: hidden; /* 가로 스크롤 숨김 */
+}
 </style>
diff --git a/src/main/front/src/views/AgentManageView.vue b/src/main/front/src/views/AgentManageView.vue
index 3279908..3dc8bf6 100644
--- a/src/main/front/src/views/AgentManageView.vue
+++ b/src/main/front/src/views/AgentManageView.vue
@@ -1,7 +1,7 @@
 <script setup>
 import '@/assets/main.css'
 import { useApiClient } from '@/components/apiClient'
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, reactive } from 'vue'
 import AgentConfigView from '@/components/AgentConfigView.vue'
 
 const apiClient = useApiClient()
@@ -12,11 +12,12 @@ async function getAgentInfoDtoList() {
 }
 
 let dfxAgentInfoDtoList = ref([])
-const agentConfigDto = ref({})
+const agentConfigDto = reactive({})
 const agentConfigViewModal = ref(null)
 
 function openAgentConfigView(dfxAgentInfoDto) {
-  agentConfigDto.value = JSON.parse(dfxAgentInfoDto.settingsData)
+  const dto = JSON.parse(dfxAgentInfoDto.settingsData)
+  Object.assign(agentConfigDto, dto)
   agentConfigViewModal.value.open()
 }
 
@@ -65,8 +66,6 @@ onMounted(async () => {
     </div>
   </main>
   <agent-config-view modal-id="agentConfigModalView" :dto="agentConfigDto" ref="agentConfigViewModal"></agent-config-view>
-  <!--
-  -->
 </template>
 
 <style></style>