From 44a2834ccc504b16af39ee72027c42e2fa0854c7 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: Thu, 8 Dec 2022 11:07:56 +0900
Subject: [PATCH] =?UTF-8?q?=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=88=98=EC=A0=95=20=EC=99=84?=
 =?UTF-8?q?=EB=A3=8C.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main/resources/static/js/ivsgt/ivsgt.js   | 284 ++++++++----------
 .../templates/ivsgt/ivsgtEditModal.html       | 248 +++++++--------
 .../templates/ivsgt/ivsgtViewModal.html       |   7 +-
 3 files changed, 260 insertions(+), 279 deletions(-)

diff --git a/src/main/resources/static/js/ivsgt/ivsgt.js b/src/main/resources/static/js/ivsgt/ivsgt.js
index 3b951e8e..f14164af 100644
--- a/src/main/resources/static/js/ivsgt/ivsgt.js
+++ b/src/main/resources/static/js/ivsgt/ivsgt.js
@@ -1,212 +1,190 @@
 $(document).on('click', '#ivsgtAddBtn', function () {
-    getIvsgtEditModal(null, $("input[name='ivsgtType']").val());
+  getIvsgtEditModal(null, $("input[name='ivsgtType']").val());
 });
 
 $(document).on('click', '#ivsgtEditBtn', function () {
-    $("#ivsgtViewModal").modal('hide');
-    getIvsgtEditModal(Number($("#ivsgtViewBody").find("[name='ivsgtKey']").val()));
-});
-
-
-$(document).on('click', '#contentInfoAddBtn', function (){
-    $("#contentInfoDiv").append("<input type='text' class='form-control' name='contentInfos'>")
+  $("#ivsgtViewModal").modal('hide');
+  getIvsgtEditModal(Number($("#ivsgtViewBody").find("[name='ivsgtKey']").val()));
 });
 
 $(document).on('click', '#saveIvsgtBtn', function (){
-    saveBoardInvestigation('N')
+  saveBoardInvestigation('N')
 });
 
 $(document).on('click', '#saveTempBtn', function (){
-    saveBoardInvestigation('Y')
+  saveBoardInvestigation('Y')
 });
 
 $(document).on('click', '.tr', function (){
-    getIvsgtViewModal($(this).data('key'));
+  getIvsgtViewModal($(this).data('key'));
 });
 
 $(document).on('click', '.ivsgtTab', function (){
-    location.href = "/ivsgt/"+ $(this).data("ivsgt-type");
+  location.href = "/ivsgt/"+ $(this).data("ivsgt-type");
 });
 
 $(document).on('click', '#relatedReportSearchBtn', function (){
-    let contentTitle = $("#ivsgtEditBody").find("[name='searchTitle']").val();
-    let ivsgtType = $("#ivsgtEditBody").find("[name='ivsgtType']").val();
-    getSearchViewModal(ivsgtType, contentTitle)
+  let contentTitle = $("#ivsgtEditBody").find("[name='searchTitle']").val();
+  let ivsgtType = $("#ivsgtEditBody").find("[name='ivsgtType']").val();
+  getSearchViewModal(ivsgtType, contentTitle)
 });
 
 $(document).on('click', '#completeBtn', function (){
-    const checkbox = document.getElementsByClassName('reportChk');
+  const checkbox = document.getElementsByClassName('reportChk');
 
-    Array.from(checkbox).forEach(function(element) {
-        if (element.checked) {
-            $('#relatedReportSearchDiv').append(
-                '<input type="hidden" name="relatedReportsKeyList" value="0">'
-                + '<input type="hidden" name="childIvsgtKeyList" value="' + element.value + '">'
-                + '<div class="col-auto"><input class="border-0" type="text" name="relatedReportsText" value="' + element.name + '" readonly>'
-                + '<button class="btn btn-sm btn-primary col-auto cancel-btn" >X</button></div>'
-            )
-        }
-    });
+  Array.from(checkbox).forEach(function(element) {
+    if (element.checked) {
+      $('#relatedReportSearchDiv').append(
+          '<div class="col-auto">' +
+          ' <input type="hidden" name="relatedReportsKeyList" value="0">'+
+          ' <input type="hidden" name="childIvsgtKeyList" value="' + element.value + '">'+
+          ' <input type="hidden" name="relatedReportsText" value="' + element.name + '" readonly>'+
+          ' <div class="row">' +
+          '   <label class="col-sm-auto col-form-label col-form-label-sm">' + element.name + '</label>'+
+          '   <button class="btn btn-sm btn-primary col-auto cancel-btn" ><i class="bi-x"></i></button>' +
+          ' </div>' +
+          '</div>'
+      )
+    }
+  });
 });
 
 $(document).on('click', '.cancel-btn', function (){
-    $(this).parent().remove();
-    let deleteKey = $(this).parent().children("input[name='relatedReportsKeyList']").val();
-    $("#ivsgtEditForm").append('<input type="hidden" name="deleteKeyList" value="' + deleteKey + '">');
+  $(this).parent().remove();
+  let deleteKey = $(this).parent().children("input[name='relatedReportsKeyList']").val();
+  $("#ivsgtEditForm").append('<input type="hidden" name="deleteKeyList" value="' + deleteKey + '">');
 });
 
 $(document).on('change', '#arrestCd', function (){
-    dynamicOption('#arrestCd2', $(this).val());
+  dynamicOption('#arrestCd2', $(this).val());
 });
 
 $(document).on('change', '#searchArrestCd', function (){
-    dynamicOption('#searchArrestCd2', $(this).val(), '검거유형2');
+  dynamicOption('#searchArrestCd2', $(this).val(), '검거유형2');
 });
 
 $(function(){
-    $("#dateSelectorDiv").datepicker({
-      format: "yyyy-mm-dd",
-      language: "ko",
-      autoclose: true
-    });
+  $("#dateSelectorDiv").datepicker({
+    format: "yyyy-mm-dd",
+    language: "ko",
+    autoclose: true
+  });
 });
 
 
 function getIvsgtViewModal(ivsgtKey){
-    $.ajax({
-        url: '/ivsgt/ivsgtViewModal',
-        data: {ivsgtKey: ivsgtKey},
-        type: 'GET',
-        dataType:"html",
-        success: function(html){
-            $("#ivsgtViewBody").empty().append(html)
-            $("#ivsgtViewModal").modal('show');
-        },
-        error:function(){
+  $.ajax({
+    url: '/ivsgt/ivsgtViewModal',
+    data: {ivsgtKey: ivsgtKey},
+    type: 'GET',
+    dataType:"html",
+    success: function(html){
+      $("#ivsgtViewBody").empty().append(html)
+      $("#ivsgtViewModal").modal('show');
+    },
+    error:function(){
 
-        }
-    });
+    }
+  });
 }
 
 function getIvsgtEditModal(ivsgtKey, ivsgtType){
-    $.ajax({
-        url: '/ivsgt/ivsgtEditModal',
-        data: {
-            ivsgtKey: ivsgtKey,
-            ivsgtType: ivsgtType
-        },
-        type: 'GET',
-        dataType:"html",
-        success: function(html){
-            $("#ivsgtViewBody").empty();
-            $("#ivsgtEditModalContent").empty().append(html)
-            $("#ivsgtEditModal").modal('show');
-            $("[name='contentInfo']").summernote({
-                lang:'ko-KR',
-                height: 120,
-                disableDragAndDrop: true,
-                toolbar: [
-                    ['style', ['style']],
-                    ['font', ['bold', 'underline', 'clear']],
-                    ['color', ['color']],
-                    ['para', ['ul', 'ol', 'paragraph']],
-                    ['table', ['table']]
-                ]
-            });
-            $("[name='contentMain']").summernote({
-                lang:'ko-KR',
-                height: 120,
-                disableDragAndDrop: true,
-                toolbar: [
-                    ['style', ['style']],
-                    ['font', ['bold', 'underline', 'clear']],
-                    ['color', ['color']],
-                    ['para', ['ul', 'ol', 'paragraph']],
-                    ['table', ['table']]
-                ]
-            });
-            setUploadDiv();
-        },
-        error:function(){
+  $.ajax({
+    url: '/ivsgt/ivsgtEditModal',
+    data: {
+      ivsgtKey: ivsgtKey,
+      ivsgtType: ivsgtType
+    },
+    type: 'GET',
+    dataType:"html",
+    success: function(html){
+      $("#ivsgtViewBody").empty();
+      $("#ivsgtEditModalContent").empty().append(html)
+      $("#ivsgtEditModal").modal('show');
+      setEditor('editor', '400')
+      setUploadDiv();
+    },
+    error:function(){
 
-        }
-    });
+    }
+  });
 }
 
 function getSearchViewModal(ivsgtType, contentTitle){
-    $.ajax({
-        url: '/ivsgt/searchViewModal',
-        data: {
-            contentTitle: contentTitle,
-            ivsgtType: ivsgtType
-        },
-        type: 'GET',
-        dataType:"html",
-        success: function(html){
-            $("#searchViewBody").empty().append(html)
-            $("#searchViewModal").modal('show');
-        },
-        error:function(){
+  $.ajax({
+    url: '/ivsgt/searchViewModal',
+    data: {
+      contentTitle: contentTitle,
+      ivsgtType: ivsgtType
+    },
+    type: 'GET',
+    dataType:"html",
+    success: function(html){
+      $("#searchViewBody").empty().append(html)
+      $("#searchViewModal").modal('show');
+    },
+    error:function(){
 
-        }
-    });
+    }
+  });
 }
 
 function saveBoardInvestigation(contentState){
-    if(contentCheck()){
-        if(confirm("저장하시겠습니까?")){
-            $("#contentStatus").val(contentState);
-            contentFade("in");
-            const formData = new FormData($("#ivsgtEditForm")[0]);
-            for(const file of files) {
-                if(!file.isDelete)
-                    formData.append('uploadFiles', file, file.name);
-            }
-            $(".text-decoration-line-through").each(function (idx, el){
-                formData.append('fileSeq', $(el).attr("data-fileseq"));
-            })
-            $.ajax({
-                type : 'POST',
-                data : formData,
-                url : "/ivsgt/saveBoardInvestigation",
-                processData: false,
-                contentType: false,
-                success : function(result) {
-                    alert("저장되었습니다.");
-                    contentFade("out");
-                    $("#ivsgtEditModal").modal('hide');
-                    getIvsgtViewModal(result);
-                },
-                error : function(xhr, status) {
-                    alert("저장에 실패하였습니다.")
-                    contentFade("out");
-                }
-            })
+  if(contentCheck()){
+    if(confirm("저장하시겠습니까?")){
+      $("#contentStatus").val(contentState);
+      contentFade("in");
+      const formData = new FormData($("#ivsgtEditForm")[0]);
+      for(const file of files) {
+        if(!file.isDelete)
+          formData.append('uploadFiles', file, file.name);
+      }
+      $(".text-decoration-line-through").each(function (idx, el){
+        formData.append('fileSeq', $(el).attr("data-fileseq"));
+      })
+      formData.append('contentMain', CrossEditor.GetBodyValue());
+      $.ajax({
+        type : 'POST',
+        data : formData,
+        url : "/ivsgt/saveBoardInvestigation",
+        processData: false,
+        contentType: false,
+        success : function(result) {
+          alert("저장되었습니다.");
+          contentFade("out");
+          $("#ivsgtEditModal").modal('hide');
+          getIvsgtViewModal(result);
+        },
+        error : function(xhr, status) {
+          alert("저장에 실패하였습니다.")
+          contentFade("out");
         }
+      })
     }
+  }
 }
 
 function contentCheck(){
-    let flag = true;
-    if(!$("#contentTitle").val()){
-        alert("제목을 입력해주세요.")
-        flag = false;
-    }
-    else if(!$("#arrestCd").val()){
-        alert("검거유형1을 선택해주세요.")
-        flag = false;
-    }
-    else if(!$("#arrestCd2").val()){
-        alert("검거유형2를 선택해주세요.")
-        flag = false;
-    }
-    else if(!$("#relatedReport").is(':checked') && $("input[name='ivsgtType']").val() != "arrest") {
-        if ($('input[name="relatedReportsText"]').length < 1) {
-            alert("연관보고서를 확인해 주세요.")
-            flag = false;
-        }
+  let flag = true;
+  if(!$("#contentTitle").val()){
+    alert("제목을 입력해주세요.")
+    flag = false;
+  }
+  else if(!$("#arrestCd").val()){
+    alert("검거유형1을 선택해주세요.")
+    flag = false;
+  }
+  else if(!$("#arrestCd2").val()){
+    alert("검거유형2를 선택해주세요.")
+    flag = false;
+  }
+  else if(!$("#relatedReport").is(':checked') && $("input[name='ivsgtType']").val() != "arrest") {
+    if ($('input[name="relatedReportsText"]').length < 1) {
+      alert("연관보고서를 확인해 주세요.")
+      flag = false;
     }
+  }
 
-    flag = fileCheck(flag, files);
-    return flag;
+  flag = fileCheck(flag, files);
+  return flag;
 }
\ No newline at end of file
diff --git a/src/main/resources/templates/ivsgt/ivsgtEditModal.html b/src/main/resources/templates/ivsgt/ivsgtEditModal.html
index 25332c52..344dfc71 100644
--- a/src/main/resources/templates/ivsgt/ivsgtEditModal.html
+++ b/src/main/resources/templates/ivsgt/ivsgtEditModal.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="ko" xmlns:th="http://www.thymeleaf.org">
-  <div class="modal-header bg-dark">
-    <h5 class="modal-title text-white" id="planEditModalLabel">
+<div class="modal-header bg-dark">
+  <h5 class="modal-title text-white" id="planEditModalLabel">
     <th:block th:if="${boardInvestigation.ivsgtKey eq null}">
       <th:block th:if="${boardInvestigation.ivsgtType eq 'arrest'}">
         검거보고서 작성
@@ -24,136 +24,140 @@
         결과보고서 수정
       </th:block>
     </th:block>
-    </h5>
-    <button type="button" class="btn-close f-invert" data-bs-dismiss="modal" aria-label="Close"></button>
-  </div>
-  <div class="modal-body" id="ivsgtEditBody">
-    <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" id="contentStatus" name="contentStatus">
-      <input type="hidden" name="ivsgtType" th:value="${boardInvestigation.ivsgtType}">
-      <input type="hidden" name="arrestTypeKey" th:value="${boardInvestigation.arrestType != null ? boardInvestigation.arrestType.arrestTypeKey: ''}">
-      <div class="row mb-1">
-        <label for="wrtNm" class="col-sm-2 col-form-label text-center">작성자</label>
-        <div class="col-sm-2">
-          <input type="text" class="form-control" id="wrtNm" name="wrtNm" th:value="${boardInvestigation.wrtNm}" readonly>
-        </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" id="wrtDt" name="wrtDt" th:value="${#temporals.format(boardInvestigation.wrtDt, 'yyyy-MM-dd HH:mm')}" readonly>
-        </div>
+  </h5>
+  <button type="button" class="btn-close f-invert" data-bs-dismiss="modal" aria-label="Close"></button>
+</div>
+<div class="modal-body" id="ivsgtEditBody">
+  <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" id="contentStatus" name="contentStatus">
+    <input type="hidden" name="ivsgtType" th:value="${boardInvestigation.ivsgtType}">
+    <input type="hidden" name="arrestTypeKey" th:value="${boardInvestigation.arrestType != null ? boardInvestigation.arrestType.arrestTypeKey: ''}">
+    <div class="row mb-1">
+      <label for="wrtNm" class="col-sm-1 col-form-label col-form-label-sm text-center">작성자</label>
+      <div class="col-sm-2">
+        <input type="text" class="form-control form-control-sm" id="wrtNm" name="wrtNm" th:value="${boardInvestigation.wrtNm}" readonly>
       </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" id="contentTitle" name="contentTitle" th:value="${boardInvestigation.contentTitle}">
-        </div>
+      <label for="wrtDt" class="col-sm-1 col-form-label col-form-label-sm text-center">작성일시</label>
+      <div class="col-sm-2">
+        <input type="text" class="form-control form-control-sm" id="wrtDt" name="wrtDt" th:value="${#temporals.format(boardInvestigation.wrtDt, 'yyyy-MM-dd HH:mm')}" readonly>
       </div>
-      <div class="row mb-1" id="arrestTypeDiv">
-        <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>
-            <th:block th:each="commonCode:${session.commonCode.get('AT')}">
-                <option th:value="${commonCode.itemCd}" th:text="${commonCode.itemValue}"
-                        th:selected="${boardInvestigation.arrestType != null and commonCode.itemCd eq boardInvestigation.arrestType.arrestCd}"></option>
+    </div>
+    <div class="row mb-1">
+      <label for="contentTitle" class="col-sm-1 col-form-label col-form-label-sm text-center">제목</label>
+      <div class="col-sm-11">
+        <input type="text" class="form-control form-control-sm" id="contentTitle" name="contentTitle" th:value="${boardInvestigation.contentTitle}">
+      </div>
+    </div>
+    <div class="row mb-1" id="arrestTypeDiv">
+      <label class="col-sm-1 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>
+          <th:block th:each="commonCode:${session.commonCode.get('AT')}">
+            <option th:value="${commonCode.itemCd}" th:text="${commonCode.itemValue}"
+                    th:selected="${boardInvestigation.arrestType != null and commonCode.itemCd eq boardInvestigation.arrestType.arrestCd}"></option>
+          </th:block>
+        </select>
+      </div>
+      <label class="col-sm-1 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>
+          <th:block th:each="num : ${#numbers.sequence(1,#lists.size(session.commonCode.get('AT')))}">
+            <th:block th:if="${boardInvestigation.arrestType ne null && 'AT'+num == boardInvestigation.arrestType.arrestCd}" th:each="commonCode:${session.commonCode.get('AT'+num)}">
+              <option th:value="${commonCode.itemCd}" th:text="${commonCode.itemValue}" th:selected="${boardInvestigation.arrestType.arrestCd2 eq commonCode.itemCd}"></option>
             </th:block>
-          </select>
-        </div>
-        <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>
-            <th:block th:each="num : ${#numbers.sequence(1,#lists.size(session.commonCode.get('AT')))}">
-              <th:block th:if="${boardInvestigation.arrestType ne null && 'AT'+num == boardInvestigation.arrestType.arrestCd}" th:each="commonCode:${session.commonCode.get('AT'+num)}">
-                <option th:value="${commonCode.itemCd}" th:text="${commonCode.itemValue}" th:selected="${boardInvestigation.arrestType.arrestCd2 eq commonCode.itemCd}"></option>
-              </th:block>
-            </th:block>
-          </select>
-        </div>
+          </th:block>
+        </select>
       </div>
+    </div>
+    <div class="row mb-1">
+      <label for="contentInfoDiv" class="col-sm-1 col-form-label col-form-label-sm text-center">사건개요</label>
+      <div class="col-sm-11" id="contentInfoDiv">
+        <textarea class="form-control form-control-sm" name='contentInfo' th:text="${boardInvestigation.contentInfo}"></textarea>
+      </div>
+    </div>
+    <div class="row mb-1">
+      <label for="contentMainDiv" class="col-sm-1 col-form-label col-form-label-sm text-center">주요내용</label>
+      <div class="col-sm-11" id="contentMainDiv">
+        <div id="editor"></div>
+        <textarea id='content' class="d-none" th:utext="${boardInvestigation.contentMain}"></textarea>
+      </div>
+    </div>
+    <div class="row mb-1">
+      <label for="hashTags" class="col-sm-1 col-form-label col-form-label-sm text-center">해시태그</label>
+      <div class="col-sm-11">
+        <input type="text" class="form-control form-control-sm" id="hashTags" name="hashTags" th:value="${boardInvestigation.hashTags}"
+               placeholder="띄어쓰기로 각 태그를 구분합니다. 한 태그 내에서는 띄어쓰기 없이 입력해주세요. ex)태그1 태그2">
+      </div>
+    </div>
+    <div class="row mb-1">
+      <label for="fileInputer" class="col-sm-1 col-form-label col-form-label-sm text-center">업로드 자료</label>
+      <div class="col-sm-11" 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>
+    </div>
+    <th:block th:if="${boardInvestigation.ivsgtType eq 'proceeding' or boardInvestigation.ivsgtType eq 'result'}">
       <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">
-          <input type="text" class="form-control form-control-sm" id="hashTags" name="hashTags" th:value="${boardInvestigation.hashTags}"
-                 placeholder="띄어쓰기로 각 태그를 구분합니다. 한 태그 내에서는 띄어쓰기 없이 입력해주세요. ex)태그1 태그2">
-        </div>
-      </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>
-      </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>
+        <label for="relatedReportDiv" 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">
+            <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 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>
+      <div class="row">
+        <label for="relatedReportDiv" class="col-sm-1 col-form-label col-form-label-sm text-center"></label>
+        <div class="col-sm-11 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 type="hidden" name="relatedReportsText" th:value="${relatedReports.contentTitle}">
+              <div class="row">
+                <label class="col-sm-auto col-form-label col-form-label-sm" th:text="${relatedReports.contentTitle}"></label>
+                <button class="btn btn-sm btn-primary col-auto cancel-btn"><i class="bi-x"></i></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>
+          </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>
-      </th:block>
-    </form>
-  </div>
-  <div class="modal-footer bg-light">
-    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button>
-    <button type="button" class="btn btn-warning" id="saveTempBtn">임시저장</button>
-    <button type="button" class="btn btn-primary" id="saveIvsgtBtn">저장</button>
-  </div>
+      </div>
+    </th:block>
+  </form>
+</div>
+<div class="modal-footer bg-light">
+  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button>
+  <button type="button" class="btn btn-warning" id="saveTempBtn">임시저장</button>
+  <button type="button" class="btn btn-primary" id="saveIvsgtBtn">저장</button>
+</div>
 </html>
\ No newline at end of file
diff --git a/src/main/resources/templates/ivsgt/ivsgtViewModal.html b/src/main/resources/templates/ivsgt/ivsgtViewModal.html
index d06db342..16d912ca 100644
--- a/src/main/resources/templates/ivsgt/ivsgtViewModal.html
+++ b/src/main/resources/templates/ivsgt/ivsgtViewModal.html
@@ -51,9 +51,10 @@
         <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 class="form-control-sm" th:text="${boardInvestigation.contentInfo}"></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>
           <div class="col-sm-11">
@@ -99,9 +100,7 @@
         <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>
+              <label class="col-sm-auto col-form-label col-form-label-sm" th:text="${relatedReports.contentTitle}"></label>
             </th:block>
           </div>
         </div>