최정임 최정임 2023-02-14
230214 최정임 4개 시스템 하나로 합치는 중
@362c21e11fb342b46be0588d03821b70792432a0
Global.js
--- Global.js
+++ Global.js
@@ -4,6 +4,7 @@
 const LOG_BASE_DIR = `${__dirname}/server/logs`;
 const SERVICE_STATUS = process.env.NODE_ENV;//development, production
 const PORT = 80;
+const SYSTEM_VIEW_TYPE = 'admin';//admin, government, agency, guardian
 
 module.exports = {
     PROJECT_NAME,
client/resources/css/common.css
--- client/resources/css/common.css
+++ client/resources/css/common.css
@@ -301,4 +301,8 @@
 hr {
   border-top: 1px solid #d1e4e3;
   margin-top: 2rem
-}
(No newline at end of file)
+}
+
+/* 컬러 */
+.yellow{background: #f2db71;}
+.sky{background-color: #d1e4e3;}
client/resources/css/main.css
--- client/resources/css/main.css
+++ client/resources/css/main.css
@@ -822,8 +822,7 @@
 }
 
 .tab-menu li {
-  width: 200px;
-  padding: 1rem;
+  padding: 1rem 2rem;
   background-color: #f8f8f8;
   border-radius: 0.5rem 0.5rem 0 0;
   font-size: 1.6rem;
client/resources/css/reset.css
--- client/resources/css/reset.css
+++ client/resources/css/reset.css
@@ -31,12 +31,13 @@
   vertical-align: top;
 }
 
+.th{border: 1px solid #e4dccf;}
+.td{border: 1px solid #e4dccf;}
 table {
   width: 100%;
   border-collapse: collapse;
-  border-bottom: 1px solid #e4dccf;
+  border: 1px solid #e4dccf;
 }
-
 th{
   padding: 0.5rem;
   font-weight: bold;
@@ -46,11 +47,10 @@
 }
 
 td {
-  padding: 1rem;
+  padding: 0.5rem;
   color: #333333;
   font-size: 1.6rem;
   text-align: center;
-  border-top: 1px solid #ececec;
 }
 tr{cursor: pointer;}
 
 
client/views/component/AgencySearch.jsx (added)
+++ client/views/component/AgencySearch.jsx
@@ -0,0 +1,221 @@
+import { style } from "d3";
+import React, { useState } from "react";
+
+import Button from "./Button.jsx";
+
+const CATEGORY_LIST = [
+  { id: 0, data: "서울" },
+  { id: 1, data: "인천" },
+  { id: 2, data: "경기" },
+  { id: 3, data: "경북" },
+  { id: 4, data: "경남" },
+  { id: 5, data: "전북" },
+  { id: 6, data: "전남" },
+  { id: 7, data: "제주" },
+];
+const CATEGORY_LIST1 = [
+  { id: 0, data: "전체" },
+  { id: 0, data: "광현리" },
+  { id: 1, data: "금구리" },
+  { id: 2, data: "내량리" },
+  { id: 3, data: "대북리" },
+  { id: 4, data: "대흥리" },
+  { id: 5, data: "동부리" },
+  { id: 6, data: "무성리" },
+  { id: 7, data: "사직리" },
+  { id: 8, data: "삽령리" },
+  { id: 9, data: "상곡리" },
+  { id: 10, data: "서부리" },
+  { id: 11, data: "수서리" },
+  { id: 12, data: "오곡리" },
+  { id: 13, data: "외량리" },
+  { id: 14, data: "용대리" },
+  { id: 15, data: "정리" },
+  { id: 15, data: "하곡리" },
+];
+const CATEGORY_LIST2 = [
+  { id: 0, data: "전체" },
+  { id: 0, data: "사리리" },
+  { id: 1, data: "보현리" },
+  { id: 2, data: "복성리" },
+  { id: 3, data: "위성리" },
+  { id: 4, data: "달산리" },
+  { id: 5, data: "송원리" },
+  { id: 6, data: "신계리" },
+  { id: 7, data: "도산리" },
+  { id: 8, data: "서경리" },
+  { id: 9, data: "평호리" },
+  { id: 10, data: "산법리" },
+  { id: 11, data: "내의리" },
+  { id: 12, data: "봉황리" },
+  { id: 13, data: "봉소리" },
+];
+const CATEGORY_LIST3 = [
+  { id: 0, data: "전체" },
+  { id: 0, data: "노행리" },
+  { id: 1, data: "오천리" },
+  { id: 2, data: "성리" },
+  { id: 3, data: "병수리" },
+  { id: 4, data: "불로리" },
+  { id: 5, data: "내리리" },
+  { id: 6, data: "중구리" },
+  { id: 7, data: "거매리" },
+  { id: 8, data: "장군리" },
+  { id: 9, data: "장기리" },
+  { id: 10, data: "금매리" },
+  { id: 11, data: "화계리" },
+  { id: 12, data: "마시리" },
+  { id: 13, data: "매곡리" },
+  { id: 14, data: "고곡리" },
+];
+const CATEGORY_LIST4 = [
+  { id: 0, data: "전체" },
+  { id: 0, data: "창평리" },
+  { id: 1, data: "가호리" },
+  { id: 2, data: "춘산리" },
+  { id: 3, data: "대율리" },
+  { id: 4, data: "동산리" },
+  { id: 5, data: "남산리" },
+  { id: 6, data: "명산리" },
+  { id: 7, data: "신화리" },
+];
+
+const CATEGORY_LIST5 = [
+  { id: 0, data: "전체" },
+  { id: 0, data: "나호리" },
+  { id: 1, data: "이화리" },
+  { id: 2, data: "두북리" },
+  { id: 3, data: "선곡리" },
+  { id: 4, data: "미성리" },
+  { id: 5, data: "모산리" },
+  { id: 6, data: "문덕리" },
+  { id: 7, data: "달산리" },
+  { id: 8, data: "봉산리" },
+];
+
+const CATEGORY_LIST6 = [
+  { id: 0, data: "전체" },
+  { id: 0, data: "읍내리" },
+  { id: 1, data: "수북리" },
+  { id: 2, data: "수서리" },
+  { id: 3, data: "이지리" },
+  { id: 4, data: "파전리" },
+  { id: 5, data: "신덕리" },
+  { id: 6, data: "지호리" },
+  { id: 7, data: "연계리" },
+  { id: 8, data: "매성리" },
+  { id: 9, data: "원산리" },
+  { id: 10, data: "금양리" },
+];
+const CATEGORY_LIST7 = [
+  { id: 0, data: "전체" },
+  { id: 0, data: "백학리" },
+  { id: 1, data: "삼산리" },
+  { id: 2, data: "봉림리" },
+  { id: 3, data: "무암리" },
+  { id: 4, data: "운산리" },
+  { id: 5, data: "화본리" },
+  { id: 6, data: "화전리" },
+];
+
+const CATEGORY_LIST8 = [
+  { id: 0, data: "전체" },
+  { id: 0, data: "화수리" },
+  { id: 1, data: "화북리" },
+  { id: 2, data: "괴산리" },
+  { id: 3, data: "학성리" },
+  { id: 4, data: "장곡리" },
+  { id: 5, data: "인곡리" },
+  { id: 6, data: "양지리" },
+  { id: 7, data: "낙전리" },
+  { id: 8, data: "가암리" },
+  { id: 9, data: "석산리" },
+  { id: 10, data: "학암리" },
+];
+
+const locations = [
+  {
+    id: "no1",
+    label: "군위읍",
+    list: CATEGORY_LIST1,
+  },
+  {
+    id: "no2",
+    label: "소보면",
+    list: CATEGORY_LIST2,
+  },
+];
+
+export default function DetailSearch({}) {
+  const [checkedList, setCheckedList] = useState([]);
+  const [selectArea, setSelectArea] = React.useState();
+
+  const onCheckedElement = (checked, item) => {
+    if (checked) {
+      setCheckedList([...checkedList, item]);
+    } else if (!checked) {
+      setCheckedList(checkedList.filter((el) => el !== item));
+    }
+  };
+
+  const onRemove = (item) => {
+    setCheckedList(checkedList.filter((el) => el !== item));
+  };
+
+  const categories = locations.map((location) => (
+    <li>
+      <label htmlFor={location.id}>{location.label}</label>
+      <input type="radio" name="location" id={location.id} />
+      <div className="area-list flex">
+        <ul className="flex">
+          {location.list.map((item) => (
+            <li className="flex-start">
+              <input
+                type="checkbox"
+                className="checkCon"
+                id={item.id}
+                value={item.data}
+                onChange={(e) => {
+                  onCheckedElement(e.target.checked, e.target.value);
+                }}
+                checked={checkedList.includes(item.data) ? true : false}
+              />
+              <label htmlFor={item.id}>{item.data}</label>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </li>
+  ));
+
+  return (
+    <div className="search-group">
+      <div className="search-area flex">
+        <div className="detail-search" style={{padding:"0 5rem", width:"100%"}}>
+          <table>
+            <tbody>
+              <tr>
+                <th>기관명 검색</th>
+                <td colSpan={3}>
+                  <div className="flex">
+                    <select name="" id="">
+                      <option value="">전체</option>
+                      <option value="">복지관1</option>
+                      <option value="">복지관2</option>
+                      <option value="">병원1</option>
+                      <option value="">병원2</option>
+                    </select>
+                    <input type="text" />
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div className="btn-box flex-center">
+              <Button className={"btn-large green-btn"} btnName={"조회"} />
+            </div>
+      </div>
+    </div>
+  );
+}
 
client/views/component/Calendar_agency.jsx (added)
+++ client/views/component/Calendar_agency.jsx
@@ -0,0 +1,34 @@
+import React, { useState } from "react";
+import Calendar from "react-calendar";
+import "react-calendar/dist/Calendar.css";
+import moment from "moment";
+
+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">
+      <Calendar
+        className="w-96 h-full rounded-xl bg-violet-300"
+        onChange={setValue}
+        value={value}
+        tileClassName={({ date, view }) => {
+          // if (mark.find((x) => x === moment(date).format("DD-MM-YYYY"))) {
+          //   return "highlight";
+          // }
+          let day = date.getDate()
+          let month = date.getMonth()+1
+          if(date.getMonth()<10){
+            month = '0'+day
+          }
+          const realDate =day+'-'+month+'-'+date.getFullYear()
+          if(mark.find(val=> val === realDate)){
+            return 'highlight'
+          }
+
+        }}
+      />
+    </div>
+  );
+}
+
 
client/views/component/chart/Chart2_agency.jsx (added)
+++ client/views/component/chart/Chart2_agency.jsx
@@ -0,0 +1,233 @@
+import React, { Component } from "react";
+import * as am5 from "@amcharts/amcharts5";
+import * as am5xy from "@amcharts/amcharts5/xy";
+import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
+
+class Chart2_1 extends Component {
+  componentDidMount() {
+    let root = am5.Root.new("Chart2_1");
+
+    root._logo.dispose();
+  // Set themes
+// https://www.amcharts.com/docs/v5/concepts/themes/
+root.setThemes([
+  am5themes_Animated.new(root)
+]);
+
+
+// Create chart
+// https://www.amcharts.com/docs/v5/charts/xy-chart/
+let chart = root.container.children.push(am5xy.XYChart.new(root, {
+  panX: true,
+  panY: true,
+  wheelX: "panX",
+  wheelY: "zoomX",
+  pinchZoomX:true
+}));
+
+
+// Add cursor
+// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
+let cursor = chart.set("cursor", am5xy.XYCursor.new(root, {
+  behavior: "none"
+}));
+cursor.lineY.set("visible", false);
+
+
+// The data
+let data = [{
+  "year": "1월",
+  "아침": 100,
+  "점심": 20,
+  "저녁": 18
+}, {
+  "year": "2월",
+  "아침": 13,
+  "점심": 83,
+  "저녁": 46
+}, {
+  "year": "3월",
+  "아침": 17,
+  "점심": 91,
+  "저녁": 13
+}, {
+  "year": "4월",
+  "아침": 130,
+  "점심": 64,
+  "저녁": 17
+}, {
+  "year": "5월",
+  "아침": 160,
+  "점심": 69,
+  "저녁": 15
+}, {
+  "year": "6월",
+  "아침": 183,
+  "점심": 21,
+  "저녁": 19
+}, {
+  "year": "7월",
+  "아침": 161,
+  "점심": 77,
+  "저녁": 12
+}, {
+  "year": "8월",
+  "아침": 28,
+  "점심": 60,
+  "저녁": 11
+}, {
+  "year": "9월",
+  "아침": 75,
+  "점심": 64,
+  "저녁": 7
+}, {
+  "year": "10월",
+  "아침": 12,
+  "점심": 64,
+  "저녁": 93
+}, {
+  "year": "11월",
+  "아침": 18,
+  "점심": 67,
+  "저녁": 11
+}, {
+  "year": "12월",
+  "아침": 13,
+  "점심": 63,
+  "저녁": 87
+}];
+
+
+// Create axes
+// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
+let xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
+  categoryField: "year",
+  startLocation: 0.5,
+  endLocation: 0.5,
+  renderer: am5xy.AxisRendererX.new(root, {}),
+  tooltip: am5.Tooltip.new(root, {})
+}));
+
+xAxis.data.setAll(data);
+
+let yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
+  renderer: am5xy.AxisRendererY.new(root, {})
+}));
+
+// Add series
+// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
+
+function createSeries(name, field) {
+  let series = chart.series.push(am5xy.LineSeries.new(root, {
+    name: name,
+    xAxis: xAxis,
+    yAxis: yAxis,
+    stacked:true,
+    valueYField: field,
+    categoryXField: "year",
+    tooltip: am5.Tooltip.new(root, {
+      pointerOrientation: "horizontal",
+      labelText: "[bold]{name}[/]\n{categoryX}: {valueY}"
+    })
+  }));
+
+  series.fills.template.setAll({
+    fillOpacity: 0.5,
+    visible: true
+  });
+
+  series.data.setAll(data);
+  series.appear(1000);
+}
+
+createSeries("아침", "아침");
+createSeries("점심", "점심");
+createSeries("저녁", "저녁");
+
+// Add scrollbar
+// https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
+// chart.set("scrollbarX", am5.Scrollbar.new(root, {
+//   orientation: "horizontal"
+// }));
+
+// Create axis ranges
+// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/axis-ranges/
+let rangeDataItem = xAxis.makeDataItem({
+  category: "1월",
+  endCategory: "12월"
+});
+
+let range = xAxis.createAxisRange(rangeDataItem);
+
+rangeDataItem.get("grid").setAll({
+  stroke: am5.color(0x00ff33),
+  strokeOpacity: 0.5,
+  strokeDasharray: [3]
+});
+
+rangeDataItem.get("axisFill").setAll({
+  fill: am5.color(0x00ff33),
+  fillOpacity: 0.1,
+  visible:true
+});
+
+// rangeDataItem.get("label").setAll({
+//   inside: true,
+//   text: "Fines for speeding increased",
+//   rotation: 90,
+//   centerX: am5.p100,
+//   centerY: am5.p100,
+//   location: 0,
+//   paddingBottom: 10,
+//   paddingRight: 15
+// });
+
+
+let rangeDataItem2 = xAxis.makeDataItem({
+  category: "1월"
+});
+
+let range2 = xAxis.createAxisRange(rangeDataItem2);
+
+rangeDataItem2.get("grid").setAll({
+  stroke: am5.color(0x00ff33),
+  strokeOpacity: 1,
+  strokeDasharray: [3]
+});
+
+rangeDataItem2.get("axisFill").setAll({
+  fill: am5.color(0x00ff33),
+  fillOpacity: 0.1,
+  visible:true
+});
+
+// rangeDataItem2.get("label").setAll({
+//   inside: true,
+//   text: "Motorcycle fee introduced",
+//   rotation: 90,
+//   centerX: am5.p100,
+//   centerY: am5.p100,
+//   location: 0,
+//   paddingBottom: 10,
+//   paddingRight: 15
+// });
+
+// Make stuff animate on load
+// https://www.amcharts.com/docs/v5/concepts/animations/
+chart.appear(1000, 100);
+
+    this.root = root;
+  }
+
+  componentWillUnmount() {
+    if (this.root) {
+      this.root.dispose();
+    }
+  }
+
+  render() {
+    return <div id="Chart2_1" style={{ width: "100%", height: "15vh" }}></div>;
+  }
+}
+
+export default Chart2_1;
 
