From 6913c45c750fed7aaaa2d57bb90108055344b640 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: Mon, 7 Mar 2022 17:03:38 +0900
Subject: [PATCH] =?UTF-8?q?=ED=98=84=EC=9E=A5=EC=88=98=EC=A7=91=20?=
 =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EC=83=81=EC=84=B8=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=AA=A8=EB=8B=AC=20=EB=B3=80=ED=99=98.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../com/mca/cmmn/web/AdminController.java     |   2 +-
 .../webapp/WEB-INF/jsp/admin/dashBoard.jsp    |   8 +-
 .../webapp/WEB-INF/jsp/admin/fieldData.jsp    |  41 ++-
 .../webapp/WEB-INF/jsp/admin/fieldView.jsp    | 195 +++++++-------
 src/main/webapp/css/style.css                 |   1 -
 src/main/webapp/js/admin/fieldData.js         | 243 +++++++++++++++++-
 src/main/webapp/js/admin/fieldView.js         | 211 ---------------
 7 files changed, 369 insertions(+), 332 deletions(-)
 delete mode 100644 src/main/webapp/js/admin/fieldView.js

diff --git a/src/main/java/com/mca/cmmn/web/AdminController.java b/src/main/java/com/mca/cmmn/web/AdminController.java
index 6ab132e..bb14877 100644
--- a/src/main/java/com/mca/cmmn/web/AdminController.java
+++ b/src/main/java/com/mca/cmmn/web/AdminController.java
@@ -480,7 +480,7 @@ public class AdminController {
 			
 			model.addAttribute("fieldDataVO", fieldDataVO);
 			model.addAttribute("userVO", userVO);
-			return "admin/fieldView";
+			return "admin/html/fieldView";
 		} catch (Exception e) {
 			// TODO: handle exception
 			e.printStackTrace();
diff --git a/src/main/webapp/WEB-INF/jsp/admin/dashBoard.jsp b/src/main/webapp/WEB-INF/jsp/admin/dashBoard.jsp
index 7aa4340..2990702 100644
--- a/src/main/webapp/WEB-INF/jsp/admin/dashBoard.jsp
+++ b/src/main/webapp/WEB-INF/jsp/admin/dashBoard.jsp
@@ -52,7 +52,7 @@
           </div>
         </div>
       </div>
-      <div class="card my-2">
+      <%--<div class="card my-2">
         <div class="card-body row">
           <div class="col-auto">
             <img src="/images/icon/icon_002.png" width="60" height="60" alt="">
@@ -73,7 +73,7 @@
             <h3>0</h3>
           </div>
         </div>
-      </div>
+      </div>--%>
       <div class="card my-2">
         <div class="card-body row">
           <div class="col-auto">
@@ -104,7 +104,7 @@
           <div id="mapUseFromDayChart"></div>
         </div>
       </div>
-      <div class="card my-2">
+      <%--<div class="card my-2">
         <div class="card-body">
           <div class="col-auto">
             <p class="mb-0 text-black-50">-</p>
@@ -119,7 +119,7 @@
             그래프
           </div>
         </div>
-      </div>
+      </div>--%>
     </div>
   </div>
 </div>
diff --git a/src/main/webapp/WEB-INF/jsp/admin/fieldData.jsp b/src/main/webapp/WEB-INF/jsp/admin/fieldData.jsp
index 1e10d0a..c26396e 100644
--- a/src/main/webapp/WEB-INF/jsp/admin/fieldData.jsp
+++ b/src/main/webapp/WEB-INF/jsp/admin/fieldData.jsp
@@ -4,9 +4,13 @@
 <%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui" %>
 <%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
 
+<link href="<c:out value="/css/normalize.css" />" rel="stylesheet">
+<link href="<c:out value="/css/openlayers/ol.css" />" rel="stylesheet">
+
+<script src="<c:out value="/js/openlayers/ol.js" />"></script>
+<script src="<c:out value="/js/openlayers/proj4.js" />"></script>
+
 <script src="<c:url value="/js/admin/fieldData.js"/>"></script>
-
-
 <style>
     .searchList > li {
         display: inline;
@@ -18,35 +22,35 @@
         <div class="row justify-content-between bg-white mx-3 py-2">
             <div class="col-auto">
                 <ul class="nav">
-                    <li class="nav-item">
+                    <li class="nav-item statusTab">
                         <a class="nav-link ${fieldDataSearchVO.status0 eq 1?'active':'disabled'}" href="#">
                             <input type="checkbox" class="statusChkBox d-none" name="status0" id="status0"
                                    value="1" ${fieldDataSearchVO.status0 eq 1?'checked':''}>
                             <label for="status0">수집</label>
                         </a>
                     </li>
-                    <li class="nav-item">
+                    <li class="nav-item statusTab">
                         <a class="nav-link ${fieldDataSearchVO.status1 eq 1?'active':'disabled'}" href="#">
                             <input type="checkbox" class="statusChkBox d-none" name="status1" id="status1"
                                    value="1" ${fieldDataSearchVO.status1 eq 1?'checked':''}>
                             <label for="status1">검증실패</label>
                         </a>
                     </li>
-                    <li class="nav-item">
+                    <li class="nav-item statusTab">
                         <a class="nav-link ${fieldDataSearchVO.status2 eq 1?'active':'disabled'}" href="#">
                             <input type="checkbox" class="statusChkBox d-none" name="status2" id="status2"
                                    value="1" ${fieldDataSearchVO.status2 eq 1?'checked':''}>
                             <label for="status2">검증</label>
                         </a>
                     </li>
-                    <li class="nav-item">
+                    <li class="nav-item statusTab">
                         <a class="nav-link ${fieldDataSearchVO.status3 eq 1?'active':'disabled'}">
                             <input type="checkbox" class="statusChkBox d-none" name="status3" id="status3"
                                    value="1" ${fieldDataSearchVO.status3 eq 1?'checked':''}>
                             <label for="status3">반영실패</label>
                         </a>
                     </li>
-                    <li class="nav-item">
+                    <li class="nav-item statusTab">
                         <a class="nav-link ${fieldDataSearchVO.status4 eq 1?'active':'disabled'}" href="#">
                             <input type="checkbox" class="statusChkBox d-none" name="status4" id="status4"
                                    value="1" ${fieldDataSearchVO.status4 eq 1?'checked':''}>
@@ -99,9 +103,10 @@
                 <tbody>
                 <c:if test="${count >= 1}">
                     <c:forEach var="item" items="${fieldDataList}">
-                        <tr>
-                            <td><a href="/admin/fieldData/${item.id}"><c:out value="${item.id}"/></a></td>
-                            <td><a href="/admin/fieldData/${item.id}"><c:out value="${item.region}"/></a></td>
+                        <tr class="clickAbleObj fieldDataTr" data-id="${item.id}">
+                          <%--<a href="/admin/fieldData/${item.id}">--%>
+                            <td><c:out value="${item.id}"/></td>
+                            <td><c:out value="${item.region}"/></td>
                             <td><c:out value="${item.userVO.company}"/></td>
                             <td><c:out value="${item.userVO.name}"/></td>
                             <td class="td_date"><c:out value="${item.save_date}"/></td>
@@ -138,3 +143,19 @@
         </div>
     </form:form>
 </div>
+
+
+<div class="modal fade" id="fieldViewModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
+     aria-labelledby="fieldViewModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-xl">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="fieldViewModalLabel">현장수집 데이터</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body" id="fieldViewModalBody">
+
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/main/webapp/WEB-INF/jsp/admin/fieldView.jsp b/src/main/webapp/WEB-INF/jsp/admin/fieldView.jsp
index b34abdd..d2ed934 100644
--- a/src/main/webapp/WEB-INF/jsp/admin/fieldView.jsp
+++ b/src/main/webapp/WEB-INF/jsp/admin/fieldView.jsp
@@ -4,115 +4,102 @@
 <%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui" %>
 <%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
 
-<link href="<c:out value="/css/normalize.css" />" rel="stylesheet">
-<link href="<c:out value="/css/openlayers/ol.css" />" rel="stylesheet">
-
-<script src="<c:out value="/js/openlayers/ol.js" />"></script>
-<script src="<c:out value="/js/openlayers/proj4.js" />"></script>
 <script>
-    const field_data = JSON.parse('${fieldDataVO.field_data}');
+  field_data = JSON.parse('${fieldDataVO.field_data}');
 </script>
-
-
-<script src="<c:out value="/js/admin/fieldView.js" />"></script>
-
-<div class="section_title">
-    <!-- <p>현장 지원 시스템</p> -->
-</div>
 <div class="section_content">
-    <div class="row justify-content-end bg-white mx-3 py-2">
-        <table class="table table-hover text-center">
-            <thead>
-            <tr>
-                <h5>담당자</h5>
-            </tr>
-            </thead>
-            <tbody>
-            <tr>
-                <th>소속</th>
-                <td class="text-center"><c:out value='${userVO.company}'/></td>
-                <th>이름</th>
-                <td class="text-center"><c:out value='${userVO.name}'/></td>
-                <th>연락처</th>
-                <td class="text-center"><c:out value='${userVO.phonenum}'/></td>
-            </tr>
-            </tbody>
-        </table>
-    </div>
-    <div class="row justify-content-end bg-white mx-3 mt-3 mb-2 py-2">
-        <table class="table table-hover text-center">
-            <thead>
-            <tr>
-                <h3>현장수집 데이터</h3>
-            </tr>
-            </thead>
-            <tbody>
-            <tr>
-                <th>레이어 ID</th>
-                <td class="text-center"><c:out value="${fieldDataVO.layer_id}"/></td>
-                <th>수집일</th>
-                <td class="text-center"><c:out value="${fieldDataVO.save_date}"/></td>
-            </tr>
-            <tr>
-                <th>지역</th>
-                <td class="text-center"><c:out value="${fieldDataVO.region}"/></td>
-                <th>상태</th>
-                <td class="text-center">
-                    <c:choose>
-                        <c:when test="${fieldDataVO.status eq '0'}">
-                            <span class="label label-warning">수집</span>
-                        </c:when>
-                        <c:when test="${fieldDataVO.status eq '1'}">
-                            <span class="label label-danger">검증실패</span>
-                        </c:when>
-                        <c:when test="${fieldDataVO.status eq '2'}">
-                            <span class="label label-success">검증성공</span>
-                        </c:when>
-                        <c:when test="${fieldDataVO.status eq '3'}">
-                            <span class="label label-danger">반영실패</span>
-                        </c:when>
-                        <c:when test="${fieldDataVO.status eq '4'}">
-                            <span class="label label-success">반영</span>
-                        </c:when>
-                    </c:choose>
-                </td>
-            </tr>
-            <tr>
-                <th>설명</th>
-                <td></td>
-                <th>오류내용</th>
-                <td></td>
-            </tr>
-            </tbody>
-        </table>
-    </div>
-    <div class="border border-2 border border-dark border border-start-0 border-end-0 py-2 mx-3">
-        <div class="mapWrap">
-            <div class="map-title text-center">측량데이터</div>
-            <div class="map" id="map"></div>
+  <div class="row justify-content-end bg-white mx-3 py-2">
+    <div class="col-4">
+      <div class="row mb-3">
+        <label for="company" class="col-4 col-form-label fw-bold text-end">소속</label>
+        <div class="col-8">
+          <input type="text" class="form-control bg-white border-0" id="company" placeholder="col-form-label" value="${userVO.company}" readonly>
         </div>
-        <div class="fieldDataDiv">
-            <table class="fieldDataTable" id="fieldDataTable">
-                <thead>
-                <tr>
-                    <th colspan="4">속성정보</th>
-                </tr>
-                </thead>
-                <tbody id="fieldDataBody">
+        <label for="name" class="col-4 col-form-label fw-bold text-end">이름</label>
+        <div class="col-8">
+          <input type="text" class="form-control bg-white border-0" id="name" placeholder="col-form-label" value="${userVO.name}" readonly>
+        </div>
+        <label for="phonenum" class="col-4 col-form-label fw-bold text-end">연락처</label>
+        <div class="col-8">
+          <input type="text" class="form-control bg-white border-0" id="phonenum" placeholder="col-form-label" value="${userVO.phonenum}" readonly>
+        </div>
+      </div>
+      <div class="row mb-3">
+        <label for="layer_id" class="col-4 col-form-label fw-bold text-end">레이어 ID</label>
+        <div class="col-8">
+          <input type="text" class="form-control bg-white border-0" id="layer_id" placeholder="col-form-label" value="${fieldDataVO.layer_id}" readonly>
+        </div>
+        <label for="save_date" class="col-4 col-form-label fw-bold text-end">수집일</label>
+        <div class="col-8">
+          <input type="text" class="form-control bg-white border-0" id="save_date" placeholder="col-form-label" value="${fieldDataVO.save_date}" readonly>
+        </div>
+        <label for="region" class="col-4 col-form-label fw-bold text-end">지역</label>
+        <div class="col-8">
+          <input type="text" class="form-control bg-white border-0" id="region" placeholder="col-form-label" value="${fieldDataVO.region}" readonly>
+        </div>
+        <label class="col-4 col-form-label fw-bold text-end">상태</label>
+        <div class="col-8">
+          <c:choose>
+            <c:when test="${fieldDataVO.status eq '0'}">
+              <span class="card-warning ms-2 w-50 text-center">수집</span>
+            </c:when>
+            <c:when test="${fieldDataVO.status eq '1'}">
+              <span class="card-danger ms-2 w-50 text-center">검증실패</span>
+            </c:when>
+            <c:when test="${fieldDataVO.status eq '2'}">
+              <span class="card-success ms-2 w-50 text-center">검증성공</span>
+            </c:when>
+            <c:when test="${fieldDataVO.status eq '3'}">
+              <span class="card-danger ms-2 w-50 text-center">반영실패</span>
+            </c:when>
+            <c:when test="${fieldDataVO.status eq '4'}">
+              <span class="card-success ms-2 w-50 text-center">반영</span>
+            </c:when>
+          </c:choose>
+        </div>
+        <label for="description" class="col-4 col-form-label fw-bold text-end">설명</label>
+        <div class="col-8">
+          <input type="text" class="form-control bg-white border-0" id="description" readonly>
+        </div>
+        <label for="errInfo" class="col-4 col-form-label fw-bold text-end">오류내용</label>
+        <div class="col-8">
+          <input type="text" class="form-control bg-white border-0" id="errInfo" readonly>
+        </div>
+      </div>
+    </div>
+    <div class="col-8">
+      <ul class="nav nav-tabs" id="myTab" role="tablist">
+        <li class="nav-item" role="presentation">
+          <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">측량데이터</button>
+        </li>
+        <li class="nav-item" role="presentation">
+          <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">속성정보</button>
+        </li>
+      </ul>
+      <div class="tab-content" id="myTabContent">
+        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
+          <div class="map" id="map">
 
-                </tbody>
-            </table>
+          </div>
         </div>
-        <ul id="fieldDataPaging" class="fieldDataPaging"></ul>
+        <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
+          <table class="fieldDataTable" id="fieldDataTable">
+            <tbody id="fieldDataBody">
+
+            </tbody>
+          </table>
+        </div>
+      </div>
+      <ul id="fieldDataPaging" class="fieldDataPaging"></ul>
     </div>
-    <div class="section_btn">
-        <p class="search_p1">
-            <input class="btn btn-primary" type="button" value="목록" onclick="location.href='/admin/fieldData'"/>
-        </p>
-        <p class="search_p2">
-            <input class="btn btn-secondary" type="button" value="표준DB변환 및 검증" onclick="fieldVerify();"/>
-            <input class="btn btn-success" type="button" value="반영" onclick="fieldReflect();"/>
-        </p>
-    </div>
-</div>
+  </div>
+  <div class="section_btn">
+    <p class="search_p1">
+      <input class="btn btn-primary" type="button" value="목록" onclick="location.href='/admin/fieldData'"/>
+    </p>
+    <p class="search_p2">
+      <input class="btn btn-secondary" type="button" value="표준DB변환 및 검증" onclick="fieldVerify();"/>
+      <input class="btn btn-success" type="button" value="반영" onclick="fieldReflect();"/>
+    </p>
+  </div>
 </div>
\ No newline at end of file
diff --git a/src/main/webapp/css/style.css b/src/main/webapp/css/style.css
index d81ca00..cabd4b7 100644
--- a/src/main/webapp/css/style.css
+++ b/src/main/webapp/css/style.css
@@ -189,7 +189,6 @@ a {
 }
 
 .fieldDataTable > tbody> tr > th{
-	padding: 7px 5px;
 	background-color: #f1f1f1;
 	border: 1px solid #ccc;
 	text-align: center;
diff --git a/src/main/webapp/js/admin/fieldData.js b/src/main/webapp/js/admin/fieldData.js
index b4f1c59..f2076e9 100644
--- a/src/main/webapp/js/admin/fieldData.js
+++ b/src/main/webapp/js/admin/fieldData.js
@@ -1,4 +1,56 @@
-$(document).on("click", ".nav-item", function () {
+let field_data;
+let map;
+let fieldViewModal;
+
+proj4.defs('EPSG:5186', '+proj=tmerc +lat_0=38 +lon_0=127 +k=1 +x_0=200000 +y_0=600000 +ellps=GRS80 +units=m +no_defs');
+
+
+let wkt = null;
+
+let format = new ol.format.WKT();
+let objVectorSource = new ol.source.Vector({});
+let objVectorLayer = new ol.layer.Vector({
+  source: objVectorSource,
+  style: objStyle
+});
+
+let cursorStyle = "";
+let selected = null;
+
+let highlightStyle = new ol.style.Style({
+  stroke: new ol.style.Stroke({
+    color: '#3399CC',
+    width: 8,
+  }),
+});
+
+$(function () {
+  // fieldViewModal = new bootstrap.Modal(document.getElementById('fieldViewModal'));
+  fieldViewModal = document.getElementById('fieldViewModal');
+  fieldViewModal.addEventListener('shown.bs.modal', function (event) {
+    makePropPaging();
+    drawingObj();
+    makePropTable();
+  })
+
+})
+
+$(document).on('click', '.fieldDataTr', function () {
+  const dataid = $(this).attr("data-id");
+  $.ajax({
+    url: '/admin/fieldData/' + dataid,
+    type: 'GET',
+    dataType: "html",
+    success: function (html) {
+      $("#fieldViewModalBody").empty().append(html);
+      $(fieldViewModal).modal('show')
+    },
+    error: function () {
+
+    }
+  });
+})
+$(document).on("click", ".statusTab", function () {
     const chkBox = $(this).find(".statusChkBox")[0]
     chkBox.checked = !chkBox.checked;
     $("[name='searchForm']").submit();
@@ -22,3 +74,192 @@ function getCheckoxValue() {
     document.getElementById('result').innerText
         = result;
 }
+
+
+function fieldVerify() {
+  alert('준비중');
+}
+
+function fieldReflect() {
+  alert('준비중');
+}
+
+function objStyle(feature, resolution) {
+  var selected = feature.get('selected');
+  var style = null;
+  if (selected) {
+    style = new ol.style.Style({
+      stroke: new ol.style.Stroke({
+        color: '#f00',
+        width: 5
+      })
+    });
+  } else {
+    style = new ol.style.Style({
+      stroke: new ol.style.Stroke({
+        color: '#52b4e7',
+        width: 5
+      })
+    });
+  }
+  return style;
+}
+
+function resetObjStyle() {
+  var feature = getObjFeatureBySelected();
+  if (feature) {
+    feature.set("selected", false);
+  }
+}
+
+function makePropTable(idx) {
+  if (idx == null)
+    idx = 0;
+  $("#fieldDataBody > tr").remove();
+
+  var num = 0;
+  var tags = "";
+  for (var i in field_data[idx].prop) {
+    num++;
+    if (num % 2 == 0) {
+      tags += "<th>" + i + "</th><td>" + numberFormatter(field_data[idx].prop[i], 2) + "</td></tr>";
+    } else {
+      tags += "<tr><th>" + i + "</th><td>" + numberFormatter(field_data[idx].prop[i],2) + "</td>";
+      // tags += "<tr><th>" + i + "</th><td>" + field_data[idx].prop[i] + "</td>";
+    }
+  }
+  $("#fieldDataBody").append(tags);
+
+  nowPagingOn(idx);
+  resetObjStyle();
+
+  //중심좌표 구하기?
+  //var aa = feature.getGeometry().v;
+  //var oo = ol.extent.getCenter(aa);
+
+  var center = field_data[idx].center;
+  var feature = getObjFeatureByIdx(idx);
+
+  moveCenter(center);
+  if (feature) {
+    feature.set("selected", true);
+  }
+}
+
+function numberFormatter(num,pointer){
+  if(isNaN(num)){
+    return num;
+  }else{
+    const dotPoint = Math.pow(10,pointer)
+    return Math.round(num*dotPoint)/dotPoint;
+  }
+}
+function nowPagingOn(idx) {
+  $(".paging_li").removeClass("fieldPagingOn")
+  $("#paging_li" + idx).attr("class", "fieldPagingOn paging_li");
+}
+
+function makePropPaging() {
+  var pagingNumber = 0;
+  for (var idx in field_data) {
+    pagingNumber++;
+    $("#fieldDataPaging").append('<li class="paging_li" id="paging_li' + idx + '" onclick="makePropTable(' + idx + ')">' + pagingNumber + '</li>');
+  }
+}
+
+function drawingObj() {
+  objVectorSource.clear();
+
+  let baseMap = new ol.layer.Tile({
+    title: 'vworldMap',
+    visible: true,
+    type: 'base',
+    source: new ol.source.XYZ({
+      url: 'http://api.vworld.kr/req/wmts/1.0.0/5616CAD1-5D79-3EE3-87D5-878A4AD0F91F/Base/{z}/{y}/{x}.png'
+    })
+  });
+
+
+  let view = new ol.View({
+    center: ol.proj.transform([203766.984, 541132.2], 'EPSG:5186', 'EPSG:3857'),
+    zoom: 18, // 초기화면 zoom level
+    minZoom: 1, // 최소 zoom level
+    maxZoom: 19, // 최대 zoom level
+  });
+
+  map = new ol.Map({
+    layers: [baseMap],
+    logo: false, //우측하단 로고 제거
+    target: 'map',
+    loadTilesWhileAnimating: true,
+    view: view
+  });
+
+  map.on("pointermove", function (e) {
+    if (selected !== null) {
+      selected.setStyle(undefined);
+      selected = null;
+    }
+    var newStyle = this.hasFeatureAtPixel(e.pixel) ? "pointer" : "";
+    newStyle !== cursorStyle && $(this.getTargetElement()).css("cursor", cursorStyle = newStyle);
+    map.forEachFeatureAtPixel(e.pixel, function (f) {
+      selected = f;
+      f.setStyle(highlightStyle);
+      return true;
+    });
+  });
+
+
+// feature click evt
+  map.on('click', function (event) {
+    map.forEachFeatureAtPixel(event.pixel, function (feature, layer) {
+      var idx = feature.get("idx");
+      makePropTable(idx);
+    })
+  });
+
+  map.addLayer(objVectorLayer);
+  var objFeatures = [];
+  for (var idx in field_data) {
+    var objFeature = format.readFeature(field_data[idx].WKT, {
+      dataProjection: 'EPSG:5186',
+      featureProjection: 'EPSG:3857'
+    });
+    objFeature.setProperties({
+      "idx": idx,
+      "selected": false
+    });
+    objFeatures.push(objFeature);
+  }
+  objVectorSource.addFeatures(objFeatures);
+}
+
+function moveCenter(center) {
+  var coordinates = ol.proj.transform(center, 'EPSG:5186', 'EPSG:3857');
+  map.getView().setCenter(coordinates);
+}
+
+function getObjFeatureBySelected() {
+  var features = objVectorSource.getFeatures();
+  var feature = null;
+
+  for (var i = 0, size = features.length; i < size; i++) {
+    if (features[i].get('selected') == true) {
+      feature = features[i];
+      break;
+    }
+  }
+  return feature;
+}
+
+function getObjFeatureByIdx(idx) {
+  var features = objVectorSource.getFeatures();
+  var feature = null;
+  for (var i = 0, size = features.length; i < size; i++) {
+    if (features[i].get('idx') == idx) {
+      feature = features[i];
+      break;
+    }
+  }
+  return feature;
+}
diff --git a/src/main/webapp/js/admin/fieldView.js b/src/main/webapp/js/admin/fieldView.js
deleted file mode 100644
index dcf004b..0000000
--- a/src/main/webapp/js/admin/fieldView.js
+++ /dev/null
@@ -1,211 +0,0 @@
-let wkt = null;
-
-proj4.defs('EPSG:5186', '+proj=tmerc +lat_0=38 +lon_0=127 +k=1 +x_0=200000 +y_0=600000 +ellps=GRS80 +units=m +no_defs');
-
-let baseMap = new ol.layer.Tile({
-    title: 'vworldMap',
-    visible: true,
-    type: 'base',
-    source: new ol.source.XYZ({
-        url: 'http://api.vworld.kr/req/wmts/1.0.0/5616CAD1-5D79-3EE3-87D5-878A4AD0F91F/Base/{z}/{y}/{x}.png'
-    })
-});
-
-
-let view = new ol.View({
-    center: ol.proj.transform([203766.984, 541132.2], 'EPSG:5186', 'EPSG:3857'),
-    zoom: 18, // 초기화면 zoom level
-    minZoom: 1, // 최소 zoom level
-    maxZoom: 19, // 최대 zoom level
-});
-
-let map = new ol.Map({
-    layers: [baseMap],
-    logo: false, //우측하단 로고 제거
-    target: 'map',
-    loadTilesWhileAnimating: true,
-    view: view
-});
-
-let format = new ol.format.WKT();
-let objVectorSource = new ol.source.Vector({});
-let objVectorLayer = new ol.layer.Vector({
-    source: objVectorSource,
-    style: objStyle
-});
-
-let cursorStyle = "";
-let selected = null;
-
-let highlightStyle = new ol.style.Style({
-    stroke: new ol.style.Stroke({
-        color: '#3399CC',
-        width: 8,
-    }),
-});
-
-$(function () {
-    makePropPaging();
-    makePropTable();
-    map = new ol.Map({
-        layers: [baseMap],
-        logo: false, //우측하단 로고 제거
-        target: 'map',
-        loadTilesWhileAnimating: true,
-        view: view
-    });
-    drawingObj();
-});
-
-function fieldVerify() {
-    alert('준비중');
-}
-
-function fieldReflect() {
-    alert('준비중');
-}
-
-map.on("pointermove", function (e) {
-    if (selected !== null) {
-        selected.setStyle(undefined);
-        selected = null;
-    }
-    var newStyle = this.hasFeatureAtPixel(e.pixel) ? "pointer" : "";
-    newStyle !== cursorStyle && $(this.getTargetElement()).css("cursor", cursorStyle = newStyle);
-    map.forEachFeatureAtPixel(e.pixel, function (f) {
-        selected = f;
-        f.setStyle(highlightStyle);
-        return true;
-    });
-});
-
-
-// feature click evt
-map.on('click', function (event) {
-    map.forEachFeatureAtPixel(event.pixel, function (feature, layer) {
-        var idx = feature.get("idx");
-        makePropTable(idx);
-    })
-});
-
-function objStyle(feature, resolution) {
-    var selected = feature.get('selected');
-    var style = null;
-    if (selected) {
-        style = new ol.style.Style({
-            stroke: new ol.style.Stroke({
-                color: '#f00',
-                width: 5
-            })
-        });
-    } else {
-        style = new ol.style.Style({
-            stroke: new ol.style.Stroke({
-                color: '#52b4e7',
-                width: 5
-            })
-        });
-    }
-    return style;
-}
-
-function resetObjStyle() {
-    var feature = getObjFeatureBySelected();
-    if (feature) {
-        feature.set("selected", false);
-    }
-}
-
-function makePropTable(idx) {
-    if (idx == null)
-        idx = 0;
-    $("#fieldDataBody > tr").remove();
-
-    var num = 0;
-    var tags = "";
-    for (var i in field_data[idx].prop) {
-        num++;
-        if (num % 2 == 0) {
-            tags += "<th>" + i + "</th><td>" + field_data[idx].prop[i] + "</td></tr>";
-        } else {
-            tags += "<tr><th>" + i + "</th><td>" + field_data[idx].prop[i] + "</td>";
-        }
-    }
-    $("#fieldDataBody").append(tags);
-
-    nowPagingOn(idx);
-    resetObjStyle();
-
-    //중심좌표 구하기?
-    //var aa = feature.getGeometry().v;
-    //var oo = ol.extent.getCenter(aa);
-
-    var center = field_data[idx].center;
-    var feature = getObjFeatureByIdx(idx);
-
-    moveCenter(center);
-    if (feature) {
-        feature.set("selected", true);
-    }
-}
-
-function nowPagingOn(idx) {
-    $(".paging_li").removeClass("fieldPagingOn")
-    $("#paging_li" + idx).attr("class", "fieldPagingOn paging_li");
-}
-
-function makePropPaging() {
-    var pagingNumber = 0;
-    for (var idx in field_data) {
-        pagingNumber++;
-        $("#fieldDataPaging").append('<li class="paging_li" id="paging_li' + idx + '" onclick="makePropTable(' + idx + ')">' + pagingNumber + '</li>');
-    }
-}
-
-function drawingObj() {
-    objVectorSource.clear();
-    map.addLayer(objVectorLayer);
-    var objFeatures = [];
-    for (var idx in field_data) {
-        var objFeature = format.readFeature(field_data[idx].WKT, {
-            dataProjection: 'EPSG:5186',
-            featureProjection: 'EPSG:3857'
-        });
-        objFeature.setProperties({
-            "idx": idx,
-            "selected": false
-        });
-        objFeatures.push(objFeature);
-    }
-    objVectorSource.addFeatures(objFeatures);
-}
-
-function moveCenter(center) {
-    var coordinates = ol.proj.transform(center, 'EPSG:5186', 'EPSG:3857');
-    map.getView().setCenter(coordinates);
-}
-
-function getObjFeatureBySelected() {
-    var features = objVectorSource.getFeatures();
-    var feature = null;
-
-    for (var i = 0, size = features.length; i < size; i++) {
-        if (features[i].get('selected') == true) {
-            feature = features[i];
-            break;
-        }
-    }
-    return feature;
-}
-
-function getObjFeatureByIdx(idx) {
-    var features = objVectorSource.getFeatures();
-    var feature = null;
-    for (var i = 0, size = features.length; i < size; i++) {
-        if (features[i].get('idx') == idx) {
-            feature = features[i];
-            break;
-        }
-    }
-    return feature;
-}
\ No newline at end of file