Commit @697873ed03100f2d89f94ba6cdba3ce4bd47c709

cd6e5cd

697873e

.gitignore

--- .gitignore

+++ .gitignore

...	...	@@ -1,2 +1,3 @@
1	1	client/build/
2		-server/logs/ (No newline at end of file)
	2	+server/logs/
	3	+node_modules

cd6e5cd

697873e

client/resources/css/common.css

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

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


 
 /* layout 공통 */
 textarea{border: 1px solid #d8d3c7; border-radius: 5px;}
+em{font-style: normal;}
+main img{margin-right: 1rem;}
 /* grid */
 
 .main-grid-admin {

   height: 100%;
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
-  grid-template-rows: 0.1fr 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr;
-  gap: 1rem;
+  grid-template-rows: 0.1fr;
+  gap: 3rem;
 }
 .main-grid-hospital {
   height: 100%;

   display: grid;
   grid-template-columns: 0.9fr 0.9fr;
   grid-template-rows: 0.1fr 0.5fr 0.5fr;
-  gap: 1rem;
+  gap: 2rem;
 }
 
 .statistics-grid {

 .combine-left-government2 {
   grid-column: 1/4;
 }
+.combine-left-government3 {
+  grid-column: 1/5;
+}
 .combine-right {
   grid-column: 3/4;
 }

cd6e5cd

697873e

client/resources/css/layout.css

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

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


   background-color: white;
   grid-area: header;
   height: 87px;
+  border-bottom: 1px solid #cccccc;
+  
 }
 
 .page-title span {

   height: 100%;
   background-color: #f2f0eb;
   grid-area: nav;
+  border-right: 1px solid #cccccc;
 }
 .nav{
   position: relative;

   background: #f25430;
   border-radius: 30px;
   font-size: 1.5rem;
+  font-weight: 600;
   color: #ffffff;
   display: flex;
   align-items: center;
-  margin-right: 2rem;
+  margin: 0 1rem;
   cursor: pointer;
 }
+.info-id span, .logout span{
+  margin: 0 auto;
+}
+.bottom-section{position: absolute; padding: 0 2rem; bottom: 3rem;}
 .logout{background: #f26e50;}
 #pages {
   max-width: 100%;
   height: 100%;
   padding: 3rem;
-  background-color: #f2f0eb;
+  background-color: #f4f4f2;
   grid-area: main;
+  box-shadow: 0px 11px 12px -10px rgb(0 0 0 / 20%) inset;
 }
 
 

cd6e5cd

697873e

client/resources/css/main.css

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

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


   font-family: 'AuctionGothic_Medium';
 }
 header > div{height: 100%;}
-header .page-title span {
-  font-size: 1.7rem;
-  margin: 0 auto;
-}
 .join-btn{
   background-color: transparent;
 }
-.react-calendar{width: 90%; }
 .highlight{
   font-weight: 900;
   background-color: #18924e;
 }
 