client/views/component/chart/Chart4.jsx (added)
+++ client/views/component/chart/Chart4.jsx
@@ -0,0 +1,76 @@
+import React, { Component } from "react";
+import * as am5 from "@amcharts/amcharts5";
+import * as am5percent from "@amcharts/amcharts5/percent";
+import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
+
+class Chart4 extends Component {
+  componentDidMount() {
+    let root = am5.Root.new("Chart4");
+
+    root._logo.dispose();
+    root.setThemes([am5themes_Animated.new(root)]);
+
+    // Create chart
+    // https://www.amcharts.com/docs/v5/charts/percent-charts/sliced-chart/
+    let chart = root.container.children.push(am5percent.SlicedChart.new(root, {
+      layout: root.verticalLayout
+    }));
+
+
+    // Create series
+    // https://www.amcharts.com/docs/v5/charts/percent-charts/sliced-chart/#Series
+    let series = chart.series.push(am5percent.PyramidSeries.new(root, {
+      orientation: "vertical",
+      valueField: "value",
+      categoryField: "category"
+    }));
+
+
+    // Set data
+    // https://www.amcharts.com/docs/v5/charts/percent-charts/sliced-chart/#Setting_data
+    series.data.setAll([
+      { value: 10, category: "부계면" },
+      { value: 9, category: "소보면" },
+      { value: 6, category: "군위읍" },
+      { value: 5, category: "우보면" },
+      { value: 4, category: "의흥면" },
+      { value: 3, category: "삼국유사면" },
+      { value: 3, category: "산성면" },
+      { value: 2, category: "효령면" }
+    ].reverse());
+
+
+    // Play initial series animation
+    // https://www.amcharts.com/docs/v5/concepts/animations/#Animation_of_series
+    series.appear();
+
+
+    // Create legend
+    // https://www.amcharts.com/docs/v5/charts/percent-charts/legend-percent-series/
+    let legend = chart.children.push(am5.Legend.new(root, {
+      centerX: am5.percent(50),
+      x: am5.percent(50),
+      marginTop: 15,
+      marginBottom: 15
+    }));
+
+    legend.data.setAll(am5.array.copy(series.dataItems).reverse());
+
+
+    // Make stuff animate on load
+    // https://www.amcharts.com/docs/v5/concepts/animations/
+    chart.appear(1000, 100);
+
+    this.root = root;
+  }
+  componentWillUnmount() {
+    if (this.root) {
+      this.root.dispose();
+    }
+  }
+  render() {
+    return <div id="Chart4" style={{ width: "100%", height: "80%" }}></div>
+  }
+}
+
+export default Chart4;
 
