Commit @1738fcc41d242b88d7473f79bb156bc2291c10a8

박정하 2023-06-22

230622 박정하 보호사 메인화면 수정

@1738fcc41d242b88d7473f79bb156bc2291c10a8

ae46c36

1738fcc

client/resources/css/main.css

--- client/resources/css/main.css

+++ client/resources/css/main.css


   height: 100%;
 }
 
+.height-50 {
+  height: 25vh;
+}
+
 .join-btn {
   background-color: transparent;
 }

   top: 2.9rem;
   position: absolute;
 }
-header .logo{display: none;}
+
+header .logo {
+  display: none;
+}
+
 /* 기관상세정보 */
-.agency-detail, .agency-detail td{border: #f2f0eb 1px solid;}
+.agency-detail,
+.agency-detail td {
+  border: #f2f0eb 1px solid;
+}
+
 /* 시행기관 장비관리 리스트 */
 .visitlist {
   height: 55vh;

   flex: 0 0 2.85% !important;
   padding: 1rem 0;
 }
-.react-calendar__month-view__days__day--neighboringMonth{color: #f0f0f0;;}
+
+.react-calendar__month-view__days__day--neighboringMonth {
+  color: #f0f0f0;
+  ;
+}
+
 /* .agency-calendar .react-calendar__month-view__days{overflow: hidden;} */
 
 /* Q&A */
-.qnaselect{margin-left: 2rem; width: 15%;}
+.qnaselect {
+  margin-left: 2rem;
+  width: 15%;
+}
+
 .question-select input {
   width: 3%;
 }

 .risk-table input {
   width: 100%;
 }
-.risk-table thead{display: none;}
+
+.risk-table thead {
+  display: none;
+}
+
 .risk-table select {
   width: 100%;
   height: 3.7rem;

   display: block;
   background-color: #f2f0eb;
 }
-.questionnaire-table td{padding: 0.5rem;}
+
+.questionnaire-table td {
+  padding: 0.5rem;
+}
+
 .questionnaire-table tr {
   padding: 1rem;
 }

 }
 
 /* 카테고리 기관 추가*/
-.hierarchy-menu p{font-size: 2.4rem;}
-.hierarchy-menu input{width: 30%;}
-.category{background-color: #f2f0eb; box-shadow: 3px -2px 5px -2px rgb(0 0 0 / 20%);     border-radius: 0.5rem 0.5rem 0 0; padding: 2rem; margin-top: 5rem;}
-.category > a{font-size: 1.2em; font-weight: bold;}
-.category img{width: 2rem;}
-.category > ul > li{margin: 2rem 0 !important;}
-.category > ul > li > a{font-size: 1.1em;}
-.categoryitem{
+.hierarchy-menu p {
+  font-size: 2.4rem;
+}
+
+.hierarchy-menu input {
+  width: 30%;
+}
+
+.category {
+  background-color: #f2f0eb;
+  box-shadow: 3px -2px 5px -2px rgb(0 0 0 / 20%);
+  border-radius: 0.5rem 0.5rem 0 0;
+  padding: 2rem;
+  margin-top: 5rem;
+}
+
+.category>a {
+  font-size: 1.2em;
+  font-weight: bold;
+}
+
+.category img {
+  width: 2rem;
+}
+
+.category>ul>li {
+  margin: 2rem 0 !important;
+}
+
+.category>ul>li>a {
+  font-size: 1.1em;
+}
+
+.categoryitem {
   width: 34%;
   font-size: 2.4rem;
 }
+
 /* hierarchy menu */
 .hierarchy-menu {
   box-shadow: 1px 1px 5px 1px rgb(0 0 0 / 20%);

   width: 100%;
   padding: 1rem 0 0 3rem;
 }
-.hierarchy-menu a { 
+
+.hierarchy-menu a {
   color: #333333;
   text-decoration: none;
 }
 
-.hierarchy-menu a span{
+.hierarchy-menu a span {
   font-size: 1.6rem;
 }
 

   padding: 10px 0 0 0;
   position: relative;
 }
+
 .hierarchy-menu ul ul:before {
   content: '';
   position: absolute;

   left: 6px;
   border-left: 1px dashed #373E4B;
 }
-.hierarchy-menu > ul ul {
+
+.hierarchy-menu>ul ul {
   padding-left: 16px;
 }
-.hierarchy-menu > ul > li > ul > li{margin-left: 0;}
-.hierarchy-menu > ul > li > ul {margin-left: 0rem;}
-.hierarchy-menu > ul > li > ul > li > div{margin-left: 8rem;}
-.margin-left{margin-left: 10rem;}
+
+.hierarchy-menu>ul>li>ul>li {
+  margin-left: 0;
+}
+
+.hierarchy-menu>ul>li>ul {
+  margin-left: 0rem;
+}
+
+.hierarchy-menu>ul>li>ul>li>div {
+  margin-left: 8rem;
+}
+
+.margin-left {
+  margin-left: 10rem;
+}
+
 /* List items */
 .hierarchy-menu ul li {
   display: block;
   position: relative;
 }
-.hierarchy-menu > ul ul li:before {
+
+.hierarchy-menu>ul ul li:before {
   content: '';
   display: block;
   height: 0px;

   left: -10px;
   top: 16px;
 }
-.hierarchy-menu > ul ul li:after {
+
+.hierarchy-menu>ul ul li:after {
   content: '';
   display: block;
   height: 43px;

   left: -10px;
   top: -27px;
 }
-.hierarchy-menu > ul ul li.group-lvl:before {
+
+.hierarchy-menu>ul ul li.group-lvl:before {
   width: 50px;
 }
-.hierarchy-menu > ul ul li:first-child:after { 
+
+.hierarchy-menu>ul ul li:first-child:after {
   height: 28px;
   top: -12px;
 }
 
 /* Links */
-.hierarchy-menu ul .max-agency{
+.hierarchy-menu ul .max-agency {
   margin-left: 0px;
 }
-.hierarchy-menu ul .top-agency{
+
+.hierarchy-menu ul .top-agency {
   margin-left: 49px;
 }
-.hierarchy-menu .low-agency{
+
+.hierarchy-menu .low-agency {
   margin-left: 50px;
 }
+
 .hierarchy-menu ul a {
   display: block;
   padding: 6px 0 0 5rem;

   color: #333333;
   transition: 100ms;
 }
+
 .hierarchy-menu ul a:hover {
   color: #7e9d9c;
 }
+
 .hierarchy-menu ul a.active {
   color: #333333;
   font-weight: bold;
 }
 
-.hierarchy-menu li.sub-nav > a:before {
+.hierarchy-menu li.sub-nav>a:before {
   position: absolute;
   left: 4px;
   top: 19px;

   -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg);
 }
-.hierarchy-menu li.sub-nav.open > a:before {
+
+.hierarchy-menu li.sub-nav.open>a:before {
   -ms-transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
 }
-.hierarchy-menu li.sub-nav.open > a {
+
+.hierarchy-menu li.sub-nav.open>a {
   color: #333333;
 }
-.hierarchy-menu li.sub-nav > ul {
-  display: block;
-}
-.hierarchy-menu li.sub-nav.open > ul {
+
+.hierarchy-menu li.sub-nav>ul {
   display: block;
 }
 
-.max-agency input{width: 5rem;}
+.hierarchy-menu li.sub-nav.open>ul {
+  display: block;
+}
+
+.max-agency input {
+  width: 5rem;
+}
+
 .explain-table th {
   background: #ffffff;
 }

 
 
 /* -----------------------------------------------지자체 */
-.statistics-agency #RowChart>div{height: 36rem;}
+.statistics-agency #RowChart>div {
+  height: 36rem;
+}
 
 .map {
   width: 100%;

   font-size: 1.5rem;
   color: #cbc9c9;
 }
-.statistics-grid > div{height: 35rem;}
-.statistics-grid .statistics-guardian {
+
+.statistics-grid>div {
+  height: 35rem;
 }
-.statistics-grid .statistics-guardian li:nth-child(2) > div{height: 23vh !important;}
-.statistics-grid .statistics-guardian li:nth-child(1) p:nth-child(2){font-size: 2rem; font-weight: bold; margin-right: 1rem;}
-.statistics-grid .statistics-guardian li:nth-child(1) p:nth-child(3){font-size: 1.6rem; }
+
+.statistics-grid .statistics-guardian {}
+
+.statistics-grid .statistics-guardian li:nth-child(2)>div {
+  height: 23vh !important;
+}
+
+.statistics-grid .statistics-guardian li:nth-child(1) p:nth-child(2) {
+  font-size: 2rem;
+  font-weight: bold;
+  margin-right: 1rem;
+}
+
+.statistics-grid .statistics-guardian li:nth-child(1) p:nth-child(3) {
+  font-size: 1.6rem;
+}
+
 .guardian-medicine {
   height: 17vh;
 }
-.main-grid-guardian > div:nth-child(3) ul{height: 6rem;}
-.main-grid-guardian .statistics-guardian:nth-child(4) li{padding: 7.5rem 3rem;}
+
+.main-grid-guardian>div:nth-child(3) ul {
+  height: 6rem;
+}
+
+.main-grid-guardian .statistics-guardian:nth-child(4) li {
+  padding: 7.5rem 3rem;
+}
+
 .statistics-guardian li {
   padding: 1rem 3rem;
   background: #ffffff;

   position: relative;
   text-align: center;
 }
-.medicine-title{
+
+.medicine-title {
   font-weight: bold;
   font-size: 1.5rem;
   position: absolute;
   top: 87px;
   left: 22px;
 }
+
 .main-guardian-chart {
   height: 200px;
   background-color: #ffffff;

 .battery-wrap {
   height: 10rem;
 }
-.battery-mobile{display: none;}
-.battery-mobile .battery-img img{position: absolute;}
+
+.battery-mobile {
+  display: none;
+}
+
+.battery-mobile .battery-img img {
+  position: absolute;
+}
+
 .battery-img {
   position: relative;
   margin-top: 1rem;

   margin-top: 1rem;
 }
 
-.calendar-data >div:first-child {
+.calendar-data>div:first-child {
   margin-bottom: .5rem;
 }
 

 }
 
 /* 검색창 */
-.agency-search{gap: 1rem;}
+.agency-search {
+  gap: 1rem;
+}
+
 .searchselect {
   width: 30%;
 }
-.search-management button{width: 22%;}
+
+.search-management button {
+  width: 22%;
+}
+
 .searchselect label {
   width: 100%;
   margin-right: 3rem;
 }
-.searchselect input{width: auto;}
+
+.searchselect input {
+  width: auto;
+}
+
 .mobile-area-wrap {
   display: none;
 }

 .detail-search table td {
   border-top: none;
 }
+
 .detail-search tbody select {
   height: 3.7rem;
   width: unset;

   background-color: #f1bdb2;
   padding: 2rem;
 }
+
 .search-area button {
   width: -webkit-fill-available;
 }

 .medicine {
   height: 100px;
 }
-.senior-insert .gender{padding-left: 2rem; gap: 2rem;}
-.senior-insert .gender input{width: auto;}
-.medicationTime-td input{width: 2rem;}
-.medicationTime-td label{}
-/* 노인수정 */
-.senior-edit{border: #d8d3c7 1px solid;}
-.senior-detail input[type='checkbox'],
-.senior-detail input[type='checkbox']:checked{width: 10%;}
 
-.senior-edit th{
-  font-size:1.8rem
+.senior-insert .gender {
+  padding-left: 2rem;
+  gap: 2rem;
 }
+
+.senior-insert .gender input {
+  width: auto;
+}
+
+.medicationTime-td input {
+  width: 2rem;
+}
+
+.medicationTime-td label {}
+
+/* 노인수정 */
+.senior-edit {
+  border: #d8d3c7 1px solid;
+}
+
+.senior-detail input[type='checkbox'],
+.senior-detail input[type='checkbox']:checked {
+  width: 10%;
+}
+
+.senior-edit th {
+  font-size: 1.8rem
+}
+
 .medicine {
   height: 100px;
 }
-.senior-insert .gender{padding-left: 2rem;}
-.medicationTime-td input{width: 2rem;}
-.medicationTime-td label{}
+
+.senior-insert .gender {
+  padding-left: 2rem;
+}
+
+.medicationTime-td input {
+  width: 2rem;
+}
+
+.medicationTime-td label {}
+
 /* 노인 상세 정보 */
-.senior-detail{border-top: 2px solid #cccccc; border-bottom: 1px solid #cccccc; background: #ffffffba;}
-.senior-detail tr{ border-bottom: 1px solid #f4f4f2;}
+.senior-detail {
+  border-top: 2px solid #cccccc;
+  border-bottom: 1px solid #cccccc;
+  background: #ffffffba;
+}
+
+.senior-detail tr {
+  border-bottom: 1px solid #f4f4f2;
+}
+
 .senior-detail th {
   text-align: left;
   width: 15%;

 .equipment-search {
   margin-bottom: 1rem;
 }
-.equipment-insert td{text-align: left !important;}
+
+.equipment-insert td {
+  text-align: left !important;
+}
+
 .select100 {
   width: 100%;
 }

   overflow: hidden;
   overflow-y: auto;
 }
-.modal-main .board-wrap{}
+
+.modal-main .board-wrap {}
+
 .modal-main table {
   border: 1px solid #d8d3c7;
 }

 }
 
 /* 사용자 관리 */
-.userauthoriylist .left{width: 22%; min-width: fit-content;}
- .userauthoriylist .right{width: 100%;}
-.bSXvtB{display: none;}
+.userauthoriylist .left {
+  width: 22%;
+  min-width: fit-content;
+}
+
+.userauthoriylist .right {
+  width: 100%;
+}
+
+.bSXvtB {
+  display: none;
+}
+
 .tab-menu .tab-menu-agency {
   display: flex;
 }

   color: #ffffff;
 
 }
-.senior-table span{display: none;}
-.senior-table span img{display: none; }
+
+.senior-table span {
+  display: none;
+}
+
+.senior-table span img {
+  display: none;
+}
 
 
 ul.list-box {

   border: 1px solid #d3d3d3;
   border-radius: 5px;
 }
-ul.list-box > li {
+
+ul.list-box>li {
   padding: 0.5rem 1rem;
   text-align: left;
   font-size: 1.3rem;

   text-overflow: ellipsis;
   white-space: nowrap;
 }
-ul.list-box > li:hover {
+
+ul.list-box>li:hover {
   background: #ff5c00;
   color: #fff;
 }
-ul.list-box > li.active {
+
+ul.list-box>li.active {
   background: #f25430;
   color: #fff;
 }
 
 
-.leaflet-background-radius-icon{
+.leaflet-background-radius-icon {
   background: #f25430;
   border-radius: 50%;
+}
+
+
+.visit-data-table {
+  margin-top: 2rem;
+}
+
+.main-grid-agency2 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+
+@media all and (max-width: 767px) {
+  .main-grid-agency2 {
+    grid-template-columns: 1fr;
+  }
 }

ae46c36

1738fcc

client/resources/css/responsive.css

--- client/resources/css/responsive.css

+++ client/resources/css/responsive.css


   .protector-user {
     margin-top: 2rem;
   }
+
+  .visit-data-table{}
   .userauthoriylist {
     display: block;
   }

ae46c36

1738fcc

client/views/component/chart/Chart8.jsx

--- client/views/component/chart/Chart8.jsx

+++ client/views/component/chart/Chart8.jsx

...	...	@@ -176,7 +176,7 @@
176	176	}, [])
177	177
178	178	return (
179		- <div id="Chart8" style={{ width: "100%", height: "80%" }}></div>
	179	+ <div id="Chart8" style={{ width: "100%", height: "100%" }}></div>
180	180	)
181	181
182	182	} (No newline at end of file)

ae46c36

1738fcc

client/views/pages/main/Main_agency.jsx

--- client/views/pages/main/Main_agency.jsx

+++ client/views/pages/main/Main_agency.jsx


 import Calendar_agency from "../../component/Calendar_agency.jsx";
 import Chart10 from "../../component/chart/Chart10.jsx";
 import Cart7 from "../../component/chart/Chart7.jsx";
+import Chart8 from "../../component/chart/Chart8.jsx";
 import tool from "../../../resources/files/images/tool.png";
 import medicinebox from "../../../resources/files/images/medicinebox.png";
 import box from "../../../resources/files/images/box.png";

       </div>
       <div className="flex-start margin-bottom2"><img src={medicinebox} alt="" /><TitleSmall title={"대상자 복용률 평균"} /></div>
       <div className="main-grid-agency margin-bottom2">
-        <div className="content-box combine-left-government3 visitlist">
-          <Chart10 />
+        <div className="content-box combine-left-government3">
+          <div className="height-50"><Chart10 /></div>
+          <div>
+            <table className="visit-data-table">
+              <thead>
+                <tr>
+                  <th>년도</th>
+                  <th>총계</th>
+                  <th>1월</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>2023</td>
+                  <td>87%</td>
+                  <td>86%</td>
+                </tr>
+                <tr>
+                  <td>2022</td>
+                  <td>83%</td>
+                  <td>81%</td>
+                </tr>
+                <tr>
+                  <td>2021</td>
+                  <td>81%</td>
+                  <td>80%</td>
+                </tr>
+                <tr>
+                  <td>2020</td>
+                  <td>82%</td>
+                  <td>83%</td>
+                </tr>
+                <tr>
+                  <td>2019</td>
+                  <td>80%</td>
+                  <td>81%</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
         </div>
       </div>
       {/* <div className="flex-start margin-bottom2"><img src={medicinebox} alt="" /><TitleSmall title={"방문/전화 관리 리스트"} /></div>

           </div>
         </div>
       </div> */}
-      <div className="flex-start margin-bottom2"><img src={medicinebox} alt="" /><TitleSmall title={"연령대별 통계"} /></div>
-      <div className="main-grid-agency">
-        <div className="content-box combine-left-government3 visitlist margin-bottom2">
-          <Cart7 />
+      <div className="main-grid-agency2">
+        <div>
+          <div className="flex-start margin-bottom2"><img src={medicinebox} alt="" /><TitleSmall title={"연령대별 통계"} /></div>
+          <div className="content-box combine-left-government3 visitlist margin-bottom2">
+            <Cart7 />
+          </div>
+        </div>
+        <div>
+          <div className="flex-start margin-bottom2"><img src={medicinebox} alt="" /><TitleSmall title={"시니어 복용률 순위"} /></div>
+          <div className="content-box combine-left-government3 visitlist margin-bottom2">
+            <Chart8 />
+          </div>
         </div>
       </div>
       <div>

Add a comment

Open 0
Closed 0

List

...	...	@@ -746,6 +746,8 @@
746	746	.protector-user {
747	747	margin-top: 2rem;
748	748	}
	749	+
	750	+ .visit-data-table{}
749	751	.userauthoriylist {
750	752	display: block;
751	753	}

...	...	@@ -8,6 +8,10 @@
8	8	height: 100%;
9	9	}
10	10
	11	+.height-50 {
	12	+ height: 25vh;
	13	+}
	14	+
11	15	.join-btn {
12	16	background-color: transparent;
13	17	}
...	...	@@ -24,9 +28,17 @@
24	28	top: 2.9rem;
25	29	position: absolute;
26	30	}
27		-header .logo{display: none;}
	31	+
	32	+header .logo {
	33	+ display: none;
	34	+}
	35	+
28	36	/* 기관상세정보 */
29		-.agency-detail, .agency-detail td{border: #f2f0eb 1px solid;}
	37	+.agency-detail,
	38	+.agency-detail td {
	39	+ border: #f2f0eb 1px solid;
	40	+}
	41	+
30	42	/* 시행기관 장비관리 리스트 */
31	43	.visitlist {
32	44	height: 55vh;
...	...	@@ -57,11 +69,20 @@
57	69	flex: 0 0 2.85% !important;
58	70	padding: 1rem 0;
59	71	}
60		-.react-calendar__month-view__days__day--neighboringMonth{color: #f0f0f0;;}
	72	+
	73	+.react-calendar__month-view__days__day--neighboringMonth {
	74	+ color: #f0f0f0;
	75	+ ;
	76	+}
	77	+
61	78	/* .agency-calendar .react-calendar__month-view__days{overflow: hidden;} */
62	79
63	80	/* Q&A */
64		-.qnaselect{margin-left: 2rem; width: 15%;}
	81	+.qnaselect {
	82	+ margin-left: 2rem;
	83	+ width: 15%;
	84	+}
	85	+
65	86	.question-select input {
66	87	width: 3%;
67	88	}
...	...	@@ -94,7 +115,11 @@
94	115	.risk-table input {
95	116	width: 100%;
96	117	}
97		-.risk-table thead{display: none;}
	118	+
	119	+.risk-table thead {
	120	+ display: none;
	121	+}
	122	+
98	123	.risk-table select {
99	124	width: 100%;
100	125	height: 3.7rem;
...	...	@@ -105,7 +130,11 @@
105	130	display: block;
106	131	background-color: #f2f0eb;
107	132	}
108		-.questionnaire-table td{padding: 0.5rem;}
	133	+
	134	+.questionnaire-table td {
	135	+ padding: 0.5rem;
	136	+}
	137	+
109	138	.questionnaire-table tr {
110	139	padding: 1rem;
111	140	}
...	...	@@ -115,17 +144,44 @@
115	144	}
116	145
117	146	/* 카테고리 기관 추가*/
118		-.hierarchy-menu p{font-size: 2.4rem;}
119		-.hierarchy-menu input{width: 30%;}
120		-.category{background-color: #f2f0eb; box-shadow: 3px -2px 5px -2px rgb(0 0 0 / 20%); border-radius: 0.5rem 0.5rem 0 0; padding: 2rem; margin-top: 5rem;}
121		-.category > a{font-size: 1.2em; font-weight: bold;}
122		-.category img{width: 2rem;}
123		-.category > ul > li{margin: 2rem 0 !important;}
124		-.category > ul > li > a{font-size: 1.1em;}
125		-.categoryitem{
	147	+.hierarchy-menu p {
	148	+ font-size: 2.4rem;
	149	+}
	150	+
	151	+.hierarchy-menu input {
	152	+ width: 30%;
	153	+}
	154	+
	155	+.category {
	156	+ background-color: #f2f0eb;
	157	+ box-shadow: 3px -2px 5px -2px rgb(0 0 0 / 20%);
	158	+ border-radius: 0.5rem 0.5rem 0 0;
	159	+ padding: 2rem;
	160	+ margin-top: 5rem;
	161	+}
	162	+
	163	+.category>a {
	164	+ font-size: 1.2em;
	165	+ font-weight: bold;
	166	+}
	167	+
	168	+.category img {
	169	+ width: 2rem;
	170	+}
	171	+
	172	+.category>ul>li {
	173	+ margin: 2rem 0 !important;
	174	+}
	175	+
	176	+.category>ul>li>a {
	177	+ font-size: 1.1em;
	178	+}
	179	+
	180	+.categoryitem {
126	181	width: 34%;
127	182	font-size: 2.4rem;
128	183	}
	184	+
129	185	/* hierarchy menu */
130	186	.hierarchy-menu {
131	187	box-shadow: 1px 1px 5px 1px rgb(0 0 0 / 20%);
...	...	@@ -135,12 +191,13 @@
135	191	width: 100%;
136	192	padding: 1rem 0 0 3rem;
137	193	}
138		-.hierarchy-menu a {
	194	+
	195	+.hierarchy-menu a {
139	196	color: #333333;
140	197	text-decoration: none;
141	198	}
142	199
143		-.hierarchy-menu a span{
	200	+.hierarchy-menu a span {
144	201	font-size: 1.6rem;
145	202	}
146	203
...	...	@@ -151,6 +208,7 @@
151	208	padding: 10px 0 0 0;
152	209	position: relative;
153	210	}
	211	+
154	212	.hierarchy-menu ul ul:before {
155	213	content: '';
156	214	position: absolute;
...	...	@@ -159,19 +217,34 @@
159	217	left: 6px;
160	218	border-left: 1px dashed #373E4B;
161	219	}
162		-.hierarchy-menu > ul ul {
	220	+
	221	+.hierarchy-menu>ul ul {
163	222	padding-left: 16px;
164	223	}
165		-.hierarchy-menu > ul > li > ul > li{margin-left: 0;}
166		-.hierarchy-menu > ul > li > ul {margin-left: 0rem;}
167		-.hierarchy-menu > ul > li > ul > li > div{margin-left: 8rem;}
168		-.margin-left{margin-left: 10rem;}
	224	+
	225	+.hierarchy-menu>ul>li>ul>li {
	226	+ margin-left: 0;
	227	+}
	228	+
	229	+.hierarchy-menu>ul>li>ul {
	230	+ margin-left: 0rem;
	231	+}
	232	+
	233	+.hierarchy-menu>ul>li>ul>li>div {
	234	+ margin-left: 8rem;
	235	+}
	236	+
	237	+.margin-left {
	238	+ margin-left: 10rem;
	239	+}
	240	+
169	241	/* List items */
170	242	.hierarchy-menu ul li {
171	243	display: block;
172	244	position: relative;
173	245	}
174		-.hierarchy-menu > ul ul li:before {
	246	+
	247	+.hierarchy-menu>ul ul li:before {
175	248	content: '';
176	249	display: block;
177	250	height: 0px;
...	...	@@ -181,7 +254,8 @@
181	254	left: -10px;
182	255	top: 16px;
183	256	}
184		-.hierarchy-menu > ul ul li:after {
	257	+
	258	+.hierarchy-menu>ul ul li:after {
185	259	content: '';
186	260	display: block;
187	261	height: 43px;
...	...	@@ -191,24 +265,29 @@
191	265	left: -10px;
192	266	top: -27px;
193	267	}
194		-.hierarchy-menu > ul ul li.group-lvl:before {
	268	+
	269	+.hierarchy-menu>ul ul li.group-lvl:before {
195	270	width: 50px;
196	271	}
197		-.hierarchy-menu > ul ul li:first-child:after {
	272	+
	273	+.hierarchy-menu>ul ul li:first-child:after {
198	274	height: 28px;
199	275	top: -12px;
200	276	}
201	277
202	278	/* Links */
203		-.hierarchy-menu ul .max-agency{
	279	+.hierarchy-menu ul .max-agency {
204	280	margin-left: 0px;
205	281	}
206		-.hierarchy-menu ul .top-agency{
	282	+
	283	+.hierarchy-menu ul .top-agency {
207	284	margin-left: 49px;
208	285	}
209		-.hierarchy-menu .low-agency{
	286	+
	287	+.hierarchy-menu .low-agency {
210	288	margin-left: 50px;
211	289	}
	290	+
212	291	.hierarchy-menu ul a {
213	292	display: block;
214	293	padding: 6px 0 0 5rem;
...	...	@@ -217,15 +296,17 @@
217	296	color: #333333;
218	297	transition: 100ms;
219	298	}
	299	+
220	300	.hierarchy-menu ul a:hover {
221	301	color: #7e9d9c;
222	302	}
	303	+
223	304	.hierarchy-menu ul a.active {
224	305	color: #333333;
225	306	font-weight: bold;
226	307	}
227	308
228		-.hierarchy-menu li.sub-nav > a:before {
	309	+.hierarchy-menu li.sub-nav>a:before {
229	310	position: absolute;
230	311	left: 4px;
231	312	top: 19px;
...	...	@@ -238,22 +319,29 @@
238	319	-webkit-transform: rotate(-45deg);
239	320	transform: rotate(-45deg);
240	321	}
241		-.hierarchy-menu li.sub-nav.open > a:before {
	322	+
	323	+.hierarchy-menu li.sub-nav.open>a:before {
242	324	-ms-transform: rotate(45deg);
243	325	-webkit-transform: rotate(45deg);
244	326	transform: rotate(45deg);
245	327	}
246		-.hierarchy-menu li.sub-nav.open > a {
	328	+
	329	+.hierarchy-menu li.sub-nav.open>a {
247	330	color: #333333;
248	331	}
249		-.hierarchy-menu li.sub-nav > ul {
250		- display: block;
251		-}
252		-.hierarchy-menu li.sub-nav.open > ul {
	332	+
	333	+.hierarchy-menu li.sub-nav>ul {
253	334	display: block;
254	335	}
255	336
256		-.max-agency input{width: 5rem;}
	337	+.hierarchy-menu li.sub-nav.open>ul {
	338	+ display: block;
	339	+}
	340	+
	341	+.max-agency input {
	342	+ width: 5rem;
	343	+}
	344	+
257	345	.explain-table th {
258	346	background: #ffffff;
259	347	}
...	...	@@ -282,7 +370,9 @@
282	370
283	371
284	372	/* -----------------------------------------------지자체 */
285		-.statistics-agency #RowChart>div{height: 36rem;}
	373	+.statistics-agency #RowChart>div {
	374	+ height: 36rem;
	375	+}
286	376
287	377	.map {
288	378	width: 100%;
...	...	@@ -419,17 +509,39 @@
419	509	font-size: 1.5rem;
420	510	color: #cbc9c9;
421	511	}
422		-.statistics-grid > div{height: 35rem;}
423		-.statistics-grid .statistics-guardian {
	512	+
	513	+.statistics-grid>div {
	514	+ height: 35rem;
424	515	}
425		-.statistics-grid .statistics-guardian li:nth-child(2) > div{height: 23vh !important;}
426		-.statistics-grid .statistics-guardian li:nth-child(1) p:nth-child(2){font-size: 2rem; font-weight: bold; margin-right: 1rem;}
427		-.statistics-grid .statistics-guardian li:nth-child(1) p:nth-child(3){font-size: 1.6rem; }
	516	+
	517	+.statistics-grid .statistics-guardian {}
	518	+
	519	+.statistics-grid .statistics-guardian li:nth-child(2)>div {
	520	+ height: 23vh !important;
	521	+}
	522	+
	523	+.statistics-grid .statistics-guardian li:nth-child(1) p:nth-child(2) {
	524	+ font-size: 2rem;
	525	+ font-weight: bold;
	526	+ margin-right: 1rem;
	527	+}
	528	+
	529	+.statistics-grid .statistics-guardian li:nth-child(1) p:nth-child(3) {
	530	+ font-size: 1.6rem;
	531	+}
	532	+
428	533	.guardian-medicine {
429	534	height: 17vh;
430	535	}
431		-.main-grid-guardian > div:nth-child(3) ul{height: 6rem;}
432		-.main-grid-guardian .statistics-guardian:nth-child(4) li{padding: 7.5rem 3rem;}
	536	+
	537	+.main-grid-guardian>div:nth-child(3) ul {
	538	+ height: 6rem;
	539	+}
	540	+
	541	+.main-grid-guardian .statistics-guardian:nth-child(4) li {
	542	+ padding: 7.5rem 3rem;
	543	+}
	544	+
433	545	.statistics-guardian li {
434	546	padding: 1rem 3rem;
435	547	background: #ffffff;
...	...	@@ -438,13 +550,15 @@
438	550	position: relative;
439	551	text-align: center;
440	552	}
441		-.medicine-title{
	553	+
	554	+.medicine-title {
442	555	font-weight: bold;
443	556	font-size: 1.5rem;
444	557	position: absolute;
445	558	top: 87px;
446	559	left: 22px;
447	560	}
	561	+
448	562	.main-guardian-chart {
449	563	height: 200px;
450	564	background-color: #ffffff;
...	...	@@ -568,8 +682,15 @@
568	682	.battery-wrap {
569	683	height: 10rem;
570	684	}
571		-.battery-mobile{display: none;}
572		-.battery-mobile .battery-img img{position: absolute;}
	685	+
	686	+.battery-mobile {
	687	+ display: none;
	688	+}
	689	+
	690	+.battery-mobile .battery-img img {
	691	+ position: absolute;
	692	+}
	693	+
573	694	.battery-img {
574	695	position: relative;
575	696	margin-top: 1rem;
...	...	@@ -651,7 +772,7 @@
651	772	margin-top: 1rem;
652	773	}
653	774
654		-.calendar-data >div:first-child {
	775	+.calendar-data>div:first-child {
655	776	margin-bottom: .5rem;
656	777	}
657	778
...	...	@@ -875,16 +996,27 @@
875	996	}
876	997
877	998	/* 검색창 */
878		-.agency-search{gap: 1rem;}
	999	+.agency-search {
	1000	+ gap: 1rem;
	1001	+}
	1002	+
879	1003	.searchselect {
880	1004	width: 30%;
881	1005	}
882		-.search-management button{width: 22%;}
	1006	+
	1007	+.search-management button {
	1008	+ width: 22%;
	1009	+}
	1010	+
883	1011	.searchselect label {
884	1012	width: 100%;
885	1013	margin-right: 3rem;
886	1014	}
887		-.searchselect input{width: auto;}
	1015	+
	1016	+.searchselect input {
	1017	+ width: auto;
	1018	+}
	1019	+
888	1020	.mobile-area-wrap {
889	1021	display: none;
890	1022	}
...	...	@@ -912,6 +1044,7 @@
912	1044	.detail-search table td {
913	1045	border-top: none;
914	1046	}
	1047	+
915	1048	.detail-search tbody select {
916	1049	height: 3.7rem;
917	1050	width: unset;
...	...	@@ -939,6 +1072,7 @@
939	1072	background-color: #f1bdb2;
940	1073	padding: 2rem;
941	1074	}
	1075	+
942	1076	.search-area button {
943	1077	width: -webkit-fill-available;
944	1078	}
...	...	@@ -1032,27 +1166,61 @@
1032	1166	.medicine {
1033	1167	height: 100px;
1034	1168	}
1035		-.senior-insert .gender{padding-left: 2rem; gap: 2rem;}
1036		-.senior-insert .gender input{width: auto;}
1037		-.medicationTime-td input{width: 2rem;}
1038		-.medicationTime-td label{}
1039		-/* 노인수정 */
1040		-.senior-edit{border: #d8d3c7 1px solid;}
1041		-.senior-detail input[type='checkbox'],
1042		-.senior-detail input[type='checkbox']:checked{width: 10%;}
1043	1169
1044		-.senior-edit th{
1045		- font-size:1.8rem
	1170	+.senior-insert .gender {
	1171	+ padding-left: 2rem;
	1172	+ gap: 2rem;
1046	1173	}
	1174	+
	1175	+.senior-insert .gender input {
	1176	+ width: auto;
	1177	+}
	1178	+
	1179	+.medicationTime-td input {
	1180	+ width: 2rem;
	1181	+}
	1182	+
	1183	+.medicationTime-td label {}
	1184	+
	1185	+/* 노인수정 */
	1186	+.senior-edit {
	1187	+ border: #d8d3c7 1px solid;
	1188	+}
	1189	+
	1190	+.senior-detail input[type='checkbox'],
	1191	+.senior-detail input[type='checkbox']:checked {
	1192	+ width: 10%;
	1193	+}
	1194	+
	1195	+.senior-edit th {
	1196	+ font-size: 1.8rem
	1197	+}
	1198	+
1047	1199	.medicine {
1048	1200	height: 100px;
1049	1201	}
1050		-.senior-insert .gender{padding-left: 2rem;}
1051		-.medicationTime-td input{width: 2rem;}
1052		-.medicationTime-td label{}
	1202	+
	1203	+.senior-insert .gender {
	1204	+ padding-left: 2rem;
	1205	+}
	1206	+
	1207	+.medicationTime-td input {
	1208	+ width: 2rem;
	1209	+}
	1210	+
	1211	+.medicationTime-td label {}
	1212	+
1053	1213	/* 노인 상세 정보 */
1054		-.senior-detail{border-top: 2px solid #cccccc; border-bottom: 1px solid #cccccc; background: #ffffffba;}
1055		-.senior-detail tr{ border-bottom: 1px solid #f4f4f2;}
	1214	+.senior-detail {
	1215	+ border-top: 2px solid #cccccc;
	1216	+ border-bottom: 1px solid #cccccc;
	1217	+ background: #ffffffba;
	1218	+}
	1219	+
	1220	+.senior-detail tr {
	1221	+ border-bottom: 1px solid #f4f4f2;
	1222	+}
	1223	+
1056	1224	.senior-detail th {
1057	1225	text-align: left;
1058	1226	width: 15%;
...	...	@@ -1190,7 +1358,11 @@
1190	1358	.equipment-search {
1191	1359	margin-bottom: 1rem;
1192	1360	}
1193		-.equipment-insert td{text-align: left !important;}
	1361	+
	1362	+.equipment-insert td {
	1363	+ text-align: left !important;
	1364	+}
	1365	+
1194	1366	.select100 {
1195	1367	width: 100%;
1196	1368	}
...	...	@@ -1248,7 +1420,9 @@
1248	1420	overflow: hidden;
1249	1421	overflow-y: auto;
1250	1422	}
1251		-.modal-main .board-wrap{}
	1423	+
	1424	+.modal-main .board-wrap {}
	1425	+
1252	1426	.modal-main table {
1253	1427	border: 1px solid #d8d3c7;
1254	1428	}
...	...	@@ -1266,9 +1440,19 @@
1266	1440	}
1267	1441
1268	1442	/* 사용자 관리 */
1269		-.userauthoriylist .left{width: 22%; min-width: fit-content;}
1270		- .userauthoriylist .right{width: 100%;}
1271		-.bSXvtB{display: none;}
	1443	+.userauthoriylist .left {
	1444	+ width: 22%;
	1445	+ min-width: fit-content;
	1446	+}
	1447	+
	1448	+.userauthoriylist .right {
	1449	+ width: 100%;
	1450	+}
	1451	+
	1452	+.bSXvtB {
	1453	+ display: none;
	1454	+}
	1455	+
1272	1456	.tab-menu .tab-menu-agency {
1273	1457	display: flex;
1274	1458	}
...	...	@@ -1348,8 +1532,14 @@
1348	1532	color: #ffffff;
1349	1533
1350	1534	}
1351		-.senior-table span{display: none;}
1352		-.senior-table span img{display: none; }
	1535	+
	1536	+.senior-table span {
	1537	+ display: none;
	1538	+}
	1539	+
	1540	+.senior-table span img {
	1541	+ display: none;
	1542	+}
1353	1543
1354	1544
1355	1545	ul.list-box {
...	...	@@ -1359,7 +1549,8 @@
1359	1549	border: 1px solid #d3d3d3;
1360	1550	border-radius: 5px;
1361	1551	}
1362		-ul.list-box > li {
	1552	+
	1553	+ul.list-box>li {
1363	1554	padding: 0.5rem 1rem;
1364	1555	text-align: left;
1365	1556	font-size: 1.3rem;
...	...	@@ -1367,17 +1558,36 @@
1367	1558	text-overflow: ellipsis;
1368	1559	white-space: nowrap;
1369	1560	}
1370		-ul.list-box > li:hover {
	1561	+
	1562	+ul.list-box>li:hover {
1371	1563	background: #ff5c00;
1372	1564	color: #fff;
1373	1565	}
1374		-ul.list-box > li.active {
	1566	+
	1567	+ul.list-box>li.active {
1375	1568	background: #f25430;
1376	1569	color: #fff;
1377	1570	}
1378	1571
1379	1572
1380		-.leaflet-background-radius-icon{
	1573	+.leaflet-background-radius-icon {
1381	1574	background: #f25430;
1382	1575	border-radius: 50%;
	1576	+}
	1577	+
	1578	+
	1579	+.visit-data-table {
	1580	+ margin-top: 2rem;
	1581	+}
	1582	+
	1583	+.main-grid-agency2 {
	1584	+ display: grid;
	1585	+ grid-template-columns: 1fr 1fr;
	1586	+ gap: 1rem;
	1587	+}
	1588	+
	1589	+@media all and (max-width: 767px) {
	1590	+ .main-grid-agency2 {
	1591	+ grid-template-columns: 1fr;
	1592	+ }
1383	1593	} (No newline at end of file)

...	...	@@ -9,6 +9,7 @@
9	9	import Calendar_agency from "../../component/Calendar_agency.jsx";
10	10	import Chart10 from "../../component/chart/Chart10.jsx";
11	11	import Cart7 from "../../component/chart/Chart7.jsx";
	12	+import Chart8 from "../../component/chart/Chart8.jsx";
12	13	import tool from "../../../resources/files/images/tool.png";
13	14	import medicinebox from "../../../resources/files/images/medicinebox.png";
14	15	import box from "../../../resources/files/images/box.png";
...	...	@@ -86,8 +87,46 @@
86	87	</div>
87	88	<div className="flex-start margin-bottom2"><img src={medicinebox} alt="" /><TitleSmall title={"대상자 복용률 평균"} /></div>
88	89	<div className="main-grid-agency margin-bottom2">
89		- <div className="content-box combine-left-government3 visitlist">
90		- <Chart10 />
	90	+ <div className="content-box combine-left-government3">
	91	+ <div className="height-50"><Chart10 /></div>
	92	+ <div>
	93	+ <table className="visit-data-table">
	94	+ <thead>
	95	+ <tr>
	96	+ <th>년도</th>
	97	+ <th>총계</th>
	98	+ <th>1월</th>
	99	+ </tr>
	100	+ </thead>
	101	+ <tbody>
	102	+ <tr>
	103	+ <td>2023</td>
	104	+ <td>87%</td>
	105	+ <td>86%</td>
	106	+ </tr>
	107	+ <tr>
	108	+ <td>2022</td>
	109	+ <td>83%</td>
	110	+ <td>81%</td>
	111	+ </tr>
	112	+ <tr>
	113	+ <td>2021</td>
	114	+ <td>81%</td>
	115	+ <td>80%</td>
	116	+ </tr>
	117	+ <tr>
	118	+ <td>2020</td>
	119	+ <td>82%</td>
	120	+ <td>83%</td>
	121	+ </tr>
	122	+ <tr>
	123	+ <td>2019</td>
	124	+ <td>80%</td>
	125	+ <td>81%</td>
	126	+ </tr>
	127	+ </tbody>
	128	+ </table>
	129	+ </div>
91	130	</div>
92	131	</div>
93	132	{/* <div className="flex-start margin-bottom2"><img src={medicinebox} alt="" /><TitleSmall title={"방문/전화 관리 리스트"} /></div>
...	...	@@ -101,10 +140,18 @@
101	140	</div>
102	141	</div>
103	142	</div> */}
104		- <div className="flex-start margin-bottom2"><img src={medicinebox} alt="" /><TitleSmall title={"연령대별 통계"} /></div>
105		- <div className="main-grid-agency">
106		- <div className="content-box combine-left-government3 visitlist margin-bottom2">
107		- <Cart7 />
	143	+ <div className="main-grid-agency2">
	144	+ <div>
	145	+ <div className="flex-start margin-bottom2"><img src={medicinebox} alt="" /><TitleSmall title={"연령대별 통계"} /></div>
	146	+ <div className="content-box combine-left-government3 visitlist margin-bottom2">
	147	+ <Cart7 />
	148	+ </div>
	149	+ </div>
	150	+ <div>
	151	+ <div className="flex-start margin-bottom2"><img src={medicinebox} alt="" /><TitleSmall title={"시니어 복용률 순위"} /></div>
	152	+ <div className="content-box combine-left-government3 visitlist margin-bottom2">
	153	+ <Chart8 />
	154	+ </div>
108	155	</div>
109	156	</div>
110	157	<div>

Delete comment