From d2e549a43654b807d564b11e53addb0c917f038f Mon Sep 17 00:00:00 2001
From: leebeomjun <leebj91@xit.co.kr>
Date: Thu, 7 Sep 2023 15:27:01 +0900
Subject: [PATCH] =?UTF-8?q?=EB=8C=80=EC=8B=9C=EB=B3=B4=EB=93=9C=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../webapp/WEB-INF/jsp/include/dashboard.jsp  | 43 +++++++--------
 src/main/webapp/WEB-INF/jsp/index.jsp         |  5 +-
 .../fims/framework/common/xit-core-extend.css | 52 ++++++-------------
 3 files changed, 41 insertions(+), 59 deletions(-)

diff --git a/src/main/webapp/WEB-INF/jsp/include/dashboard.jsp b/src/main/webapp/WEB-INF/jsp/include/dashboard.jsp
index 008c4d89..f866fc48 100644
--- a/src/main/webapp/WEB-INF/jsp/include/dashboard.jsp
+++ b/src/main/webapp/WEB-INF/jsp/include/dashboard.jsp
@@ -2,21 +2,21 @@
 <%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>
 
 <div class="wrapper-dashboard">
-	<div class="card dashboard-item-2-1">
+	<div class="card dashboard-total">
 	    <div class="card-body row">
-	        <div class="col px-1 card-separator d-flex flex-column align-items-center">
+	        <div class="col px-4 card-separator d-flex flex-column align-items-center">
 	            <p class="mb-1">2/10</p>
 	            <i class="svg-cctv-fixed w-px-30 d-block" title="고정형CCTV"></i>
 	        </div>
-	        <div class="col px-1 card-separator d-flex flex-column align-items-center">
+	        <div class="col px-4 card-separator d-flex flex-column align-items-center">
 	            <p class="mb-1">2/3</p>
 	            <i class="svg-crackdown-road w-px-30 d-block" title="도보단속"></i>
 	        </div>
-	        <div class="col px-1 card-separator d-flex flex-column align-items-center">
+	        <div class="col px-4 card-separator d-flex flex-column align-items-center">
 	            <p class="mb-1">2/3</p>
 	            <i class="svg-cctv-drive w-px-30 d-block" title="이동형CCTV"></i>
 	        </div>
-	        <div class="col px-1 d-flex flex-column align-items-center">
+	        <div class="col px-4 d-flex flex-column align-items-center">
 	            <p class="mb-1">10/10</p>
 	            <i class="svg-crackdown-minwon w-px-30 d-block" title="민원(즉시단속)"></i>
 	        </div>
@@ -26,13 +26,13 @@
 	    </div>
 	</div>
 	
-	<div class="card dashboard-item-2-1">
+	<div class="card dashboard-total">
 	    <div class="card-body row">
-	        <div class="col px-1 card-separator d-flex flex-column align-items-center">
+	        <div class="col px-4 card-separator d-flex flex-column align-items-center">
 	            <p class="mb-1">2/10</p>
 	            <i class="svg-target-lvy w-px-30 d-block" title="등록대상"></i>
 	        </div>
-	        <div class="col px-1 d-flex flex-column align-items-center">
+	        <div class="col px-4 d-flex flex-column align-items-center">
 	            <p class="mb-1">2/3</p>
 	            <i class="svg-target-transfer w-px-30 d-block" title="이첩대상"></i>
 	        </div>
@@ -42,17 +42,17 @@
 	    </div>
 	</div>
 	
-	<div class="card dashboard-item-2-1">
+	<div class="card dashboard-total">
 	    <div class="card-body row">
-	        <div class="col px-1 card-separator d-flex flex-column align-items-center">
+	        <div class="col px-4 card-separator d-flex flex-column align-items-center">
 	            <p class="mb-1">2/10</p>
 	            <i class="svg-sendstat-guide w-px-30 d-block" title="계도장 발송현황"></i>
 	        </div>
-	        <div class="col px-1 card-separator d-flex flex-column align-items-center">
+	        <div class="col px-4 card-separator d-flex flex-column align-items-center">
 	            <p class="mb-1">2/3</p>
 	            <i class="svg-sendstat-before w-px-30 d-block" title="사전통보 발송현황"></i>
 	        </div>
-	        <div class="col px-1 d-flex flex-column align-items-center">
+	        <div class="col px-4 d-flex flex-column align-items-center">
 	            <p class="mb-1">2/3</p>
 	            <i class="svg-sendstat-nop w-px-30 d-block" title="고지서 발송현황"></i>
 	        </div>
@@ -62,17 +62,17 @@
 	    </div>
 	</div>
 	
-	<div class="card dashboard-item-2-1">
+	<div class="card dashboard-total">
 	    <div class="card-body row">
-	        <div class="col px-1 card-separator d-flex flex-column align-items-center">
+	        <div class="col px-4 card-separator d-flex flex-column align-items-center">
 	            <p class="mb-1">2/10</p>
 	            <i class="svg-opn-rcp w-px-30 d-block" title="접수"></i>
 	        </div>
-	        <div class="col px-1 card-separator d-flex flex-column align-items-center">
+	        <div class="col px-4 card-separator d-flex flex-column align-items-center">
 	            <p class="mb-1">2/3</p>
 	            <i class="svg-opn-decision w-px-30 d-block" title="수용/미수용"></i>
 	        </div>