client/views/component/chart/Chart5.jsx (added)
+++ client/views/component/chart/Chart5.jsx
@@ -0,0 +1,66 @@
+import React, { Component } from "react";
+import * as am5 from "@amcharts/amcharts5";
+import * as am5percent from "@amcharts/amcharts5/percent";
+import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
+
+class Chart5 extends Component {
+  componentDidMount() {
+    let root = am5.Root.new("Chart5");
+
+   
+// Set themes
+// https://www.amcharts.com/docs/v5/concepts/themes/
+root.setThemes([
+  am5themes_Animated.new(root)
+]);
+
+
+// Create chart
+// https://www.amcharts.com/docs/v5/charts/percent-charts/sliced-chart/
+let chart = root.container.children.push(am5percent.SlicedChart.new(root, {
+  layout: root.verticalLayout
+}));
+
+
+// Create series
+// https://www.amcharts.com/docs/v5/charts/percent-charts/sliced-chart/#Series
+let series = chart.series.push(am5percent.PictorialStackedSeries.new(root, {
+  alignLabels: true,
+  orientation: "vertical",
+  valueField: "value",
+  categoryField: "category",
+  svgPath: "M53.5,476c0,14,6.833,21,20.5,21s20.5-7,20.5-21V287h21v189c0,14,6.834,21,20.5,21 c13.667,0,20.5-7,20.5-21V154h10v116c0,7.334,2.5,12.667,7.5,16s10.167,3.333,15.5,0s8-8.667,8-16V145c0-13.334-4.5-23.667-13.5-31 s-21.5-11-37.5-11h-82c-15.333,0-27.833,3.333-37.5,10s-14.5,17-14.5,31v133c0,6,2.667,10.333,8,13s10.5,2.667,15.5,0s7.5-7,7.5-13 V154h10V476 M61.5,42.5c0,11.667,4.167,21.667,12.5,30S92.333,85,104,85s21.667-4.167,30-12.5S146.5,54,146.5,42 c0-11.335-4.167-21.168-12.5-29.5C125.667,4.167,115.667,0,104,0S82.333,4.167,74,12.5S61.5,30.833,61.5,42.5z"
+}));
+
+series.labelsContainer.set("width", 100);
+series.ticks.template.set("location", 0.6);
+
+
+// Set data
+// https://www.amcharts.com/docs/v5/charts/percent-charts/sliced-chart/#Setting_data
+series.data.setAll([
+  { value: 10, category: "A복지관" },
+  { value: 9, category: "B복지관" },
+  { value: 6, category: "C복지관" },
+  { value: 5, category: "D복지관" },
+  { value: 4, category: "E복지관" },
+]);
+
+
+// Play initial series animation
+// https://www.amcharts.com/docs/v5/concepts/animations/#Animation_of_series
+chart.appear(1000, 100);
+ // end am5.ready()
+    this.root = root;
+  }
+  componentWillUnmount() {
+    if (this.root) {
+      this.root.dispose();
+    }
+  }
+  render() {
+    return <div id="Chart5" style={{ width: "100%", height: "80%" }}></div>
+  }
+}
+
+export default Chart5;
client/views/layout/Header.jsx
--- client/views/layout/Header.jsx
+++ client/views/layout/Header.jsx
@@ -3,6 +3,7 @@
 import Weather from "../pages/main/Weather.jsx";
 
 function Header({ title }) {
+
   const [headerData, setHeaderData] = React.useState(0);
 
   return (
client/views/layout/Menu.jsx
--- client/views/layout/Menu.jsx
+++ client/views/layout/Menu.jsx
@@ -1,62 +1,8 @@
 import React from "react";
 import SidebarItem from "./SidebarItem.jsx";
 import Button from "../component/Button.jsx";
-import HouseIcon from "@mui/icons-material/House";
-import PersonIcon from "@mui/icons-material/Person";
-import Diversity1Icon from "@mui/icons-material/Diversity1";
-import DoorFrontIcon from "@mui/icons-material/DoorFront";
-import SpeakerPhoneIcon from "@mui/icons-material/SpeakerPhone";
-import SettingsIcon from "@mui/icons-material/Settings";
-import CallIcon from '@mui/icons-material/Call';
-import ConstructionIcon from '@mui/icons-material/Construction';
 
-export const items = [
-  {
-    title: "Home",
-    path: "/Main",
-    icon: <HouseIcon sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }} />,
-  },
-  {
-    title: "사용자 관리",
-    path: "/UserAuthoriySelect",
-    icon: (
-      <PersonIcon sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }} />
-    ),
-  },
-  {
-    title: "장비 관리",    
-    icon: (
-      <SettingsIcon
-        sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }}
-      />
-    ),
-    childrens: [
-      {
-        title: "장비 조회",
-        path: "/EquipmentManagementSelect",
-      },
-      {
-        title: "장비 반납/교환 요청",
-        path: "/EquipmentManagementSelectReturn",
-      },
-      {
-        title: "장비 추가 요청",
-        path: "/EquipmentManagementSelectAdd",
-      },
-    ],
-  },    
-  {
-    title: "문의게시판",
-    path: "/QandA",
-    icon: (
-      <SpeakerPhoneIcon
-        sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }}
-      />
-    ),
-  },
-];
-
-export default function Sidebar() {
+export default function Sidebar({items}) {
   const [menuToggle, setMenuToggle] = React.useState(false);
 
   return (
client/views/pages/App.jsx
--- client/views/pages/App.jsx
+++ client/views/pages/App.jsx
@@ -6,11 +6,11 @@
 import React from "react";
 
 //Application의 Route 정보를 관리하는 Component
-import AppRoute from "./AppRoute.jsx";
+import AllApp, {AdminApp, GovernmentApp} from "./AppRoute.jsx";
 
 //Test Layout
 import Header from "../layout/Header.jsx";
-import Menu, { items } from "../layout/Menu.jsx";
+import Menu from "../layout/Menu.jsx";
 import Login from "./login/Login.jsx";
 import { useLocation, useNavigate } from "react-router";
 import Weather from "./main/Weather.jsx";
@@ -25,18 +25,24 @@
     navigate("/Main");
   };
 
-  const { title } = items.find(
+
+  const menuItems = AllApp.menuItems;  //AdminApp, GovernmentApp, AllApp 
+  const AppRoute = AllApp.AppRoute;
+
+
+  const { title } = menuItems.find(
     (item) =>
       item.path === location.pathname ||
       location.pathname.startsWith(item.prefix) ||
       item.childrens?.some((child) => location.pathname.startsWith(child.path))
   ) ?? { title: '' };
+
   return (
     <div id="App">
       {isLogin ? (
         <div id="layout">
           <Header title={title} />
-          <Menu />
+          <Menu items={menuItems}/>
           <div id="pages">
             <AppRoute />
           </div>
client/views/pages/AppRoute.jsx
--- client/views/pages/AppRoute.jsx
+++ client/views/pages/AppRoute.jsx
@@ -7,8 +7,20 @@
 //react router 라이브러리 import
 import { Routes, Route } from "react-router-dom";
 
+import HouseIcon from "@mui/icons-material/House";
+import PersonIcon from "@mui/icons-material/Person";
+import Diversity1Icon from "@mui/icons-material/Diversity1";
+import DoorFrontIcon from "@mui/icons-material/DoorFront";
+import SpeakerPhoneIcon from "@mui/icons-material/SpeakerPhone";
+import SettingsIcon from "@mui/icons-material/Settings";
+import CallIcon from '@mui/icons-material/Call';
+import ConstructionIcon from '@mui/icons-material/Construction';
+
 import Test from "./Test/Test.jsx";
-import Main2 from "./main/Main2.jsx";
+import Main_government from "./main/Main_government.jsx";
+import Main_guardian from "./main/Main_guardian.jsx";
+import Main_agency from "./main/Main_agency.jsx";
+import Main from "./main/Main.jsx";
 import SeniorSelect from "./senior_management/SeniorSelect.jsx";
 import SeniorInsert from "./senior_management/SeniorInsert.jsx";
 import SeniorSelectOne from "./senior_management/SeniorSelectOne.jsx";
@@ -23,19 +35,490 @@
 import EquipmentRentalInsert from "./equipment/EquipmentRentalInsert.jsx";
 import EquipmentManagementSelect from "./equipment/EquipmentManagementSelect.jsx";
 import EquipmentManagementSelectOne from "./equipment/EquipmentManagementSelectOne.jsx";
-import UserAuthoriySelect from "./authority/UserAuthoriySelect.jsx";
+import UserAuthoriySelect from "./user_management/UserAuthoriySelect.jsx";
+import UserAuthoriySelect_admin from "./user_management/UserAuthoriySelect_admin.jsx";
 import MyInfoUpdate from "./authority/MyInfoUpdate.jsx";
 import CallInsert from "./callcenter/CallInsert.jsx";
 import CallSelect from "./callcenter/CallSelect.jsx";
-import CallSelectOne from "./callcenter/CallSelectOne.jsx";
+import CallSelectOne from "./setting/RiskSet.jsx";
 import CallUpdate from "./callcenter/CallUpdate.jsx";
-import EquipmentManagementSelectReturn from "./equipment/EquipmentManagementSelectReturn.jsx";
+import EquipmentInquiry from "./equipment/EquipmentInquiry.jsx";
 import EquipmentManagementSelectAdd from "./equipment/EquipmentManagementSelectAdd.jsx";
-import RiskInsert from "./authority/RiskInsert.jsx";
-import AuthorityManagement from "./authority/AuthorityManagement.jsx";
-import QandA from "./authority/QandA.jsx";
+import RiskSet from "./setting/RiskSet.jsx";
+import QandA from "./callcenter/QandA.jsx";
+import UserSelectOk from "./user_management/UserSelectOk.jsx";
+import AuthorityManagement from "./setting/AuthorityManagement.jsx";
+import AgencyInsert from "./user_management/AgencyInsert.jsx";
+import AgencySelect from "./user_management/AgencySelect.jsx";
+import ProtectorSelect from "./user_management/ProtectorSelect.jsx";
 
-function AppRoute() {
+const AllAppMenuItems = [
+  {
+    title: "Home",
+    path: "/Main",
+    icon: <HouseIcon sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }} />,
+  },
+  {
+    title: "사용자 관리",
+    path: "/UserAuthoriySelect",
+    icon: (
+      <PersonIcon sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }} />
+    ),
+  },
+  {
+    title: "시니어 관리",
+    path: "/UserAuthoriySelect_admin",
+    icon: (
+      <PersonIcon sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }} />
+    ),
+  },  
+  {
+    title: "시행기관관리",
+    prefix: "/Medicine",
+    icon: (
+      <Diversity1Icon sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }} />
+    ),
+    childrens: [
+      {
+        title: "기관 조회",
+        path: "/AgencySelect",
+      },
+      {
+        title: "사용자 계정 승인",
+        path: "/UserSelectOk",        
+      },
+    ],
+  },
+  {
+    title: "건강 관리",
+    prefix: "/Medicine",
+    icon: (
+      <Diversity1Icon sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }} />
+    ),
+    childrens: [
+      {
+        title: "복약 관리",
+        path: "/MedicineCareSelect",
+      },
+      {
+        title: "댁내 온도 관리",
+        path: "/TemperatureManagementSelect",
+      },
+      {
+        title: "문진표 작성",
+        path: "/TemperatureManagementSelect",
+      },
+    ],
+  },
+
+  {
+    title: "방문 관리",
+    prefix: "/Visit",
+    icon: (
+      <DoorFrontIcon sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }} />
+    ),
+    childrens: [
+      {
+        title: "방문 관리",
+        path: "/VisitSelect",
+      },
+    ],
+  },
+  {
+    title: "장비 관리",    
+    icon: (
+      <SettingsIcon
+        sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }}
+      />
+    ),
+    childrens: [
+      {
+        title: "장비 조회",
+        path: "/EquipmentManagementSelect",
+      },
+      {
+        title: "장비 문의 요청",
+        path: "/EquipmentInquiry",
+      },
+      // {
+      //   title: "장비 추가 요청",
+      //   path: "/EquipmentManagementSelectAdd",
+      // },
+    ],
+  },    
+  {
+    title: "문의게시판",
+    path: "/QandA",
+    icon: (
+      <SpeakerPhoneIcon
+        sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }}
+      />
+    ),
+  },
+  {
+    title: "설정",    
+    icon: (
+      <SettingsIcon
+        sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }}
+      />
+    ),
+    childrens: [
+      {
+        title: "위험 기준 관리",
+        path: "/RiskSet",
+      },
+      {
+        title: "사용자 권한 관리",
+        path: "/AuthorityManagement",
+      },
+      // {
+      //   title: "장비 추가 요청",
+      //   path: "/EquipmentManagementSelectAdd",
+      // },
+    ],
+  },    
+];
+
+function AllAppRoute() {
+  return (
+      <Routes>
+        <Route path="/Test" element={<Test />}></Route>
+        <Route path="/Main" element={<Main />}></Route>
+        <Route path="/Main_government" element={<Main_government />}></Route>
+        <Route path="/Main_guardian" element={<Main_guardian />}></Route>
+        <Route path="/Main_agency" element={<Main_agency />}></Route>
+        <Route path="/SeniorSelect" element={<SeniorSelect />}></Route>
+        <Route path="/SeniorInsert" element={<SeniorInsert />}></Route>
+        <Route path="/SeniorSelectOne" element={<SeniorSelectOne />}></Route>
+        <Route
+          path="/MedicineCareSelect"
+          element={<MedicineCareSelect />}
+        ></Route>
+        <Route
+          path="/MedicineCareSelectOne"
+          element={<MedicineCareSelectOne />}
+        ></Route>
+        <Route
+          path="/TemperatureManagementSelect"
+          element={<TemperatureManagementSelect />}
+        ></Route>
+        <Route
+          path="/TemperatureManagementSelectOne"
+          element={<TemperatureManagementSelectOne />}
+        ></Route>
+        <Route
+          path="/MedicineStatistics"
+          element={<MedicineStatistics />}
+        ></Route>
+        <Route path="/VisitInsert" element={<VisitInsert />}></Route>
+        <Route path="/VisitSelect" element={<VisitSelect />}></Route>
+        <Route path="/VisitSelectOne" element={<VisitSelectOne />}></Route>
+        <Route
+          path="/EquipmentRentalInsert"
+          element={<EquipmentRentalInsert />}
+        ></Route>
+        <Route
+          path="/EquipmentManagementSelect"
+          element={<EquipmentManagementSelect />}
+        ></Route>
+        <Route
+          path="/EquipmentManagementSelectOne"
+          element={<EquipmentManagementSelectOne />}
+        ></Route>
+        <Route
+          path="/UserAuthoriySelect"
+          element={<UserAuthoriySelect />}
+        ></Route>
+        <Route path="/MyInfoUpdate" element={<MyInfoUpdate />}></Route>
+        <Route path="/CallInsert" element={<CallInsert />}></Route>
+        <Route path="/CallUpdate" element={<CallUpdate />}></Route>
+        <Route path="/CallSelect" element={<CallSelect />}></Route>
+        <Route path="/CallSelectOne" element={<CallSelectOne />}></Route>
+        <Route path="/EquipmentInquiry" element={<EquipmentInquiry />}></Route>
+        <Route path="/EquipmentManagementSelectAdd" element={<EquipmentManagementSelectAdd />}></Route>
+        <Route path="/RiskSet" element={<RiskSet />}></Route>
+        <Route path="/AuthorityManagement" element={<AuthorityManagement />}></Route>
+        <Route path="/UserAuthoriySelect_admin" element={<UserAuthoriySelect_admin />}></Route>
+        <Route path="/QandA" element={<QandA />}></Route>
+        <Route path="/UserSelectOk" element={<UserSelectOk />}></Route>
+        <Route path="/AuthorityManagement" element={<AuthorityManagement />}></Route>
+        <Route path="/AgencyInsert" element={<AgencyInsert />}></Route>
+        <Route path="/AgencySelect" element={<AgencySelect />}></Route>
+        <Route path="/ProtectorSelect" element={<ProtectorSelect />}></Route>
+      </Routes>
+  );
+}
+
+
+
+const AdminAppMenuItems = [
+  {
+    title: "Home",
+    path: "/Main",
+    icon: <HouseIcon sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }} />,
+  },
+  {
+    title: "사용자 관리",
+    path: "/UserAuthoriySelect",
+    icon: (
+      <PersonIcon sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }} />
+    ),
+  },
+  // {
+  //   title: "시니어 관리",
+  //   path: "/UserAuthoriySelect_admin",
+  //   icon: (
+  //     <PersonIcon sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }} />
+  //   ),
+  // },
+  // {
+  //   title: "사용자 계정 승인",
+  //   path: "/UserSelectOk",
+  //   icon: (
+  //     <PersonIcon sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }} />
+  //   ),
+  // },
+  // {
+  //   title: "건강 관리",
+  //   prefix: "/Medicine",
+  //   icon: (
+  //     <Diversity1Icon sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }} />
+  //   ),
+  //   childrens: [
+  //     {
+  //       title: "복약 관리",
+  //       path: "/MedicineCareSelect",
+  //     },
+  //     {
+  //       title: "댁내 온도 관리",
+  //       path: "/TemperatureManagementSelect",
+  //     },
+  //     {
+  //       title: "문진표 작성",
+  //       path: "/TemperatureManagementSelect",
+  //     },
+  //   ],
+  // },
+
+  // {
+  //   title: "방문 관리",
+  //   prefix: "/Visit",
+  //   icon: (
+  //     <DoorFrontIcon sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }} />
+  //   ),
+  //   childrens: [
+  //     {
+  //       title: "방문 관리",
+  //       path: "/VisitSelect",
+  //     },
+  //   ],
+  // },
+  // {
+  //   title: "장비 관리",    
+  //   icon: (
+  //     <SettingsIcon
+  //       sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }}
+  //     />
+  //   ),
+  //   childrens: [
+  //     {
+  //       title: "장비 조회",
+  //       path: "/EquipmentManagementSelect",
+  //     },
+  //     {
+  //       title: "장비 문의 요청",
+  //       path: "/EquipmentInquiry",
+  //     },
+  //     // {
+  //     //   title: "장비 추가 요청",
+  //     //   path: "/EquipmentManagementSelectAdd",
+  //     // },
+  //   ],
+  // },    
+  {
+    title: "문의게시판",
+    path: "/QandA",
+    icon: (
+      <SpeakerPhoneIcon
+        sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }}
+      />
+    ),
+  },
+  // {
+  //   title: "설정",    
+  //   icon: (
+  //     <SettingsIcon
+  //       sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }}
+  //     />
+  //   ),
+  //   childrens: [
+  //     {
+  //       title: "위험 기준 관리",
+  //       path: "/RiskSet",
+  //     },
+  //     {
+  //       title: "사용자 권한 관리",
+  //       path: "/AuthorityManagement",
+  //     },
+  //     // {
+  //     //   title: "장비 추가 요청",
+  //     //   path: "/EquipmentManagementSelectAdd",
+  //     // },
+  //   ],
+  // },    
+];
+function AdminAppRoute() {
+  return (
+    <Routes>
+      <Route path="/Test" element={<Test />}></Route>
+        <Route path="/Main" element={<Main />}></Route>
+        <Route path="/Main_government" element={<Main_government />}></Route>
+        <Route path="/Main_guardian" element={<Main_guardian />}></Route>
+        <Route path="/Main_agency" element={<Main_agency />}></Route>
+        <Route
+          path="/EquipmentRentalInsert"
+          element={<EquipmentRentalInsert />}
+        ></Route>
+        <Route
+          path="/EquipmentManagementSelect"
+          element={<EquipmentManagementSelect />}
+        ></Route>
+        <Route
+          path="/EquipmentManagementSelectOne"
+          element={<EquipmentManagementSelectOne />}
+        ></Route>        
+        <Route path="/MyInfoUpdate" element={<MyInfoUpdate />}></Route>
+        <Route path="/CallInsert" element={<CallInsert />}></Route>
+        <Route path="/CallUpdate" element={<CallUpdate />}></Route>
+        <Route path="/CallSelect" element={<CallSelect />}></Route>
+        <Route path="/CallSelectOne" element={<CallSelectOne />}></Route>
+        <Route path="/EquipmentInquiry" element={<EquipmentInquiry />}></Route>
+        <Route path="/EquipmentManagementSelectAdd" element={<EquipmentManagementSelectAdd />}></Route>
+        <Route path="/RiskSet" element={<RiskSet />}></Route>
+        <Route path="/AuthorityManagement" element={<AuthorityManagement />}></Route>
+        <Route path="/UserAuthoriySelect_admin" element={<UserAuthoriySelect_admin />}></Route>
+        <Route path="/QandA" element={<QandA />}></Route>
+        <Route path="/UserSelectOk" element={<UserSelectOk />}></Route>
+        <Route path="/AuthorityManagement" element={<AuthorityManagement />}></Route>
+    </Routes>
+  );
+}
+
+
+const GovernmentAppMenuItems = [
+   {
+    title: "Home",
+    path: "/Main",
+    icon: <HouseIcon sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }} />,
+  },
+  {
+    title: "사용자 관리",
+    path: "/UserAuthoriySelect",
+    icon: (
+      <PersonIcon sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }} />
+    ),
+  },
+  {
+    title: "시니어 관리",
+    path: "/UserAuthoriySelect_admin",
+    icon: (
+      <PersonIcon sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }} />
+    ),
+  },
+  {
+    title: "사용자 계정 승인",
+    path: "/UserSelectOk",    
+  },
+  {
+    title: "건강 관리",
+    prefix: "/Medicine",
+    icon: (
+      <Diversity1Icon sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }} />
+    ),
+    childrens: [
+      {
+        title: "복약 관리",
+        path: "/MedicineCareSelect",
+      },
+      {
+        title: "댁내 온도 관리",
+        path: "/TemperatureManagementSelect",
+      },
+      {
+        title: "문진표 작성",
+        path: "/TemperatureManagementSelect",
+      },
+    ],
+  },
+
+  {
+    title: "방문 관리",
+    prefix: "/Visit",
+    icon: (
+      <DoorFrontIcon sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }} />
+    ),
+    childrens: [
+      {
+        title: "방문 관리",
+        path: "/VisitSelect",
+      },
+    ],
+  },
+  {
+    title: "장비 관리",    
+    icon: (
+      <SettingsIcon
+        sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }}
+      />
+    ),
+    childrens: [
+      {
+        title: "장비 조회",
+        path: "/EquipmentManagementSelect",
+      },
+      {
+        title: "장비 문의 요청",
+        path: "/EquipmentInquiry",
+      },
+      // {
+      //   title: "장비 추가 요청",
+      //   path: "/EquipmentManagementSelectAdd",
+      // },
+    ],
+  },    
+  {
+    title: "문의게시판",
+    path: "/QandA",
+    icon: (
+      <SpeakerPhoneIcon
+        sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }}
+      />
+    ),
+  },
+  {
+    title: "설정",    
+    icon: (
+      <SettingsIcon
+        sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }}
+      />
+    ),
+    childrens: [
+      {
+        title: "위험 기준 관리",
+        path: "/RiskSet",
+      },
+      {
+        title: "사용자 권한 관리",
+        path: "/AuthorityManagement",
+      },
+      // {
+      //   title: "장비 추가 요청",
+      //   path: "/EquipmentManagementSelectAdd",
+      // },
+    ],
+  },  
+];
+function GovernmentAppRoute() {
   return (
     <Routes>
       <Route path="/Test" element={<Test />}></Route>
@@ -87,7 +570,7 @@
       <Route path="/CallUpdate" element={<CallUpdate />}></Route>
       <Route path="/CallSelect" element={<CallSelect />}></Route>
       <Route path="/CallSelectOne" element={<CallSelectOne />}></Route>
-      <Route path="/EquipmentManagementSelectReturn" element={<EquipmentManagementSelectReturn />}></Route>
+      <Route path="/EquipmentInquiry" element={<EquipmentInquiry />}></Route>
       <Route path="/EquipmentManagementSelectAdd" element={<EquipmentManagementSelectAdd />}></Route>
       <Route path="/RiskInsert" element={<RiskInsert />}></Route>
       <Route path="/AuthorityManagement" element={<AuthorityManagement />}></Route>
@@ -96,4 +579,9 @@
   );
 }
 
-export default AppRoute;
+const AllApp = {'menuItems': AllAppMenuItems, 'AppRoute': AllAppRoute};
+const AdminApp = {'menuItems': AdminAppMenuItems, 'AppRoute': AdminAppRoute};
+const GovernmentApp = {'menuItems': GovernmentAppMenuItems, 'AppRoute': GovernmentAppRoute};
+
+export default AllApp;
+export {AdminApp, GovernmentApp};
 