-/* 기관조회 */
+/* 시행기관 장비관리 리스트 */
+
+.visitlist{height: 55vh;}
+.visitlist .agency-visitlist{border: 0;}
+.visitlist .agency-visitlist th{background-color: #fdede9; }
+.agency-calendar .react-calendar{height: 10vh;}
+.agency-calendar .react-calendar__month-view__weekdays{display: none !important;}
+.agency-calendar .react-calendar__month-view__days{flex-wrap: unset !important; padding: 0 0 3rem 0;}
+.agency-calendar .react-calendar__month-view__days__day{flex: 0 0 2.85% !important; padding: 1rem 0;}
+
+/* .agency-calendar .react-calendar__month-view__days{overflow: hidden;} */
 
 /* Q&A */
-.title{text-decoration: underline; cursor: pointer;}
 .question-select input{width: 3%;}
 .question-select label{width: 10%;}
 .question-select select{width: 16%; height: 3.7rem;}

 .questionnaire-table input{width: 9%;}
 /* 카테고리 기관 추가*/
 .explain-table th{background: #ffffff;}
-.react-calendar{width: 100%;}
 .total p{font-size: 1.6rem; font-weight: 600;}
 .total{color: #733c1d; }
 .total-equip::before{

 .statistics-govern li p:nth-of-type(3)::after {
   content: "명";
 }
+.statistics-agency{border-radius: 1.5rem; box-shadow: 1px 1px 18px 1px rgb(0 0 0 / 13%);}
 .statistics-agency li {
-  position: relative;
-  padding-left: 5rem;
-  text-align: center;
+  padding: 0 2rem;
 }
-
-.statistics-agency li p:nth-of-type(1) {
-  position: absolute;
-  left: 0;
+.statistics-agency li .text{padding-left: 1rem; width: 100%;}
+.statistics-agency li div p:nth-of-type(1) {
+  font-size: 1.8rem;
+  font-weight: bold;
+  color: #ed724a;
 }
-
-.statistics-agency li p:nth-of-type(2) {
-  padding-bottom: 0.5rem;
-  font-size: 1.6rem;
+.statistics-agency li div p:nth-of-type(2) {
+  font-size: 2.5rem;
   font-weight: bold;
 }
-.statistics-agency li p:nth-of-type(3) {
-  font-size: 1.6rem;
-  font-weight: bold;
-}
-
-.statistics-agency li p:nth-of-type(3)::after {
+.statistics-agency li div p:nth-of-type(2)::after{
   content: "명";
+  font-size: 1.5rem;
+  color: #cbc9c9;
 }
 .statistics-guardian{height: 100%;}
+.guardian-medicine{height: 16vh;}
 .statistics-guardian li{
   padding: 1rem 3rem;
-  background: rgba(255, 254, 254, 0.5);
-  border-radius: 10px;
+  background: #ffffff;
+  border-radius: 20px;
   margin: 0 auto;
   margin-bottom: 1rem;
 }
-.statistics-guardian:nth-child(1) {
+/* .statistics-guardian:nth-child(1) {
   background: #fbe4e4;
 }
 

 }
 .statistics-guardian li p{
   padding: 0 2rem;
-}
+} */
 .statistics-guardian li:nth-child(2),
 .statistics-guardian li:nth-child(3),
 .statistics-guardian li:nth-child(4),

   font-weight: bold;
   margin-right: 2rem;
 }
+.main-guardian{margin-bottom: 3rem;}
 .red{color: red;}
 .main-battery-title span::after {
   content: " 님의";

   font-weight: 900;
 }
 .main-battery-title p{padding-right: 1rem;}
+.battery-wrap{height: 10rem;}
+.battery-img{position: relative; padding: 1.5rem 0 1.5rem 3rem;}
+.battery-img img{position: absolute; display: none; box-shadow: 1px 1px 14px 1px rgba(0, 0, 0, 0.15); border-radius: 20px;}
+.battery-img img.show{display: block; }
 .map svg {
   display: block;
 }

   font-weight: 500;
 }
 .battery p {
-  font-size: 3rem;
+  font-size: 2rem;
   font-weight: bold;
-  color: rgb(255, 121, 121);
   text-align: center;
   padding-right: 1rem;
 }
-
-.battery::after {
-  content: " 남았습니다.";
-  font-size: 1.6rem;
-  font-weight: 500;
-}
+.battery p:nth-child(3){font-size: 1.5rem; padding-top: 0.7rem;}
 
 #chartdiv1 {
   height: 22vh;
 }
 
 /* ------------------------------------------------보호자 */
+.react-calendar{width: 100%; border: none; height: 54vh;}
+.react-calendar__month-view__days{padding: 2rem 0;}
+.react-calendar__month-view__days button{padding: 2.5rem; border: 1px solid #fdede8; border-radius: 0;}
+.react-calendar__tile--active:enabled:hover, .react-calendar__tile--active:enabled:focus{background: #e26f49;}
+.react-calendar__tile--active{background: #e26f49;}
+.weather-info
+
+/* 보호자 복약 */
+.guardian-medicine  ul li{position: relative;}
+.guardian-medicine  ul li img{position: absolute; display: none;}
+.guardian-medicine  ul li img.show{display: block;}
+
 /* ------------------------------------- main page --------------------------------- */
 /* 사용자 정보*/
 .user-img {

 }
 
 /* 사용자 관리 */
-.tab-menu-mobile{display: none;} 
-.tab-menu {
+.tab-menu .tab-menu-agency{
   display: flex;
 }
-
+.tab-menu-agency li {
+  padding: 1rem 2rem;
+  margin-right: 0.2rem;
+  color: #733c1d;  
+  font-size: 1.6rem;
+  font-weight: bold;
+  text-align: center;
+}
+.tab-menu-agency li.active {
+  color: #f25430;
+  border-bottom: 2px solid #f25430;
+}
 .tab-menu li {
   padding: 1rem 2rem;
   margin-right: 0.2rem;

   text-align: center;
   box-shadow: 3px -2px 5px -2px rgb(0 0 0 / 20%);
 }
-
 .tab-menu li.active {
   background-color: #f25430;
   color: #ffffff;

697873e

client/resources/files/images/batteryAgency.png (Binary) (added)

+++ client/resources/files/images/batteryAgency.png

Binary file is not shown

697873e

client/resources/files/images/box.png (Binary) (added)

+++ client/resources/files/images/box.png

Binary file is not shown

697873e

client/resources/files/images/calendarBig.png (Binary) (added)

+++ client/resources/files/images/calendarBig.png

Binary file is not shown

697873e

client/resources/files/images/dinneroff.png (Binary) (added)

+++ client/resources/files/images/dinneroff.png

Binary file is not shown

697873e

client/resources/files/images/dinneron.png (Binary) (added)

+++ client/resources/files/images/dinneron.png

Binary file is not shown

697873e

client/resources/files/images/eightypercent.png (Binary) (added)

+++ client/resources/files/images/eightypercent.png

Binary file is not shown

697873e

client/resources/files/images/error.png (Binary) (added)

+++ client/resources/files/images/error.png

Binary file is not shown

697873e

client/resources/files/images/exchange.png (Binary) (added)

+++ client/resources/files/images/exchange.png

Binary file is not shown

697873e

client/resources/files/images/fortypercent.png (Binary) (added)

+++ client/resources/files/images/fortypercent.png

Binary file is not shown

697873e

client/resources/files/images/lunchoff.png (Binary) (added)

+++ client/resources/files/images/lunchoff.png

Binary file is not shown

697873e

client/resources/files/images/lunchon.png (Binary) (added)

+++ client/resources/files/images/lunchon.png

Binary file is not shown

697873e

client/resources/files/images/medicineAgency.png (Binary) (added)

+++ client/resources/files/images/medicineAgency.png

Binary file is not shown

697873e

client/resources/files/images/medicinebox.png (Binary) (added)

+++ client/resources/files/images/medicinebox.png

Binary file is not shown

697873e

client/resources/files/images/mornoff.png (Binary) (added)

+++ client/resources/files/images/mornoff.png

Binary file is not shown

697873e

client/resources/files/images/mornon.png (Binary) (added)

+++ client/resources/files/images/mornon.png

Binary file is not shown

697873e

client/resources/files/images/pullpercent.png (Binary) (added)

+++ client/resources/files/images/pullpercent.png

Binary file is not shown

697873e

client/resources/files/images/senior.png (Binary) (added)

+++ client/resources/files/images/senior.png

Binary file is not shown

697873e

client/resources/files/images/sixtypercent.png (Binary) (added)

+++ client/resources/files/images/sixtypercent.png

Binary file is not shown

697873e

client/resources/files/images/temperatureAgency.png (Binary) (added)

+++ client/resources/files/images/temperatureAgency.png

Binary file is not shown

697873e

client/resources/files/images/tool.png (Binary) (added)

+++ client/resources/files/images/tool.png

Binary file is not shown

697873e

client/resources/files/images/twentypercent.png (Binary) (added)

+++ client/resources/files/images/twentypercent.png

Binary file is not shown

697873e

client/resources/files/images/zeropercent.png (Binary) (added)

+++ client/resources/files/images/zeropercent.png

Binary file is not shown

cd6e5cd

697873e

client/views/component/Calendar.jsx

--- client/views/component/Calendar.jsx

+++ client/views/component/Calendar.jsx


 import "react-calendar/dist/Calendar.css";
 import moment from "moment";
 
-export default function CalendarComponent(props) {
+export default function CalendarComponent(props) {  
   const [value, setValue] = useState(new Date());
   const mark = ["12-02-2023", "21-02-2023", "05-02-2023", "02-02-2023"];
   return (

697873e

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

+++ client/views/component/Calendar2.jsx

...	...	@@ -0,0 +1,34 @@
	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-02-2023", "21-02-2023", "05-02-2023", "02-02-2023"];
	9	+ return (
	10	+ <div className="w-full h-full p-10">
	11	+ <Calendar
	12	+ className="w-96 h-full rounded-xl bg-violet-300"
	13	+ onChange={setValue}
	14	+ value={value}
	15	+ tileClassName={({ date, view }) => {
	16	+ // if (mark.find((x) => x === moment(date).format("DD-MM-YYYY"))) {
	17	+ // return "highlight";
	18	+ // }
	19	+ let day = date.getDate()
	20	+ let month = date.getMonth()+1
	21	+ if(date.getMonth()<10){
	22	+ month = '0'+day
	23	+ }
	24	+ const realDate =day+'-'+month+'-'+date.getFullYear()
	25	+ if(mark.find(val=> val === realDate)){
	26	+ return 'highlight'
	27	+ }
	28	+
	29	+ }}
	30	+ />
	31	+ </div>
	32	+ );
	33	+}
	34	+

cd6e5cd

697873e

client/views/component/Calendar_agency.jsx

--- client/views/component/Calendar_agency.jsx

+++ client/views/component/Calendar_agency.jsx


 import "react-calendar/dist/Calendar.css";
 import moment from "moment";
 
-export default function CalendarComponent(props) {
+export default function CalendarComponent(props) {  
   const [value, setValue] = useState(new Date());
   const mark = ["12-02-2023", "21-02-2023", "05-02-2023", "02-02-2023"];
   return (
-    <div className="w-full h-full p-10">
+    <div className="w-full h-full p-10 agency-calendar">
       <Calendar
         className="w-96 h-full rounded-xl bg-violet-300"
         onChange={setValue}

cd6e5cd

697873e

client/views/component/ContentTitle.jsx

--- client/views/component/ContentTitle.jsx

+++ client/views/component/ContentTitle.jsx


 }
 
 const ContentTitleStyled = styled.p`
-  font-size: 4rem;
+  font-size: 2.5rem;
   font-weight: bold;
-  margin: 0 3rem 2rem 0;
+  margin: 1px 1rem 1rem 0px;
   color: #733c1d;
   /* &::after {
     content: "";

 `
 
 const Explanation = styled.p`
-  font-size: 2.6rem;
+  font-size: 1.8rem;
   color: #733c1d;
 `;

697873e

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

+++ client/views/component/DateDay.jsx

...	...	@@ -0,0 +1,30 @@
	1	+import React from "react";
	2	+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
	3	+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
	4	+import calendar from '../../resources/files/images/calendar.png';
	5	+
	6	+export default function DateDay() {
	7	+ const [date, setDate] = React.useState();
	8	+ function clock() {
	9	+ const date = new Date();
	10	+ const year = date.getFullYear();
	11	+ const month = date.getMonth() + 1;
	12	+ const day = date.getDate();
	13	+ setDate(`${year}년 ${month}월 ${day}일 `);
	14	+ }
	15	+
	16	+
	17	+ React.useEffect(() => {
	18	+ clock();
	19	+ }, []);
	20	+
	21	+ return (
	22	+ <div className="weather-info flex-center">
	23	+ <div className="flex-start">
	24	+ <ChevronLeftIcon sx={{ width: "33px",height:"33px", marginBottom:"0.8rem", color: "#a5a5a5" }}/>
	25	+ <div id="fullDate">{date} <img src={calendar} alt="" /></div>
	26	+ <ChevronRightIcon sx={{ width: "33px",height:"33px", marginBottom:"0.8rem", color: "#a5a5a5" }}/>
	27	+ </div>
	28	+ </div>
	29	+ );
	30	+}

697873e

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

+++ client/views/component/DateMonth.jsx

...	...	@@ -0,0 +1,29 @@
	1	+import React from "react";
	2	+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
	3	+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
	4	+import calendar from '../../resources/files/images/calendar.png';
	5	+
	6	+export default function DateDay() {
	7	+ const [date, setDate] = React.useState();
	8	+ function clock() {
	9	+ const date = new Date();
	10	+ const year = date.getFullYear();
	11	+ const month = date.getMonth() + 1;
	12	+ setDate(`${year}년 ${month}월`);
	13	+ }
	14	+
	15	+
	16	+ React.useEffect(() => {
	17	+ clock();
	18	+ }, []);
	19	+
	20	+ return (
	21	+ <div className="weather-info flex-center">
	22	+ <ul className="flex-start">
	23	+ <ChevronLeftIcon sx={{ width: "33px",height:"33px", marginBottom:"0.8rem", color: "#a5a5a5" }}/>
	24	+ <li id="fullDate">{date} <img src={calendar} alt="" /></li>
	25	+ <ChevronRightIcon sx={{ width: "33px",height:"33px", marginBottom:"0.8rem", color: "#a5a5a5" }}/>
	26	+ </ul>
	27	+ </div>
	28	+ );
	29	+}

697873e

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

+++ client/views/component/QnAModal.jsx

...	...	@@ -0,0 +1,48 @@
	1	+import React from "react";
	2	+import Button from "./Button.jsx";
	3	+import ContentTitle from "./ContentTitle.jsx";
	4	+import SubTitle from "./SubTitle.jsx";
	5	+import { useNavigate } from "react-router";
	6	+
	7	+export default function QaAModal({ open, close, }) {
	8	+ return (
	9	+ <div class={open ? "openModal modal" : "modal"}>
	10	+ {open ? (
	11	+ <div className="modal-inner">
	12	+ <div className="modal-header flex">
	13	+ Q&A등록
	14	+ <Button className={"close"} onClick={close} btnName={"X"} />
	15	+ </div>
	16	+ <div className="modal-main"><div className="board-wrap">
	17	+ <div>
	18	+ <SubTitle explanation={"작성자 정보"} />
	19	+ <table className="margin-bottom2 qna-insert">
	20	+ <tr>
	21	+ <th>작성자</th>
	22	+ <td>
	23	+ <input type="text" placeholder="자동입력부분" />
	24	+ </td>
	25	+ </tr>
	26	+
	27	+ <tr>
	28	+ <th>제목</th>
	29	+ <td colSpan={3}>
	30	+ <input type="text" />
	31	+ </td>
	32	+ </tr>
	33	+ <tr>
	34	+ <th>내용</th>
	35	+ <td colSpan={3}>
	36	+ <textarea className="medicine" cols="30" rows="2"></textarea>
	37	+ </td>
	38	+ </tr>
	39	+ </table>
	40	+ </div>
	41	+ <div className="flex-center"><Button className={"btn-small red-btn"} btnName={"저장"} /></div >
	42	+ </div></div>
	43	+ </div>
	44	+ ) : null}
	45	+ </div>
	46	+
	47	+ );
	48	+}

cd6e5cd

697873e

client/views/component/SubTitle.jsx

--- client/views/component/SubTitle.jsx

+++ client/views/component/SubTitle.jsx


 }
 
 const TitleStyle = styled.h4`
-  font-size: 2.5rem;
+  font-size: 2rem;
   font-weight: bold;
   padding: 0.5rem;
   margin-right: 1rem;

cd6e5cd

697873e

client/views/component/Title.jsx

--- client/views/component/Title.jsx

+++ client/views/component/Title.jsx


 }
 
 const TitleStyle = styled.h4`
-  font-size: 1.6rem;
+  font-size: 2.4rem;
   font-weight: bold;
-  padding: 0.5rem;
   margin-right: 1rem;
 `;
 
 const Explanation = styled.p`
   font-size: 1.4rem;
-  padding: 0.5rem;
   color: #cccccc;
-  border-left: 2px solid #cccccc;
 `;

697873e

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

+++ client/views/component/TitleSmall.jsx

...	...	@@ -0,0 +1,23 @@
	1	+import styled from "styled-components";
	2	+import React from "react";
	3	+
	4	+export default function TitleSmall({ title, explanation }) {
	5	+ return (
	6	+ <div className="flex-start">
	7	+ <TitleStyle className="title">{title}</TitleStyle>
	8	+ <Explanation>{explanation}</Explanation>
	9	+ </div>
	10	+ );
	11	+}
	12	+
	13	+const TitleStyle = styled.h4`
	14	+ font-size: 2rem;
	15	+ font-weight: bold;
	16	+ margin-right: 1rem;
	17	+`;
	18	+
	19	+const Explanation = styled.p`
	20	+ font-size: 1.5rem;
	21	+ color: rgb(170 170 170);
	22	+ padding-top: 0.5rem;
	23	+`;

697873e

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

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

...	...	@@ -0,0 +1,358 @@
	1	+import React, { Component } from "react";
	2	+import * as am5 from "@amcharts/amcharts5";
	3	+import * as am5xy from "@amcharts/amcharts5/xy";
	4	+import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
	5	+
	6	+class Chart6 extends Component {
	7	+ componentDidMount() {
	8	+ let root = am5.Root.new("chart6");
	9	+
	10	+
	11	+ root._logo.dispose();
	12	+// Set themes
	13	+// https://www.amcharts.com/docs/v5/concepts/themes/
	14	+root.setThemes([
	15	+ am5themes_Animated.new(root)
	16	+]);
	17	+
	18	+
	19	+root.dateFormatter.setAll({
	20	+ dateFormat: "yyyy-MM-dd",
	21	+ dateFields: ["valueX"]
	22	+});
	23	+
	24	+let data = [
	25	+ {
	26	+ date: "2021-01-01",
	27	+ steps: 4561
	28	+ },
	29	+ {
	30	+ date: "2021-01-02",
	31	+ steps: 5687
	32	+ },
	33	+ {
	34	+ date: "2021-01-03",
	35	+ steps: 6348
	36	+ },
	37	+ {
	38	+ date: "2021-01-04",
	39	+ steps: 4878
	40	+ },
	41	+ {
	42	+ date: "2021-01-05",
	43	+ steps: 9867
	44	+ },
	45	+ {
	46	+ date: "2021-01-06",
	47	+ steps: 7561
	48	+ },
	49	+ {
	50	+ date: "2021-01-07",
	51	+ steps: 1287
	52	+ },
	53	+ {
	54	+ date: "2021-01-08",
	55	+ steps: 3298
	56	+ },
	57	+ {
	58	+ date: "2021-01-09",
	59	+ steps: 5697
	60	+ },
	61	+ {
	62	+ date: "2021-01-10",
	63	+ steps: 4878
	64	+ },
	65	+ {
	66	+ date: "2021-01-11",
	67	+ steps: 8788
	68	+ },
	69	+ {
	70	+ date: "2021-01-12",
	71	+ steps: 9560
	72	+ },
	73	+ {
	74	+ date: "2021-01-13",
	75	+ steps: 11687
	76	+ },
	77	+ {
	78	+ date: "2021-01-14",
	79	+ steps: 5878
	80	+ },
	81	+ {
	82	+ date: "2021-01-15",
	83	+ steps: 9789
	84	+ },
	85	+ {
	86	+ date: "2021-01-16",
	87	+ steps: 3987
	88	+ },
	89	+ {
	90	+ date: "2021-01-17",
	91	+ steps: 5898
	92	+ },
	93	+ {
	94	+ date: "2021-01-18",
	95	+ steps: 9878
	96	+ },
	97	+ {
	98	+ date: "2021-01-19",
	99	+ steps: 13687
	100	+ },
	101	+ {
	102	+ date: "2021-01-20",
	103	+ steps: 6789
	104	+ },
	105	+ {
	106	+ date: "2021-01-21",
	107	+ steps: 4531
	108	+ },
	109	+ {
	110	+ date: "2021-01-22",
	111	+ steps: 5856
	112	+ },
	113	+ {
	114	+ date: "2021-01-23",
	115	+ steps: 5737
	116	+ },
	117	+ {
	118	+ date: "2021-01-24",
	119	+ steps: 9987
	120	+ },
	121	+ {
	122	+ date: "2021-01-25",
	123	+ steps: 16457
	124	+ },
	125	+ {
	126	+ date: "2021-01-26",
	127	+ steps: 7878
	128	+ },
	129	+ {
	130	+ date: "2021-01-27",
	131	+ steps: 6845
	132	+ },
	133	+ {
	134	+ date: "2021-01-28",
	135	+ steps: 4659
	136	+ },
	137	+ {
	138	+ date: "2021-01-29",
	139	+ steps: 7892
	140	+ },
	141	+ {
	142	+ date: "2021-01-30",
	143	+ steps: 7362
	144	+ },
	145	+ {
	146	+ date: "2021-01-31",
	147	+ steps: 3268
	148	+ }
	149	+];
	150	+
	151	+// Create chart
	152	+// https://www.amcharts.com/docs/v5/charts/xy-chart/
	153	+let chart = root.container.children.push(
	154	+ am5xy.XYChart.new(root, {
	155	+ focusable: true,
	156	+ panX: true,
	157	+ panY: false,
	158	+ wheelX: "panX",
	159	+ wheelY: "none"
	160	+ })
	161	+);
	162	+
	163	+let easing = am5.ease.linear;
	164	+
	165	+// hide zoomout button
	166	+chart.zoomOutButton.set("forceHidden", true);
	167	+
	168	+// add label
	169	+chart.plotContainer.children.push(
	170	+ am5.Label.new(root, { text: "Pan chart to change date", x: 100, y: 50 })
	171	+);
	172	+
	173	+// Create axes
	174	+// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
	175	+let xRenderer = am5xy.AxisRendererX.new(root, {
	176	+ minGridDistance: 50,
	177	+ strokeOpacity: 0.2
	178	+});
	179	+xRenderer.grid.template.set("forceHidden", true);
	180	+
	181	+let xAxis = chart.xAxes.push(
	182	+ am5xy.DateAxis.new(root, {
	183	+ maxDeviation: 0.49,
	184	+ snapTooltip: false,
	185	+ baseInterval: {
	186	+ timeUnit: "day",
	187	+ count: 1
	188	+ },
	189	+ renderer: xRenderer,
	190	+ tooltip: am5.Tooltip.new(root, {})
	191	+ })
	192	+);
	193	+
	194	+let yRenderer = am5xy.AxisRendererY.new(root, { inside: true });
	195	+yRenderer.grid.template.set("forceHidden", true);
	196	+
	197	+let yAxis = chart.yAxes.push(
	198	+ am5xy.ValueAxis.new(root, {
	199	+ maxDeviation: 0,
	200	+ renderer: yRenderer
	201	+ })
	202	+);
	203	+
	204	+// Add series
	205	+// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
	206	+let series = chart.series.push(
	207	+ am5xy.ColumnSeries.new(root, {
	208	+ xAxis: xAxis,
	209	+ yAxis: yAxis,
	210	+ valueYField: "steps",
	211	+ valueXField: "date",
	212	+ tooltip: am5.Tooltip.new(root, {
	213	+ pointerOrientation: "vertical",
	214	+ labelText: "{valueY}"
	215	+ })
	216	+ })
	217	+);
	218	+
	219	+series.columns.template.setAll({
	220	+ cornerRadiusTL: 15,
	221	+ cornerRadiusTR: 15,
	222	+ maxWidth: 30,
	223	+ strokeOpacity: 0
	224	+});
	225	+
	226	+series.columns.template.adapters.add("fill", function (fill, target) {
	227	+ if (target.dataItem.get("valueY") < 6000) {
	228	+ return am5.color(0xdadada);
	229	+ }
	230	+ return fill;
	231	+});
	232	+
	233	+// Set up data processor to parse string dates
	234	+// https://www.amcharts.com/docs/v5/concepts/data/#Pre_processing_data
	235	+series.data.processor = am5.DataProcessor.new(root, {
	236	+ dateFormat: "yyyy-MM-dd",
	237	+ dateFields: ["date"]
	238	+});
	239	+
	240	+series.data.setAll(data);
	241	+
	242	+// do not allow tooltip to move horizontally
	243	+series.get("tooltip").adapters.add("x", function (x) {
	244	+ return chart.plotContainer.toGlobal({
	245	+ x: chart.plotContainer.width() / 2,
	246	+ y: 0
	247	+ }).x;
	248	+});
	249	+
	250	+// add ranges
	251	+let goalRange = yAxis.createAxisRange(yAxis.makeDataItem({
	252	+ value: 6000
	253	+}));
	254	+
	255	+goalRange.get("grid").setAll({
	256	+ forceHidden: false,
	257	+ strokeOpacity: 0.2
	258	+});
	259	+
	260	+let goalLabel = goalRange.get("label");
	261	+
	262	+goalLabel.setAll({
	263	+ centerY: am5.p100,
	264	+ centerX: am5.p100,
	265	+ text: "Goal"
	266	+});
	267	+
	268	+// put to other side
	269	+goalLabel.adapters.add("x", function (x) {
	270	+ return chart.plotContainer.width();
	271	+});
	272	+
	273	+let goalRange2 = yAxis.createAxisRange(yAxis.makeDataItem({
	274	+ value: 12000
	275	+}));
	276	+
	277	+goalRange2.get("grid").setAll({
	278	+ forceHidden: false,
	279	+ strokeOpacity: 0.2
	280	+});
	281	+
	282	+let goalLabel2 = goalRange2.get("label");
	283	+
	284	+goalLabel2.setAll({
	285	+ centerY: am5.p100,
	286	+ centerX: am5.p100,
	287	+ text: "2 x Goal"
	288	+});
	289	+
	290	+// put to other side
	291	+goalLabel2.adapters.add("x", function (x) {
	292	+ return chart.plotContainer.width();
	293	+});
	294	+
	295	+// reposition when width changes
	296	+chart.plotContainer.onPrivate("width", function () {
	297	+ goalLabel.markDirtyPosition();
	298	+ goalLabel2.markDirtyPosition();
	299	+});
	300	+
	301	+// Add cursor
	302	+// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
	303	+let cursor = chart.set("cursor", am5xy.XYCursor.new(root, {
	304	+ alwaysShow: true,
	305	+ behavior: "none",
	306	+ positionX: 0.5 // make it always be at the center
	307	+}));
	308	+cursor.lineY.set("visible", false);
	309	+
	310	+// zoom to last 11 days
	311	+series.events.on("datavalidated", function () {
	312	+ let toTime =
	313	+ series.dataItems[series.dataItems.length - 1].get("valueX") +
	314	+ am5.time.getDuration("day", 1);
	315	+ let fromTime = series.dataItems[series.dataItems.length - 11].get("valueX");
	316	+
	317	+ xAxis.zoomToValues(fromTime, toTime);
	318	+});
	319	+
	320	+// when plot are is released, round zoom to nearest days
	321	+chart.plotContainer.events.on("globalpointerup", function () {
	322	+ let dayDuration = am5.time.getDuration("day", 1);
	323	+
	324	+ let firstTime = am5.time
	325	+ .round(new Date(series.dataItems[0].get("valueX")), "day", 1)
	326	+ .getTime();
	327	+ let lastTime =
	328	+ series.dataItems[series.dataItems.length - 1].get("valueX") + dayDuration;
	329	+ let totalTime = lastTime - firstTime;
	330	+ let days = totalTime / dayDuration;
	331	+
	332	+ let roundedStart =
	333	+ firstTime + Math.round(days * xAxis.get("start")) * dayDuration;
	334	+ let roundedEnd =
	335	+ firstTime + Math.round(days * xAxis.get("end")) * dayDuration;
	336	+
	337	+ xAxis.zoomToValues(roundedStart, roundedEnd);
	338	+});
	339	+
	340	+// Make stuff animate on load
	341	+// https://www.amcharts.com/docs/v5/concepts/animations/
	342	+chart.appear(1000, 50);
	343	+
	344	+
	345	+ }
	346	+
	347	+ componentWillUnmount() {
	348	+ if (this.root) {
	349	+ this.root.dispose();
	350	+ }
	351	+ }
	352	+
	353	+ render() {
	354	+ return <div id="chart6" style={{ width: "100%", height: "22vh" }}></div>;
	355	+ }
	356	+}
	357	+
	358	+export default Chart6;

cd6e5cd

697873e

client/views/layout/Header.jsx

--- client/views/layout/Header.jsx

+++ client/views/layout/Header.jsx


           <div className="info-wrap flex">
             <div className="usericon"><PersonIcon sx={{ width:48, height:48,}} /></div>
             <p className="header-info-id">admin1</p>
-            <div className="bottom-section flex">
-              <div className="info-id" ><span onClick={() => {
-                navigate("/Join");
-              }}>계정추가</span></div>
-              <div className="logout"><span>로그아웃</span></div>
-            </div>
+            
           </div>
           {/* <span>{title}</span> */}
         </div>

cd6e5cd

697873e

client/views/layout/Menu.jsx

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

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


 
   return (
     <nav
-      className={!menuToggle ? "nav" : "burger__menu"}
+      className={"nav"}
       onClick={() => (menuToggle ? setMenuToggle(false) : setMenuToggle(true))}
     >
       <h1 className="logo"><img src={logo} alt="" /></h1>

           ))}
         </ul>
       </div>
+      <div className="bottom-section flex-center">
+          <div className="info-id" ><span onClick={() => {
+            navigate("/Join");
+          }}>계정추가</span></div>
+          <div className="logout"><span>로그아웃</span></div>
+        </div>
     </nav>
   );
 }

cd6e5cd

697873e

client/views/layout/SidebarItem.jsx

--- client/views/layout/SidebarItem.jsx

+++ client/views/layout/SidebarItem.jsx


 
   if (item.childrens) {
     return (
-      <li
-        className={open ? "sidebar-item open" : "sidebar-item"}
-        onClick={toggleMenu}
-      >
-        <div className="sidebar-title flex">
-          <div className="flex-start">
-            {item.icon}
-            <span>{item.title}</span>
+        <li
+          className={open ? "sidebar-item open" : "sidebar-item"}
+          onClick={toggleMenu}
+        >
+          <div className="sidebar-title flex">
+            <div className="flex-start">
+              {item.icon}
+              <span>{item.title}</span>
+            </div>
+            <KeyboardArrowDownIcon
+              className="toggle"
+              sx={{ fontSize: 20, color: "#333333", }}
+            />
           </div>
-          <KeyboardArrowDownIcon
-            className="toggle"
-            sx={{ fontSize: 20, color: "#333333",}}
-          />
-        </div>
-        <ul className="sidebar-content">
-          {item.childrens.map((child, index) => (
-            <SidebarItem key={index} item={child} />
-          ))}
-        </ul>
-      </li>
+          <ul className="sidebar-content">
+            {item.childrens.map((child, index) => (
+              <SidebarItem key={index} item={child} />
+            ))}
+          </ul>
+        </li>
+
     );
   } else {
     return (

cd6e5cd

697873e

client/views/pages/AppRoute.jsx

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

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


 import EquipmentManagementSelectAdd from "./equipment/EquipmentManagementSelectAdd.jsx";
 import RiskSet from "./setting/RiskSet.jsx";
 import QandAInsert from "./callcenter/QandAInsert.jsx";
-import QuestionInsert from "./callcenter/QuestionInsert.jsx";
 import QuestionConfirm from "./callcenter/QuestionConfirm.jsx";
 import UserSelectOk from "./user_management/UserSelectOk.jsx";
 import AuthorityManagement from "./setting/AuthorityManagement.jsx";

       <Route path="/Medicalcare" element={<Medicalcare />}></Route>
       <Route path="/Healthcare" element={<Healthcare />}></Route>
       <Route path="/QuestionConfirm" element={<QuestionConfirm />}></Route>
-      <Route path="/QuestionInsert" element={<QuestionInsert />}></Route>
+      
       <Route path="/GuardianStatistics" element={<GuardianStatistics />}></Route>
       <Route path="/Main_guardian" element={<Main_guardian />}></Route>
       <Route path="/QuestionSelect" element={<QuestionSelect />}></Route>

       <Route path="/Healthcare" element={<Healthcare />}></Route>
       <Route path="/Join" element={<Join />}></Route>
       <Route path="/QuestionSelect" element={<QuestionSelect />}></Route>
-      <Route path="/QuestionInsert" element={<QuestionInsert />}></Route>
+      
       <Route path="/Main_agency" element={<Main_agency />}></Route>
       <Route path="/UserAuthoriySelect_agency" element={<UserAuthoriySelect_agency />}></Route>
       <Route path="/SeniorInsert" element={<SeniorInsert />}></Route>

       <Route path="/Main_guardian" element={<Main_guardian />}></Route>
       <Route path="/QuestionSelect" element={<QuestionSelect />}></Route>
       <Route path="/QuestionConfirm" element={<QuestionConfirm />}></Route>
-      <Route path="/QuestionInsert" element={<QuestionInsert />}></Route>
+      
     </Routes>
   );
 }

cd6e5cd

client/views/pages/callcenter/QuestionInsert.jsx (deleted)

--- client/views/pages/callcenter/QuestionInsert.jsx

...	...	@@ -1,55 +0,0 @@
	1	-import React from "react";
	2	-import Button from "../../component/Button.jsx";
	3	-import ContentTitle from "../../component/ContentTitle.jsx";
	4	-import SubTitle from "../../component/SubTitle.jsx";
	5	-import { useNavigate } from "react-router";
	6	-
	7	-export default function QuestionInsert() {
	8	- const navigate = useNavigate();
	9	- return (
	10	- <main>
	11	- <div className="content-wrap row">
	12	- <ContentTitle contentTitle={"문의글 작성"} />
	13	- <SubTitle explanation={"작성자 정보"} />
	14	- <table className="margin-bottom2 qna-insert">
	15	- <tr>
	16	- <th>작성자</th>
	17	- <td>
	18	- <input type="text" placeholder="자동입력부분" />
	19	- </td>
	20	- </tr>
	21	-
	22	- <tr>
	23	- <th>제목</th>
	24	- <td colSpan={3}>
	25	- <input type="text" />
	26	- </td>
	27	- </tr>
	28	- <tr>
	29	- <th>내용</th>
	30	- <td colSpan={3}>
	31	- <textarea className="medicine" cols="30" rows="2"></textarea>
	32	- </td>
	33	- </tr>
	34	- </table>
	35	-
	36	- <div className="btn-wrap flex-center">
	37	- <Button
	38	- className={"btn-large gray-btn"}
	39	- btnName={"이전"}
	40	- onClick={() => {
	41	- navigate("/QandASelect");
	42	- }}
	43	- />
	44	- <Button
	45	- className={"btn-large green-btn"}
	46	- btnName={"등록"}
	47	- onClick={() => {
	48	- navigate("/QandASelect");
	49	- }}
	50	- />
	51	- </div>
	52	- </div>
	53	- </main>
	54	- );
	55	-}

cd6e5cd

697873e

client/views/pages/callcenter/QuestionSelect.jsx

--- client/views/pages/callcenter/QuestionSelect.jsx

+++ client/views/pages/callcenter/QuestionSelect.jsx


 import React from "react";
 import Button from "../../component/Button.jsx";
 import Table from "../../component/Table.jsx";
-import Modal from "../../component/Modal.jsx";
+import QnAModal from "../../component/QnAModal.jsx";
 import { useNavigate } from "react-router";
 import ContentTitle from "../../component/ContentTitle.jsx";
 import RestoreFromTrashIcon from '@mui/icons-material/RestoreFromTrash';

 
 export default function QuestionSelect() {
   const navigate = useNavigate();
+  const [modalOpen, setModalOpen] = React.useState(false);
+  const openModal = () => {
+    setModalOpen(true);
+  };
+  const closeModal = () => {
+    setModalOpen(false);
+  };
+
   //게시판
   const thead = [
     "No",

   ];
   return (
     <main>
+      <QnAModal open={modalOpen} close={closeModal} header="기관 등록">      
+      </QnAModal>
       <div className="content-wrap">
         <ContentTitle contentTitle={"Q&A"} />
         <div className="board-wrap">

           <Button
             className={"btn-small gray-btn"}
             btnName={"작성하기"}
-            onClick={() => {
-              navigate("/QuestionInsert");
-            }}
+            onClick={openModal}
           />
           </div>
         </div>

cd6e5cd

697873e

client/views/pages/equipment/EquipmentManagementSelect.jsx

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

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


 		setModalOpen(false);
 	};
 
-	const [modalOpen3, setModalOpen3] = React.useState(false);
-	const openModal3 = () => {
-		// equipmentListData();
-		setModalOpen3(true);
-	};
-	const closeModal3 = () => {
-		setModalOpen3(false);
-	};
-
-	// 대상자 매칭 반납
-	const seniorMatchDelete = () => {
-		if (confirm('아니다') == false) {
-			return;
-		}
-		// 대상자 매칭 반납 함수 사용하기
-	};
 
 	const navigate = useNavigate();
 
-	// 시스템 코드 - 장비 대여 상태 조회
+	// 시스템 코드 - 장비 상태 조회
 	const equipmentStatesSelect = () => {
 		console.log('equipmentStatesSelect Function Run');
 

 	}
 
 	/********************************** 관리자 장비 (시작) **********************************/
+	//로그 확인
+	const logCheck = () => {
+		console.log('equipment - change: ', equipment);
+	};
+
+	// 장비 빈 초기값
+	const equipment_ = {
+		equipment_serial_number: null,
+		equipment_type: null,
+		equipment_name: null,
+		equipment_state: null,
+		equipment_product_date: null,
+		equipment_stock_date: null,
+	}
+
+
 	// 관리자 전체 장비 목록
 	const [equipmentList, setEquipmentList] = React.useState([]);
+	// 장비
+	const [equipment, setEquipment] = React.useState({
+		equipment_serial_number: null,
+		equipment_type: null,
+		equipment_name: null,
+		equipment_state: null,
+		equipment_product_date: null,
+		equipment_stock_date: null,
+	});
+	// 장비 등록 모달창
+	const [equipmentInsertModal, setEquipmentInsertModal] = React.useState(false);
+
+	// 장비 등록 모달창 열기
+	const equipmentInsertModalOpen = () => {
+		setEquipmentInsertModal(true);
+	};
+	// 장비 등록 모달창 닫기
+	const equipmentInsertModalClose = () => {
+		// 장비 초기화
+		setEquipment(equipment_);
+		setEquipmentInsertModal(false);
+	};
+
 
 	// 관리자 전체 장비 목록 조회
 	const equipmentSelectList = () => {

 		});
 	}
 
+	// 장비 임시 데이터
+	const equipmentChange = (e) => {
+		console.log('equipmentChange: ', e.target.name, e.target.value);
+
+		// 원본 데이터 복사 및 수정
+		let data = {};
+
+		// 장비 종류가 '디지털 약상자'일 경우 모델 명에 '스마트 약상자' 입력
+		if(e.target.name == "equipment_type" && e.target.value == "DIGITAL_MEDIBOX") {
+			data = {
+				...equipment,
+				[e.target.name]: e.target.value,
+				equipment_name: "스마트 약상자"
+			}
+		} else { // 장비 종류 이외의 이벤트 핸들러일 경우
+			data = {
+				...equipment,
+				[e.target.name]: e.target.value
+			}
+		}
+		// 복사 데이터를 원본 데이터에 덮어쓰기
+		setEquipment(data);
+	}
+
+	// 장비 등록
+	const equipmentInsert = () => {
+		console.log('equipmentInsert Function Run');
+
+		// 유효성 검사
+		for(let i = 0; i < equipmentInsertHead.length; i++) {
+			if(equipment[equipmentInsertKey[i]] == null) {
+				alert(equipmentInsertHead[i] +'를 선택해 주세요');
+				return;
+			}
+		}
+
+		fetch("/equipment/equipmentInsert.json", {
+			method: "POST",
+			headers: {
+				'Content-Type': 'application/json; charset=UTF-8'
+			},
+			body: JSON.stringify(equipment),
+		}).then((response) => response.json()).then((data) => {
+			console.log('equipmentInsert response : ', data);
+			// 장비 목록 조회
+			equipmentSelectList();
+			// 장비 초기화
+			setEquipment(equipment_);
+			// 모달창 닫기
+			setEquipmentInsertModal(false);
+
+			alert('등록이 완료됐습니다.');
+		}).catch((error) => {
+			console.log('equipmentInsert error : ', error);
+			alert('등록에 실패했습니다.');
+		});
+	}
+
+	// 장비 등록 th
+	const equipmentInsertHead = [
+		"종류",
+		"모델 명",
+		"시리얼 넘버",
+		"생산 일자",
+		"입고 일자",
+	]
+
+	// 장비 등록 key
+	const equipmentInsertKey = [
+		"equipment_type",
+		"equipment_name",
+		"equipment_serial_number",
+		"equipment_product_date",
+		"equipment_stock_date",
+	]
+
+	//스마트 약상자 모델명 리스트 (예시)
+	const smartMediBoxNameList = ["SMB-NB100", "NB100", "SDC-2000", "SDC-2002"]
+
 	const thead1 = [
 		"No",
 		"모델 명",

 		"입고 일자",
 		"상태",
 		"보유 기관",
-		"관리",
+		"시행기관 관리",
 	];
 	const key1 = [
 		"equipment_name",

 
 
 	/********************************** 시행기관 장비 (시작) **********************************/
-	//로그 확인
-	const logCheck = () => {
-		console.log('seniorMatchListByEquipment - change: ', seniorMatchListByEquipment.length);
-	};
-
 	// 시행기관 전체 장비 목록
 	const [agencyEquipmentList, setAgencyEquipmentList] = React.useState([]);
 	// 시행기관 대상자 장비 목록

 	const [equipmentNotMatchSeniorList, setEquipmentNotMatchSeniorList] = React.useState([]);
 	// 담당자 목록
 	const [workerList, setWorkerList] = React.useState([]);
-
 
 	// 대상자 장비 등록 모달창 열기
 	const seniorMatchInsertModalOpen = (item) => {

 
 	// 마운트 시 실행 함수
 	React.useEffect(() => {
+		// 공통
 		equipmentStatesSelect();
 		equipmentRentalStatesSelect();
 		equipmentNotMatchSeniorSelectList();
 		workerSelectList();
 
-		//관리자
+		// 관리자
 		equipmentSelectList();
 
-		//시행기관
+		// 시행기관
 		agencyEquipmentSelectList();
 		agencySeniorEquipmentSelectList();
 		agencyStockEquipmentSelectList();

 						<div className="btn-wrap flex-end margin-bottom ">
 							<Button
 								className={"btn-small gray-btn"}
+								btnName={"LOG"}
+								onClick={logCheck}
+							/>
+							<Button
+								className={"btn-small gray-btn"}
 								btnName={"등록"}
-								onClick={openModal3}
+								onClick={equipmentInsertModalOpen}
 							/>
 						</div>
 					</div>

 										<tr key={index}>
 											<td>{equipmentList.length - index}</td>
 											{key1.map((kes) => {
+												if(kes == "equipment_state") {
+													Object.keys(equipmentStates).map((key, idx) => {
+														if(item[kes] == key) {
+															item[kes] = Object.values(equipmentStates)[idx];
+														}
+													})
+												}
 												return <td>{item[kes]}</td>
 											})}
 											<td>

 	];
 
 	//시작 탭 설정
-	const [index, setIndex] = React.useState(4);
+	const [index, setIndex] = React.useState(1);
 
 	return (
 		<main>
+
+			<Modal open={equipmentInsertModal} close={equipmentInsertModalClose} header="장비 등록">
+				<div className="board-wrap">
+					<div>
+						<table className="flex70 margin-bottom">
+							<tbody className="equipment-insert">
+								<tr>
+									<th>종류</th>
+									<td colSpan={5}>
+										<select defaultValue={""} name="equipment_type" onChange={equipmentChange}>
+											<option value="" disabled>선택</option>
+											<option value="DIGITAL_MEDIBOX">디지털 약상자</option>
+											<option value="ECG" disabled>심전도계</option>
+											<option value="SPHYGMOMANOMETER" disabled>혈압계</option>
+										</select>
+									</td>
+								</tr>
+								<tr>
+									<th>모델 명</th>
+									<td colSpan={5}>
+										<input type="text" value={equipment['equipment_name']} id="equipmentName" name="equipment_name" placeholder="모델 명을 입력해 주세요" onChange={equipmentChange}></input>
+										{/* {smartMediBoxNameList.map((item) => {
+											return (
+												<span>
+													<input type="radio" id={item} name="equipment_name" value={item}></input>
+													<label for={item}>{item}</label>
+												</span>
+											)
+										})} */}
+									</td>
+								</tr>
+								<tr>
+									<th>시리얼 넘버</th>
+									<td colSpan={5}>
+										<input type="text" name="equipment_serial_number" placeholder="S/N을 입력해 주세요" onChange={equipmentChange}/>
+									</td>
+								</tr>
+								<tr>
+									<th>생산 일자</th>
+									<td colSpan={5}>
+										<input type="date" name="equipment_product_date" onChange={equipmentChange}/>
+									</td>
+								</tr>
+								<tr>
+									<th>입고 일자</th>
+									<td colSpan={5}>
+										<input type="date" name="equipment_stock_date" onChange={equipmentChange}/>
+									</td>
+								</tr>
+							</tbody>
+						</table>
+					</div>
+					<div className="flex-center">
+						<Button
+							className={"btn-small gray-btn"}
+							btnName={"저장"}
+							onClick={equipmentInsert}
+						/>
+					</div>
+				</div>
+			</Modal>
+
 			<Modal open={modalOpen} close={closeModal} header="납품 기관 선택">
 				<div className="board-wrap">
 					<div>

 							className={"btn-100 gray-btn"}
 							btnName={"닫기"}
 							onClick={closeModal}
-						/>
-					</div>
-				</div>
-			</Modal>
-
-			<Modal open={modalOpen3} close={closeModal3} header="장비 등록">
-				<div className="board-wrap">
-					<div>
-						<table className="flex70 margin-bottom">
-							<tbody className="equipment-insert">
-								<tr>
-									<th>장비명</th>
-									<td colSpan={5}>
-										<input type="text" name="" id="" />
-									</td>
-								</tr>
-								<tr>
-									<th>시리얼 넘버</th>
-									<td colSpan={5}>
-										<input type="text" name="" id="" />
-									</td>
-								</tr>
-								<tr>
-									<th>입고일자</th>
-									<td colSpan={5}>
-										<input type="text" name="" id="" />
-									</td>
-								</tr>
-							</tbody>
-						</table>
-					</div>
-					<div className="flex-center">
-						<Button
-							className={"btn-small gray-btn"}
-							btnName={"저장"}
-							onClick={closeModal3}
 						/>
 					</div>
 				</div>

 
 
 			<div className="tab-container">
-				<ul className="tab-menu">
+				<ul className="tab-menu flex-start">
 					{data.map((item) => (
 						<li
 							key={item.id}

cd6e5cd

697873e

client/views/pages/main/Main.jsx

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

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


 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 Chart2 from "../../component/chart/Chart2.jsx";
-import Calendar from "../../component/Calendar.jsx";
-import AddCircleIcon from '@mui/icons-material/AddCircle';
-import PersonIcon from '@mui/icons-material/Person';
-
+import Chart from "../../component/chart/Chart.jsx";
+import Chart5_agency from "../../component/chart/Chart5_agency.jsx";
+import Chart2_agency from "../../component/chart/Chart2_agency.jsx";
+import AddCircleIcon from "@mui/icons-material/AddCircle";
+import Calendar_agency from "../../component/Calendar_agency.jsx";
+import tool from "../../../resources/files/images/tool.png";
+import medicinebox from "../../../resources/files/images/medicinebox.png";
+import box from "../../../resources/files/images/box.png";
+import exchange from "../../../resources/files/images/exchange.png";
+import error from "../../../resources/files/images/error.png";
+import batteryAgency from "../../../resources/files/images/batteryAgency.png";
+import medicineAgency from "../../../resources/files/images/medicineAgency.png";
+import temperatureAgency from "../../../resources/files/images/temperatureAgency.png";
+import TitleSmall from "../../component/TitleSmall.jsx";
 
 export default function Main2() {
-
-  const tableHead = [
-    "연번",
-    "계약업체명",
-    "반납/교환",
-    "담당자 연락처",
-    "주소",
-  ];
-  const Key = [
-    "name",
-    "level_of_care",
-    "birth",
-    "phone",
-    "address",
-  ];
+  const data = [
+    {
+      id: 1,
+      title: "교환/수리 리스트",
+    },
+    {
+      id: 2,
+      title: "장비 추가 리스트",
+    },
+  ]
+  const [index, setIndex] = React.useState(1);
+  const thead = ["No", "이름", "대상자등록번호", "생년월일", "연락처", "주소", "미복약 누적 횟수",];
+  const key = ["No", "name", "number", "birth", "phone", "address", "average"];
   const content = [
     {
-      name: "1",
-      level_of_care: "A복지관",
-      birth: "교환",
+      No: 1,
+      name: "김복남",
+      number: "00000001",
+      birth: "1948.11.15",
       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: "경상북도 군위군 삼국유사면",
+      average: "6회",
     },
   ];
-  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: "경상북도 군위군 삼국유사면",
-    },
-  ];
+
 
   return (
     <main>
-      <div className="main-grid">
-        <ul className="content-box statistics flex combine-left">
-          <li>
-            <p>전체 장비 대여수</p>
-            <p>200개</p>
-          </li>
-          <li>
-            <p>계약 업체 수</p>
-            <p>20개 </p>
-          </li>
-          <li>
-            <p>교환/수리 장비 수</p>
-            <p>13개</p>
-          </li>
-          <li>
-            <p>불량 장비 수</p>
-            <p>1개</p>
+      <div className="flex-start margin-bottom2"><img src={medicinebox} alt="" /><TitleSmall title={"대상자 현황"} explanation={"2023.02.28 기준"} /></div>
+      <div className="main-grid-agency margin-bottom2">
+        <ul className="content-box statistics-agency" background="#f7acba">
+          <li className="flex-start">
+            <img src={box} alt="" />
+            <div className="text">
+              <p>나의 관리 대상자</p>
+              <p>40</p>
+            </div>
           </li>
         </ul>
-        <div className="content-box combine-left">
-          <div className="flex margin-bottom">
-            <Title title={"교환/수리 리스트"} explanation={"장비 교환/수리 리스트를 확인하세요."} />
-            <AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
+        <ul className="content-box statistics-agency" background="#8ef3d1">
+          <li className="flex-start">
+            <img src={medicineAgency} alt="" />
+            <div className="text">
+              <p>미복약 위험 대상자</p>
+              <p>40</p>
+            </div>
+          </li>
+        </ul>
+        <ul className="content-box statistics-agency" background="#ebe7b9" >
+          <li className="flex-start">
+            <img src={temperatureAgency} alt="" />
+            <div className="text">
+              <p>댁내 온도 위험 대상자</p>
+              <p>40</p>
+            </div>
+          </li>
+        </ul>
+        <ul className="content-box statistics-agency" background="#5f9af3">
+          <li className="flex-start">
+            <img src={batteryAgency} alt="" />
+            <div className="text">
+              <p>배터리 부족 대상자 </p>
+              <p>40</p>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div className="flex-start margin-bottom2"><img src={medicinebox} alt="" /><TitleSmall title={"장비 관리 리스트"}  /></div>
+      <div className="main-grid-agency">
+        <div className="content-box combine-left-government3">
+          <ul className="tab-menu-agency flex-start">
+            {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 equipmentlist">
+            <div className="margin-bottom2">
+              <Calendar_agency />
+            </div>
+            <ul className="tab-content">
+              {data
+                .filter((item) => index === item.id)
+                .map((item) => (
+                  <li>{item.description}</li>
+                ))}
+            </ul>
           </div>
-          <div className="flex" >
-            <div style={{ width:"50%" }}><Calendar /></div>
-            <div style={{ width:"50%" }}><Table head={tableHead} contents={content} contentKey={Key} /></div>
-          </div>
-
-        </div>          
-        <div className="content-box combine-left">
-          <div className="flex margin-bottom">
-            <Title title={"장비 추가 리스트"} explanation={"장비 추가 리스트를 확인하세요."} />
-            <AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
-          </div>
-          <Table head={tableHead2} contents={content2} contentKey={Key2} />
-        </div>          
+        </div>
       </div>
     </main>
   );

cd6e5cd

697873e

client/views/pages/main/Main_agency.jsx

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

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


 import Chart from "../../component/chart/Chart.jsx";
 import Chart5_agency from "../../component/chart/Chart5_agency.jsx";
 import Chart2_agency from "../../component/chart/Chart2_agency.jsx";
-import Chart4 from "../../component/chart/Chart4.jsx";
-import ClusteredColumnChart from "../../component/chart/ClusteredColumnChart.jsx";
-import Donut1 from "../../component/chart/Donut1.jsx";
-import RowChart from "../../component/chart/RowChart.jsx";
 import AddCircleIcon from "@mui/icons-material/AddCircle";
 import Calendar_agency from "../../component/Calendar_agency.jsx";
-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';
+import tool from "../../../resources/files/images/tool.png";
+import medicinebox from "../../../resources/files/images/medicinebox.png";
+import box from "../../../resources/files/images/box.png";
+import exchange from "../../../resources/files/images/exchange.png";
+import error from "../../../resources/files/images/error.png";
+import batteryAgency from "../../../resources/files/images/batteryAgency.png";
+import medicineAgency from "../../../resources/files/images/medicineAgency.png";
+import temperatureAgency from "../../../resources/files/images/temperatureAgency.png";
+import TitleSmall from "../../component/TitleSmall.jsx";
 
 export default function Main2() {
-  const thead = ["No", "이름","대상자등록번호", "생년월일", "연락처", "주소", "미복약 누적 횟수",];
-  const key = ["No", "name","number", "birth", "phone", "address", "average"];
+  const thead = ["No", "계약업체명", "구분", "담당자 연락처", "주소"];
+  const key = ["No", "agency", "division", "phone", "address",];
   const content = [
     {
       No: 1,
-      name: "김복남",
-      number: "00000001",
-      birth: "1948.11.15",
+      agency: "A복지관",
+      division: "교환",
       phone: "010-1234-5678",
       address: "경상북도 군위군 삼국유사면",
-      average: "6회",
-    },
-  ];
-  const thead2 = ["No", "이름","대상자등록번호", "생년월일", "연락처", "주소", "최근 최저 온도","최근 최고 온도"];
-  const key2 = ["No", "name","number", "birth", "phone", "address", "low", "high"];
-  const content2 = [
-    {
-      No: 1,
-      name: "김복남",
-      number: "00000001",
-      birth: "1948.11.15",
-      phone: "010-1234-5678",
-      address: "경상북도 군위군 삼국유사면",
-      low: "6°C",
-      high: "6°C",
     },
   ];
 
+
   return (
     <main>
-      <div className="main-grid-agency">
+      <div className="flex-start margin-bottom2"><img src={medicinebox} alt="" /><TitleSmall title={"대상자 현황"} explanation={"2023.02.28 기준"} /></div>
+      <div className="main-grid-agency margin-bottom2">
         <ul className="content-box statistics-agency" background="#f7acba">
-          <li> 
-            <p><ElderlyIcon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#bf0629", borderRadius:"50px" }}/></p>           
-            <p>나의 관리 대상자</p>
-            <p>40</p>
+          <li className="flex-start">
+            <img src={box} alt="" />
+            <div className="text">
+              <p>나의 관리 대상자</p>
+              <p>40</p>
+            </div>
           </li>
-                  </ul>
+        </ul>
         <ul className="content-box statistics-agency" background="#8ef3d1">
-          <li>
-           <p><MedicationIcon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#076143", borderRadius:"50px" }}/></p>
-            <p>미복약 위험 대상자</p>
-            <p>40</p>
+          <li className="flex-start">
+            <img src={medicineAgency} alt="" />
+            <div className="text">
+              <p>미복약 위험 대상자</p>
+              <p>40</p>
+            </div>
           </li>
         </ul>
         <ul className="content-box statistics-agency" background="#ebe7b9" >
-          <li>
-             <p><DeviceThermostatIcon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#f1de05", borderRadius:"50px" }}/></p>
-            <p>댁내 온도 위험 대상자</p>
-            <p>40</p>
+          <li className="flex-start">
+            <img src={temperatureAgency} alt="" />
+            <div className="text">
+              <p>댁내 온도 위험 대상자</p>
+              <p>40</p>
+            </div>
           </li>
         </ul>
         <ul className="content-box statistics-agency" background="#5f9af3">
-          <li>
-            <p><BatteryCharging20Icon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#5f9af3", borderRadius:"50px" }}/></p>
-            <p>배터리 부족 대상자 </p>
-            <p>40</p>
+          <li className="flex-start">
+            <img src={batteryAgency} alt="" />
+            <div className="text">
+              <p>배터리 부족 대상자 </p>
+              <p>40</p>
+            </div>
           </li>
-        </ul>       
-       
-        <div className="content-box bg-1 combine-left-government2 combine-middle-government">
-          <div className="flex">
-          <Title title={"복용률 통계"} explanation={"복용률 현황을 확인할 수 있습니다."} />
-            <AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
-          </div>
-          <Chart2_agency />
+        </ul>
+      </div>
+      <div className="flex-start margin-bottom2"><img src={medicinebox} alt="" /><TitleSmall title={"방문 관리 리스트"}  /></div>
+      <div className="main-grid-agency">
+        <div className="content-box combine-left-government3 visitlist">  
+            <div className="margin-bottom2">
+              <Calendar_agency />
+            </div>   
+            <div>
+            <Table className="agency-visitlist" head={thead} contents={content} contentKey={key} />
+              </div>         
         </div>
-        <div className="content-box bg-2 combine-left-government2 combine-bottom-government6">
-          <div className="flex">
-          <Title title={"미복약 위험 대상자 리스트"} explanation={"월별 약상자 사용 인원"} />
-            <AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
-          </div>
-          <Table
-            className={"medicine-table"}
-              head={thead}
-              contents={content}
-              contentKey={key}
-              onClick={() => {
-                navigate("/MedicineCareSelectOne");
-              }}
-            />
-        </div>
-        <div className="content-box bg-1 combine-left-government2 combine-bottom-government7">
-          <div className="flex">
-          <Title title={"댁내온도 위험 대상자 리스트"} explanation={"월별 약상자 사용 인원"} />
-            <AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
-          </div>
-          <Table
-            className={"medicine-table"}
-              head={thead2}
-              contents={content2}
-              contentKey={key2}
-              onClick={() => {
-                navigate("/MedicineCareSelectOne");
-              }}
-            />
-        </div>
-        <div className="content-box combine-right-government2 combine-bottom-government5">
-          <div className="flex">
-            <Title title={"나의 관리 대상자"} explanation={"지역별 대상자 현황을 확인할 수 있습니다."} />
-            <AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
-          </div>
-          <Chart5_agency />
-        </div>
-        <div className="content-box combine-right-government combine-bottom-government2">
-          <div className="flex">
-          <Title title={"방문 달력"} explanation={"방문 일정을 캘린더로 관리하세요."} />
-          </div>
-          <Calendar_agency />
-        </div>        
       </div>
     </main>
   );

cd6e5cd

697873e

client/views/pages/main/Main_guardian.jsx

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

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


 import Title from "../../component/Title.jsx";
 import Table from "../../component/Table.jsx";
 import Calendar from "../../component/Calendar.jsx";
+import TitleSmall from "../../component/TitleSmall.jsx";
+import DateDay from "../../component/DateDay.jsx";
+import DateMonth from "../../component/DateMonth.jsx";
+import Chart6 from "../../component/chart/Chart6.jsx";
 import ClearIcon from '@mui/icons-material/Clear';
-import BatteryCharging20Icon from '@mui/icons-material/BatteryCharging20';
-import DeviceThermostatIcon from '@mui/icons-material/DeviceThermostat';
-import MedicationIcon from '@mui/icons-material/Medication';
-import AssignmentTurnedInIcon from '@mui/icons-material/AssignmentTurnedIn';
 import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
 import ErrorIcon from '@mui/icons-material/Error';
+import Senior from '../../../resources/files/images/senior.png';
+import battery from '../../../resources/files/images/battery.png';
+import zeropercent from '../../../resources/files/images/zeropercent.png';
+import pullpercent from '../../../resources/files/images/pullpercent.png';
+import twentypercent from '../../../resources/files/images/twentypercent.png';
+import fortypercent from '../../../resources/files/images/fortypercent.png';
+import eightytypercent from '../../../resources/files/images/eightypercent.png';
+import sixtytypercent from '../../../resources/files/images/sixtypercent.png';
+import calendar from '../../../resources/files/images/calendar.png';
+import temperature from '../../../resources/files/images/temperature.png';
+import medicine from '../../../resources/files/images/medicine.png';
+import calendarBig from '../../../resources/files/images/calendarBig.png';
+import mornon from '../../../resources/files/images/mornon.png';
+import mornoff from '../../../resources/files/images/mornoff.png';
+import lunchon from '../../../resources/files/images/lunchon.png';
+import lunchoff from '../../../resources/files/images/lunchoff.png';
+import dinneron from '../../../resources/files/images/dinneron.png';
+import dinneroff from '../../../resources/files/images/dinneroff.png';
 
 export default function Main_guardian() {
   const tableHead1 = ["", "", "", "", "", ""];

   return (
     <>
       <main>
-        <div><Title title={"김복남 어르신"} explanation={"방문, 복약, 온도, 배터리 현황을 확인하세요."} /></div>
+        <div className="flex-start main-guardian"><img src={Senior} alt="" /><Title title={"김복남 어르신"} explanation={"방문, 복약, 온도, 배터리 현황을 확인하세요."} /></div>
         <div className="main-grid-guardian">
-          <ul className="content-box statistics-guardian">
-            <li className="flex-start">
-              <p><AssignmentTurnedInIcon sx={{ width: "5rem", height: "5rem", color: "#bf0629", borderRadius: "50px" }} /></p>
-              <p>방문 체크</p>
-              <p>이번달 보호사님이 방문한 횟수는 총 4회 입니다.</p>
-            </li>
-            <Calendar />
-          </ul>
-          <ul className="content-box statistics-guardian">
-            <li className="flex-start">
-              <p><MedicationIcon sx={{ width: "5rem", height: "5rem", color: "#0dd390", borderRadius: "50px" }} /></p>
-              <p>복약 체크</p>
-              <p>약을 잘 복용하고 계신지 체크해주세요</p>              
-            </li>
-            <li className="flex">
-                <p className="guardian-table-text">어제</p>
-                <p className="guardian-table-inner"><Table
-              className={"guardian-table"}
-              head={tableHead1}
-              contents={content1}
-              contentKey={Key1}
-            /></p>
-              </li>
-            <li className="flex">
-                <p className="guardian-table-text">2일 전</p>
-                <p className="guardian-table-inner"><Table
-              className={"guardian-table"}
-              head={tableHead2}
-              contents={content2}
-              contentKey={Key2}
-            /></p>
-              </li>
-              <li className="flex">
-                <p className="guardian-table-text">3일 전</p>
-                <p className="guardian-table-inner"><Table
-              className={"guardian-table"}
-              head={tableHead1}
-              contents={content1}
-              contentKey={Key1}
-            /></p>
-              </li>             
-          </ul>
-          <ul className="content-box statistics-guardian">
-            <li className="flex-start">
-              <p><DeviceThermostatIcon sx={{ width: "5rem", height: "5rem", color: "#f1de05", borderRadius: "50px" }} /></p>
-              <p>온도 체크</p>
-              <p>댁내 온도가 적절한지 체크해보세요.</p>
-            </li>
-            <li className="flex">
-                <p className="guardian-table-inner"><Table
-              className={"guardian-table1"}
-              head={tableHead3}
-              contents={content3}
-              contentKey={Key3}
-            /></p>
+          <div className=" statistics-guardian combine-left2 combine-middle-government">
+          <div className="flex-start margin-bottom2"><img src={calendarBig} alt="" /><TitleSmall title={"방문체크"} /></div>
+            <ul >         
+              <li>
+              <Calendar />
+              </li>     
+            </ul>
+          </div>
+          <div className=" statistics-guardian combine-right3">
+          <div className="flex-start margin-bottom2"><img src={temperature} alt="" /><TitleSmall title={"온도체크"} explanation={"댁내 온도가 적절한지 체크해보세요."}/></div>
+            <ul >
+              <li>
+                <DateMonth />
+                <Chart6 />
               </li>   
-          </ul>
-          <ul className="content-box statistics-guardian">
-            <li className="flex-start">
-              <p><BatteryCharging20Icon sx={{ width: "5rem", height: "5rem", color: "#5f9af3", borderRadius: "50px" }} /></p>
-              <p>현재 스마트 약상자의 배터리가 40% 입니다.</p>
-              <p></p>
-            </li>
-            <li>
-            <p className="red"><ErrorIcon sx={{ width: "1rem", height: "1rem", color: "red", borderRadius: "50px" }}/>충전이 필요합니다.</p>
-            </li>
-          </ul>
-          <div className="content-box combine-left combine-all-government">
-            
+            </ul>
+          </div>
+          
+          <div className="statistics-guardian combine-right3">
+          <div className="flex-start margin-bottom2"><img src={medicine} alt="" /><TitleSmall title={"복약체크"} explanation={"약을 잘 복용하고 계신지 체크해주세요."}/></div>
+            <ul className="">
+              <li className="guardian-medicine">
+                <DateDay />
+                <ul className="flex">
+                  <li>
+                    <img src={mornon} alt="" className="show"/>
+                    <img src={mornoff} alt="" />
+                  </li>
+                  <li>
+                    <img src={lunchon} alt="" />
+                    <img src={lunchoff} alt="" className="show"/>
+                  </li>
+                  <li>
+                    <img src={dinneron} alt="" />
+                    <img src={dinneroff} alt="" className="show"/>
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </div>
+          <div className="combine-left combine-all-government battery-wrap ">
+            <div className="battery flex-start"><img src={battery} alt="" /><p>현재 스마트 약상자의 배터리가 <em className="red">40</em>% 입니다.</p><p className="red">※충전이 필요합니다.</p></div> 
+            <div className="battery-img"> 
+              {/* 0%일때 */}
+              <img src={zeropercent} alt="" /> 
+              {/* 0~20%일때 */}
+              <img src={twentypercent} alt="" />
+              {/* 20~40%일때 */}
+              <img src={fortypercent} alt="" className="show"/>
+              {/* 40~60%일때 */}
+              <img src={sixtytypercent} alt="" />
+              {/* 60~80% 일때 */}
+              <img src={eightytypercent} alt="" />
+              {/* 80~100%일때 */}
+              <img src={pullpercent} alt="" />
+            </div>
 
           </div>
         </div>

cd6e5cd

697873e

client/views/pages/senior_management/SeniorSelectOne.jsx

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

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

...	...	@@ -16,42 +16,37 @@
16	16	<tr>
17	17	<th>이름</th>
18	18	<td>
19		- <span>김복남</span>
	19	+ <span></span>
20	20	</td>
21		- <th>사용자등록번호</th>
	21	+ <th>성별</th>
22	22	<td>
23		- <span>202280102</span>
	23	+ <span></span>
24	24	</td>
25	25	</tr>
26	26	<tr>
27	27	<th>생년월일</th>
28	28	<td>
29		- <span>1948.11.15</span>
	29	+ <span></span>
30	30	</td>
31	31	<th>연락처</th>
32	32	<td>
33		- <span>010-1234-5678</span>
	33	+ <span></span>
34	34	</td>
35	35	</tr>
36	36	<tr>
37		- <th>요양등급</th>
	37	+ <th>주소</th>
38	38	<td>
39	39	<span>1등급</span>
40	40	</td>
41		- <th>성별</th>
42		- <td>
43		- <span>남</span>
44		- </td>
	41	+
45	42	</tr>
46	43	<tr>
47		- <th>주소</th>
48		- <td>
49		- <span>경상북도 군위군 삼국유사면</span>
50		- </td>
51		- <th>보호자 비상연락망</th>
52		- <td>
53		- <span>010-1234-5678</span>
54		- </td>
	44	+ <th>필요복약</th>
	45	+ <td className="flex-start">
	46	+ <span>아침</span>
	47	+ <span>점심</span>
	48	+ <span>저녁</span>
	49	+ </td>
55	50	</tr>
56	51	<tr>
57	52	<th>복용중인 약</th>
...	...	@@ -60,9 +55,9 @@
60	55	</td>
61	56	</tr>
62	57	<tr>
63		- <th>기저질환</th>
	58	+ <th>비고</th>
64	59	<td colSpan={3} style={{height:"300px"}}>
65		- <span>고혈압</span>
	60	+ <span></span>
66	61	</td>
67	62	</tr>
68	63	</tbody>
...	...	@@ -72,14 +67,14 @@
72	67	className={"btn-large gray-btn"}
73	68	btnName={"이전"}
74	69	onClick={() => {
75		- navigate("/SeniorSelect");
	70	+ navigate("/UserAuthoriySelect_agency");
76	71	}}
77	72	/>
78	73	<Button
79	74	className={"btn-large green-btn"}
80	75	btnName={"수정"}
81	76	onClick={() => {
82		- navigate("/SeniorInsert");
	77	+ navigate("/UserAuthoriySelect_agency");
83	78	}}
84	79	/>
85	80	</div>

cd6e5cd

697873e

client/views/pages/user_management/UserAuthoriySelect_agency.jsx

--- client/views/pages/user_management/UserAuthoriySelect_agency.jsx

+++ client/views/pages/user_management/UserAuthoriySelect_agency.jsx


     if (id == 2) {
       return (
         <Button
-          className={"btn-small green-btn"}
+          className={"btn-small gray-btn"}
           btnName={"등록"}
           onClick={() => {
             navigate("/SeniorInsert");

           </table>
           <div className="btn-wrap flex-center">
             <Button
-              className={"btn-small green-btn"}
+              className={"btn-small gray-btn"}
               btnName={"등록"}
               onClick={() => {
                 InsertSenior(userName, gender, brith, telNum, homeAddress, note, medicineM, medicineL, medicineD)

       </Modal>
 
       <div className="tab-container">
-        <ul className="tab-menu">
+        <ul className="tab-menu flex-start">
           {data.map((item) => (
             <li
               key={item.id}

             />
           </div>
           <div className="btn-wrap flex-end">
-            <Button className={"btn-small green-btn"} btnName={"등록"} onClick={openModal3} />
+            <Button className={"btn-small gray-btn"} btnName={"등록"} onClick={openModal3} />
           </div>
           <ul className="tab-content">
             {data

...	...	@@ -1,6 +1,8 @@
1	1
2	2	/* layout 공통 */
3	3	textarea{border: 1px solid #d8d3c7; border-radius: 5px;}
	4	+em{font-style: normal;}
	5	+main img{margin-right: 1rem;}
4	6	/* grid */
5	7
6	8	.main-grid-admin {
...	...	@@ -29,8 +31,8 @@
29	31	height: 100%;
30	32	display: grid;
31	33	grid-template-columns: 1fr 1fr 1fr 1fr;
32		- grid-template-rows: 0.1fr 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr;
33		- gap: 1rem;
	34	+ grid-template-rows: 0.1fr;
	35	+ gap: 3rem;
34	36	}
35	37	.main-grid-hospital {
36	38	height: 100%;
...	...	@@ -45,7 +47,7 @@
45	47	display: grid;
46	48	grid-template-columns: 0.9fr 0.9fr;
47	49	grid-template-rows: 0.1fr 0.5fr 0.5fr;
48		- gap: 1rem;
	50	+ gap: 2rem;
49	51	}
50	52
51	53	.statistics-grid {
...	...	@@ -73,6 +75,9 @@
73	75	.combine-left-government2 {
74	76	grid-column: 1/4;
75	77	}
	78	+.combine-left-government3 {
	79	+ grid-column: 1/5;
	80	+}
76	81	.combine-right {
77	82	grid-column: 3/4;
78	83	}

...	...	@@ -24,6 +24,8 @@
24	24	background-color: white;
25	25	grid-area: header;
26	26	height: 87px;
	27	+ border-bottom: 1px solid #cccccc;
	28	+
27	29	}
28	30
29	31	.page-title span {
...	...	@@ -36,6 +38,7 @@
36	38	height: 100%;
37	39	background-color: #f2f0eb;
38	40	grid-area: nav;
	41	+ border-right: 1px solid #cccccc;
39	42	}
40	43	.nav{
41	44	position: relative;
...	...	@@ -116,19 +119,25 @@
116	119	background: #f25430;
117	120	border-radius: 30px;
118	121	font-size: 1.5rem;
	122	+ font-weight: 600;
119	123	color: #ffffff;
120	124	display: flex;
121	125	align-items: center;
122		- margin-right: 2rem;
	126	+ margin: 0 1rem;
123	127	cursor: pointer;
124	128	}
	129	+.info-id span, .logout span{
	130	+ margin: 0 auto;
	131	+}
	132	+.bottom-section{position: absolute; padding: 0 2rem; bottom: 3rem;}
125	133	.logout{background: #f26e50;}
126	134	#pages {
127	135	max-width: 100%;
128	136	height: 100%;
129	137	padding: 3rem;
130		- background-color: #f2f0eb;
	138	+ background-color: #f4f4f2;
131	139	grid-area: main;
	140	+ box-shadow: 0px 11px 12px -10px rgb(0 0 0 / 20%) inset;
132	141	}
133	142
134	143

...	...	@@ -4,23 +4,27 @@
4	4	font-family: 'AuctionGothic_Medium';
5	5	}
6	6	header > div{height: 100%;}
7		-header .page-title span {
8		- font-size: 1.7rem;
9		- margin: 0 auto;
10		-}
11	7	.join-btn{
12	8	background-color: transparent;
13	9	}
14		-.react-calendar{width: 90%; }
15	10	.highlight{
16	11	font-weight: 900;
17	12	background-color: #18924e;
18	13	}
19	14
20		-/* 기관조회 */
	15	+/* 시행기관 장비관리 리스트 */
	16	+
	17	+.visitlist{height: 55vh;}
	18	+.visitlist .agency-visitlist{border: 0;}
	19	+.visitlist .agency-visitlist th{background-color: #fdede9; }
	20	+.agency-calendar .react-calendar{height: 10vh;}
	21	+.agency-calendar .react-calendar__month-view__weekdays{display: none !important;}
	22	+.agency-calendar .react-calendar__month-view__days{flex-wrap: unset !important; padding: 0 0 3rem 0;}
	23	+.agency-calendar .react-calendar__month-view__days__day{flex: 0 0 2.85% !important; padding: 1rem 0;}
	24	+
	25	+/* .agency-calendar .react-calendar__month-view__days{overflow: hidden;} */
21	26
22	27	/* Q&A */
23		-.title{text-decoration: underline; cursor: pointer;}
24	28	.question-select input{width: 3%;}
25	29	.question-select label{width: 10%;}
26	30	.question-select select{width: 16%; height: 3.7rem;}
...	...	@@ -41,7 +45,6 @@
41	45	.questionnaire-table input{width: 9%;}
42	46	/* 카테고리 기관 추가*/
43	47	.explain-table th{background: #ffffff;}
44		-.react-calendar{width: 100%;}
45	48	.total p{font-size: 1.6rem; font-weight: 600;}
46	49	.total{color: #733c1d; }
47	50	.total-equip::before{
...	...	@@ -146,39 +149,35 @@
146	149	.statistics-govern li p:nth-of-type(3)::after {
147	150	content: "명";
148	151	}
	152	+.statistics-agency{border-radius: 1.5rem; box-shadow: 1px 1px 18px 1px rgb(0 0 0 / 13%);}
149	153	.statistics-agency li {
150		- position: relative;
151		- padding-left: 5rem;
152		- text-align: center;
	154	+ padding: 0 2rem;
153	155	}
154		-
155		-.statistics-agency li p:nth-of-type(1) {
156		- position: absolute;
157		- left: 0;
	156	+.statistics-agency li .text{padding-left: 1rem; width: 100%;}
	157	+.statistics-agency li div p:nth-of-type(1) {
	158	+ font-size: 1.8rem;
	159	+ font-weight: bold;
	160	+ color: #ed724a;
158	161	}
159		-
160		-.statistics-agency li p:nth-of-type(2) {
161		- padding-bottom: 0.5rem;
162		- font-size: 1.6rem;
	162	+.statistics-agency li div p:nth-of-type(2) {
	163	+ font-size: 2.5rem;
163	164	font-weight: bold;
164	165	}
165		-.statistics-agency li p:nth-of-type(3) {
166		- font-size: 1.6rem;
167		- font-weight: bold;
168		-}
169		-
170		-.statistics-agency li p:nth-of-type(3)::after {
	166	+.statistics-agency li div p:nth-of-type(2)::after{
171	167	content: "명";
	168	+ font-size: 1.5rem;
	169	+ color: #cbc9c9;
172	170	}
173	171	.statistics-guardian{height: 100%;}
	172	+.guardian-medicine{height: 16vh;}
174	173	.statistics-guardian li{
175	174	padding: 1rem 3rem;
176		- background: rgba(255, 254, 254, 0.5);
177		- border-radius: 10px;
	175	+ background: #ffffff;
	176	+ border-radius: 20px;
178	177	margin: 0 auto;
179	178	margin-bottom: 1rem;
180	179	}
181		-.statistics-guardian:nth-child(1) {
	180	+/* .statistics-guardian:nth-child(1) {
182	181	background: #fbe4e4;
183	182	}
184	183
...	...	@@ -195,7 +194,7 @@
195	194	}
196	195	.statistics-guardian li p{
197	196	padding: 0 2rem;
198		-}
	197	+} */
199	198	.statistics-guardian li:nth-child(2),
200	199	.statistics-guardian li:nth-child(3),
201	200	.statistics-guardian li:nth-child(4),
...	...	@@ -300,6 +299,7 @@
300	299	font-weight: bold;
301	300	margin-right: 2rem;
302	301	}
	302	+.main-guardian{margin-bottom: 3rem;}
303	303	.red{color: red;}
304	304	.main-battery-title span::after {
305	305	content: " 님의";
...	...	@@ -312,6 +312,10 @@
312	312	font-weight: 900;
313	313	}
314	314	.main-battery-title p{padding-right: 1rem;}
	315	+.battery-wrap{height: 10rem;}
	316	+.battery-img{position: relative; padding: 1.5rem 0 1.5rem 3rem;}
	317	+.battery-img img{position: absolute; display: none; box-shadow: 1px 1px 14px 1px rgba(0, 0, 0, 0.15); border-radius: 20px;}
	318	+.battery-img img.show{display: block; }
315	319	.map svg {
316	320	display: block;
317	321	}
...	...	@@ -329,24 +333,30 @@
329	333	font-weight: 500;
330	334	}
331	335	.battery p {
332		- font-size: 3rem;
	336	+ font-size: 2rem;
333	337	font-weight: bold;
334		- color: rgb(255, 121, 121);
335	338	text-align: center;
336	339	padding-right: 1rem;
337	340	}
338		-
339		-.battery::after {
340		- content: " 남았습니다.";
341		- font-size: 1.6rem;
342		- font-weight: 500;
343		-}
	341	+.battery p:nth-child(3){font-size: 1.5rem; padding-top: 0.7rem;}
344	342
345	343	#chartdiv1 {
346	344	height: 22vh;
347	345	}
348	346
349	347	/* ------------------------------------------------보호자 */
	348	+.react-calendar{width: 100%; border: none; height: 54vh;}
	349	+.react-calendar__month-view__days{padding: 2rem 0;}
	350	+.react-calendar__month-view__days button{padding: 2.5rem; border: 1px solid #fdede8; border-radius: 0;}
	351	+.react-calendar__tile--active:enabled:hover, .react-calendar__tile--active:enabled:focus{background: #e26f49;}
	352	+.react-calendar__tile--active{background: #e26f49;}
	353	+.weather-info
	354	+
	355	+/* 보호자 복약 */
	356	+.guardian-medicine ul li{position: relative;}
	357	+.guardian-medicine ul li img{position: absolute; display: none;}
	358	+.guardian-medicine ul li img.show{display: block;}
	359	+
350	360	/* ------------------------------------- main page --------------------------------- */
351	361	/* 사용자 정보*/
352	362	.user-img {
...	...	@@ -907,11 +917,21 @@
907	917	}
908	918
909	919	/* 사용자 관리 */
910		-.tab-menu-mobile{display: none;}
911		-.tab-menu {
	920	+.tab-menu .tab-menu-agency{
912	921	display: flex;
913	922	}
914		-
	923	+.tab-menu-agency li {
	924	+ padding: 1rem 2rem;
	925	+ margin-right: 0.2rem;
	926	+ color: #733c1d;
	927	+ font-size: 1.6rem;
	928	+ font-weight: bold;
	929	+ text-align: center;
	930	+}
	931	+.tab-menu-agency li.active {
	932	+ color: #f25430;
	933	+ border-bottom: 2px solid #f25430;
	934	+}
915	935	.tab-menu li {
916	936	padding: 1rem 2rem;
917	937	margin-right: 0.2rem;
...	...	@@ -923,7 +943,6 @@
923	943	text-align: center;
924	944	box-shadow: 3px -2px 5px -2px rgb(0 0 0 / 20%);
925	945	}
926		-
927	946	.tab-menu li.active {
928	947	background-color: #f25430;
929	948	color: #ffffff;

...	...	@@ -3,7 +3,7 @@
3	3	import "react-calendar/dist/Calendar.css";
4	4	import moment from "moment";
5	5
6		-export default function CalendarComponent(props) {
	6	+export default function CalendarComponent(props) {
7	7	const [value, setValue] = useState(new Date());
8	8	const mark = ["12-02-2023", "21-02-2023", "05-02-2023", "02-02-2023"];
9	9	return (

...	...	@@ -3,11 +3,11 @@
3	3	import "react-calendar/dist/Calendar.css";
4	4	import moment from "moment";
5	5
6		-export default function CalendarComponent(props) {
	6	+export default function CalendarComponent(props) {
7	7	const [value, setValue] = useState(new Date());
8	8	const mark = ["12-02-2023", "21-02-2023", "05-02-2023", "02-02-2023"];
9	9	return (
10		- <div className="w-full h-full p-10">
	10	+ <div className="w-full h-full p-10 agency-calendar">
11	11	<Calendar
12	12	className="w-96 h-full rounded-xl bg-violet-300"
13	13	onChange={setValue}

...	...	@@ -11,9 +11,9 @@
11	11	}
12	12
13	13	const ContentTitleStyled = styled.p`
14		- font-size: 4rem;
	14	+ font-size: 2.5rem;
15	15	font-weight: bold;
16		- margin: 0 3rem 2rem 0;
	16	+ margin: 1px 1rem 1rem 0px;
17	17	color: #733c1d;
18	18	/* &::after {
19	19	content: "";
...	...	@@ -40,6 +40,6 @@
40	40	`
41	41
42	42	const Explanation = styled.p`
43		- font-size: 2.6rem;
	43	+ font-size: 1.8rem;
44	44	color: #733c1d;
45	45	`; (No newline at end of file)

...	...	@@ -11,7 +11,7 @@
11	11	}
12	12
13	13	const TitleStyle = styled.h4`
14		- font-size: 2.5rem;
	14	+ font-size: 2rem;
15	15	font-weight: bold;
16	16	padding: 0.5rem;
17	17	margin-right: 1rem;

...	...	@@ -11,15 +11,12 @@
11	11	}
12	12
13	13	const TitleStyle = styled.h4`
14		- font-size: 1.6rem;
	14	+ font-size: 2.4rem;
15	15	font-weight: bold;
16		- padding: 0.5rem;
17	16	margin-right: 1rem;
18	17	`;
19	18
20	19	const Explanation = styled.p`
21	20	font-size: 1.4rem;
22		- padding: 0.5rem;
23	21	color: #cccccc;
24		- border-left: 2px solid #cccccc;
25	22	`;

...	...	@@ -10,26 +10,27 @@
10	10
11	11	if (item.childrens) {
12	12	return (
13		- <li
14		- className={open ? "sidebar-item open" : "sidebar-item"}
15		- onClick={toggleMenu}
16		- >
17		- <div className="sidebar-title flex">
18		- <div className="flex-start">
19		- {item.icon}
20		- <span>{item.title}</span>
	13	+ <li
	14	+ className={open ? "sidebar-item open" : "sidebar-item"}
	15	+ onClick={toggleMenu}
	16	+ >
	17	+ <div className="sidebar-title flex">
	18	+ <div className="flex-start">
	19	+ {item.icon}
	20	+ <span>{item.title}</span>
	21	+ </div>
	22	+ <KeyboardArrowDownIcon
	23	+ className="toggle"
	24	+ sx={{ fontSize: 20, color: "#333333", }}
	25	+ />
21	26	</div>
22		- <KeyboardArrowDownIcon
23		- className="toggle"
24		- sx={{ fontSize: 20, color: "#333333",}}
25		- />
26		- </div>
27		- <ul className="sidebar-content">
28		- {item.childrens.map((child, index) => (
29		- <SidebarItem key={index} item={child} />
30		- ))}
31		- </ul>
32		- </li>
	27	+ <ul className="sidebar-content">
	28	+ {item.childrens.map((child, index) => (
	29	+ <SidebarItem key={index} item={child} />
	30	+ ))}
	31	+ </ul>
	32	+ </li>
	33	+
33	34	);
34	35	} else {
35	36	return (

...	...	@@ -41,7 +41,6 @@
41	41	import EquipmentManagementSelectAdd from "./equipment/EquipmentManagementSelectAdd.jsx";
42	42	import RiskSet from "./setting/RiskSet.jsx";
43	43	import QandAInsert from "./callcenter/QandAInsert.jsx";
44		-import QuestionInsert from "./callcenter/QuestionInsert.jsx";
45	44	import QuestionConfirm from "./callcenter/QuestionConfirm.jsx";
46	45	import UserSelectOk from "./user_management/UserSelectOk.jsx";
47	46	import AuthorityManagement from "./setting/AuthorityManagement.jsx";
...	...	@@ -259,7 +258,7 @@
259	258	<Route path="/Medicalcare" element={<Medicalcare />}></Route>
260	259	<Route path="/Healthcare" element={<Healthcare />}></Route>
261	260	<Route path="/QuestionConfirm" element={<QuestionConfirm />}></Route>
262		- <Route path="/QuestionInsert" element={<QuestionInsert />}></Route>
	261	+
263	262	<Route path="/GuardianStatistics" element={<GuardianStatistics />}></Route>
264	263	<Route path="/Main_guardian" element={<Main_guardian />}></Route>
265	264	<Route path="/QuestionSelect" element={<QuestionSelect />}></Route>
...	...	@@ -626,7 +625,7 @@
626	625	<Route path="/Healthcare" element={<Healthcare />}></Route>
627	626	<Route path="/Join" element={<Join />}></Route>
628	627	<Route path="/QuestionSelect" element={<QuestionSelect />}></Route>
629		- <Route path="/QuestionInsert" element={<QuestionInsert />}></Route>
	628	+
630	629	<Route path="/Main_agency" element={<Main_agency />}></Route>
631	630	<Route path="/UserAuthoriySelect_agency" element={<UserAuthoriySelect_agency />}></Route>
632	631	<Route path="/SeniorInsert" element={<SeniorInsert />}></Route>
...	...	@@ -696,7 +695,7 @@
696	695	<Route path="/Main_guardian" element={<Main_guardian />}></Route>
697	696	<Route path="/QuestionSelect" element={<QuestionSelect />}></Route>
698	697	<Route path="/QuestionConfirm" element={<QuestionConfirm />}></Route>
699		- <Route path="/QuestionInsert" element={<QuestionInsert />}></Route>
	698	+
700	699	</Routes>
701	700	);
702	701	}

...	...	@@ -1,7 +1,7 @@
1	1	import React from "react";
2	2	import Button from "../../component/Button.jsx";
3	3	import Table from "../../component/Table.jsx";
4		-import Modal from "../../component/Modal.jsx";
	4	+import QnAModal from "../../component/QnAModal.jsx";
5	5	import { useNavigate } from "react-router";
6	6	import ContentTitle from "../../component/ContentTitle.jsx";
7	7	import RestoreFromTrashIcon from '@mui/icons-material/RestoreFromTrash';
...	...	@@ -9,6 +9,14 @@
9	9
10	10	export default function QuestionSelect() {
11	11	const navigate = useNavigate();
	12	+ const [modalOpen, setModalOpen] = React.useState(false);
	13	+ const openModal = () => {
	14	+ setModalOpen(true);
	15	+ };
	16	+ const closeModal = () => {
	17	+ setModalOpen(false);
	18	+ };
	19	+
12	20	//게시판
13	21	const thead = [
14	22	"No",
...	...	@@ -40,6 +48,8 @@
40	48	];
41	49	return (
42	50	<main>
	51	+ <QnAModal open={modalOpen} close={closeModal} header="기관 등록">
	52	+ </QnAModal>
43	53	<div className="content-wrap">
44	54	<ContentTitle contentTitle={"Q&A"} />
45	55	<div className="board-wrap">
...	...	@@ -53,9 +63,7 @@
53	63	<Button
54	64	className={"btn-small gray-btn"}
55	65	btnName={"작성하기"}
56		- onClick={() => {
57		- navigate("/QuestionInsert");
58		- }}
	66	+ onClick={openModal}
59	67	/>
60	68	</div>
61	69	</div>

...	...	@@ -22,26 +22,10 @@
22	22	setModalOpen(false);
23	23	};
24	24
25		- const [modalOpen3, setModalOpen3] = React.useState(false);
26		- const openModal3 = () => {
27		- // equipmentListData();
28		- setModalOpen3(true);
29		- };
30		- const closeModal3 = () => {
31		- setModalOpen3(false);
32		- };
33		-
34		- // 대상자 매칭 반납
35		- const seniorMatchDelete = () => {
36		- if (confirm('아니다') == false) {
37		- return;
38		- }
39		- // 대상자 매칭 반납 함수 사용하기
40		- };
41	25
42	26	const navigate = useNavigate();
43	27
44		- // 시스템 코드 - 장비 대여 상태 조회
	28	+ // 시스템 코드 - 장비 상태 조회
45	29	const equipmentStatesSelect = () => {
46	30	console.log('equipmentStatesSelect Function Run');
47	31
...	...	@@ -149,8 +133,47 @@
149	133	}
150	134
151	135	/******************************** 관리자 장비 (시작) ********************************/
	136	+ //로그 확인
	137	+ const logCheck = () => {
	138	+ console.log('equipment - change: ', equipment);
	139	+ };
	140	+
	141	+ // 장비 빈 초기값
	142	+ const equipment_ = {
	143	+ equipment_serial_number: null,
	144	+ equipment_type: null,
	145	+ equipment_name: null,
	146	+ equipment_state: null,
	147	+ equipment_product_date: null,
	148	+ equipment_stock_date: null,
	149	+ }
	150	+
	151	+
152	152	// 관리자 전체 장비 목록
153	153	const [equipmentList, setEquipmentList] = React.useState([]);
	154	+ // 장비
	155	+ const [equipment, setEquipment] = React.useState({
	156	+ equipment_serial_number: null,
	157	+ equipment_type: null,
	158	+ equipment_name: null,
	159	+ equipment_state: null,
	160	+ equipment_product_date: null,
	161	+ equipment_stock_date: null,
	162	+ });
	163	+ // 장비 등록 모달창
	164	+ const [equipmentInsertModal, setEquipmentInsertModal] = React.useState(false);
	165	+
	166	+ // 장비 등록 모달창 열기
	167	+ const equipmentInsertModalOpen = () => {
	168	+ setEquipmentInsertModal(true);
	169	+ };
	170	+ // 장비 등록 모달창 닫기
	171	+ const equipmentInsertModalClose = () => {
	172	+ // 장비 초기화
	173	+ setEquipment(equipment_);
	174	+ setEquipmentInsertModal(false);
	175	+ };
	176	+
154	177
155	178	// 관리자 전체 장비 목록 조회
156	179	const equipmentSelectList = () => {
...	...	@@ -169,6 +192,85 @@
169	192	});
170	193	}
171	194
	195	+ // 장비 임시 데이터
	196	+ const equipmentChange = (e) => {
	197	+ console.log('equipmentChange: ', e.target.name, e.target.value);
	198	+
	199	+ // 원본 데이터 복사 및 수정
	200	+ let data = {};
	201	+
	202	+ // 장비 종류가 '디지털 약상자'일 경우 모델 명에 '스마트 약상자' 입력
	203	+ if(e.target.name == "equipment_type" && e.target.value == "DIGITAL_MEDIBOX") {
	204	+ data = {
	205	+ ...equipment,
	206	+ [e.target.name]: e.target.value,
	207	+ equipment_name: "스마트 약상자"
	208	+ }
	209	+ } else { // 장비 종류 이외의 이벤트 핸들러일 경우
	210	+ data = {
	211	+ ...equipment,
	212	+ [e.target.name]: e.target.value
	213	+ }
	214	+ }
	215	+ // 복사 데이터를 원본 데이터에 덮어쓰기
	216	+ setEquipment(data);
	217	+ }
	218	+
	219	+ // 장비 등록
	220	+ const equipmentInsert = () => {
	221	+ console.log('equipmentInsert Function Run');
	222	+
	223	+ // 유효성 검사
	224	+ for(let i = 0; i < equipmentInsertHead.length; i++) {
	225	+ if(equipment[equipmentInsertKey[i]] == null) {
	226	+ alert(equipmentInsertHead[i] +'를 선택해 주세요');
	227	+ return;
	228	+ }
	229	+ }
	230	+
	231	+ fetch("/equipment/equipmentInsert.json", {
	232	+ method: "POST",
	233	+ headers: {
	234	+ 'Content-Type': 'application/json; charset=UTF-8'
	235	+ },
	236	+ body: JSON.stringify(equipment),
	237	+ }).then((response) => response.json()).then((data) => {
	238	+ console.log('equipmentInsert response : ', data);
	239	+ // 장비 목록 조회
	240	+ equipmentSelectList();
	241	+ // 장비 초기화
	242	+ setEquipment(equipment_);
	243	+ // 모달창 닫기
	244	+ setEquipmentInsertModal(false);
	245	+
	246	+ alert('등록이 완료됐습니다.');
	247	+ }).catch((error) => {
	248	+ console.log('equipmentInsert error : ', error);
	249	+ alert('등록에 실패했습니다.');
	250	+ });
	251	+ }
	252	+
	253	+ // 장비 등록 th
	254	+ const equipmentInsertHead = [
	255	+ "종류",
	256	+ "모델 명",
	257	+ "시리얼 넘버",
	258	+ "생산 일자",
	259	+ "입고 일자",
	260	+ ]
	261	+
	262	+ // 장비 등록 key
	263	+ const equipmentInsertKey = [
	264	+ "equipment_type",
	265	+ "equipment_name",
	266	+ "equipment_serial_number",
	267	+ "equipment_product_date",
	268	+ "equipment_stock_date",
	269	+ ]
	270	+
	271	+ //스마트 약상자 모델명 리스트 (예시)
	272	+ const smartMediBoxNameList = ["SMB-NB100", "NB100", "SDC-2000", "SDC-2002"]
	273	+
172	274	const thead1 = [
173	275	"No",
174	276	"모델 명",
...	...	@@ -176,7 +278,7 @@
176	278	"입고 일자",
177	279	"상태",
178	280	"보유 기관",
179		- "관리",
	281	+ "시행기관 관리",
180	282	];
181	283	const key1 = [
182	284	"equipment_name",
...	...	@@ -277,11 +379,6 @@
277	379
278	380
279	381	/******************************** 시행기관 장비 (시작) ********************************/
280		- //로그 확인
281		- const logCheck = () => {
282		- console.log('seniorMatchListByEquipment - change: ', seniorMatchListByEquipment.length);
283		- };
284		-
285	382	// 시행기관 전체 장비 목록
286	383	const [agencyEquipmentList, setAgencyEquipmentList] = React.useState([]);
287	384	// 시행기관 대상자 장비 목록
...	...	@@ -303,7 +400,6 @@
303	400	const [equipmentNotMatchSeniorList, setEquipmentNotMatchSeniorList] = React.useState([]);
304	401	// 담당자 목록
305	402	const [workerList, setWorkerList] = React.useState([]);
306		-
307	403
308	404	// 대상자 장비 등록 모달창 열기
309	405	const seniorMatchInsertModalOpen = (item) => {
...	...	@@ -698,15 +794,16 @@
698	794
699	795	// 마운트 시 실행 함수
700	796	React.useEffect(() => {
	797	+ // 공통
701	798	equipmentStatesSelect();
702	799	equipmentRentalStatesSelect();
703	800	equipmentNotMatchSeniorSelectList();
704	801	workerSelectList();
705	802
706		- //관리자
	803	+ // 관리자
707	804	equipmentSelectList();
708	805
709		- //시행기관
	806	+ // 시행기관
710	807	agencyEquipmentSelectList();
711	808	agencySeniorEquipmentSelectList();
712	809	agencyStockEquipmentSelectList();
...	...	@@ -754,8 +851,13 @@
754	851	<div className="btn-wrap flex-end margin-bottom ">
755	852	<Button
756	853	className={"btn-small gray-btn"}
	854	+ btnName={"LOG"}
	855	+ onClick={logCheck}
	856	+ />
	857	+ <Button
	858	+ className={"btn-small gray-btn"}
757	859	btnName={"등록"}
758		- onClick={openModal3}
	860	+ onClick={equipmentInsertModalOpen}
759	861	/>
760	862	</div>
761	863	</div>
...	...	@@ -783,6 +885,13 @@
783	885	<tr key={index}>
784	886	<td>{equipmentList.length - index}</td>
785	887	{key1.map((kes) => {
	888	+ if(kes == "equipment_state") {
	889	+ Object.keys(equipmentStates).map((key, idx) => {
	890	+ if(item[kes] == key) {
	891	+ item[kes] = Object.values(equipmentStates)[idx];
	892	+ }
	893	+ })
	894	+ }
786	895	return <td>{item[kes]}</td>
787	896	})}
788	897	<td>
...	...	@@ -1001,10 +1110,72 @@
1001	1110	];
1002	1111
1003	1112	//시작 탭 설정
1004		- const [index, setIndex] = React.useState(4);
	1113	+ const [index, setIndex] = React.useState(1);
1005	1114
1006	1115	return (
1007	1116	<main>
	1117	+
	1118	+ <Modal open={equipmentInsertModal} close={equipmentInsertModalClose} header="장비 등록">
	1119	+ <div className="board-wrap">
	1120	+ <div>
	1121	+ <table className="flex70 margin-bottom">
	1122	+ <tbody className="equipment-insert">
	1123	+ <tr>
	1124	+ <th>종류</th>
	1125	+ <td colSpan={5}>
	1126	+ <select defaultValue={""} name="equipment_type" onChange={equipmentChange}>
	1127	+ <option value="" disabled>선택</option>
	1128	+ <option value="DIGITAL_MEDIBOX">디지털 약상자</option>
	1129	+ <option value="ECG" disabled>심전도계</option>
	1130	+ <option value="SPHYGMOMANOMETER" disabled>혈압계</option>
	1131	+ </select>
	1132	+ </td>
	1133	+ </tr>
	1134	+ <tr>
	1135	+ <th>모델 명</th>
	1136	+ <td colSpan={5}>
	1137	+ <input type="text" value={equipment['equipment_name']} id="equipmentName" name="equipment_name" placeholder="모델 명을 입력해 주세요" onChange={equipmentChange}></input>
	1138	+ {/* {smartMediBoxNameList.map((item) => {
	1139	+ return (
	1140	+ <span>
	1141	+ <input type="radio" id={item} name="equipment_name" value={item}></input>
	1142	+ <label for={item}>{item}</label>
	1143	+ </span>
	1144	+ )
	1145	+ })} */}
	1146	+ </td>
	1147	+ </tr>
	1148	+ <tr>
	1149	+ <th>시리얼 넘버</th>
	1150	+ <td colSpan={5}>
	1151	+ <input type="text" name="equipment_serial_number" placeholder="S/N을 입력해 주세요" onChange={equipmentChange}/>
	1152	+ </td>
	1153	+ </tr>
	1154	+ <tr>
	1155	+ <th>생산 일자</th>
	1156	+ <td colSpan={5}>
	1157	+ <input type="date" name="equipment_product_date" onChange={equipmentChange}/>
	1158	+ </td>
	1159	+ </tr>
	1160	+ <tr>
	1161	+ <th>입고 일자</th>
	1162	+ <td colSpan={5}>
	1163	+ <input type="date" name="equipment_stock_date" onChange={equipmentChange}/>
	1164	+ </td>
	1165	+ </tr>
	1166	+ </tbody>
	1167	+ </table>
	1168	+ </div>
	1169	+ <div className="flex-center">
	1170	+ <Button
	1171	+ className={"btn-small gray-btn"}
	1172	+ btnName={"저장"}
	1173	+ onClick={equipmentInsert}
	1174	+ />
	1175	+ </div>
	1176	+ </div>
	1177	+ </Modal>
	1178	+
1008	1179	<Modal open={modalOpen} close={closeModal} header="납품 기관 선택">
1009	1180	<div className="board-wrap">
1010	1181	<div>
...	...	@@ -1020,42 +1191,6 @@
1020	1191	className={"btn-100 gray-btn"}
1021	1192	btnName={"닫기"}
1022	1193	onClick={closeModal}
1023		- />
1024		- </div>
1025		- </div>
1026		- </Modal>
1027		-
1028		- <Modal open={modalOpen3} close={closeModal3} header="장비 등록">
1029		- <div className="board-wrap">
1030		- <div>
1031		- <table className="flex70 margin-bottom">
1032		- <tbody className="equipment-insert">
1033		- <tr>
1034		- <th>장비명</th>
1035		- <td colSpan={5}>
1036		- <input type="text" name="" id="" />
1037		- </td>
1038		- </tr>
1039		- <tr>
1040		- <th>시리얼 넘버</th>
1041		- <td colSpan={5}>
1042		- <input type="text" name="" id="" />
1043		- </td>
1044		- </tr>
1045		- <tr>
1046		- <th>입고일자</th>
1047		- <td colSpan={5}>
1048		- <input type="text" name="" id="" />
1049		- </td>
1050		- </tr>
1051		- </tbody>
1052		- </table>
1053		- </div>
1054		- <div className="flex-center">
1055		- <Button
1056		- className={"btn-small gray-btn"}
1057		- btnName={"저장"}
1058		- onClick={closeModal3}
1059	1194	/>
1060	1195	</div>
1061	1196	</div>
...	...	@@ -1195,7 +1330,7 @@
1195	1330
1196	1331
1197	1332	<div className="tab-container">
1198		- <ul className="tab-menu">
	1333	+ <ul className="tab-menu flex-start">
1199	1334	{data.map((item) => (
1200	1335	<li
1201	1336	key={item.id}

...	...	@@ -2,157 +2,116 @@
2	2	import Title from "../../component/Title.jsx";
3	3	import Table from "../../component/Table.jsx";
4	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 Calendar from "../../component/Calendar.jsx";
8		-import AddCircleIcon from '@mui/icons-material/AddCircle';
9		-import PersonIcon from '@mui/icons-material/Person';
10		-
	5	+import Chart from "../../component/chart/Chart.jsx";
	6	+import Chart5_agency from "../../component/chart/Chart5_agency.jsx";
	7	+import Chart2_agency from "../../component/chart/Chart2_agency.jsx";
	8	+import AddCircleIcon from "@mui/icons-material/AddCircle";
	9	+import Calendar_agency from "../../component/Calendar_agency.jsx";
	10	+import tool from "../../../resources/files/images/tool.png";
	11	+import medicinebox from "../../../resources/files/images/medicinebox.png";
	12	+import box from "../../../resources/files/images/box.png";
	13	+import exchange from "../../../resources/files/images/exchange.png";
	14	+import error from "../../../resources/files/images/error.png";
	15	+import batteryAgency from "../../../resources/files/images/batteryAgency.png";
	16	+import medicineAgency from "../../../resources/files/images/medicineAgency.png";
	17	+import temperatureAgency from "../../../resources/files/images/temperatureAgency.png";
	18	+import TitleSmall from "../../component/TitleSmall.jsx";
11	19
12	20	export default function Main2() {
13		-
14		- const tableHead = [
15		- "연번",
16		- "계약업체명",
17		- "반납/교환",
18		- "담당자 연락처",
19		- "주소",
20		- ];
21		- const Key = [
22		- "name",
23		- "level_of_care",
24		- "birth",
25		- "phone",
26		- "address",
27		- ];
	21	+ const data = [
	22	+ {
	23	+ id: 1,
	24	+ title: "교환/수리 리스트",
	25	+ },
	26	+ {
	27	+ id: 2,
	28	+ title: "장비 추가 리스트",
	29	+ },
	30	+ ]
	31	+ const [index, setIndex] = React.useState(1);
	32	+ const thead = ["No", "이름", "대상자등록번호", "생년월일", "연락처", "주소", "미복약 누적 횟수",];
	33	+ const key = ["No", "name", "number", "birth", "phone", "address", "average"];
28	34	const content = [
29	35	{
30		- name: "1",
31		- level_of_care: "A복지관",
32		- birth: "교환",
	36	+ No: 1,
	37	+ name: "김복남",
	38	+ number: "00000001",
	39	+ birth: "1948.11.15",
33	40	phone: "010-1234-5678",
34	41	address: "경상북도 군위군 삼국유사면",
35		- },
36		- {
37		- name: "2",
38		- level_of_care: "B병원",
39		- birth: "반납",
40		- phone: "010-3333-3333",
41		- address: "경상북도 군위군 삼국유사면",
42		- },
43		- {
44		- name: "3",
45		- level_of_care: "C복지관",
46		- birth: "교환",
47		- phone: "010-3333-4444",
48		- address: "경상북도 군위군 삼국유사면",
49		- },
50		- {
51		- name: "4",
52		- level_of_care: "D복지관",
53		- birth: "교환",
54		- phone: "010-3333-5555",
55		- address: "경상북도 군위군 삼국유사면",
56		- },
57		- {
58		- name: "5",
59		- level_of_care: "E복지관",
60		- birth: "반납",
61		- phone: "010-3333-6666",
62		- address: "경상북도 군위군 삼국유사면",
	42	+ average: "6회",
63	43	},
64	44	];
65		- const tableHead2 = [
66		- "연번",
67		- "계약업체명",
68		- "반납/교환",
69		- "담당자 연락처",
70		- "주소",
71		- ];
72		- const Key2 = [
73		- "name",
74		- "level_of_care",
75		- "birth",
76		- "phone",
77		- "address",
78		- ];
79		- const content2 = [
80		- {
81		- name: "1",
82		- level_of_care: "A복지관",
83		- birth: "교환",
84		- phone: "010-1234-5678",
85		- address: "경상북도 군위군 삼국유사면",
86		- },
87		- {
88		- name: "2",
89		- level_of_care: "B병원",
90		- birth: "반납",
91		- phone: "010-3333-3333",
92		- address: "경상북도 군위군 삼국유사면",
93		- },
94		- {
95		- name: "3",
96		- level_of_care: "C복지관",
97		- birth: "교환",
98		- phone: "010-3333-4444",
99		- address: "경상북도 군위군 삼국유사면",
100		- },
101		- {
102		- name: "4",
103		- level_of_care: "D복지관",
104		- birth: "교환",
105		- phone: "010-3333-5555",
106		- address: "경상북도 군위군 삼국유사면",
107		- },
108		- {
109		- name: "5",
110		- level_of_care: "E복지관",
111		- birth: "반납",
112		- phone: "010-3333-6666",
113		- address: "경상북도 군위군 삼국유사면",
114		- },
115		- ];
	45	+
116	46
117	47	return (
118	48	<main>
119		- <div className="main-grid">
120		- <ul className="content-box statistics flex combine-left">
121		- <li>
122		- <p>전체 장비 대여수</p>
123		- <p>200개</p>
124		- </li>
125		- <li>
126		- <p>계약 업체 수</p>
127		- <p>20개 </p>
128		- </li>
129		- <li>
130		- <p>교환/수리 장비 수</p>
131		- <p>13개</p>
132		- </li>
133		- <li>
134		- <p>불량 장비 수</p>
135		- <p>1개</p>
	49	+ <div className="flex-start margin-bottom2"><img src={medicinebox} alt="" /><TitleSmall title={"대상자 현황"} explanation={"2023.02.28 기준"} /></div>
	50	+ <div className="main-grid-agency margin-bottom2">
	51	+ <ul className="content-box statistics-agency" background="#f7acba">
	52	+ <li className="flex-start">
	53	+ <img src={box} alt="" />
	54	+ <div className="text">
	55	+ <p>나의 관리 대상자</p>
	56	+ <p>40</p>
	57	+ </div>
136	58	</li>
137	59	</ul>
138		- <div className="content-box combine-left">
139		- <div className="flex margin-bottom">
140		- <Title title={"교환/수리 리스트"} explanation={"장비 교환/수리 리스트를 확인하세요."} />
141		- <AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
	60	+ <ul className="content-box statistics-agency" background="#8ef3d1">
	61	+ <li className="flex-start">
	62	+ <img src={medicineAgency} alt="" />
	63	+ <div className="text">
	64	+ <p>미복약 위험 대상자</p>
	65	+ <p>40</p>
	66	+ </div>
	67	+ </li>
	68	+ </ul>
	69	+ <ul className="content-box statistics-agency" background="#ebe7b9" >
	70	+ <li className="flex-start">
	71	+ <img src={temperatureAgency} alt="" />
	72	+ <div className="text">
	73	+ <p>댁내 온도 위험 대상자</p>
	74	+ <p>40</p>
	75	+ </div>
	76	+ </li>
	77	+ </ul>
	78	+ <ul className="content-box statistics-agency" background="#5f9af3">
	79	+ <li className="flex-start">
	80	+ <img src={batteryAgency} alt="" />
	81	+ <div className="text">
	82	+ <p>배터리 부족 대상자 </p>
	83	+ <p>40</p>
	84	+ </div>
	85	+ </li>
	86	+ </ul>
	87	+ </div>
	88	+ <div className="flex-start margin-bottom2"><img src={medicinebox} alt="" /><TitleSmall title={"장비 관리 리스트"} /></div>
	89	+ <div className="main-grid-agency">
	90	+ <div className="content-box combine-left-government3">
	91	+ <ul className="tab-menu-agency flex-start">
	92	+ {data.map((item) => (
	93	+ <li
	94	+ key={item.id}
	95	+ className={index === item.id ? "active" : null}
	96	+ onClick={() => setIndex(item.id)}
	97	+ >
	98	+ {item.title}
	99	+ </li>
	100	+ ))}
	101	+ </ul>
	102	+ <div className="content-wrap equipmentlist">
	103	+ <div className="margin-bottom2">
	104	+ <Calendar_agency />
	105	+ </div>
	106	+ <ul className="tab-content">
	107	+ {data
	108	+ .filter((item) => index === item.id)
	109	+ .map((item) => (
	110	+ <li>{item.description}</li>
	111	+ ))}
	112	+ </ul>
142	113	</div>
143		- <div className="flex" >
144		- <div style={{ width:"50%" }}><Calendar /></div>
145		- <div style={{ width:"50%" }}><Table head={tableHead} contents={content} contentKey={Key} /></div>
146		- </div>
147		-
148		- </div>
149		- <div className="content-box combine-left">
150		- <div className="flex margin-bottom">
151		- <Title title={"장비 추가 리스트"} explanation={"장비 추가 리스트를 확인하세요."} />
152		- <AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
153		- </div>
154		- <Table head={tableHead2} contents={content2} contentKey={Key2} />
155		- </div>
	114	+ </div>
156	115	</div>
157	116	</main>
158	117	);

...	...	@@ -5,128 +5,83 @@
5	5	import Chart from "../../component/chart/Chart.jsx";
6	6	import Chart5_agency from "../../component/chart/Chart5_agency.jsx";
7	7	import Chart2_agency from "../../component/chart/Chart2_agency.jsx";
8		-import Chart4 from "../../component/chart/Chart4.jsx";
9		-import ClusteredColumnChart from "../../component/chart/ClusteredColumnChart.jsx";
10		-import Donut1 from "../../component/chart/Donut1.jsx";
11		-import RowChart from "../../component/chart/RowChart.jsx";
12	8	import AddCircleIcon from "@mui/icons-material/AddCircle";
13	9	import Calendar_agency from "../../component/Calendar_agency.jsx";
14		-import BatteryCharging20Icon from '@mui/icons-material/BatteryCharging20';
15		-import DeviceThermostatIcon from '@mui/icons-material/DeviceThermostat';
16		-import MedicationIcon from '@mui/icons-material/Medication';
17		-import ElderlyIcon from '@mui/icons-material/Elderly';
	10	+import tool from "../../../resources/files/images/tool.png";
	11	+import medicinebox from "../../../resources/files/images/medicinebox.png";
	12	+import box from "../../../resources/files/images/box.png";
	13	+import exchange from "../../../resources/files/images/exchange.png";
	14	+import error from "../../../resources/files/images/error.png";
	15	+import batteryAgency from "../../../resources/files/images/batteryAgency.png";
	16	+import medicineAgency from "../../../resources/files/images/medicineAgency.png";
	17	+import temperatureAgency from "../../../resources/files/images/temperatureAgency.png";
	18	+import TitleSmall from "../../component/TitleSmall.jsx";
18	19
19	20	export default function Main2() {
20		- const thead = ["No", "이름","대상자등록번호", "생년월일", "연락처", "주소", "미복약 누적 횟수",];
21		- const key = ["No", "name","number", "birth", "phone", "address", "average"];
	21	+ const thead = ["No", "계약업체명", "구분", "담당자 연락처", "주소"];
	22	+ const key = ["No", "agency", "division", "phone", "address",];
22	23	const content = [
23	24	{
24	25	No: 1,
25		- name: "김복남",
26		- number: "00000001",
27		- birth: "1948.11.15",
	26	+ agency: "A복지관",
	27	+ division: "교환",
28	28	phone: "010-1234-5678",
29	29	address: "경상북도 군위군 삼국유사면",
30		- average: "6회",
31		- },
32		- ];
33		- const thead2 = ["No", "이름","대상자등록번호", "생년월일", "연락처", "주소", "최근 최저 온도","최근 최고 온도"];
34		- const key2 = ["No", "name","number", "birth", "phone", "address", "low", "high"];
35		- const content2 = [
36		- {
37		- No: 1,
38		- name: "김복남",
39		- number: "00000001",
40		- birth: "1948.11.15",
41		- phone: "010-1234-5678",
42		- address: "경상북도 군위군 삼국유사면",
43		- low: "6°C",
44		- high: "6°C",
45	30	},
46	31	];
47	32
	33	+
48	34	return (
49	35	<main>
50		- <div className="main-grid-agency">
	36	+ <div className="flex-start margin-bottom2"><img src={medicinebox} alt="" /><TitleSmall title={"대상자 현황"} explanation={"2023.02.28 기준"} /></div>
	37	+ <div className="main-grid-agency margin-bottom2">
51	38	<ul className="content-box statistics-agency" background="#f7acba">
52		- <li>
53		- <p><ElderlyIcon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#bf0629", borderRadius:"50px" }}/></p>
54		- <p>나의 관리 대상자</p>
55		- <p>40</p>
	39	+ <li className="flex-start">
	40	+ <img src={box} alt="" />
	41	+ <div className="text">
	42	+ <p>나의 관리 대상자</p>
	43	+ <p>40</p>
	44	+ </div>
56	45	</li>
57		- </ul>
	46	+ </ul>
58	47	<ul className="content-box statistics-agency" background="#8ef3d1">
59		- <li>
60		- <p><MedicationIcon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#076143", borderRadius:"50px" }}/></p>
61		- <p>미복약 위험 대상자</p>
62		- <p>40</p>
	48	+ <li className="flex-start">
	49	+ <img src={medicineAgency} alt="" />
	50	+ <div className="text">
	51	+ <p>미복약 위험 대상자</p>
	52	+ <p>40</p>
	53	+ </div>
63	54	</li>
64	55	</ul>
65	56	<ul className="content-box statistics-agency" background="#ebe7b9" >
66		- <li>
67		- <p><DeviceThermostatIcon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#f1de05", borderRadius:"50px" }}/></p>
68		- <p>댁내 온도 위험 대상자</p>
69		- <p>40</p>
	57	+ <li className="flex-start">
	58	+ <img src={temperatureAgency} alt="" />
	59	+ <div className="text">
	60	+ <p>댁내 온도 위험 대상자</p>
	61	+ <p>40</p>
	62	+ </div>
70	63	</li>
71	64	</ul>
72	65	<ul className="content-box statistics-agency" background="#5f9af3">
73		- <li>
74		- <p><BatteryCharging20Icon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#5f9af3", borderRadius:"50px" }}/></p>
75		- <p>배터리 부족 대상자 </p>
76		- <p>40</p>
	66	+ <li className="flex-start">
	67	+ <img src={batteryAgency} alt="" />
	68	+ <div className="text">
	69	+ <p>배터리 부족 대상자 </p>
	70	+ <p>40</p>
	71	+ </div>
77	72	</li>
78		- </ul>
79		-
80		- <div className="content-box bg-1 combine-left-government2 combine-middle-government">
81		- <div className="flex">
82		- <Title title={"복용률 통계"} explanation={"복용률 현황을 확인할 수 있습니다."} />
83		- <AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
84		- </div>
85		- <Chart2_agency />
	73	+ </ul>
	74	+ </div>
	75	+ <div className="flex-start margin-bottom2"><img src={medicinebox} alt="" /><TitleSmall title={"방문 관리 리스트"} /></div>
	76	+ <div className="main-grid-agency">
	77	+ <div className="content-box combine-left-government3 visitlist">
	78	+ <div className="margin-bottom2">
	79	+ <Calendar_agency />
	80	+ </div>
	81	+ <div>
	82	+ <Table className="agency-visitlist" head={thead} contents={content} contentKey={key} />
	83	+ </div>
86	84	</div>
87		- <div className="content-box bg-2 combine-left-government2 combine-bottom-government6">
88		- <div className="flex">
89		- <Title title={"미복약 위험 대상자 리스트"} explanation={"월별 약상자 사용 인원"} />
90		- <AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
91		- </div>
92		- <Table
93		- className={"medicine-table"}
94		- head={thead}
95		- contents={content}
96		- contentKey={key}
97		- onClick={() => {
98		- navigate("/MedicineCareSelectOne");
99		- }}
100		- />
101		- </div>
102		- <div className="content-box bg-1 combine-left-government2 combine-bottom-government7">
103		- <div className="flex">
104		- <Title title={"댁내온도 위험 대상자 리스트"} explanation={"월별 약상자 사용 인원"} />
105		- <AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
106		- </div>
107		- <Table
108		- className={"medicine-table"}
109		- head={thead2}
110		- contents={content2}
111		- contentKey={key2}
112		- onClick={() => {
113		- navigate("/MedicineCareSelectOne");
114		- }}
115		- />
116		- </div>
117		- <div className="content-box combine-right-government2 combine-bottom-government5">
118		- <div className="flex">
119		- <Title title={"나의 관리 대상자"} explanation={"지역별 대상자 현황을 확인할 수 있습니다."} />
120		- <AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
121		- </div>
122		- <Chart5_agency />
123		- </div>
124		- <div className="content-box combine-right-government combine-bottom-government2">
125		- <div className="flex">
126		- <Title title={"방문 달력"} explanation={"방문 일정을 캘린더로 관리하세요."} />
127		- </div>
128		- <Calendar_agency />
129		- </div>
130	85	</div>
131	86	</main>
132	87	);

...	...	@@ -2,13 +2,31 @@
2	2	import Title from "../../component/Title.jsx";
3	3	import Table from "../../component/Table.jsx";
4	4	import Calendar from "../../component/Calendar.jsx";
	5	+import TitleSmall from "../../component/TitleSmall.jsx";
	6	+import DateDay from "../../component/DateDay.jsx";
	7	+import DateMonth from "../../component/DateMonth.jsx";
	8	+import Chart6 from "../../component/chart/Chart6.jsx";
5	9	import ClearIcon from '@mui/icons-material/Clear';
6		-import BatteryCharging20Icon from '@mui/icons-material/BatteryCharging20';
7		-import DeviceThermostatIcon from '@mui/icons-material/DeviceThermostat';
8		-import MedicationIcon from '@mui/icons-material/Medication';
9		-import AssignmentTurnedInIcon from '@mui/icons-material/AssignmentTurnedIn';
10	10	import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
11	11	import ErrorIcon from '@mui/icons-material/Error';
	12	+import Senior from '../../../resources/files/images/senior.png';
	13	+import battery from '../../../resources/files/images/battery.png';
	14	+import zeropercent from '../../../resources/files/images/zeropercent.png';
	15	+import pullpercent from '../../../resources/files/images/pullpercent.png';
	16	+import twentypercent from '../../../resources/files/images/twentypercent.png';
	17	+import fortypercent from '../../../resources/files/images/fortypercent.png';
	18	+import eightytypercent from '../../../resources/files/images/eightypercent.png';
	19	+import sixtytypercent from '../../../resources/files/images/sixtypercent.png';
	20	+import calendar from '../../../resources/files/images/calendar.png';
	21	+import temperature from '../../../resources/files/images/temperature.png';
	22	+import medicine from '../../../resources/files/images/medicine.png';
	23	+import calendarBig from '../../../resources/files/images/calendarBig.png';
	24	+import mornon from '../../../resources/files/images/mornon.png';
	25	+import mornoff from '../../../resources/files/images/mornoff.png';
	26	+import lunchon from '../../../resources/files/images/lunchon.png';
	27	+import lunchoff from '../../../resources/files/images/lunchoff.png';
	28	+import dinneron from '../../../resources/files/images/dinneron.png';
	29	+import dinneroff from '../../../resources/files/images/dinneroff.png';
12	30
13	31	export default function Main_guardian() {
14	32	const tableHead1 = ["", "", "", "", "", ""];
...	...	@@ -65,77 +83,64 @@
65	83	return (
66	84	<>
67	85	<main>
68		- <div><Title title={"김복남 어르신"} explanation={"방문, 복약, 온도, 배터리 현황을 확인하세요."} /></div>
	86	+ <div className="flex-start main-guardian"><img src={Senior} alt="" /><Title title={"김복남 어르신"} explanation={"방문, 복약, 온도, 배터리 현황을 확인하세요."} /></div>
69	87	<div className="main-grid-guardian">
70		- <ul className="content-box statistics-guardian">
71		- <li className="flex-start">
72		- <p><AssignmentTurnedInIcon sx={{ width: "5rem", height: "5rem", color: "#bf0629", borderRadius: "50px" }} /></p>
73		- <p>방문 체크</p>
74		- <p>이번달 보호사님이 방문한 횟수는 총 4회 입니다.</p>
75		- </li>
76		- <Calendar />
77		- </ul>
78		- <ul className="content-box statistics-guardian">
79		- <li className="flex-start">
80		- <p><MedicationIcon sx={{ width: "5rem", height: "5rem", color: "#0dd390", borderRadius: "50px" }} /></p>
81		- <p>복약 체크</p>
82		- <p>약을 잘 복용하고 계신지 체크해주세요</p>
83		- </li>
84		- <li className="flex">
85		- <p className="guardian-table-text">어제</p>
86		- <p className="guardian-table-inner"><Table
87		- className={"guardian-table"}
88		- head={tableHead1}
89		- contents={content1}
90		- contentKey={Key1}
91		- /></p>
92		- </li>
93		- <li className="flex">
94		- <p className="guardian-table-text">2일 전</p>
95		- <p className="guardian-table-inner"><Table
96		- className={"guardian-table"}
97		- head={tableHead2}
98		- contents={content2}
99		- contentKey={Key2}
100		- /></p>
101		- </li>
102		- <li className="flex">
103		- <p className="guardian-table-text">3일 전</p>
104		- <p className="guardian-table-inner"><Table
105		- className={"guardian-table"}
106		- head={tableHead1}
107		- contents={content1}
108		- contentKey={Key1}
109		- /></p>
110		- </li>
111		- </ul>
112		- <ul className="content-box statistics-guardian">
113		- <li className="flex-start">
114		- <p><DeviceThermostatIcon sx={{ width: "5rem", height: "5rem", color: "#f1de05", borderRadius: "50px" }} /></p>
115		- <p>온도 체크</p>
116		- <p>댁내 온도가 적절한지 체크해보세요.</p>
117		- </li>
118		- <li className="flex">
119		- <p className="guardian-table-inner"><Table
120		- className={"guardian-table1"}
121		- head={tableHead3}
122		- contents={content3}
123		- contentKey={Key3}
124		- /></p>
	88	+ <div className=" statistics-guardian combine-left2 combine-middle-government">
	89	+ <div className="flex-start margin-bottom2"><img src={calendarBig} alt="" /><TitleSmall title={"방문체크"} /></div>
	90	+ <ul >
	91	+ <li>
	92	+ <Calendar />
	93	+ </li>
	94	+ </ul>
	95	+ </div>
	96	+ <div className=" statistics-guardian combine-right3">
	97	+ <div className="flex-start margin-bottom2"><img src={temperature} alt="" /><TitleSmall title={"온도체크"} explanation={"댁내 온도가 적절한지 체크해보세요."}/></div>
	98	+ <ul >
	99	+ <li>
	100	+ <DateMonth />
	101	+ <Chart6 />
125	102	</li>
126		- </ul>
127		- <ul className="content-box statistics-guardian">
128		- <li className="flex-start">
129		- <p><BatteryCharging20Icon sx={{ width: "5rem", height: "5rem", color: "#5f9af3", borderRadius: "50px" }} /></p>
130		- <p>현재 스마트 약상자의 배터리가 40% 입니다.</p>
131		- <p></p>
132		- </li>
133		- <li>
134		- <p className="red"><ErrorIcon sx={{ width: "1rem", height: "1rem", color: "red", borderRadius: "50px" }}/>충전이 필요합니다.</p>
135		- </li>
136		- </ul>
137		- <div className="content-box combine-left combine-all-government">
138		-
	103	+ </ul>
	104	+ </div>
	105	+
	106	+ <div className="statistics-guardian combine-right3">
	107	+ <div className="flex-start margin-bottom2"><img src={medicine} alt="" /><TitleSmall title={"복약체크"} explanation={"약을 잘 복용하고 계신지 체크해주세요."}/></div>
	108	+ <ul className="">
	109	+ <li className="guardian-medicine">
	110	+ <DateDay />
	111	+ <ul className="flex">
	112	+ <li>
	113	+ <img src={mornon} alt="" className="show"/>
	114	+ <img src={mornoff} alt="" />
	115	+ </li>
	116	+ <li>
	117	+ <img src={lunchon} alt="" />
	118	+ <img src={lunchoff} alt="" className="show"/>
	119	+ </li>
	120	+ <li>
	121	+ <img src={dinneron} alt="" />
	122	+ <img src={dinneroff} alt="" className="show"/>
	123	+ </li>
	124	+ </ul>
	125	+ </li>
	126	+ </ul>
	127	+ </div>
	128	+ <div className="combine-left combine-all-government battery-wrap ">
	129	+ <div className="battery flex-start"><img src={battery} alt="" /><p>현재 스마트 약상자의 배터리가 <em className="red">40</em>% 입니다.</p><p className="red">※충전이 필요합니다.</p></div>
	130	+ <div className="battery-img">
	131	+ {/* 0%일때 */}
	132	+ <img src={zeropercent} alt="" />
	133	+ {/* 0~20%일때 */}
	134	+ <img src={twentypercent} alt="" />
	135	+ {/* 20~40%일때 */}
	136	+ <img src={fortypercent} alt="" className="show"/>
	137	+ {/* 40~60%일때 */}
	138	+ <img src={sixtytypercent} alt="" />
	139	+ {/* 60~80% 일때 */}
	140	+ <img src={eightytypercent} alt="" />
	141	+ {/* 80~100%일때 */}
	142	+ <img src={pullpercent} alt="" />
	143	+ </div>
139	144
140	145	</div>
141	146	</div>

...	...	@@ -221,7 +221,7 @@
221	221	if (id == 2) {
222	222	return (
223	223	<Button
224		- className={"btn-small green-btn"}
	224	+ className={"btn-small gray-btn"}
225	225	btnName={"등록"}
226	226	onClick={() => {
227	227	navigate("/SeniorInsert");
...	...	@@ -524,7 +524,7 @@
524	524	</table>
525	525	<div className="btn-wrap flex-center">
526	526	<Button
527		- className={"btn-small green-btn"}
	527	+ className={"btn-small gray-btn"}
528	528	btnName={"등록"}
529	529	onClick={() => {
530	530	InsertSenior(userName, gender, brith, telNum, homeAddress, note, medicineM, medicineL, medicineD)
...	...	@@ -535,7 +535,7 @@
535	535	</Modal>
536	536
537	537	<div className="tab-container">
538		- <ul className="tab-menu">
	538	+ <ul className="tab-menu flex-start">
539	539	{data.map((item) => (
540	540	<li
541	541	key={item.id}
...	...	@@ -565,7 +565,7 @@
565	565	/>
566	566	</div>
567	567	<div className="btn-wrap flex-end">
568		- <Button className={"btn-small green-btn"} btnName={"등록"} onClick={openModal3} />
	568	+ <Button className={"btn-small gray-btn"} btnName={"등록"} onClick={openModal3} />
569	569	</div>
570	570	<ul className="tab-content">
571	571	{data

Delete comment