Commit @5ece6cef866f401da11c9db2c784e124fb0bd8be

최정임 2023-02-08

230208 최정임 government branch 추가

@5ece6cef866f401da11c9db2c784e124fb0bd8be

adc9c7a

5ece6ce

client/resources/css/common.css

--- client/resources/css/common.css

+++ client/resources/css/common.css


   gap: 1rem;
 }
 
-.main-grid-admin {
+.main-grid-guardian {
   height: 100%;
   display: grid;
   grid-template-columns: 0.9fr 0.9fr 1.1fr 1.1fr;

 .main-grid-government {
   height: 100%;
   display: grid;
-  grid-template-columns: 0.5fr 1fr 0.5fr 1fr;
-  grid-template-rows: 0.1fr 0.3fr 0.3fr 0.1fr;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-template-rows: 0.1fr 0.5fr 0.3fr 0.3fr 0.3fr;
   gap: 1rem;
 }
-.main-grid-agency {
+
+.main-grid-government-2 {
   height: 100%;
   display: grid;
-  grid-template-columns:1fr;
-  grid-template-rows: 0.1fr 0.3fr 0.3fr 0.1fr;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-template-rows: 0.1fr 1fr;
   gap: 1rem;
 }
+
+#Chart5>div>div {
+  position: inherit;
+  width: 353px;
+  height: 35rem;
+}
+
+#RowChart>div>div {
+  position: inherit;
+  width: 353px;
+  height: 25rem;
+}
+#Map>div>div {
+  position: inherit;
+  width: 100%;
+}
+/* #Map{position: absolute; top: 17%;} */
+.main-map {
+  position: relative;
+}
+.main-map > div:nth-child(2){height: 83%;}
+
+.grid-map {
+  width: 25%;
+}
+
 .main-grid-hospital {
   height: 100%;
   display: grid;

   gap: 1rem;
 }
 
-.main-grid-guardian {
-  height: 100%;
-  display: grid;
-  grid-template-columns: 0.9fr 0.9fr 1.1fr 1.1fr;
-  grid-template-rows: 0.5fr 0.1fr;
-  gap: 1rem;
+.grid-map>div {
+  width: 100%;
+  height: 24px;
+  line-height: 22px;
+  background: #f0f4dd;
+  border: 1px solid green;
+  margin-bottom: 1rem;
+  border-radius: 10px;
+  font-size: 1.4rem;
+  text-align: center;
+  box-shadow: 1px 1px 1px 1px rgb(20 105 3 / 19%);
+}
+
+.tab-menu>div.active {
+}
+.pulse {
+  animation: pulse-animation 2s ;
+}
+@keyframes pulse-animation {
+  0% {
+    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
+  }
+  100% {
+    box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
+  }
+}
+.statistics-grid-wrap {
+  display: none;
 }
 
 .statistics-grid {

   gap: 2rem;
 }
 
+.show {
+  display: block;
+}
+
 .combine-left {
   grid-column: 1/3;
 }
 
+.combine-left2 {
+  grid-column: 1/2;
+}
+
 .combine-left-government {
-  grid-column: 1/6;
+  grid-column: 2/4;
+}
+
+.combine-left-government2 {
+  grid-column: 1/4;
 }
 
 .combine-right {
   grid-column: 3/4;
 }
 
-.combine-right-government {
+.combine-right2 {
   grid-column: 3/5;
+}
+
+.combine-right3 {
+  grid-column: 2/3;
+}
+
+.combine-right-government {
+  grid-column: 4/5;
+  grid-row: 2/4;
+}
+
+.combine-right-government2 {
+  grid-column: 4/5;
+  grid-row: 4/6;
 }
 
 .combine-top-government {

 .content-box {
   padding: 1.5rem;
   border-radius: 0.5rem;
-  background-color: rgb(255, 255, 255);
+  border: 1px solid #eeeeee;
+  background: #ffffff;
+  box-shadow: 1px 1px 5px 2px rgba(238, 238, 238, 0.5);
 }
 
 /*체크박스 크기*/

 
 /* button 공통 */
 .btn-wrap {
-  margin-top: 1rem;
+  margin-top: 4rem;
 }
 
 .btn-100 {

adc9c7a

5ece6ce

client/resources/css/layout.css

--- client/resources/css/layout.css

+++ client/resources/css/layout.css


 }
 
 nav{
-  height: 100%;
+  height: 123%;
   background-color: #242d2e;
   grid-area: nav;
 }
 
 .logo {
   padding: 2rem 1rem;
-  font-size: large;
+  font-size: 2.4rem;
   text-align: center;
   color: #ffffff;
   font-weight: bold;
 }
 /* 네비게이션 */
-
+.nav > div > ul{position: fixed;}
 .sidebar-item {
   margin: 1rem 0;
 }
 
 .sidebar-item>a {
+  display: block;
   font-size: 1.6rem;
   color: #ffffff;
   margin: 0 3rem;

   background: #d1e4e3;
 }
 
+
 .sidebar-content {
   display: none;
   color: #ffffff;

   font-weight: bold;
 }
 
-.info-wrap{
-  border-top: 1px solid #4b4b4b;
+.info-wrap{  
+  padding-top: 64rem;
 }
 
 .bottom-section {
-  padding: 1rem 4rem;
+  border-top: 1px solid #4b4b4b;
+  padding: 2rem 4rem;
 }
 
 .info-id {

 #pages {
   max-width: 100%;
   height: 100%;
-  padding: 2rem;
-  background-color: #e6e5e5;
+  padding: 4rem;
   grid-area: main;
+  box-shadow: 1px 1px 20px 1px rgba(238, 238, 238, 0.5) inset;
 }
 
 

 
 .content-wrap {
   max-width: 100%;
-  height: 90vh;
+  height: 100%;
   padding: 2em;
   background-color: #ffffff;
 }
 
-/* hierarchy menu */
-.hierarchy-menu {
-  background-color: #f8f8f8;
-  color: #333333;
-  height: 40vh;
-  overflow-y: auto;
-}
-.hierarchy-menu a { 
-  color: #333333;
-  text-decoration: none;
-}
-
-.hierarchy-menu a span{
-  font-size: 1.6rem;
-}
-
-/* List */
-.hierarchy-menu ul {
-  list-style: none;
-  margin: 0;
-  padding: 10px 0 0 0;
-  position: relative;
-}
-.hierarchy-menu ul ul:before {
-  content: '';
-  position: absolute;
-  top: 0;
-  bottom: 27px;
-  left: 6px;
-  border-left: 1px dashed #373E4B;
-}
-.hierarchy-menu > ul {
-  padding: 15px 0 10px 25px;
-}
-.hierarchy-menu > ul ul {
-  padding-left: 16px;
-}
-
-/* List items */
-.hierarchy-menu ul li {
-  display: block;
-  position: relative;
-}
-.hierarchy-menu > ul ul li:before {
-  content: '';
-  display: block;
-  height: 0px;
-  width: 20px;
-  border-bottom: 1px solid #7A7F87;
-  position: absolute;
-  left: -10px;
-  top: 16px;
-}
-.hierarchy-menu > ul ul li:after {
-  content: '';
-  display: block;
-  height: 43px;
-  width: 0;
-  border-left: 1px solid #7A7F87;
-  position: absolute;
-  left: -10px;
-  top: -27px;
-}
-.hierarchy-menu > ul ul li.group-lvl:before {
-  width: 7px;
-}
-.hierarchy-menu > ul ul li:first-child:after { 
-  height: 28px;
-  top: -12px;
-}
-
-/* Links */
-.hierarchy-menu ul a {
-  display: block;
-  padding: 6px 18px;
-  height: 44px;
-  position: relative;
-  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 {
-  position: absolute;
-  left: 4px;
-  top: 14px;
-  content: '';
-  width: 5px;
-  height: 5px;
-  border-bottom: 1px solid #333333;
-  border-right: 1px solid #333333;
-  -ms-transform: rotate(-45deg);
-  -webkit-transform: rotate(-45deg);
-  transform: rotate(-45deg);
-}
-.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 {
-  color: #333333;
-}
-.hierarchy-menu li.sub-nav > ul {
-  display: block;
-}
-.hierarchy-menu li.sub-nav.open > ul {
-  display: block;
-}
+footer {
+  padding: 1rem;
+  background-color: #787878;
+  grid-area: footer;
+  text-align: center;
+  font-size: small;
+  color: #ffffff;
+}

adc9c7a

5ece6ce

client/resources/css/main.css

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

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


 /* 공통 */
-.logo {
-  font-size: 2.4rem;
-  font-family: "KoPubDotumBold_0";
-}
 
 header .page-title span {
   font-family: "KoPubDotumBold_0";

 .join-btn{
   background-color: transparent;
 }
-/* 카테고리 */
-.category{font-size: 1.6rem;}
-.category-btn{padding: 0; border-radius: 0;}
-.category ul{list-style: disc;}
-.category > ul >li{list-style: circle; }
-.category > ul > li > ul > li{list-style: circle; border: 1px solid red; }
-
-
-
 /* -----------------------------------------------지자체 */
 
-
+/* 관리자 권한 관리 */
+.explain-table th{background: #ffffff;}
+.react-calendar{width: 100%;}
 .map {
   width: 100%;
   height: calc(100% - 31px);

 }
 
 .statistics li {
-  width: 30%;
-  padding: 1rem;
+  position: relative;
+  padding-left: 5rem;
   text-align: center;
-  border-radius: 10px;
-  margin: 0.5rem;
-}
-
-.statistics li:nth-child(1) {
-  border: 1px solid #18924e;
-}
-
-.statistics li:nth-child(2) {
-  border: 1px solid #ec220c;
-}
-
-.statistics li:nth-child(3) {
-  border: 1px solid #2132e3;
-}
-.statistics li:nth-child(4) {
-  border: 1px solid #e3d621;
 }
 
 .statistics li p:nth-of-type(1) {
-  font-size: 1.6rem;
-  font-weight: bold;
-  margin-bottom: 1rem;
+  position: absolute;
+  left: 0;
 }
-
+.statistics:nth-of-type(1) {
+  background-image: linear-gradient(to bottom right, #9890e3 0%, #b1f4cf 100%);
+}
+.statistics:nth-of-type(2) {
+  background-image: linear-gradient(to bottom right, #b1f4cf 0%, #5a70df 100%);
+}
+.statistics:nth-of-type(3) {
+  background-image: linear-gradient(to bottom right, #83a9d7 0%, #8d2ecd 100%);
+}
+.statistics:nth-of-type(4) {
+  background-image: linear-gradient(to bottom right, #8d2ecd 0%, #b1f4cf 100%);
+}
+.statistics li p{color: #ffffff;}
 .statistics li p:nth-of-type(2) {
+  padding-bottom: 0.5rem;
   font-size: 1.6rem;
   font-weight: bold;
 }
-
-.statistics li p:nth-of-type(2)::after {
+.statistics li p:nth-of-type(3) {
+  font-size: 1.6rem;
+  font-weight: bold;
+}
+.statistics li p:nth-of-type(3)::after {
   content: "명";
 }
 

   font-size: 1.4rem;
 }
 
-.combine-right-government h4::before {
-  content: "김복남 님의";
-  margin-right: 1rem;
-  font-size: 1.4rem;
-}
 .main-battery-title {
   font-size: 1.6rem;
   font-weight: 900;

   max-height: 100%;
   background-color: #f8f8f8;
 }
-
+.login-wrap .tab-container{
+  width: 50%;
+  margin: auto;
+  padding-top: 10rem;
+}
 .login-wrap h1 {
   max-width: 100%;
   text-align: center;

 }
 
 .login-form {
+  position: relative;
   width: 500px;
   padding: 5rem 3rem;
   margin: auto;
   background-color: #ffffff;
   border-radius: 1rem;
 }
-
 .login-form .login-inner {
   margin-bottom: 2rem;
+  position: absolute;
 }
 
-.login-form .login-inner .content {
+.login-inner .content {
   width: 100%;
   margin-bottom: 1rem;
 }

   color: #eee;
 }
 
-.login-form .login-inner input {
+.login-inner input {
   outline: none;
   border: 0;
   margin-bottom: 1rem;

 
 .join-login {
   height: calc(100% - 92px);
+}
+
+
+.login-form-management h3 {
+  font-size: 2rem;
+  text-align: center;
+  margin-bottom: 2rem;
+}
+
+.login-form-management {
+  width: 500px;
+  padding: 5rem 3rem;
+  margin: auto;
+  background-color: #ffffff;
+  border-radius: 1rem;
+}
+
+.login-form-management .login-inner {
+  margin-bottom: 2rem;
+}
+
+.login-form-management .login-inner .content {
+  width: 100%;
+  margin-bottom: 1rem;
+}
+
+.login-form-management .login-inner .fa-solid {
+  font-size: 2rem;
+  margin-bottom: 1rem;
+  color: #eee;
+}
+
+.login-form-management .login-inner input {
+  outline: none;
+  border: 0;
+  margin-bottom: 1rem;
+  padding: 1.5rem;
+  background: #eee;
 }
 
 /* ------------------------------------- 회원가입 page --------------------------------- */

 }
 
 .search-group .btn-box {
+  margin-top: 2rem;
   padding-bottom: 0.5rem;
 }
 

 }
 
 .detail-search tbody tr:nth-of-type(2) select {
-  width: 24.4%;
+  width: 27%;
 }
 
 .detail-search tbody tr:nth-of-type(3) td {

 }
 
 /* 장비등록 */
-
+.equipment-insert input[type="checkbox" i]{
+  width: 10%;
+}
+.equipment-insert label{width: 30%;}
 .user-list{
   background-color: #eeeeee;
   height: 57.8vh;

 }
 
 .modal .modal-inner {
-  width: 80%;
-  max-width: 650px;
+  width: 100%;
+  max-width: 768px;
   margin: 0 auto;
   border-radius: 0.3rem;
   background-color: #fff;

 }
 
 .tab-menu li {
-  width: 200px;
+  width: 50%;
   padding: 1rem;
-  background-color: #f8f8f8;
+  background-color: #ffffff;
   border-radius: 0.5rem 0.5rem 0 0;
   font-size: 1.6rem;
   text-align: center;
   border: 1px solid #eeeeee;
 }
 
-.tab-menu li.active {
+.tab-menu li.active {  
   font-weight: bold;
   background-color: #242d2e;
   color: #ffffff;

   color: #7D9D9C;
 }
 
+.tab-container{
+}
 .tab-container>div>div:nth-child(2) {
   margin: 1rem 0;
 }

5ece6ce

client/views/component/AgencySearch.jsx (added)

+++ client/views/component/AgencySearch.jsx

...	...	@@ -0,0 +1,221 @@
	1	+import { style } from "d3";
	2	+import React, { useState } from "react";
	3	+
	4	+import Button from "./Button.jsx";
	5	+
	6	+const CATEGORY_LIST = [
	7	+ { id: 0, data: "서울" },
	8	+ { id: 1, data: "인천" },
	9	+ { id: 2, data: "경기" },
	10	+ { id: 3, data: "경북" },
	11	+ { id: 4, data: "경남" },
	12	+ { id: 5, data: "전북" },
	13	+ { id: 6, data: "전남" },
	14	+ { id: 7, data: "제주" },
	15	+];
	16	+const CATEGORY_LIST1 = [
	17	+ { id: 0, data: "전체" },
	18	+ { id: 0, data: "광현리" },
	19	+ { id: 1, data: "금구리" },
	20	+ { id: 2, data: "내량리" },
	21	+ { id: 3, data: "대북리" },
	22	+ { id: 4, data: "대흥리" },
	23	+ { id: 5, data: "동부리" },
	24	+ { id: 6, data: "무성리" },
	25	+ { id: 7, data: "사직리" },
	26	+ { id: 8, data: "삽령리" },
	27	+ { id: 9, data: "상곡리" },
	28	+ { id: 10, data: "서부리" },
	29	+ { id: 11, data: "수서리" },
	30	+ { id: 12, data: "오곡리" },
	31	+ { id: 13, data: "외량리" },
	32	+ { id: 14, data: "용대리" },
	33	+ { id: 15, data: "정리" },
	34	+ { id: 15, data: "하곡리" },
	35	+];
	36	+const CATEGORY_LIST2 = [
	37	+ { id: 0, data: "전체" },
	38	+ { id: 0, data: "사리리" },
	39	+ { id: 1, data: "보현리" },
	40	+ { id: 2, data: "복성리" },
	41	+ { id: 3, data: "위성리" },
	42	+ { id: 4, data: "달산리" },
	43	+ { id: 5, data: "송원리" },
	44	+ { id: 6, data: "신계리" },
	45	+ { id: 7, data: "도산리" },
	46	+ { id: 8, data: "서경리" },
	47	+ { id: 9, data: "평호리" },
	48	+ { id: 10, data: "산법리" },
	49	+ { id: 11, data: "내의리" },
	50	+ { id: 12, data: "봉황리" },
	51	+ { id: 13, data: "봉소리" },
	52	+];
	53	+const CATEGORY_LIST3 = [
	54	+ { id: 0, data: "전체" },
	55	+ { id: 0, data: "노행리" },
	56	+ { id: 1, data: "오천리" },
	57	+ { id: 2, data: "성리" },
	58	+ { id: 3, data: "병수리" },
	59	+ { id: 4, data: "불로리" },
	60	+ { id: 5, data: "내리리" },
	61	+ { id: 6, data: "중구리" },
	62	+ { id: 7, data: "거매리" },
	63	+ { id: 8, data: "장군리" },
	64	+ { id: 9, data: "장기리" },
	65	+ { id: 10, data: "금매리" },
	66	+ { id: 11, data: "화계리" },
	67	+ { id: 12, data: "마시리" },
	68	+ { id: 13, data: "매곡리" },
	69	+ { id: 14, data: "고곡리" },
	70	+];
	71	+const CATEGORY_LIST4 = [
	72	+ { id: 0, data: "전체" },
	73	+ { id: 0, data: "창평리" },
	74	+ { id: 1, data: "가호리" },
	75	+ { id: 2, data: "춘산리" },
	76	+ { id: 3, data: "대율리" },
	77	+ { id: 4, data: "동산리" },
	78	+ { id: 5, data: "남산리" },
	79	+ { id: 6, data: "명산리" },
	80	+ { id: 7, data: "신화리" },
	81	+];
	82	+
	83	+const CATEGORY_LIST5 = [
	84	+ { id: 0, data: "전체" },
	85	+ { id: 0, data: "나호리" },
	86	+ { id: 1, data: "이화리" },
	87	+ { id: 2, data: "두북리" },
	88	+ { id: 3, data: "선곡리" },
	89	+ { id: 4, data: "미성리" },
	90	+ { id: 5, data: "모산리" },
	91	+ { id: 6, data: "문덕리" },
	92	+ { id: 7, data: "달산리" },
	93	+ { id: 8, data: "봉산리" },
	94	+];
	95	+
	96	+const CATEGORY_LIST6 = [
	97	+ { id: 0, data: "전체" },
	98	+ { id: 0, data: "읍내리" },
	99	+ { id: 1, data: "수북리" },
	100	+ { id: 2, data: "수서리" },
	101	+ { id: 3, data: "이지리" },
	102	+ { id: 4, data: "파전리" },
	103	+ { id: 5, data: "신덕리" },
	104	+ { id: 6, data: "지호리" },
	105	+ { id: 7, data: "연계리" },
	106	+ { id: 8, data: "매성리" },
	107	+ { id: 9, data: "원산리" },
	108	+ { id: 10, data: "금양리" },
	109	+];
	110	+const CATEGORY_LIST7 = [
	111	+ { id: 0, data: "전체" },
	112	+ { id: 0, data: "백학리" },
	113	+ { id: 1, data: "삼산리" },
	114	+ { id: 2, data: "봉림리" },
	115	+ { id: 3, data: "무암리" },
	116	+ { id: 4, data: "운산리" },
	117	+ { id: 5, data: "화본리" },
	118	+ { id: 6, data: "화전리" },
	119	+];
	120	+
	121	+const CATEGORY_LIST8 = [
	122	+ { id: 0, data: "전체" },
	123	+ { id: 0, data: "화수리" },
	124	+ { id: 1, data: "화북리" },
	125	+ { id: 2, data: "괴산리" },
	126	+ { id: 3, data: "학성리" },
	127	+ { id: 4, data: "장곡리" },
	128	+ { id: 5, data: "인곡리" },
	129	+ { id: 6, data: "양지리" },
	130	+ { id: 7, data: "낙전리" },
	131	+ { id: 8, data: "가암리" },
	132	+ { id: 9, data: "석산리" },
	133	+ { id: 10, data: "학암리" },
	134	+];
	135	+
	136	+const locations = [
	137	+ {
	138	+ id: "no1",
	139	+ label: "군위읍",
	140	+ list: CATEGORY_LIST1,
	141	+ },
	142	+ {
	143	+ id: "no2",
	144	+ label: "소보면",
	145	+ list: CATEGORY_LIST2,
	146	+ },
	147	+];
	148	+
	149	+export default function DetailSearch({}) {
	150	+ const [checkedList, setCheckedList] = useState([]);
	151	+ const [selectArea, setSelectArea] = React.useState();
	152	+
	153	+ const onCheckedElement = (checked, item) => {
	154	+ if (checked) {
	155	+ setCheckedList([...checkedList, item]);
	156	+ } else if (!checked) {
	157	+ setCheckedList(checkedList.filter((el) => el !== item));
	158	+ }
	159	+ };
	160	+
	161	+ const onRemove = (item) => {
	162	+ setCheckedList(checkedList.filter((el) => el !== item));
	163	+ };
	164	+
	165	+ const categories = locations.map((location) => (
	166	+ <li>
	167	+ <label htmlFor={location.id}>{location.label}</label>
	168	+ <input type="radio" name="location" id={location.id} />
	169	+ <div className="area-list flex">
	170	+ <ul className="flex">
	171	+ {location.list.map((item) => (
	172	+ <li className="flex-start">
	173	+ <input
	174	+ type="checkbox"
	175	+ className="checkCon"
	176	+ id={item.id}
	177	+ value={item.data}
	178	+ onChange={(e) => {
	179	+ onCheckedElement(e.target.checked, e.target.value);
	180	+ }}
	181	+ checked={checkedList.includes(item.data) ? true : false}
	182	+ />
	183	+ <label htmlFor={item.id}>{item.data}</label>
	184	+ </li>
	185	+ ))}
	186	+ </ul>
	187	+ </div>
	188	+ </li>
	189	+ ));
	190	+
	191	+ return (
	192	+ <div className="search-group">
	193	+ <div className="search-area flex">
	194	+ <div className="detail-search" style={{padding:"0 5rem", }}>
	195	+ <table>
	196	+ <tbody>
	197	+ <tr>
	198	+ <th>기관명 검색</th>
	199	+ <td colSpan={3}>
	200	+ <div className="flex">
	201	+ <select name="" id="">
	202	+ <option value="">전체</option>
	203	+ <option value="">복지관1</option>
	204	+ <option value="">복지관2</option>
	205	+ <option value="">병원1</option>
	206	+ <option value="">병원2</option>
	207	+ </select>
	208	+ <input type="text" />
	209	+ </div>
	210	+ </td>
	211	+ </tr>
	212	+ </tbody>
	213	+ </table>
	214	+ </div>
	215	+ <div className="btn-box flex-center">
	216	+ <Button className={"btn-large green-btn"} btnName={"조회"} />
	217	+ </div>
	218	+ </div>
	219	+ </div>
	220	+ );
	221	+}

5ece6ce

client/views/component/CalendarComponent.jsx (added)

+++ client/views/component/CalendarComponent.jsx

...	...	@@ -0,0 +1,23 @@
	1	+import React, { useState } from "react";
	2	+import Calendar from "react-calendar";
	3	+import "react-calendar/dist/Calendar.css";
	4	+import moment from "moment";
	5	+
	6	+export default function CalendarComponent(props) {
	7	+ const [value, setValue] = useState(new Date());
	8	+ const mark = ["12-01-2023", "21-02-2023", "05-02-2023", "02-02-2023"];
	9	+ return (
	10	+ <>
	11	+ <Calendar
	12	+ onChange={setValue}
	13	+ value={value}
	14	+ tileClassName={({ date, view }) => {
	15	+ if (mark.find((x) => x === moment(date).format("DD-MM-YYYY"))) {
	16	+ return "highlight";
	17	+ }
	18	+ }}
	19	+ />
	20	+ </>
	21	+ );
	22	+}
	23	+

adc9c7a

5ece6ce

client/views/component/DetailSearch.jsx

--- client/views/component/DetailSearch.jsx

+++ client/views/component/DetailSearch.jsx


                 <td colSpan={3}>
                   <div className="flex">
                     <select name="" id="">
-                      <option value="">사용자관리번호</option>
-                      <option value="">사용자 이름</option>
-                      <option value="">관리기관명</option>
+                      <option value="">구분</option>
+                      <option value="">어르신 성함</option>
+                      <option value="">보호사 성함</option>
                     </select>
                     <input type="text" />
                   </div>
                 </td>
               </tr>
               <tr>
-                <th>지역</th>
+                <th>생년월일</th>
                 <td>
                   <div className="flex-start">
                     <select name="" id="">
-                      <option>전체</option>
-                      <option>군위읍</option>
-                      <option>소보면</option>
-                      <option>효령면</option>
-                      <option>부계면</option>
-                      <option>우보면</option>
-                      <option>의흥면</option>
-                      <option>산성면</option>
-                      <option>삼국유사면</option>
+                      <option value="">연도</option>
+                    </select>
+                    <select name="" id="">
+                      <option value="">월</option>
+                    </select>
+                    <select name="" id="">
+                      <option value="">일</option>
                     </select>
                   </div>
+                </td>
+                <th>외출 기간 및 방문기간</th>
+                <td>
+                  <input type="date" name="" id="" />
                 </td>
               </tr>
             </tbody>
           </table>
         </div>
-        {/* <hr />
+        <hr />
         <details>
           <summary>지역별 상세 조회</summary>
           <div className="mobile-area-wrap">

               </ul>
             </div>
           </div>
-        </details> */}
+        </details>
       </div>
       <div className="select-area">
         <div>

5ece6ce

client/views/component/Modal2.jsx (added)

+++ client/views/component/Modal2.jsx

...	...	@@ -0,0 +1,18 @@
	1	+import React from "react";
	2	+import Button from "./Button.jsx";
	3	+
	4	+export default function Modal2({ children, open, close,header }) {
	5	+ return (
	6	+ <div class={open ? "openModal modal" : "modal"}>
	7	+ {open ? (
	8	+ <div className="modal-inner">
	9	+ <div className="modal-header flex">
	10	+ {header}
	11	+ <Button className={"close"} onClick={close} btnName={"X"} />
	12	+ </div>
	13	+ <div className="modal-main">{children}</div>
	14	+ </div>
	15	+ ) : null}
	16	+ </div>
	17	+ );
	18	+}

adc9c7a

5ece6ce

client/views/component/chart/Chart1.jsx

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

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


           yAxis: yAxis,
           valueYField: fieldName,
           categoryXField: "date",
+          tooltip: am5.Tooltip.new(root1, {
+            pointerOrientation: "horizontal",
+            labelText: "[bold]{name}[/]\n{categoryY}: {valueX}"
+          })
         })
       );
 

         });
       });
 
+
+
       legend.data.push(series);
     }
 

adc9c7a

5ece6ce

client/views/component/chart/Chart2.jsx

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

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


     let root = am5.Root.new("Chart2");
 
     root._logo.dispose();
-    // Set themes
-    // https://www.amcharts.com/docs/v5/concepts/themes/
-    root.setThemes([am5themes_Animated.new(root)]);
+  // Set themes
+// https://www.amcharts.com/docs/v5/concepts/themes/
+root.setThemes([
+  am5themes_Animated.new(root)
+]);
 
-    // Create chart
-    // https://www.amcharts.com/docs/v5/charts/xy-chart/
-    let chart = root.container.children.push(
-      am5xy.XYChart.new(root, {
-        panX: true,
-        panY: true,
-        wheelX: "panX",
-        wheelY: "zoomX",
-        pinchZoomX: true,
-      })
-    );
 
-    chart.get("colors").set("step", 3);
+// Create chart
+// https://www.amcharts.com/docs/v5/charts/xy-chart/
+let chart = root.container.children.push(am5xy.XYChart.new(root, {
+  panX: true,
+  panY: true,
+  wheelX: "panX",
+  wheelY: "zoomX",
+  pinchZoomX:true
+}));
 
-    // Add cursor
-    // https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
-    let cursor = chart.set("cursor", am5xy.XYCursor.new(root, {}));
-    cursor.lineY.set("visible", false);
 
-    // Create axes
-    // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
-    let xAxis = chart.xAxes.push(
-      am5xy.DateAxis.new(root, {
-        maxDeviation: 0.3,
-        baseInterval: {
-          timeUnit: "day",
-          count: 1,
-        },
-        renderer: am5xy.AxisRendererX.new(root, {}),
-        tooltip: am5.Tooltip.new(root, {}),
-      })
-    );
+// Add cursor
+// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
+let cursor = chart.set("cursor", am5xy.XYCursor.new(root, {
+  behavior: "none"
+}));
+cursor.lineY.set("visible", false);
 
-    let yAxis = chart.yAxes.push(
-      am5xy.ValueAxis.new(root, {
-        maxDeviation: 0.3,
-        renderer: am5xy.AxisRendererY.new(root, {}),
-      })
-    );
 
-    // Create series
-    // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
-    let series = chart.series.push(
-      am5xy.LineSeries.new(root, {
-        name: "Series 1",
-        xAxis: xAxis,
-        yAxis: yAxis,
-        valueYField: "value",
-        valueXField: "date",
-        tooltip: am5.Tooltip.new(root, {
-          labelText: "{valueY}",
-        }),
-      })
-    );
-    series.strokes.template.setAll({
-      strokeWidth: 2,
-      strokeDasharray: [3, 3],
-    });
+// The data
+let data = [{
+  "year": "1월",
+  "아침": 15.87,
+  "점심": 650,
+  "저녁": 121
+}, {
+  "year": "2월",
+  "아침": 1567,
+  "점심": 683,
+  "저녁": 146
+}, {
+  "year": "3월",
+  "아침": 1617,
+  "점심": 691,
+  "저녁": 138
+}, {
+  "year": "4월",
+  "아침": 1630,
+  "점심": 642,
+  "저녁": 127
+}, {
+  "year": "5월",
+  "아침": 1660,
+  "점심": 699,
+  "저녁": 105
+}, {
+  "year": "6월",
+  "아침": 1683,
+  "점심": 721,
+  "저녁": 109
+}, {
+  "year": "7월",
+  "아침": 1691,
+  "점심": 737,
+  "저녁": 112
+}, {
+  "year": "8월",
+  "아침": 1298,
+  "점심": 680,
+  "저녁": 101
+}, {
+  "year": "9월",
+  "아침": 1275,
+  "점심": 664,
+  "저녁": 97
+}, {
+  "year": "10월",
+  "아침": 1246,
+  "점심": 648,
+  "저녁": 93
+}, {
+  "year": "11월",
+  "아침": 1318,
+  "점심": 697,
+  "저녁": 111
+}, {
+  "year": "12월",
+  "아침": 1213,
+  "점심": 633,
+  "저녁": 87
+}];
 
-    // Set data
-    let data = [
-      {
-        date: new Date(2022, 8, 1).getTime(),
-        value: 0,
-      },
-      {
-        date: new Date(2022, 8, 2).getTime(),
-        value: 1,
-      },
-      {
-        date: new Date(2022, 8, 3).getTime(),
-        value: 1,
-      },
-      {
-        date: new Date(2022, 8, 4).getTime(),
-        value: 2,
-      },
-      {
-        date: new Date(2022, 8, 5).getTime(),
-        value: 3,
-      },
-      {
-        date: new Date(2022, 8, 6).getTime(),
-        value: 3,
-      },
-      {
-        date: new Date(2022, 8, 7).getTime(),
-        value: 7,
-      },
-      {
-        date: new Date(2022, 8, 8).getTime(),
-        value: 7,
-      },
-      {
-        date: new Date(2022, 8, 9).getTime(),
-        value: 8,
-      },
-      {
-        date: new Date(2022, 8, 10).getTime(),
-        value: 8,
-      },
-    ];
 
-    series.data.setAll(data);
+// Create axes
+// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
+let xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
+  categoryField: "year",
+  startLocation: 0.5,
+  endLocation: 0.5,
+  renderer: am5xy.AxisRendererX.new(root, {}),
+  tooltip: am5.Tooltip.new(root, {})
+}));
 
-    // Make stuff animate on load
-    // https://www.amcharts.com/docs/v5/concepts/animations/
-    series.appear(1000);
-    chart.appear(1000, 100);
+xAxis.data.setAll(data);
+
+let yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
+  renderer: am5xy.AxisRendererY.new(root, {})
+}));
+
+// Add series
+// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
+
+function createSeries(name, field) {
+  let series = chart.series.push(am5xy.LineSeries.new(root, {
+    name: name,
+    xAxis: xAxis,
+    yAxis: yAxis,
+    stacked:true,
+    valueYField: field,
+    categoryXField: "year",
+    tooltip: am5.Tooltip.new(root, {
+      pointerOrientation: "horizontal",
+      labelText: "[bold]{name}[/]\n{categoryX}: {valueY}"
+    })
+  }));
+
+  series.fills.template.setAll({
+    fillOpacity: 0.5,
+    visible: true
+  });
+
+  series.data.setAll(data);
+  series.appear(1000);
+}
+
+createSeries("아침", "아침");
+createSeries("점심", "점심");
+createSeries("저녁", "저녁");
+
+// Add scrollbar
+// https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
+// chart.set("scrollbarX", am5.Scrollbar.new(root, {
+//   orientation: "horizontal"
+// }));
+
+// Create axis ranges
+// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/axis-ranges/
+let rangeDataItem = xAxis.makeDataItem({
+  category: "1월",
+  endCategory: "12월"
+});
+
+let range = xAxis.createAxisRange(rangeDataItem);
+
+rangeDataItem.get("grid").setAll({
+  stroke: am5.color(0x00ff33),
+  strokeOpacity: 0.5,
+  strokeDasharray: [3]
+});
+
+rangeDataItem.get("axisFill").setAll({
+  fill: am5.color(0x00ff33),
+  fillOpacity: 0.1,
+  visible:true
+});
+
+// rangeDataItem.get("label").setAll({
+//   inside: true,
+//   text: "Fines for speeding increased",
+//   rotation: 90,
+//   centerX: am5.p100,
+//   centerY: am5.p100,
+//   location: 0,
+//   paddingBottom: 10,
+//   paddingRight: 15
+// });
+
+
+let rangeDataItem2 = xAxis.makeDataItem({
+  category: "1월"
+});
+
+let range2 = xAxis.createAxisRange(rangeDataItem2);
+
+rangeDataItem2.get("grid").setAll({
+  stroke: am5.color(0x00ff33),
+  strokeOpacity: 1,
+  strokeDasharray: [3]
+});
+
+rangeDataItem2.get("axisFill").setAll({
+  fill: am5.color(0x00ff33),
+  fillOpacity: 0.1,
+  visible:true
+});
+
+// rangeDataItem2.get("label").setAll({
+//   inside: true,
+//   text: "Motorcycle fee introduced",
+//   rotation: 90,
+//   centerX: am5.p100,
+//   centerY: am5.p100,
+//   location: 0,
+//   paddingBottom: 10,
+//   paddingRight: 15
+// });
+
+// Make stuff animate on load
+// https://www.amcharts.com/docs/v5/concepts/animations/
+chart.appear(1000, 100);
 
     this.root = root;
   }

