round 설정 전체적으로 0으로 설정

정렬, 크기 등 화면 조정

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;
+}

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">
+        <div class="modal-header justify-content-between">
-          <h1 class="modal-title fs-5" :id="props.modalId + 'Label'">
+          <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>
-            {{ props.dto.senderAgentId }} <i class="bi bi-arrow-right"></i> {{ props.dto.recipientAgentId }}
+          <div class="d-flex align-items-center gap-2">
-            <button type="button" class="btn btn-success" @click="excelExport">EXCEL</button>
+            <button type="button" class="btn btn-success btn-sm" @click="excelExport">EXCEL</button>
-          </h1>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></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;
 }
 
-/* 헤더는 스크롤해도 상단에 고정하고 싶으면(선택 사항) */
+/* 헤더 전체를 sticky 처리 */
-.data-table thead th {
+.data-table thead {
   position: sticky;
   top: 0;
-  z-index: 1;
+  z-index: 2;
-  background-color: #343a40; /* bootstrap dark 비슷하게 */
+}
+
+/* 헤더 배경/글자 색 지정 */
+.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>

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>

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'

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>