client/views/pages/authority/UserAuthoriySelect copy.jsx (deleted)
--- client/views/pages/authority/UserAuthoriySelect copy.jsx
@@ -1,375 +0,0 @@
-import React from "react";
-import Table from "../../component/Table.jsx";
-import Button from "../../component/Button.jsx";
-import SubTitle from "../../component/SubTitle.jsx";
-import Modal from "../../component/Modal.jsx";
-
-export default function UserAuthoriySelect() {
-  const [modalOpen, setModalOpen] = React.useState(false);
-  const openModal = () => {
-    setModalOpen(true);
-  };
-  const closeModal = () => {
-    setModalOpen(false);
-  };
-  const thead1 = [
-    "No",
-    "사용자관리번호",
-    "관리기관",
-    "이름",
-    "성별",
-    "지역",
-    "연락처",
-    "주소",
-  ];
-  const key1 = ["No",
-  "management_number",
-  "level_of_care",
-  "name",
-  "gender",
-  "birth",
-  "phone",
-  "address",];
-  const content1 = [
-    {
-      No: 1,
-      management_number: 2022080101,
-      level_of_care: "A복지관",
-      name: "김복남",
-      gender: "남",
-      birth: "대구",
-      phone: "010-1234-1234",
-      address: "경상북도 군위군 삼국유사면",
-    },
-  ];
-
-  const thead2 = [
-    "No",
-    "보호자명",
-    "ID",
-    "관리기관",
-    "해당 대상자",
-    "연락처",
-  ];
-  const key2 = [
-    "No",
-    "name",
-    "Id",
-    "management_agency",
-    "phone",
-    "birth",
-    
-  ];
-  const content2 = [
-    {
-      No: 1,
-      name: "김훈",
-      Id: "admin2",
-      management_agency: "보호재단",
-      phone: "김복남 어르신",
-      birth: "010-1234-1234",
-    },
-  ];
-  const thead3 = [
-    "No",
-    "기관명",
-    "사업자번호",
-    "ID",
-    "담당자",
-    "연락처",
-    "주소",
-  ];
-  const key3 = [
-    "No",
-    "name",
-    "birth",
-    "Id",
-    "management_agency",
-    "gender",
-    "address",
-  ];
-  const content3 = [
-    {
-      No: 1,
-      name: "보훈병원",
-      birth: " 515-82-00000",
-      Id: "admin",
-      management_agency: "홍길동",
-      gender: "053-818-8181",
-      address: "대구광역시 달성군 ",
-    },
-  ];
-  const thead4 = [
-    "No",
-    "담당자명",
-    "소속기관",
-    "ID",
-    "연락처",
-    "주소",
-  ];
-  const key4 = [
-    "No",
-    "name",
-    "birth",
-    "Id",
-    "management_agency",
-    "address",
-  ];
-  const content4 = [
-    {
-      No: 1,
-      name: "홍길동",
-      birth: " 대구보훈병원",
-      Id: "admin",
-      management_agency: "053-818-8181",
-      address: "대구광역시 달성군 ",
-    },
-  ];
-  
-  const thead5 = [
-    "No",
-    "장비명",
-    "시리얼 넘버",
-    "기기 상태",
-    "구매일",
-    "배터리 잔량",
-    "대여가능여부",
-  ];
-  const key5 = ["No",
-  "equipment_name",
-  "serialNumber",
-  "work",
-  "name",
-  "battery",
-  "rental",];
-  const content5 = [
-    {
-      No: 1,
-      equipment_name: "스마트약상자",
-      serialNumber: "ABCD-1",
-      work: "작동",
-      name: "2022.12.02",
-      battery: "10%",
-      rental: "대여가능",
-    },
-  ];
-
-  const data = [
-    {
-      id: 1,
-      title: "사용자",
-      description: (
-        <Table
-          className={"protector-user"}
-          head={thead1}
-          contents={content1}
-          contentKey={key1}
-          onClick={() => {
-            navigate("/SeniorSelectOne");
-          }}
-        />
-      ),
-    },
-    {
-      id: 2,
-      title: "보호자(가족)",
-      description: (
-        <Table
-          className={"caregiver-user"}
-          head={thead2}
-          contents={content2}
-          contentKey={key2}
-          onClick={() => {
-            navigate("/SeniorSelectOne");
-          }}
-        />
-      ),
-    },
-    {
-      id: 3,
-      title: "계약업체",
-      description: (
-        <Table
-          className={"common-user"}
-          head={thead3}
-          contents={content3}
-          contentKey={key3}
-          onClick={() => {
-            navigate("/SeniorSelectOne");
-          }}
-        />
-      ),
-    },
-    {
-      id: 4,
-      title: "복지사, 간호사",
-      description: (
-        <Table
-          className={"common-user"}
-          head={thead3}
-          contents={content3}
-          contentKey={key3}
-          onClick={() => {
-            navigate("/SeniorSelectOne");
-          }}
-        />
-      ),
-    },
-    {
-      id: 5,
-      title: "관리자",
-      description: (
-        <Table
-          className={"management-user"}
-          head={thead4}
-          contents={content4}
-          contentKey={key4}
-          onClick={() => {
-            navigate("/SeniorSelectOne");
-          }}
-        />
-      ),
-    },
-  ];
-  const [index, setIndex] = React.useState(1);
-  return (
-    <main>
-      <Modal open={modalOpen} close={closeModal} header="대상자 매칭">
-        <div className="board-wrap">
-          <div className="flex margin-bottom2">
-            <div className="flex50">
-              <div className="flex margin-bottom">
-                <input
-                  type="text"
-                  name=""
-                  id=""
-                  className="flex80"
-                  placeholder="사용자 검색"
-                />
-                <Button btnName={"검색"} className={"flex20"} />
-              </div>
-              <ul className="user-list2">
-                <li>검색 내역이 없습니다.</li>
-              </ul>
-            </div>
-            <div className="flex50">
-            <div className="flex margin-bottom">
-                <p className="content-title">선택된 대상자</p>
-              </div>
-              <ul className="user-check-list">
-                <div className="flex-start">
-                  <input type="text" />
-                  <label htmlFor=""></label>
-                </div>
-              </ul>
-            </div>
-          </div>
-          <div>
-            <Button
-              className={"btn-100 green-btn"}
-              btnName={"등록"}
-              onClick={closeModal}
-            />
-          </div>
-        </div>
-      </Modal>
-      <div className="flex">
-        <div className="tab-container">
-          <div className="category">
-            <ul>올잇메디 <Button
-              className={"category-btn"}
-              btnName={"관리기관 추가"}
-              onClick={closeModal}
-            />
-              <li>서구청<Button
-              className={"category-btn"}
-              btnName={"시행기관 추가"}
-              onClick={closeModal}
-            />
-                <ul>
-                  <li>A복지관</li>
-                  <li>B복지관</li>
-                </ul>
-              </li>
-              <li>보훈병원<Button
-              className={"category-btn"}
-              btnName={"시행기관 추가"}
-              onClick={closeModal}
-            /></li>
-              <ul>
-                <li>
-                  대구보훈병원
-                </li>
-              </ul>
-              <li>관리기관<Button
-              className={"category-btn"}
-              btnName={"시행기관 추가"}
-              onClick={closeModal}
-            />
-                <ul>
-                  <li>시행기관1</li>
-                  <li>시행기관2</li>
-                </ul>
-              </li>
-            </ul>
-          </div>
-        </div>
-        <div className="tab-container">
-          <ul className="tab-menu-mobile">
-            <div>
-              <SubTitle
-                className="margin-bottom"
-                subtitle={"사용자 선택"}
-                explanation={"사용자 별로 선택 후 관리할 수 있습니다. "}
-              />
-            </div>
-            <select name="" id="" style={{ width: "100%" }}>
-              <option value="사용자선택">보호자</option>
-              <option value="사용자선택">보호사</option>
-              <option value="사용자선택">병원</option>
-              <option value="사용자선택">지자체</option>
-              <option value="사용자선택">관리자</option>
-            </select>
-          </ul>
-          <ul className="tab-menu">
-            {data.map((item) => (
-              <li
-                key={item.id}
-                className={index === item.id ? "active" : null}
-                onClick={() => setIndex(item.id)}
-              >
-                {item.title}
-              </li>
-            ))}
-          </ul>
-          <div className="content-wrap">
-            <div className="search-management flex-end margin-bottom2">
-              <select name="management-agency">
-                <option value="기관전체">기관전체</option>
-                <option value="대구보훈병원">대구보훈병원</option>
-                <option value="군위군청">군위군청</option>
-              </select>
-              <select>
-                <option value="이름">이름</option>
-                <option value="아이디">아이디</option>
-              </select>
-              <input type="text" />
-              <Button
-                className={"btn-small gray-btn"}
-                btnName={"검색"}
-                onClick={() => navigate("/SeniorInsert")}
-              />
-            </div>
-            <ul className="tab-content">
-              {data
-                .filter((item) => index === item.id)
-                .map((item) => (
-                  <li>{item.description}</li>
-                ))}
-            </ul>
-          </div>
-        </div>
-      </div >
-    </main>
-  );
-}
client/views/pages/callcenter/CallInsert.jsx
--- client/views/pages/callcenter/CallInsert.jsx
+++ client/views/pages/callcenter/CallInsert.jsx
@@ -1,7 +1,103 @@
-import React from 'react'
+import React from "react";
+import Button from "../../component/Button.jsx";
+import ContentTitle from "../../component/ContentTitle.jsx";
+import { useNavigate } from "react-router";
 
 export default function CallInsert() {
+  const navigate = useNavigate();
   return (
-    <div>CallInsert</div>
-  )
+    <main>
+      <div className="content-wrap row">
+        <ContentTitle contentTitle={"문의글 작성"} />
+        <p>작성자 정보</p>
+        <table className="margin-bottom2 senior-insert">
+          <tr>
+            <th>작성자</th>
+            <td>
+              <input type="text" placeholder="자동입력부분" />
+            </td>
+          </tr>
+
+          <tr>
+            <th>소속 기관</th>
+            <td colSpan={3}>
+              <input type="text" placeholder="자동입력부분" />
+            </td>
+          </tr>
+          <tr>
+            <th>연락처</th>
+            <td colSpan={3}>
+              <input type="text" placeholder="자동입력부분" />
+            </td>
+          </tr>
+          <tr>
+            <th>구분</th>
+            <td colSpan={3} className="flex">
+              <select name="year" id="year">
+                <option value="">반납</option>
+                <option value="">교환</option>
+                <option value="">추가</option>
+                <option value="">기타</option>
+              </select>
+            </td>
+          </tr>
+          <tr>
+              <th>내용</th>
+              <td colSpan={3}>
+                <textarea className="medicine" cols="30" rows="2"></textarea>
+              </td>
+            </tr>
+        </table>
+        <p>시니어 정보</p>
+        <table className="margin-bottom2 senior-insert">
+          <tr>
+            <th>시니어 선택</th>
+            <td colSpan={3} className="flex width">
+              <select>
+                <option value="">시니어1</option>
+                <option value="">시니어2</option>
+              </select>
+            </td>
+          </tr>
+          <tr>
+            <th>시니어 이름</th>
+            <td>
+              <input type="text" placeholder="자동입력부분" />
+            </td>
+            <th>시니어등록번호</th>
+            <td>
+              <input type="text" placeholder="자동입력부분" />
+            </td>
+          </tr>
+          <tr>
+            <th>시니어 연락처</th>
+            <td>
+              <input type="text" placeholder="자동입력부분" />
+            </td>
+            <th>시니어 주소</th>
+            <td>
+              <input type="text" placeholder="자동입력부분" />
+            </td>
+          </tr>
+
+        </table>
+        <div className="btn-wrap flex-center">
+          <Button
+            className={"btn-large gray-btn"}
+            btnName={"이전"}
+            onClick={() => {
+              navigate("/EquipmentManagementSelectReturn");
+            }}
+          />
+          <Button
+            className={"btn-large green-btn"}
+            btnName={"등록"}
+            onClick={() => {
+              navigate("/EquipmentManagementSelectReturn");
+            }}
+          />
+        </div>
+      </div>
+    </main>
+  );
 }
client/views/pages/callcenter/CallSelect.jsx
--- client/views/pages/callcenter/CallSelect.jsx
+++ client/views/pages/callcenter/CallSelect.jsx
@@ -1,7 +1,103 @@
-import React from 'react'
+import React from "react";
+import Button from "../../component/Button.jsx";
+import ContentTitle from "../../component/ContentTitle.jsx";
+import { useNavigate } from "react-router";
 
-export default function CallSelect() {
+export default function CallInsert() {
+  const navigate = useNavigate();
   return (
-    <div>CallSelect</div>
-  )
+    <main>
+      <div className="content-wrap row">
+        <ContentTitle contentTitle={"장비문의"} />
+        <p>작성자 정보</p>
+        <table className="margin-bottom2 senior-insert">
+          <tr>
+            <th>작성자</th>
+            <td>
+              <input type="text" placeholder="자동입력부분" />
+            </td>
+          </tr>
+
+          <tr>
+            <th>소속 기관</th>
+            <td colSpan={3}>
+              <input type="text" placeholder="자동입력부분" />
+            </td>
+          </tr>
+          <tr>
+            <th>연락처</th>
+            <td colSpan={3}>
+              <input type="text" placeholder="자동입력부분" />
+            </td>
+          </tr>
+          <tr>
+            <th>구분</th>
+            <td colSpan={3} className="flex">
+              <select name="year" id="year">
+                <option value="">반납</option>
+                <option value="">교환</option>
+                <option value="">추가</option>
+                <option value="">기타</option>
+              </select>
+            </td>
+          </tr>
+          <tr>
+              <th>내용</th>
+              <td colSpan={3}>
+                <textarea className="medicine" cols="30" rows="2"></textarea>
+              </td>
+            </tr>
+        </table>
+        <p>시니어 정보</p>
+        <table className="margin-bottom2 senior-insert">
+          <tr>
+            <th>시니어 선택</th>
+            <td colSpan={3} className="flex width">
+              <select>
+                <option value="">시니어1</option>
+                <option value="">시니어2</option>
+              </select>
+            </td>
+          </tr>
+          <tr>
+            <th>시니어 이름</th>
+            <td>
+              <input type="text" placeholder="자동입력부분" />
+            </td>
+            <th>시니어등록번호</th>
+            <td>
+              <input type="text" placeholder="자동입력부분" />
+            </td>
+          </tr>
+          <tr>
+            <th>시니어 연락처</th>
+            <td>
+              <input type="text" placeholder="자동입력부분" />
+            </td>
+            <th>시니어 주소</th>
+            <td>
+              <input type="text" placeholder="자동입력부분" />
+            </td>
+          </tr>
+
+        </table>
+        <div className="btn-wrap flex-center">
+          <Button
+            className={"btn-large gray-btn"}
+            btnName={"이전"}
+            onClick={() => {
+              navigate("/EquipmentManagementSelectReturn");
+            }}
+          />
+          <Button
+            className={"btn-large green-btn"}
+            btnName={"등록"}
+            onClick={() => {
+              navigate("/EquipmentManagementSelectReturn");
+            }}
+          />
+        </div>
+      </div>
+    </main>
+  );
 }
 
