From c02385d996bc3defcc234856178ee222dfe34d13 Mon Sep 17 00:00:00 2001
From: "icksishu@gmail.com" <icksishu@gmail.com>
Date: Tue, 2 Dec 2025 16:38:06 +0900
Subject: [PATCH] =?UTF-8?q?round=20=EC=84=A4=EC=A0=95=20=EC=A0=84=EC=B2=B4?=
 =?UTF-8?q?=EC=A0=81=EC=9C=BC=EB=A1=9C=200=EC=9C=BC=EB=A1=9C=20=EC=84=A4?=
 =?UTF-8?q?=EC=A0=95=20=EC=A0=95=EB=A0=AC,=20=ED=81=AC=EA=B8=B0=20?=
 =?UTF-8?q?=EB=93=B1=20=ED=99=94=EB=A9=B4=20=EC=A1=B0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main/front/src/assets/main.css            | 21 +++++++++++
 .../front/src/components/MessageDataView.vue  | 35 +++++++++++++------
 src/main/front/src/components/Pagination.vue  |  2 +-
 src/main/front/src/main.js                    |  1 +
 src/main/front/src/views/AgentManageView.vue  |  8 ++---
 5 files changed, 52 insertions(+), 15 deletions(-)

diff --git a/src/main/front/src/assets/main.css b/src/main/front/src/assets/main.css
index 091a396..270a480 100644
--- a/src/main/front/src/assets/main.css
+++ b/src/main/front/src/assets/main.css
@@ -22,3 +22,24 @@
   background-color: var(--bs-tertiary-bg);
   min-height: calc(100vh - 6rem);
 }