5ece6ce

client/views/component/chart/Chart4.jsx (added)

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

...	...	@@ -0,0 +1,76 @@
	1	+import React, { Component } from "react";
	2	+import * as am5 from "@amcharts/amcharts5";
	3	+import * as am5percent from "@amcharts/amcharts5/percent";
	4	+import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
	5	+
	6	+class Chart4 extends Component {
	7	+ componentDidMount() {
	8	+ let root = am5.Root.new("Chart4");
	9	+
	10	+ root._logo.dispose();
	11	+ root.setThemes([am5themes_Animated.new(root)]);
	12	+
	13	+ // Create chart
	14	+ // https://www.amcharts.com/docs/v5/charts/percent-charts/sliced-chart/
	15	+ let chart = root.container.children.push(am5percent.SlicedChart.new(root, {
	16	+ layout: root.verticalLayout
	17	+ }));
	18	+
	19	+
	20	+ // Create series
	21	+ // https://www.amcharts.com/docs/v5/charts/percent-charts/sliced-chart/#Series
	22	+ let series = chart.series.push(am5percent.PyramidSeries.new(root, {
	23	+ orientation: "vertical",
	24	+ valueField: "value",
	25	+ categoryField: "category"
	26	+ }));
	27	+
	28	+
	29	+ // Set data
	30	+ // https://www.amcharts.com/docs/v5/charts/percent-charts/sliced-chart/#Setting_data
	31	+ series.data.setAll([
	32	+ { value: 10, category: "부계면" },
	33	+ { value: 9, category: "소보면" },
	34	+ { value: 6, category: "군위읍" },
	35	+ { value: 5, category: "우보면" },
	36	+ { value: 4, category: "의흥면" },
	37	+ { value: 3, category: "삼국유사면" },
	38	+ { value: 3, category: "산성면" },
	39	+ { value: 2, category: "효령면" }
	40	+ ].reverse());
	41	+
	42	+
	43	+ // Play initial series animation
	44	+ // https://www.amcharts.com/docs/v5/concepts/animations/#Animation_of_series
	45	+ series.appear();
	46	+
	47	+
	48	+ // Create legend
	49	+ // https://www.amcharts.com/docs/v5/charts/percent-charts/legend-percent-series/
	50	+ let legend = chart.children.push(am5.Legend.new(root, {
	51	+ centerX: am5.percent(50),
	52	+ x: am5.percent(50),
	53	+ marginTop: 15,
	54	+ marginBottom: 15
	55	+ }));
	56	+
	57	+ legend.data.setAll(am5.array.copy(series.dataItems).reverse());
	58	+
	59	+
	60	+ // Make stuff animate on load
	61	+ // https://www.amcharts.com/docs/v5/concepts/animations/
	62	+ chart.appear(1000, 100);
	63	+
	64	+ this.root = root;
	65	+ }
	66	+ componentWillUnmount() {
	67	+ if (this.root) {
	68	+ this.root.dispose();
	69	+ }
	70	+ }
	71	+ render() {
	72	+ return <div id="Chart4" style={{ width: "100%", height: "80%" }}></div>
	73	+ }
	74	+}
	75	+
	76	+export default Chart4;

5ece6ce

client/views/component/chart/Chart5.jsx (added)

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

...	...	@@ -0,0 +1,69 @@
	1	+import React, { Component } from "react";
	2	+import * as am5 from "@amcharts/amcharts5";
	3	+import * as am5percent from "@amcharts/amcharts5/percent";
	4	+import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
	5	+
	6	+class Chart5 extends Component {
	7	+ componentDidMount() {
	8	+ let root = am5.Root.new("Chart5");
	9	+
	10	+
	11	+// Set themes
	12	+// https://www.amcharts.com/docs/v5/concepts/themes/
	13	+root.setThemes([
	14	+ am5themes_Animated.new(root)
	15	+]);
	16	+
	17	+
	18	+// Create chart
	19	+// https://www.amcharts.com/docs/v5/charts/percent-charts/sliced-chart/
	20	+let chart = root.container.children.push(am5percent.SlicedChart.new(root, {
	21	+ layout: root.verticalLayout
	22	+}));
	23	+
	24	+
	25	+// Create series
	26	+// https://www.amcharts.com/docs/v5/charts/percent-charts/sliced-chart/#Series
	27	+let series = chart.series.push(am5percent.PictorialStackedSeries.new(root, {
	28	+ alignLabels: true,
	29	+ orientation: "vertical",
	30	+ valueField: "value",
	31	+ categoryField: "category",
	32	+ svgPath: "M53.5,476c0,14,6.833,21,20.5,21s20.5-7,20.5-21V287h21v189c0,14,6.834,21,20.5,21 c13.667,0,20.5-7,20.5-21V154h10v116c0,7.334,2.5,12.667,7.5,16s10.167,3.333,15.5,0s8-8.667,8-16V145c0-13.334-4.5-23.667-13.5-31 s-21.5-11-37.5-11h-82c-15.333,0-27.833,3.333-37.5,10s-14.5,17-14.5,31v133c0,6,2.667,10.333,8,13s10.5,2.667,15.5,0s7.5-7,7.5-13 V154h10V476 M61.5,42.5c0,11.667,4.167,21.667,12.5,30S92.333,85,104,85s21.667-4.167,30-12.5S146.5,54,146.5,42 c0-11.335-4.167-21.168-12.5-29.5C125.667,4.167,115.667,0,104,0S82.333,4.167,74,12.5S61.5,30.833,61.5,42.5z"
	33	+}));
	34	+
	35	+series.labelsContainer.set("width", 100);
	36	+series.ticks.template.set("location", 0.6);
	37	+
	38	+
	39	+// Set data
	40	+// https://www.amcharts.com/docs/v5/charts/percent-charts/sliced-chart/#Setting_data
	41	+series.data.setAll([
	42	+ { value: 10, category: "부계면" },
	43	+ { value: 9, category: "소보면" },
	44	+ { value: 6, category: "군위읍" },
	45	+ { value: 5, category: "우보면" },
	46	+ { value: 4, category: "의흥면" },
	47	+ { value: 3, category: "삼국유사면" },
	48	+ { value: 3, category: "산성면" },
	49	+ { value: 2, category: "효령면" }
	50	+]);
	51	+
	52	+
	53	+// Play initial series animation
	54	+// https://www.amcharts.com/docs/v5/concepts/animations/#Animation_of_series
	55	+chart.appear(1000, 100);
	56	+ // end am5.ready()
	57	+ this.root = root;
	58	+ }
	59	+ componentWillUnmount() {
	60	+ if (this.root) {
	61	+ this.root.dispose();
	62	+ }
	63	+ }
	64	+ render() {
	65	+ return <div id="Chart5" style={{ width: "100%", height: "80%" }}></div>
	66	+ }
	67	+}
	68	+
	69	+export default Chart5;

adc9c7a

5ece6ce

client/views/component/chart/ClusteredColumnChart.jsx

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

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

...	...	@@ -34,39 +34,32 @@
34	34
35	35	let data = [
36	36	{
37		- date: "2022.12.23",
	37	+ date: "1월",
38	38	lowest: 5,
39		- highest: 18,
40	39	},
41	40	{
42		- date: "2022.12.24",
	41	+ date: "2월",
43	42	lowest: 18,
44		- highest: 26,
45	43	},
46	44	{
47		- date: "2022.12.25",
	45	+ date: "3월",
48	46	lowest: 10,
49		- highest: 29,
50	47	},
51	48	{
52		- date: "2022.12.26",
	49	+ date: "4월",
53	50	lowest: 18,
54		- highest: 26,
55	51	},
56	52	{
57		- date: "2022.12.27",
	53	+ date: "5월",
58	54	lowest: 18,
59		- highest: 26,
60	55	},
61	56	{
62		- date: "2022.12.28",
	57	+ date: "6월",
63	58	lowest: 18,
64		- highest: 26,
65	59	},
66	60	{
67		- date: "2022.12.29",
	61	+ date: "7월",
68	62	lowest: 18,
69		- highest: 26,
70	63	},
71	64	];
72	65
...	...	@@ -132,8 +125,6 @@
132	125	legend.data.push(series);
133	126	}
134	127
135		- makeSeries("최저온도", "lowest");
136		- makeSeries("최고온도", "highest");
137	128
138	129	// Make stuff animate on load
139	130	// https://www.amcharts.com/docs/v5/concepts/animations/

adc9c7a

5ece6ce

client/views/component/chart/LineColor.jsx

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

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


 
     // Add scrollbar
     // https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
-    chart.set(
-      "scrollbarX",
-      am5.Scrollbar.new(root, {
-        orientation: "horizontal",
-        marginBottom: 20,
-      })
-    );
+    // chart.set(
+    //   "scrollbarX",
+    //   am5.Scrollbar.new(root, {
+    //     orientation: "horizontal",
+    //     marginBottom: 20,
+    //   })
+    // );
 
     // Make stuff animate on load
     // https://www.amcharts.com/docs/v5/concepts/animations/

adc9c7a

5ece6ce

client/views/component/chart/Map.jsx

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

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


 import React, { Component } from "react";
 import * as am5 from "@amcharts/amcharts5";
 import * as am5map from "@amcharts/amcharts5/map";
-import am5geodata_usaLow from "../map";
+import am5geodata_gunwi from "../map";
 import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
-// import seniorjson from "../../component/senior.json";
 
 class Map extends Component {
   componentDidMount() {
+    const props = this.props;
     let root = am5.Root.new("Map");
     root.setThemes([am5themes_Animated.new(root)]);
 

     // Create polygon series
     let polygonSeries = chart.series.push(
       am5map.MapPolygonSeries.new(root, {
-        geoJSON: am5geodata_usaLow,
+        geoJSON: am5geodata_gunwi,
       })
     );
 

       }
       chart.goHome();
       zoomOut.hide();
-      currentSeries = regionalSeries.US.series;
+      currentSeries = regionalSeries.KR.series;
       currentSeries.show();
     });
     zoomOut.hide();

     // Load senior data
     am5.net
       .load(
-        "https://gist.githubusercontent.com/dbskfnd/e618b91a622b8efeb55ccc562c47864a/raw/23d9030fe1e6e42d6e43348d86b02f6aafa464e2/seniornumber.json"
+        "https://gist.githubusercontent.com/jlchoi1932/c3673a65fd00efa9192b3aac5bc02a1a/raw/e7bf0bc2320d0baa2f8274f94084a3dd2b098c91/_GunwiRegion.json"
       )
       .then(function (result) {
         let seniors = am5.JSONParser.parse(result.response);
-        setupseniors(seniors);
+        setupseniors(seniors); 
       });
 
     let regionalSeries = {};

       console.log(data);
 
       // Init country-level series
-      regionalSeries.US = {
+      regionalSeries.KR = {
         markerData: [],
         series: createSeries("seniors"),
       };
 
       // Set current series
-      currentSeries = regionalSeries.US.series;
+      currentSeries = regionalSeries.KR.series;
 
       // Process data
       am5.array.each(data.query_results, function (senior) {

               type: "state",
               name: statePolygon.dataItem.dataContext.name,
               count: senior.count,
-              seniors: 1,
+              seniors: senior.count,
               state: senior.state,
               markerData: [],
               geometry: {

                 coordinates: [centroid.longitude, centroid.latitude],
               },
             };
-            regionalSeries.US.markerData.push(regionalSeries[senior.state]);
+            regionalSeries.KR.markerData.push(regionalSeries[senior.state]);
           } else {
             // State not found
             return;

         }
 
         // Process city-level data
-        if (regionalSeries[senior.city] == undefined) {
-          regionalSeries[senior.city] = {
-            target: senior.city,
-            type: "city",
-            name: senior.city,
-            count: senior.count,
-            seniors: 1,
-            state: senior.state,
-            markerData: [],
-            geometry: {
-              type: "Point",
-              coordinates: [senior.long, senior.lat],
-            },
-          };
-          regionalSeries[senior.state].markerData.push(
-            regionalSeries[senior.city]
-          );
-        } else {
-          regionalSeries[senior.city].seniors++;
-          regionalSeries[senior.city].count += senior.count;
-        }
+        // if (regionalSeries[senior.city] == undefined) {
+        //   regionalSeries[senior.city] = {
+        //     target: senior.city,
+        //     type: "city",
+        //     name: senior.city,
+        //     count: senior.count,
+        //     seniors: 1,
+        //     state: senior.state,
+        //     markerData: [],
+        //     geometry: {
+        //       type: "Point",
+        //       coordinates: [senior.long, senior.lat],
+        //     },
+        //   };
+        //   regionalSeries[senior.state].markerData.push(
+        //     regionalSeries[senior.city]
+        //   );
+        // } else {
+        //   regionalSeries[senior.city].seniors++;
+        //   regionalSeries[senior.city].count += senior.count;
+        // }
 
-        // Process individual senior
-        regionalSeries[senior.city].markerData.push({
-          name: senior.location,
-          count: senior.count,
-          seniors: 1,
-          state: senior.state,
-          geometry: {
-            type: "Point",
-            coordinates: [senior.long, senior.lat],
-          },
-        });
+        // // Process individual senior
+        // regionalSeries[senior.city].markerData.push({
+        //   name: senior.location,
+        //   count: senior.count,
+        //   seniors: 1,
+        //   state: senior.state,
+        //   geometry: {
+        //     type: "Point",
+        //     coordinates: [senior.long, senior.lat],
+        //   },
+        // });
       });
-      console.log(regionalSeries.US.markerData);
-      regionalSeries.US.series.data.setAll(regionalSeries.US.markerData);
+      console.log(regionalSeries.KR.markerData);
+      regionalSeries.KR.series.data.setAll(regionalSeries.KR.markerData);
     }
 
     // Finds polygon in series by its id

 
       // Add senior bullet
       let circleTemplate = am5.Template.new(root);
-      pointSeries.bullets.push(function () {
+      pointSeries.bullets.push(() => {
         let container = am5.Container.new(root, {});
 
         let circle = container.children.push(
           am5.Circle.new(
             root,
             {
-              radius: 10,
-              fill: am5.color(0x000000),
+              radius: 12,
+              fill: am5.color("#f1de04"),
               fillOpacity: 0.7,
               cursorOverStyle: "pointer",
               tooltipText: "{name}:\n[bold]{seniors} seniors[/]",

         );
 
         // Set up drill-down
-        circle.events.on("click", function (ev) {
+        circle.events.on("click", (ev) => {
           // Determine what we've clicked on
           let data = ev.target.dataItem.dataContext;
+          console.log({ data });
 
           // No id? Individual senior - nothing to drill down to further
           if (!data.target) {
             return;
+          }
+
+          if (data.type === "state") {
+            props.setCityName(data.name);
           }
 
           // Create actual series if it hasn't been yet created

           }
 
           // Hide current series
-          if (currentSeries) {
-            currentSeries.hide();
-          }
+          // if (currentSeries) {
+          //   currentSeries.hide();
+          // }
 
           // Control zoom
-          if (data.type == "state") {
-            let statePolygon = getPolygon("KR-" + data.state);
-            polygonSeries.zoomToDataItem(statePolygon.dataItem);
-          } else if (data.type == "city") {
-            chart.zoomToGeoPoint(
-              {
-                latitude: data.geometry.coordinates[1],
-                longitude: data.geometry.coordinates[0],
-              },
-              64,
-              true
-            );
-          }
-          zoomOut.show();
+          // if (data.type == "state") {
+          //   let statePolygon = getPolygon("KR-" + data.state);
+          //   polygonSeries.zoomToDataItem(statePolygon.dataItem);
+          // } else if (data.type == "city") {
+          //   chart.zoomToGeoPoint(
+          //     {
+          //       latitude: data.geometry.coordinates[1],
+          //       longitude: data.geometry.coordinates[0],
+          //     },
+          //     64,
+          //     true
+          //   );
+          // }
+          // zoomOut.show();
 
           // Show new targert series
           currentSeries = regionalSeries[data.target].series;

 
   render() {
     return (
-        <div
-          className="flex80"
-          id="Map"
-          style={{ width: "100%", height: "35vh", marginBottom: "1rem" }}
-        ></div>
+      <div
+        className="flex80"
+        id="Map"
+        style={{ width: "100%", height: "42vh", marginBottom: "1rem" }}
+      ></div>
     );
   }
 }

adc9c7a

5ece6ce

client/views/component/chart/RowChart.jsx

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

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


         xAxis: xAxis,
         yAxis: yAxis,
         valueXField: "value",
+        descriptionField : "value",
         categoryYField: "network",
         tooltip: am5.Tooltip.new(root, {
           pointerOrientation: "left",

     // Set data
     let data = [
       {
-        network: "60대",
-        value: 80,
+        network: "1월",
+        value: 20,
       },
       {
-        network: "70대",
-        value: 80,
+        network: "2월",
+        value: 18,
       },
       {
-        network: "80대",
-        value: 70,
+        network: "3월",
+        value: 10,
       },
       {
-        network: "90대",
-        value: 75,
+        network: "4월",
+        value: 7,
+      },
+      {
+        network: "5월",
+        value: 5,
+      },
+      {
+        network: "6월",
+        value: 3,
+      },
+      {
+        network: "7월",
+        value: 6,
+      },
+      {
+        network: "8월",
+        value: 7,
+      },
+      {
+        network: "9월",
+        value: 15,
+      },
+      {
+        network: "10월",
+        value: 30,
+      },
+      {
+        network: "11월",
+        value: 13,
+      },
+      {
+        network: "12월",
+        value: 9,
       },
     ];
 

   }
 
   render() {
-    return <div id="RowChart" style={{ width: "100%", height: "100%" }}></div>;
+    return <div id="RowChart" style={{ width: "100%", height: "80%" }}></div>;
   }
 }
 

adc9c7a

5ece6ce

client/views/component/map.js

--- client/views/component/map.js

+++ client/views/component/map.js


-var rnsdnl = {
+var gunwi = {
   type: "FeatureCollection",
   features: [
     {

       },
       properties: {
         name: "군위읍",
-        id: "KR-rnsdnldmq",
+        id: "KR-gunwieup",
         TYPE: "Province",
         CNTRY: "South Korea",
       },
-      id: "KR-rnsdnldmq",
+      id: "KR-gunwieup",
     },
     {
       type: "Feature",

       },
       properties: {
         name: "소보면",
-        id: "KR-thqhaus",
+        id: "KR-sobomyeon",
         TYPE: "Province",
         CNTRY: "South Korea",
       },
-      id: "KR-thqhaus",
+      id: "KR-sobomyeon",
     },
     {
       type: "Feature",

       },
       properties: {
         name: "효령면",
-        id: "KR-gyfudaus",
+        id: "KR-hyolyeongmyeon",
         TYPE: "Province",
         CNTRY: "South Korea",
       },
-      id: "KR-gyfudaus",
+      id: "KR-hyolyeongmyeon",
     },
     {
       type: "Feature",

       },
       properties: {
         name: "부계면",
-        id: "KR-qnrPaus",
+        id: "KR-bugyemyeon",
         TYPE: "Province",
         CNTRY: "South Korea",
       },
-      id: "KR-qnrPaus",
+      id: "KR-bugyemyeon",
     },
     {
       type: "Feature",

       },
       properties: {
         name: "우보면",
-        id: "KR-dnqhaus",
+        id: "KR-ubomyeon",
         TYPE: "Province",
         CNTRY: "South Korea",
       },
-      id: "KR-dnqhaus",
+      id: "KR-ubomyeon",
     },
     {
       type: "Feature",

       },
       properties: {
         name: "의흥면",
-        id: "KR-dmlgmdaus",
+        id: "KR-uiheungmyeon",
         TYPE: "Province",
         CNTRY: "South Korea",
       },
-      id: "KR-dmlgmdaus",
+      id: "KR-uiheungmyeon",
     },
     {
       type: "Feature",

       },
       properties: {
         name: "산성면",
-        id: "KR-tkstjdaus",
+        id: "KR-sanseongmyeon",
         TYPE: "Province",
         CNTRY: "South Korea",
       },
-      id: "KR-tkstjdaus",
+      id: "KR-sanseongmyeon",
     },
     {
       type: "Feature",

       },
       properties: {
         name: "삼국유사면",
-        id: "KR-tkarnrdbtkaus",
+        id: "KR-samgugyusamyeon",
         TYPE: "Province",
         CNTRY: "South Korea",
       },
-      id: "KR-tkarnrdbtkaus",
+      id: "KR-samgugyusamyeon",
     },
   ],
 };
-export default rnsdnl;
+export default gunwi;

adc9c7a

5ece6ce

client/views/component/store.json

--- client/views/component/store.json

+++ client/views/component/store.json

This diff is too big to display.

adc9c7a

5ece6ce

client/views/layout/Menu.jsx

--- client/views/layout/Menu.jsx

+++ client/views/layout/Menu.jsx


     icon: <HouseIcon sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }} />,
   },
   {
-    title: "사용자 관리",
-    path: "/UserAuthoriySelect",
+    title: "시행기관관리",
     icon: (
       <PersonIcon sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }} />
     ),
