Commit @e672fe9c4967d39d831a960aaf16d0dc7ff1ab00

16cd96b

e672fe9

.gitignore

--- .gitignore

+++ .gitignore

...	...	@@ -1,2 +1,3 @@
1	1	client/build/
2		-server/logs/ (파일 끝에 줄바꿈 문자 없음)
	2	+server/logs/
	3	+node_modules

16cd96b

e672fe9

client/resources/css/common.css

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

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


   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%;

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

16cd96b

e672fe9

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;
 }
 
 

16cd96b

e672fe9

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;
 }

   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 */
 .question-select input{width: 3%;}

 .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;}

 }
 
 /* 사용자 관리 */
-.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;

e672fe9

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

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

Binary file is not shown

e672fe9

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

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

Binary file is not shown

e672fe9

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

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

Binary file is not shown

e672fe9

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

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

Binary file is not shown

e672fe9

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

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

Binary file is not shown

e672fe9

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

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

Binary file is not shown

e672fe9

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

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

Binary file is not shown

e672fe9

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

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

Binary file is not shown

e672fe9

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	+

16cd96b

e672fe9

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}

16cd96b

e672fe9

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;
 `;

e672fe9

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	+}

16cd96b

e672fe9

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;

16cd96b

e672fe9

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>

16cd96b

e672fe9

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>
   );
 }

16cd96b

e672fe9

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 (

16cd96b

e672fe9

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>
   );
 }

16cd96b

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	-}

16cd96b

e672fe9

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>

16cd96b

e672fe9

client/views/pages/equipment/EquipmentManagementSelect.jsx

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

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


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

16cd96b

e672fe9

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>
   );

16cd96b

e672fe9

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>
   );

16cd96b

e672fe9

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>

16cd96b

e672fe9

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

...	...	@@ -1195,7 +1195,7 @@
1195	1195
1196	1196
1197	1197	<div className="tab-container">
1198		- <ul className="tab-menu">
	1198	+ <ul className="tab-menu flex-start">
1199	1199	{data.map((item) => (
1200	1200	<li
1201	1201	key={item.id}

...	...	@@ -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}
...	...	@@ -566,7 +566,7 @@
566	566	/>
567	567	</div>
568	568	<div className="btn-wrap flex-end">
569		- <Button className={"btn-small green-btn"} btnName={"등록"} onClick={openModal3} />
	569	+ <Button className={"btn-small gray-btn"} btnName={"등록"} onClick={openModal3} />
570	570	</div>
571	571	<ul className="tab-content">
572	572	{data

...	...	@@ -31,8 +31,8 @@
31	31	height: 100%;
32	32	display: grid;
33	33	grid-template-columns: 1fr 1fr 1fr 1fr;
34		- grid-template-rows: 0.1fr 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr;
35		- gap: 1rem;
	34	+ grid-template-rows: 0.1fr;
	35	+ gap: 3rem;
36	36	}
37	37	.main-grid-hospital {
38	38	height: 100%;
...	...	@@ -75,6 +75,9 @@
75	75	.combine-left-government2 {
76	76	grid-column: 1/4;
77	77	}
	78	+.combine-left-government3 {
	79	+ grid-column: 1/5;
	80	+}
78	81	.combine-right {
79	82	grid-column: 3/4;
80	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,10 +4,6 @@
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	}
...	...	@@ -16,7 +12,17 @@
16	12	background-color: #18924e;
17	13	}
18	14
19		-/* 기관조회 */
	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;} */
20	26
21	27	/* Q&A */
22	28	.question-select input{width: 3%;}
...	...	@@ -143,29 +149,24 @@
143	149	.statistics-govern li p:nth-of-type(3)::after {
144	150	content: "명";
145	151	}
	152	+.statistics-agency{border-radius: 1.5rem; box-shadow: 1px 1px 18px 1px rgb(0 0 0 / 13%);}
146	153	.statistics-agency li {
147		- position: relative;
148		- padding-left: 5rem;
149		- text-align: center;
	154	+ padding: 0 2rem;
150	155	}
151		-
152		-.statistics-agency li p:nth-of-type(1) {
153		- position: absolute;
154		- 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;
155	161	}
156		-
157		-.statistics-agency li p:nth-of-type(2) {
158		- padding-bottom: 0.5rem;
159		- font-size: 1.6rem;
	162	+.statistics-agency li div p:nth-of-type(2) {
	163	+ font-size: 2.5rem;
160	164	font-weight: bold;
161	165	}
162		-.statistics-agency li p:nth-of-type(3) {
163		- font-size: 1.6rem;
164		- font-weight: bold;
165		-}
166		-
167		-.statistics-agency li p:nth-of-type(3)::after {
	166	+.statistics-agency li div p:nth-of-type(2)::after{
168	167	content: "명";
	168	+ font-size: 1.5rem;
	169	+ color: #cbc9c9;
169	170	}
170	171	.statistics-guardian{height: 100%;}
171	172	.guardian-medicine{height: 16vh;}
...	...	@@ -916,11 +917,21 @@
916	917	}
917	918
918	919	/* 사용자 관리 */
919		-.tab-menu-mobile{display: none;}
920		-.tab-menu {
	920	+.tab-menu .tab-menu-agency{
921	921	display: flex;
922	922	}
923		-
	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	+}
924	935	.tab-menu li {
925	936	padding: 1rem 2rem;
926	937	margin-right: 0.2rem;
...	...	@@ -932,7 +943,6 @@
932	943	text-align: center;
933	944	box-shadow: 3px -2px 5px -2px rgb(0 0 0 / 20%);
934	945	}
935		-
936	946	.tab-menu li.active {
937	947	background-color: #f25430;
938	948	color: #ffffff;

...	...	@@ -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	`; (파일 끝에 줄바꿈 문자 없음)

...	...	@@ -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;

...	...	@@ -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>

...	...	@@ -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	);

Delete comment