From 228c38fdafaa03214f9036e77d3d32316d85a136 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B0=95=EC=84=9D=20=EC=B5=9C?= <cks0504_p@daum.net>
Date: Wed, 7 Dec 2022 17:57:26 +0900
Subject: [PATCH] =?UTF-8?q?=EC=99=B8=EC=82=AC=EC=A0=95=EB=B3=B4=EB=B3=B4?=
 =?UTF-8?q?=EA=B3=A0=20=EB=AA=A8=EB=8B=AC=20=EC=9E=91=EC=97=85=20=EC=99=84?=
 =?UTF-8?q?=EB=A3=8C=20=EC=99=B8=EC=82=AC=EC=88=98=EC=82=AC=EA=B4=80?=
 =?UTF-8?q?=EB=A6=AC=20=EB=AA=A8=EB=8B=AC=20=EC=9E=91=EC=97=85=EC=A4=91.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main/resources/static/js/common.js        |  18 ++
 src/main/resources/static/js/faRpt/faRpt.js   |  21 +--
 .../static/js/publicBoard/publicBoard.js      |  16 +-
 .../templates/faRpt/faRptEditModal.html       |   5 +-
 .../templates/faRpt/faRptViewModal.html       | 147 +++++++--------
 src/main/resources/templates/ivsgt/ivsgt.html |   9 +-
 .../templates/ivsgt/ivsgtEditModal.html       | 130 ++++++-------
 .../templates/ivsgt/ivsgtViewModal.html       | 173 +++++++++---------
 8 files changed, 244 insertions(+), 275 deletions(-)

diff --git a/src/main/resources/static/js/common.js b/src/main/resources/static/js/common.js
index abc67a81..f42700e1 100644
--- a/src/main/resources/static/js/common.js
+++ b/src/main/resources/static/js/common.js
@@ -1,4 +1,5 @@
 let files = [];