-	        <div class="col px-1 d-flex flex-column align-items-center">
+	        <div class="col px-4 d-flex flex-column align-items-center">
 	            <p class="mb-1">2/3</p>
 	            <i class="svg-opn-selfdrop w-px-30 d-block" title="자진취하"></i>
 	        </div>
@@ -81,8 +81,9 @@
 	        의견진술관리 바로가기 >
 	    </div>
 	</div>
-	
-	<div class="card dashboard-item-4-3">
+</div>
+<div class="wrapper-dashboard">
+	<div class="card dashboard-chart">
 	    <div class="card-header d-flex align-items-center justify-content-between">
 	        <h5 class="card-title m-0 me-2">단속 자료 통계(유형별)</h5>
 	        <div>건수(최근 n일)</div>
@@ -95,7 +96,7 @@
 	    </div>
 	</div>
 	
-	<div class="card dashboard-item-4-3">
+	<div class="card dashboard-chart">
 	    <div class="card-header d-flex align-items-center justify-content-between">
 	        <h5 class="card-title m-0 me-2">단속통계</h5>
 	        <div>처리유형별(일별)</div>
@@ -108,7 +109,7 @@
 	    </div>
 	</div>
 	
-	<div class="card dashboard-item-4-3">
+	<div class="card dashboard-chart">
 	    <div class="card-header d-flex align-items-center justify-content-between">
 	        <h5 class="card-title m-0 me-2">발송통계</h5>
 	        <div>발송유형별(일별)</div>
@@ -121,7 +122,7 @@
 	    </div>
 	</div>
 	
-	<div class="card dashboard-item-4-3">
+	<div class="card dashboard-chart">
 	    <div class="card-header d-flex align-items-center justify-content-between">
 	        <h5 class="card-title m-0 me-2">의견진술통계</h5>
 	        <div>처리유형별(일별)</div>
diff --git a/src/main/webapp/WEB-INF/jsp/index.jsp b/src/main/webapp/WEB-INF/jsp/index.jsp
index 2fc056bf..ca14e011 100644
--- a/src/main/webapp/WEB-INF/jsp/index.jsp
+++ b/src/main/webapp/WEB-INF/jsp/index.jsp
@@ -20,9 +20,10 @@
 		        </div>
 		        <div id="innerPageTabContents" class="tab-content">
 		        	<div id="tab-dashboard" class="tab-pane active show" role="tabpanel">
-		        		<div id="divdashboard">
+		        		<div id="divdashboard" style="max-height: 800px;overflow-y:auto;">
 		        			<div class="content-wrapper">
-		        				<div class="container-xxl flex-grow-1 container-p-y">
+		        				<div class="container-xxl flex-grow-1 container-p-y" 
+		        				style="display: flex;flex-flow: column;align-items: center;">
 		        					<jsp:include page="/WEB-INF/jsp/include/dashboard.jsp" />
 		        				</div>
 		        			</div>
diff --git a/src/main/webapp/resources/css/fims/framework/common/xit-core-extend.css b/src/main/webapp/resources/css/fims/framework/common/xit-core-extend.css
index c3b9c834..77f6929e 100644
--- a/src/main/webapp/resources/css/fims/framework/common/xit-core-extend.css
+++ b/src/main/webapp/resources/css/fims/framework/common/xit-core-extend.css
@@ -44,20 +44,19 @@
 }
 
 .wrapper-dashboard {
-    display: grid;
-    grid-template-columns : repeat(auto-fill,minmax(145px, 145px));
-    grid-template-rows: repeat(auto-fill,minmax(116px, 116px));
-    justify-content: center;
-    grid-auto-flow: row;
-    grid-column-gap: 10px;
-    grid-row-gap: 10px;
-    height: 100vh;
-    overflow-y:scroll;
+	display: flex;
+    flex-flow: row wrap;
+    justify-content:center;
+    max-width:1400px;
+    padding: 0px;
 }
 
 .wrapper-dashboard .card {
-    height: 100%;
     font-weight: bold;
+    padding : 20px;
+    margin : 7px;
+    flex-grow: 1;
+    flex-shrink: 1;
 }
 .wrapper-dashboard .card-header {
     margin: 0;
@@ -71,34 +70,15 @@
     padding: 3px;
 }
 
-.dashboard-item-1-1 {
-    grid-column: span 1;
-    grid-row: span 1;
-}
-
-.dashboard-item-2-1 {
-    grid-column: span 2;
-    grid-row: span 1;
-}
-
-.dashboard-item-1-2 {
-    grid-column: span 1;
-    grid-row: span 2;
-}
-
-.dashboard-item-2-2 {
-    grid-column: span 2;
-    grid-row: span 2;
-}
-
-.dashboard-item-4-2 {
-    grid-column: span 4;
-    grid-row: span 2;
+.dashboard-total {
+	min-width : 300px;
+	max-width : 400px;
+	max-height : 150px;
 }
 
-.dashboard-item-4-3 {
-    grid-column: span 4;
-    grid-row: span 3;
+.dashboard-chart {
+	min-width : 500px;
+	max-width : 650px;
 }
 
 @keyframes skeleton-loading {