+
+:root {
+  /* 기본 radius */
+  --bs-border-radius: 0;
+  --bs-border-radius-sm: 0;
+  --bs-border-radius-lg: 0;
+  --bs-border-radius-xl: 0;
+  --bs-border-radius-xxl: 0;
+  --bs-border-radius-pill: 0;
+
+  /* 컴포넌트별 radius */
+  --bs-btn-border-radius: 0;
+  --bs-btn-border-radius-sm: 0;
+  --bs-btn-border-radius-lg: 0;
+
+  --bs-card-border-radius: 0;
+  --bs-modal-border-radius: 0;
+  --bs-dropdown-border-radius: 0;
+  --bs-badge-border-radius: 0;
+  --bs-input-border-radius: 0;
+}
diff --git a/src/main/front/src/components/MessageDataView.vue b/src/main/front/src/components/MessageDataView.vue
index b94166f..72e3a21 100644
--- a/src/main/front/src/components/MessageDataView.vue
+++ b/src/main/front/src/components/MessageDataView.vue
@@ -77,12 +77,12 @@ defineExpose({
   <div class="modal fade" :id="props.modalId" ref="modalEl" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" :aria-labelledby="props.modalId + 'Label'" aria-hidden="true">
     <div class="modal-dialog modal-xl data-modal-dialog">
       <div class="modal-content data-modal-content">
-        <div class="modal-header">
-          <h1 class="modal-title fs-5" :id="props.modalId + 'Label'">
-            {{ props.dto.senderAgentId }} <i class="bi bi-arrow-right"></i> {{ props.dto.recipientAgentId }}
-            <button type="button" class="btn btn-success" @click="excelExport">EXCEL</button>
-          </h1>
-          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        <div class="modal-header justify-content-between">
+          <h1 class="modal-title fs-5 pt-0" :id="props.modalId + 'Label'">{{ props.dto.senderAgentId }} <i class="bi bi-arrow-right"></i> {{ props.dto.recipientAgentId }}</h1>
+          <div class="d-flex align-items-center gap-2">
+            <button type="button" class="btn btn-success btn-sm" @click="excelExport">EXCEL</button>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          </div>
         </div>
         <div class="modal-body data-modal-body">
           <div class="data-table-wrapper table-responsive">
@@ -139,14 +139,29 @@ defineExpose({
 /* 컬럼이 많을 때 한 줄에 계속 붙게(가로 스크롤) */
 .data-table {
   white-space: nowrap;
+  border-collapse: separate;
+  border-spacing: 0;
 }
 
-/* 헤더는 스크롤해도 상단에 고정하고 싶으면(선택 사항) */
-.data-table thead th {
+/* 헤더 전체를 sticky 처리 */
+.data-table thead {
   position: sticky;
   top: 0;
-  z-index: 1;
-  background-color: #343a40; /* bootstrap dark 비슷하게 */
+  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;
+}
 </style>
diff --git a/src/main/front/src/components/Pagination.vue b/src/main/front/src/components/Pagination.vue
index 47418ed..4a6cd70 100644
--- a/src/main/front/src/components/Pagination.vue
+++ b/src/main/front/src/components/Pagination.vue
@@ -30,7 +30,7 @@ async function retrieveNextDataList() {
 
 <template>
   <nav aria-label="Page navigation">
-    <ul class="pagination">
+    <ul class="pagination justify-content-center">
       <li class="page-item">
         <a class="page-link" @click.prevent="retrievePreviousDataList">Previous</a>
       </li>
diff --git a/src/main/front/src/main.js b/src/main/front/src/main.js
index 4adf3c4..4ca36df 100644
--- a/src/main/front/src/main.js
+++ b/src/main/front/src/main.js
@@ -2,6 +2,7 @@ import 'bootstrap/dist/css/bootstrap.min.css'
 import 'bootstrap'
 import 'bootstrap-icons/font/bootstrap-icons.css'
 import './assets/app.css'
+import './assets/main.css'
 import { createApp, getCurrentInstance } from 'vue'
 import App from './App.vue'
 import router from './router'
diff --git a/src/main/front/src/views/AgentManageView.vue b/src/main/front/src/views/AgentManageView.vue
index a2c4928..ae72712 100644
--- a/src/main/front/src/views/AgentManageView.vue
+++ b/src/main/front/src/views/AgentManageView.vue
@@ -12,7 +12,8 @@ async function getAgentInfoDtoList() {
 
 let dfxAgentInfoDtoList = ref([])
 
-function setDfaAgentInfoDto(dfxAgentInfoDto) {
+function setDfxAgentInfoDto(dfxAgentInfoDto) {
+  console.log(dfxAgentInfoDto)
   alert(dfxAgentInfoDto)
 }
 
@@ -25,12 +26,11 @@ onMounted(async () => {
   <main class="dfx-main container w-100">
     <div class="row">
       <div class="col-12 pt-2 border-bottom">
-        <h3 class="h3">Dashboard</h3>
+        <h3 class="h3">에이전트 관리</h3>
       </div>
     </div>
     <div class="row">
       <article class="col-12 pt-3">
-        <h5 class="h5">에이전트 목록</h5>
         <table class="table table-striped table-bordered align-middle">
           <thead>
             <tr>
@@ -51,7 +51,7 @@ onMounted(async () => {
               <td class="text-end">{{ dfxAgentInfoDto.postmanCount }}</td>
               <td class="text-end">{{ dfxAgentInfoDto.dropboxCount }}</td>
               <td class="text-center"><i class="bi bi-lightbulb-fill" :class="dfxAgentInfoDto.statusCode == 'STATUS_OK' ? 'text-success' : 'text-secondary'"></i></td>
-              <td class="text-center"><button type="button" class="btn btn-primary btn-sm" @click.prevent="setDfaAgentInfoDto(dfxAgentInfoDto)">설정</button></td>
+              <td class="text-center"><button type="button" class="btn btn-primary btn-sm" @click.prevent="setDfxAgentInfoDto(dfxAgentInfoDto)">설정</button></td>
             </tr>
             <tr v-else>
               <td scope="row" class="text-center" colspan="7">no datas.</td>