+let CrossEditor;
 
 function contentFade(action){
   if(action === "in"){
@@ -184,6 +185,19 @@ function setFileDiv(file, idx){
   uploadDiv.append(fileInfo);
 }
 
+function setEditor(divId, editorHeight){
+  CrossEditor = new NamoSE(divId);
+  CrossEditor.params.ParentEditor = document.getElementById(divId);
+  CrossEditor.params.Width = "100%";
+  CrossEditor.params.Height = editorHeight;
+  CrossEditor.params.UserLang = "auto";
+  CrossEditor.params.NewToolbar = true;
+  CrossEditor.params.UploadFileExecutePath = "/Crosseditor/uploadImg";
+  CrossEditor.params.FullScreen = false;
+  $("#editor").show();
+  CrossEditor.EditorStart();
+}
+
 function fileCheck(flag, files){
   let totalSize = 0;
   for(const file of files) {
@@ -288,4 +302,8 @@ function getToday(){
   var day = ("0" + date.getDate()).slice(-2);
 
   return year + "-" + month + "-" + day;
+}
+
+function OnInitCompleted(e){
+  e.editorTarget.SetBodyValue(document.getElementById("content").value);
 }
\ No newline at end of file
diff --git a/src/main/resources/static/js/faRpt/faRpt.js b/src/main/resources/static/js/faRpt/faRpt.js
index ef0bd847..7217ea03 100644
--- a/src/main/resources/static/js/faRpt/faRpt.js
+++ b/src/main/resources/static/js/faRpt/faRpt.js
@@ -116,25 +116,9 @@ function getFaRptEditModal(faRpt){
     dataType:"html",
     success: function(html){
       $("#faRptEditModalContent").empty().append(html)
-      $("#faRptEditModal").modal('show');
-      $("#faRptDt").datepicker({
-        format: "yyyy-mm-dd",
-        language: "ko",
-        autoclose: true
-      });
-      $("#content").summernote({
-        lang:'ko-KR',
-        height: 300,
-        disableDragAndDrop: true,
-        toolbar: [
-          ['style', ['style']],
-          ['font', ['bold', 'underline', 'clear']],
-          ['color', ['color']],
-          ['para', ['ul', 'ol', 'paragraph']],
-          ['table', ['table']]
-        ]
-      });
       setUploadDiv();
+      setEditor('editor', '500');
+      $("#faRptEditModal").modal('show');
     },
     error:function(){
 
@@ -161,6 +145,7 @@ function saveFaRpt(faRptState){
       $(".text-decoration-line-through").each(function (idx, el){
         formData.append('fileSeq', $(el).attr("data-fileseq"));
       })
+      formData.append('content', CrossEditor.GetBodyValue());
       $.ajax({
         type : 'POST',
         data : formData,
diff --git a/src/main/resources/static/js/publicBoard/publicBoard.js b/src/main/resources/static/js/publicBoard/publicBoard.js
index be216632..7a6d7b75 100644
--- a/src/main/resources/static/js/publicBoard/publicBoard.js
+++ b/src/main/resources/static/js/publicBoard/publicBoard.js
@@ -1,4 +1,3 @@
-var CrossEditor
 
 $(function(){
   $("#dateSelectorDiv").datepicker({
@@ -89,16 +88,7 @@ function getEditModal(publicKey, publicType){
     success: function(html){
       $("#editContent").empty().append(html)
       setUploadDiv();
-      CrossEditor = new NamoSE('editor');
-      CrossEditor.params.ParentEditor = document.getElementById("editor");
-      CrossEditor.params.Width = "100%";
-      CrossEditor.params.Height = "570";
-      CrossEditor.params.UserLang = "auto";
-      CrossEditor.params.NewToolbar = true;
-      CrossEditor.params.UploadFileExecutePath = "/Crosseditor/uploadImg";
-      CrossEditor.params.FullScreen = false;
-      $("#editor").show();
-      CrossEditor.EditorStart();
+      setEditor('editor', '570');
       $("#editModal").modal('show');
     },
     error:function(){
@@ -181,7 +171,3 @@ function commentFormReset(){
   $("#parentComment").val('');
   $("#commentFormHome").append(commentForm)
 }
-
-function OnInitCompleted(e){
-  e.editorTarget.SetBodyValue(document.getElementById("content").value);
-}
\ No newline at end of file
diff --git a/src/main/resources/templates/faRpt/faRptEditModal.html b/src/main/resources/templates/faRpt/faRptEditModal.html
index d5115b16..b6dc094b 100644
--- a/src/main/resources/templates/faRpt/faRptEditModal.html
+++ b/src/main/resources/templates/faRpt/faRptEditModal.html
@@ -47,7 +47,8 @@
         <div class="row mb-1 justify-content-center">
           <label for="content" class="col-sm-2 col-form-label col-form-label-sm text-center">내용</label>
           <div class="col-sm-10">
-            <textarea type='text' id="content" name='content' th:utext="${faRpt.content}"></textarea>
+            <div id="editor"></div>
+            <textarea class="d-none" id="content" th:utext="${faRpt.content}"></textarea>
           </div>
         </div>
         <div class="row mb-1">
@@ -75,7 +76,7 @@
           <input type="file" class="d-none" id="fileInputer" multiple>
         </div>
       </div>
-      <div class="col-4">
+      <div class="col-4 border-start">
         <div class="row">
           <div class="col-12 pb-2">
             <div class="row justify-content-between">
diff --git a/src/main/resources/templates/faRpt/faRptViewModal.html b/src/main/resources/templates/faRpt/faRptViewModal.html
index 7e589657..b35ce0a2 100644
--- a/src/main/resources/templates/faRpt/faRptViewModal.html
+++ b/src/main/resources/templates/faRpt/faRptViewModal.html
@@ -5,98 +5,48 @@
   <button type="button" class="btn-close f-invert" data-bs-dismiss="modal" aria-label="Close"></button>
 </div>
 <div class="modal-body" id="faRptViewBody">
-  <div class="row">
-    <div class="col-8">
+  <input type="hidden" id="faRptKey" th:value="${faRpt.faRptKey}">
+  <ul class="nav nav-tabs" id="userTab" role="tablist">
+    <li class="nav-item" role="presentation">
+      <button class="nav-link active" id="boardTab" data-bs-toggle="tab" data-bs-target="#boardTabPanel" type="button" role="tab" aria-controls="boardTabPanel" aria-selected="true">본문</button>
+    </li>
+    <li class="nav-item" role="presentation">
+      <button class="nav-link" id="readUserTab" data-bs-toggle="tab" data-bs-target="#readUserTabPanel" type="button" role="tab" aria-controls="readUserTabPanel" aria-selected="false">수신자</button>
+    </li>
+    <li class="nav-item" role="presentation" th:if="${#lists.size(faRpt.fileList)>0}">
+      <button class="nav-link" id="fileTab" data-bs-toggle="tab" data-bs-target="#fileTabPanel" type="button" role="tab" aria-controls="fileTabPanel" aria-selected="false" th:text="${#strings.concat('첨부파일(', #lists.size(faRpt.fileList), ')')}"></button>
+    </li>
+  </ul>
+  <div class="tab-content bg-white border border-top-0 p-2">
+    <div class="tab-pane fade p-2 show active" id="boardTabPanel" role="tabpanel" tabindex="0">
       <div class="row mb-1">
-        <label for="wrtUserNm" class="col-sm-2 col-form-label col-form-label-sm text-center">작성자</label>
-        <div class="col-sm-4">
-          <input type="hidden" id="faRptKey" th:value="${faRpt.faRptKey}">
-          <input type="hidden" id="wrtUserSeq" th:value="${faRpt.wrtUserSeq}">
-          <input type="hidden" id="wrtOrgan" th:value="${faRpt.wrtOrgan}">
-          <input type="hidden" id="wrtPart" th:value="${faRpt.wrtPart}">
-          <input type="hidden" id="wrtUserGrd" th:value="${faRpt.wrtUserGrd}">
-          <input type="text" class="form-control form-control-sm border-0" id="wrtUserNm" name="wrtUserNm" th:value="${faRpt.wrtUserNm}" readonly>
-        </div>
-        <label for="wrtDt" class="col-sm-2 col-form-label col-form-label-sm text-center">작성일시</label>
-        <div class="col-sm-4">
-          <input type="text" class="form-control form-control-sm border-0" id="wrtDt" name="wrtDt" th:value="${#temporals.format(faRpt.wrtDt, 'yyyy-MM-dd HH:mm')}" readonly>
-        </div>
-      </div>
-      <div class="row mb-1">
-        <label for="faRptType" class="col-sm-2 col-form-label col-form-label-sm text-center">분류</label>
-        <div class="col-sm-4">
+        <label class="col-sm-1 col-form-label col-form-label-sm text-center">분류</label>
+        <label class="col-sm-2 col-form-label col-form-label-sm text-start">
           <th:block th:each="code:${session.commonCode.get('FRC')}">
-            <th:block th:if="${code.itemCd eq faRpt.faRptType}">
-              <input type="text" class="form-control form-control-sm border-0" id="faRptType" th:value="${code.itemValue}" readonly>
-            </th:block>
+            <th:block th:if="${code.itemCd eq faRpt.faRptType}" th:text="${code.itemValue}"></th:block>
           </th:block>
-        </div>
-        <label for="status" class="col-sm-2 col-form-label col-form-label-sm text-center">상태</label>
-        <div class="col-sm-4">
-          <th:block th:each="code:${session.commonCode.get('DST')}">
-            <th:block th:if="${code.itemCd eq faRpt.status}">
-              <input type="text" class="form-control form-control-sm border-0" id="status" th:value="${code.itemValue}" readonly>
-            </th:block>
-          </th:block>
-        </div>
-      </div>
-      <hr>
-      <div class="row mb-1">
-        <label for="title" class="col-sm-2 col-form-label col-form-label-sm text-center">제목</label>
-        <div class="col-sm-10">
-          <input type="text" class="form-control form-control-sm border-0" id="title" name="title" th:value="${faRpt.title}" readonly>
-        </div>
+        </label>
+        <div class="col-6"></div>
+        <label class="col-sm-1 col-form-label col-form-label-sm text-center">작성일시</label>
+        <label class="col-sm-2 col-form-label col-form-label-sm text-start" th:text="${#temporals.format(faRpt.wrtDt, 'yyyy-MM-dd HH:mm')}"></label>
+        <label class="col-sm-1 col-form-label col-form-label-sm text-center">제목</label>
+        <label class="col-sm-8 col-form-label col-form-label-sm text-start" th:text="${faRpt.title}"></label>
+        <label class="col-sm-1 col-form-label col-form-label-sm text-center">작성자</label>
+        <label class="col-sm-2 col-form-label col-form-label-sm text-start" th:text="${faRpt.wrtUserNm}"></label>
       </div>
+      <hr class="my-1">
       <div class="row mb-1 justify-content-center">
-        <label for="content" class="col-sm-2 col-form-label col-form-label-sm text-center">내용</label>
-        <div class="col-sm-10" id="content" th:utext="${faRpt.content}">
-        </div>
+        <label class="col-sm-1 col-form-label col-form-label-sm text-center">내용</label>
+        <div class="col-sm-11 form-control-sm" th:utext="${faRpt.content}"></div>
       </div>
-      <hr>
+      <hr class="my-1">
       <div class="row mb-1">
-        <label for="hashTags" class="col-sm-2 col-form-label col-form-label-sm text-center">해시태그</label>
-        <div class="col-sm-10">
-          <input type="text" class="form-control form-control-sm border-0" id="hashTags" name="hashTags" th:value="${faRpt.hashTags}" readonly>
-        </div>
-      </div>
-      <hr>
-      <div class="row mb-3">
-        <label for="fileTable" class="col-sm-2 col-form-label col-form-label-sm text-center">업로드 자료</label>
-        <div class="col-sm-10">
-          <table class="table" id="fileTable">
-            <thead>
-            <tr>
-              <th>파일명</th>
-              <th>사이즈</th>
-            </tr>
-            </thead>
-            <tbody>
-            <th:block th:if="${#lists.isEmpty(faRpt.fileList)}">
-              <tr>
-                <td colspan="2">파일이 없습니다.</td>
-              </tr>
-            </th:block>
-            <th:block th:unless="${#lists.isEmpty(faRpt.fileList)}">
-              <th:block th:each="file:${faRpt.fileList}">
-                <tr class="fileInfoTr">
-                  <td><a href="#" class="fileDownLink" data-board="faRpt"
-                         th:data-parentkey="${file.faRptKey}" th:data-fileseq="${file.fileSeq}" th:text="|${file.origNm}.${file.fileExtn}|"></a></td>
-                  <td th:text="${file.fileSize}"></td>
-                </tr>
-              </th:block>
-            </th:block>
-            </tbody>
-          </table>
-        </div>
+        <label class="col-sm-1 col-form-label col-form-label-sm text-center">해시태그</label>
+        <label class="col-sm-11 col-form-label col-form-label-sm text-start" th:text="${faRpt.hashTags}"></label>
       </div>
     </div>
-    <div class="col-4">
+    <div class="tab-pane fade p-2" id="readUserTabPanel" role="tabpanel" tabindex="0">
       <div class="row">
-        <div class="col-12 pb-2">
-          <div class="row justify-content-start">
-            <div class="col-auto">■ 수신자</div>
-          </div>
-        </div>
         <div class="col-1">no</div>
         <div class="col-9">수신자</div>
         <div class="col-2">열람</div>
@@ -127,6 +77,39 @@
         </div>
       </div>
     </div>
+    <div class="tab-pane fade p-2" id="fileTabPanel" role="tabpanel" tabindex="0">
+      <div class="row mb-3">
+        <div class="col-sm-12">
+          <table class="table table-sm" id="fileTable">
+            <thead>
+            <tr>
+              <th>파일명</th>
+              <th>사이즈</th>
+            </tr>
+            </thead>
+            <tbody>
+            <th:block th:if="${#lists.isEmpty(faRpt.fileList)}">
+              <tr>
+                <td colspan="2">파일이 없습니다.</td>
+              </tr>
+            </th:block>
+            <th:block th:unless="${#lists.isEmpty(faRpt.fileList)}">
+              <th:block th:each="file:${faRpt.fileList}">
+                <tr class="fileInfoTr">
+                  <td>
+                    <a href="#" class="fileDownLink" data-board="faRpt"
+                         th:data-parentkey="${file.faRptKey}" th:data-fileseq="${file.fileSeq}"
+                         th:text="|${file.origNm}.${file.fileExtn}|"></a>
+                  </td>
+                  <td th:text="${file.fileSize}"></td>
+                </tr>
+              </th:block>
+            </th:block>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
   </div>
 </div>
 <div class="modal-footer bg-light">
diff --git a/src/main/resources/templates/ivsgt/ivsgt.html b/src/main/resources/templates/ivsgt/ivsgt.html
index d66eb715..0bdaec5c 100644
--- a/src/main/resources/templates/ivsgt/ivsgt.html
+++ b/src/main/resources/templates/ivsgt/ivsgt.html
@@ -116,7 +116,7 @@
                 <table class="table table-sm table-hover table-bordered ws-nowrap">
                   <thead class="align-middle text-center">
                   <tr class="table-secondary">
-                    <th>문서번호</th>
+                    <!--<th>문서번호</th>-->
                     <th>관서</th>
                     <th>검거유형1</th>
                     <th>검거유형2</th>
@@ -127,7 +127,7 @@
                   </thead>
                   <tbody class="table-group-divider align-middle text-center">
                   <tr class="tr" th:each="boardInvestigation:${boardInvestigationList}" th:data-key="${boardInvestigation.ivsgtKey}">
-                    <td th:text="${boardInvestigation.ivsgtKey}"></td>
+                    <!--<td th:text="${boardInvestigation.ivsgtKey}"></td>-->
                     <th:block th:each="commonCode:${session.commonCode.get('OG')}">
                       <td th:if="${boardInvestigation.wrtOrgan eq commonCode.itemCd}" th:text="${commonCode.itemValue}"></td>
                     </th:block>
@@ -142,7 +142,6 @@
                 <!-- 페이징 -->
                 <div class="row justify-content-between">
                   <div class="col-auto">
-                    <button class="btn btn-primary" id="ivsgtAddBtn">등록</button>
                   </div>
                   <div class="col-auto">
                     <nav aria-label="Page navigation">
@@ -169,7 +168,9 @@
                       </ul>
                     </nav>
                   </div>
-                  <div class="col-auto"></div>
+                  <div class="col-auto">
+                    <button class="btn btn-primary" id="ivsgtAddBtn">등록</button>
+                  </div>
                 </div>
               </div>
             </div>
diff --git a/src/main/resources/templates/ivsgt/ivsgtEditModal.html b/src/main/resources/templates/ivsgt/ivsgtEditModal.html
index dc9ee9ae..25332c52 100644
--- a/src/main/resources/templates/ivsgt/ivsgtEditModal.html
+++ b/src/main/resources/templates/ivsgt/ivsgtEditModal.html
@@ -53,7 +53,7 @@
         </div>
       </div>
       <div class="row mb-1" id="arrestTypeDiv">
-        <label class="col-sm-2 col-form-label text-center">검거유형1</label>
+        <label class="col-sm-2 col-form-label col-form-label-sm text-center">검거유형1</label>
         <div class="col-sm-2">
           <select class="form-select form-select-sm" name="arrestCd" id="arrestCd">
             <option value="">검거유형1 선택-</option>
@@ -63,7 +63,7 @@
             </th:block>
           </select>
         </div>
-        <label class="col-sm-2 col-form-label text-center">검거유형2</label>
+        <label class="col-sm-2 col-form-label col-form-label-sm text-center">검거유형2</label>
         <div class="col-sm-2">
           <select class="form-select form-select-sm" name="arrestCd2" id="arrestCd2">
             <option value="">검거유형2 선택-</option>
@@ -75,6 +75,18 @@
           </select>
         </div>
       </div>
+      <div class="row mb-1">
+        <label for="contentInfoDiv" class="col-sm-2 col-form-label text-center">사건개요</label>
+        <div class="col-sm-10" id="contentInfoDiv">
+          <textarea type='text' name='contentInfo' th:utext="${boardInvestigation.contentInfo}"></textarea>
+        </div>
+      </div>
+      <div class="row mb-1">
+        <label for="contentMainDiv" class="col-sm-2 col-form-label text-center">주요내용</label>
+        <div class="col-sm-10" id="contentMainDiv">
+            <textarea type='text' name='contentMain' th:utext="${boardInvestigation.contentMain}"></textarea>
+        </div>
+      </div>
       <div class="row mb-1">
         <label for="hashTags" class="col-sm-2 col-form-label col-form-label-sm text-center">해시태그</label>
         <div class="col-sm-10">
@@ -82,73 +94,61 @@
                  placeholder="띄어쓰기로 각 태그를 구분합니다. 한 태그 내에서는 띄어쓰기 없이 입력해주세요. ex)태그1 태그2">
         </div>
       </div>
-      <div class="row mb-1 justify-content-center">
-        <label for="contentInfoDiv" class="col-sm-2 col-form-label text-center">사건개요</label>
-        <div class="col-sm-10" id="contentInfoDiv">
-          <textarea type='text' name='contentInfo' th:utext="${boardInvestigation.contentInfo}"></textarea>
-        </div>
-        <div class="row mb-1 justify-content-center">
-          <label for="contentMainDiv" class="col-sm-2 col-form-label text-center">주요내용</label>
-          <div class="col-sm-10" id="contentMainDiv">
-              <textarea type='text' name='contentMain' th:utext="${boardInvestigation.contentMain}"></textarea>
-          </div>
-        </div>
-        <div class="row mb-3">
-          <label for="fileInputer" class="col-sm-2 col-form-label text-center">업로드 자료</label>
-          <div class="col-sm-10" style="min-height: 70px;">
-            <div class="w-100 h-100 border border-info rounded text-center" id="uploadDiv">
-              <th:block th:if="${#arrays.isEmpty(boardInvestigation.fileList)}">
-                <br>파일을 업로드 해주세요.
-              </th:block>
-              <th:block th:unless="${#arrays.isEmpty(boardInvestigation.fileList)}">
-                <div class='row-col-6' th:each="ivsgtFile:${boardInvestigation.fileList}">
-                  <span th:data-fileseq="${ivsgtFile.fileSeq}" th:text="|${ivsgtFile.origNm}.${ivsgtFile.fileExtn} ${ivsgtFile.fileSize}|"></span>
-                  <a href='#' class='uploadedFileDelete text-danger text-decoration-none'>삭제</a>
-                </div>
-              </th:block>
-            </div>
+      <div class="row mb-1">
+        <label for="fileInputer" class="col-sm-2 col-form-label text-center">업로드 자료</label>
+        <div class="col-sm-10" style="min-height: 70px;">
+          <div class="w-100 h-100 border border-info rounded text-center" id="uploadDiv">
+            <th:block th:if="${#arrays.isEmpty(boardInvestigation.fileList)}">
+              <br>파일을 업로드 해주세요.
+            </th:block>
+            <th:block th:unless="${#arrays.isEmpty(boardInvestigation.fileList)}">
+              <div class='row-col-6' th:each="ivsgtFile:${boardInvestigation.fileList}">
+                <span th:data-fileseq="${ivsgtFile.fileSeq}" th:text="|${ivsgtFile.origNm}.${ivsgtFile.fileExtn} ${ivsgtFile.fileSize}|"></span>
+                <a href='#' class='uploadedFileDelete text-danger text-decoration-none'>삭제</a>
+              </div>
+            </th:block>
           </div>
           <input type="file" class="d-none" id="fileInputer" multiple>
         </div>
-        <th:block th:if="${boardInvestigation.ivsgtType eq 'proceeding' or boardInvestigation.ivsgtType eq 'result'}">
-          <div class="row mb-3">
-            <label for="relatedReportDiv" class="col-sm-2 col-form-label text-center">연관보고서</label>
-            <div class="col-sm-10" id="relatedReportDiv">
-              <div class="row justify-content-start">
-                <div class="col-4">
-                  <input type="text" class="form-control form-control-sm" placeholder="" name="searchTitle">
-                </div>
-                <input type="button" class="btn btn-sm btn-primary col-auto" id="relatedReportSearchBtn" value="검색">
-                <div class="col-auto">
-                  <input type="checkbox" id="relatedReport" th:checked="${#lists.isEmpty(boardInvestigation.relatedReportsList)}">
-                  <label for="relatedReport">연관보고서 없음</label>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="row mb-3">
-            <label for="relatedReportDiv" class="col-sm-2 col-form-label text-center"></label>
-            <div class="col-sm-10 row mb-1" id="relatedReportSearchDiv">
-              <th:block th:each="relatedReports:${boardInvestigation.relatedReportsList}">
-                <div class="col-auto">
-                  <input type="hidden" name="relatedReportsKeyList" th:value="${relatedReports.relatedReportsKey}">
-                  <input type="hidden" name="childIvsgtKeyList" th:value="${relatedReports.childIvsgtKey}">
-                  <input class="border-0" type="text" name="relatedReportsText" th:value="${relatedReports.contentTitle}" readonly>
-                  <button class="btn btn-sm btn-primary col-auto cancel-btn">X</button>
-                </div>
-              </th:block>
-            </div>
-          </div>
-
-          <div class="modal fade" id="searchViewModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="searchViewModalLabel" aria-hidden="true" style="background-color: var(--bs-border-color-translucent);">
-            <div class="modal-dialog modal-s modal-dialog-scrollable">
-              <div class="modal-content" id="searchViewBody">
-
-              </div>
-            </div>
-          </div>
-        </th:block>
       </div>
+      <th:block th:if="${boardInvestigation.ivsgtType eq 'proceeding' or boardInvestigation.ivsgtType eq 'result'}">
+        <div class="row mb-3">
+          <label for="relatedReportDiv" class="col-sm-2 col-form-label text-center">연관보고서</label>
+          <div class="col-sm-10" id="relatedReportDiv">
+            <div class="row justify-content-start">
+              <div class="col-4">
+                <input type="text" class="form-control form-control-sm" placeholder="" name="searchTitle">
+              </div>
+              <input type="button" class="btn btn-sm btn-primary col-auto" id="relatedReportSearchBtn" value="검색">
+              <div class="col-auto">
+                <input type="checkbox" id="relatedReport" th:checked="${#lists.isEmpty(boardInvestigation.relatedReportsList)}">
+                <label for="relatedReport">연관보고서 없음</label>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="row mb-3">
+          <label for="relatedReportDiv" class="col-sm-2 col-form-label text-center"></label>
+          <div class="col-sm-10 row mb-1" id="relatedReportSearchDiv">
+            <th:block th:each="relatedReports:${boardInvestigation.relatedReportsList}">
+              <div class="col-auto">
+                <input type="hidden" name="relatedReportsKeyList" th:value="${relatedReports.relatedReportsKey}">
+                <input type="hidden" name="childIvsgtKeyList" th:value="${relatedReports.childIvsgtKey}">
+                <input class="border-0" type="text" name="relatedReportsText" th:value="${relatedReports.contentTitle}" readonly>
+                <button class="btn btn-sm btn-primary col-auto cancel-btn">X</button>
+              </div>
+            </th:block>
+          </div>
+        </div>
+
+        <div class="modal fade" id="searchViewModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="searchViewModalLabel" aria-hidden="true" style="background-color: var(--bs-border-color-translucent);">
+          <div class="modal-dialog modal-s modal-dialog-scrollable">
+            <div class="modal-content" id="searchViewBody">
+
+            </div>
+          </div>
+        </div>
+      </th:block>
     </form>
   </div>
   <div class="modal-footer bg-light">
diff --git a/src/main/resources/templates/ivsgt/ivsgtViewModal.html b/src/main/resources/templates/ivsgt/ivsgtViewModal.html
index e343dd5b..d06db342 100644
--- a/src/main/resources/templates/ivsgt/ivsgtViewModal.html
+++ b/src/main/resources/templates/ivsgt/ivsgtViewModal.html
@@ -15,103 +15,98 @@
     <button type="button" class="btn-close f-invert" data-bs-dismiss="modal" aria-label="Close"></button>
   </div>
   <div class="modal-body" id="ivsgtViewBody">
-    <form action="#" method="post" id="ivsgtEditForm">
-      <input type="hidden" name="_csrf_header" th:value="${_csrf.headerName}"/>
-      <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
-      <input type="hidden" name="ivsgtKey" th:value="${boardInvestigation.ivsgtKey}">
-      <input type="hidden" name="wrtOrgan" th:value="${boardInvestigation.wrtOrgan}">
-      <input type="hidden" name="contentState">
-      <input type="hidden" name="ivsgtType" th:value="${boardInvestigation.ivsgtType}">
-      <div class="row mb-1">
-        <label for="wrtUserNm" class="col-sm-2 col-form-label text-center">작성자</label>
-        <div class="col-sm-2">
-          <input type="text" class="form-control border-0" id="wrtUserNm" name="wrtUserNm" th:value="${boardInvestigation.wrtNm}" readonly>
+    <input type="hidden" name="ivsgtKey" th:value="${boardInvestigation.ivsgtKey}">
+    <ul class="nav nav-tabs" id="userTab" role="tablist">
+      <li class="nav-item" role="presentation">
+        <button class="nav-link active" id="boardTab" data-bs-toggle="tab" data-bs-target="#boardTabPanel" type="button" role="tab" aria-controls="boardTabPanel" aria-selected="true">본문</button>
+      </li>
+      <li class="nav-item" role="presentation" th:if="${#lists.size(boardInvestigation.fileList)>0}">
+        <button class="nav-link" id="fileTab" data-bs-toggle="tab" data-bs-target="#fileTabPanel" type="button" role="tab" aria-controls="fileTabPanel" aria-selected="false" th:text="${#strings.concat('첨부파일(', #lists.size(boardInvestigation.fileList), ')')}"></button>
+      </li>
+    </ul>
+    <div class="tab-content bg-white border border-top-0 p-2">
+      <div class="tab-pane fade p-2 show active" id="boardTabPanel" role="tabpanel" tabindex="0">
+        <div class="row mb-1">
+          <label class="col-sm-1 col-form-label col-form-label-sm text-center">검거유형1</label>
+          <label class="col-sm-2 col-form-label col-form-label-sm text-start">
+            <th:block th:each="code:${session.commonCode.get('AT')}">
+              <th:block th:if="${code.itemCd eq boardInvestigation.arrestType.arrestCd}" th:text="${code.itemValue}"></th:block>
+            </th:block>
+          </label>
+          <label class="col-sm-1 col-form-label col-form-label-sm text-center">검거유형2</label>
+          <label class="col-sm-2 col-form-label col-form-label-sm text-start">
+            <th:block th:each="code:${session.commonCode.get(boardInvestigation.arrestType.arrestCd)}">
+              <th:block th:if="${code.itemCd eq boardInvestigation.arrestType.arrestCd2}" th:text="${code.itemValue}"></th:block>
+            </th:block>
+          </label>
+          <div class="col-sm-3"></div>
+          <label class="col-sm-1 col-form-label col-form-label-sm text-center">작성일시</label>
+          <label class="col-sm-2 col-form-label col-form-label-sm text-start" th:text="${#temporals.format(boardInvestigation.wrtDt, 'yyyy-MM-dd HH:mm')}"></label>
+          <label class="col-sm-1 col-form-label col-form-label-sm text-center">제목</label>
+          <label class="col-sm-8 col-form-label col-form-label-sm text-start" th:text="${boardInvestigation.contentTitle}"></label>
+          <label class="col-sm-1 col-form-label col-form-label-sm text-center">작성자</label>
+          <label class="col-sm-2 col-form-label col-form-label-sm text-start" th:text="${boardInvestigation.wrtNm}"></label>
         </div>
-        <label for="wrtDt" class="col-sm-2 col-form-label text-center">작성일시</label>
-        <div class="col-sm-2">
-          <input type="text" class="form-control border-0" id="wrtDt" name="wrtDt" th:value="${#temporals.format(boardInvestigation.wrtDt, 'yyyy-MM-dd HH:mm')}" readonly>
-        </div>
-      </div>
-      <div class="row mb-1">
-        <label for="contentTitle" class="col-sm-2 col-form-label text-center">제목</label>
-        <div class="col-sm-10">
-          <input type="text" class="form-control border-0" id="contentTitle" name="contentTitle" th:value="${boardInvestigation.contentTitle}" readonly>
-        </div>
-      </div>
-      <div class="row mb-1" id="arrestTypeDiv">
-        <label class="col-sm-2 col-form-label text-center">검거유형1</label>
-        <div class="col-sm-2">
-            <div th:utext="${boardInvestigation.arrestType.arrestCdName}"></div>
-        </div>
-        <label class="col-sm-2 col-form-label text-center">검거유형2</label>
-        <div class="col-sm-2">
-          <div th:utext="${boardInvestigation.arrestType.arrestCd2Name}"></div>
-        </div>
-      </div>
-      <div class="row mb-1">
-        <label for="hashTags" class="col-sm-2 col-form-label col-form-label-sm text-center">해시태그</label>
-        <div class="col-sm-10">
-          <input type="text" class="form-control form-control-sm border-0" id="hashTags" name="hashTags" th:value="${boardInvestigation.hashTags}"
-                 placeholder="없음" readonly>
-        </div>
-      </div>
-      <div class="row mb-1 justify-content-center">
-        <div class="col-8">
-          <div class="row mb-1">
-            <label for="contentInfoDiv" class="col-sm-2 col-form-label text-center">사건개요</label>
-            <div class="col-sm-10" id="contentInfoDiv">
-              <div type='text' class="col-sm-10" name='contentInfos'th:utext="${boardInvestigation.contentInfo}" readonly></div>
-            </div>
-          </div>
-          <div class="row mb-1">
-            <label for="contentMainDiv" class="col-sm-2 col-form-label text-center">주요내용</label>
-            <div class="col-sm-10" id="contentMainDiv">
-              <div type='text' class="col-sm-10" name='contentMain' th:utext="${boardInvestigation.contentMain}" readonly></div>
-            </div>
+        <hr class="my-1">
+        <div class="row mb-1">
+          <label class="col-sm-1 col-form-label col-form-label-sm text-center">사건개요</label>
+          <div class="col-sm-11">
+            <div class="form-control-sm" th:utext="${boardInvestigation.contentInfo}"></div>
           </div>
         </div>
-        <div class="col-4">
-          <table class="table">
-            <thead>
+        <div class="row mb-1">
+          <label class="col-sm-1 col-form-label col-form-label-sm text-center">주요내용</label>
+          <div class="col-sm-11">
+            <div class="form-control-sm" th:utext="${boardInvestigation.contentMain}"></div>
+          </div>
+        </div>
+        <hr class="my-1">
+        <div class="row mb-1">
+          <label class="col-sm-1 col-form-label col-form-label-sm text-center">해시태그</label>
+          <label class="col-sm-11 col-form-label col-form-label-sm text-start" th:text="${boardInvestigation.hashTags}"></label>
+        </div>
+      </div>
+      <div class="tab-pane fade p-2" id="fileTabPanel" role="tabpanel" tabindex="0">
+        <table class="table table-sm">
+          <thead>
+          <tr>
+            <th>파일명</th>
+            <th>사이즈</th>
+          </tr>
+          </thead>
+          <tbody>
+          <th:block th:if="${#lists.isEmpty(boardInvestigation.fileList)}">
             <tr>
-              <th>파일명</th>
-              <th>사이즈</th>
+              <td colspan="2">파일이 없습니다.</td>
             </tr>
-            </thead>
-            <tbody>
-            <th:block th:if="${#lists.isEmpty(boardInvestigation.fileList)}">
-              <tr>
-                <td colspan="2">파일이 없습니다.</td>
+          </th:block>
+          <th:block th:unless="${#lists.isEmpty(boardInvestigation.fileList)}">
+            <th:block th:each="file:${boardInvestigation.fileList}">
+              <tr class="fileInfoTr">
+                <td><a href="#" class="fileDownLink" data-board="ivsgt"
+                       th:data-parentkey="${file.ivsgtKey}" th:data-fileseq="${file.fileSeq}" th:text="|${file.origNm}.${file.fileExtn}|"></a></td>
+                <td th:text="${file.fileSize}"></td>
               </tr>
             </th:block>
-            <th:block th:unless="${#lists.isEmpty(boardInvestigation.fileList)}">
-              <th:block th:each="file:${boardInvestigation.fileList}">
-                <tr class="fileInfoTr">
-                  <td><a href="#" class="fileDownLink" data-board="ivsgt"
-                         th:data-parentkey="${file.ivsgtKey}" th:data-fileseq="${file.fileSeq}" th:text="|${file.origNm}.${file.fileExtn}|"></a></td>
-                  <td th:text="${file.fileSize}"></td>
-                </tr>
-              </th:block>
-            </th:block>
-            </tbody>
-          </table>
-        </div>
-        <th:block th:if="${boardInvestigation.ivsgtType eq 'proceeding' or boardInvestigation.ivsgtType eq 'result'}">
-          <div class="row mb-3">
-            <label for="relatedReportDiv" class="col-sm-2 col-form-label text-center">연관보고서</label>
-            <div class="col-sm-10" id="relatedReportDiv">
-              <div class="row justify-content-start">
-                <th:block th:each="relatedReports:${boardInvestigation.relatedReportsList}">
-                  <div class="col-auto">
-                    <input class="border-0" type="text" name="relatedReportsText" th:value="${relatedReports.contentTitle}" readonly>
-                  </div>
-                </th:block>
-              </div>
-            </div>
-          </div>
-        </th:block>
+          </th:block>
+          </tbody>
+        </table>
       </div>
-    </form>
+    </div>
+    <th:block th:if="${boardInvestigation.ivsgtType eq 'proceeding' or boardInvestigation.ivsgtType eq 'result'}">
+      <div class="row mb-3">
+        <label class="col-sm-1 col-form-label col-form-label-sm text-center">연관보고서</label>
+        <div class="col-sm-11" id="relatedReportDiv">
+          <div class="row justify-content-start">
+            <th:block th:each="relatedReports:${boardInvestigation.relatedReportsList}">
+              <div class="col-auto">
+                <input class="border-0" type="text" name="relatedReportsText" th:value="${relatedReports.contentTitle}" readonly>
+              </div>
+            </th:block>
+          </div>
+        </div>
+      </div>
+    </th:block>
   </div>
   <div class="modal-footer bg-light">
     <th:block th:if="${userSeq eq boardInvestigation.wrtUserSeq or accessAuth eq 'ACC003'}"><!--작성자일 경우 수정 허용--><!--관리자일 경우 수정 허용-->