+    childrens: [
+      {
+        title: "기관 조회",
+        path: "/UserAuthoriySelect",
+      },
+      {
+        title: "기관별 통계 자료",
+        path: "/MedicineStatistics",
+      },
+    ],
+
   },
+  // {
+  //   title: "건강 관리",
+  //   prefix: "/Medicine",
+  //   icon: (
+  //     <Diversity1Icon sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }} />
+  //   ),
+  //   childrens: [
+  //     {
+  //       title: "복약 관리",
+  //       path: "/MedicineCareSelect",
+  //     },
+  //     {
+  //       title: "댁내 온도 관리",
+  //       path: "/TemperatureManagementSelect",
+  //     },
+  //     {
+  //       title: "복약율 통계",
+  //       path: "/MedicineStatistics",
+  //     },
+  //   ],
+  // },
+  // {
+  //   title: "방문 관리",
+  //   prefix: "/Visit",
+  //   icon: (
+  //     <DoorFrontIcon sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }} />
+  //   ),
+  //   childrens: [
+  //     {
+  //       title: "방문 관리",
+  //       path: "/VisitSelect",
+  //     },
+  //   ],
+  // },
+  // {
+  //   title: "장비 관리",
+  //   prefix: "/Equipment",
+  //   icon: (
+  //     <SpeakerPhoneIcon
+  //       sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }}
+  //     />
+  //   ),
+  //   childrens: [
+  //     {
+  //       title: "장비 관리",
+  //       path: "/EquipmentManagementSelect",
+  //     },
+  //   ],
+  // },
+  // {
+  //   title: "고객지원센터",
+  //   icon: (
+  //     <CallIcon sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }} />
+  //   ),
+  //   childrens: [      
+  //     {
+  //       title: "장비 반납/교환 요청",
+  //       path: "/EquipmentManagementSelectReturn",
+  //     },
+  //   ],
+  // },
   {
-    title: "장비 관리",
-    path: "/EquipmentManagementSelect",
+    title: "설정",
     icon: (
-      <SpeakerPhoneIcon
-        sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }}
-      />
+      <SettingsIcon sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }} />
     ),
-  },  
-  {
-    title: "장비 반납/교환 요청",
-    path: "/EquipmentManagementSelectReturn",
-    icon: (
-      <CallIcon sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }} />
-    ),
-  },
-  {
-    title: "문의게시판",
-    path: "/EquipmentManagementSelectReturn",
-    icon: (
-      <SpeakerPhoneIcon
-        sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }}
-      />
-    ),
+    childrens: [
+      {
+        title: "위험 기준 관리",
+        path: "/RiskInsert",
+      },
+      {
+        title: "사용자 권한 관리",
+        path: "/AuthorityManagement",
+      },
+    ],
   },
 ];
 

 
   return (
     <nav
-      className={!menuToggle ? "nav" : "burger__menu"}
+      className={"nav"}
       onClick={() => (menuToggle ? setMenuToggle(false) : setMenuToggle(true))}
     >
-      <h1 className="logo">시니어 케어 시스템</h1>
       <div className="flex-align-column" style={{ height: `calc(100% - 72px)` }}>
         <ul>
+          <h1 className="logo">시니어 케어 시스템</h1>
           {items.map((item, index) => (
             <SidebarItem key={index} item={item} />
           ))}
-        </ul>
-        <div className="info-wrap ">
-          <div className="bottom-section flex">
-            <div className="info-id flex50">관리자</div>
-            <Button className={"logout flex50"} btnName={"로그아웃"} />
+          <div className="info-wrap ">
+            <div className="bottom-section flex">
+              <div className="info-id flex50">관리자</div>
+              <Button className={"logout flex50"} btnName={"로그아웃"} />
+            </div>
           </div>
-        </div>
+        </ul>
       </div>
     </nav>
   );

adc9c7a

5ece6ce

client/views/pages/App.jsx

--- client/views/pages/App.jsx

