MessageDataView 모달 안의 테이블 외곽에 스크롤 기능 추가

src/main/front/src/App.vue

@@ -5,14 +5,13 @@ import { userApi } from '@/components/userInfo'
 
 const router = useRouter()
 
-onMounted(() => {
-  userApi.loginCheck().then(() => {
-    if (userInfo.isLogin) {
-      router.push('/main.html')
-    } else {
-      router.replace('/login.html')
-    }
-  })
+onMounted(async () => {
+  const isLogin = await userApi.loginCheck()
+  if (isLogin) {
+    router.push('/main.html')
+  } else {
+    router.replace('/login.html')
+  }
 })
 </script>
 

src/main/front/src/components/MessageDataView.vue

@@ -10,8 +10,8 @@ const props = defineProps({
 
 const modalEl = ref(null)
 let bsModal = null
-let dataList = []
-let columnList = []
+let dataList = ref([])
+let columnList = ref([])
 
 onMounted(() => {
   if (modalEl.value) {
@@ -26,8 +26,8 @@ onMounted(() => {
 onBeforeUnmount(() => {
   if (bsModal) {
     bsModal.hide()
-    dataList = []
-    columnList = []
+    dataList.value = []
+    columnList.value = []
     // Bootstrap v5에서는 dispose 지원
     if (typeof bsModal.dispose === 'function') {
       bsModal.dispose()
@@ -39,25 +39,31 @@ onBeforeUnmount(() => {
 function open() {
   if (bsModal) {
     if (props.dto.messageData) {
-      dataList = JSON.parse(props.dto.messageData)
-      columnList = Object.keys(dataList[0])
+      dataList.value = JSON.parse(props.dto.messageData)
+      columnList.value = Object.keys(dataList.value[0])
     }
     bsModal.show()
-    console.log(props.dto)
   }
 }
 
 function close() {
   if (bsModal) {
     bsModal.hide()
-    dataList = []
-    columnList = []
+    dataList.value = []
+    columnList.value = []
   }
 }
 
 function excelExport() {
-  let sheet = XSLX.utils.table_to_sheet(document.getElementById(props.modalId + 'Table'))
-  XSLX.writeFile(sheet, props.dto.senderPostmanId + '.xlsx')
+  const table = document.getElementById(props.modalId + 'Table')
+  if (!table) {
+    return
+  }
+  const workbook = XSLX.utils.book_new()
+  const sheet = XSLX.utils.table_to_sheet(table, { raw: true })
+  XSLX.utils.book_append_sheet(workbook, sheet, 'data')
+  const fileName = (props.dto && props.dto.senderPostmanId ? props.dto.senderPostmanId : 'interface-messages') + '.xlsx'
+  XSLX.writeFile(workbook, fileName)
 }
 
 defineExpose({
@@ -69,8 +75,8 @@ defineExpose({
 <template>
   <!-- Modal -->
   <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">
-      <div class="modal-content">
+    <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 }}
@@ -78,34 +84,69 @@ defineExpose({
           </h1>
           <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
         </div>
-        <div class="modal-body">
-          <div class="row">
-            <div class="col-12">
-              <table class="table table-striped table-bordered table-hover table-sm align-middle fs-7" :id="props.modalId + 'Table'">
-                <thead>
-                  <tr>
-                    <th scope="col" class="text-center" v-if="columnList.length > 0" v-for="columnName in columnList">{{ columnName }}</th>
-                    <th scope="col" class="text-center" v-else>no datas.</th>
-                  </tr>
-                </thead>
-                <tbody class="table-group-divider">
-                  <tr v-if="dataList.length > 0" v-for="dataMap in dataList">
-                    <td class="text-center" v-for="columnName in columnList">{{ dataMap[columnName] }}</td>
-                  </tr>
-                  <tr v-else>
-                    <td scope="row" class="text-center">no datas.</td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
+        <div class="modal-body data-modal-body">
+          <div class="data-table-wrapper table-responsive">
+            <table class="table table-striped table-bordered table-hover table-sm align-middle fs-7 data-table" :id="props.modalId + 'Table'">
+              <thead>
+                <tr>
+                  <th scope="col" class="text-center" v-if="columnList.length > 0" v-for="columnName in columnList">{{ columnName }}</th>
+                  <th scope="col" class="text-center" v-else>no datas.</th>
+                </tr>
+              </thead>
+              <tbody class="table-group-divider">
+                <tr v-if="dataList.length > 0" v-for="dataMap in dataList">
+                  <td class="text-center" v-for="columnName in columnList">{{ dataMap[columnName] }}</td>
+                </tr>
+                <tr v-else>
+                  <td scope="row" class="text-center">no datas.</td>
+                </tr>
+              </tbody>
+            </table>
           </div>
         </div>
-        <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-        </div>
       </div>
     </div>
   </div>
 </template>
 
-<style></style>
+<style scoped>
+/* 모달이 화면을 거의 꽉 채우게 */
+.data-modal-dialog {
+  max-width: calc(100% - 4vh); /* 좌우 95% */
+  margin: 2vh auto; /* 위아래 여백 조금 */
+}
+
+/* 모달 전체 높이를 화면의 95% 정도로 */
+.data-modal-content {
+  height: 95vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 헤더/푸터 빼고 나머지 영역을 테이블 영역으로 */
+.data-modal-body {
+  flex: 1 1 auto;
+  overflow: hidden; /* 여기서는 스크롤 안 하고 */
+  padding: 0.5rem;
+}
+
+/* 실제 스크롤이 일어나는 영역 */
+.data-table-wrapper {
+  height: 100%;
+  overflow: auto; /* 세로/가로 스크롤 모두 */
+}
+
+/* 컬럼이 많을 때 한 줄에 계속 붙게(가로 스크롤) */
+.data-table {
+  white-space: nowrap;
+}
+
+/* 헤더는 스크롤해도 상단에 고정하고 싶으면(선택 사항) */
+.data-table thead th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background-color: #343a40; /* bootstrap dark 비슷하게 */
+  color: #fff;
+}
+</style>

src/main/front/src/components/SearchParameterDto.js

@@ -10,10 +10,11 @@ SearchParameterDto.prototype.calculatePageList = function (currentPage, currentI
   this.itemCountPerPage = currentItemCountPerPage
   this.totalItemCount = currentTotalItemCount
   if (this.totalItemCount > 0) {
-    let pageSize = Math.floor(this.totalItemCount / this.itemCountPerPage) + 1
+    let pageSize = Math.ceil(this.totalItemCount / this.itemCountPerPage) + 1
+    pageSize = pageSize < 1 ? 1 : pageSize
     this.page = currentPage >= 1 && currentPage <= pageSize ? currentPage : 1
     let startPage = Math.floor((this.page - 1) / 10) * 10 + 1
-    let lastPage = Math.min(startPage + 10, pageSize)
+    let lastPage = Math.min(startPage + 9, pageSize)
     let pageArray = []
     for (let i = startPage; i <= lastPage; i++) {
       pageArray.push(i)