client/views/pages/callcenter/CallSelectOne.jsx (deleted)
--- client/views/pages/callcenter/CallSelectOne.jsx
@@ -1,7 +0,0 @@
-import React from 'react'
-
-export default function CallSelectOne() {
-  return (
-    <div>CallSelectOne</div>
-  )
-}
client/views/pages/callcenter/QandA.jsx (Renamed from client/views/pages/authority/QandA.jsx)
--- client/views/pages/authority/QandA.jsx
+++ client/views/pages/callcenter/QandA.jsx
@@ -10,14 +10,12 @@
   //게시판
   const thead = [
     "No",
-    "제목",
     "작성자",
     "작성일자",
     "상태",
   ];
   const key = [
     "No",
-    "title",
     "name",
     "date",
     "work",
@@ -25,31 +23,26 @@
   const content = [
     {
       No: 1,
-      title: (
-        <p style={{textDecoration:"underline"}}>질문입니다.</p>
-      ),
       name: "홍**",
       date: "2022-08-01",
       work: "답변완료"
-    },
-    {
-      No: 2,
-      title: (
-        <p style={{textDecoration:"underline"}}>질문입니다.</p>
-      ),
-      name: "홍**",
-      date: "2022-08-01",
-      work:  (
-        <p style={{color:"red"}}>처리전</p>
-      ),
-    },
-   
+    },  
   ];
   return (
     <main>
       <div className="content-wrap">
-      <ContentTitle contentTitle={"Q&A"} />
+      <ContentTitle contentTitle={"문의게시판"} />
         <div className="board-wrap">
+        <div className="btn-wrap flex-end">
+              <Button
+                className={"btn-small green-btn"}
+                btnName={"등록"}
+                onClick={() => {
+                  navigate("/CallInsert");
+                }}
+              />
+              <Button className={"btn-small green-btn"} btnName={"삭제"} />
+            </div>
           <Table className="equipment-detail" head={thead} contents={content} contentKey={key} />
         </div>
       </div>
 
client/views/pages/equipment/EquipmentInquiry.jsx (added)
+++ client/views/pages/equipment/EquipmentInquiry.jsx
@@ -0,0 +1,68 @@
+import React from "react";
+import Button from "../../component/Button.jsx";
+import Table from "../../component/Table.jsx";
+import Modal from "../../component/Modal.jsx";
+import { useNavigate } from "react-router";
+import ContentTitle from "../../component/ContentTitle.jsx";
+
+export default function EquipmentInquiry() {
+  const navigate = useNavigate();
+  //게시판
+  const thead = [
+    "No",
+    "장비명",
+    "시리얼 넘버",
+    "기관명",
+    "요청일자",
+    "구분",
+    "처리여부",
+  ];
+  const key = [
+    "No",
+    "equipment_name",
+    "serialNumber",
+    "name",
+    "date",
+    "category",
+    "finish"
+  ];
+  const content = [
+    {
+      No: 1,
+      equipment_name: "스마트약상자",
+      serialNumber: "ABCD-1",
+      name: "A복지관",
+      date: "2023-01-27",
+      category: "교환",
+      finish: (
+        <select>
+          <option value="">처리중</option>
+          <option value="">처리완료</option>
+        </select>
+      ),
+    },
+
+  ];
+  return (
+    <main>
+      <div className="content-wrap">
+        <ContentTitle contentTitle={"장비 문의 요청"} />
+        <div className="board-wrap">
+          <div className="btn-wrap flex-end margin-bottom">
+            <Button
+              className={"btn-small green-btn"}
+              btnName={"등록"}
+              onClick={() => {
+                navigate("/CallInsert");
+              }}
+            />
+            <Button className={"btn-small green-btn "} btnName={"삭제"} />
+          </div>
+          <Table className="equipment-detail" head={thead} contents={content} contentKey={key} onClick={() => {
+                navigate("/CallSelect");
+              }}/>
+        </div>
+      </div>
+    </main>
+  );
+}
 
client/views/pages/equipment/EquipmentManagementSelectReturn.jsx (deleted)
--- client/views/pages/equipment/EquipmentManagementSelectReturn.jsx
@@ -1,81 +0,0 @@
-import React from "react";
-import Button from "../../component/Button.jsx";
-import Table from "../../component/Table.jsx";
-import Modal from "../../component/Modal.jsx";
-import { useNavigate } from "react-router";
-import ContentTitle from "../../component/ContentTitle.jsx";
-
-export default function EquipmentManagementSelectOne() {
-  const navigate = useNavigate();
-  //게시판
-  const thead = [
-    "No",
-    "장비명",
-    "시리얼 넘버",
-    "기관명",
-    "요청일자",
-    "교환/반납",
-    "처리예정일",
-    "완료일",
-  ];
-  const key = [
-    "No",
-    "equipment_name",
-    "serialNumber",
-    "name",
-    "date",
-    "period_of_use",
-    "visit",
-    "finish"
-  ];
-  const content = [
-    {
-      No: 1,
-      equipment_name: "스마트약상자",
-      serialNumber: "ABCD-1",
-      name: "A복지관",
-      date: "2023-01-27",
-      period_of_use: "교환",
-      visit:(<div>
-        <input type="date" />
-      </div>),
-      finish:(<div>
-        <input type="date" />
-      </div>),
-    },
-    {
-      No: 2,
-      equipment_name: "스마트약상자",
-      serialNumber: "ABCD-1",
-      name: "B복지관",
-      date: "2023-01-27",
-      period_of_use: "반납",
-      visit:(<div>
-        <input type="date" />
-      </div>),
-      finish:(<div>
-        <input type="date" />
-      </div>),
-    },
-  ];
-  return (
-    <main>
-      <div className="content-wrap">
-      <ContentTitle contentTitle={"장비 반납/교환 요청"} />
-         <div className="board-wrap">
-        {/*<div className="btn-wrap flex-end margin-bottom">
-              <Button
-                className={"btn-small green-btn"}
-                btnName={"등록"}
-                onClick={() => {
-                  navigate("/SeniorInsert");
-                }}
-              />
-              <Button className={"btn-small green-btn "} btnName={"삭제"} />
-            </div> */}
-          <Table className="equipment-detail" head={thead} contents={content} contentKey={key} />
-        </div>
-      </div>
-    </main>
-  );
-}
client/views/pages/healthcare/medicinecare/MedicineCareSelect.jsx
--- client/views/pages/healthcare/medicinecare/MedicineCareSelect.jsx
+++ client/views/pages/healthcare/medicinecare/MedicineCareSelect.jsx
@@ -9,12 +9,13 @@
   const navigate = useNavigate();
 
   //게시판
-  const thead = ["No", "이름", "생년월일", "연락처", "주소", "최근 복약률",];
-  const key = ["No", "name", "birth", "phone", "address", "average"];
+  const thead = ["No", "이름","시니어등록번호", "생년월일", "연락처", "주소", "최근 복약률",];
+  const key = ["No", "name","number", "birth", "phone", "address", "average"];
   const content = [
     {
       No: 1,
       name: "김복남",
+      number: "00000001",
       birth: "1948.11.15",
       phone: "010-1234-5678",
       address: "경상북도 군위군 삼국유사면",
@@ -23,6 +24,7 @@
     {
       No: 2,
       name: "홍길동",
+      number: "00000001",
       birth: "1948.08.02",
       phone: "010-1234-3333",
       address: "경상북도 군위군 군위읍",
client/views/pages/healthcare/temperature/TemperatureManagementSelect.jsx
--- client/views/pages/healthcare/temperature/TemperatureManagementSelect.jsx
+++ client/views/pages/healthcare/temperature/TemperatureManagementSelect.jsx
@@ -8,24 +8,28 @@
 export default function TemperatureManagementSelect() {
   const navigate = useNavigate();
     //게시판
-    const thead = ["No", "이름", "생년월일", "연락처", "주소", "최근 온도",];
-    const key = ["No", "name", "birth", "phone", "address", "temp",];
+    const thead = ["No", "이름","시니어등록번호", "생년월일", "연락처", "주소", "최근 최저 온도","최근 최고 온도",];
+    const key = ["No", "name", "number","birth", "phone", "address", "low", "high"];
     const content = [
       {
         No: 1,
         name: "김복남",
+        number: "00000001",
         birth: "1948.11.15",
         phone: "010-1234-5678",
         address: "경상북도 군위군 삼국유사면",
-        temp: "18°C",
+        low: "18°C",
+        high: "18°C",
       },
       {
         No: 2,
         name: "홍길동",
+        number: "00000001",
         birth: "1945.05.08",
         phone: "010-1234-5678",
         address: "경상북도 군위군 군위읍",
-        temp: "10°C",
+        low: "10°C",
+        high: "10°C",
       },
     ];
   return (
client/views/pages/main/Main.jsx
--- client/views/pages/main/Main.jsx
+++ client/views/pages/main/Main.jsx
@@ -1,110 +1,159 @@
 import React from "react";
 import Title from "../../component/Title.jsx";
-import Table from "./../../component/Table.jsx";
-import Map from "./Map.jsx";
-import RowChart from "./RowChart.jsx";
-import Chart1 from "./Chart1.jsx";
-import Chart2 from "./Chart2.jsx";
-import Chart3 from "./Chart3.jsx";
-import Weather from "./Weather.jsx";
-import Donut1 from "./Donut1.jsx";
-import Donut2 from "./Donut2.jsx";
-import Donut3 from "./Donut3.jsx";
-import AddCircleIcon from "@mui/icons-material/AddCircle";
+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';
 
-function Main() {
-  const tableHead = ["이름", "시리얼 넘버", "위치"];
-  const Key = ["name", "serialNumber", "location"];
+
+export default function Main2() {
+
+  const tableHead = [
+    "연번",
+    "계약업체명",
+    "반납/교환",
+    "담당자 연락처",
+    "주소",
+  ];
+  const Key = [
+    "name",
+    "level_of_care",
+    "birth",
+    "phone",
+    "address",
+  ];
   const content = [
     {
-      name: "스마트약상자",
-      serialNumber: "ABCD-1",
-      location: "대구광역시 서구 상중이동",
+      name: "1",
+      level_of_care: "A복지관",
+      birth: "교환",
+      phone: "010-1234-5678",
+      address: "경상북도 군위군 삼국유사면",
     },
     {
-      name: "스마트약상자",
-      serialNumber: "ABCD-2",
-      location: "대구광역시 서구 내당4동",
+      name: "2",
+      level_of_care: "B병원",
+      birth: "반납",
+      phone: "010-3333-3333",
+      address: "경상북도 군위군 삼국유사면",
     },
     {
-      name: "스마트약상자",
-      serialNumber: "ABCD-3",
-      location: "대구광역시 서구 내당2,3동",
+      name: "3",
+      level_of_care: "C복지관",
+      birth: "교환",
+      phone: "010-3333-4444",
+      address: "경상북도 군위군 삼국유사면",
     },
     {
-      name: "스마트약상자",
-      serialNumber: "ABCD-4",
-      location: "대구광역시 서구 평리3동",
+      name: "4",
+      level_of_care: "D복지관",
+      birth: "교환",
+      phone: "010-3333-5555",
+      address: "경상북도 군위군 삼국유사면",
     },
     {
-      name: "스마트약상자",
-      serialNumber: "ABCD-5",
-      location: "대구광역시 서구 내당1동",
+      name: "5",
+      level_of_care: "E복지관",
+      birth: "반납",
+      phone: "010-3333-6666",
+      address: "경상북도 군위군 삼국유사면",
+    },
+  ];
+  const tableHead2 = [
+    "연번",
+    "계약업체명",
+    "반납/교환",
+    "담당자 연락처",
+    "주소",
+  ];
+  const Key2 = [
+    "name",
+    "level_of_care",
+    "birth",
+    "phone",
+    "address",
+  ];
+  const content2 = [
+    {
+      name: "1",
+      level_of_care: "A복지관",
+      birth: "교환",
+      phone: "010-1234-5678",
+      address: "경상북도 군위군 삼국유사면",
+    },
+    {
+      name: "2",
+      level_of_care: "B병원",
+      birth: "반납",
+      phone: "010-3333-3333",
+      address: "경상북도 군위군 삼국유사면",
+    },
+    {
+      name: "3",
+      level_of_care: "C복지관",
+      birth: "교환",
+      phone: "010-3333-4444",
+      address: "경상북도 군위군 삼국유사면",
+    },
+    {
+      name: "4",
+      level_of_care: "D복지관",
+      birth: "교환",
+      phone: "010-3333-5555",
+      address: "경상북도 군위군 삼국유사면",
+    },
+    {
+      name: "5",
+      level_of_care: "E복지관",
+      birth: "반납",
+      phone: "010-3333-6666",
+      address: "경상북도 군위군 삼국유사면",
     },
   ];
 
   return (
     <main>
-      <div className="main-grid-government">
+      <div className="main-grid-agency">
+        <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>3개</p>
+          </li>
+          <li>
+            <p>반납 예정 장비 수</p>
+            <p>10개</p>
+          </li>
+        </ul>
         <div className="content-box combine-left">
           <div className="flex margin-bottom">
-            <Title title={"케어 노인 분포 현황"} />
+            <Title title={"금일 반납/교환 예정 리스트"} explanation={"장비 반납/교환 리스트를 확인하세요."} />
             <AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
           </div>
-          <Map />
-        </div>
-        <div className="content-box ">
-          <div className="margin-bottom">
-            <Title title={"노인 분포도"} />
+          <div className="flex" >
+            <div style={{ width:"50%" }}><Calendar /></div>
+            <div style={{ width:"50%" }}><Table head={tableHead} contents={content} contentKey={Key} /></div>
           </div>
-          <RowChart />
-        </div>
-        <div className="content-box">
-          <div className="margin-bottom">
-            <Title title={"요양 등급별 노인 현황"} />
-          </div>
-          <Donut1 />
-        </div>
-        <div className="content-box">
-          <div>
-            <div className="flex margin-bottom">
-              <Title title={"노인 외출 현황"} />
-              <AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
-            </div>
-            <Donut2 />
-          </div>
-        </div>
-        <div className="content-box">
-          <div className="flex margin-bottom">
-            <Title title={"장기 미복약 현황"} />
-            <AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
-          </div>
-          <Donut3 />
-        </div>
-        <div className="content-box combine-right-government">
-          <div className="flex margin-bottom">
-            <Title title={"약상자 여닫음 횟수 통계"} />
-            <AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
-          </div>
-          <Chart1 />
-        </div>
+
+        </div>          
         <div className="content-box combine-left">
           <div className="flex margin-bottom">
-            <Title title={"월별 방문 현황 통계"} />
+            <Title title={"약상자 추가 예정 리스트"} explanation={"장비 반납/교환 리스트를 확인하세요."} />
             <AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
           </div>
-          <Chart3 />
-        </div>
-        <div className="content-box combine-right-government">
-          <div className="flex margin-bottom">
-            <Title title={"장비현황"} />
-            <AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
-          </div>
-          <Table head={tableHead} contents={content} contentKey={Key} />
-        </div>
+          <Table head={tableHead2} contents={content2} contentKey={Key2} />
+        </div>          
       </div>
     </main>
   );
 }
-
-export default Main;
 
client/views/pages/main/Main2.jsx (deleted)
--- client/views/pages/main/Main2.jsx
@@ -1,159 +0,0 @@
-import React from "react";
-import Title from "../../component/Title.jsx";
-import Table from "../../component/Table.jsx";
-import Map from "../../component/chart/Map.jsx";
-import Chart1 from "../../component/chart/Chart1.jsx";
-import 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';
-
-
-export default function Main2() {
-
-  const tableHead = [
-    "연번",
-    "계약업체명",
-    "반납/교환",
-    "담당자 연락처",
-    "주소",
-  ];
-  const Key = [
-    "name",
-    "level_of_care",
-    "birth",
-    "phone",
-    "address",
-  ];
-  const content = [
-    {
-      name: "1",
-      level_of_care: "A복지관",
-      birth: "교환",
-      phone: "010-1234-5678",
-      address: "경상북도 군위군 삼국유사면",
-    },
-    {
-      name: "2",
-      level_of_care: "B병원",
-      birth: "반납",
-      phone: "010-3333-3333",
-      address: "경상북도 군위군 삼국유사면",
-    },
-    {
-      name: "3",
-      level_of_care: "C복지관",
-      birth: "교환",
-      phone: "010-3333-4444",
-      address: "경상북도 군위군 삼국유사면",
-    },
-    {
-      name: "4",
-      level_of_care: "D복지관",
-      birth: "교환",
-      phone: "010-3333-5555",
-      address: "경상북도 군위군 삼국유사면",
-    },
-    {
-      name: "5",
-      level_of_care: "E복지관",
-      birth: "반납",
-      phone: "010-3333-6666",
-      address: "경상북도 군위군 삼국유사면",
-    },
-  ];
-  const tableHead2 = [
-    "연번",
-    "계약업체명",
-    "반납/교환",
-    "담당자 연락처",
-    "주소",
-  ];
-  const Key2 = [
-    "name",
-    "level_of_care",
-    "birth",
-    "phone",
-    "address",
-  ];
-  const content2 = [
-    {
-      name: "1",
-      level_of_care: "A복지관",
-      birth: "교환",
-      phone: "010-1234-5678",
-      address: "경상북도 군위군 삼국유사면",
-    },
-    {
-      name: "2",
-      level_of_care: "B병원",
-      birth: "반납",
-      phone: "010-3333-3333",
-      address: "경상북도 군위군 삼국유사면",
-    },
-    {
-      name: "3",
-      level_of_care: "C복지관",
-      birth: "교환",
-      phone: "010-3333-4444",
-      address: "경상북도 군위군 삼국유사면",
-    },
-    {
-      name: "4",
-      level_of_care: "D복지관",
-      birth: "교환",
-      phone: "010-3333-5555",
-      address: "경상북도 군위군 삼국유사면",
-    },
-    {
-      name: "5",
-      level_of_care: "E복지관",
-      birth: "반납",
-      phone: "010-3333-6666",
-      address: "경상북도 군위군 삼국유사면",
-    },
-  ];
-
-  return (
-    <main>
-      <div className="main-grid-agency">
-        <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>3개</p>
-          </li>
-          <li>
-            <p>반납 예정 장비 수</p>
-            <p>10개</p>
-          </li>
-        </ul>
-        <div className="content-box combine-left">
-          <div className="flex margin-bottom">
-            <Title title={"금일 반납/교환 예정 리스트"} explanation={"장비 반납/교환 리스트를 확인하세요."} />
-            <AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
-          </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>
-    </main>
-  );
-}
 
client/views/pages/main/Main_agency.jsx (added)
+++ client/views/pages/main/Main_agency.jsx
@@ -0,0 +1,160 @@
+import React from "react";
+import Title from "../../component/Title.jsx";
+import Table from "../../component/Table.jsx";
+import Map from "../../component/chart/Map.jsx";
+import Chart from "../../component/chart/Chart.jsx";
+import Chart5 from "../../component/chart/Chart5.jsx";
+import Chart2 from "../../component/chart/Chart2.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';
+
+export default function Main2() {
+  const tableHead = ["방문날짜", "방문사유", "방문 상세 사유"];
+  const Key = ["date", "reason", "detail_reason"];
+  const content = [
+    {
+      date: "2022.12.12",
+      reason: "어르신케어",
+      detail_reason: "하루동안 미복약으로 방문. 방문시 두통을 호소하셔 병원 동행",
+    },
+  ];
+
+  //노인리스트
+  const tableHead2 = [
+    "이름",
+    "요양등급",
+    "생년월일",
+    "연락처",
+    "주소",
+    "기저질환",
+  ];
+  const Key2 = [
+    "name",
+    "level_of_care",
+    "birth",
+    "phone",
+    "address",
+    "management_number",
+  ];
+  const content2 = [
+    {
+      name: "김복남",
+      level_of_care: "1등급",
+      birth: "1948.11.15",
+      phone: "010-1234-5678",
+      address: "경상북도 군위군 삼국유사면",
+      management_number: "혈압",
+    },
+    {
+      name: "홍길동",
+      level_of_care: "2등급",
+      birth: "1948.05.18",
+      phone: "010-3333-3333",
+      address: "경상북도 군위군 삼국유사면",
+      management_number: "당뇨",
+    },
+    {
+      name: "김말순",
+      level_of_care: "3등급",
+      birth: "1939.03.19",
+      phone: "010-3333-4444",
+      address: "경상북도 군위군 삼국유사면",
+      management_number: "천식",
+    },
+    {
+      name: "신정길",
+      level_of_care: "1등급",
+      birth: "1945.05.19",
+      phone: "010-3333-5555",
+      address: "경상북도 군위군 삼국유사면",
+      management_number: "폐렴",
+    },
+    {
+      name: "김정남",
+      level_of_care: "1등급",
+      birth: "1945.05.19",
+      phone: "010-3333-6666",
+      address: "경상북도 군위군 삼국유사면",
+      management_number: "인지장애",
+    },
+  ];
+
+  return (
+    <main>
+      <div className="main-grid-agency">
+        <ul className="content-box statistics" background="#f7acba">
+          <li> 
+            <p><ElderlyIcon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#bf0629", borderRadius:"50px" }}/></p>           
+            <p>나의 관리 대상자</p>
+            <p>40</p>
+          </li>
+                  </ul>
+        <ul className="content-box statistics" background="#8ef3d1">
+          <li>
+           <p><MedicationIcon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#076143", borderRadius:"50px" }}/></p>
+            <p>미복약 위험 대상자</p>
+            <p>40</p>
+          </li>
+        </ul>
+        <ul className="content-box statistics" background="#ebe7b9" >
+          <li>
+             <p><DeviceThermostatIcon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#f1de05", borderRadius:"50px" }}/></p>
+            <p>댁내 온도 위험 대상자</p>
+            <p>40</p>
+          </li>
+        </ul>
+        <ul className="content-box statistics" background="#5f9af3">
+          <li>
+            <p><BatteryCharging20Icon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#5f9af3", borderRadius:"50px" }}/></p>
+            <p>배터리 부족 대상자 </p>
+            <p>40</p>
+          </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 />
+        </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>
+          <Chart2_agency />
+        </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>
+          <Chart />
+        </div>
+        <div className="content-box combine-right-government2 combine-bottom-government5">
+          <div className="flex">
+            <Title title={"방문한지 2"} explanation={"최근 6개월간 방문 횟수의 변화를 확인할 수 있습니다."} />
+            <AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
+          </div>
+          <RowChart />
+        </div>
+        <div className="content-box combine-right-government combine-middle-government">
+          <div className="flex">
+          <Title title={"방문 달력"} explanation={"방문 일정을 캘린더로 관리하세요."} />
+          </div>
+          <Calendar_agency />
+        </div>        
+      </div>
+    </main>
+  );
+}
 
client/views/pages/main/Main_government.jsx (added)
+++ client/views/pages/main/Main_government.jsx
@@ -0,0 +1,155 @@
+import React,{useState} from "react";
+import Title from "../../component/Title.jsx";
+import Map from "../../component/chart/Map.jsx";
+import Chart5 from "../../component/chart/Chart5.jsx";
+import Chart2 from "../../component/chart/Chart2.jsx";
+import Donut1 from "../../component/chart/Donut1.jsx";
+import RowChart from "../../component/chart/RowChart.jsx";
+import AddCircleIcon from "@mui/icons-material/AddCircle";
+import BatteryCharging20Icon from '@mui/icons-material/BatteryCharging20';
+import DeviceThermostatIcon from '@mui/icons-material/DeviceThermostat';
+import MedicationIcon from '@mui/icons-material/Medication';
+import ElderlyIcon from '@mui/icons-material/Elderly';
+
+export default function Main2() {
+  const [cityName, setCityName] = useState("군위군");
+  // const tableHead = ["방문날짜", "방문사유", "방문 상세 사유"];
+  // const Key = ["date", "reason", "detail_reason"];
+  // const content = [
+  //   {
+  //     date: "2022.12.12",
+  //     reason: "어르신케어",
+  //     detail_reason: "하루동안 미복약으로 방문. 방문시 두통을 호소하셔 병원 동행",
+  //   },
+  // ];
+
+  // //노인리스트
+  // const tableHead2 = [
+  //   "이름",
+  //   "요양등급",
+  //   "생년월일",
+  //   "연락처",
+  //   "주소",
+  //   "기저질환",
+  // ];
+  // const Key2 = [
+  //   "name",
+  //   "level_of_care",
+  //   "birth",
+  //   "phone",
+  //   "address",
+  //   "management_number",
+  // ];
+  // const content2 = [
+  //   {
+  //     name: "김복남",
+  //     level_of_care: "1등급",
+  //     birth: "1948.11.15",
+  //     phone: "010-1234-5678",
+  //     address: "경상북도 군위군 삼국유사면",
+  //     management_number: "혈압",
+  //   },
+  //   {
+  //     name: "홍길동",
+  //     level_of_care: "2등급",
+  //     birth: "1948.05.18",
+  //     phone: "010-3333-3333",
+  //     address: "경상북도 군위군 삼국유사면",
+  //     management_number: "당뇨",
+  //   },
+  //   {
+  //     name: "김말순",
+  //     level_of_care: "3등급",
+  //     birth: "1939.03.19",
+  //     phone: "010-3333-4444",
+  //     address: "경상북도 군위군 삼국유사면",
+  //     management_number: "천식",
+  //   },
+  //   {
+  //     name: "신정길",
+  //     level_of_care: "1등급",
+  //     birth: "1945.05.19",
+  //     phone: "010-3333-5555",
+  //     address: "경상북도 군위군 삼국유사면",
+  //     management_number: "폐렴",
+  //   },
+  //   {
+  //     name: "김정남",
+  //     level_of_care: "1등급",
+  //     birth: "1945.05.19",
+  //     phone: "010-3333-6666",
+  //     address: "경상북도 군위군 삼국유사면",
+  //     management_number: "인지장애",
+  //   },
+  // ];
+
+  return (
+    <main>
+      <div className="main-grid-government">
+        <ul className="content-box statistics" background="#f7acba">
+          <li> 
+            <p><ElderlyIcon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#bf0629", borderRadius:"50px" }}/></p>           
+            <p>{cityName} 전체 대상자</p>
+            <p>400</p>
+          </li>
+                  </ul>
+        <ul className="content-box statistics" background="#8ef3d1">
+          <li>
+           <p><MedicationIcon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#076143", borderRadius:"50px" }}/></p>
+            <p>{cityName} 미복약 위험 대상자</p>
+            <p>400</p>
+          </li>
+        </ul>
+        <ul className="content-box statistics" background="#ebe7b9" >
+          <li>
+             <p><DeviceThermostatIcon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#f1de05", borderRadius:"50px" }}/></p>
+            <p>{cityName} 댁내 온도 위험 대상자</p>
+            <p>400</p>
+          </li>
+        </ul>
+        <ul className="content-box statistics" background="#5f9af3">
+          <li>
+            <p><BatteryCharging20Icon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#5f9af3", borderRadius:"50px" }}/></p>
+            <p>{cityName} 배터리 부족 대상자 </p>
+            <p>400</p>
+          </li>
+        </ul>
+        <div className="content-box combine-all-government combine-bottom-government2">
+        <div className="flex">
+            <Title title={`${cityName} 월별 방문 횟수`} explanation={"최근 6개월간 방문 횟수의 변화를 확인할 수 있습니다."} />
+            <AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
+          </div>
+          <RowChart />
+        </div>
+        <div className="content-box combine-left-government combine-bottom-government2 main-main">
+          <div className="flex">
+            <Title title={"지역별 케어 노인 분포 현황"} explanation={"지역 선택 시 해당 지역의 시니어리스트가 보여집니다."} />
+            <AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
+          </div>
+          <Map setCityName={setCityName} />
+        </div>
+        <div className="content-box combine-left-government2">
+          <div className="flex">
+            <Title title={`${cityName} 복용률 평균`} explanation={"해당 지역의 대상자 복용률이 그래프로 보여집니다."} />
+            <AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
+          </div>
+          <Chart2 />
+        </div>
+        <div className="content-box combine-right-government2">
+        <div className="flex">
+            <Title title={`기관별 시니어 등록 현황`} explanation={"약상자 사용자의 데이터 차트가 보여집니다."} />
+            <AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
+          </div>
+          <Chart5 />         
+        </div>
+        <div className="content-box combine-right-government">
+          <div className="flex">
+            <Title title={`기관별 약상자 사용 현황`} explanation={""} />
+            <AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
+          </div>
+          <Donut1 />
+        </div>        
+      </div>
+    </main>
+  );
+}
 
client/views/pages/main/Main_guardian.jsx (added)
+++ client/views/pages/main/Main_guardian.jsx
@@ -0,0 +1,146 @@
+import React from "react";
+import Title from "../../component/Title.jsx";
+import Table from "../../component/Table.jsx";
+import Chart1 from "../../component/chart/Chart1.jsx";
+import CalendarComponent from "../../component/Calendar.jsx";
+import AddCircleIcon from "@mui/icons-material/AddCircle";
+import CallIcon from '@mui/icons-material/Call';
+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';
+
+export default function Main_guardian() {
+  const tableHead1 = ["", "", "", "", "", ""];
+  const Key1 = ["morning", "morning2", "lunch","lunch2", "dinner","dinner2"];
+  const content1 = [
+    {
+      morning: "아침",
+      morning2:(
+        <CheckCircleOutlineIcon sx={{ width: "3rem", height: "3rem", color: "#067943", borderRadius: "50px" }}/> 
+      ),
+      lunch: "점심",
+      lunch2: (
+        <CheckCircleOutlineIcon sx={{ width: "3rem", height: "3rem", color: "#067943", borderRadius: "50px" }}/> 
+      ),
+      dinner: "저녁",
+      dinner2: (
+        <CheckCircleOutlineIcon sx={{ width: "3rem", height: "3rem", color: "#067943", borderRadius: "50px" }}/> 
+      ),
+    }
+  ];
+  const tableHead2 = ["", "", "", "", "", ""];
+  const Key2 = ["morning", "morning2", "lunch","lunch2", "dinner","dinner2"];
+  const content2 = [
+    {
+      morning: "아침",
+      morning2:(
+        <ClearIcon sx={{ width: "3rem", height: "3rem", color: "#bf0629", borderRadius: "50px" }}/> 
+      ),
+      lunch: "점심",
+      lunch2: (
+        <ClearIcon sx={{ width: "3rem", height: "3rem", color: "#bf0629", borderRadius: "50px" }}/> 
+      ),
+      dinner: "저녁",
+      dinner2: (
+        <ClearIcon sx={{ width: "3rem", height: "3rem", color: "#bf0629", borderRadius: "50px" }}/> 
+      ),
+    }
+  ];
+  const tableHead3 = ["월", "화", "수", "목", "금", "토", "일"];
+  const Key3 = ["mon", "tue", "wed","thu", "fri","sat","sun"];
+  const content3 = [
+    {
+      mon: "24°C",
+      tue: "24°C",
+      wed: "24°C",
+      thu: "24°C",
+      fri: "24°C",
+      sat: "24°C",
+      sun: "24°C",
+    }
+  ];
+
+
+  return (
+    <>
+      <main>
+        <div className="main-grid-guardian">
+          <ul className="content-box statistics">
+            <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">
+            <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">
+            <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>
+              </li>   
+          </ul>
+          <ul className="content-box statistics">
+            <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">충전이 필요합니다.</p>
+            </li>
+          </ul>
+          <div className="content-box combine-left combine-all-government">
+            <Title title={"김복남 어르신"} explanation={"방문, 복약, 온도, 배터리 현황을 확인하세요."} />
+
+          </div>
+        </div>
+      </main>
+    </>
+  );
+}
client/views/pages/setting/AuthorityManagement.jsx (Renamed from client/views/pages/authority/AuthorityManagement.jsx)
--- client/views/pages/authority/AuthorityManagement.jsx
+++ client/views/pages/setting/AuthorityManagement.jsx
@@ -178,6 +178,57 @@
             <div className="btn-wrap flex-end">
               <Button className={"btn-small green-btn"} btnName={"저장"} />
             </div>
+            <SubTitle className="margin-bottom" explanation={"각 메뉴에 대한 설명"} />
+            <table className="explain-table">
+            <thead>
+              <tr>
+                <th rowSpan="2">메뉴</th>
+                <th rowSpan="2">소메뉴</th>
+                <th rowSpan="2">상세설명</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>사용자 관리</td>
+                <td>-</td>
+                <td>사용자(노인, 보호자 등)를 등록하고 삭제할 수 있다.</td>
+              </tr>
+              <tr>
+                <td rowSpan="3">건강관리</td>
+                <td>복약관리</td>
+                <td>사용자(노인)의 아침, 점심, 저녁 복약여부를 확인하고 관리할 수 있다.</td>
+              </tr>
+              <tr>
+                <td>댁내온도관리</td>
+                <td>사용자(노인)의 아침, 점심, 저녁 댁내온도를 확인하고 관리할 수 있다.</td>
+              </tr>
+              <tr>
+                <td>복약통계</td>
+                <td>시행기관에 등록되어 있는 사용자(노인)의 복약 통계 자료를 볼 수 있다.</td>
+              </tr>
+              <tr>
+                <td>방문 관리</td>
+                <td>-</td>
+                <td>시행기관의 복지사가 사용자(노인)을 방문한 내역을 확인하고 관리할 수 있다.</td>
+              </tr>  
+              <tr>
+                <td>장비 관리</td>
+                <td>-</td>
+                <td>시행기관에서 관리하고 있는 장비(전체, 미사용, 사용)현황을 관리하고 사용자를 등록할 수 있다.</td>
+              </tr>  
+              <tr>
+                <td>고객지원센터</td>
+                <td>-</td>
+                <td>장비업체에 교환/반납 요청을 할 수 있다.</td>
+              </tr>  
+              <tr>
+                <td>Q&A</td>
+                <td>-</td>
+                <td>사용자(노인, 보호자 등)질문을 등록하고 답변할 수 있다.</td>
+              </tr>  
+              
+            </tbody>
+            </table>
           </div>
         </div>
       </div>
 
client/views/pages/setting/RiskSet.jsx (added)
+++ client/views/pages/setting/RiskSet.jsx
@@ -0,0 +1,239 @@
+import React from "react";
+import Table from "../../component/Table.jsx";
+import Button from "../../component/Button.jsx";
+import SubTitle from "../../component/SubTitle.jsx";
+import ContentTitle from "../../component/ContentTitle.jsx";
+import Modal from "../../component/Modal.jsx";
+import { useNavigate } from "react-router";
+
+export default function EquipmentManagementSelect() {
+  const navigate = useNavigate();
+  const thead1 = [
+    "",
+    "",
+    "",
+    "",
+    "",
+    "",
+  ];
+  const key1 = [
+    "text",
+    "date",
+    "text1",
+    "text4",
+    "temp",
+    "text2",
+    "text3",];
+  const content1 = [
+    {
+      text: "댁내온도가 최근",
+      date: (
+        <select style={{
+          width: "100%"
+        }}>
+          <option value="">1일</option>
+          <option value="">3일</option>
+          <option value="">일주일</option>
+          <option value="">한달</option>
+        </select>
+      ),
+      text1: "평균 온도가",
+      text4:  (
+        <select style={{
+          width: "100%"
+        }}>
+          <option value="">영상</option>
+          <option value="">영하</option>
+        </select>
+      ),
+      temp: (
+        <select style={{
+          width: "100%"
+        }}>
+          <option value="">5℃</option>
+          <option value="">10℃</option>
+          <option value="">15℃</option>
+          <option value="">20℃</option>
+          <option value="">25℃</option>
+          <option value="">30℃</option>
+          <option value="">35℃</option>
+          <option value="">40℃</option>
+          <option value="">45℃</option>
+          <option value="">50℃</option>
+          <option value="">55℃</option>
+        </select>
+      ),
+      text2: (
+        <select style={{
+          width: "100%"
+        }}>
+          <option value="">이하</option>
+          <option value="">이상</option>
+        </select>
+      ),
+      text3: "일 경우 위험알림으로 지정합니다.",
+    },
+  ];
+  const thead2 = [
+    "",
+    "",
+    "",
+    "",
+  ];
+  const key2 = [
+    "text",
+    "date",
+    "text1",
+    "text2",];
+  const content2 = [
+    {
+      text: "미복약 횟수가 최근",
+      date: (
+        <select style={{
+          width: "100%"
+        }}>
+          <option value="">1일</option>
+          <option value="">3일</option>
+          <option value="">일주일</option>
+          <option value="">한달</option>
+        </select>
+      ),
+      text1: (
+        <select style={{
+          width: "100%"
+        }}>
+          <option value="">3회</option>
+          <option value="">6회</option>
+          <option value="">9회</option>
+          <option value="">12회</option>
+          <option value="">15회</option>
+          <option value="">21회 이상</option>
+        </select>
+      ),
+      text2: "일 경우 위험알림으로 지정합니다.",
+    },
+  ];
+  const thead3 = [
+    "",
+    "",
+    "",
+    "",
+    "",
+    "",
+  ];
+  const key3 = [
+    "text",
+    "date",
+    "text1",
+    "text4",
+    "temp",
+    "text2",
+    "text3",];
+  const content3 = [
+    {
+      text: "배터리 잔량이 최근",
+      date: (
+        <select style={{
+          width: "100%"
+        }}>
+          <option value="">1일</option>
+          <option value="">3일</option>
+          <option value="">일주일</option>
+          <option value="">한달</option>
+        </select>
+      ),
+      text4:  (
+        <select style={{
+          width: "100%"
+        }}>
+          <option value="">10%</option>
+          <option value="">20%</option>
+          <option value="">30%</option>
+          <option value="">40%</option>
+          <option value="">50%</option>
+        </select>
+      ),
+      text3: "이하일 경우 위험알림으로 지정합니다.",
+    },
+  ];
+ 
+
+
+  const data = [
+    {
+      id: 1,
+      title: "온도 관리",
+      description: (
+        <Table
+          className={"protector-user"}
+          head={thead1}
+          contents={content1}
+          contentKey={key1}
+        />
+      ),
+    },
+    {
+      id: 2,
+      title: "복약 관리",
+      description: (
+        <Table
+          className={"caregiver-user"}
+          head={thead2}
+          contents={content2}
+          contentKey={key2}
+        />
+      ),
+    },
+    {
+      id: 3,
+      title: "배터리 관리",
+      description: (
+        <Table
+          className={"caregiver-user"}
+          head={thead3}
+          contents={content3}
+          contentKey={key3}
+        />
+      ),
+    },
+  ];
+  const [index, setIndex] = React.useState(1);
+  return (
+    <main>
+<ContentTitle contentTitle={"위험 기준 관리 "} />
+      <div className="tab-container">
+        <ul className="tab-menu">
+          {data.map((item) => (
+            <li
+              key={item.id}
+              className={index === item.id ? "active" : null}
+              onClick={() => setIndex(item.id)}
+            >
+              {item.title}
+            </li>
+          ))}
+        </ul>
+        <div className="content-wrap">
+        <SubTitle
+                  className="margin-bottom"
+                  explanation={"지정한 기준에 따라 메인 화면에 위험 알림 대상자 수를 표시하여 줍니다."}
+                  color={"#333333"}
+                />          
+          <div className="btn-wrap flex-end margin-bottom ">
+            <Button
+              className={"btn-small green-btn"}
+              btnName={"저장"}
+            />
+          </div>
+          <ul className="tab-content">
+            {data
+              .filter((item) => index === item.id)
+              .map((item) => (
+                <li>{item.description}</li>
+              ))}
+          </ul>
+        </div>
+      </div>
+    </main>
+  );
+}
 
client/views/pages/user_management/AgencyInsert.jsx (added)
+++ client/views/pages/user_management/AgencyInsert.jsx
@@ -0,0 +1,70 @@
+import React from "react";
+import Button from "../../component/Button.jsx";
+import ContentTitle from "../../component/ContentTitle.jsx";
+
+export default function ServiceInsert() {
+  return (
+    <main>
+      <div className="content-wrap">
+        <ContentTitle contentTitle={"시행기관 등록"} />
+        <div className="margin-bottom2 insert">
+          {/* <div className="flex30">
+            <div className="flex margin-bottom">
+              <input
+                type="text"
+                name=""
+                id=""
+                className="flex80"
+                placeholder="사용자 검색"
+              />
+              <Button btnName={"검색"} className={"flex20"} />
+            </div>
+            <ul className="user-list">
+              <li>검색 내역이 없습니다.</li>
+            </ul>
+          </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>
+                  <input type="text" name="" id="" />
+                </td>
+                <th>사용계정(ID)</th>
+                <t>
+                  <input type="text" name="" id="" />
+                </t>
+              </tr>
+              <tr>
+                <th>담당 부서 연락처</th>
+                <td>
+                  <input type="text" name="" id="" />
+                </td>
+                <th>담당자</th>
+                <td>
+                  <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="btn-wrap flex-center">
+          <Button className={"btn-large gray-btn"} btnName={"취소"} />
+          <Button className={"btn-large green-btn"} btnName={"등록"} />
+        </div>
+      </div>
+    </main>
+  );
+}
 
client/views/pages/user_management/AgencySelect.jsx (added)
+++ client/views/pages/user_management/AgencySelect.jsx
@@ -0,0 +1,126 @@
+import React from "react";
+import Table from "../../component/Table.jsx";
+import Button from "../../component/Button.jsx";
+import { useNavigate } from "react-router";
+import AgencySearch from "../../component/AgencySearch.jsx";
+import ContentTitle from "../../component/ContentTitle.jsx";
+import SubTitle from "../../component/SubTitle.jsx";
+
+export default function SeniorSelect() {
+  const navigate = useNavigate();
+
+  //게시판
+  const thead = [
+    "No",
+    "기관명",    
+    "사업자번호",
+    "담당 부서 연락처(담당자)",
+    "관리 장비 개수",
+    "관리 시니어 인원",
+    "주소",
+    "사용자관리",
+    "기관통계보기",
+  ];
+  const key = [
+    "No",
+    "name",    
+    "BusinessNumber",
+    "phone",
+    "Fax",
+    "senior",
+    "address",
+    "worker",
+    "statistics",
+  ];
+  const content = [    
+    {
+      No: 1,
+      name: "B복지관",
+      BusinessNumber: "515-82-00000",
+      phone: "053-811-1234(김대리)",
+      Fax: "80대",
+      senior:"75명",
+      address: "경상북도 군위군 삼국유사면",
+      worker: (
+        <Button
+          className={"btn-small gray-btn"}
+          btnName={"상세보기"}
+          onClick={() => {
+            navigate("/ProtectorSelect");
+          }}
+        />
+      ),
+      statistics: (
+        <Button
+          className={"btn-small gray-btn"}
+          btnName={"통계보기"}
+          onClick={() => {
+            navigate("/MedicineStatistics");
+          }}
+        />
+      ),
+    },
+  ];
+
+  //select option 동적 생성
+  // const optionList = () => {
+  //   let year = [];
+  //   let month = [];
+  //   let days = [];
+  //   let currentDate = new Date();
+  //   let currentYear = currentDate.getFullYear();
+
+  //   for (let i = 1910; i < currentYear.length; i++) {
+  //     year.push(i);
+  //   }
+
+  //   for (let j = 1; i < 13; j++) {
+  //     month.push(j);
+  //   }
+
+  //   for (let k = 1; i < 32; k++) {
+  //     days.push(k);
+  //   }
+  //   return year, month, days;
+  // };
+
+  // React.useEffect(() => {
+  //   optionList();
+  // }, []);
+
+  return (
+    <main>
+      <div className="content-wrap">
+        <ContentTitle contentTitle={"기관 조회"} />
+        <div>
+          <AgencySearch />
+          <div className="board-wrap">
+            <div className="flex">
+              <div className="total flex">
+                <p className="total-equip">총 장비 개수 : 500대</p>
+                <p className="total-senior">전체 시니어(노인)인원 : 500명</p>
+              </div>
+              <div className="btn-wrap flex-end margin-bottom ">
+                <Button
+                  className={"btn-small green-btn"}
+                  btnName={"등록"}
+                  onClick={() => {
+                    navigate("/AgencyInsert");
+                  }}
+                />
+                <Button className={"btn-small green-btn"} btnName={"삭제"} />
+              </div>
+            </div >
+            <Table
+              className={"senior-table"}
+              head={thead}
+              contents={content}
+              contentKey={key}
+            />
+            
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}
 
client/views/pages/user_management/ProtectorSelect.jsx (added)
+++ client/views/pages/user_management/ProtectorSelect.jsx
@@ -0,0 +1,127 @@
+import React from "react";
+import Table from "../../component/Table.jsx";
+import Button from "../../component/Button.jsx";
+import { useNavigate } from "react-router";
+import DetailSearch from "../../component/AgencySearch.jsx";
+import ContentTitle from "../../component/ContentTitle.jsx";
+import SubTitle from "../../component/SubTitle.jsx";
+
+export default function SeniorSelect() {
+  const navigate = useNavigate();
+
+  //게시판
+  const thead = [
+    "No",
+    "소속기관명",
+    "이름",
+    "성별",
+    "생년월일",
+    "연락처",
+    "ID",
+    "담당 대상자(어르신) (명)",
+  ];
+  const key = [
+    "No",
+    "center",
+    "name",
+    "gender",
+    "birth",
+    "phone",
+    "ID",
+    "worker",
+  ];
+  const content = [
+    {
+      No: 1,
+      center: "A복지관",
+      name: "홍길동",
+      gender: "여",
+      birth: "920516",
+      phone: "010-1234-1234",
+      ID: "a123",
+      worker: "5명"
+    },
+    {
+      No: 2,
+      center: "A복지관",
+      name: "홍길동",
+      gender: "여",
+      birth: "920506",
+      phone: "010-1234-1234",
+      ID: "b123",
+      worker: "5명"
+    },
+    {
+      No: 3,
+      center: "A복지관",
+      name: "홍길동",
+      gender: "여",
+      birth: "920519",
+      phone: "010-1234-1234",
+      ID: "c123",
+      worker: "8명"
+    },
+
+  ];
+
+  //select option 동적 생성
+  // const optionList = () => {
+  //   let year = [];
+  //   let month = [];
+  //   let days = [];
+  //   let currentDate = new Date();
+  //   let currentYear = currentDate.getFullYear();
+
+  //   for (let i = 1910; i < currentYear.length; i++) {
+  //     year.push(i);
+  //   }
+
+  //   for (let j = 1; i < 13; j++) {
+  //     month.push(j);
+  //   }
+
+  //   for (let k = 1; i < 32; k++) {
+  //     days.push(k);
+  //   }
+  //   return year, month, days;
+  // };
+
+  // React.useEffect(() => {
+  //   optionList();
+  // }, []);
+
+  return (
+    <main>
+      <div className="content-wrap">
+        <ContentTitle contentTitle={"사용자 조회"} />
+        <div>
+          <div className="board-wrap">
+            <div className="flex">
+              <SubTitle className="margin-bottom" explanation={"해당 시행기관의 사용자를 관리할 수 있습니다."} />
+              <div className="btn-wrap flex-end margin-bottom ">
+                <Button
+                  className={"btn-small green-btn"}
+                  btnName={"등록"}
+                  onClick={() => {
+                    navigate("/SeniorInsert");
+                  }}
+                />
+                <Button className={"btn-small green-btn"} btnName={"삭제"} />
+              </div>
+            </div >
+            <Table
+              className={"senior-table"}
+              head={thead}
+              contents={content}
+              contentKey={key}
+              onClick={() => {
+                navigate("/SeniorSelectOne");
+              }}
+            />
+
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}
client/views/pages/user_management/UserAuthoriySelect.jsx (Renamed from client/views/pages/authority/UserAuthoriySelect.jsx)
--- client/views/pages/authority/UserAuthoriySelect.jsx
+++ client/views/pages/user_management/UserAuthoriySelect.jsx
No changes
 
client/views/pages/user_management/UserAuthoriySelect_admin.jsx (added)
+++ client/views/pages/user_management/UserAuthoriySelect_admin.jsx
@@ -0,0 +1,239 @@
+import React from "react";
+import Table from "../../component/Table.jsx";
+import Button from "../../component/Button.jsx";
+import SubTitle from "../../component/SubTitle.jsx";
+import Modal from "../../component/Modal.jsx";
+import { useNavigate } from "react-router";
+
+export default function UserAuthoriySelect_admin() {
+  const navigate = useNavigate();
+  const [modalOpen, setModalOpen] = React.useState(false);
+  const openModal = () => {
+    setModalOpen(true);
+  };
+  const closeModal = () => {
+    setModalOpen(false);
+  };
+  
+  const thead1 = [
+    "No",
+    "시니어 이름",
+    "시니어 등록번호",
+    "시니어 연락처",
+    "성별",
+    "생년월일",
+    "주소",
+    "대상자 관리",
+  ];
+  const key1 = ["No", "name", "Id","call", "gender", "birth", "address", "management"];
+  const content1 = [
+    {
+      No: 1,
+      name: "김복남",
+      Id: "20230131",
+      call: "010-1234-1234",
+      gender: "여",
+      birth: "1948.11.15",
+      address: "경상북도 군위군 삼국유사면",      
+      management: (
+        <Button
+          className={"btn-small gray-btn"}
+          btnName={"보호자(가족) 보기"}
+          onClick={openModal}
+        />
+      ),
+    },
+  ];
+
+  const thead2 = [
+    "No",
+    "시니어 이름",
+    "시니어 등록번호",
+    "시니어 연락처",
+    "성별",
+    "생년월일",
+    "주소",
+    "담당 복지사(연락처)",
+    "대상자 관리",
+  ];
+  const key2 = [
+    "No", "name", "Id","call", "gender", "birth", "address", "protect","management"
+  ];
+  const content2 = [
+    {
+      No: 1,
+      name: "김복남",
+      Id: "20230131",
+      call:"010-1234-1234",
+      gender: "여",
+      birth: "1948.11.15",
+      address: "경상북도 군위군 삼국유사면",
+      protect: "홍길동(010-1234-1234)",
+      management: (
+        <Button
+          className={"btn-small gray-btn"}
+          btnName={"보호자(가족) 보기"}
+          onClick={openModal}
+        />
+      ),
+    },
+  ];
+  const thead3 = [
+    "No",
+    "사용자명",
+    "사용자ID",
+    "대상자와의 관계",
+    "보호자 연락처",
+  ];
+  const key3 = [
+    "No",
+    "name",
+    "Id",
+    "relationship",
+    "phone",
+  ];
+  const content3 = [
+    {
+      No: 1,
+      name: "김훈",
+      Id: "admin2",
+      relationship: "아들",
+      phone: "010-1234-1234",
+    },
+  ];
+  const thead4 = [
+    "No",
+    "어르신 성함",
+    "사용자등록번호",
+    "성별",
+    "생년월일",
+    "주소",
+    "관계",
+  ];
+  const key4 = ["No", "name", "Id", "gender", "birth", "address", "management"];
+  const content4 = [
+    {
+      No: 1,
+      name: "김복남",
+      Id: "20230131",
+      gender: "여",
+      birth: "1948.11.15",
+      address: "경상북도 군위군 삼국유사면",
+      management: "부"
+    },
+  ];
+
+
+
+  const data = [
+    {
+      id: 1,
+      title: "내가 관리하는 시니어(노인)",
+      description: (
+        <Table
+          className={"protector-user"}
+          head={thead1}
+          contents={content1}
+          contentKey={key1}
+        />
+      ),
+    },
+    {
+      id: 2,
+      title: "전체 시니어(노인)",
+      description: (
+        <Table
+          className={"caregiver-user"}
+          head={thead2}
+          contents={content2}
+          contentKey={key2}
+        />
+      ),
+    },
+  ];
+  const [index, setIndex] = React.useState(1);
+  return (
+    <main>
+      <Modal open={modalOpen} close={closeModal} header="'김복남'님의 가족">
+        <div className="board-wrap">
+        <div className="btn-wrap flex-end margin-bottom">
+              <Button
+                className={"btn-small green-btn"}
+                btnName={"등록"}
+                onClick={() => {
+                  navigate("/SeniorInsert");
+                }}
+              />
+              <Button className={"btn-small green-btn"} btnName={"삭제"} />
+            </div>
+          <div>
+            <Table
+              className={"caregiver-user"}
+              head={thead3}
+              contents={content3}
+              contentKey={key3}
+            />
+          </div>
+          <div>
+            <Button
+              className={"btn-100 green-btn"}
+              btnName={"닫기"}
+              onClick={closeModal}
+            />
+          </div>
+        </div>
+      </Modal>
+      
+      <div className="tab-container">
+        <ul className="tab-menu">
+          {data.map((item) => (
+            <li
+              key={item.id}
+              className={index === item.id ? "active" : null}
+              onClick={() => setIndex(item.id)}
+            >
+              {item.title}
+            </li>
+          ))}
+        </ul>
+        <div className="content-wrap">
+          <div className="search-management flex-start margin-bottom2">
+            <select name="management-agency">
+              <option value="기관전체">전체</option>
+              <option value="군위군청">시니어</option>
+              <option value="대구보훈병원">복지사</option>
+              <option value="대구보훈병원">보호자</option>
+            </select>
+            <select>
+              <option value="이름">이름</option>
+              <option value="아이디">아이디</option>
+              <option value="아이디">등록번호</option>
+            </select>
+            <input type="text" />
+            <Button
+              className={"btn-small gray-btn"}
+              btnName={"검색"}
+            />
+          </div>
+          <div className="btn-wrap flex-end">
+              <Button
+                className={"btn-small green-btn"}
+                btnName={"등록"}
+                onClick={() => {
+                  navigate("/SeniorInsert");
+                }}
+              />
+              <Button className={"btn-small green-btn"} btnName={"삭제"} />
+            </div>
+          <ul className="tab-content">
+            {data
+              .filter((item) => index === item.id)
+              .map((item) => (
+                <li>{item.description}</li>
+              ))}
+          </ul>
+        </div>
+      </div>
+    </main>
+  );
+}
 
client/views/pages/user_management/UserSelectOk.jsx (added)
+++ client/views/pages/user_management/UserSelectOk.jsx
@@ -0,0 +1,143 @@
+import React from "react";
+import Table from "../../component/Table.jsx";
+import Button from "../../component/Button.jsx";
+import { useNavigate } from "react-router";
+import DetailSearch from "../../component/AgencySearch.jsx";
+import ContentTitle from "../../component/ContentTitle.jsx";
+import SubTitle from "../../component/SubTitle.jsx";
+
+export default function SeniorSelect() {
+  const navigate = useNavigate();
+
+  //게시판
+  const thead = [
+    "No",
+    "소속기관명",
+    "이름",
+    "성별",
+    "생년월일",
+    "연락처",
+    "ID",
+    "승인여부",
+  ];
+  const key = [
+    "No",
+    "center",
+    "name",
+    "gender",
+    "birth",
+    "phone",
+    "ID",
+    "worker",
+  ];
+  const content = [
+    {
+      No: 1,
+      center: "A복지관",
+      name: "홍길동",
+      gender: "여",
+      birth: "920516",
+      phone: "010-1234-1234",
+      ID: "a123",
+      worker: (<div className="btn-wrap">
+      <Button
+        className={"btn-small green-btn"}
+        btnName={"승인"}
+        onClick={() => {
+          navigate("/SeniorInsert");
+        }}
+      />
+      <Button className={"btn-small green-btn"} btnName={"반려"} />
+    </div>)
+    },
+    {
+      No: 2,
+      center: "A복지관",
+      name: "홍길동",
+      gender: "여",
+      birth: "920506",
+      phone: "010-1234-1234",
+      ID: "b123",
+      worker: (<div className="btn-wrap">
+      <Button
+        className={"btn-small green-btn"}
+        btnName={"승인"}
+        onClick={() => {
+          navigate("/SeniorInsert");
+        }}
+      />
+      <Button className={"btn-small green-btn"} btnName={"반려"} />
+    </div>)
+    },
+    {
+      No: 3,
+      center: "A복지관",
+      name: "홍길동",
+      gender: "여",
+      birth: "920519",
+      phone: "010-1234-1234",
+      ID: "c123",
+      worker: (<div className="btn-wrap">
+      <Button
+        className={"btn-small green-btn"}
+        btnName={"승인"}
+        onClick={() => {
+          navigate("/SeniorInsert");
+        }}
+      />
+      <Button className={"btn-small green-btn"} btnName={"반려"} />
+    </div>)
+    },
+
+  ];
+
+  //select option 동적 생성
+  // const optionList = () => {
+  //   let year = [];
+  //   let month = [];
+  //   let days = [];
+  //   let currentDate = new Date();
+  //   let currentYear = currentDate.getFullYear();
+
+  //   for (let i = 1910; i < currentYear.length; i++) {
+  //     year.push(i);
+  //   }
+
+  //   for (let j = 1; i < 13; j++) {
+  //     month.push(j);
+  //   }
+
+  //   for (let k = 1; i < 32; k++) {
+  //     days.push(k);
+  //   }
+  //   return year, month, days;
+  // };
+
+  // React.useEffect(() => {
+  //   optionList();
+  // }, []);
+
+  return (
+    <main>
+      <div className="content-wrap">
+        <ContentTitle contentTitle={"사용자 계정 승인"} />
+        <div>
+          <div className="board-wrap">
+            <div className="flex">
+              <SubTitle className="margin-bottom" explanation={"승인버튼을 누르면 시행기관의 복지사로 등록됩니다."} />
+              
+            </div >
+            <Table
+              className={"senior-table"}
+              head={thead}
+              contents={content}
+              contentKey={key}
+              
+            />
+
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}
client/views/pages/visit/visit/VisitSelect.jsx
--- client/views/pages/visit/visit/VisitSelect.jsx
+++ client/views/pages/visit/visit/VisitSelect.jsx
@@ -11,37 +11,33 @@
 
   //게시판
   const thead = [
-    "No",
-    "방문날짜",
-    "방문 보호사",
-    "방문 대상자",
-    "방문 사유",
-    "방문 상세 사유",
+    "No", "이름","시니어등록번호", "생년월일", "연락처", "주소", ,"최근 방문일","방문목적","상세사유",
   ];
   const key = [
-    "No",
-    "outing_period",
-    "caregiver",
-    "name",
-    "reason",
-    "reason_detail",
+    "No", "name","number", "birth", "phone", "address","visit","reason" ,"reason_detail"
   ];
   const content = [
     {
       No: 1,
-      outing_period: "2022.12.01",
-      caregiver: "김철수",
-      name: "김말복",
-      reason: "정기내원",
-      reason_detail: "하루동안 미복약으로 방문.",
+      name: "김복남",
+      number: "00000001",
+      birth: "1948.11.15",
+      phone: "010-1234-5678",
+      address: "경상북도 군위군 삼국유사면",
+      visit: "2023.02.08",
+      reason: "정기방문",
+      reason_detail: "정기방문일",
     },
     {
       No: 2,
-      outing_period: "2022.12.14",
-      caregiver: "김양순",
-      name: "홍길동",
-      reason: "정기내원",
-      reason_detail: "두통을 호소하셔서 병원 동행, 단순 두통으로 두통약 처방",
+      name: "박영남",
+      number: "00000002",
+      birth: "1948.11.15",
+      phone: "010-1234-5678",
+      address: "경상북도 군위군 삼국유사면",
+      visit: "2023.02.08",
+      reason: "병원동행",
+      reason_detail: "두통을 호소하심",
     },
   ];
   return (
@@ -65,7 +61,7 @@
               }}
             />
           </div>
-          <div className="btn-wrap flex-end">
+          {/* <div className="btn-wrap flex-end">
             <Button
               className={"btn-small green-btn"}
               btnName={"등록"}
@@ -74,7 +70,7 @@
               }}
             />
             <Button className={"btn-small green-btn"} btnName={"삭제"} />
-          </div>
+          </div> */}
         </div>
       </div>
     </main>
client/views/pages/visit/visit/VisitSelectOne.jsx
--- client/views/pages/visit/visit/VisitSelectOne.jsx
+++ client/views/pages/visit/visit/VisitSelectOne.jsx
@@ -1,73 +1,64 @@
 import React from "react";
-import Button from "../../../component/Button.jsx";
+import { useNavigate } from "react-router";
+import DetailSearch from "../../../component/DetailSearch.jsx";
+import Table from "../../../component/Table.jsx";
 import ContentTitle from "../../../component/ContentTitle.jsx";
-import Chart2 from "../../../component/chart/Chart2.jsx";
+import SubTitle from "../../../component/SubTitle.jsx";
 import TableTitle from "../../../component/Tabletitle.jsx";
+import Chart2 from "../../../component/chart/Chart2.jsx";
+import Button from "../../../component/Button.jsx";
 
-export default function VisitSelectOne() {
+export default function MedicineCareSelect() {
+  const navigate = useNavigate();
+
+  //게시판
+  const thead = ["No","방문일", "방문목적", "상세사유", ];
+  const key = ["No", "birth", "phone", "address", ];
+  const content = [
+    {
+      No: 1,
+      birth: "2023.02.08",
+      phone: "정기방문",
+      address: "정기방문일",
+    },
+    {
+      No: 2,
+      birth: "2023.01.08",
+      phone: "정기방문",
+      address: "정기방문일",
+    },
+  ];
+
   return (
     <main>
       <div className="content-wrap">
-        <ContentTitle contentTitle={"방문 관리 상세페이지"} />
-        <div>
-          <div className="detail-graph">
-            <TableTitle tableTitle={" 님의 방문 내역"} />
-            <Chart2 />
-          </div>
-          <table className="senior-detail margin-bottom">
-            <tr>
-              <th>대상자</th>
-              <td>김말복</td>
-              <th>사용자등록번호</th>
-              <td>
-                202280102
-              </td>
-            </tr>
-            <tr>
-              <th>생년월일</th>
-              <td>1945.11.05</td>
-              <th>성별</th>
-              <td>여</td>
-            </tr>
-            <tr>
-              <th>주소</th>
-              <td>경상북도 군위군 삼국유사면</td>
-              <th>방문날짜</th>
-              <td>2022.12.23</td>
-            </tr>
-            <tr>
-              <th>방문보호사</th>
-              <td>김철수</td>
-              <th>보호사 연락처</th>
-              <td>010-1234-1234</td>
-            </tr>
-            <tr>
-              <th>방문사유</th>
-              <td colSpan={3}>정기방문</td>
-            </tr>
-            <tr>
-              <th>방문 상세 사유</th>
-              <td colSpan={3} style={{ height: "197px", overflow: "auto", textAlign: "left" }}>하루동안 미복약으로 방문.</td>
-            </tr>
-          </table>
+        <ContentTitle contentTitle={"방문 상세 페이지"}/>
+        <div className="detail-graph">
+          <TableTitle tableTitle={" 님의 방문 내역"}/>
+          <Chart2 />
+        </div>
+        <div className="board-wrap">
+        <Table
+            className={"medicine-table"}
+              head={thead}
+              contents={content}
+              contentKey={key}
+              onClick={() => {
+                navigate("/MedicineCareSelectOne");
+              }}
+            />
           <div className="btn-wrap flex-center">
             <Button
               className={"btn-large gray-btn"}
               btnName={"이전"}
               onClick={() => {
-                navigate("/SeniorSelect");
-              }}
-            />
-            <Button
-              className={"btn-large green-btn"}
-              btnName={"수정"}
-              onClick={() => {
-                navigate("/SeniorInsert");
+                navigate("/VisitSelect");
               }}
             />
           </div>
         </div>
       </div>
+      
     </main>
   );
 }
Add a comment
List