+++ client/views/pages/App.jsx


 function App() {
   const location = useLocation();
   const navigate = useNavigate();
-  const [isLogin, setIsLogin] = React.useState(true);
+  const [isLogin, setIsLogin] = React.useState(false);
 
-  const getLogin = () => {
+  const getLogin = (loginComponentName) => {
     setIsLogin(true);
-    navigate("/Main");
+    if (loginComponentName == undefined || loginComponentName == null || loginComponentName.length == 0) {
+      navigate("/Main");
+    } else {
+      navigate(loginComponentName);
+    }
   };
 
   const { title } = items.find(

       location.pathname.startsWith(item.prefix) ||
       item.childrens?.some((child) => location.pathname.startsWith(child.path))
   ) ?? { title: '' };
+
   return (
     <div id="App">
       {isLogin ? (

adc9c7a

5ece6ce

client/views/pages/AppRoute.jsx

--- client/views/pages/AppRoute.jsx

+++ client/views/pages/AppRoute.jsx


 import EquipmentRentalInsert from "./equipment/EquipmentRentalInsert.jsx";
 import EquipmentManagementSelect from "./equipment/EquipmentManagementSelect.jsx";
 import EquipmentManagementSelectOne from "./equipment/EquipmentManagementSelectOne.jsx";
+import EquipmentManagementInsert from "./equipment/EquipmentManagementInsert.jsx";
 import UserAuthoriySelect from "./authority/UserAuthoriySelect.jsx";
 import MyInfoUpdate from "./authority/MyInfoUpdate.jsx";
-import CallInsert from "./callcenter/CallInsert.jsx";
-import CallSelect from "./callcenter/CallSelect.jsx";
-import CallSelectOne from "./callcenter/CallSelectOne.jsx";
-import CallUpdate from "./callcenter/CallUpdate.jsx";
 import EquipmentManagementSelectReturn from "./equipment/EquipmentManagementSelectReturn.jsx";
-import RiskInsert from "./authority/RiskInsert.jsx";
 import AuthorityManagement from "./authority/AuthorityManagement.jsx";
+import ServiceInsert from "./serviceCenter/ServiceInsert.jsx";
+import AgencyInsert from "./authority/AgencyInsert.jsx";
+import RiskInsert from "./authority/RiskInsert.jsx";
 
 function AppRoute() {
   return (

         element={<UserAuthoriySelect />}
       ></Route>
       <Route path="/MyInfoUpdate" element={<MyInfoUpdate />}></Route>
-      <Route path="/CallInsert" element={<CallInsert />}></Route>
-      <Route path="/CallUpdate" element={<CallUpdate />}></Route>
-      <Route path="/CallSelect" element={<CallSelect />}></Route>
-      <Route path="/CallSelectOne" element={<CallSelectOne />}></Route>
       <Route path="/EquipmentManagementSelectReturn" element={<EquipmentManagementSelectReturn />}></Route>
-      <Route path="/RiskInsert" element={<RiskInsert />}></Route>
       <Route path="/AuthorityManagement" element={<AuthorityManagement />}></Route>
+      <Route path="/EquipmentManagementInsert" element={<EquipmentManagementInsert />}></Route>
+      <Route path="/ServiceInsert" element={<ServiceInsert />}></Route>
+      <Route path="/AgencyInsert" element={<AgencyInsert />}></Route>
+      <Route path="/RiskInsert" element={<RiskInsert />}></Route>
     </Routes>
   );
 }

5ece6ce

client/views/pages/authority/AgencyInsert.jsx (added)

+++ client/views/pages/authority/AgencyInsert.jsx

...	...	@@ -0,0 +1,70 @@
	1	+import React from "react";
	2	+import Button from "../../component/Button.jsx";
	3	+import ContentTitle from "../../component/ContentTitle.jsx";
	4	+
	5	+export default function ServiceInsert() {
	6	+ return (
	7	+ <main>
	8	+ <div className="content-wrap">
	9	+ <ContentTitle contentTitle={"시행기관 등록"} />
	10	+ <div className="margin-bottom2 insert">
	11	+ {/* <div className="flex30">
	12	+ <div className="flex margin-bottom">
	13	+ <input
	14	+ type="text"
	15	+ name=""
	16	+ id=""
	17	+ className="flex80"
	18	+ placeholder="사용자 검색"
	19	+ />
	20	+ <Button btnName={"검색"} className={"flex20"} />
	21	+ </div>
	22	+ <ul className="user-list">
	23	+ <li>검색 내역이 없습니다.</li>
	24	+ </ul>
	25	+ </div> */}
	26	+ <table className="flex70 margin-bottom">
	27	+ <tbody className="equipment-insert">
	28	+ <tr>
	29	+ <th>기관명</th>
	30	+ <td colSpan={5}>
	31	+ <input type="text" name="" id="" />
	32	+ </td>
	33	+ </tr>
	34	+ <tr>
	35	+ <th>사업자번호</th>
	36	+ <td>
	37	+ <input type="text" name="" id="" />
	38	+ </td>
	39	+ <th>담당자명</th>
	40	+ <t>
	41	+ <input type="text" name="" id="" />
	42	+ </t>
	43	+ </tr>
	44	+ <tr>
	45	+ <th>담당 부서 연락처</th>
	46	+ <td>
	47	+ <input type="text" name="" id="" />
	48	+ </td>
	49	+ <th>FAX</th>
	50	+ <td>
	51	+ <input type="text" name="" id="" />
	52	+ </td>
	53	+ </tr>
	54	+ <tr>
	55	+ <th>주소</th>
	56	+ <td colSpan={5}>
	57	+ <input type="text" name="" id="" />
	58	+ </td>
	59	+ </tr>
	60	+ </tbody>
	61	+ </table>
	62	+ </div>
	63	+ <div className="btn-wrap flex-center">
	64	+ <Button className={"btn-large gray-btn"} btnName={"취소"} />
	65	+ <Button className={"btn-large green-btn"} btnName={"등록"} />
	66	+ </div>
	67	+ </div>
	68	+ </main>
	69	+ );
	70	+}

adc9c7a

5ece6ce

client/views/pages/authority/AuthorityManagement.jsx

--- client/views/pages/authority/AuthorityManagement.jsx

+++ client/views/pages/authority/AuthorityManagement.jsx

...	...	@@ -178,6 +178,57 @@
178	178	<div className="btn-wrap flex-end">
179	179	<Button className={"btn-small green-btn"} btnName={"저장"} />
180	180	</div>
	181	+ <SubTitle className="margin-bottom" explanation={"각 메뉴에 대한 설명"} />
	182	+ <table className="explain-table">
	183	+ <thead>
	184	+ <tr>
	185	+ <th rowSpan="2">메뉴</th>
	186	+ <th rowSpan="2">소메뉴</th>
	187	+ <th rowSpan="2">상세설명</th>
	188	+ </tr>
	189	+ </thead>
	190	+ <tbody>
	191	+ <tr>
	192	+ <td>사용자 관리</td>
	193	+ <td>-</td>
	194	+ <td>사용자(노인, 보호자 등)를 등록하고 삭제할 수 있다.</td>
	195	+ </tr>
	196	+ <tr>
	197	+ <td rowSpan="3">건강관리</td>
	198	+ <td>복약관리</td>
	199	+ <td>사용자(노인)의 아침, 점심, 저녁 복약여부를 확인하고 관리할 수 있다.</td>
	200	+ </tr>
	201	+ <tr>
	202	+ <td>댁내온도관리</td>
	203	+ <td>사용자(노인)의 아침, 점심, 저녁 댁내온도를 확인하고 관리할 수 있다.</td>
	204	+ </tr>
	205	+ <tr>
	206	+ <td>복약통계</td>
	207	+ <td>시행기관에 등록되어 있는 사용자(노인)의 복약 통계 자료를 볼 수 있다.</td>
	208	+ </tr>
	209	+ <tr>
	210	+ <td>방문 관리</td>
	211	+ <td>-</td>
	212	+ <td>시행기관의 복지사가 사용자(노인)을 방문한 내역을 확인하고 관리할 수 있다.</td>
	213	+ </tr>
	214	+ <tr>
	215	+ <td>장비 관리</td>
	216	+ <td>-</td>
	217	+ <td>시행기관에서 관리하고 있는 장비(전체, 미사용, 사용)현황을 관리하고 사용자를 등록할 수 있다.</td>
	218	+ </tr>
	219	+ <tr>
	220	+ <td>고객지원센터</td>
	221	+ <td>-</td>
	222	+ <td>장비업체에 교환/반납 요청을 할 수 있다.</td>
	223	+ </tr>
	224	+ <tr>
	225	+ <td>Q&A</td>
	226	+ <td>-</td>
	227	+ <td>사용자(노인, 보호자 등)질문을 등록하고 답변할 수 있다.</td>
	228	+ </tr>
	229	+
	230	+ </tbody>
	231	+ </table>
181	232	</div>
182	233	</div>
183	234	</div>

adc9c7a

5ece6ce

client/views/pages/authority/UserAuthoriySelect.jsx

--- client/views/pages/authority/UserAuthoriySelect.jsx

+++ client/views/pages/authority/UserAuthoriySelect.jsx


 import React from "react";
 import Table from "../../component/Table.jsx";
 import Button from "../../component/Button.jsx";
+import { useNavigate } from "react-router";
+import AgencySearch from "../../component/AgencySearch.jsx";
+import ContentTitle from "../../component/ContentTitle.jsx";
 import SubTitle from "../../component/SubTitle.jsx";
-import Modal from "../../component/Modal.jsx";
 
-export default function UserAuthoriySelect() {
-  const [modalOpen, setModalOpen] = React.useState(false);
-  const openModal = () => {
-    setModalOpen(true);
-  };
-  const closeModal = () => {
-    setModalOpen(false);
-  };
-  const thead1 = [
-    "No",
-    "사용자관리번호",
-    "관리기관",
-    "이름",
-    "성별",
-    "지역",
-    "연락처",
-    "주소",
-  ];
-  const key1 = ["No",
-  "management_number",
-  "level_of_care",
-  "name",
-  "gender",
-  "birth",
-  "phone",
-  "address",];
-  const content1 = [
-    {
-      No: 1,
-      management_number: 2022080101,
-      level_of_care: "A복지관",
-      name: "김복남",
-      gender: "남",
-      birth: "대구",
-      phone: "010-1234-1234",
-      address: "경상북도 군위군 삼국유사면",
-    },
-  ];
+export default function SeniorSelect() {
+  const navigate = useNavigate();
 
-  const thead2 = [
+  //게시판
+  const thead = [
     "No",
-    "보호자명",
-    "ID",
-    "관리기관",
-    "해당 대상자",
-    "연락처",
-  ];
-  const key2 = [
-    "No",
-    "name",
-    "Id",
-    "management_agency",
-    "phone",
-    "birth",
-    
-  ];
-  const content2 = [
-    {
-      No: 1,
-      name: "김훈",
-      Id: "admin2",
-      management_agency: "보호재단",
-      phone: "김복남 어르신",
-      birth: "010-1234-1234",
-    },
-  ];
-  const thead3 = [
-    "No",
-    "기관명",
+    "기관명",    
     "사업자번호",
-    "ID",
-    "담당자",
-    "연락처",
-    "주소",
-  ];
-  const key3 = [
-    "No",
-    "name",
-    "birth",
-    "Id",
-    "management_agency",
-    "gender",
-    "address",
-  ];
-  const content3 = [
-    {
-      No: 1,
-      name: "보훈병원",
-      birth: " 515-82-00000",
-      Id: "admin",
-      management_agency: "홍길동",
-      gender: "053-818-8181",
-      address: "대구광역시 달성군 ",
-    },
-  ];
-  const thead4 = [
-    "No",
     "담당자명",
-    "소속기관",
-    "ID",
-    "연락처",
+    "담당 부서 연락처",
+    "관리 장비 개수",
     "주소",
+    "등록된 복지사",
   ];
-  const key4 = [
+  const key = [
     "No",
-    "name",
-    "birth",
-    "Id",
-    "management_agency",
+    "name",    
+    "BusinessNumber",
+    "representative",
+    "phone",
+    "Fax",
     "address",
+    "worker",
   ];
-  const content4 = [
+  const content = [
     {
       No: 1,
-      name: "홍길동",
-      birth: " 대구보훈병원",
-      Id: "admin",
-      management_agency: "053-818-8181",
-      address: "대구광역시 달성군 ",
+      name: "A복지관",
+      BusinessNumber: "515-82-00000",
+      representative: "김길동",
+      phone: "053-811-1234",
+      Fax: "50개",
+      address: "경상북도 군위군 삼국유사면",
+      worker: (
+        <Button
+          className={"btn-small gray-btn"}
+          btnName={"상세보기"}
+          onClick={() => {
+            navigate("/SeniorSelectOne");
+          }}
+        />
+      ),
     },
-  ];
-  
-  const thead5 = [
-    "No",
-    "장비명",
-    "시리얼 넘버",
-    "기기 상태",
-    "구매일",
-    "배터리 잔량",
-    "대여가능여부",
-  ];
-  const key5 = ["No",
-  "equipment_name",
-  "serialNumber",
-  "work",
-  "name",
-  "battery",
-  "rental",];
-  const content5 = [
     {
-      No: 1,
-      equipment_name: "스마트약상자",
-      serialNumber: "ABCD-1",
-      work: "작동",
-      name: "2022.12.02",
-      battery: "10%",
-      rental: "대여가능",
+      No: 2,
+      name: "B복지관",
+      BusinessNumber: "515-82-00000",
+      representative: "김길동",
+      phone: "053-811-1234",
+      Fax: "80개",
+      address: "경상북도 군위군 삼국유사면",
+      worker: (
+        <Button
+          className={"btn-small gray-btn"}
+          btnName={"상세보기"}
+          onClick={() => {
+            navigate("/SeniorSelectOne");
+          }}
+        />
+      ),
+    },
+    {
+      No: 3,
+      name: "대구보훈병원",
+      BusinessNumber: "515-82-00000",
+      representative: "김길동",
+      phone: "053-811-1234",
+      Fax: "30개",
+      address: "경상북도 군위군 삼국유사면",
+      worker: (
+        <Button
+          className={"btn-small gray-btn"}
+          btnName={"상세보기"}
+          onClick={() => {
+            navigate("/SeniorSelectOne");
+          }}
+        />
+      ),
     },
   ];
 
-  const data = [
-    {
-      id: 1,
-      title: "사용자",
-      description: (
-        <Table
-          className={"protector-user"}
-          head={thead1}
-          contents={content1}
-          contentKey={key1}
-          onClick={() => {
-            navigate("/SeniorSelectOne");
-          }}
-        />
-      ),
-    },
-    {
-      id: 2,
-      title: "보호자(가족)",
-      description: (
-        <Table
-          className={"caregiver-user"}
-          head={thead2}
-          contents={content2}
-          contentKey={key2}
-          onClick={() => {
-            navigate("/SeniorSelectOne");
-          }}
-        />
-      ),
-    },
-    {
-      id: 3,
-      title: "계약업체",
-      description: (
-        <Table
-          className={"common-user"}
-          head={thead3}
-          contents={content3}
-          contentKey={key3}
-          onClick={() => {
-            navigate("/SeniorSelectOne");
-          }}
-        />
-      ),
-    },
-    {
-      id: 4,
-      title: "복지사, 간호사",
-      description: (
-        <Table
-          className={"common-user"}
-          head={thead3}
-          contents={content3}
-          contentKey={key3}
-          onClick={() => {
-            navigate("/SeniorSelectOne");
-          }}
-        />
-      ),
-    },
-    {
-      id: 5,
-      title: "관리자",
-      description: (
-        <Table
-          className={"management-user"}
-          head={thead4}
-          contents={content4}
-          contentKey={key4}
-          onClick={() => {
-            navigate("/SeniorSelectOne");
-          }}
-        />
-      ),
-    },
-  ];
-  const [index, setIndex] = React.useState(1);
+  //select option 동적 생성
+  // const optionList = () => {
+  //   let year = [];
+  //   let month = [];
+  //   let days = [];
+  //   let currentDate = new Date();
+  //   let currentYear = currentDate.getFullYear();
+
+  //   for (let i = 1910; i < currentYear.length; i++) {
+  //     year.push(i);
+  //   }
+
+  //   for (let j = 1; i < 13; j++) {
+  //     month.push(j);
+  //   }
+
+  //   for (let k = 1; i < 32; k++) {
+  //     days.push(k);
+  //   }
+  //   return year, month, days;
+  // };
+
+  // React.useEffect(() => {
+  //   optionList();
+  // }, []);
+
   return (
     <main>
-      <Modal open={modalOpen} close={closeModal} header="대상자 매칭">
-        <div className="board-wrap">
-          <div className="flex margin-bottom2">
-            <div className="flex50">
-              <div className="flex margin-bottom">
-                <input
-                  type="text"
-                  name=""
-                  id=""
-                  className="flex80"
-                  placeholder="사용자 검색"
+      <div className="content-wrap">
+        <ContentTitle contentTitle={"기관 조회"} />
+        <div>
+          <AgencySearch />
+          <div className="board-wrap">
+            <div className="flex-end">
+              <div className="btn-wrap flex-end margin-bottom ">
+                <Button
+                  className={"btn-small green-btn"}
+                  btnName={"등록"}
+                  onClick={() => {
+                    navigate("/AgencyInsert");
+                  }}
                 />
-                <Button btnName={"검색"} className={"flex20"} />
+                <Button className={"btn-small green-btn"} btnName={"삭제"} />
               </div>
-              <ul className="user-list2">
-                <li>검색 내역이 없습니다.</li>
-              </ul>
-            </div>
-            <div className="flex50">
-            <div className="flex margin-bottom">
-                <p className="content-title">선택된 대상자</p>
-              </div>
-              <ul className="user-check-list">
-                <div className="flex-start">
-                  <input type="text" />
-                  <label htmlFor=""></label>
-                </div>
-              </ul>
-            </div>
-          </div>
-          <div>
-            <Button
-              className={"btn-100 green-btn"}
-              btnName={"등록"}
-              onClick={closeModal}
+            </div >
+            <Table
+              className={"senior-table"}
+              head={thead}
+              contents={content}
+              contentKey={key}
             />
+            
           </div>
         </div>
-      </Modal>
-      <div className="flex">
-        <div className="tab-container">
-          <div className="category">
-            <ul>올잇메디 <Button
-              className={"category-btn"}
-              btnName={"관리기관 추가"}
-              onClick={closeModal}
-            />
-              <li>서구청<Button
-              className={"category-btn"}
-              btnName={"시행기관 추가"}
-              onClick={closeModal}
-            />
-                <ul>
-                  <li>A복지관</li>
-                  <li>B복지관</li>
-                </ul>
-              </li>
-              <li>보훈병원<Button
-              className={"category-btn"}
-              btnName={"시행기관 추가"}
-              onClick={closeModal}
-            /></li>
-              <ul>
-                <li>
-                  대구보훈병원
-                </li>
-              </ul>
-              <li>관리기관<Button
-              className={"category-btn"}
-              btnName={"시행기관 추가"}
-              onClick={closeModal}
-            />
-                <ul>
-                  <li>시행기관1</li>
-                  <li>시행기관2</li>
-                </ul>
-              </li>
-            </ul>
-          </div>
-        </div>
-        <div className="tab-container">
-          <ul className="tab-menu-mobile">
-            <div>
-              <SubTitle
-                className="margin-bottom"
-                subtitle={"사용자 선택"}
-                explanation={"사용자 별로 선택 후 관리할 수 있습니다. "}
-              />
-            </div>
-            <select name="" id="" style={{ width: "100%" }}>
-              <option value="사용자선택">보호자</option>
-              <option value="사용자선택">보호사</option>
-              <option value="사용자선택">병원</option>
-              <option value="사용자선택">지자체</option>
-              <option value="사용자선택">관리자</option>
-            </select>
-          </ul>
-          <ul className="tab-menu">
-            {data.map((item) => (
-              <li
-                key={item.id}
-                className={index === item.id ? "active" : null}
-                onClick={() => setIndex(item.id)}
-              >
-                {item.title}
-              </li>
-            ))}
-          </ul>
-          <div className="content-wrap">
-            <div className="search-management flex-end margin-bottom2">
-              <select name="management-agency">
-                <option value="기관전체">기관전체</option>
-                <option value="대구보훈병원">대구보훈병원</option>
-                <option value="군위군청">군위군청</option>
-              </select>
-              <select>
-                <option value="이름">이름</option>
-                <option value="아이디">아이디</option>
-              </select>
-              <input type="text" />
-              <Button
-                className={"btn-small gray-btn"}
-                btnName={"검색"}
-                onClick={() => navigate("/SeniorInsert")}
-              />
-            </div>
-            <ul className="tab-content">
-              {data
-                .filter((item) => index === item.id)
-                .map((item) => (
-                  <li>{item.description}</li>
-                ))}
-            </ul>
-          </div>
-        </div>
-      </div >
+      </div>
     </main>
   );
 }

5ece6ce

client/views/pages/equipment/EquipmentManagementInsert.jsx (added)

+++ client/views/pages/equipment/EquipmentManagementInsert.jsx

...	...	@@ -0,0 +1,75 @@
	1	+import React from "react";
	2	+import Button from "../../component/Button.jsx";
	3	+import ContentTitle from "../../component/ContentTitle.jsx";
	4	+
	5	+export default function EquipmentManagementInsert() {
	6	+ return (
	7	+ <main>
	8	+ <div className="content-wrap">
	9	+ <ContentTitle contentTitle={"장비 등록"} />
	10	+ <div className="margin-bottom2 insert">
	11	+ {/* <div className="flex30">
	12	+ <div className="flex margin-bottom">
	13	+ <input
	14	+ type="text"
	15	+ name=""
	16	+ id=""
	17	+ className="flex80"
	18	+ placeholder="사용자 검색"
	19	+ />
	20	+ <Button btnName={"검색"} className={"flex20"} />
	21	+ </div>
	22	+ <ul className="user-list">
	23	+ <li>검색 내역이 없습니다.</li>
	24	+ </ul>
	25	+ </div> */}
	26	+ <table className="flex70 margin-bottom">
	27	+ <tbody className="equipment-insert">
	28	+ <tr>
	29	+ <th>장비 시리얼 넘버</th>
	30	+ <td colSpan={5}>
	31	+ <input type="text" name="" id="" />
	32	+ </td>
	33	+ </tr>
	34	+ <tr>
	35	+ <th>기기종류</th>
	36	+ <td colSpan={5}>
	37	+ <div className="flex">
	38	+ <input type="checkbox" />
	39	+ <label htmlFor="">
	40	+
	41	+ 스마트 약상자
	42	+ </label>
	43	+ <input type="checkbox" />
	44	+ <label htmlFor="">
	45	+
	46	+ 심전도
	47	+ </label>
	48	+ </div>
	49	+ </td>
	50	+ </tr>
	51	+ <tr>
	52	+ <th>구매일</th>
	53	+ <td>
	54	+ <input type="date" />
	55	+ </td>
	56	+ <th>기기 상태</th>
	57	+ <td>
	58	+ <select name="" id="" className="select100">
	59	+ <option value="">양호</option>
	60	+ <option value="">수리중</option>
	61	+ <option value="">불량</option>
	62	+ </select>
	63	+ </td>
	64	+ </tr>
	65	+ </tbody>
	66	+ </table>
	67	+ </div>
	68	+ <div className="btn-wrap flex-center">
	69	+ <Button className={"btn-large gray-btn"} btnName={"취소"} />
	70	+ <Button className={"btn-large green-btn"} btnName={"등록"} />
	71	+ </div>
	72	+ </div>
	73	+ </main>
	74	+ );
	75	+}

adc9c7a

5ece6ce

client/views/pages/equipment/EquipmentManagementSelect.jsx

--- client/views/pages/equipment/EquipmentManagementSelect.jsx

+++ client/views/pages/equipment/EquipmentManagementSelect.jsx


 import { useNavigate } from "react-router";
 
 export default function EquipmentManagementSelect() {
-  const [modalOpen, setModalOpen] = React.useState(false);
-  const openModal = () => {
-    setModalOpen(true);
-  };
-  const closeModal = () => {
-    setModalOpen(false);
-  };
   const navigate = useNavigate();
   const thead1 = [
     "No",
     "장비명",
     "시리얼 넘버",
-    "입고일자",
+    "기기 상태",
+    "구매일",
     "사용여부",
-    "보유 기관",
+    "관리",
   ];
   const key1 = [
     "No",
     "equipment_name",
     "serialNumber",
+    "work",
     "name",
     "use",
     "management",];

       No: 1,
       equipment_name: "스마트약상자",
       serialNumber: "ABCD-1",
-      name: "2022.12.02",
-      use: "사용",
-      management: "A복지관"
-    },
-    {
-      No: 2,
-      equipment_name: "스마트약상자",
-      serialNumber: "ABCD-1",
-      name: "2022.12.02",
-      use: "미사용",
-      management: "B복지관"
-    },
-  ];
-  const thead3 = [
-    "No",
-    "장비명",
-    "시리얼 넘버",
-    "입고일자",
-    "사용여부",
-    "납품 기관",
-  ];
-  const key3= [
-    "No",
-    "equipment_name",
-    "serialNumber",
-    "name",
-    "use",
-    "management",];
-  const content3 = [
-    {
-      No: 1,
-      equipment_name: "스마트약상자",
-      serialNumber: "ABCD-1",
+      work: "양호",
       name: "2022.12.02",
       use: "사용",
       management: (
         <Button
           className={"btn-small gray-btn"}
-          btnName={"선택"}
-          onClick={openModal}
+          btnName={"상세보기"}
+          onClick={() => {
+            navigate("/EquipmentManagementSelectOne");
+          }}
         />
-      )
+      ),
     },
     {
       No: 2,
       equipment_name: "스마트약상자",
       serialNumber: "ABCD-1",
+      work: "불량",
       name: "2022.12.02",
       use: "미사용",
-      management: (<Button
-      className={"btn-small gray-btn"}
-      btnName={"선택"}
-      onClick={openModal}
-    />)
+      management: (
+        <Button
+          className={"btn-small gray-btn"}
+          btnName={"상세보기"}
+          onClick={() => {
+            navigate("/EquipmentManagementSelectOne");
+          }}
+        />
+      ),
     },
   ];
   const thead2 = [

     "시리얼 넘버",
     "대여일",
     "배터리 잔량",
-    "보유기관",
+    "사용자",
   ];
   const key2 = [
     "No",

       serialNumber: "ABCD-1",
       name: "2022.12.02",
       battery: "10%",
-      management: "A복지관",
-
-    },
-  ];
-  const thead4 = [
-    "No",
-    "기관명",
-    "선택하기",
-  ];
-  const key4 = [
-    "No",
-    "equipment_name",
-    "serialNumber",
-  ];
-  const content4 = [
-    {
-      No: 1,
-      equipment_name: "A복지관",
-      serialNumber: (<Button
-        className={"btn-small gray-btn"}
-        btnName={"선택"}
-      />)
-
+      management: "김복남"
     },
   ];
 

   const data = [
     {
       id: 1,
-      title: "장비 전체(205)",
+      title: "장비 전체",
       description: (
         <div>
         <div className="btn-wrap flex-end margin-bottom ">

     },
     {
       id: 2,
-      title: "재고 장비(5)",
+      title: "미사용 장비",
       description: (
         <div>
           <Table
             className={"caregiver-user"}
-            head={thead3}
-            contents={content3}
-            contentKey={key3}
+            head={thead1}
+            contents={content1}
+            contentKey={key1}
           />
         </div>      
       ),
     },
     {
       id: 3,
-      title: "납품 장비(200)",
+      title: "사용중인 장비",
       description: (
         <Table
           className={"caregiver-user"}

   const [index, setIndex] = React.useState(1);
   return (
     <main>
-      <Modal open={modalOpen} close={closeModal} header="'김복남'님의 가족">
-        <div className="board-wrap">
-          <div>
-            <Table
-              className={"caregiver-user"}
-              head={thead4}
-              contents={content4}
-              contentKey={key4}
-            />
-          </div>
-          <div>
-            <Button
-              className={"btn-100 green-btn"}
-              btnName={"닫기"}
-              onClick={closeModal}
-            />
-          </div>
-        </div>
-      </Modal>
+
       <div className="tab-container">
         <ul className="tab-menu">
           {data.map((item) => (

adc9c7a

5ece6ce

client/views/pages/equipment/EquipmentManagementSelectOne.jsx

--- client/views/pages/equipment/EquipmentManagementSelectOne.jsx

+++ client/views/pages/equipment/EquipmentManagementSelectOne.jsx


   return (
     <main>
       <div className="content-wrap">
-      <ContentTitle contentTitle={"장비 상세 목록"} />
+        <ContentTitle contentTitle={"장비 대여 상세 목록"} />
         <div className="board-wrap">
+          <div className="btn-wrap flex-end margin-bottom ">
+            <Button
+              className={"btn-small green-btn"}
+              btnName={"장비 대여"}
+              onClick={() => {
+                navigate("/EquipmentRentalInsert");
+              }}
+            />
+            <Button className={"btn-small green-btn"} btnName={"삭제"} />
+          </div>
           <Table className="equipment-detail" head={thead} contents={content} contentKey={key} />
         </div>
       </div>

adc9c7a

5ece6ce

client/views/pages/equipment/EquipmentManagementSelectReturn.jsx

--- client/views/pages/equipment/EquipmentManagementSelectReturn.jsx

+++ client/views/pages/equipment/EquipmentManagementSelectReturn.jsx


     "No",
     "장비명",
     "시리얼 넘버",
-    "기관명",
+    "사용자명",
+    "사용자관리번호",
+    "위치",
     "요청일자",
     "교환/반납",
-    "처리예정일",
   ];
   const key = [
     "No",
     "equipment_name",
     "serialNumber",
     "name",
+    "management_number",
+    "address",
     "date",
     "period_of_use",
-    "visit"
   ];
   const content = [
     {
       No: 1,
       equipment_name: "스마트약상자",
       serialNumber: "ABCD-1",
-      name: "A복지관",
+      name: "김복남",
+      management_number: 2022080101,
+      address: "경상북도 군위군 삼국유사면",
       date: "2023-01-27",
       period_of_use: "교환",
-      visit:(<div>
-        <input type="date" />
-      </div>)
     },
     {
       No: 2,
       equipment_name: "스마트약상자",
       serialNumber: "ABCD-1",
-      name: "B복지관",
+      name: "홍길동",
+      management_number: 2022080102,
+      address: "경상북도 군위군 군위읍",
       date: "2023-01-27",
       period_of_use: "반납",
-      visit:(<div>
-        <input type="date" />
-      </div>)
     },
   ];
   return (
     <main>
       <div className="content-wrap">
       <ContentTitle contentTitle={"장비 반납/교환 요청"} />
-         <div className="board-wrap">
-        {/*<div className="btn-wrap flex-end margin-bottom">
+        <div className="board-wrap">
+        <div className="btn-wrap flex-end margin-bottom">
               <Button
                 className={"btn-small green-btn"}
                 btnName={"등록"}
                 onClick={() => {
-                  navigate("/SeniorInsert");
+                  navigate("/ServiceInsert");
                 }}
               />
               <Button className={"btn-small green-btn "} btnName={"삭제"} />
-            </div> */}
+            </div>
           <Table className="equipment-detail" head={thead} contents={content} contentKey={key} />
         </div>
       </div>

adc9c7a

5ece6ce

client/views/pages/equipment/EquipmentRentalInsert.jsx

--- client/views/pages/equipment/EquipmentRentalInsert.jsx

+++ client/views/pages/equipment/EquipmentRentalInsert.jsx

...	...	@@ -28,17 +28,25 @@
28	28	<tr>
29	29	<th>기기종류</th>
30	30	<td colSpan={5}>
31		- <input type="text" name="" id="" disabled />
	31	+ <input type="text" name="" id="" disabled placeholder="스마트 약상자"/>
32	32	</td>
33	33	</tr>
34	34	<tr>
35	35	<th>장비넘버</th>
36	36	<td colSpan={5}>
37		- <input type="text" name="" id="" disabled />
	37	+ <input type="text" name="" id="" disabled placeholder="ABCD-1"/>
38	38	</td>
39	39	</tr>
40	40	<tr>
41		- <th>사용자</th>
	41	+ <th>사용자명</th>
	42	+ <td colSpan={5}>
	43	+ <div className="flex">
	44	+ <input type="text" disabled />
	45	+ </div>
	46	+ </td>
	47	+ </tr>
	48	+ <tr>
	49	+ <th>사용자관리번호</th>
42	50	<td colSpan={5}>
43	51	<div className="flex">
44	52	<input type="text" disabled />

adc9c7a

5ece6ce

client/views/pages/healthcare/statistics/MedicineStatistics.jsx

--- client/views/pages/healthcare/statistics/MedicineStatistics.jsx

+++ client/views/pages/healthcare/statistics/MedicineStatistics.jsx

...	...	@@ -1,4 +1,4 @@
1		-import React from "react";
	1	+
2	2	import ContentTitle from "../../../component/ContentTitle.jsx";
3	3	import SubTitle from "../../../component/SubTitle.jsx";
4	4	import Button from "../../../component/Button.jsx";
...	...	@@ -7,128 +7,190 @@
7	7	import Donut2 from "./../../../component/chart/Donut2.jsx";
8	8	import ToggleButton from "../../../component/ToggleButton.jsx";
9	9	import Chart from './../../../component/chart/Chart.jsx';
	10	+import AgencySearch from "../../../component/AgencySearch.jsx";
	11	+import Table from "../../../component/Table.jsx";
	12	+import React, { useState } from "react";
10	13
11	14	export default function MedicineStatistics() {
	15	+ const [show, setShow] = useState(false);
	16	+ const onClickShow = () => {
	17	+ setShow(!show);
	18	+ };
	19	+
	20	+ const thead = [
	21	+ "No",
	22	+ "기관명",
	23	+ "사업자번호",
	24	+ "담당자명",
	25	+ "담당 부서 연락처",
	26	+ "FAX",
	27	+ "주소",
	28	+ "통계",
	29	+ ];
	30	+ const key = [
	31	+ "No",
	32	+ "name",
	33	+ "BusinessNumber",
	34	+ "representative",
	35	+ "phone",
	36	+ "Fax",
	37	+ "address",
	38	+ "worker",
	39	+ ];
	40	+ const content = [
	41	+ {
	42	+ No: 1,
	43	+ name: "A복지관",
	44	+ BusinessNumber: "515-82-00000",
	45	+ representative: "김길동",
	46	+ phone: "053-811-1234",
	47	+ Fax: "053-811-1234",
	48	+ address: "경상북도 군위군 삼국유사면",
	49	+ worker: (
	50	+ <Button
	51	+ className={"btn-small gray-btn"}
	52	+ btnName={"통계보기"}
	53	+ onClick={onClickShow}
	54	+ />
	55	+ ),
	56	+ },
	57	+ ];
	58	+
12	59	return (
13	60	<main>
14	61	<div className="content-wrap">
15	62	<ContentTitle contentTitle={"복약율 통계"} />
16		- <div className="board-wrap" style={{ height: "calc(100% - 60px)" }}>
17		- <div className="statistics-grid" style={{ height: "100%" }}>
18		- <div>
19		- <SubTitle
20		- className="margin-bottom"
21		- explanation={"토탈 복약율 통계"}
22		- color={"#333333"}
23		- />
24		- <div
25		- style={{
26		- border: "1px solid #eeeeee",
27		- borderRadius: "0.5rem",
28		- padding: "1rem",
29		- height: "calc(100% - 47px)",
30		- }}
31		- >
32		- <div className="flex-end">
33		- <div className="flex flex30">
34		- <input type="date" name="" id="" />
	63	+ <div style={{ height: "calc(100% - 60px)" }}>
	64	+ <div className="content-box combine-left-government2 margin-bottom">
	65	+ <div>
	66	+ <AgencySearch />
	67	+ <div className="board-wrap">
	68	+ <Table
	69	+ className={"senior-table"}
	70	+ head={thead}
	71	+ contents={content}
	72	+ contentKey={key}
	73	+ />
	74	+ </div>
	75	+ </div>
	76	+ </div>
	77	+ <div className={show ? "statistics-grid-wrap show" : "statistics-grid-wrap"} style={{ height: "100%" }}>
	78	+ <div className="statistics-grid" style={{ height: "100%" }}>
	79	+ <div className="content-box combine-left2">
	80	+ <SubTitle
	81	+ className="margin-bottom"
	82	+ explanation={"토탈 복약율 통계"}
	83	+ color={"#333333"}
	84	+ />
	85	+ <div
	86	+ style={{
	87	+ border: "1px solid #eeeeee",
	88	+ borderRadius: "0.5rem",
	89	+ padding: "1rem",
	90	+ height: "calc(100% - 47px)",
	91	+ }}
	92	+ >
	93	+ <div className="flex-end">
	94	+ <div className="flex flex30">
	95	+ <input type="date" name="" id="" />
	96	+ </div>
	97	+ <div className="flex10">
	98	+ <Button className={"green-btn"} btnName={"검색"} />
	99	+ </div>
35	100	</div>
36		- <div className="flex10">
37		- <Button className={"green-btn"} btnName={"검색"} />
	101	+ <Donut2 />
	102	+ </div>
	103	+ </div>
	104	+ <div className="content-box combine-left2">
	105	+ <div className="flex">
	106	+ <SubTitle
	107	+ className="margin-bottom"
	108	+ explanation={"나이대별 복약율 통계"}
	109	+ color={"#333333"}
	110	+ />
	111	+ </div>
	112	+ <div
	113	+ style={{
	114	+ border: "1px solid #eeeeee",
	115	+ borderRadius: "0.5rem",
	116	+ padding: "1rem",
	117	+ height: "calc(100% - 47px)",
	118	+ }}
	119	+ >
	120	+ <Chart3 />
	121	+ </div>
	122	+ </div>
	123	+ <div className="content-box combine-right3">
	124	+ <div className="flex">
	125	+ <SubTitle
	126	+ className="margin-bottom"
	127	+ explanation={"주별, 월별 복약율 통계"}
	128	+ color={"#333333"}
	129	+ />
	130	+ <ToggleButton
	131	+ btnName1={"주별"}
	132	+ btnName2={"월별"}
	133	+ />
	134	+ </div>
	135	+ <div
	136	+ style={{
	137	+ border: "1px solid #eeeeee",
	138	+ borderRadius: "0.5rem",
	139	+ padding: "1rem",
	140	+ height: "calc(100% - 47px)",
	141	+ }}
	142	+ >
	143	+ <div className="flex-end">
	144	+ <select name="" id="">
	145	+ <option value="">1월</option>
	146	+ <option value="">2월</option>
	147	+ <option value="">3월</option>
	148	+ <option value="">4월</option>
	149	+ <option value="">5월</option>
	150	+ <option value="">6월</option>
	151	+ <option value="">7월</option>
	152	+ <option value="">8월</option>
	153	+ <option value="">9월</option>
	154	+ <option value="">10월</option>
	155	+ <option value="">11월</option>
	156	+ <option value="">12월</option>
	157	+ </select>
38	158	</div>
	159	+ <Chart />
39	160	</div>
40		- <Donut2 />
41	161	</div>
42		- </div>
43		- <div>
44		- <div className="flex">
45		- <SubTitle
46		- className="margin-bottom"
47		- explanation={"나이대별 복약율 통계"}
48		- color={"#333333"}
49		- />
50		- </div>
51		- <div
52		- style={{
53		- border: "1px solid #eeeeee",
54		- borderRadius: "0.5rem",
55		- padding: "1rem",
56		- height: "calc(100% - 47px)",
57		- }}
58		- >
59		- <Chart3 />
60		- </div>
61		- </div>
62		- <div>
63		- <div className="flex">
64		- <SubTitle
65		- className="margin-bottom"
66		- explanation={"주별, 월별 복약율 통계"}
67		- color={"#333333"}
68		- />
69		- <ToggleButton
70		- btnName1={"주별"}
71		- btnName2={"월별"}
72		- />
73		- </div>
74		- <div
75		- style={{
76		- border: "1px solid #eeeeee",
77		- borderRadius: "0.5rem",
78		- padding: "1rem",
79		- height: "calc(100% - 47px)",
80		- }}
81		- >
82		- <div className="flex-end">
83		- <select name="" id="">
84		- <option value="">1월</option>
85		- <option value="">2월</option>
86		- <option value="">3월</option>
87		- <option value="">4월</option>
88		- <option value="">5월</option>
89		- <option value="">6월</option>
90		- <option value="">7월</option>
91		- <option value="">8월</option>
92		- <option value="">9월</option>
93		- <option value="">10월</option>
94		- <option value="">11월</option>
95		- <option value="">12월</option>
96		- </select>
	162	+ <div className="content-box combine-right3 combine-all-government">
	163	+ <div className="flex">
	164	+ <SubTitle
	165	+ className="margin-bottom"
	166	+ explanation={"분기별 년별 복약율 통계"}
	167	+ color={"#333333"}
	168	+ />
	169	+ <ToggleButton
	170	+ btnName1={"분기별"}
	171	+ btnName2={"년별"}
	172	+ />
97	173	</div>
98		- <Chart />
99		- </div>
100		- </div>
101		- <div>
102		- <div className="flex">
103		- <SubTitle
104		- className="margin-bottom"
105		- explanation={"분기별 년별 복약율 통계"}
106		- color={"#333333"}
107		- />
108		- <ToggleButton
109		- btnName1={"분기별"}
110		- btnName2={"년별"}
111		- />
112		- </div>
113		-
114		- <div
115		- style={{
116		- border: "1px solid #eeeeee",
117		- borderRadius: "0.5rem",
118		- padding: "1rem",
119		- height: "calc(100% - 47px)",
120		- }}
121		- >
122		- <div className="flex-end">
123		- <select name="" id="">
124		- <option value="">2022</option>
125		- <option value="">2023</option>
126		- </select>
	174	+
	175	+ <div
	176	+ style={{
	177	+ border: "1px solid #eeeeee",
	178	+ borderRadius: "0.5rem",
	179	+ padding: "1rem",
	180	+ height: "calc(100% - 47px)",
	181	+ }}
	182	+ >
	183	+ <div className="flex-end">
	184	+ <select name="" id="">
	185	+ <option value="">2022</option>
	186	+ <option value="">2023</option>
	187	+ </select>
	188	+ </div>
	189	+ <LineColor />
127	190	</div>
128		- <LineColor />
129	191	</div>
130	192	</div>
131		- </div>
	193	+ </div >
132	194	</div>
133	195	</div>
134	196	</main>

adc9c7a

5ece6ce

client/views/pages/login/Login.jsx

--- client/views/pages/login/Login.jsx

+++ client/views/pages/login/Login.jsx


         <Join />
       ) : (
         <div className="container row flex-center join-login">
-          <div className="login-form">
+          <div className="login-form-management">
             <div>
               <h3>로그인</h3>
               <div className="login-inner">

adc9c7a

5ece6ce

client/views/pages/main/Main2.jsx

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

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


-import React from "react";
+import React,{useState} from "react";
 import Title from "../../component/Title.jsx";
-import Table from "../../component/Table.jsx";
 import Map from "../../component/chart/Map.jsx";
-import Chart1 from "../../component/chart/Chart1.jsx";
+import Chart5 from "../../component/chart/Chart5.jsx";
 import Chart2 from "../../component/chart/Chart2.jsx";
-import AddCircleIcon from '@mui/icons-material/AddCircle';
-import PersonIcon from '@mui/icons-material/Person';
-
+import Donut1 from "../../component/chart/Donut1.jsx";
+import RowChart from "../../component/chart/RowChart.jsx";
+import AddCircleIcon from "@mui/icons-material/AddCircle";
+import BatteryCharging20Icon from '@mui/icons-material/BatteryCharging20';
+import DeviceThermostatIcon from '@mui/icons-material/DeviceThermostat';
+import MedicationIcon from '@mui/icons-material/Medication';
+import ElderlyIcon from '@mui/icons-material/Elderly';
 
 export default function Main2() {
+  const [cityName, setCityName] = useState("군위군");
+  // const tableHead = ["방문날짜", "방문사유", "방문 상세 사유"];
+  // const Key = ["date", "reason", "detail_reason"];
+  // const content = [
+  //   {
+  //     date: "2022.12.12",
+  //     reason: "어르신케어",
+  //     detail_reason: "하루동안 미복약으로 방문. 방문시 두통을 호소하셔 병원 동행",
+  //   },
+  // ];
 
-  const tableHead = [
-    "연번",
-    "계약업체명",
-    "반납/교환",
-    "담당자 연락처",
-    "주소",
-  ];
-  const Key = [
-    "name",
-    "level_of_care",
-    "birth",
-    "phone",
-    "address",
-  ];
-  const content = [
-    {
-      name: "1",
-      level_of_care: "A복지관",
-      birth: "교환",
-      phone: "010-1234-5678",
-      address: "경상북도 군위군 삼국유사면",
-    },
-    {
-      name: "2",
-      level_of_care: "B병원",
-      birth: "반납",
-      phone: "010-3333-3333",
-      address: "경상북도 군위군 삼국유사면",
-    },
-    {
-      name: "3",
-      level_of_care: "C복지관",
-      birth: "교환",
-      phone: "010-3333-4444",
-      address: "경상북도 군위군 삼국유사면",
-    },
-    {
-      name: "4",
-      level_of_care: "D복지관",
-      birth: "교환",
-      phone: "010-3333-5555",
-      address: "경상북도 군위군 삼국유사면",
-    },
-    {
-      name: "5",
-      level_of_care: "E복지관",
-      birth: "반납",
-      phone: "010-3333-6666",
-      address: "경상북도 군위군 삼국유사면",
-    },
-  ];
-  const tableHead2 = [
-    "연번",
-    "계약업체명",
-    "반납/교환",
-    "담당자 연락처",
-    "주소",
-  ];
-  const Key2 = [
-    "name",
-    "level_of_care",
-    "birth",
-    "phone",
-    "address",
-  ];
-  const content2 = [
-    {
-      name: "1",
-      level_of_care: "A복지관",
-      birth: "교환",
-      phone: "010-1234-5678",
-      address: "경상북도 군위군 삼국유사면",
-    },
-    {
-      name: "2",
-      level_of_care: "B병원",
-      birth: "반납",
-      phone: "010-3333-3333",
-      address: "경상북도 군위군 삼국유사면",
-    },
-    {
-      name: "3",
-      level_of_care: "C복지관",
-      birth: "교환",
-      phone: "010-3333-4444",
-      address: "경상북도 군위군 삼국유사면",
-    },
-    {
-      name: "4",
-      level_of_care: "D복지관",
-      birth: "교환",
-      phone: "010-3333-5555",
-      address: "경상북도 군위군 삼국유사면",
-    },
-    {
-      name: "5",
-      level_of_care: "E복지관",
-      birth: "반납",
-      phone: "010-3333-6666",
-      address: "경상북도 군위군 삼국유사면",
-    },
-  ];
+  // //노인리스트
+  // const tableHead2 = [
+  //   "이름",
+  //   "요양등급",
+  //   "생년월일",
+  //   "연락처",
+  //   "주소",
+  //   "기저질환",
+  // ];
+  // const Key2 = [
+  //   "name",
+  //   "level_of_care",
+  //   "birth",
+  //   "phone",
+  //   "address",
+  //   "management_number",
+  // ];
+  // const content2 = [
+  //   {
+  //     name: "김복남",
+  //     level_of_care: "1등급",
+  //     birth: "1948.11.15",
+  //     phone: "010-1234-5678",
+  //     address: "경상북도 군위군 삼국유사면",
+  //     management_number: "혈압",
+  //   },
+  //   {
+  //     name: "홍길동",
+  //     level_of_care: "2등급",
+  //     birth: "1948.05.18",
+  //     phone: "010-3333-3333",
+  //     address: "경상북도 군위군 삼국유사면",
+  //     management_number: "당뇨",
+  //   },
+  //   {
+  //     name: "김말순",
+  //     level_of_care: "3등급",
+  //     birth: "1939.03.19",
+  //     phone: "010-3333-4444",
+  //     address: "경상북도 군위군 삼국유사면",
+  //     management_number: "천식",
+  //   },
+  //   {
+  //     name: "신정길",
+  //     level_of_care: "1등급",
+  //     birth: "1945.05.19",
+  //     phone: "010-3333-5555",
+  //     address: "경상북도 군위군 삼국유사면",
+  //     management_number: "폐렴",
+  //   },
+  //   {
+  //     name: "김정남",
+  //     level_of_care: "1등급",
+  //     birth: "1945.05.19",
+  //     phone: "010-3333-6666",
+  //     address: "경상북도 군위군 삼국유사면",
+  //     management_number: "인지장애",
+  //   },
+  // ];
 
   return (
     <main>
-      <div className="main-grid-agency">
-        <ul className="content-box statistics flex combine-left">
-          <li>
-            <p>전체 장비 대여수</p>
-            <p>200개</p>
+      <div className="main-grid-government">
+        <ul className="content-box statistics" background="#f7acba">
+          <li> 
+            <p><ElderlyIcon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#bf0629", borderRadius:"50px" }}/></p>           
+            <p>{cityName} 전체 대상자</p>
+            <p>400</p>
           </li>
+                  </ul>
+        <ul className="content-box statistics" background="#8ef3d1">
           <li>
-            <p>계약 업체 수</p>
-            <p>20개 </p>
-          </li>
-          <li>
-            <p>교환 예정 장비 수</p>
-            <p>3개</p>
-          </li>
-          <li>
-            <p>반납 예정 장비 수</p>
-            <p>10개</p>
+           <p><MedicationIcon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#076143", borderRadius:"50px" }}/></p>
+            <p>{cityName} 미복약 위험 대상자</p>
+            <p>400</p>
           </li>
         </ul>
-        <div className="content-box combine-left">
-          <div className="flex margin-bottom">
-            <Title title={"금일 반납/교환 예정 리스트"} explanation={"장비 반납/교환 리스트를 확인하세요."} />
+        <ul className="content-box statistics" background="#ebe7b9" >
+          <li>
+             <p><DeviceThermostatIcon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#f1de05", borderRadius:"50px" }}/></p>
+            <p>{cityName} 댁내 온도 위험 대상자</p>
+            <p>400</p>
+          </li>
+        </ul>
+        <ul className="content-box statistics" background="#5f9af3">
+          <li>
+            <p><BatteryCharging20Icon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#5f9af3", borderRadius:"50px" }}/></p>
+            <p>{cityName} 배터리 부족 대상자 </p>
+            <p>400</p>
+          </li>
+        </ul>
+        <div className="content-box combine-all-government combine-bottom-government2">
+          <div className="flex">
+            <Title title={`${cityName} 약상자 사용 현황`} explanation={"약상자 사용자의 데이터 차트가 보여집니다."} />
             <AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
           </div>
-          <Table head={tableHead} contents={content} contentKey={Key} />
-        </div>          
-        <div className="content-box combine-left">
-          <div className="flex margin-bottom">
-            <Title title={"금주 반납/교환 예정 리스트"} explanation={"장비 반납/교환 리스트를 확인하세요."} />
+          <Chart5 />
+        </div>
+        <div className="content-box combine-left-government combine-bottom-government2 main-main">
+          <div className="flex">
+            <Title title={"케어 노인 분포 현황"} explanation={"지역 선택 시 해당 지역의 미복약 노인리스트가 보여집니다."} />
             <AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
           </div>
-          <Table head={tableHead2} contents={content2} contentKey={Key2} />
-        </div>          
+          <Map setCityName={setCityName} />
+        </div>
+        <div className="content-box combine-left-government2">
+          <div className="flex">
+            <Title title={`${cityName} 복용률 평균`} explanation={"해당 지역의 대상자 복용률이 그래프로 보여집니다."} />
+            <AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
+          </div>
+          <Chart2 />
+        </div>
+        <div className="content-box combine-right-government2">
+          <div className="flex">
+            <Title title={`${cityName} 월별 방문 횟수`} explanation={"최근 6개월간 방문 횟수의 변화를 확인할 수 있습니다."} />
+            <AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
+          </div>
+          <RowChart />
+        </div>
+        <div className="content-box combine-right-government">
+          <div className="flex">
+            <Title title={`${cityName} 노인 요양등급`} explanation={""} />
+            <AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
+          </div>
+          <Donut1 />
+        </div>        
       </div>
     </main>
   );

5ece6ce

client/views/pages/main/Main3.jsx (added)

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

...	...	@@ -0,0 +1,156 @@
	1	+import React from "react";
	2	+import Title from "../../component/Title.jsx";
	3	+import Table from "../../component/Table.jsx";
	4	+import Map from "../../component/chart/Map.jsx";
	5	+import Chart1 from "../../component/chart/Chart1.jsx";
	6	+import Chart2 from "../../component/chart/Chart2.jsx";
	7	+import Donut1 from "../../component/chart/Donut1.jsx";
	8	+import RowChart from "../../component/chart/RowChart.jsx";
	9	+import AddCircleIcon from "@mui/icons-material/AddCircle";
	10	+import PersonIcon from '@mui/icons-material/Person';
	11	+import BatteryCharging20Icon from '@mui/icons-material/BatteryCharging20';
	12	+import DeviceThermostatIcon from '@mui/icons-material/DeviceThermostat';
	13	+import MedicationIcon from '@mui/icons-material/Medication';
	14	+import ElderlyIcon from '@mui/icons-material/Elderly';
	15	+import CalendarComponent from "../../component/CalendarComponent.jsx";
	16	+
	17	+export default function Main3() {
	18	+ const tableHead = ["No", "방문날짜", "어르신 성함", "주소", "보호자 연락처"];
	19	+ const Key = ["No", "date", "name", "address", "phone"];
	20	+ const content = [
	21	+ {
	22	+ No: "1",
	23	+ date: "2022.12.12",
	24	+ name: "김복남",
	25	+ address: "경상북도 군위군 삼국유사면",
	26	+ phone: "010-1234-1234",
	27	+ },
	28	+ {
	29	+ No: "2",
	30	+ date: "2022.12.12",
	31	+ name: "박말자",
	32	+ address: "경상북도 군위군 삼국유사면",
	33	+ phone: "010-1234-1234",
	34	+ },
	35	+ {
	36	+ No: "3",
	37	+ date: "2022.12.12",
	38	+ name: "이순이",
	39	+ address: "경상북도 군위군 삼국유사면",
	40	+ phone: "010-1234-1234",
	41	+ },
	42	+ ];
	43	+
	44	+ //노인리스트
	45	+ const tableHead2 = [
	46	+ "이름",
	47	+ "요양등급",
	48	+ "생년월일",
	49	+ "연락처",
	50	+ "주소",
	51	+ "기저질환",
	52	+ ];
	53	+ const Key2 = [
	54	+ "name",
	55	+ "level_of_care",
	56	+ "birth",
	57	+ "phone",
	58	+ "address",
	59	+ "management_number",
	60	+ ];
	61	+ const content2 = [
	62	+ {
	63	+ name: "김복남",
	64	+ level_of_care: "1등급",
	65	+ birth: "1948.11.15",
	66	+ phone: "010-1234-5678",
	67	+ address: "경상북도 군위군 삼국유사면",
	68	+ management_number: "혈압",
	69	+ },
	70	+ {
	71	+ name: "홍길동",
	72	+ level_of_care: "2등급",
	73	+ birth: "1948.05.18",
	74	+ phone: "010-3333-3333",
	75	+ address: "경상북도 군위군 삼국유사면",
	76	+ management_number: "당뇨",
	77	+ },
	78	+ {
	79	+ name: "김말순",
	80	+ level_of_care: "3등급",
	81	+ birth: "1939.03.19",
	82	+ phone: "010-3333-4444",
	83	+ address: "경상북도 군위군 삼국유사면",
	84	+ management_number: "천식",
	85	+ },
	86	+ {
	87	+ name: "신정길",
	88	+ level_of_care: "1등급",
	89	+ birth: "1945.05.19",
	90	+ phone: "010-3333-5555",
	91	+ address: "경상북도 군위군 삼국유사면",
	92	+ management_number: "폐렴",
	93	+ },
	94	+ {
	95	+ name: "김정남",
	96	+ level_of_care: "1등급",
	97	+ birth: "1945.05.19",
	98	+ phone: "010-3333-6666",
	99	+ address: "경상북도 군위군 삼국유사면",
	100	+ management_number: "인지장애",
	101	+ },
	102	+ ];
	103	+
	104	+ return (
	105	+ <main>
	106	+ <div className="main-grid-government-2">
	107	+ <ul className="content-box statistics">
	108	+ <li>
	109	+ <p><ElderlyIcon sx={{ width: "50px", height: "50px", color: "#ffffff", background: "#bf0629", borderRadius: "50px" }} /></p>
	110	+ <p>전체 대상자</p>
	111	+ <p>40</p>
	112	+ </li>
	113	+ </ul>
	114	+ <ul className="content-box statistics">
	115	+ <li>
	116	+ <p><MedicationIcon sx={{ width: "50px", height: "50px", color: "#ffffff", background: "#0dd390", borderRadius: "50px" }} /></p>
	117	+ <p>미복약 위험 대상자</p>
	118	+ <p>4</p>
	119	+ </li>
	120	+ </ul>
	121	+ <ul className="content-box statistics">
	122	+ <li>
	123	+ <p><DeviceThermostatIcon sx={{ width: "50px", height: "50px", color: "#ffffff", background: "#f1de05", borderRadius: "50px" }} /></p>
	124	+ <p>댁내 온도 위험 대상자</p>
	125	+ <p>4</p>
	126	+ </li>
	127	+ </ul>
	128	+ <ul className="content-box statistics">
	129	+ <li>
	130	+ <p><BatteryCharging20Icon sx={{ width: "50px", height: "50px", color: "#ffffff", background: "#5f9af3", borderRadius: "50px" }} /></p>
	131	+ <p>배터리 부족 대상자 </p>
	132	+ <p>4</p>
	133	+ </li>
	134	+ </ul>
	135	+ <div className="content-box combine-left combine-bottom-government2">
	136	+ <div className="margin-bottom">
	137	+ <Title title={"방문 리스트"} explanation={"방문이력이 달력에 표시됩니다."} />
	138	+ </div>
	139	+ <CalendarComponent />
	140	+ </div>
	141	+ <div className="content-box combine-bottom-government2 combine-right2">
	142	+ <div className="flex margin-bottom">
	143	+ <Title title={"금일 방문 예정 리스트"} explanation={"금일 방문 대상자를 확인하세요."} />
	144	+ <AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
	145	+ </div>
	146	+ <Table
	147	+ className={"protector-user"}
	148	+ head={tableHead}
	149	+ contents={content}
	150	+ contentKey={Key}
	151	+ />
	152	+ </div>
	153	+ </div>
	154	+ </main>
	155	+ );
	156	+}

adc9c7a

5ece6ce

client/views/pages/senior_management/SeniorSelect.jsx

--- client/views/pages/senior_management/SeniorSelect.jsx

+++ client/views/pages/senior_management/SeniorSelect.jsx


 import Table from "../../component/Table.jsx";
 import Button from "../../component/Button.jsx";
 import { useNavigate } from "react-router";
-import DetailSearch from "./../../component/DetailSearch.jsx";
+import DetailSearch from "../../component/AgencySearch.jsx";
 import ContentTitle from "../../component/ContentTitle.jsx";
 import SubTitle from "../../component/SubTitle.jsx";
 

     <input type="checkbox" />,
     "No",
     "사용자관리번호",
-    "관리기관",
+    "요양 등급",
     "이름",
-    "지역",
+    "생년월일",
     "연락처",
+    "주소",
+    "기저질환",
   ];
   const key = [
     "",

     "name",
     "birth",
     "phone",
+    "address",
+    "underlying_disease",
   ];
   const content = [
     {
       "": <input type="checkbox" />,
       No: 1,
       management_number: 2022080101,
-      level_of_care: "A복지관",
+      level_of_care: "1등급",
       name: "김복남",
-      birth: "대구",
-      phone: "010-1234-1234"
+      birth: "1948.11.15",
+      phone: "010-1234-5678",
+      address: "경상북도 군위군 삼국유사면",
+      underlying_disease: "고혈압",
     },
     {
       "": <input type="checkbox" />,
-      No: 1,
-      management_number: 2022080101,
-      level_of_care: "A복지관",
-      name: "김복남",
-      birth: "대구",
-      phone: "010-1234-1234"
-    },
-    {
-      "": <input type="checkbox" />,
-      No: 1,
-      management_number: 2022080101,
-      level_of_care: "A복지관",
-      name: "김복남",
-      birth: "대구",
-      phone: "010-1234-1234"
+      No: 2,
+      management_number: 2022080102,
+      level_of_care: "2등급",
+      name: "홍길동",
+      birth: "1948.05.18",
+      phone: "010-3333-4444",
+      address: "경상북도 군위군 군위읍",
+      underlying_disease: "폐렴",
     },
   ];
 

           <DetailSearch />
           <div className="board-wrap">
             <SubTitle className="margin-bottom" explanation={"대상자 클릭 시 상세페이지로 이동합니다."} />
-            <div className="btn-wrap flex-end margin-bottom">
-              <Button
-                className={"btn-small green-btn"}
-                btnName={"등록"}
-                onClick={() => {
-                  navigate("/SeniorInsert");
-                }}
-              />
-              <Button className={"btn-small green-btn"} btnName={"삭제"} />
-            </div>
             <Table
               className={"senior-table"}
               head={thead}

                 navigate("/SeniorSelectOne");
               }}
             />
-           
+            <div className="btn-wrap flex-end">
+              <Button
+                className={"btn-small green-btn"}
+                btnName={"등록"}
+                onClick={() => {
+                  navigate("/SeniorInsert");
+                }}
+              />
+              <Button className={"btn-small green-btn"} btnName={"삭제"} />
+            </div>
           </div>
         </div>
       </div>

adc9c7a

5ece6ce

client/views/pages/senior_management/SeniorSelectOne.jsx

--- client/views/pages/senior_management/SeniorSelectOne.jsx

+++ client/views/pages/senior_management/SeniorSelectOne.jsx


 import React from "react";
+import Table from "../../component/Table.jsx";
 import Button from "../../component/Button.jsx";
 import { useNavigate } from "react-router";
+import DetailSearch from "../../component/AgencySearch.jsx";
 import ContentTitle from "../../component/ContentTitle.jsx";
-import PersonIcon from '@mui/icons-material/Person';
+import SubTitle from "../../component/SubTitle.jsx";
 
-export default function SeniorSelectOne() {
+export default function SeniorSelect() {
   const navigate = useNavigate();
+
+  //게시판
+  const thead = [
+    "No",
+    "소속기관명",
+    "이름",
+    "연락처",
+    "주소",
+    "담당 대상자(어르신) 인원",
+  ];
+  const key = [
+    "No",
+    "center",
+    "name",
+    "phone",
+    "address",
+    "worker",
+  ];
+  const content = [
+    {
+      No: 1,
+      center: "A복지관",
+      name: "홍길동",
+      phone: "010-1234-1234",
+      address: "경상북도 군위군 삼국유사면",
+      worker: "10명"
+    },
+    {
+      No: 2,
+      center: "A복지관",
+      name: "홍길동",
+      phone: "010-1234-1234",
+      address: "경상북도 군위군 삼국유사면",
+      worker: "5명"
+    },
+    {
+      No: 3,
+      center: "A복지관",
+      name: "홍길동",
+      phone: "010-1234-1234",
+      address: "경상북도 군위군 삼국유사면",
+      worker: "8명"
+    },
+   
+  ];
+
+  //select option 동적 생성
+  // const optionList = () => {
+  //   let year = [];
+  //   let month = [];
+  //   let days = [];
+  //   let currentDate = new Date();
+  //   let currentYear = currentDate.getFullYear();
+
+  //   for (let i = 1910; i < currentYear.length; i++) {
+  //     year.push(i);
+  //   }
+
+  //   for (let j = 1; i < 13; j++) {
+  //     month.push(j);
+  //   }
+
+  //   for (let k = 1; i < 32; k++) {
+  //     days.push(k);
+  //   }
+  //   return year, month, days;
+  // };
+
+  // React.useEffect(() => {
+  //   optionList();
+  // }, []);
+
   return (
     <main>
-    <div className="content-wrap row">
-    <ContentTitle contentTitle={"대상자 상세 프로필"}/>
-      <div>
-        <table className="margin-bottom senior-detail">
-          <tbody>
-            <tr>
-              <th>이름</th>
-              <td>
-                <span>김복남</span>
-              </td>
-              <th>사용자등록번호</th>
-              <td>
-                <span>202280102</span>
-              </td>              
-            </tr>
-            <tr>
-            <th>생년월일</th>
-              <td>
-                <span>1948.11.15</span>
-              </td>
-              <th>연락처</th>
-              <td>
-                <span>010-1234-5678</span>
-              </td>
-            </tr>
-            <tr>
-              <th>요양등급</th>
-              <td>
-                <span>1등급</span>
-              </td>
-              <th>성별</th>
-              <td>
-                <span>남</span>
-              </td>              
-            </tr>
-            <tr>
-            <th>주소</th>
-              <td>
-                <span>경상북도 군위군 삼국유사면</span>
-              </td>
-              <th>보호자 비상연락망</th>
-              <td>
-                <span>010-1234-5678</span>
-              </td>
-            </tr>
-            <tr>
-              <th>복용중인 약</th>
-              <td colSpan={3}>
-                <span>혈압약</span>
-              </td>
-            </tr>
-            <tr>
-              <th>기저질환</th>
-              <td colSpan={3} style={{height:"300px"}}>
-                <span>고혈압</span>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-        <div className="btn-wrap flex-center">
-          <Button
-            className={"btn-large gray-btn"}
-            btnName={"이전"}
-            onClick={() => {
-              navigate("/SeniorSelect");
-            }}
-          />
-          <Button
-            className={"btn-large green-btn"}
-            btnName={"수정"}
-            onClick={() => {
-              navigate("/SeniorInsert");
-            }}
-          />
+      <div className="content-wrap">
+        <ContentTitle contentTitle={"복지사 조회"} />
+        <div>
+          <div className="board-wrap">
+            <div className="flex">
+              <SubTitle className="margin-bottom" explanation={"기관 클릭 시 상세페이지로 이동합니다."} />
+              <div className="btn-wrap flex-end margin-bottom ">
+                <Button
+                  className={"btn-small green-btn"}
+                  btnName={"등록"}
+                  onClick={() => {
+                    navigate("/SeniorInsert");
+                  }}
+                />
+                <Button className={"btn-small green-btn"} btnName={"삭제"} />
+              </div>
+            </div >
+            <Table
+              className={"senior-table"}
+              head={thead}
+              contents={content}
+              contentKey={key}
+              onClick={() => {
+                navigate("/SeniorSelectOne");
+              }}
+            />
+            
+          </div>
         </div>
       </div>
-    </div>
-  </main>
+    </main>
   );
 }

5ece6ce

client/views/pages/serviceCenter/ServiceInsert.jsx (added)

+++ client/views/pages/serviceCenter/ServiceInsert.jsx

...	...	@@ -0,0 +1,74 @@
	1	+import React from "react";
	2	+import Button from "../../component/Button.jsx";
	3	+import ContentTitle from "../../component/ContentTitle.jsx";
	4	+
	5	+export default function ServiceInsert() {
	6	+ return (
	7	+ <main>
	8	+ <div className="content-wrap">
	9	+ <ContentTitle contentTitle={"반납/교환 요청"} />
	10	+ <div className="margin-bottom2 insert">
	11	+ {/* <div className="flex30">
	12	+ <div className="flex margin-bottom">
	13	+ <input
	14	+ type="text"
	15	+ name=""
	16	+ id=""
	17	+ className="flex80"
	18	+ placeholder="사용자 검색"
	19	+ />
	20	+ <Button btnName={"검색"} className={"flex20"} />
	21	+ </div>
	22	+ <ul className="user-list">
	23	+ <li>검색 내역이 없습니다.</li>
	24	+ </ul>
	25	+ </div> */}
	26	+ <table className="flex70 margin-bottom">
	27	+ <tbody className="equipment-insert">
	28	+ <tr>
	29	+ <th>장비 시리얼 넘버</th>
	30	+ <td colSpan={5}>
	31	+ <input type="text" name="" id="" />
	32	+ </td>
	33	+ </tr>
	34	+ <tr>
	35	+ <th>기기종류</th>
	36	+ <td colSpan={5}>
	37	+ <div className="flex">
	38	+ <input type="checkbox" />
	39	+ <label htmlFor="">
	40	+
	41	+ 스마트 약상자
	42	+ </label>
	43	+ <input type="checkbox" />
	44	+ <label htmlFor="">
	45	+
	46	+ 심전도
	47	+ </label>
	48	+ </div>
	49	+ </td>
	50	+ </tr>
	51	+ <tr>
	52	+ <th>요청일</th>
	53	+ <td>
	54	+ <input type="date" />
	55	+ </td>
	56	+ <th>반납/교환</th>
	57	+ <td>
	58	+ <select name="" id="" className="select100">
	59	+ <option value="">반납</option>
	60	+ <option value="">교환</option>
	61	+ </select>
	62	+ </td>
	63	+ </tr>
	64	+ </tbody>
	65	+ </table>
	66	+ </div>
	67	+ <div className="btn-wrap flex-center">
	68	+ <Button className={"btn-large gray-btn"} btnName={"취소"} />
	69	+ <Button className={"btn-large green-btn"} btnName={"등록"} />
	70	+ </div>
	71	+ </div>
	72	+ </main>
	73	+ );
	74	+}

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,4 +1,4 @@
1		-var rnsdnl = {
	1	+var gunwi = {
2	2	type: "FeatureCollection",
3	3	features: [
4	4	{
...	...	@@ -513,11 +513,11 @@
513	513	},
514	514	properties: {
515	515	name: "군위읍",
516		- id: "KR-rnsdnldmq",
	516	+ id: "KR-gunwieup",
517	517	TYPE: "Province",
518	518	CNTRY: "South Korea",
519	519	},
520		- id: "KR-rnsdnldmq",
	520	+ id: "KR-gunwieup",
521	521	},
522	522	{
523	523	type: "Feature",
...	...	@@ -1251,11 +1251,11 @@
1251	1251	},
1252	1252	properties: {
1253	1253	name: "소보면",
1254		- id: "KR-thqhaus",
	1254	+ id: "KR-sobomyeon",
1255	1255	TYPE: "Province",
1256	1256	CNTRY: "South Korea",
1257	1257	},
1258		- id: "KR-thqhaus",
	1258	+ id: "KR-sobomyeon",
1259	1259	},
1260	1260	{
1261	1261	type: "Feature",
...	...	@@ -2021,11 +2021,11 @@
2021	2021	},
2022	2022	properties: {
2023	2023	name: "효령면",
2024		- id: "KR-gyfudaus",
	2024	+ id: "KR-hyolyeongmyeon",
2025	2025	TYPE: "Province",
2026	2026	CNTRY: "South Korea",
2027	2027	},
2028		- id: "KR-gyfudaus",
	2028	+ id: "KR-hyolyeongmyeon",
2029	2029	},
2030	2030	{
2031	2031	type: "Feature",
...	...	@@ -2538,11 +2538,11 @@
2538	2538	},
2539	2539	properties: {
2540	2540	name: "부계면",
2541		- id: "KR-qnrPaus",
	2541	+ id: "KR-bugyemyeon",
2542	2542	TYPE: "Province",
2543	2543	CNTRY: "South Korea",
2544	2544	},
2545		- id: "KR-qnrPaus",
	2545	+ id: "KR-bugyemyeon",
2546	2546	},
2547	2547	{
2548	2548	type: "Feature",
...	...	@@ -3013,11 +3013,11 @@
3013	3013	},
3014	3014	properties: {
3015	3015	name: "우보면",
3016		- id: "KR-dnqhaus",
	3016	+ id: "KR-ubomyeon",
3017	3017	TYPE: "Province",
3018	3018	CNTRY: "South Korea",
3019	3019	},
3020		- id: "KR-dnqhaus",
	3020	+ id: "KR-ubomyeon",
3021	3021	},
3022	3022	{
3023	3023	type: "Feature",
...	...	@@ -3477,11 +3477,11 @@
3477	3477	},
3478	3478	properties: {
3479	3479	name: "의흥면",
3480		- id: "KR-dmlgmdaus",
	3480	+ id: "KR-uiheungmyeon",
3481	3481	TYPE: "Province",
3482	3482	CNTRY: "South Korea",
3483	3483	},
3484		- id: "KR-dmlgmdaus",
	3484	+ id: "KR-uiheungmyeon",
3485	3485	},
3486	3486	{
3487	3487	type: "Feature",
...	...	@@ -3952,11 +3952,11 @@
3952	3952	},
3953	3953	properties: {
3954	3954	name: "산성면",
3955		- id: "KR-tkstjdaus",
	3955	+ id: "KR-sanseongmyeon",
3956	3956	TYPE: "Province",
3957	3957	CNTRY: "South Korea",
3958	3958	},
3959		- id: "KR-tkstjdaus",
	3959	+ id: "KR-sanseongmyeon",
3960	3960	},
3961	3961	{
3962	3962	type: "Feature",
...	...	@@ -4553,12 +4553,12 @@
4553	4553	},
4554	4554	properties: {
4555	4555	name: "삼국유사면",
4556		- id: "KR-tkarnrdbtkaus",
	4556	+ id: "KR-samgugyusamyeon",
4557	4557	TYPE: "Province",
4558	4558	CNTRY: "South Korea",
4559	4559	},
4560		- id: "KR-tkarnrdbtkaus",
	4560	+ id: "KR-samgugyusamyeon",
4561	4561	},
4562	4562	],
4563	4563	};
4564		-export default rnsdnl;
	4564	+export default gunwi;

...	...	@@ -8,7 +8,7 @@
8	8	gap: 1rem;
9	9	}
10	10
11		-.main-grid-admin {
	11	+.main-grid-guardian {
12	12	height: 100%;
13	13	display: grid;
14	14	grid-template-columns: 0.9fr 0.9fr 1.1fr 1.1fr;
...	...	@@ -19,17 +19,44 @@
19	19	.main-grid-government {
20	20	height: 100%;
21	21	display: grid;
22		- grid-template-columns: 0.5fr 1fr 0.5fr 1fr;
23		- grid-template-rows: 0.1fr 0.3fr 0.3fr 0.1fr;
	22	+ grid-template-columns: 1fr 1fr 1fr 1fr;
	23	+ grid-template-rows: 0.1fr 0.5fr 0.3fr 0.3fr 0.3fr;
24	24	gap: 1rem;
25	25	}
26		-.main-grid-agency {
	26	+
	27	+.main-grid-government-2 {
27	28	height: 100%;
28	29	display: grid;
29		- grid-template-columns:1fr;
30		- grid-template-rows: 0.1fr 0.3fr 0.3fr 0.1fr;
	30	+ grid-template-columns: 1fr 1fr 1fr 1fr;
	31	+ grid-template-rows: 0.1fr 1fr;
31	32	gap: 1rem;
32	33	}
	34	+
	35	+#Chart5>div>div {
	36	+ position: inherit;
	37	+ width: 353px;
	38	+ height: 35rem;
	39	+}
	40	+
	41	+#RowChart>div>div {
	42	+ position: inherit;
	43	+ width: 353px;
	44	+ height: 25rem;
	45	+}
	46	+#Map>div>div {
	47	+ position: inherit;
	48	+ width: 100%;
	49	+}
	50	+/* #Map{position: absolute; top: 17%;} */
	51	+.main-map {
	52	+ position: relative;
	53	+}
	54	+.main-map > div:nth-child(2){height: 83%;}
	55	+
	56	+.grid-map {
	57	+ width: 25%;
	58	+}
	59	+
33	60	.main-grid-hospital {
34	61	height: 100%;
35	62	display: grid;
...	...	@@ -38,12 +65,34 @@
38	65	gap: 1rem;
39	66	}
40	67
41		-.main-grid-guardian {
42		- height: 100%;
43		- display: grid;
44		- grid-template-columns: 0.9fr 0.9fr 1.1fr 1.1fr;
45		- grid-template-rows: 0.5fr 0.1fr;
46		- gap: 1rem;
	68	+.grid-map>div {
	69	+ width: 100%;
	70	+ height: 24px;
	71	+ line-height: 22px;
	72	+ background: #f0f4dd;
	73	+ border: 1px solid green;
	74	+ margin-bottom: 1rem;
	75	+ border-radius: 10px;
	76	+ font-size: 1.4rem;
	77	+ text-align: center;
	78	+ box-shadow: 1px 1px 1px 1px rgb(20 105 3 / 19%);
	79	+}
	80	+
	81	+.tab-menu>div.active {
	82	+}
	83	+.pulse {
	84	+ animation: pulse-animation 2s ;
	85	+}
	86	+@keyframes pulse-animation {
	87	+ 0% {
	88	+ box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
	89	+ }
	90	+ 100% {
	91	+ box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
	92	+ }
	93	+}
	94	+.statistics-grid-wrap {
	95	+ display: none;
47	96	}
48	97
49	98	.statistics-grid {
...	...	@@ -53,20 +102,46 @@
53	102	gap: 2rem;
54	103	}
55	104
	105	+.show {
	106	+ display: block;
	107	+}
	108	+
56	109	.combine-left {
57	110	grid-column: 1/3;
58	111	}
59	112
	113	+.combine-left2 {
	114	+ grid-column: 1/2;
	115	+}
	116	+
60	117	.combine-left-government {
61		- grid-column: 1/6;
	118	+ grid-column: 2/4;
	119	+}
	120	+
	121	+.combine-left-government2 {
	122	+ grid-column: 1/4;
62	123	}
63	124
64	125	.combine-right {
65	126	grid-column: 3/4;
66	127	}
67	128
68		-.combine-right-government {
	129	+.combine-right2 {
69	130	grid-column: 3/5;
	131	+}
	132	+
	133	+.combine-right3 {
	134	+ grid-column: 2/3;
	135	+}
	136	+
	137	+.combine-right-government {
	138	+ grid-column: 4/5;
	139	+ grid-row: 2/4;
	140	+}
	141	+
	142	+.combine-right-government2 {
	143	+ grid-column: 4/5;
	144	+ grid-row: 4/6;
70	145	}
71	146
72	147	.combine-top-government {
...	...	@@ -216,7 +291,9 @@
216	291	.content-box {
217	292	padding: 1.5rem;
218	293	border-radius: 0.5rem;
219		- background-color: rgb(255, 255, 255);
	294	+ border: 1px solid #eeeeee;
	295	+ background: #ffffff;
	296	+ box-shadow: 1px 1px 5px 2px rgba(238, 238, 238, 0.5);
220	297	}
221	298
222	299	/체크박스 크기/
...	...	@@ -227,7 +304,7 @@
227	304
228	305	/* button 공통 */
229	306	.btn-wrap {
230		- margin-top: 1rem;
	307	+ margin-top: 4rem;
231	308	}
232	309
233	310	.btn-100 {

...	...	@@ -32,25 +32,26 @@
32	32	}
33	33
34	34	nav{
35		- height: 100%;
	35	+ height: 123%;
36	36	background-color: #242d2e;
37	37	grid-area: nav;
38	38	}
39	39
40	40	.logo {
41	41	padding: 2rem 1rem;
42		- font-size: large;
	42	+ font-size: 2.4rem;
43	43	text-align: center;
44	44	color: #ffffff;
45	45	font-weight: bold;
46	46	}
47	47	/* 네비게이션 */
48		-
	48	+.nav > div > ul{position: fixed;}
49	49	.sidebar-item {
50	50	margin: 1rem 0;
51	51	}
52	52
53	53	.sidebar-item>a {
	54	+ display: block;
54	55	font-size: 1.6rem;
55	56	color: #ffffff;
56	57	margin: 0 3rem;
...	...	@@ -87,6 +88,7 @@
87	88	background: #d1e4e3;
88	89	}
89	90
	91	+
90	92	.sidebar-content {
91	93	display: none;
92	94	color: #ffffff;
...	...	@@ -107,12 +109,13 @@
107	109	font-weight: bold;
108	110	}
109	111
110		-.info-wrap{
111		- border-top: 1px solid #4b4b4b;
	112	+.info-wrap{
	113	+ padding-top: 64rem;
112	114	}
113	115
114	116	.bottom-section {
115		- padding: 1rem 4rem;
	117	+ border-top: 1px solid #4b4b4b;
	118	+ padding: 2rem 4rem;
116	119	}
117	120
118	121	.info-id {
...	...	@@ -124,9 +127,9 @@
124	127	#pages {
125	128	max-width: 100%;
126	129	height: 100%;
127		- padding: 2rem;
128		- background-color: #e6e5e5;
	130	+ padding: 4rem;
129	131	grid-area: main;
	132	+ box-shadow: 1px 1px 20px 1px rgba(238, 238, 238, 0.5) inset;
130	133	}
131	134
132	135
...	...	@@ -137,123 +140,16 @@
137	140
138	141	.content-wrap {
139	142	max-width: 100%;
140		- height: 90vh;
	143	+ height: 100%;
141	144	padding: 2em;
142	145	background-color: #ffffff;
143	146	}
144	147
145		-/* hierarchy menu */
146		-.hierarchy-menu {
147		- background-color: #f8f8f8;
148		- color: #333333;
149		- height: 40vh;
150		- overflow-y: auto;
151		-}
152		-.hierarchy-menu a {
153		- color: #333333;
154		- text-decoration: none;
155		-}
156		-
157		-.hierarchy-menu a span{
158		- font-size: 1.6rem;
159		-}
160		-
161		-/* List */
162		-.hierarchy-menu ul {
163		- list-style: none;
164		- margin: 0;
165		- padding: 10px 0 0 0;
166		- position: relative;
167		-}
168		-.hierarchy-menu ul ul:before {
169		- content: '';
170		- position: absolute;
171		- top: 0;
172		- bottom: 27px;
173		- left: 6px;
174		- border-left: 1px dashed #373E4B;
175		-}
176		-.hierarchy-menu > ul {
177		- padding: 15px 0 10px 25px;
178		-}
179		-.hierarchy-menu > ul ul {
180		- padding-left: 16px;
181		-}
182		-
183		-/* List items */
184		-.hierarchy-menu ul li {
185		- display: block;
186		- position: relative;
187		-}
188		-.hierarchy-menu > ul ul li:before {
189		- content: '';
190		- display: block;
191		- height: 0px;
192		- width: 20px;
193		- border-bottom: 1px solid #7A7F87;
194		- position: absolute;
195		- left: -10px;
196		- top: 16px;
197		-}
198		-.hierarchy-menu > ul ul li:after {
199		- content: '';
200		- display: block;
201		- height: 43px;
202		- width: 0;
203		- border-left: 1px solid #7A7F87;
204		- position: absolute;
205		- left: -10px;
206		- top: -27px;
207		-}
208		-.hierarchy-menu > ul ul li.group-lvl:before {
209		- width: 7px;
210		-}
211		-.hierarchy-menu > ul ul li:first-child:after {
212		- height: 28px;
213		- top: -12px;
214		-}
215		-
216		-/* Links */
217		-.hierarchy-menu ul a {
218		- display: block;
219		- padding: 6px 18px;
220		- height: 44px;
221		- position: relative;
222		- color: #333333;
223		- transition: 100ms;
224		-}
225		-.hierarchy-menu ul a:hover {
226		- color: #7e9d9c;
227		-}
228		-.hierarchy-menu ul a.active {
229		- color: #333333;
230		- font-weight: bold;
231		-}
232		-
233		-.hierarchy-menu li.sub-nav > a:before {
234		- position: absolute;
235		- left: 4px;
236		- top: 14px;
237		- content: '';
238		- width: 5px;
239		- height: 5px;
240		- border-bottom: 1px solid #333333;
241		- border-right: 1px solid #333333;
242		- -ms-transform: rotate(-45deg);
243		- -webkit-transform: rotate(-45deg);
244		- transform: rotate(-45deg);
245		-}
246		-.hierarchy-menu li.sub-nav.open > a:before {
247		- -ms-transform: rotate(45deg);
248		- -webkit-transform: rotate(45deg);
249		- transform: rotate(45deg);
250		-}
251		-.hierarchy-menu li.sub-nav.open > a {
252		- color: #333333;
253		-}
254		-.hierarchy-menu li.sub-nav > ul {
255		- display: block;
256		-}
257		-.hierarchy-menu li.sub-nav.open > ul {
258		- display: block;
259		-}
	148	+footer {
	149	+ padding: 1rem;
	150	+ background-color: #787878;
	151	+ grid-area: footer;
	152	+ text-align: center;
	153	+ font-size: small;
	154	+ color: #ffffff;
	155	+} (No newline at end of file)

...	...	@@ -1,8 +1,4 @@
1	1	/* 공통 */
2		-.logo {
3		- font-size: 2.4rem;
4		- font-family: "KoPubDotumBold_0";
5		-}
6	2
7	3	header .page-title span {
8	4	font-family: "KoPubDotumBold_0";
...	...	@@ -16,18 +12,11 @@
16	12	.join-btn{
17	13	background-color: transparent;
18	14	}
19		-/* 카테고리 */
20		-.category{font-size: 1.6rem;}
21		-.category-btn{padding: 0; border-radius: 0;}
22		-.category ul{list-style: disc;}
23		-.category > ul >li{list-style: circle; }
24		-.category > ul > li > ul > li{list-style: circle; border: 1px solid red; }
25		-
26		-
27		-
28	15	/* -----------------------------------------------지자체 */
29	16
30		-
	17	+/* 관리자 권한 관리 */
	18	+.explain-table th{background: #ffffff;}
	19	+.react-calendar{width: 100%;}
31	20	.map {
32	21	width: 100%;
33	22	height: calc(100% - 31px);
...	...	@@ -43,40 +32,38 @@
43	32	}
44	33
45	34	.statistics li {
46		- width: 30%;
47		- padding: 1rem;
	35	+ position: relative;
	36	+ padding-left: 5rem;
48	37	text-align: center;
49		- border-radius: 10px;
50		- margin: 0.5rem;
51		-}
52		-
53		-.statistics li:nth-child(1) {
54		- border: 1px solid #18924e;
55		-}
56		-
57		-.statistics li:nth-child(2) {
58		- border: 1px solid #ec220c;
59		-}
60		-
61		-.statistics li:nth-child(3) {
62		- border: 1px solid #2132e3;
63		-}
64		-.statistics li:nth-child(4) {
65		- border: 1px solid #e3d621;
66	38	}
67	39
68	40	.statistics li p:nth-of-type(1) {
69		- font-size: 1.6rem;
70		- font-weight: bold;
71		- margin-bottom: 1rem;
	41	+ position: absolute;
	42	+ left: 0;
72	43	}
73		-
	44	+.statistics:nth-of-type(1) {
	45	+ background-image: linear-gradient(to bottom right, #9890e3 0%, #b1f4cf 100%);
	46	+}
	47	+.statistics:nth-of-type(2) {
	48	+ background-image: linear-gradient(to bottom right, #b1f4cf 0%, #5a70df 100%);
	49	+}
	50	+.statistics:nth-of-type(3) {
	51	+ background-image: linear-gradient(to bottom right, #83a9d7 0%, #8d2ecd 100%);
	52	+}
	53	+.statistics:nth-of-type(4) {
	54	+ background-image: linear-gradient(to bottom right, #8d2ecd 0%, #b1f4cf 100%);
	55	+}
	56	+.statistics li p{color: #ffffff;}
74	57	.statistics li p:nth-of-type(2) {
	58	+ padding-bottom: 0.5rem;
75	59	font-size: 1.6rem;
76	60	font-weight: bold;
77	61	}
78		-
79		-.statistics li p:nth-of-type(2)::after {
	62	+.statistics li p:nth-of-type(3) {
	63	+ font-size: 1.6rem;
	64	+ font-weight: bold;
	65	+}
	66	+.statistics li p:nth-of-type(3)::after {
80	67	content: "명";
81	68	}
82	69
...	...	@@ -86,11 +73,6 @@
86	73	font-size: 1.4rem;
87	74	}
88	75
89		-.combine-right-government h4::before {
90		- content: "김복남 님의";
91		- margin-right: 1rem;
92		- font-size: 1.4rem;
93		-}
94	76	.main-battery-title {
95	77	font-size: 1.6rem;
96	78	font-weight: 900;
...	...	@@ -214,7 +196,11 @@
214	196	max-height: 100%;
215	197	background-color: #f8f8f8;
216	198	}
217		-
	199	+.login-wrap .tab-container{
	200	+ width: 50%;
	201	+ margin: auto;
	202	+ padding-top: 10rem;
	203	+}
218	204	.login-wrap h1 {
219	205	max-width: 100%;
220	206	text-align: center;
...	...	@@ -235,18 +221,19 @@
235	221	}
236	222
237	223	.login-form {
	224	+ position: relative;
238	225	width: 500px;
239	226	padding: 5rem 3rem;
240	227	margin: auto;
241	228	background-color: #ffffff;
242	229	border-radius: 1rem;
243	230	}
244		-
245	231	.login-form .login-inner {
246	232	margin-bottom: 2rem;
	233	+ position: absolute;
247	234	}
248	235
249		-.login-form .login-inner .content {
	236	+.login-inner .content {
250	237	width: 100%;
251	238	margin-bottom: 1rem;
252	239	}
...	...	@@ -257,7 +244,7 @@
257	244	color: #eee;
258	245	}
259	246
260		-.login-form .login-inner input {
	247	+.login-inner input {
261	248	outline: none;
262	249	border: 0;
263	250	margin-bottom: 1rem;
...	...	@@ -272,6 +259,44 @@
272	259
273	260	.join-login {
274	261	height: calc(100% - 92px);
	262	+}
	263	+
	264	+
	265	+.login-form-management h3 {
	266	+ font-size: 2rem;
	267	+ text-align: center;
	268	+ margin-bottom: 2rem;
	269	+}
	270	+
	271	+.login-form-management {
	272	+ width: 500px;
	273	+ padding: 5rem 3rem;
	274	+ margin: auto;
	275	+ background-color: #ffffff;
	276	+ border-radius: 1rem;
	277	+}
	278	+
	279	+.login-form-management .login-inner {
	280	+ margin-bottom: 2rem;
	281	+}
	282	+
	283	+.login-form-management .login-inner .content {
	284	+ width: 100%;
	285	+ margin-bottom: 1rem;
	286	+}
	287	+
	288	+.login-form-management .login-inner .fa-solid {
	289	+ font-size: 2rem;
	290	+ margin-bottom: 1rem;
	291	+ color: #eee;
	292	+}
	293	+
	294	+.login-form-management .login-inner input {
	295	+ outline: none;
	296	+ border: 0;
	297	+ margin-bottom: 1rem;
	298	+ padding: 1.5rem;
	299	+ background: #eee;
275	300	}
276	301
277	302	/* ------------------------------------- 회원가입 page --------------------------------- */
...	...	@@ -331,6 +356,7 @@
331	356	}
332	357
333	358	.search-group .btn-box {
	359	+ margin-top: 2rem;
334	360	padding-bottom: 0.5rem;
335	361	}
336	362
...	...	@@ -355,7 +381,7 @@
355	381	}
356	382
357	383	.detail-search tbody tr:nth-of-type(2) select {
358		- width: 24.4%;
	384	+ width: 27%;
359	385	}
360	386
361	387	.detail-search tbody tr:nth-of-type(3) td {
...	...	@@ -636,7 +662,10 @@
636	662	}
637	663
638	664	/* 장비등록 */
639		-
	665	+.equipment-insert input[type="checkbox" i]{
	666	+ width: 10%;
	667	+}
	668	+.equipment-insert label{width: 30%;}
640	669	.user-list{
641	670	background-color: #eeeeee;
642	671	height: 57.8vh;
...	...	@@ -655,8 +684,8 @@
655	684	}
656	685
657	686	.modal .modal-inner {
658		- width: 80%;
659		- max-width: 650px;
	687	+ width: 100%;
	688	+ max-width: 768px;
660	689	margin: 0 auto;
661	690	border-radius: 0.3rem;
662	691	background-color: #fff;
...	...	@@ -694,16 +723,16 @@
694	723	}
695	724
696	725	.tab-menu li {
697		- width: 200px;
	726	+ width: 50%;
698	727	padding: 1rem;
699		- background-color: #f8f8f8;
	728	+ background-color: #ffffff;
700	729	border-radius: 0.5rem 0.5rem 0 0;
701	730	font-size: 1.6rem;
702	731	text-align: center;
703	732	border: 1px solid #eeeeee;
704	733	}
705	734
706		-.tab-menu li.active {
	735	+.tab-menu li.active {
707	736	font-weight: bold;
708	737	background-color: #242d2e;
709	738	color: #ffffff;
...	...	@@ -728,6 +757,8 @@
728	757	color: #7D9D9C;
729	758	}
730	759
	760	+.tab-container{
	761	+}
731	762	.tab-container>div>div:nth-child(2) {
732	763	margin: 1rem 0;
733	764	}

...	...	@@ -199,36 +199,38 @@
199	199	<td colSpan={3}>
200	200	<div className="flex">
201	201	<select name="" id="">
202		- <option value="">사용자관리번호</option>
203		- <option value="">사용자 이름</option>
204		- <option value="">관리기관명</option>
	202	+ <option value="">구분</option>
	203	+ <option value="">어르신 성함</option>
	204	+ <option value="">보호사 성함</option>
205	205	</select>
206	206	<input type="text" />
207	207	</div>
208	208	</td>
209	209	</tr>
210	210	<tr>
211		- <th>지역</th>
	211	+ <th>생년월일</th>
212	212	<td>
213	213	<div className="flex-start">
214	214	<select name="" id="">
215		- <option>전체</option>
216		- <option>군위읍</option>
217		- <option>소보면</option>
218		- <option>효령면</option>
219		- <option>부계면</option>
220		- <option>우보면</option>
221		- <option>의흥면</option>
222		- <option>산성면</option>
223		- <option>삼국유사면</option>
	215	+ <option value="">연도</option>
	216	+ </select>
	217	+ <select name="" id="">
	218	+ <option value="">월</option>
	219	+ </select>
	220	+ <select name="" id="">
	221	+ <option value="">일</option>
224	222	</select>
225	223	</div>
	224	+ </td>
	225	+ <th>외출 기간 및 방문기간</th>
	226	+ <td>
	227	+ <input type="date" name="" id="" />
226	228	</td>
227	229	</tr>
228	230	</tbody>
229	231	</table>
230	232	</div>
231		- {/* <hr />
	233	+ <hr />
232	234	<details>
233	235	<summary>지역별 상세 조회</summary>
234	236	<div className="mobile-area-wrap">
...	...	@@ -455,7 +457,7 @@
455	457	</ul>
456	458	</div>
457	459	</div>
458		- </details> */}
	460	+ </details>
459	461	</div>
460	462	<div className="select-area">
461	463	<div>

...	...	@@ -101,6 +101,10 @@
101	101	yAxis: yAxis,
102	102	valueYField: fieldName,
103	103	categoryXField: "date",
	104	+ tooltip: am5.Tooltip.new(root1, {
	105	+ pointerOrientation: "horizontal",
	106	+ labelText: "[bold]{name}[/]\n{categoryY}: {valueX}"
	107	+ })
104	108	})
105	109	);
106	110
...	...	@@ -124,6 +128,8 @@
124	128	});
125	129	});
126	130
	131	+
	132	+
127	133	legend.data.push(series);
128	134	}
129	135

...	...	@@ -8,119 +8,213 @@
8	8	let root = am5.Root.new("Chart2");
9	9
10	10	root._logo.dispose();
11		- // Set themes
12		- // https://www.amcharts.com/docs/v5/concepts/themes/
13		- root.setThemes([am5themes_Animated.new(root)]);
	11	+ // Set themes
	12	+// https://www.amcharts.com/docs/v5/concepts/themes/
	13	+root.setThemes([
	14	+ am5themes_Animated.new(root)
	15	+]);
14	16
15		- // Create chart
16		- // https://www.amcharts.com/docs/v5/charts/xy-chart/
17		- let chart = root.container.children.push(
18		- am5xy.XYChart.new(root, {
19		- panX: true,
20		- panY: true,
21		- wheelX: "panX",
22		- wheelY: "zoomX",
23		- pinchZoomX: true,
24		- })
25		- );
26	17
27		- chart.get("colors").set("step", 3);
	18	+// Create chart
	19	+// https://www.amcharts.com/docs/v5/charts/xy-chart/
	20	+let chart = root.container.children.push(am5xy.XYChart.new(root, {
	21	+ panX: true,
	22	+ panY: true,
	23	+ wheelX: "panX",
	24	+ wheelY: "zoomX",
	25	+ pinchZoomX:true
	26	+}));
28	27
29		- // Add cursor
30		- // https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
31		- let cursor = chart.set("cursor", am5xy.XYCursor.new(root, {}));
32		- cursor.lineY.set("visible", false);
33	28
34		- // Create axes
35		- // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
36		- let xAxis = chart.xAxes.push(
37		- am5xy.DateAxis.new(root, {
38		- maxDeviation: 0.3,
39		- baseInterval: {
40		- timeUnit: "day",
41		- count: 1,
42		- },
43		- renderer: am5xy.AxisRendererX.new(root, {}),
44		- tooltip: am5.Tooltip.new(root, {}),
45		- })
46		- );
	29	+// Add cursor
	30	+// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
	31	+let cursor = chart.set("cursor", am5xy.XYCursor.new(root, {
	32	+ behavior: "none"
	33	+}));
	34	+cursor.lineY.set("visible", false);
47	35
48		- let yAxis = chart.yAxes.push(
49		- am5xy.ValueAxis.new(root, {
50		- maxDeviation: 0.3,
51		- renderer: am5xy.AxisRendererY.new(root, {}),
52		- })
53		- );
54	36
55		- // Create series
56		- // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
57		- let series = chart.series.push(
58		- am5xy.LineSeries.new(root, {
59		- name: "Series 1",
60		- xAxis: xAxis,
61		- yAxis: yAxis,
62		- valueYField: "value",
63		- valueXField: "date",
64		- tooltip: am5.Tooltip.new(root, {
65		- labelText: "{valueY}",
66		- }),
67		- })
68		- );
69		- series.strokes.template.setAll({
70		- strokeWidth: 2,
71		- strokeDasharray: [3, 3],
72		- });
	37	+// The data
	38	+let data = [{
	39	+ "year": "1월",
	40	+ "아침": 15.87,
	41	+ "점심": 650,
	42	+ "저녁": 121
	43	+}, {
	44	+ "year": "2월",
	45	+ "아침": 1567,
	46	+ "점심": 683,
	47	+ "저녁": 146
	48	+}, {
	49	+ "year": "3월",
	50	+ "아침": 1617,
	51	+ "점심": 691,
	52	+ "저녁": 138
	53	+}, {
	54	+ "year": "4월",
	55	+ "아침": 1630,
	56	+ "점심": 642,
	57	+ "저녁": 127
	58	+}, {
	59	+ "year": "5월",
	60	+ "아침": 1660,
	61	+ "점심": 699,
	62	+ "저녁": 105
	63	+}, {
	64	+ "year": "6월",
	65	+ "아침": 1683,
	66	+ "점심": 721,
	67	+ "저녁": 109
	68	+}, {
	69	+ "year": "7월",
	70	+ "아침": 1691,
	71	+ "점심": 737,
	72	+ "저녁": 112
	73	+}, {
	74	+ "year": "8월",
	75	+ "아침": 1298,
	76	+ "점심": 680,
	77	+ "저녁": 101
	78	+}, {
	79	+ "year": "9월",
	80	+ "아침": 1275,
	81	+ "점심": 664,
	82	+ "저녁": 97
	83	+}, {
	84	+ "year": "10월",
	85	+ "아침": 1246,
	86	+ "점심": 648,
	87	+ "저녁": 93
	88	+}, {
	89	+ "year": "11월",
	90	+ "아침": 1318,
	91	+ "점심": 697,
	92	+ "저녁": 111
	93	+}, {
	94	+ "year": "12월",
	95	+ "아침": 1213,
	96	+ "점심": 633,
	97	+ "저녁": 87
	98	+}];
73	99
74		- // Set data
75		- let data = [
76		- {
77		- date: new Date(2022, 8, 1).getTime(),
78		- value: 0,
79		- },
80		- {
81		- date: new Date(2022, 8, 2).getTime(),
82		- value: 1,
83		- },
84		- {
85		- date: new Date(2022, 8, 3).getTime(),
86		- value: 1,
87		- },
88		- {
89		- date: new Date(2022, 8, 4).getTime(),
90		- value: 2,
91		- },
92		- {
93		- date: new Date(2022, 8, 5).getTime(),
94		- value: 3,
95		- },
96		- {
97		- date: new Date(2022, 8, 6).getTime(),
98		- value: 3,
99		- },
100		- {
101		- date: new Date(2022, 8, 7).getTime(),
102		- value: 7,
103		- },
104		- {
105		- date: new Date(2022, 8, 8).getTime(),
106		- value: 7,
107		- },
108		- {
109		- date: new Date(2022, 8, 9).getTime(),
110		- value: 8,
111		- },
112		- {
113		- date: new Date(2022, 8, 10).getTime(),
114		- value: 8,
115		- },
116		- ];
117	100
118		- series.data.setAll(data);
	101	+// Create axes
	102	+// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
	103	+let xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
	104	+ categoryField: "year",
	105	+ startLocation: 0.5,
	106	+ endLocation: 0.5,
	107	+ renderer: am5xy.AxisRendererX.new(root, {}),
	108	+ tooltip: am5.Tooltip.new(root, {})
	109	+}));
119	110
120		- // Make stuff animate on load
121		- // https://www.amcharts.com/docs/v5/concepts/animations/
122		- series.appear(1000);
123		- chart.appear(1000, 100);
	111	+xAxis.data.setAll(data);
	112	+
	113	+let yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
	114	+ renderer: am5xy.AxisRendererY.new(root, {})
	115	+}));
	116	+
	117	+// Add series
	118	+// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
	119	+
	120	+function createSeries(name, field) {
	121	+ let series = chart.series.push(am5xy.LineSeries.new(root, {
	122	+ name: name,
	123	+ xAxis: xAxis,
	124	+ yAxis: yAxis,
	125	+ stacked:true,
	126	+ valueYField: field,
	127	+ categoryXField: "year",
	128	+ tooltip: am5.Tooltip.new(root, {
	129	+ pointerOrientation: "horizontal",
	130	+ labelText: "[bold]{name}[/]\n{categoryX}: {valueY}"
	131	+ })
	132	+ }));
	133	+
	134	+ series.fills.template.setAll({
	135	+ fillOpacity: 0.5,
	136	+ visible: true
	137	+ });
	138	+
	139	+ series.data.setAll(data);
	140	+ series.appear(1000);
	141	+}
	142	+
	143	+createSeries("아침", "아침");
	144	+createSeries("점심", "점심");
	145	+createSeries("저녁", "저녁");
	146	+
	147	+// Add scrollbar
	148	+// https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
	149	+// chart.set("scrollbarX", am5.Scrollbar.new(root, {
	150	+// orientation: "horizontal"
	151	+// }));
	152	+
	153	+// Create axis ranges
	154	+// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/axis-ranges/
	155	+let rangeDataItem = xAxis.makeDataItem({
	156	+ category: "1월",
	157	+ endCategory: "12월"
	158	+});
	159	+
	160	+let range = xAxis.createAxisRange(rangeDataItem);
	161	+
	162	+rangeDataItem.get("grid").setAll({
	163	+ stroke: am5.color(0x00ff33),
	164	+ strokeOpacity: 0.5,
	165	+ strokeDasharray: [3]
	166	+});
	167	+
	168	+rangeDataItem.get("axisFill").setAll({
	169	+ fill: am5.color(0x00ff33),
	170	+ fillOpacity: 0.1,
	171	+ visible:true
	172	+});
	173	+
	174	+// rangeDataItem.get("label").setAll({
	175	+// inside: true,
	176	+// text: "Fines for speeding increased",
	177	+// rotation: 90,
	178	+// centerX: am5.p100,
	179	+// centerY: am5.p100,
	180	+// location: 0,
	181	+// paddingBottom: 10,
	182	+// paddingRight: 15
	183	+// });
	184	+
	185	+
	186	+let rangeDataItem2 = xAxis.makeDataItem({
	187	+ category: "1월"
	188	+});
	189	+
	190	+let range2 = xAxis.createAxisRange(rangeDataItem2);
	191	+
	192	+rangeDataItem2.get("grid").setAll({
	193	+ stroke: am5.color(0x00ff33),
	194	+ strokeOpacity: 1,
	195	+ strokeDasharray: [3]
	196	+});
	197	+
	198	+rangeDataItem2.get("axisFill").setAll({
	199	+ fill: am5.color(0x00ff33),
	200	+ fillOpacity: 0.1,
	201	+ visible:true
	202	+});
	203	+
	204	+// rangeDataItem2.get("label").setAll({
	205	+// inside: true,
	206	+// text: "Motorcycle fee introduced",
	207	+// rotation: 90,
	208	+// centerX: am5.p100,
	209	+// centerY: am5.p100,
	210	+// location: 0,
	211	+// paddingBottom: 10,
	212	+// paddingRight: 15
	213	+// });
	214	+
	215	+// Make stuff animate on load
	216	+// https://www.amcharts.com/docs/v5/concepts/animations/
	217	+chart.appear(1000, 100);
124	218
125	219	this.root = root;
126	220	}

...	...	@@ -151,13 +151,13 @@
151	151
152	152	// Add scrollbar
153	153	// https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
154		- chart.set(
155		- "scrollbarX",
156		- am5.Scrollbar.new(root, {
157		- orientation: "horizontal",
158		- marginBottom: 20,
159		- })
160		- );
	154	+ // chart.set(
	155	+ // "scrollbarX",
	156	+ // am5.Scrollbar.new(root, {
	157	+ // orientation: "horizontal",
	158	+ // marginBottom: 20,
	159	+ // })
	160	+ // );
161	161
162	162	// Make stuff animate on load
163	163	// https://www.amcharts.com/docs/v5/concepts/animations/

...	...	@@ -1,12 +1,12 @@
1	1	import React, { Component } from "react";
2	2	import * as am5 from "@amcharts/amcharts5";
3	3	import * as am5map from "@amcharts/amcharts5/map";
4		-import am5geodata_usaLow from "../map";
	4	+import am5geodata_gunwi from "../map";
5	5	import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
6		-// import seniorjson from "../../component/senior.json";
7	6
8	7	class Map extends Component {
9	8	componentDidMount() {
	9	+ const props = this.props;
10	10	let root = am5.Root.new("Map");
11	11	root.setThemes([am5themes_Animated.new(root)]);
12	12
...	...	@@ -23,7 +23,7 @@
23	23	// Create polygon series
24	24	let polygonSeries = chart.series.push(
25	25	am5map.MapPolygonSeries.new(root, {
26		- geoJSON: am5geodata_usaLow,
	26	+ geoJSON: am5geodata_gunwi,
27	27	})
28	28	);
29	29
...	...	@@ -71,7 +71,7 @@
71	71	}
72	72	chart.goHome();
73	73	zoomOut.hide();
74		- currentSeries = regionalSeries.US.series;
	74	+ currentSeries = regionalSeries.KR.series;
75	75	currentSeries.show();
76	76	});
77	77	zoomOut.hide();
...	...	@@ -83,11 +83,11 @@
83	83	// Load senior data
84	84	am5.net
85	85	.load(
86		- "https://gist.githubusercontent.com/dbskfnd/e618b91a622b8efeb55ccc562c47864a/raw/23d9030fe1e6e42d6e43348d86b02f6aafa464e2/seniornumber.json"
	86	+ "https://gist.githubusercontent.com/jlchoi1932/c3673a65fd00efa9192b3aac5bc02a1a/raw/e7bf0bc2320d0baa2f8274f94084a3dd2b098c91/_GunwiRegion.json"
87	87	)
88	88	.then(function (result) {
89	89	let seniors = am5.JSONParser.parse(result.response);
90		- setupseniors(seniors);
	90	+ setupseniors(seniors);
91	91	});
92	92
93	93	let regionalSeries = {};
...	...	@@ -98,13 +98,13 @@
98	98	console.log(data);
99	99
100	100	// Init country-level series
101		- regionalSeries.US = {
	101	+ regionalSeries.KR = {
102	102	markerData: [],
103	103	series: createSeries("seniors"),
104	104	};
105	105
106	106	// Set current series
107		- currentSeries = regionalSeries.US.series;
	107	+ currentSeries = regionalSeries.KR.series;
108	108
109	109	// Process data
110	110	am5.array.each(data.query_results, function (senior) {
...	...	@@ -130,7 +130,7 @@
130	130	type: "state",
131	131	name: statePolygon.dataItem.dataContext.name,
132	132	count: senior.count,
133		- seniors: 1,
	133	+ seniors: senior.count,
134	134	state: senior.state,
135	135	markerData: [],
136	136	geometry: {
...	...	@@ -138,7 +138,7 @@
138	138	coordinates: [centroid.longitude, centroid.latitude],
139	139	},
140	140	};
141		- regionalSeries.US.markerData.push(regionalSeries[senior.state]);
	141	+ regionalSeries.KR.markerData.push(regionalSeries[senior.state]);
142	142	} else {
143	143	// State not found
144	144	return;
...	...	@@ -149,42 +149,42 @@
149	149	}
150	150
151	151	// Process city-level data
152		- if (regionalSeries[senior.city] == undefined) {
153		- regionalSeries[senior.city] = {
154		- target: senior.city,
155		- type: "city",
156		- name: senior.city,
157		- count: senior.count,
158		- seniors: 1,
159		- state: senior.state,
160		- markerData: [],
161		- geometry: {
162		- type: "Point",
163		- coordinates: [senior.long, senior.lat],
164		- },
165		- };
166		- regionalSeries[senior.state].markerData.push(
167		- regionalSeries[senior.city]
168		- );
169		- } else {
170		- regionalSeries[senior.city].seniors++;
171		- regionalSeries[senior.city].count += senior.count;
172		- }
	152	+ // if (regionalSeries[senior.city] == undefined) {
	153	+ // regionalSeries[senior.city] = {
	154	+ // target: senior.city,
	155	+ // type: "city",
	156	+ // name: senior.city,
	157	+ // count: senior.count,
	158	+ // seniors: 1,
	159	+ // state: senior.state,
	160	+ // markerData: [],
	161	+ // geometry: {
	162	+ // type: "Point",
	163	+ // coordinates: [senior.long, senior.lat],
	164	+ // },
	165	+ // };
	166	+ // regionalSeries[senior.state].markerData.push(
	167	+ // regionalSeries[senior.city]
	168	+ // );
	169	+ // } else {
	170	+ // regionalSeries[senior.city].seniors++;
	171	+ // regionalSeries[senior.city].count += senior.count;
	172	+ // }
173	173
174		- // Process individual senior
175		- regionalSeries[senior.city].markerData.push({
176		- name: senior.location,
177		- count: senior.count,
178		- seniors: 1,
179		- state: senior.state,
180		- geometry: {
181		- type: "Point",
182		- coordinates: [senior.long, senior.lat],
183		- },
184		- });
	174	+ // // Process individual senior
	175	+ // regionalSeries[senior.city].markerData.push({
	176	+ // name: senior.location,
	177	+ // count: senior.count,
	178	+ // seniors: 1,
	179	+ // state: senior.state,
	180	+ // geometry: {
	181	+ // type: "Point",
	182	+ // coordinates: [senior.long, senior.lat],
	183	+ // },
	184	+ // });
185	185	});
186		- console.log(regionalSeries.US.markerData);
187		- regionalSeries.US.series.data.setAll(regionalSeries.US.markerData);
	186	+ console.log(regionalSeries.KR.markerData);
	187	+ regionalSeries.KR.series.data.setAll(regionalSeries.KR.markerData);
188	188	}
189	189
190	190	// Finds polygon in series by its id
...	...	@@ -210,15 +210,15 @@
210	210
211	211	// Add senior bullet
212	212	let circleTemplate = am5.Template.new(root);
213		- pointSeries.bullets.push(function () {
	213	+ pointSeries.bullets.push(() => {
214	214	let container = am5.Container.new(root, {});
215	215
216	216	let circle = container.children.push(
217	217	am5.Circle.new(
218	218	root,
219	219	{
220		- radius: 10,
221		- fill: am5.color(0x000000),
	220	+ radius: 12,
	221	+ fill: am5.color("#f1de04"),
222	222	fillOpacity: 0.7,
223	223	cursorOverStyle: "pointer",
224	224	tooltipText: "{name}:\n[bold]{seniors} seniors[/]",
...	...	@@ -239,13 +239,18 @@
239	239	);
240	240
241	241	// Set up drill-down
242		- circle.events.on("click", function (ev) {
	242	+ circle.events.on("click", (ev) => {
243	243	// Determine what we've clicked on
244	244	let data = ev.target.dataItem.dataContext;
	245	+ console.log({ data });
245	246
246	247	// No id? Individual senior - nothing to drill down to further
247	248	if (!data.target) {
248	249	return;
	250	+ }
	251	+
	252	+ if (data.type === "state") {
	253	+ props.setCityName(data.name);
249	254	}
250	255
251	256	// Create actual series if it hasn't been yet created
...	...	@@ -255,25 +260,25 @@
255	260	}
256	261
257	262	// Hide current series
258		- if (currentSeries) {
259		- currentSeries.hide();
260		- }
	263	+ // if (currentSeries) {
	264	+ // currentSeries.hide();
	265	+ // }
261	266
262	267	// Control zoom
263		- if (data.type == "state") {
264		- let statePolygon = getPolygon("KR-" + data.state);
265		- polygonSeries.zoomToDataItem(statePolygon.dataItem);
266		- } else if (data.type == "city") {
267		- chart.zoomToGeoPoint(
268		- {
269		- latitude: data.geometry.coordinates[1],
270		- longitude: data.geometry.coordinates[0],
271		- },
272		- 64,
273		- true
274		- );
275		- }
276		- zoomOut.show();
	268	+ // if (data.type == "state") {
	269	+ // let statePolygon = getPolygon("KR-" + data.state);
	270	+ // polygonSeries.zoomToDataItem(statePolygon.dataItem);
	271	+ // } else if (data.type == "city") {
	272	+ // chart.zoomToGeoPoint(
	273	+ // {
	274	+ // latitude: data.geometry.coordinates[1],
	275	+ // longitude: data.geometry.coordinates[0],
	276	+ // },
	277	+ // 64,
	278	+ // true
	279	+ // );
	280	+ // }
	281	+ // zoomOut.show();
277	282
278	283	// Show new targert series
279	284	currentSeries = regionalSeries[data.target].series;
...	...	@@ -313,11 +318,11 @@
313	318
314	319	render() {
315	320	return (
316		- <div
317		- className="flex80"
318		- id="Map"
319		- style={{ width: "100%", height: "35vh", marginBottom: "1rem" }}
320		- ></div>
	321	+ <div
	322	+ className="flex80"
	323	+ id="Map"
	324	+ style={{ width: "100%", height: "42vh", marginBottom: "1rem" }}
	325	+ ></div>
321	326	);
322	327	}
323	328	}

...	...	@@ -56,6 +56,7 @@
56	56	xAxis: xAxis,
57	57	yAxis: yAxis,
58	58	valueXField: "value",
	59	+ descriptionField : "value",
59	60	categoryYField: "network",
60	61	tooltip: am5.Tooltip.new(root, {
61	62	pointerOrientation: "left",
...	...	@@ -82,20 +83,52 @@
82	83	// Set data
83	84	let data = [
84	85	{
85		- network: "60대",
86		- value: 80,
	86	+ network: "1월",
	87	+ value: 20,
87	88	},
88	89	{
89		- network: "70대",
90		- value: 80,
	90	+ network: "2월",
	91	+ value: 18,
91	92	},
92	93	{
93		- network: "80대",
94		- value: 70,
	94	+ network: "3월",
	95	+ value: 10,
95	96	},
96	97	{
97		- network: "90대",
98		- value: 75,
	98	+ network: "4월",
	99	+ value: 7,
	100	+ },
	101	+ {
	102	+ network: "5월",
	103	+ value: 5,
	104	+ },
	105	+ {
	106	+ network: "6월",
	107	+ value: 3,
	108	+ },
	109	+ {
	110	+ network: "7월",
	111	+ value: 6,
	112	+ },
	113	+ {
	114	+ network: "8월",
	115	+ value: 7,
	116	+ },
	117	+ {
	118	+ network: "9월",
	119	+ value: 15,
	120	+ },
	121	+ {
	122	+ network: "10월",
	123	+ value: 30,
	124	+ },
	125	+ {
	126	+ network: "11월",
	127	+ value: 13,
	128	+ },
	129	+ {
	130	+ network: "12월",
	131	+ value: 9,
99	132	},
100	133	];
101	134
...	...	@@ -204,7 +237,7 @@
204	237	}
205	238
206	239	render() {
207		- return <div id="RowChart" style={{ width: "100%", height: "100%" }}></div>;
	240	+ return <div id="RowChart" style={{ width: "100%", height: "80%" }}></div>;
208	241	}
209	242	}
210	243

...	...	@@ -18,11 +18,15 @@
18	18	function App() {
19	19	const location = useLocation();
20	20	const navigate = useNavigate();
21		- const [isLogin, setIsLogin] = React.useState(true);
	21	+ const [isLogin, setIsLogin] = React.useState(false);
22	22
23		- const getLogin = () => {
	23	+ const getLogin = (loginComponentName) => {
24	24	setIsLogin(true);
25		- navigate("/Main");
	25	+ if (loginComponentName == undefined \|\| loginComponentName == null \|\| loginComponentName.length == 0) {
	26	+ navigate("/Main");
	27	+ } else {
	28	+ navigate(loginComponentName);
	29	+ }
26	30	};
27	31
28	32	const { title } = items.find(
...	...	@@ -31,6 +35,7 @@
31	35	location.pathname.startsWith(item.prefix) \|\|
32	36	item.childrens?.some((child) => location.pathname.startsWith(child.path))
33	37	) ?? { title: '' };
	38	+
34	39	return (
35	40	<div id="App">
36	41	{isLogin ? (

...	...	@@ -23,15 +23,14 @@
23	23	import EquipmentRentalInsert from "./equipment/EquipmentRentalInsert.jsx";
24	24	import EquipmentManagementSelect from "./equipment/EquipmentManagementSelect.jsx";
25	25	import EquipmentManagementSelectOne from "./equipment/EquipmentManagementSelectOne.jsx";
	26	+import EquipmentManagementInsert from "./equipment/EquipmentManagementInsert.jsx";
26	27	import UserAuthoriySelect from "./authority/UserAuthoriySelect.jsx";
27	28	import MyInfoUpdate from "./authority/MyInfoUpdate.jsx";
28		-import CallInsert from "./callcenter/CallInsert.jsx";
29		-import CallSelect from "./callcenter/CallSelect.jsx";
30		-import CallSelectOne from "./callcenter/CallSelectOne.jsx";
31		-import CallUpdate from "./callcenter/CallUpdate.jsx";
32	29	import EquipmentManagementSelectReturn from "./equipment/EquipmentManagementSelectReturn.jsx";
33		-import RiskInsert from "./authority/RiskInsert.jsx";
34	30	import AuthorityManagement from "./authority/AuthorityManagement.jsx";
	31	+import ServiceInsert from "./serviceCenter/ServiceInsert.jsx";
	32	+import AgencyInsert from "./authority/AgencyInsert.jsx";
	33	+import RiskInsert from "./authority/RiskInsert.jsx";
35	34
36	35	function AppRoute() {
37	36	return (
...	...	@@ -81,13 +80,12 @@
81	80	element={<UserAuthoriySelect />}
82	81	></Route>
83	82	<Route path="/MyInfoUpdate" element={<MyInfoUpdate />}></Route>
84		- <Route path="/CallInsert" element={<CallInsert />}></Route>
85		- <Route path="/CallUpdate" element={<CallUpdate />}></Route>
86		- <Route path="/CallSelect" element={<CallSelect />}></Route>
87		- <Route path="/CallSelectOne" element={<CallSelectOne />}></Route>
88	83	<Route path="/EquipmentManagementSelectReturn" element={<EquipmentManagementSelectReturn />}></Route>
89		- <Route path="/RiskInsert" element={<RiskInsert />}></Route>
90	84	<Route path="/AuthorityManagement" element={<AuthorityManagement />}></Route>
	85	+ <Route path="/EquipmentManagementInsert" element={<EquipmentManagementInsert />}></Route>
	86	+ <Route path="/ServiceInsert" element={<ServiceInsert />}></Route>
	87	+ <Route path="/AgencyInsert" element={<AgencyInsert />}></Route>
	88	+ <Route path="/RiskInsert" element={<RiskInsert />}></Route>
91	89	</Routes>
92	90	);
93	91	}

...	...	@@ -1,375 +1,147 @@
1	1	import React from "react";
2	2	import Table from "../../component/Table.jsx";
3	3	import Button from "../../component/Button.jsx";
	4	+import { useNavigate } from "react-router";
	5	+import AgencySearch from "../../component/AgencySearch.jsx";
	6	+import ContentTitle from "../../component/ContentTitle.jsx";
4	7	import SubTitle from "../../component/SubTitle.jsx";
5		-import Modal from "../../component/Modal.jsx";
6	8
7		-export default function UserAuthoriySelect() {
8		- const [modalOpen, setModalOpen] = React.useState(false);
9		- const openModal = () => {
10		- setModalOpen(true);
11		- };
12		- const closeModal = () => {
13		- setModalOpen(false);
14		- };
15		- const thead1 = [
16		- "No",
17		- "사용자관리번호",
18		- "관리기관",
19		- "이름",
20		- "성별",
21		- "지역",
22		- "연락처",
23		- "주소",
24		- ];
25		- const key1 = ["No",
26		- "management_number",
27		- "level_of_care",
28		- "name",
29		- "gender",
30		- "birth",
31		- "phone",
32		- "address",];
33		- const content1 = [
34		- {
35		- No: 1,
36		- management_number: 2022080101,
37		- level_of_care: "A복지관",
38		- name: "김복남",
39		- gender: "남",
40		- birth: "대구",
41		- phone: "010-1234-1234",
42		- address: "경상북도 군위군 삼국유사면",
43		- },
44		- ];
	9	+export default function SeniorSelect() {
	10	+ const navigate = useNavigate();
45	11
46		- const thead2 = [
	12	+ //게시판
	13	+ const thead = [
47	14	"No",
48		- "보호자명",
49		- "ID",
50		- "관리기관",
51		- "해당 대상자",
52		- "연락처",
53		- ];
54		- const key2 = [
55		- "No",
56		- "name",
57		- "Id",
58		- "management_agency",
59		- "phone",
60		- "birth",
61		-
62		- ];
63		- const content2 = [
64		- {
65		- No: 1,
66		- name: "김훈",
67		- Id: "admin2",
68		- management_agency: "보호재단",
69		- phone: "김복남 어르신",
70		- birth: "010-1234-1234",
71		- },
72		- ];
73		- const thead3 = [
74		- "No",
75		- "기관명",
	15	+ "기관명",
76	16	"사업자번호",
77		- "ID",
78		- "담당자",
79		- "연락처",
80		- "주소",
81		- ];
82		- const key3 = [
83		- "No",
84		- "name",
85		- "birth",
86		- "Id",
87		- "management_agency",
88		- "gender",
89		- "address",
90		- ];
91		- const content3 = [
92		- {
93		- No: 1,
94		- name: "보훈병원",
95		- birth: " 515-82-00000",
96		- Id: "admin",
97		- management_agency: "홍길동",
98		- gender: "053-818-8181",
99		- address: "대구광역시 달성군 ",
100		- },
101		- ];
102		- const thead4 = [
103		- "No",
104	17	"담당자명",
105		- "소속기관",
106		- "ID",
107		- "연락처",
	18	+ "담당 부서 연락처",
	19	+ "관리 장비 개수",
108	20	"주소",
	21	+ "등록된 복지사",
109	22	];
110		- const key4 = [
	23	+ const key = [
111	24	"No",
112		- "name",
113		- "birth",
114		- "Id",
115		- "management_agency",
	25	+ "name",
	26	+ "BusinessNumber",
	27	+ "representative",
	28	+ "phone",
	29	+ "Fax",
116	30	"address",
	31	+ "worker",
117	32	];
118		- const content4 = [
	33	+ const content = [
119	34	{
120	35	No: 1,
121		- name: "홍길동",
122		- birth: " 대구보훈병원",
123		- Id: "admin",
124		- management_agency: "053-818-8181",
125		- address: "대구광역시 달성군 ",
	36	+ name: "A복지관",
	37	+ BusinessNumber: "515-82-00000",
	38	+ representative: "김길동",
	39	+ phone: "053-811-1234",
	40	+ Fax: "50개",
	41	+ address: "경상북도 군위군 삼국유사면",
	42	+ worker: (
	43	+ <Button
	44	+ className={"btn-small gray-btn"}
	45	+ btnName={"상세보기"}
	46	+ onClick={() => {
	47	+ navigate("/SeniorSelectOne");
	48	+ }}
	49	+ />
	50	+ ),
126	51	},
127		- ];
128		-
129		- const thead5 = [
130		- "No",
131		- "장비명",
132		- "시리얼 넘버",
133		- "기기 상태",
134		- "구매일",
135		- "배터리 잔량",
136		- "대여가능여부",
137		- ];
138		- const key5 = ["No",
139		- "equipment_name",
140		- "serialNumber",
141		- "work",
142		- "name",
143		- "battery",
144		- "rental",];
145		- const content5 = [
146	52	{
147		- No: 1,
148		- equipment_name: "스마트약상자",
149		- serialNumber: "ABCD-1",
150		- work: "작동",
151		- name: "2022.12.02",
152		- battery: "10%",
153		- rental: "대여가능",
	53	+ No: 2,
	54	+ name: "B복지관",
	55	+ BusinessNumber: "515-82-00000",
	56	+ representative: "김길동",
	57	+ phone: "053-811-1234",
	58	+ Fax: "80개",
	59	+ address: "경상북도 군위군 삼국유사면",
	60	+ worker: (
	61	+ <Button
	62	+ className={"btn-small gray-btn"}
	63	+ btnName={"상세보기"}
	64	+ onClick={() => {
	65	+ navigate("/SeniorSelectOne");
	66	+ }}
	67	+ />
	68	+ ),
	69	+ },
	70	+ {
	71	+ No: 3,
	72	+ name: "대구보훈병원",
	73	+ BusinessNumber: "515-82-00000",
	74	+ representative: "김길동",
	75	+ phone: "053-811-1234",
	76	+ Fax: "30개",
	77	+ address: "경상북도 군위군 삼국유사면",
	78	+ worker: (
	79	+ <Button
	80	+ className={"btn-small gray-btn"}
	81	+ btnName={"상세보기"}
	82	+ onClick={() => {
	83	+ navigate("/SeniorSelectOne");
	84	+ }}
	85	+ />
	86	+ ),
154	87	},
155	88	];
156	89
157		- const data = [
158		- {
159		- id: 1,
160		- title: "사용자",
161		- description: (
162		- <Table
163		- className={"protector-user"}
164		- head={thead1}
165		- contents={content1}
166		- contentKey={key1}
167		- onClick={() => {
168		- navigate("/SeniorSelectOne");
169		- }}
170		- />
171		- ),
172		- },
173		- {
174		- id: 2,
175		- title: "보호자(가족)",
176		- description: (
177		- <Table
178		- className={"caregiver-user"}
179		- head={thead2}
180		- contents={content2}
181		- contentKey={key2}
182		- onClick={() => {
183		- navigate("/SeniorSelectOne");
184		- }}
185		- />
186		- ),
187		- },
188		- {
189		- id: 3,
190		- title: "계약업체",
191		- description: (
192		- <Table
193		- className={"common-user"}
194		- head={thead3}
195		- contents={content3}
196		- contentKey={key3}
197		- onClick={() => {
198		- navigate("/SeniorSelectOne");
199		- }}
200		- />
201		- ),
202		- },
203		- {
204		- id: 4,
205		- title: "복지사, 간호사",
206		- description: (
207		- <Table
208		- className={"common-user"}
209		- head={thead3}
210		- contents={content3}
211		- contentKey={key3}
212		- onClick={() => {
213		- navigate("/SeniorSelectOne");
214		- }}
215		- />
216		- ),
217		- },
218		- {
219		- id: 5,
220		- title: "관리자",
221		- description: (
222		- <Table
223		- className={"management-user"}
224		- head={thead4}
225		- contents={content4}
226		- contentKey={key4}
227		- onClick={() => {
228		- navigate("/SeniorSelectOne");
229		- }}
230		- />
231		- ),
232		- },
233		- ];
234		- const [index, setIndex] = React.useState(1);
	90	+ //select option 동적 생성
	91	+ // const optionList = () => {
	92	+ // let year = [];
	93	+ // let month = [];
	94	+ // let days = [];
	95	+ // let currentDate = new Date();
	96	+ // let currentYear = currentDate.getFullYear();
	97	+
	98	+ // for (let i = 1910; i < currentYear.length; i++) {
	99	+ // year.push(i);
	100	+ // }
	101	+
	102	+ // for (let j = 1; i < 13; j++) {
	103	+ // month.push(j);
	104	+ // }
	105	+
	106	+ // for (let k = 1; i < 32; k++) {
	107	+ // days.push(k);
	108	+ // }
	109	+ // return year, month, days;
	110	+ // };
	111	+
	112	+ // React.useEffect(() => {
	113	+ // optionList();
	114	+ // }, []);
	115	+
235	116	return (
236	117	<main>
237		- <Modal open={modalOpen} close={closeModal} header="대상자 매칭">
238		- <div className="board-wrap">
239		- <div className="flex margin-bottom2">
240		- <div className="flex50">
241		- <div className="flex margin-bottom">
242		- <input
243		- type="text"
244		- name=""
245		- id=""
246		- className="flex80"
247		- placeholder="사용자 검색"
	118	+ <div className="content-wrap">
	119	+ <ContentTitle contentTitle={"기관 조회"} />
	120	+ <div>
	121	+ <AgencySearch />
	122	+ <div className="board-wrap">
	123	+ <div className="flex-end">
	124	+ <div className="btn-wrap flex-end margin-bottom ">
	125	+ <Button
	126	+ className={"btn-small green-btn"}
	127	+ btnName={"등록"}
	128	+ onClick={() => {
	129	+ navigate("/AgencyInsert");
	130	+ }}
248	131	/>
249		- <Button btnName={"검색"} className={"flex20"} />
	132	+ <Button className={"btn-small green-btn"} btnName={"삭제"} />
250	133	</div>
251		- <ul className="user-list2">
252		- <li>검색 내역이 없습니다.</li>
253		- </ul>
254		- </div>
255		- <div className="flex50">
256		- <div className="flex margin-bottom">
257		- <p className="content-title">선택된 대상자</p>
258		- </div>
259		- <ul className="user-check-list">
260		- <div className="flex-start">
261		- <input type="text" />
262		- <label htmlFor=""></label>
263		- </div>
264		- </ul>
265		- </div>
266		- </div>
267		- <div>
268		- <Button
269		- className={"btn-100 green-btn"}
270		- btnName={"등록"}
271		- onClick={closeModal}
	134	+ </div >
	135	+ <Table
	136	+ className={"senior-table"}
	137	+ head={thead}
	138	+ contents={content}
	139	+ contentKey={key}
272	140	/>
	141	+
273	142	</div>
274	143	</div>
275		- </Modal>
276		- <div className="flex">
277		- <div className="tab-container">
278		- <div className="category">
279		- <ul>올잇메디 <Button
280		- className={"category-btn"}
281		- btnName={"관리기관 추가"}
282		- onClick={closeModal}
283		- />
284		- <li>서구청<Button
285		- className={"category-btn"}
286		- btnName={"시행기관 추가"}
287		- onClick={closeModal}
288		- />
289		- <ul>
290		- <li>A복지관</li>
291		- <li>B복지관</li>
292		- </ul>
293		- </li>
294		- <li>보훈병원<Button
295		- className={"category-btn"}
296		- btnName={"시행기관 추가"}
297		- onClick={closeModal}
298		- /></li>
299		- <ul>
300		- <li>
301		- 대구보훈병원
302		- </li>
303		- </ul>
304		- <li>관리기관<Button
305		- className={"category-btn"}
306		- btnName={"시행기관 추가"}
307		- onClick={closeModal}
308		- />
309		- <ul>
310		- <li>시행기관1</li>
311		- <li>시행기관2</li>
312		- </ul>
313		- </li>
314		- </ul>
315		- </div>
316		- </div>
317		- <div className="tab-container">
318		- <ul className="tab-menu-mobile">
319		- <div>
320		- <SubTitle
321		- className="margin-bottom"
322		- subtitle={"사용자 선택"}
323		- explanation={"사용자 별로 선택 후 관리할 수 있습니다. "}
324		- />
325		- </div>
326		- <select name="" id="" style={{ width: "100%" }}>
327		- <option value="사용자선택">보호자</option>
328		- <option value="사용자선택">보호사</option>
329		- <option value="사용자선택">병원</option>
330		- <option value="사용자선택">지자체</option>
331		- <option value="사용자선택">관리자</option>
332		- </select>
333		- </ul>
334		- <ul className="tab-menu">
335		- {data.map((item) => (
336		- <li
337		- key={item.id}
338		- className={index === item.id ? "active" : null}
339		- onClick={() => setIndex(item.id)}
340		- >
341		- {item.title}
342		- </li>
343		- ))}
344		- </ul>
345		- <div className="content-wrap">
346		- <div className="search-management flex-end margin-bottom2">
347		- <select name="management-agency">
348		- <option value="기관전체">기관전체</option>
349		- <option value="대구보훈병원">대구보훈병원</option>
350		- <option value="군위군청">군위군청</option>
351		- </select>
352		- <select>
353		- <option value="이름">이름</option>
354		- <option value="아이디">아이디</option>
355		- </select>
356		- <input type="text" />
357		- <Button
358		- className={"btn-small gray-btn"}
359		- btnName={"검색"}
360		- onClick={() => navigate("/SeniorInsert")}
361		- />
362		- </div>
363		- <ul className="tab-content">
364		- {data
365		- .filter((item) => index === item.id)
366		- .map((item) => (
367		- <li>{item.description}</li>
368		- ))}
369		- </ul>
370		- </div>
371		- </div>
372		- </div >
	144	+ </div>
373	145	</main>
374	146	);
375	147	}

...	...	@@ -6,26 +6,21 @@
6	6	import { useNavigate } from "react-router";
7	7
8	8	export default function EquipmentManagementSelect() {
9		- const [modalOpen, setModalOpen] = React.useState(false);
10		- const openModal = () => {
11		- setModalOpen(true);
12		- };
13		- const closeModal = () => {
14		- setModalOpen(false);
15		- };
16	9	const navigate = useNavigate();
17	10	const thead1 = [
18	11	"No",
19	12	"장비명",
20	13	"시리얼 넘버",
21		- "입고일자",
	14	+ "기기 상태",
	15	+ "구매일",
22	16	"사용여부",
23		- "보유 기관",
	17	+ "관리",
24	18	];
25	19	const key1 = [
26	20	"No",
27	21	"equipment_name",
28	22	"serialNumber",
	23	+ "work",
29	24	"name",
30	25	"use",
31	26	"management",];
...	...	@@ -34,60 +29,35 @@
34	29	No: 1,
35	30	equipment_name: "스마트약상자",
36	31	serialNumber: "ABCD-1",
37		- name: "2022.12.02",
38		- use: "사용",
39		- management: "A복지관"
40		- },
41		- {
42		- No: 2,
43		- equipment_name: "스마트약상자",
44		- serialNumber: "ABCD-1",
45		- name: "2022.12.02",
46		- use: "미사용",
47		- management: "B복지관"
48		- },
49		- ];
50		- const thead3 = [
51		- "No",
52		- "장비명",
53		- "시리얼 넘버",
54		- "입고일자",
55		- "사용여부",
56		- "납품 기관",
57		- ];
58		- const key3= [
59		- "No",
60		- "equipment_name",
61		- "serialNumber",
62		- "name",
63		- "use",
64		- "management",];
65		- const content3 = [
66		- {
67		- No: 1,
68		- equipment_name: "스마트약상자",
69		- serialNumber: "ABCD-1",
	32	+ work: "양호",
70	33	name: "2022.12.02",
71	34	use: "사용",
72	35	management: (
73	36	<Button
74	37	className={"btn-small gray-btn"}
75		- btnName={"선택"}
76		- onClick={openModal}
	38	+ btnName={"상세보기"}
	39	+ onClick={() => {
	40	+ navigate("/EquipmentManagementSelectOne");
	41	+ }}
77	42	/>
78		- )
	43	+ ),
79	44	},
80	45	{
81	46	No: 2,
82	47	equipment_name: "스마트약상자",
83	48	serialNumber: "ABCD-1",
	49	+ work: "불량",
84	50	name: "2022.12.02",
85	51	use: "미사용",
86		- management: (<Button
87		- className={"btn-small gray-btn"}
88		- btnName={"선택"}
89		- onClick={openModal}
90		- />)
	52	+ management: (
	53	+ <Button
	54	+ className={"btn-small gray-btn"}
	55	+ btnName={"상세보기"}
	56	+ onClick={() => {
	57	+ navigate("/EquipmentManagementSelectOne");
	58	+ }}
	59	+ />
	60	+ ),
91	61	},
92	62	];
93	63	const thead2 = [
...	...	@@ -96,7 +66,7 @@
96	66	"시리얼 넘버",
97	67	"대여일",
98	68	"배터리 잔량",
99		- "보유기관",
	69	+ "사용자",
100	70	];
101	71	const key2 = [
102	72	"No",
...	...	@@ -113,29 +83,7 @@
113	83	serialNumber: "ABCD-1",
114	84	name: "2022.12.02",
115	85	battery: "10%",
116		- management: "A복지관",
117		-
118		- },
119		- ];
120		- const thead4 = [
121		- "No",
122		- "기관명",
123		- "선택하기",
124		- ];
125		- const key4 = [
126		- "No",
127		- "equipment_name",
128		- "serialNumber",
129		- ];
130		- const content4 = [
131		- {
132		- No: 1,
133		- equipment_name: "A복지관",
134		- serialNumber: (<Button
135		- className={"btn-small gray-btn"}
136		- btnName={"선택"}
137		- />)
138		-
	86	+ management: "김복남"
139	87	},
140	88	];
141	89
...	...	@@ -144,7 +92,7 @@
144	92	const data = [
145	93	{
146	94	id: 1,
147		- title: "장비 전체(205)",
	95	+ title: "장비 전체",
148	96	description: (
149	97	<div>
150	98	<div className="btn-wrap flex-end margin-bottom ">
...	...	@@ -168,21 +116,21 @@
168	116	},
169	117	{
170	118	id: 2,
171		- title: "재고 장비(5)",
	119	+ title: "미사용 장비",
172	120	description: (
173	121	<div>
174	122	<Table
175	123	className={"caregiver-user"}
176		- head={thead3}
177		- contents={content3}
178		- contentKey={key3}
	124	+ head={thead1}
	125	+ contents={content1}
	126	+ contentKey={key1}
179	127	/>
180	128	</div>
181	129	),
182	130	},
183	131	{
184	132	id: 3,
185		- title: "납품 장비(200)",
	133	+ title: "사용중인 장비",
186	134	description: (
187	135	<Table
188	136	className={"caregiver-user"}
...	...	@@ -196,25 +144,7 @@
196	144	const [index, setIndex] = React.useState(1);
197	145	return (
198	146	<main>
199		- <Modal open={modalOpen} close={closeModal} header="'김복남'님의 가족">
200		- <div className="board-wrap">
201		- <div>
202		- <Table
203		- className={"caregiver-user"}
204		- head={thead4}
205		- contents={content4}
206		- contentKey={key4}
207		- />
208		- </div>
209		- <div>
210		- <Button
211		- className={"btn-100 green-btn"}
212		- btnName={"닫기"}
213		- onClick={closeModal}
214		- />
215		- </div>
216		- </div>
217		- </Modal>
	147	+
218	148	<div className="tab-container">
219	149	<ul className="tab-menu">
220	150	{data.map((item) => (

...	...	@@ -49,8 +49,18 @@
49	49	return (
50	50	<main>
51	51	<div className="content-wrap">
52		- <ContentTitle contentTitle={"장비 상세 목록"} />
	52	+ <ContentTitle contentTitle={"장비 대여 상세 목록"} />
53	53	<div className="board-wrap">
	54	+ <div className="btn-wrap flex-end margin-bottom ">
	55	+ <Button
	56	+ className={"btn-small green-btn"}
	57	+ btnName={"장비 대여"}
	58	+ onClick={() => {
	59	+ navigate("/EquipmentRentalInsert");
	60	+ }}
	61	+ />
	62	+ <Button className={"btn-small green-btn"} btnName={"삭제"} />
	63	+ </div>
54	64	<Table className="equipment-detail" head={thead} contents={content} contentKey={key} />
55	65	</div>
56	66	</div>

...	...	@@ -12,59 +12,59 @@
12	12	"No",
13	13	"장비명",
14	14	"시리얼 넘버",
15		- "기관명",
	15	+ "사용자명",
	16	+ "사용자관리번호",
	17	+ "위치",
16	18	"요청일자",
17	19	"교환/반납",
18		- "처리예정일",
19	20	];
20	21	const key = [
21	22	"No",
22	23	"equipment_name",
23	24	"serialNumber",
24	25	"name",
	26	+ "management_number",
	27	+ "address",
25	28	"date",
26	29	"period_of_use",
27		- "visit"
28	30	];
29	31	const content = [
30	32	{
31	33	No: 1,
32	34	equipment_name: "스마트약상자",
33	35	serialNumber: "ABCD-1",
34		- name: "A복지관",
	36	+ name: "김복남",
	37	+ management_number: 2022080101,
	38	+ address: "경상북도 군위군 삼국유사면",
35	39	date: "2023-01-27",
36	40	period_of_use: "교환",
37		- visit:(<div>
38		- <input type="date" />
39		- </div>)
40	41	},
41	42	{
42	43	No: 2,
43	44	equipment_name: "스마트약상자",
44	45	serialNumber: "ABCD-1",
45		- name: "B복지관",
	46	+ name: "홍길동",
	47	+ management_number: 2022080102,
	48	+ address: "경상북도 군위군 군위읍",
46	49	date: "2023-01-27",
47	50	period_of_use: "반납",
48		- visit:(<div>
49		- <input type="date" />
50		- </div>)
51	51	},
52	52	];
53	53	return (
54	54	<main>
55	55	<div className="content-wrap">
56	56	<ContentTitle contentTitle={"장비 반납/교환 요청"} />
57		- <div className="board-wrap">
58		- {/*<div className="btn-wrap flex-end margin-bottom">
	57	+ <div className="board-wrap">
	58	+ <div className="btn-wrap flex-end margin-bottom">
59	59	<Button
60	60	className={"btn-small green-btn"}
61	61	btnName={"등록"}
62	62	onClick={() => {
63		- navigate("/SeniorInsert");
	63	+ navigate("/ServiceInsert");
64	64	}}
65	65	/>
66	66	<Button className={"btn-small green-btn "} btnName={"삭제"} />
67		- </div> */}
	67	+ </div>
68	68	<Table className="equipment-detail" head={thead} contents={content} contentKey={key} />
69	69	</div>
70	70	</div>

...	...	@@ -18,7 +18,7 @@
18	18	<Join />
19	19	) : (
20	20	<div className="container row flex-center join-login">
21		- <div className="login-form">
	21	+ <div className="login-form-management">
22	22	<div>
23	23	<h3>로그인</h3>
24	24	<div className="login-inner">

...	...	@@ -1,153 +1,154 @@
1		-import React from "react";
	1	+import React,{useState} from "react";
2	2	import Title from "../../component/Title.jsx";
3		-import Table from "../../component/Table.jsx";
4	3	import Map from "../../component/chart/Map.jsx";
5		-import Chart1 from "../../component/chart/Chart1.jsx";
	4	+import Chart5 from "../../component/chart/Chart5.jsx";
6	5	import Chart2 from "../../component/chart/Chart2.jsx";
7		-import AddCircleIcon from '@mui/icons-material/AddCircle';
8		-import PersonIcon from '@mui/icons-material/Person';
9		-
	6	+import Donut1 from "../../component/chart/Donut1.jsx";
	7	+import RowChart from "../../component/chart/RowChart.jsx";
	8	+import AddCircleIcon from "@mui/icons-material/AddCircle";
	9	+import BatteryCharging20Icon from '@mui/icons-material/BatteryCharging20';
	10	+import DeviceThermostatIcon from '@mui/icons-material/DeviceThermostat';
	11	+import MedicationIcon from '@mui/icons-material/Medication';
	12	+import ElderlyIcon from '@mui/icons-material/Elderly';
10	13
11	14	export default function Main2() {
	15	+ const [cityName, setCityName] = useState("군위군");
	16	+ // const tableHead = ["방문날짜", "방문사유", "방문 상세 사유"];
	17	+ // const Key = ["date", "reason", "detail_reason"];
	18	+ // const content = [
	19	+ // {
	20	+ // date: "2022.12.12",
	21	+ // reason: "어르신케어",
	22	+ // detail_reason: "하루동안 미복약으로 방문. 방문시 두통을 호소하셔 병원 동행",
	23	+ // },
	24	+ // ];
12	25
13		- const tableHead = [
14		- "연번",
15		- "계약업체명",
16		- "반납/교환",
17		- "담당자 연락처",
18		- "주소",
19		- ];
20		- const Key = [
21		- "name",
22		- "level_of_care",
23		- "birth",
24		- "phone",
25		- "address",
26		- ];
27		- const content = [
28		- {
29		- name: "1",
30		- level_of_care: "A복지관",
31		- birth: "교환",
32		- phone: "010-1234-5678",
33		- address: "경상북도 군위군 삼국유사면",
34		- },
35		- {
36		- name: "2",
37		- level_of_care: "B병원",
38		- birth: "반납",
39		- phone: "010-3333-3333",
40		- address: "경상북도 군위군 삼국유사면",
41		- },
42		- {
43		- name: "3",
44		- level_of_care: "C복지관",
45		- birth: "교환",
46		- phone: "010-3333-4444",
47		- address: "경상북도 군위군 삼국유사면",
48		- },
49		- {
50		- name: "4",
51		- level_of_care: "D복지관",
52		- birth: "교환",
53		- phone: "010-3333-5555",
54		- address: "경상북도 군위군 삼국유사면",
55		- },
56		- {
57		- name: "5",
58		- level_of_care: "E복지관",
59		- birth: "반납",
60		- phone: "010-3333-6666",
61		- address: "경상북도 군위군 삼국유사면",
62		- },
63		- ];
64		- const tableHead2 = [
65		- "연번",
66		- "계약업체명",
67		- "반납/교환",
68		- "담당자 연락처",
69		- "주소",
70		- ];
71		- const Key2 = [
72		- "name",
73		- "level_of_care",
74		- "birth",
75		- "phone",
76		- "address",
77		- ];
78		- const content2 = [
79		- {
80		- name: "1",
81		- level_of_care: "A복지관",
82		- birth: "교환",
83		- phone: "010-1234-5678",
84		- address: "경상북도 군위군 삼국유사면",
85		- },
86		- {
87		- name: "2",
88		- level_of_care: "B병원",
89		- birth: "반납",
90		- phone: "010-3333-3333",
91		- address: "경상북도 군위군 삼국유사면",
92		- },
93		- {
94		- name: "3",
95		- level_of_care: "C복지관",
96		- birth: "교환",
97		- phone: "010-3333-4444",
98		- address: "경상북도 군위군 삼국유사면",
99		- },
100		- {
101		- name: "4",
102		- level_of_care: "D복지관",
103		- birth: "교환",
104		- phone: "010-3333-5555",
105		- address: "경상북도 군위군 삼국유사면",
106		- },
107		- {
108		- name: "5",
109		- level_of_care: "E복지관",
110		- birth: "반납",
111		- phone: "010-3333-6666",
112		- address: "경상북도 군위군 삼국유사면",
113		- },
114		- ];
	26	+ // //노인리스트
	27	+ // const tableHead2 = [
	28	+ // "이름",
	29	+ // "요양등급",
	30	+ // "생년월일",
	31	+ // "연락처",
	32	+ // "주소",
	33	+ // "기저질환",
	34	+ // ];
	35	+ // const Key2 = [
	36	+ // "name",
	37	+ // "level_of_care",
	38	+ // "birth",
	39	+ // "phone",
	40	+ // "address",
	41	+ // "management_number",
	42	+ // ];
	43	+ // const content2 = [
	44	+ // {
	45	+ // name: "김복남",
	46	+ // level_of_care: "1등급",
	47	+ // birth: "1948.11.15",
	48	+ // phone: "010-1234-5678",
	49	+ // address: "경상북도 군위군 삼국유사면",
	50	+ // management_number: "혈압",
	51	+ // },
	52	+ // {
	53	+ // name: "홍길동",
	54	+ // level_of_care: "2등급",
	55	+ // birth: "1948.05.18",
	56	+ // phone: "010-3333-3333",
	57	+ // address: "경상북도 군위군 삼국유사면",
	58	+ // management_number: "당뇨",
	59	+ // },
	60	+ // {
	61	+ // name: "김말순",
	62	+ // level_of_care: "3등급",
	63	+ // birth: "1939.03.19",
	64	+ // phone: "010-3333-4444",
	65	+ // address: "경상북도 군위군 삼국유사면",
	66	+ // management_number: "천식",
	67	+ // },
	68	+ // {
	69	+ // name: "신정길",
	70	+ // level_of_care: "1등급",
	71	+ // birth: "1945.05.19",
	72	+ // phone: "010-3333-5555",
	73	+ // address: "경상북도 군위군 삼국유사면",
	74	+ // management_number: "폐렴",
	75	+ // },
	76	+ // {
	77	+ // name: "김정남",
	78	+ // level_of_care: "1등급",
	79	+ // birth: "1945.05.19",
	80	+ // phone: "010-3333-6666",
	81	+ // address: "경상북도 군위군 삼국유사면",
	82	+ // management_number: "인지장애",
	83	+ // },
	84	+ // ];
115	85
116	86	return (
117	87	<main>
118		- <div className="main-grid-agency">
119		- <ul className="content-box statistics flex combine-left">
120		- <li>
121		- <p>전체 장비 대여수</p>
122		- <p>200개</p>
	88	+ <div className="main-grid-government">
	89	+ <ul className="content-box statistics" background="#f7acba">
	90	+ <li>
	91	+ <p><ElderlyIcon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#bf0629", borderRadius:"50px" }}/></p>
	92	+ <p>{cityName} 전체 대상자</p>
	93	+ <p>400</p>
123	94	</li>
	95	+ </ul>
	96	+ <ul className="content-box statistics" background="#8ef3d1">
124	97	<li>
125		- <p>계약 업체 수</p>
126		- <p>20개 </p>
127		- </li>
128		- <li>
129		- <p>교환 예정 장비 수</p>
130		- <p>3개</p>
131		- </li>
132		- <li>
133		- <p>반납 예정 장비 수</p>
134		- <p>10개</p>
	98	+ <p><MedicationIcon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#076143", borderRadius:"50px" }}/></p>
	99	+ <p>{cityName} 미복약 위험 대상자</p>
	100	+ <p>400</p>
135	101	</li>
136	102	</ul>
137		- <div className="content-box combine-left">
138		- <div className="flex margin-bottom">
139		- <Title title={"금일 반납/교환 예정 리스트"} explanation={"장비 반납/교환 리스트를 확인하세요."} />
	103	+ <ul className="content-box statistics" background="#ebe7b9" >
	104	+ <li>
	105	+ <p><DeviceThermostatIcon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#f1de05", borderRadius:"50px" }}/></p>
	106	+ <p>{cityName} 댁내 온도 위험 대상자</p>
	107	+ <p>400</p>
	108	+ </li>
	109	+ </ul>
	110	+ <ul className="content-box statistics" background="#5f9af3">
	111	+ <li>
	112	+ <p><BatteryCharging20Icon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#5f9af3", borderRadius:"50px" }}/></p>
	113	+ <p>{cityName} 배터리 부족 대상자 </p>
	114	+ <p>400</p>
	115	+ </li>
	116	+ </ul>
	117	+ <div className="content-box combine-all-government combine-bottom-government2">
	118	+ <div className="flex">
	119	+ <Title title={`${cityName} 약상자 사용 현황`} explanation={"약상자 사용자의 데이터 차트가 보여집니다."} />
140	120	<AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
141	121	</div>
142		- <Table head={tableHead} contents={content} contentKey={Key} />
143		- </div>
144		- <div className="content-box combine-left">
145		- <div className="flex margin-bottom">
146		- <Title title={"금주 반납/교환 예정 리스트"} explanation={"장비 반납/교환 리스트를 확인하세요."} />
	122	+ <Chart5 />
	123	+ </div>
	124	+ <div className="content-box combine-left-government combine-bottom-government2 main-main">
	125	+ <div className="flex">
	126	+ <Title title={"케어 노인 분포 현황"} explanation={"지역 선택 시 해당 지역의 미복약 노인리스트가 보여집니다."} />
147	127	<AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
148	128	</div>
149		- <Table head={tableHead2} contents={content2} contentKey={Key2} />
150		- </div>
	129	+ <Map setCityName={setCityName} />
	130	+ </div>
	131	+ <div className="content-box combine-left-government2">
	132	+ <div className="flex">
	133	+ <Title title={`${cityName} 복용률 평균`} explanation={"해당 지역의 대상자 복용률이 그래프로 보여집니다."} />
	134	+ <AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
	135	+ </div>
	136	+ <Chart2 />
	137	+ </div>
	138	+ <div className="content-box combine-right-government2">
	139	+ <div className="flex">
	140	+ <Title title={`${cityName} 월별 방문 횟수`} explanation={"최근 6개월간 방문 횟수의 변화를 확인할 수 있습니다."} />
	141	+ <AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
	142	+ </div>
	143	+ <RowChart />
	144	+ </div>
	145	+ <div className="content-box combine-right-government">
	146	+ <div className="flex">
	147	+ <Title title={`${cityName} 노인 요양등급`} explanation={""} />
	148	+ <AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
	149	+ </div>
	150	+ <Donut1 />
	151	+ </div>
151	152	</div>
152	153	</main>
153	154	);

...	...	@@ -2,7 +2,7 @@
2	2	import Table from "../../component/Table.jsx";
3	3	import Button from "../../component/Button.jsx";
4	4	import { useNavigate } from "react-router";
5		-import DetailSearch from "./../../component/DetailSearch.jsx";
	5	+import DetailSearch from "../../component/AgencySearch.jsx";
6	6	import ContentTitle from "../../component/ContentTitle.jsx";
7	7	import SubTitle from "../../component/SubTitle.jsx";
8	8
...	...	@@ -14,10 +14,12 @@
14	14	<input type="checkbox" />,
15	15	"No",
16	16	"사용자관리번호",
17		- "관리기관",
	17	+ "요양 등급",
18	18	"이름",
19		- "지역",
	19	+ "생년월일",
20	20	"연락처",
	21	+ "주소",
	22	+ "기저질환",
21	23	];
22	24	const key = [
23	25	"",
...	...	@@ -27,34 +29,31 @@
27	29	"name",
28	30	"birth",
29	31	"phone",
	32	+ "address",
	33	+ "underlying_disease",
30	34	];
31	35	const content = [
32	36	{
33	37	"": <input type="checkbox" />,
34	38	No: 1,
35	39	management_number: 2022080101,
36		- level_of_care: "A복지관",
	40	+ level_of_care: "1등급",
37	41	name: "김복남",
38		- birth: "대구",
39		- phone: "010-1234-1234"
	42	+ birth: "1948.11.15",
	43	+ phone: "010-1234-5678",
	44	+ address: "경상북도 군위군 삼국유사면",
	45	+ underlying_disease: "고혈압",
40	46	},
41	47	{
42	48	"": <input type="checkbox" />,
43		- No: 1,
44		- management_number: 2022080101,
45		- level_of_care: "A복지관",
46		- name: "김복남",
47		- birth: "대구",
48		- phone: "010-1234-1234"
49		- },
50		- {
51		- "": <input type="checkbox" />,
52		- No: 1,
53		- management_number: 2022080101,
54		- level_of_care: "A복지관",
55		- name: "김복남",
56		- birth: "대구",
57		- phone: "010-1234-1234"
	49	+ No: 2,
	50	+ management_number: 2022080102,
	51	+ level_of_care: "2등급",
	52	+ name: "홍길동",
	53	+ birth: "1948.05.18",
	54	+ phone: "010-3333-4444",
	55	+ address: "경상북도 군위군 군위읍",
	56	+ underlying_disease: "폐렴",
58	57	},
59	58	];
60	59
...	...	@@ -92,16 +91,6 @@
92	91	<DetailSearch />
93	92	<div className="board-wrap">
94	93	<SubTitle className="margin-bottom" explanation={"대상자 클릭 시 상세페이지로 이동합니다."} />
95		- <div className="btn-wrap flex-end margin-bottom">
96		- <Button
97		- className={"btn-small green-btn"}
98		- btnName={"등록"}
99		- onClick={() => {
100		- navigate("/SeniorInsert");
101		- }}
102		- />
103		- <Button className={"btn-small green-btn"} btnName={"삭제"} />
104		- </div>
105	94	<Table
106	95	className={"senior-table"}
107	96	head={thead}
...	...	@@ -111,7 +100,16 @@
111	100	navigate("/SeniorSelectOne");
112	101	}}
113	102	/>
114		-
	103	+ <div className="btn-wrap flex-end">
	104	+ <Button
	105	+ className={"btn-small green-btn"}
	106	+ btnName={"등록"}
	107	+ onClick={() => {
	108	+ navigate("/SeniorInsert");
	109	+ }}
	110	+ />
	111	+ <Button className={"btn-small green-btn"} btnName={"삭제"} />
	112	+ </div>
115	113	</div>
116	114	</div>
117	115	</div>

...	...	@@ -1,90 +1,117 @@
1	1	import React from "react";
	2	+import Table from "../../component/Table.jsx";
2	3	import Button from "../../component/Button.jsx";
3	4	import { useNavigate } from "react-router";
	5	+import DetailSearch from "../../component/AgencySearch.jsx";
4	6	import ContentTitle from "../../component/ContentTitle.jsx";
5		-import PersonIcon from '@mui/icons-material/Person';
	7	+import SubTitle from "../../component/SubTitle.jsx";
6	8
7		-export default function SeniorSelectOne() {
	9	+export default function SeniorSelect() {
8	10	const navigate = useNavigate();
	11	+
	12	+ //게시판
	13	+ const thead = [
	14	+ "No",
	15	+ "소속기관명",
	16	+ "이름",
	17	+ "연락처",
	18	+ "주소",
	19	+ "담당 대상자(어르신) 인원",
	20	+ ];
	21	+ const key = [
	22	+ "No",
	23	+ "center",
	24	+ "name",
	25	+ "phone",
	26	+ "address",
	27	+ "worker",
	28	+ ];
	29	+ const content = [
	30	+ {
	31	+ No: 1,
	32	+ center: "A복지관",
	33	+ name: "홍길동",
	34	+ phone: "010-1234-1234",
	35	+ address: "경상북도 군위군 삼국유사면",
	36	+ worker: "10명"
	37	+ },
	38	+ {
	39	+ No: 2,
	40	+ center: "A복지관",
	41	+ name: "홍길동",
	42	+ phone: "010-1234-1234",
	43	+ address: "경상북도 군위군 삼국유사면",
	44	+ worker: "5명"
	45	+ },
	46	+ {
	47	+ No: 3,
	48	+ center: "A복지관",
	49	+ name: "홍길동",
	50	+ phone: "010-1234-1234",
	51	+ address: "경상북도 군위군 삼국유사면",
	52	+ worker: "8명"
	53	+ },
	54	+
	55	+ ];
	56	+
	57	+ //select option 동적 생성
	58	+ // const optionList = () => {
	59	+ // let year = [];
	60	+ // let month = [];
	61	+ // let days = [];
	62	+ // let currentDate = new Date();
	63	+ // let currentYear = currentDate.getFullYear();
	64	+
	65	+ // for (let i = 1910; i < currentYear.length; i++) {
	66	+ // year.push(i);
	67	+ // }
	68	+
	69	+ // for (let j = 1; i < 13; j++) {
	70	+ // month.push(j);
	71	+ // }
	72	+
	73	+ // for (let k = 1; i < 32; k++) {
	74	+ // days.push(k);
	75	+ // }
	76	+ // return year, month, days;
	77	+ // };
	78	+
	79	+ // React.useEffect(() => {
	80	+ // optionList();
	81	+ // }, []);
	82	+
9	83	return (
10	84	<main>
11		- <div className="content-wrap row">
12		- <ContentTitle contentTitle={"대상자 상세 프로필"}/>
13		- <div>
14		- <table className="margin-bottom senior-detail">
15		- <tbody>
16		- <tr>
17		- <th>이름</th>
18		- <td>
19		- <span>김복남</span>
20		- </td>
21		- <th>사용자등록번호</th>
22		- <td>
23		- <span>202280102</span>
24		- </td>
25		- </tr>
26		- <tr>
27		- <th>생년월일</th>
28		- <td>
29		- <span>1948.11.15</span>
30		- </td>
31		- <th>연락처</th>
32		- <td>
33		- <span>010-1234-5678</span>
34		- </td>
35		- </tr>
36		- <tr>
37		- <th>요양등급</th>
38		- <td>
39		- <span>1등급</span>
40		- </td>
41		- <th>성별</th>
42		- <td>
43		- <span>남</span>
44		- </td>
45		- </tr>
46		- <tr>
47		- <th>주소</th>
48		- <td>
49		- <span>경상북도 군위군 삼국유사면</span>
50		- </td>
51		- <th>보호자 비상연락망</th>
52		- <td>
53		- <span>010-1234-5678</span>
54		- </td>
55		- </tr>
56		- <tr>
57		- <th>복용중인 약</th>
58		- <td colSpan={3}>
59		- <span>혈압약</span>
60		- </td>
61		- </tr>
62		- <tr>
63		- <th>기저질환</th>
64		- <td colSpan={3} style={{height:"300px"}}>
65		- <span>고혈압</span>
66		- </td>
67		- </tr>
68		- </tbody>
69		- </table>
70		- <div className="btn-wrap flex-center">
71		- <Button
72		- className={"btn-large gray-btn"}
73		- btnName={"이전"}
74		- onClick={() => {
75		- navigate("/SeniorSelect");
76		- }}
77		- />
78		- <Button
79		- className={"btn-large green-btn"}
80		- btnName={"수정"}
81		- onClick={() => {
82		- navigate("/SeniorInsert");
83		- }}
84		- />
	85	+ <div className="content-wrap">
	86	+ <ContentTitle contentTitle={"복지사 조회"} />
	87	+ <div>
	88	+ <div className="board-wrap">
	89	+ <div className="flex">
	90	+ <SubTitle className="margin-bottom" explanation={"기관 클릭 시 상세페이지로 이동합니다."} />
	91	+ <div className="btn-wrap flex-end margin-bottom ">
	92	+ <Button
	93	+ className={"btn-small green-btn"}
	94	+ btnName={"등록"}
	95	+ onClick={() => {
	96	+ navigate("/SeniorInsert");
	97	+ }}
	98	+ />
	99	+ <Button className={"btn-small green-btn"} btnName={"삭제"} />
	100	+ </div>
	101	+ </div >
	102	+ <Table
	103	+ className={"senior-table"}
	104	+ head={thead}
	105	+ contents={content}
	106	+ contentKey={key}
	107	+ onClick={() => {
	108	+ navigate("/SeniorSelectOne");
	109	+ }}
	110	+ />
	111	+
	112	+ </div>
85	113	</div>
86	114	</div>
87		- </div>
88		- </main>
	115	+ </main>
89	116	);
90	117	}

Delete comment