최정임 최정임 2023-02-08
230208 최정임 guardian branch 생성
@0ba462df1058bf0340d175e1e5ff1292844c5e99
client/resources/css/common.css
--- client/resources/css/common.css
+++ client/resources/css/common.css
@@ -10,8 +10,8 @@
 .main-grid-guardian{
   height: 100%;
   display: grid;
-  grid-template-columns: 0.9fr 0.9fr 1.1fr 1.1fr;
-  grid-template-rows: 0.5fr 0.1fr;
+  grid-template-columns: 0.9fr 0.9fr;
+  grid-template-rows: 0.1fr 0.5fr 0.5fr;
   gap: 1rem;
 }
 .main-grid-government {
@@ -19,13 +19,6 @@
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   grid-template-rows: 0.1fr 0.5fr 0.3fr 0.3fr 0.3fr;
-  gap: 1rem;
-}
-.main-grid-agency {
-  height: 100%;
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr;
-  grid-template-rows: 0.1fr 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr;
   gap: 1rem;
 }
 .main-grid-government-2 {
@@ -47,7 +40,7 @@
 .statistics-grid{
   display: grid;
   grid-template-columns: 1fr 1fr;
-  grid-template-rows: 1fr 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
   gap: 2rem;
 }
 
@@ -55,14 +48,8 @@
 .combine-left {
   grid-column: 1/3;
 }
-.combine-left2 {
-  grid-column: 1/2;
-}
 
 .combine-left-government {
-  grid-column: 2/4;
-}
-.combine-left-government2 {
   grid-column: 1/4;
 }
 
@@ -71,9 +58,6 @@
 }
 .combine-right2 {
   grid-column: 3/5;
-}
-.combine-right3 {
-  grid-column: 2/3;
 }
 
 .combine-right-government {
@@ -91,6 +75,9 @@
 .combine-all-government {
   grid-row: 1/2;
 }
+.combine-all-government2 {
+  grid-row: 1/4;
+}
 .combine-middle-government {
   grid-row: 2/4;
 }
@@ -101,18 +88,6 @@
 
 .combine-bottom-government2 {
   grid-row: 2/5;
-}
-.combine-bottom-government3 {
-  grid-row: 3/4;
-}
-.combine-bottom-government5 {
-  grid-row: 5/8;
-}
-.combine-bottom-government6 {
-  grid-row: 4/6;
-}
-.combine-bottom-government7 {
-  grid-row: 6/8;
 }
 
 
@@ -242,11 +217,9 @@
 .content-box {
   padding: 1.5rem;
   border-radius: 0.5rem;
-  border: 1px solid #eeeeee;
-  background: #ffffff;
-  box-shadow: 1px 1px 5px 2px rgba(238, 238, 238, 0.5);
+  background-color: rgb(255, 255, 255);
 }
-.main-main{background: #f0ebe352;}
+
  /*체크박스 크기*/
 .checkCon {
   width: 50%;
@@ -328,6 +301,3 @@
 
 hr{border-top: 1px solid #d1e4e3; margin-top: 2rem}
 
-/* background */
-.bg-1{background-image: linear-gradient(to right top, #fff1eb 0%, #f3f6f7 100%);}
-.bg-2{background-image: linear-gradient(to left top, #f1f7fa 0%, #fff1eb 100%);}
(No newline at end of file)
client/resources/css/layout.css
--- client/resources/css/layout.css
+++ client/resources/css/layout.css
@@ -127,8 +127,8 @@
   max-width: 100%;
   height: 100%;
   padding: 4rem;
+  background-color: #e6e5e5;
   grid-area: main;
-  box-shadow: 1px 1px 20px 1px rgba(238, 238, 238, 0.5) inset;
 }
 
 
client/resources/css/main.css
--- client/resources/css/main.css
+++ client/resources/css/main.css
@@ -13,11 +13,102 @@
   display: none;
 }
 
-.join-btn{
+.join-btn {
   background-color: transparent;
 }
+
+/* -----------------------------------------------보호자 */
+.guardian-table {
+  width: 100%;
+}
+
+.guardian-table th {
+  background: none;
+}
+.guardian-table td {
+  border: 0;
+}
+
+.guardian-table {
+  border: 0;
+}
+
+.guardian-table-inner {
+  width: 100%;
+}
+
+.guardian-table-text {
+  width: 20%;
+  border-right: 3px solid #7D9D9C;
+  font-size: 1.8rem;
+  font-weight: bold;
+  margin-right: 2rem;
+}
+.guardian-table1 {
+  width: 100%;
+}
+
+.guardian-table1 th {
+  background: none;
+  font-size: 1.9rem;
+}
+.guardian-table1 th:nth-child(1){
+  background: #f48d8d;
+  border: 6px solid rgba(255, 254, 254, 0.5);
+}
+.guardian-table1 th:nth-child(2){
+  background: #efa33a;
+  border: 6px solid rgba(255, 254, 254, 0.5);
+}
+.guardian-table1 th:nth-child(3){
+  background: #eeeb3c;
+  border: 6px solid rgba(255, 254, 254, 0.5);
+}
+.guardian-table1 th:nth-child(4){
+  background: #9be32e;
+  border: 6px solid rgba(255, 254, 254, 0.5);
+}
+.guardian-table1 th:nth-child(5){
+  background: #9fa6f2;
+  border: 6px solid rgba(255, 254, 254, 0.5);
+}
+.guardian-table1 th:nth-child(6){
+  background: #b089ed;
+  border: 6px solid rgba(255, 254, 254, 0.5);
+}
+.guardian-table1 th:nth-child(7){
+  background: #e057f0;
+  border: 6px solid rgba(255, 254, 254, 0.5);
+}
+.guardian-table1 td {
+  border: 0;
+}
+
+.guardian-table1 {
+  border: 0;
+}
+
+.guardian-table-inner {
+  width: 100%;
+}
+
+.guardian-table-text {
+  width: 20%;
+  border-right: 3px solid #7D9D9C;
+  font-size: 1.8rem;
+  font-weight: bold;
+  margin-right: 2rem;
+}
+.red{color: red;}
+
 /* -----------------------------------------------지자체 */
-.react-calendar{width: 100%;}
+.react-calendar {
+  width: 100%;
+  height: 77%;
+  border: 0;
+  border-radius: 10px;
+}
+
 .map {
   width: 100%;
   height: calc(100% - 31px);
@@ -26,16 +117,69 @@
   align-items: center;
 }
 
+.main-grid-guardian .statistics li {
+  padding: 1rem 3rem;
+  background: rgba(255, 254, 254, 0.5);
+  border-radius: 10px;
+  margin: 0 auto;
+  margin-bottom: 1rem;
+}
+
+.main-grid-guardian .statistics li p {
+  padding: 0 2rem;
+}
+
+.main-grid-guardian .statistics li:nth-child(2),
+.main-grid-guardian .statistics li:nth-child(3),
+.main-grid-guardian .statistics li:nth-child(4),
+.main-grid-guardian .statistics li:nth-child(5),
+.main-grid-guardian .statistics li:nth-child(6),
+.main-grid-guardian .statistics li:nth-child(7) {
+  background: rgba(255, 254, 254, 0.5);
+}
+
+.main-grid-guardian .statistics li p:nth-child(3) {
+  font-size: 1.5rem;
+}
+
+.main-grid-guardian .statistics li p:nth-of-type(1) {
+  position: inherit;
+  font-size: 1.5rem;
+  font-weight: bold;
+}
+
+.main-grid-guardian .statistics li p:nth-of-type(2) {
+  padding: 0;
+  font-size: 2rem;
+}
+
 .statistics {
   border: 1px solid #eeeeee;
   border-radius: 5px;
   padding: 1rem;
 }
 
+
 .statistics li {
   position: relative;
   padding-left: 5rem;
   text-align: center;
+}
+
+.statistics:nth-child(1) {
+  background: #fbe4e4;
+}
+
+.statistics:nth-child(2) {
+  background: #edf7df;
+}
+
+.statistics:nth-child(3) {
+  background: #f9f7e0;
+}
+
+.statistics:nth-child(4) {
+  background: #e9e7fe;
 }
 
 .statistics li p:nth-of-type(1) {
@@ -48,14 +192,12 @@
   font-size: 1.6rem;
   font-weight: bold;
 }
+
 .statistics li p:nth-of-type(3) {
   font-size: 1.6rem;
   font-weight: bold;
 }
 
-.statistics li p:nth-of-type(3)::after {
-  content: "명";
-}
 
 .main-battery-title span::after {
   content: " 님의";
@@ -67,7 +209,11 @@
   font-size: 1.6rem;
   font-weight: 900;
 }
-.main-battery-title p{padding-right: 1rem;}
+
+.main-battery-title p {
+  padding-right: 1rem;
+}
+
 .map svg {
   display: block;
 }
@@ -79,11 +225,13 @@
   text-align: center;
   padding-right: 1rem;
 }
+
 .temp::after {
   content: " 입니다.";
   font-size: 1.6rem;
   font-weight: 500;
 }
+
 .battery p {
   font-size: 3rem;
   font-weight: bold;
@@ -186,11 +334,13 @@
   max-height: 100%;
   background-color: #f8f8f8;
 }
-.login-wrap .tab-container{
+
+.login-wrap .tab-container {
   width: 50%;
   margin: auto;
   padding-top: 10rem;
 }
+
 .login-wrap h1 {
   max-width: 100%;
   text-align: center;
@@ -210,6 +360,16 @@
   text-align: center;
 }
 
+.login-form-guardian {
+  padding: 3rem;
+  background: #ffffff;
+}
+
+.login-form-guardian h3 {
+  font-size: 2.4rem;
+  margin-bottom: 2rem;
+}
+
 .login-form {
   position: relative;
   width: 500px;
@@ -218,6 +378,7 @@
   background-color: #ffffff;
   border-radius: 1rem;
 }
+
 .login-form .login-inner {
   margin-bottom: 2rem;
   position: absolute;
@@ -251,43 +412,21 @@
   height: calc(100% - 92px);
 }
 
+.login-select {
+  width: 20%;
+  height: 20%;
+  background: #ffffff;
+  padding: 5rem;
+  margin-right: 2rem;
+  box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.2);
+  cursor: pointer;
 
-.login-form-management h3 {
+}
+
+.login-select h3 {
   font-size: 2rem;
-  text-align: center;
-  margin-bottom: 2rem;
 }
 
-.login-form-management {
-  width: 500px;
-  padding: 5rem 3rem;
-  margin: auto;
-  background-color: #ffffff;
-  border-radius: 1rem;
-}
-
-.login-form-management .login-inner {
-  margin-bottom: 2rem;
-}
-
-.login-form-management .login-inner .content {
-  width: 100%;
-  margin-bottom: 1rem;
-}
-
-.login-form-management .login-inner .fa-solid {
-  font-size: 2rem;
-  margin-bottom: 1rem;
-  color: #eee;
-}
-
-.login-form-management .login-inner input {
-  outline: none;
-  border: 0;
-  margin-bottom: 1rem;
-  padding: 1.5rem;
-  background: #eee;
-}
 
 /* ------------------------------------- 회원가입 page --------------------------------- */
 .join-group {
@@ -346,7 +485,6 @@
 }
 
 .search-group .btn-box {
-  margin-top: 2rem;
   padding-bottom: 0.5rem;
 }
 
@@ -652,11 +790,8 @@
 }
 
 /* 장비등록 */
-.equipment-insert input[type="checkbox" i]{
-  width: 10%;
-}
-.equipment-insert label{width: 30%;}
-.user-list{
+
+.user-list {
   background-color: #eeeeee;
   height: 57.8vh;
 }
@@ -707,7 +842,10 @@
 }
 
 /* 사용자 관리 */
-.tab-menu-mobile{display: none;} 
+.tab-menu-mobile {
+  display: none;
+}
+
 .tab-menu {
   display: flex;
 }
@@ -722,7 +860,7 @@
   border: 1px solid #eeeeee;
 }
 
-.tab-menu li.active {  
+.tab-menu li.active {
   font-weight: bold;
   background-color: #242d2e;
   color: #ffffff;
@@ -747,14 +885,17 @@
   color: #7D9D9C;
 }
 
-.tab-container{
-}
+.tab-container {}
+
 .tab-container>div>div:nth-child(2) {
   margin: 1rem 0;
 }
 
 /* 권한 설정 */
-.authority-table-mobile{display: none;}
+.authority-table-mobile {
+  display: none;
+}
+
 .authority-table-pc th,
 .authority-table-pc td {
   padding: 1.5rem;
@@ -786,6 +927,6 @@
   }
 }
 
-.mobile{
+.mobile {
   display: none;
 }
(No newline at end of file)
 
client/resources/files/images/login-img.png (Binary) (added)
+++ client/resources/files/images/login-img.png
Binary file is not shown
client/views/component/DetailSearch.jsx
--- client/views/component/DetailSearch.jsx
+++ client/views/component/DetailSearch.jsx
@@ -199,7 +199,7 @@
                 <td colSpan={3}>
                   <div className="flex">
                     <select name="" id="">
-                      <option value="">사용자등록번호</option>
+                      <option value="">구분</option>
                       <option value="">어르신 성함</option>
                       <option value="">보호사 성함</option>
                     </select>
client/views/component/Table.jsx
--- client/views/component/Table.jsx
+++ client/views/component/Table.jsx
@@ -51,6 +51,6 @@
 //   padding: 1rem 0;
 //   border-top: 1px solid #ececec;
 //   text-align: center;
-//   font-size: 1.3rem;
+//   font-size: 1.6rem;
 //   background-color: #ffffff;
 // `;
client/views/component/chart/Chart.jsx
--- client/views/component/chart/Chart.jsx
+++ client/views/component/chart/Chart.jsx
@@ -5,174 +5,104 @@
 
 class Chart extends Component {
   componentDidMount() {
-    let root = am5.Root.new("chart");
+    let root5 = am5.Root.new("chart");
 
 
-    root._logo.dispose();
+    root5._logo.dispose();
 // Set themes
 // https://www.amcharts.com/docs/v5/concepts/themes/
-root.setThemes([
-  am5themes_Animated.new(root)
+root5.setThemes([
+  am5themes_Animated.new(root5)
 ]);
 
 
 // Create chart
 // https://www.amcharts.com/docs/v5/charts/xy-chart/
-let chart = root.container.children.push(
-  am5xy.XYChart.new(root, {
-    panX: false,
-    panY: false,
-    wheelX: "panX",
-    wheelY: "zoomX",
-    layout: root.verticalLayout
-  })
-);
+let chart = root5.container.children.push(am5xy.XYChart.new(root5, {
+  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(root5, {}));
+cursor.lineY.set("visible", false);
 
-let data = [
-  {
-    year: "1월",
-    income: 22,
-    expenses: 44
-  },
-  {
-    year: "2월",
-    income: 20,
-    expenses: 40
-  },
-  {
-    year: "3월",
-    income: 15,
-    expenses: 30
-  },
-  {
-    year: "4월",
-    income: 15,
-    expenses: 30
-  },
-  {
-    year: "5월",
-    income: 15,
-    expenses: 30,
-    strokeSettings: {
-      stroke: chart.get("colors").getIndex(1),
-      strokeWidth: 3,
-      strokeDasharray: [5, 5]
-    }
-  },
-  {
-    year: "6월",
-    income: 10,
-    expenses: 20,
-    columnSettings: {
-      strokeWidth: 1,
-      strokeDasharray: [5],
-      fillOpacity: 0.2
-    },
-    info: "(projection)"
-  }
-];
 
 // Create axes
 // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
-let xRenderer = am5xy.AxisRendererX.new(root, {});
-let xAxis = chart.xAxes.push(
-  am5xy.CategoryAxis.new(root, {
-    categoryField: "year",
-    renderer: xRenderer,
-    tooltip: am5.Tooltip.new(root, {})
+let xRenderer = am5xy.AxisRendererX.new(root5, { minGridDistance: 30 });
+xRenderer.labels.template.setAll({
+  rotation: -90,
+  centerY: am5.p50,
+  centerX: am5.p100,
+  paddingRight: 15
+});
+
+let xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root5, {
+  maxDeviation: 0.3,
+  categoryField: "country",
+  renderer: xRenderer,
+  tooltip: am5.Tooltip.new(root5, {})
+}));
+
+let yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root5, {
+  maxDeviation: 0.3,
+  renderer: am5xy.AxisRendererY.new(root5, {})
+}));
+
+
+// Create series
+// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
+let series = chart.series.push(am5xy.ColumnSeries.new(root5, {
+  name: "Series 1",
+  xAxis: xAxis,
+  yAxis: yAxis,
+  valueYField: "value",
+  sequencedInterpolation: true,
+  categoryXField: "country",
+  tooltip: am5.Tooltip.new(root5, {
+    labelText:"{valueY}"
   })
-);
-xRenderer.grid.template.setAll({
-  location: 1
-})
+}));
+
+series.columns.template.setAll({ cornerRadiusTL: 5, cornerRadiusTR: 5 });
+series.columns.template.adapters.add("fill", function(fill, target) {
+  return chart.get("colors").getIndex(series.columns.indexOf(target));
+});
+
+series.columns.template.adapters.add("stroke", function(stroke, target) {
+  return chart.get("colors").getIndex(series.columns.indexOf(target));
+});
+
+
+// Set data
+let data = [{
+  country: "1주",
+  value: 80
+}, {
+  country: "2주",
+  value: 80
+}, {
+  country: "3주",
+  value: 70
+}, {
+  country: "4주",
+  value: 80
+}];
 
 xAxis.data.setAll(data);
+series.data.setAll(data);
 
-let yAxis = chart.yAxes.push(
-  am5xy.ValueAxis.new(root, {
-    min: 0,
-    extraMax: 0.1,
-    renderer: am5xy.AxisRendererY.new(root, {
-      strokeOpacity: 0.1
-    })
-  })
-);
-
-
-// Add series
-// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
-
-let series1 = chart.series.push(
-  am5xy.ColumnSeries.new(root, {
-    name: "인원",
-    xAxis: xAxis,
-    yAxis: yAxis,
-    valueYField: "income",
-    categoryXField: "year",
-    tooltip: am5.Tooltip.new(root, {
-      pointerOrientation: "horizontal",
-      labelText: "{valueY} {info} 명"
-    })
-  })
-);
-
-series1.columns.template.setAll({
-  tooltipY: am5.percent(10),
-  templateField: "columnSettings"
-});
-
-series1.data.setAll(data);
-
-let series2 = chart.series.push(
-  am5xy.LineSeries.new(root, {
-    name: "인건비",
-    xAxis: xAxis,
-    yAxis: yAxis,
-    valueYField: "expenses",
-    categoryXField: "year",
-    tooltip: am5.Tooltip.new(root, {
-      pointerOrientation: "horizontal",
-      labelText: "{valueY} {info} (백만원)"
-    })
-  })
-);
-
-series2.strokes.template.setAll({
-  strokeWidth: 3,
-  templateField: "strokeSettings"
-});
-
-
-series2.data.setAll(data);
-
-series2.bullets.push(function() {
-  return am5.Bullet.new(root, {
-    sprite: am5.Circle.new(root, {
-      strokeWidth: 3,
-      stroke: series2.get("stroke"),
-      radius: 5,
-      fill: root.interfaceColors.get("background")
-    })
-  });
-});
-
-chart.set("cursor", am5xy.XYCursor.new(root, {}));
-
-// Add legend
-// https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/
-let legend = chart.children.push(
-  am5.Legend.new(root, {
-    centerX: am5.p50,
-    x: am5.p50
-  })
-);
-legend.data.setAll(chart.series.values);
 
 // Make stuff animate on load
 // https://www.amcharts.com/docs/v5/concepts/animations/
+series.appear(1000);
 chart.appear(1000, 100);
-series1.appear();
+
   }
 
   componentWillUnmount() {
@@ -182,7 +112,7 @@
   }
 
   render() {
-    return <div id="chart" style={{ width: "100%", height: "80%" }}></div>;
+    return <div id="chart" style={{ width: "100%", height: "90%" }}></div>;
   }
 }
 
client/views/component/chart/Chart1.jsx
--- client/views/component/chart/Chart1.jsx
+++ client/views/component/chart/Chart1.jsx
@@ -101,10 +101,6 @@
           yAxis: yAxis,
           valueYField: fieldName,
           categoryXField: "date",
-          tooltip: am5.Tooltip.new(root1, {
-            pointerOrientation: "horizontal",
-            labelText: "[bold]{name}[/]\n{categoryY}: {valueX}"
-          })
         })
       );
 
@@ -127,8 +123,6 @@
           }),
         });
       });
-
-
 
       legend.data.push(series);
     }
@@ -155,7 +149,7 @@
 
   render() {
     return (
-      <div id="chartdiv1" style={{ width: "100%", height:"17vh"}}></div>
+      <div id="chartdiv1" style={{ width: "100%", height:"80%"}}></div>
     );
   }
 }
client/views/component/chart/Chart2.jsx
--- client/views/component/chart/Chart2.jsx
+++ client/views/component/chart/Chart2.jsx
@@ -8,164 +8,120 @@
     let root = am5.Root.new("Chart2");
 
     root._logo.dispose();
-  // Set themes
-// https://www.amcharts.com/docs/v5/concepts/themes/
-root.setThemes([
-  am5themes_Animated.new(root)
-]);
+    // Set themes
+    // https://www.amcharts.com/docs/v5/concepts/themes/
+    root.setThemes([am5themes_Animated.new(root)]);
 
+    // Create chart
+    // https://www.amcharts.com/docs/v5/charts/xy-chart/
+    let chart = root.container.children.push(
+      am5xy.XYChart.new(root, {
+        panX: true,
+        panY: true,
+        wheelX: "panX",
+        wheelY: "zoomX",
+        pinchZoomX: true,
+      })
+    );
 
-// Create chart
-// https://www.amcharts.com/docs/v5/charts/xy-chart/
-let chart = root.container.children.push(
-  am5xy.XYChart.new(root, {
-    panX: false,
-    panY: false,
-    wheelX: "panX",
-    wheelY: "zoomX",
-    layout: root.verticalLayout
-  })
-);
+    chart.get("colors").set("step", 3);
 
+    // Add cursor
+    // https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
+    let cursor = chart.set("cursor", am5xy.XYCursor.new(root, {}));
+    cursor.lineY.set("visible", false);
 
-let data = [
-  {
-    year: "1월",
-    income: 23.5
-  },
-  {
-    year: "2월",
-    income: 26.2
-  },
-  {
-    year: "3월",
-    income: 30.1
-  },
-  {
-    year: "4월",
-    income: 29.5
-  },
-  {
-    year: "5월",
-    income: 30.6,
-    strokeSettings: {
-      stroke: chart.get("colors").getIndex(1),
-      strokeWidth: 3,
-      strokeDasharray: [5, 5]
-    }
-  },
-  {
-    year: "6월",
-    income: 34.1,
-    columnSettings: {
-      strokeWidth: 1,
-      strokeDasharray: [5],
-      fillOpacity: 0.2
-    },
-    info: "(projection)"
-  }
-];
+    // Create axes
+    // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
+    let xAxis = chart.xAxes.push(
+      am5xy.DateAxis.new(root, {
+        maxDeviation: 0.3,
+        baseInterval: {
+          timeUnit: "day",
+          count: 1,
+        },
+        renderer: am5xy.AxisRendererX.new(root, {}),
+        tooltip: am5.Tooltip.new(root, {}),
+      })
+    );
 
-// Create axes
-// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
-let xRenderer = am5xy.AxisRendererX.new(root, {});
-let xAxis = chart.xAxes.push(
-  am5xy.CategoryAxis.new(root, {
-    categoryField: "year",
-    renderer: xRenderer,
-    tooltip: am5.Tooltip.new(root, {})
-  })
-);
-xRenderer.grid.template.setAll({
-  location: 1
-})
+    let yAxis = chart.yAxes.push(
+      am5xy.ValueAxis.new(root, {
+        maxDeviation: 0.3,
+        renderer: am5xy.AxisRendererY.new(root, {}),
+      })
+    );
 
-xAxis.data.setAll(data);
+    // Create series
+    // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
+    let series = chart.series.push(
+      am5xy.LineSeries.new(root, {
+        name: "Series 1",
+        xAxis: xAxis,
+        yAxis: yAxis,
+        valueYField: "value",
+        valueXField: "date",
+        tooltip: am5.Tooltip.new(root, {
+          labelText: "{valueY}",
+        }),
+      })
+    );
+    series.strokes.template.setAll({
+      strokeWidth: 2,
+      strokeDasharray: [3, 3],
+    });
 
-let yAxis = chart.yAxes.push(
-  am5xy.ValueAxis.new(root, {
-    min: 0,
-    extraMax: 0.1,
-    renderer: am5xy.AxisRendererY.new(root, {
-      strokeOpacity: 0.1
-    })
-  })
-);
+    // Set data
+    let data = [
+      {
+        date: new Date(2022, 8, 1).getTime(),
+        value: 0,
+      },
+      {
+        date: new Date(2022, 8, 2).getTime(),
+        value: 1,
+      },
+      {
+        date: new Date(2022, 8, 3).getTime(),
+        value: 1,
+      },
+      {
+        date: new Date(2022, 8, 4).getTime(),
+        value: 2,
+      },
+      {
+        date: new Date(2022, 8, 5).getTime(),
+        value: 3,
+      },
+      {
+        date: new Date(2022, 8, 6).getTime(),
+        value: 3,
+      },
+      {
+        date: new Date(2022, 8, 7).getTime(),
+        value: 7,
+      },
+      {
+        date: new Date(2022, 8, 8).getTime(),
+        value: 7,
+      },
+      {
+        date: new Date(2022, 8, 9).getTime(),
+        value: 8,
+      },
+      {
+        date: new Date(2022, 8, 10).getTime(),
+        value: 8,
+      },
+    ];
 
+    series.data.setAll(data);
 
-// Add series
-// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
+    // Make stuff animate on load
+    // https://www.amcharts.com/docs/v5/concepts/animations/
+    series.appear(1000);
+    chart.appear(1000, 100);
 
-let series1 = chart.series.push(
-  am5xy.ColumnSeries.new(root, {
-    name: "사용자 수",
-    xAxis: xAxis,
-    yAxis: yAxis,
-    valueYField: "income",
-    categoryXField: "year",
-    tooltip: am5.Tooltip.new(root, {
-      pointerOrientation: "horizontal",
-      labelText: "{valueY} {info} 명"
-    })
-  })
-);
-
-series1.columns.template.setAll({
-  tooltipY: am5.percent(10),
-  templateField: "columnSettings"
-});
-
-series1.data.setAll(data);
-
-// let series2 = chart.series.push(
-//   am5xy.LineSeries.new(root, {
-//     name: "Expenses",
-//     xAxis: xAxis,
-//     yAxis: yAxis,
-//     valueYField: "expenses",
-//     categoryXField: "year",
-//     tooltip: am5.Tooltip.new(root, {
-//       pointerOrientation: "horizontal",
-//       labelText: "{name} in {categoryX}: {valueY} {info}"
-//     })
-//   })
-// );
-
-// series2.strokes.template.setAll({
-//   strokeWidth: 3,
-//   templateField: "strokeSettings"
-// });
-
-
-// series2.data.setAll(data);
-
-// series2.bullets.push(function() {
-//   return am5.Bullet.new(root, {
-//     sprite: am5.Circle.new(root, {
-//       strokeWidth: 3,
-//       stroke: series2.get("stroke"),
-//       radius: 5,
-//       fill: root.interfaceColors.get("background")
-//     })
-//   });
-// });
-
-chart.set("cursor", am5xy.XYCursor.new(root, {}));
-
-// Add legend
-// https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/
-let legend = chart.children.push(
-  am5.Legend.new(root, {
-    centerX: am5.p50,
-    x: am5.p50
-  })
-);
-legend.data.setAll(chart.series.values);
-
-// Make stuff animate on load
-// https://www.amcharts.com/docs/v5/concepts/animations/
-chart.appear(1000, 100);
-series1.appear();
     this.root = root;
   }
 
@@ -176,7 +132,7 @@
   }
 
   render() {
-    return <div id="Chart2" style={{ width: "100%", height: "80%" , maxwidth: "100%"}}></div>;
+    return <div id="Chart2" style={{ width: "100%", height: "15vh" }}></div>;
   }
 }
 
client/views/component/chart/Chart3.jsx
--- client/views/component/chart/Chart3.jsx
+++ client/views/component/chart/Chart3.jsx
@@ -81,17 +81,41 @@
 
 // Set data
 let data = [{
-  country: "60대",
-  value: 80
+  country: "1월",
+  value: 5
 }, {
-  country: "70대",
-  value: 80
+  country: "2월",
+  value: 5
 }, {
-  country: "80대",
-  value: 70
+  country: "3월",
+  value: 5
 }, {
-  country: "90대",
-  value: 65
+  country: "4월",
+  value: 5
+}, {
+  country: "5월",
+  value: 4
+}, {
+  country: "6월",
+  value: 3
+}, {
+  country: "7월",
+  value: 3
+}, {
+  country: "8월",
+  value: 3
+}, {
+  country: "9월",
+  value: 3
+}, {
+  country: "10월",
+  value: 2
+}, {
+  country: "11월",
+  value: 2
+},{
+  country: "12월",
+  value: 1
 }];
 
 xAxis.data.setAll(data);
client/views/component/chart/Donut1.jsx
--- client/views/component/chart/Donut1.jsx
+++ client/views/component/chart/Donut1.jsx
@@ -33,8 +33,11 @@
     // Set data
     // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Setting_data
     series.data.setAll([
-      { value: 1, category: "미사용" },
-      { value: 2, category: "사용" },
+      { value: 1, category: "1등급" },
+      { value: 2, category: "2등급" },
+      { value: 3, category: "3등급" },
+      { value: 3, category: "4등급" },
+      { value: 1, category: "5등급" },
     ]);
 
     // Create legend
client/views/component/chart/Map.jsx
--- client/views/component/chart/Map.jsx
+++ client/views/component/chart/Map.jsx
@@ -316,7 +316,7 @@
         <div
           className="flex80"
           id="Map"
-          style={{ width: "100%", height: "80%", marginBottom: "1rem", color: "#ffffff"}}
+          style={{ width: "100%", height: "35vh", marginBottom: "1rem" }}
         ></div>
     );
   }
client/views/component/chart/RowChart.jsx
--- client/views/component/chart/RowChart.jsx
+++ client/views/component/chart/RowChart.jsx
@@ -82,52 +82,20 @@
     // Set data
     let data = [
       {
-        network: "1월",
-        value: 20,
+        network: "60대",
+        value: 80,
       },
       {
-        network: "2월",
-        value: 18,
+        network: "70대",
+        value: 80,
       },
       {
-        network: "3월",
-        value: 10,
+        network: "80대",
+        value: 70,
       },
       {
-        network: "4월",
-        value: 7,
-      },
-      {
-        network: "5월",
-        value: 5,
-      },
-      {
-        network: "6월",
-        value: 3,
-      },
-      {
-        network: "7월",
-        value: 6,
-      },
-      {
-        network: "8월",
-        value: 7,
-      },
-      {
-        network: "9월",
-        value: 15,
-      },
-      {
-        network: "10월",
-        value: 30,
-      },
-      {
-        network: "11월",
-        value: 13,
-      },
-      {
-        network: "12월",
-        value: 9,
+        network: "90대",
+        value: 75,
       },
     ];
 
@@ -236,7 +204,7 @@
   }
 
   render() {
-    return <div id="RowChart" style={{ width: "100%", height: "80%" }}></div>;
+    return <div id="RowChart" style={{ width: "100%", height: "100%" }}></div>;
   }
 }
 
client/views/layout/Menu.jsx
--- client/views/layout/Menu.jsx
+++ client/views/layout/Menu.jsx
@@ -16,75 +16,75 @@
     path: "/Main",
     icon: <HouseIcon sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }} />,
   },
-  {
-    title: "사용자 관리",
-    path: "/UserAuthoriySelect",
-    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: "/MedicineStatistics",
-      },
-    ],
-  },
+  // {
+  //   title: "사용자 관리",
+  //   path: "/UserAuthoriySelect",
+  //   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: "/MedicineStatistics",
+  //     },
+  //   ],
+  // },
 
-  {
-    title: "방문 관리",
-    prefix: "/Visit",
-    icon: (
-      <DoorFrontIcon sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }} />
-    ),
-    childrens: [
-      {
-        title: "방문 관리",
-        path: "/VisitSelect",
-      },
-    ],
-  },
-  {
-    title: "장비 관리",
-    prefix: "/Equipment",
-    icon: (
-      <SpeakerPhoneIcon
-        sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }}
-      />
-    ),
-    childrens: [
-      {
-        title: "장비 관리",
-        path: "/EquipmentManagementSelect",
-      },
-    ],
-  },
-  {
-    title: "고객지원센터",
-    icon: (
-      <CallIcon sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }} />
-    ),
-    childrens: [      
-      {
-        title: "장비 반납/교환 요청",
-        path: "/EquipmentManagementSelectReturn",
-      },
-    ],
-  },
+  // {
+  //   title: "방문 관리",
+  //   prefix: "/Visit",
+  //   icon: (
+  //     <DoorFrontIcon sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }} />
+  //   ),
+  //   childrens: [
+  //     {
+  //       title: "방문 관리",
+  //       path: "/VisitSelect",
+  //     },
+  //   ],
+  // },
+  // {
+  //   title: "장비 관리",
+  //   prefix: "/Equipment",
+  //   icon: (
+  //     <SpeakerPhoneIcon
+  //       sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }}
+  //     />
+  //   ),
+  //   childrens: [
+  //     {
+  //       title: "장비 관리",
+  //       path: "/EquipmentManagementSelect",
+  //     },
+  //   ],
+  // },
+  // {
+  //   title: "고객지원센터",
+  //   icon: (
+  //     <CallIcon sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }} />
+  //   ),
+  //   childrens: [      
+  //     {
+  //       title: "장비 반납/교환 요청",
+  //       path: "/EquipmentManagementSelectReturn",
+  //     },
+  //   ],
+  // },
   {
     title: "Q&A",
     path: "/QandA",
client/views/pages/App.jsx
--- client/views/pages/App.jsx
+++ client/views/pages/App.jsx
@@ -20,6 +20,7 @@
   const navigate = useNavigate();
   const [isLogin, setIsLogin] = React.useState(false);
 
+
   const getLogin = (loginComponentName) => {
     setIsLogin(true);
     if (loginComponentName == undefined || loginComponentName == null || loginComponentName.length == 0) {
@@ -36,6 +37,7 @@
       item.childrens?.some((child) => location.pathname.startsWith(child.path))
   ) ?? { title: '' };
 
+  
   return (
     <div id="App">
       {isLogin ? (
client/views/pages/AppRoute.jsx
--- client/views/pages/AppRoute.jsx
+++ client/views/pages/AppRoute.jsx
@@ -6,9 +6,7 @@
 import React from "react";
 //react router 라이브러리 import
 import { Routes, Route } from "react-router-dom";
-
-import Test from "./Test/Test.jsx";
-import Main2 from "./main/Main2.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";
@@ -25,15 +23,13 @@
 import EquipmentManagementSelectOne from "./equipment/EquipmentManagementSelectOne.jsx";
 import UserAuthoriySelect from "./authority/UserAuthoriySelect.jsx";
 import MyInfoUpdate from "./authority/MyInfoUpdate.jsx";
-import EquipmentManagementSelectReturn from "./equipment/EquipmentManagementSelectReturn.jsx";
-import Main3 from "./Main/Main3.jsx";
 import QandA from "./authority/QandA.jsx";
+import LoginSelect from "./login/LoginSelect.jsx";
 
 function AppRoute() {
   return (
     <Routes>
-      <Route path="/Test" element={<Test />}></Route>
-      <Route path="/Main" element={<Main2 />}></Route>
+      <Route path="/Main" element={<Main />}></Route>
       <Route path="/SeniorSelect" element={<SeniorSelect />}></Route>
       <Route path="/SeniorInsert" element={<SeniorInsert />}></Route>
       <Route path="/SeniorSelectOne" element={<SeniorSelectOne />}></Route>
@@ -77,9 +73,8 @@
         element={<UserAuthoriySelect />}
       ></Route>
       <Route path="/MyInfoUpdate" element={<MyInfoUpdate />}></Route>
-      <Route path="/EquipmentManagementSelectReturn" element={<EquipmentManagementSelectReturn />}></Route>
-      <Route path="/Main3" element={<Main3 />}></Route>
       <Route path="/QandA" element={<QandA />}></Route>
+      <Route path="/LoginSelect" element={<LoginSelect />}></Route>
     </Routes>
   );
 }
client/views/pages/authority/AuthorityManagement.jsx
--- client/views/pages/authority/AuthorityManagement.jsx
+++ client/views/pages/authority/AuthorityManagement.jsx
@@ -31,11 +31,70 @@
   return (
     <main>
       <div className="content-wrap">
-        <ContentTitle contentTitle={"권한관리"} />
+        <ContentTitle contentTitle={"권한 관리"} />
         <div className="board-wrap">
           <SubTitle className="margin-bottom" explanation={"메뉴 권한을 설정할 수 있습니다."} />
-          <div className="board-wrap">
-            <table className="authority-table">
+          <div className="board-wrap">            
+            <table className="authority-table-mobile">                          
+              <thead>
+                <tr className="flex">
+                  <div>운영자 목록</div>
+                  <select name="division" id="section">
+                      <option value="manager">관리자</option>
+                      <option value="individual">개인</option>
+                      <option value="protection_agency">보호기관</option>
+                      <option value="hospital">병원</option>
+                      <option value="government">지자체</option>
+                  </select>  
+                </tr>
+                <tr>
+                  <th colSpan={2}>
+                    메뉴 목록
+                  </th>
+                </tr>
+                <tr>
+                  <th>대메뉴</th>
+                  <th>소메뉴</th>
+                </tr>
+              </thead>
+              <tbody>
+                {menuList.map((i, idx) =>
+                  Object.entries(i.menu).map(([key, value]) =>
+                    value.map((item, index) => (
+                      <tr key={idx}>
+                        {index === 0 && (
+                          <td rowSpan={value.length}>
+                            <div className="flex-center">
+                              <input
+                                type="checkbox"
+                                id="largeMenu"
+                                className="flex10"
+                              />
+                              <label htmlFor="largeMenu" className="flex60">
+                                {key}
+                              </label>
+                            </div>
+                          </td>
+                        )}
+                        <td>
+                          <div className="flex-center">
+                            <input
+                              type="checkbox"
+                              id="smallMenu"
+                              className="flex10"
+                            />
+                            <label htmlFor="smallMenu" className="flex60">
+                              {item}
+                            </label>
+                          </div>
+                        </td>                        
+                      </tr>
+                    ))
+                  )
+                )}
+              </tbody>
+            </table>
+            <table className="authority-table-pc">              
               <thead>
                 <tr>
                   <th colSpan={2} style={{ width: "30%" }}>
client/views/pages/authority/QandA.jsx
--- client/views/pages/authority/QandA.jsx
+++ client/views/pages/authority/QandA.jsx
@@ -38,6 +38,15 @@
     <main>
       <div className="content-wrap">
       <ContentTitle contentTitle={"Q&A"} />
+      <div className="btn-wrap flex-end">
+      <Button
+              className={"btn-small green-btn margin-bottom"}
+              btnName={"등록"}
+              onClick={() => {
+                navigate("/SeniorSelect");
+              }}
+            />
+      </div>     
         <div className="board-wrap">
           <Table className="equipment-detail" head={thead} contents={content} contentKey={key} />
         </div>
client/views/pages/authority/UserAuthoriySelect.jsx
--- client/views/pages/authority/UserAuthoriySelect.jsx
+++ client/views/pages/authority/UserAuthoriySelect.jsx
@@ -1,203 +1,261 @@
 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 Modal2 from "../../component/Modal2.jsx";
-import { useNavigate } from "react-router";
+import SubTitle from '../../component/SubTitle.jsx'
 
 export default function UserAuthoriySelect() {
-  const navigate = useNavigate();
-  const [modalOpen, setModalOpen] = React.useState(false);
-  const openModal = () => {
-    setModalOpen(true);
-  };
-  const closeModal = () => {
-    setModalOpen(false);
-  };
-  const [modalOpen2, setModalOpen2] = React.useState(false);
-  const openModal2 = () => {
-    setModalOpen2(true);
-    console.log("ddd")
-  };
-  const closeModal2 = () => {
-    setModalOpen2(false);
-  };
   const thead1 = [
     "No",
     "사용자명",
-    "사용자관리번호",
+    "사용자ID",
     "성별",
     "생년월일",
     "주소",
     "대상자 관리",
   ];
-  const key1 = ["No", "name", "Id", "gender", "birth", "address", "management"];
+  const key1 = [
+    "No",
+    "name",
+    "Id",
+    "gender",    
+    "birth",
+    "address",
+    "management",
+  ];
   const content1 = [
     {
       No: 1,
       name: "김복남",
-      Id: "20230131",
-      gender: "여",
+      Id: "admin",
+      gender:"여",
       birth: "1948.11.15",
       address: "경상북도 군위군 삼국유사면",
       management: (
-        <Button
-          className={"btn-small gray-btn"}
-          btnName={"보호자(가족) 보기"}
-          onClick={openModal}
-        />
-      ),
+        <Button className={"btn-small gray-btn"} btnName={"대상자 매칭"} onClick={()=>navigate("/SeniorInsert")} />
+      )
     },
-  ];
-
+  ];  
+  
   const thead2 = [
     "No",
     "사용자명",
     "사용자ID",
-    "연락처",
+    "관리기관",
+    "성별",
+    "생년월일",
     "주소",
-    "보호 대상자",
+    "담당대상자",
   ];
   const key2 = [
     "No",
     "name",
     "Id",
-    "phone",
+    "management_agency",
+    "gender",
+    "birth",
     "address",
-    "Target_management",
+    "Target_management",  
   ];
   const content2 = [
     {
       No: 1,
       name: "김훈",
       Id: "admin2",
-      phone: "010-1234-1234",
+      management_agency: "보호재단",
+      gender: "남",
+      birth: "1988.02.11",
       address: "경상북도 군위군 삼국유사면",
-      Target_management: (
-        <Button
-          className={"btn-small gray-btn"}
-          btnName={"보호대상자"}
-          onClick={openModal2}
-        />
+      Target_management:(
+        <Button className={"btn-small gray-btn"} btnName={"대상자 매칭"} onClick={()=>navigate("/SeniorInsert")} />
       ),
+      
     },
   ];
   const thead3 = [
     "No",
     "사용자명",
     "사용자ID",
-    "대상자와의 관계",
-    "보호자 연락처",
+    "관리기관",
+    "성별",
+    "생년월일",
+    "주소",
   ];
   const key3 = [
     "No",
     "name",
     "Id",
-    "relationship",
-    "phone",
+    "management_agency",
+    "gender",
+    "birth",
+    "address",
   ];
   const content3 = [
     {
       No: 1,
-      name: "김훈",
-      Id: "admin2",
-      relationship: "아들",
-      phone: "010-1234-1234",
+      Id: "admin",
+      name: "홍길동",
+      management_agency: "보훈병원",
+      gender: "여",
+      birth: "1985.10.24",
+      address: "경상북도 군위군 삼국유사면",
+      
     },
-  ];
+  ];  
   const thead4 = [
     "No",
-    "어르신 성함",
-    "사용자등록번호",
+    "사용자명",
+    "사용자ID",
+    "관리기관",
     "성별",
     "생년월일",
     "주소",
-    "관계",
   ];
-  const key4 = ["No", "name", "Id", "gender", "birth", "address", "management"];
+  const key4 = [
+    "No",
+    "name",
+    "Id",
+    "management_agency",
+    "gender",
+    "birth",
+    "address",
+  ];
   const content4 = [
     {
       No: 1,
-      name: "김복남",
-      Id: "20230131",
+      Id: "test",
+      name: "김신",
+      management_agency: "서구청",
       gender: "여",
+      birth: "1990.10.24",
+      address: "대구광역시 서구",
+    },
+  ];  
+  const thead5 = [
+    "No",
+    "사용자명",
+    "사용자ID",
+    "성별",
+    "생년월일",
+    "주소",
+    "관리",
+  ];
+  const key5 = [
+    "No",
+    "name",
+    "Id",
+    "gender",    
+    "birth",
+    "address",
+    "management",
+  ];
+  const content5 = [
+    {
+      No: 1,
+      name: "김복남",
+      Id: "admin",
+      gender:"여",
       birth: "1948.11.15",
       address: "경상북도 군위군 삼국유사면",
-      management: "부"
+      management: (
+        <Button className={"btn-small gray-btn"} btnName={"대상자 매칭"} onClick={()=>navigate("/SeniorInsert")} />
+      )
     },
-  ];
-
-
+  ];  
+  
 
   const data = [
     {
       id: 1,
-      title: "개인(노인)",
+      title: " 보호자",
       description: (
         <Table
           className={"protector-user"}
           head={thead1}
           contents={content1}
           contentKey={key1}
+          onClick={() => {
+            navigate("/SeniorSelectOne");
+          }}
         />
-      ),
+      )
     },
     {
       id: 2,
-      title: "보호자(가족)",
+      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={thead4}
+          contents={content4}
+          contentKey={key4}
+          onClick={() => {
+            navigate("/SeniorSelectOne");
+          }}
+        />
+      )
+    },
+    {
+      id: 5,
+      title: "관리자",
+      description: (
+        <Table
+          className={"management-user"}
+          head={thead5}
+          contents={content5}
+          contentKey={key5}
+          onClick={() => {
+            navigate("/SeniorSelectOne");
+          }}
+        />
+      )
     },
   ];
   const [index, setIndex] = React.useState(1);
   return (
     <main>
-      <Modal open={modalOpen} close={closeModal} header="'김복남'님의 가족">
-        <div className="board-wrap">
-          <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>
-      <Modal2  className={"modal"} open={modalOpen2} close={closeModal2} header="보호 대상자">
-        <div className="board-wrap">
-          <div>
-            <Table
-              className={"caregiver-user"}
-              head={thead4}
-              contents={content4}
-              contentKey={key4}
-            />
-          </div>
-          <div>
-            <Button
-              className={"btn-100 green-btn"}
-              btnName={"닫기"}
-              onClick={closeModal2}
-            />
-          </div>
-        </div>
-      </Modal2>
       <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
@@ -210,33 +268,19 @@
           ))}
         </ul>
         <div className="content-wrap">
-          <div className="search-management flex-start margin-bottom2">
+          <div className="search-management flex-end margin-bottom2">
             <select name="management-agency">
               <option value="기관전체">기관전체</option>
-              <option value="대구보훈병원">복지재단1</option>
-              <option value="군위군청">복지재단2</option>
-              <option value="군위군청">복지재단3</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={"검색"}
-            />
+            <Button className={"btn-small gray-btn"} btnName={"검색"} onClick={()=>navigate("/SeniorInsert")} />
           </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)
client/views/pages/equipment/EquipmentManagementInsert.jsx
--- client/views/pages/equipment/EquipmentManagementInsert.jsx
+++ client/views/pages/equipment/EquipmentManagementInsert.jsx
@@ -1,14 +1,13 @@
 import React from "react";
 import Button from "../../component/Button.jsx";
-import ContentTitle from "../../component/ContentTitle.jsx";
 
 export default function EquipmentManagementInsert() {
   return (
     <main>
       <div className="content-wrap">
-      <ContentTitle contentTitle={"장비 등록"} />
-        <div className="margin-bottom2 insert">
-          {/* <div className="flex30">
+        <div className="page-title  margin-bottom">장비 등록</div>
+        <div className="flex-align-start margin-bottom2 insert">
+          <div className="flex30">
             <div className="flex margin-bottom">
               <input
                 type="text"
@@ -22,11 +21,11 @@
             <ul className="user-list">
               <li>검색 내역이 없습니다.</li>
             </ul>
-          </div> */}
+          </div>
           <table className="flex70 margin-bottom">
             <tbody className="equipment-insert">
               <tr>
-                <th>장비 시리얼 넘버</th>
+                <th>장비넘버</th>
                 <td colSpan={5}>
                   <input type="text" name="" id="" />
                 </td>
@@ -47,21 +46,70 @@
                     </label>
                   </div>
                 </td>
-              </tr>             
+              </tr>
               <tr>
-                <th>구매일</th>
+                <th>사용자</th>
+                <td colSpan={5}>
+                  <div className="flex">
+                    <input type="text" disabled />
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <th>주소</th>
+                <td colSpan={5}>
+                  <div className="flex">
+                    <input type="text" disabled />
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <th>대여일</th>
+                <td>
+                  <input type="date"/>
+                </td>
+                <th>반납일</th>
                 <td>
                   <input type="date" />
                 </td>
-                <th>기기 상태</th>
+                <th>작동여부</th>
                 <td>
                   <select name="" id="" className="select100">
-                    <option value="">양호</option>
+                    <option value="">작동</option>
                     <option value="">수리중</option>
-                    <option value="">불량</option>
+                    <option value="">고장</option>
                   </select>
                 </td>
-              </tr>              
+              </tr>
+              <tr>
+                <th>아침</th>
+                <td>
+                  <select name="" id="" className="select100">
+                    <option value="">미사용</option>
+                    <option value="">사용</option>
+                  </select>
+                </td>
+                <th>점심</th>
+                <td>
+                  <select name="" id="" className="select100">
+                    <option value="">미사용</option>
+                    <option value="">사용</option>
+                  </select>
+                </td>
+                <th>저녁</th>
+                <td>
+                  <select name="" id="" className="select100">
+                    <option value="">미사용</option>
+                    <option value="">사용</option>
+                  </select>
+                </td>
+              </tr>
+              <tr>
+                <th>비고</th>
+                <td colSpan={5}>
+                  <textarea name="" id="" cols="30" rows="10"></textarea>
+                </td>
+              </tr>
             </tbody>
           </table>
         </div>
client/views/pages/equipment/EquipmentManagementSelect.jsx
--- client/views/pages/equipment/EquipmentManagementSelect.jsx
+++ client/views/pages/equipment/EquipmentManagementSelect.jsx
@@ -1,188 +1,144 @@
 import React from "react";
-import Table from "../../component/Table.jsx";
 import Button from "../../component/Button.jsx";
-import SubTitle from "../../component/SubTitle.jsx";
+import Table from "../../component/Table.jsx";
 import Modal from "../../component/Modal.jsx";
+import ContentTitle from "../../component/ContentTitle.jsx";
+import SubTitle from '../../component/SubTitle.jsx'
 import { useNavigate } from "react-router";
 
 export default function EquipmentManagementSelect() {
   const navigate = useNavigate();
-  const thead1 = [
+  const [modalOpen, setModalOpen] = React.useState(false);
+  const openModal = () => {
+    setModalOpen(true);
+  };
+  const closeModal = () => {
+    setModalOpen(false);
+  };
+  //게시판
+  const thead = [
+    <input type="checkbox" />,
     "No",
     "장비명",
     "시리얼 넘버",
     "기기 상태",
     "구매일",
-    "사용여부",
+    "배터리 잔량",
+    "대여가능여부",
     "관리",
   ];
-  const key1 = [
+  const key = [
+    "",
     "No",
     "equipment_name",
     "serialNumber",
     "work",
     "name",
-    "use",
-    "management",];
-  const content1 = [
-    {
-      No: 1,
-      equipment_name: "스마트약상자",
-      serialNumber: "ABCD-1",
-      work: "양호",
-      name: "2022.12.02",
-      use: "사용",
-      management: (
-        <Button
-          className={"btn-small gray-btn"}
-          btnName={"상세보기"}
-          onClick={() => {
-            navigate("/EquipmentManagementSelectOne");
-          }}
-        />
-      ),
-    },
-    {
-      No: 2,
-      equipment_name: "스마트약상자",
-      serialNumber: "ABCD-1",
-      work: "불량",
-      name: "2022.12.02",
-      use: "미사용",
-      management: (
-        <Button
-          className={"btn-small gray-btn"}
-          btnName={"상세보기"}
-          onClick={() => {
-            navigate("/EquipmentManagementSelectOne");
-          }}
-        />
-      ),
-    },
-  ];
-  const thead2 = [
-    "No",
-    "장비명",
-    "시리얼 넘버",
-    "대여일",
-    "배터리 잔량",
-    "사용자",
-  ];
-  const key2 = [
-    "No",
-    "equipment_name",
-    "serialNumber",
-    "name",
     "battery",
+    "rental",
     "management",
   ];
-  const content2 = [
+  const content = [
     {
+      "": <input type="checkbox" />,
       No: 1,
       equipment_name: "스마트약상자",
       serialNumber: "ABCD-1",
+      work: "작동",
       name: "2022.12.02",
       battery: "10%",
-      management: "김복남"
-    },
-  ];
-
-
-
-  const data = [
-    {
-      id: 1,
-      title: "장비 전체",
-      description: (
-        <div>
-        <div className="btn-wrap flex-end margin-bottom ">
-          <Button
-            className={"btn-small green-btn"}
-            btnName={"등록"}
-            onClick={() => {
-              navigate("/EquipmentManagementInsert");
-            }}
-          />
-          <Button className={"btn-small green-btn"} btnName={"삭제"} />
-        </div>
-        <Table
-          className={"caregiver-user"}
-          head={thead1}
-          contents={content1}
-          contentKey={key1}
-        />
-      </div>  
-      ),
-    },
-    {
-      id: 2,
-      title: "미사용 장비",
-      description: (
-        <div>
-          <Table
-            className={"caregiver-user"}
-            head={thead1}
-            contents={content1}
-            contentKey={key1}
-          />
-        </div>      
-      ),
-    },
-    {
-      id: 3,
-      title: "사용중인 장비",
-      description: (
-        <Table
-          className={"caregiver-user"}
-          head={thead2}
-          contents={content2}
-          contentKey={key2}
+      rental: "대여가능",
+      management: (
+        <Button
+          className={"btn-small gray-btn"}
+          btnName={"사용자 등록"}
+          onClick={(event) => (
+            event.stopPropagation(), navigate("/EquipmentRentalInsert")
+          )}
         />
       ),
     },
+    {
+      "": <input type="checkbox" />,
+      No: 2,
+      equipment_name: "혈압측정기",
+      serialNumber: "ABCD-2",
+      work: "수리중",
+      name: "2022.12.02",
+      battery: "0%",
+      rental: "대여중",
+      management: (
+        <Button className={"btn-small gray-btn"} btnName={"사용자 수정"} />
+      ),
+    },
   ];
-  const [index, setIndex] = React.useState(1);
   return (
     <main>
-
-      <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-end margin-bottom2">
-            <select name="management-agency">
-              <option value="기관전체">기관전체</option>
-              <option value="대구보훈병원">복지재단1</option>
-              <option value="군위군청">복지재단2</option>
-              <option value="군위군청">복지재단3</option>
-            </select>
-            <select>
-              <option value="이름">이름</option>
-              <option value="아이디">아이디</option>
-            </select>
-            <input type="text" />
+      <Modal open={modalOpen} close={closeModal} header="장비등록">
+        <div className="board-wrap">
+          <table className="equipment-modal margin-bottom">
+            <tbody>
+              <tr>
+                <th>장비명</th>
+                <td>
+                  <input type="text" />
+                </td>
+              </tr>
+              <tr>
+                <th>시리얼넘버</th>
+                <td>
+                  <input type="text" />
+                </td>
+              </tr>
+              <tr>
+                <th>기기상태</th>
+                <td>
+                  <input type="text" />
+                </td>
+              </tr>
+              <tr>
+                <th>구매일</th>
+                <td>
+                  <input type="date" />
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <div>
             <Button
-              className={"btn-small gray-btn"}
-              btnName={"검색"}
-              onClick={() => navigate("")}
+              className={"btn-100 green-btn"}
+              btnName={"등록"}
+              onClick={closeModal}
             />
           </div>
-          <ul className="tab-content">
-            {data
-              .filter((item) => index === item.id)
-              .map((item) => (
-                <li>{item.description}</li>
-              ))}
-          </ul>
+        </div>
+      </Modal>
+      <div className="content-wrap">
+        <ContentTitle contentTitle={"장비 조회"} />
+        <div className="board-wrap">
+          <SubTitle
+            className="margin-bottom"
+            explanation={"장비명 클릭 시 상세페이지로 이동합니다."}
+          />
+          <div className="equipment-table">
+            <Table
+              className={"equipment-table"}
+              head={thead}
+              contents={content}
+              contentKey={key}
+              onClick={() => {
+                navigate("/EquipmentManagementSelectOne");
+              }}
+            />
+          </div>
+          <div className="btn-wrap flex-end">
+            <Button
+              className={"btn-small green-btn"}
+              btnName={"등록"}
+              onClick={openModal}
+            />
+            <Button className={"btn-small gray-btn"} btnName={"삭제"} />
+          </div>
         </div>
       </div>
     </main>
client/views/pages/healthcare/medicinecare/MedicineCareSelectOne.jsx
--- client/views/pages/healthcare/medicinecare/MedicineCareSelectOne.jsx
+++ client/views/pages/healthcare/medicinecare/MedicineCareSelectOne.jsx
@@ -172,9 +172,9 @@
               </tr>
             </tbody>
           </table>
-          <div className="btn-wrap flex-center">
+          <div className="btn-wrap flex-end">
             <Button
-              className={"btn-large gray-btn"}
+              className={"btn-small gray-btn"}
               btnName={"이전"}
               onClick={() => {
                 navigate("/MedicineCareSelect");
client/views/pages/healthcare/statistics/MedicineStatistics.jsx
--- client/views/pages/healthcare/statistics/MedicineStatistics.jsx
+++ client/views/pages/healthcare/statistics/MedicineStatistics.jsx
@@ -2,11 +2,10 @@
 import ContentTitle from "../../../component/ContentTitle.jsx";
 import SubTitle from "../../../component/SubTitle.jsx";
 import Button from "../../../component/Button.jsx";
-import Chart3 from "../../../component/chart/Chart3.jsx";
 import LineColor from "./../../../component/chart/LineColor.jsx";
 import Donut2 from "./../../../component/chart/Donut2.jsx";
 import ToggleButton from "../../../component/ToggleButton.jsx";
-import Chart from './../../../component/chart/Chart.jsx';
+import Chart from "./../../../component/chart/Chart.jsx";
 
 export default function MedicineStatistics() {
   return (
@@ -15,7 +14,7 @@
         <ContentTitle contentTitle={"복약율 통계"} />
         <div className="board-wrap" style={{ height: "calc(100% - 60px)" }}>
           <div className="statistics-grid" style={{ height: "100%" }}>
-            <div>
+            <div className=" combine-top-government">
               <SubTitle
                 className="margin-bottom"
                 explanation={"토탈 복약율 통계"}
@@ -38,25 +37,6 @@
                   </div>
                 </div>
                 <Donut2 />
-              </div>
-            </div>
-            <div>
-              <div className="flex">
-                <SubTitle
-                  className="margin-bottom"
-                  explanation={"나이대별 복약율 통계"}
-                  color={"#333333"}
-                />
-              </div>
-              <div
-                style={{
-                  border: "1px solid #eeeeee",
-                  borderRadius: "0.5rem",
-                  padding: "1rem",
-                  height: "calc(100% - 47px)",
-                }}
-              >
-                <Chart3 />
               </div>
             </div>
             <div>
client/views/pages/healthcare/temperature/TemperatureManagementSelectOne.jsx
--- client/views/pages/healthcare/temperature/TemperatureManagementSelectOne.jsx
+++ client/views/pages/healthcare/temperature/TemperatureManagementSelectOne.jsx
@@ -2,6 +2,7 @@
 import ClusteredColumnChart from "../../../component/chart/ClusteredColumnChart.jsx";
 import ContentTitle from "../../../component/ContentTitle.jsx";
 import TableTitle from "../../../component/Tabletitle.jsx";
+import Button from "../../../component/Button.jsx";
 
 export default function TemperatureManagementSelectOne() {
   return (
@@ -46,6 +47,15 @@
               </tr>
             </tbody>
           </table>
+          <div className="btn-wrap flex-end">
+            <Button
+              className={"btn-small gray-btn"}
+              btnName={"이전"}
+              onClick={() => {
+                navigate("/TemperatureManagementSelect");
+              }}
+            />
+          </div>
         </div>
       </div>
     </main>
client/views/pages/join/Join.jsx
--- client/views/pages/join/Join.jsx
+++ client/views/pages/join/Join.jsx
@@ -4,119 +4,119 @@
 export default function Join() {
   const navigate = useNavigate();
   return (
-      <div className="container row flex-center join-login">
-        <div className="join-group">
-          <h3>회원가입</h3>
-          <div className="join-inner">
-            <div>
-              <div className="flex-start margin-bottom2">
-                <label className="flex25">구분</label>
-                <select name="division" id="section">
-                  <option value="manager">관리자</option>
-                  <option value="individual">개인</option>
-                  <option value="protection_agency">보호기관</option>
-                  <option value="hospital">병원</option>
-                  <option value="government">지자체</option>
-                </select>
-              </div>
+    <div className="container row flex-center join-login">
+      <div className="join-group">
+        <h3>회원가입</h3>
+        <div className="join-inner">
+          <div>
+            <div className="flex-start margin-bottom2">
+              <label className="flex25">구분</label>
+              <select name="division" id="section">
+                <option value="manager">관리자</option>
+                <option value="individual">개인</option>
+                <option value="protection_agency">보호기관</option>
+                <option value="hospital">병원</option>
+                <option value="government">지자체</option>
+              </select>
             </div>
-            <div>
-              <div className="flex-start margin-bottom2">
-                <label className="flex25" htmlFor="name">
-                  기관명
-                </label>
-                <select name="division" id="section">
-                  <option value="manager">기관명</option>
-                </select>
-              </div>
+          </div>
+          <div>
+            <div className="flex-start margin-bottom2">
+              <label className="flex25" htmlFor="name">
+                기관명
+              </label>
+              <select name="division" id="section">
+                <option value="manager">기관명</option>
+              </select>
             </div>
-            <div>
-              <div className="flex-start margin-bottom2">
-                <label className="flex25" htmlFor="name">
-                  이름
-                </label>
-                <input
-                  type="text"
-                  name="name"
-                  placeholder=""
-                  autocomplete="off"
-                  id="name"
-                />
-              </div>
-            </div>
-            <div className="id">
-              <div className="flex-start margin-bottom2">
-                <label className="flex25" htmlFor="id">
-                  아이디
-                </label>
-                <input
-                  type="text"
-                  name="id"
-                  placeholder=""
-                  autocomplete="off"
-                  id="id"
-                />
-                <Button
-                  btnName={"중복확인"}
-                  className={"green-btn btn-large"}
-                  onclick="openIdChk()"
-                />
-              </div>
-            </div>
-            <div>
-              <div className="flex-start margin-bottom2">
-                <label className="flex25" htmlFor="password">
-                  비밀번호
-                </label>
-                <input
-                  type="text"
-                  name="password"
-                  placeholder=""
-                  autocomplete="off"
-                  id="password"
-                />
-              </div>
-            </div>
-            <div>
-              <div className="flex-start margin-bottom2">
-                <label className="flex25" htmlFor="password_check">
-                  비밀번호 확인
-                </label>
-                <input
-                  type="text"
-                  name="password_check"
-                  placeholder=""
-                  autocomplete="off"
-                  id="password_check"
-                />
-              </div>
-            </div>
-            <div>
-              <div className="flex margin-bottom2">
-                <label className="flex25" htmlFor="phone_number">
-                  전화번호
-                </label>
-                <input
-                  type="text"
-                  name="phone_number"
-                  placeholder=""
-                  autocomplete="off"
-                  id="phone_number"
-                />
-              </div>
-            </div>
-            <div className="btn-wrap">
-              <Button className={"gray-btn btn-large"} btnName={"취소"} />
-              <Button
-                className={"green-btn btn-large"}
-                btnName={"등록"}
-                onClick={() => {
-                  navigate("Login");
-                }}
+          </div>
+          <div>
+            <div className="flex-start margin-bottom2">
+              <label className="flex25" htmlFor="name">
+                이름
+              </label>
+              <input
+                type="text"
+                name="name"
+                placeholder=""
+                autocomplete="off"
+                id="name"
               />
             </div>
           </div>
+          <div className="id">
+            <div className="flex-start margin-bottom2">
+              <label className="flex25" htmlFor="id">
+                아이디
+              </label>
+              <input
+                type="text"
+                name="id"
+                placeholder=""
+                autocomplete="off"
+                id="id"
+              />
+              <Button
+                btnName={"중복확인"}
+                className={"green-btn btn-large"}
+                onclick="openIdChk()"
+              />
+            </div>
+          </div>
+          <div>
+            <div className="flex-start margin-bottom2">
+              <label className="flex25" htmlFor="password">
+                비밀번호
+              </label>
+              <input
+                type="text"
+                name="password"
+                placeholder=""
+                autocomplete="off"
+                id="password"
+              />
+            </div>
+          </div>
+          <div>
+            <div className="flex-start margin-bottom2">
+              <label className="flex25" htmlFor="password_check">
+                비밀번호 확인
+              </label>
+              <input
+                type="text"
+                name="password_check"
+                placeholder=""
+                autocomplete="off"
+                id="password_check"
+              />
+            </div>
+          </div>
+          <div>
+            <div className="flex margin-bottom2">
+              <label className="flex25" htmlFor="phone_number">
+                전화번호
+              </label>
+              <input
+                type="text"
+                name="phone_number"
+                placeholder=""
+                autocomplete="off"
+                id="phone_number"
+              />
+            </div>
+          </div>
+          <div className="btn-wrap">
+            <Button className={"gray-btn btn-large"} btnName={"취소"} />
+            <Button
+              className={"green-btn btn-large"}
+              btnName={"등록"}
+              onClick={() => {
+                navigate("Login");
+              }}
+            />
+          </div>
         </div>
       </div>
+    </div>
   );
 }
client/views/pages/login/Login.jsx
--- client/views/pages/login/Login.jsx
+++ client/views/pages/login/Login.jsx
@@ -1,6 +1,6 @@
 import React from "react";
 import Button from "../../component/Button.jsx";
-import { useNavigate } from "react-router";
+import Join from "./../join/Join.jsx";
 
 export default function Login({ getLogin }) {
   const [isJoin, setIsJoin] = React.useState(false);
@@ -11,132 +11,53 @@
   const onClickLogin = (loginComponentName) => {
     getLogin(loginComponentName);
   };
-
-  function a () {
-    console.log("a함수 실행!");
-  }
-
-  a();
-  
-  const data = [
-    {
-      id: 1,
-      title: "복지관(관리자)",
-      description: (
-        <div className="login-inner">
-          <div>
-            <div className="content">
-              <i className="fa-solid fa-user"></i>
-              <input
-                required
-                maxlength="15"
-                type="text"
-                placeholder="아이디를 입력하세요"
-              />
-            </div>
-            <div className="content">
-              <i className="fa-solid fa-lock"></i>
-              <input
-                type="password"
-                name="password"
-                placeholder="비밀번호를 입력하세요"
-              />
-            </div>
-          </div>
-          <div className="btn-wrap">
-            <Button
-              className={"btn-100 green-btn"}
-              btnName={"로그인"}
-              onClick={() => onClickLogin('/Main')}
-            />
-            <div className="flex-center btn-bottom">
-              <Button
-                className={"join-btn"}
-                btnName={"회원가입"}
-                onClick={onClickJoin}
-              />
-            </div>
-          </div>
-        </div>
-      ),
-    },
-    {
-      id: 2,
-      title: "보호사",
-      description: (
-        <div className="login-inner">
-          <div>
-            <div className="content">
-              <i className="fa-solid fa-user"></i>
-              <input
-                required
-                maxlength="15"
-                type="text"
-                placeholder="아이디를 입력하세요"
-              />
-            </div>
-            <div className="content">
-              <i className="fa-solid fa-lock"></i>
-              <input
-                type="password"
-                name="password"
-                placeholder="비밀번호를 입력하세요"
-              />
-            </div>
-          </div>
-          <div className="btn-wrap">
-            <Button
-              className={"btn-100 green-btn"}
-              btnName={"로그인"}
-              onClick={() => onClickLogin('/Main3')}
-            />
-            <div className="flex-center btn-bottom">
-              <Button
-                className={"join-btn"}
-                btnName={"회원가입"}
-                onClick={onClickJoin}
-              />
-            </div>
-          </div>
-        </div>
-      ),
-    },
-  ];
-  const [index, setIndex] = React.useState(1);
   return (
-    <main>
-      <div className="row login-wrap">
-        <h1>시니어 스마트 케어 모니터링 플랫폼</h1>
-        {isJoin ? (
-          <Join />
-        ) : (
-          <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">
-              <ul className="tab-content">
-                {data
-                  .filter((item) => index === item.id)
-                  .map((item) => (
-                    <li>{item.description}</li>
-                  ))}
-              </ul>
+    <div className="row login-wrap">
+      <h1>시니어 스마트 케어 모니터링 플랫폼</h1>
+      {isJoin ? (
+        <Join />
+      ) : (
+        <div className="container row flex-center join-login">
+          <div className="login-form-guardian">
+            <div>
+              <h3>로그인</h3>
+              <div className="login-inner">
+                <div className="content">
+                  <i className="fa-solid fa-user"></i>
+                  <input
+                    required
+                    maxlength="15"
+                    type="text"
+                    placeholder="아이디를 입력하세요"
+                  />
+                </div>
+                <div className="content">
+                  <i className="fa-solid fa-lock"></i>
+                  <input
+                    type="password"
+                    name="password"
+                    placeholder="비밀번호를 입력하세요"
+                  />
+                </div>
+              </div>
+            </div>
+            <div className="btn-wrap">
+              <Button
+                className={"btn-100 green-btn"}
+                btnName={"로그인"}
+                onClick={() => onClickLogin('/LoginSelect')}
+              />
+              <div className="flex-center btn-bottom">
+                <Button
+                  className={"join-btn"}
+                  btnName={"회원가입"}
+                  onClick={onClickJoin}
+                />
+              </div>
             </div>
           </div>
-        )}
-      </div>
-
-
-
-    </main>
+        </div>
+      )}
+    </div>
   );
 }
 
client/views/pages/login/LoginSelect.jsx (added)
+++ client/views/pages/login/LoginSelect.jsx
@@ -0,0 +1,36 @@
+import React from "react";
+import Button from "../../component/Button.jsx";
+import Join from "./../join/Join.jsx";
+import Person3Icon from '@mui/icons-material/Person3';
+import Person4Icon from '@mui/icons-material/Person4';
+import AddCircleIcon from '@mui/icons-material/AddCircle';
+import { useNavigate } from "react-router";
+
+export default function LoginSelect() {
+  const navigate = useNavigate();
+  return (
+    <div className="row login-wrap">
+      <div className="container row flex-center">
+        <div className="login-select" onClick={() => {
+                navigate("/Main");
+              }}>
+                <Person3Icon sx={{ fontSize: 50, color: "#1976d2" }}/>
+                <h3>박말자</h3>
+        </div>
+        <div className="login-select" onClick={() => {
+                navigate("/Main");
+              }}>
+                <Person4Icon sx={{ fontSize: 50, color: "#1976d2" }}/>
+                <h3>김복남</h3>
+        </div>
+        <div className="login-select" onClick={() => {
+                navigate("/Main");
+              }}>
+                <AddCircleIcon sx={{ fontSize: 50, color: "#1976d2" }}/>
+        </div>
+      </div>
+    </div>
+   
+    
+  );
+}
 
client/views/pages/main/CalendarComponent.jsx (added)
+++ client/views/pages/main/CalendarComponent.jsx
@@ -0,0 +1,23 @@
+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-12-2022", "21-12-2022", "05-12-2022", "02-12-2022"];
+  return (
+    <>
+      <Calendar
+        onChange={setValue}
+        value={value}
+        tileClassName={({ date, view }) => {
+          if (mark.find((x) => x === moment(date).format("DD-MM-YYYY"))) {
+            return "highlight";
+          }
+        }}
+      />
+    </>
+  );
+}
+
client/views/pages/main/Main.jsx
--- client/views/pages/main/Main.jsx
+++ client/views/pages/main/Main.jsx
@@ -1,110 +1,146 @@
 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 Table from "../../component/Table.jsx";
+import Chart1 from "../../component/chart/Chart1.jsx";
+import CalendarComponent from "./CalendarComponent.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';
 
-function Main() {
-  const tableHead = ["이름", "시리얼 넘버", "위치"];
-  const Key = ["name", "serialNumber", "location"];
-  const content = [
+export default function Main() {
+  const tableHead1 = ["", "", "", "", "", ""];
+  const Key1 = ["morning", "morning2", "lunch","lunch2", "dinner","dinner2"];
+  const content1 = [
     {
-      name: "스마트약상자",
-      serialNumber: "ABCD-1",
-      location: "대구광역시 서구 상중이동",
-    },
+      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 = [
     {
-      name: "스마트약상자",
-      serialNumber: "ABCD-2",
-      location: "대구광역시 서구 내당4동",
-    },
+      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 = [
     {
-      name: "스마트약상자",
-      serialNumber: "ABCD-3",
-      location: "대구광역시 서구 내당2,3동",
-    },
-    {
-      name: "스마트약상자",
-      serialNumber: "ABCD-4",
-      location: "대구광역시 서구 평리3동",
-    },
-    {
-      name: "스마트약상자",
-      serialNumber: "ABCD-5",
-      location: "대구광역시 서구 내당1동",
-    },
+      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-government">
-        <div className="content-box combine-left">
-          <div className="flex margin-bottom">
-            <Title title={"케어 노인 분포 현황"} />
-            <AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
-          </div>
-          <Map />
-        </div>
-        <div className="content-box ">
-          <div className="margin-bottom">
-            <Title title={"노인 분포도"} />
-          </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 />
+    <>
+      <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>
+            <CalendarComponent />
+          </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>
-        <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 className="content-box combine-left">
-          <div className="flex margin-bottom">
-            <Title title={"월별 방문 현황 통계"} />
-            <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>
-      </div>
-    </main>
+      </main>
+    </>
   );
 }
-
-export default Main;
 
client/views/pages/main/Map.jsx (added)
+++ client/views/pages/main/Map.jsx
@@ -0,0 +1,316 @@
+import React, { Component } from "react";
+import * as am5 from "@amcharts/amcharts5";
+import * as am5map from "@amcharts/amcharts5/map";
+import am5geodata_usaLow from "../../component/map";
+import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
+// import seniorjson from "../../component/senior.json";
+
+class Map extends Component {
+  componentDidMount() {
+    let root = am5.Root.new("Map");
+    root.setThemes([am5themes_Animated.new(root)]);
+
+    let chart = root.container.children.push(
+      am5map.MapChart.new(root, {
+        panX: "rotateX",
+        // projection: am5map.geoAlbersUsa(),
+      })
+    );
+
+    // Create polygon series
+    let polygonSeries = chart.series.push(
+      am5map.MapPolygonSeries.new(root, {
+        geoJSON: am5geodata_usaLow,
+      })
+    );
+
+    polygonSeries.mapPolygons.template.setAll({
+      tooltipText: "{name}",
+    });
+
+    polygonSeries.mapPolygons.template.states.create("hover", {
+      fill: am5.color(0x297373),
+    });
+
+    let zoomOut = root.tooltipContainer.children.push(
+      am5.Button.new(root, {
+        x: am5.p100,
+        y: 0,
+        centerX: am5.p100,
+        centerY: 0,
+        paddingTop: 18,
+        paddingBottom: 18,
+        paddingLeft: 12,
+        paddingRight: 12,
+        dx: -20,
+        dy: 20,
+        themeTags: ["zoom"],
+        icon: am5.Graphics.new(root, {
+          themeTags: ["button", "icon"],
+          strokeOpacity: 0.7,
+          draw: function (display) {
+            display.moveTo(0, 0);
+            display.lineTo(12, 0);
+          },
+        }),
+      })
+    );
+
+    zoomOut.get("background").setAll({
+      cornerRadiusBL: 40,
+      cornerRadiusBR: 40,
+      cornerRadiusTL: 40,
+      cornerRadiusTR: 40,
+    });
+    zoomOut.events.on("click", function () {
+      if (currentSeries) {
+        currentSeries.hide();
+      }
+      chart.goHome();
+      zoomOut.hide();
+      currentSeries = regionalSeries.US.series;
+      currentSeries.show();
+    });
+    zoomOut.hide();
+
+    // =================================
+    // Set up point series
+    // =================================
+
+    // Load senior data
+    am5.net
+      .load(
+        "https://gist.githubusercontent.com/dbskfnd/e618b91a622b8efeb55ccc562c47864a/raw/23d9030fe1e6e42d6e43348d86b02f6aafa464e2/seniornumber.json"
+      )
+      .then(function (result) {
+        let seniors = am5.JSONParser.parse(result.response);
+        setupseniors(seniors);
+      });
+
+    let regionalSeries = {};
+    let currentSeries;
+
+    // Parses data and creats map point series for domestic and state-level
+    function setupseniors(data) {
+      console.log(data);
+
+      // Init country-level series
+      regionalSeries.US = {
+        markerData: [],
+        series: createSeries("seniors"),
+      };
+
+      // Set current series
+      currentSeries = regionalSeries.US.series;
+
+      // Process data
+      am5.array.each(data.query_results, function (senior) {
+        // Get senior data
+        senior = {
+          state: senior.MAIL_ST_PROV_C,
+          long: am5.type.toNumber(senior.LNGTD_I),
+          lat: am5.type.toNumber(senior.LATTD_I),
+          location: senior.co_loc_n,
+          city: senior.mail_city_n,
+          count: am5.type.toNumber(senior.count),
+        };
+
+        // Process state-level data
+        if (regionalSeries[senior.state] == undefined) {
+          let statePolygon = getPolygon("KR-" + senior.state);
+          if (statePolygon) {
+            let centroid = statePolygon.visualCentroid();
+
+            // Add state data
+            regionalSeries[senior.state] = {
+              target: senior.state,
+              type: "state",
+              name: statePolygon.dataItem.dataContext.name,
+              count: senior.count,
+              seniors: 1,
+              state: senior.state,
+              markerData: [],
+              geometry: {
+                type: "Point",
+                coordinates: [centroid.longitude, centroid.latitude],
+              },
+            };
+            regionalSeries.US.markerData.push(regionalSeries[senior.state]);
+          } else {
+            // State not found
+            return;
+          }
+        } else {
+          regionalSeries[senior.state].seniors++;
+          regionalSeries[senior.state].count += senior.count;
+        }
+
+        // Process city-level data
+        if (regionalSeries[senior.city] == undefined) {
+          regionalSeries[senior.city] = {
+            target: senior.city,
+            type: "city",
+            name: senior.city,
+            count: senior.count,
+            seniors: 1,
+            state: senior.state,
+            markerData: [],
+            geometry: {
+              type: "Point",
+              coordinates: [senior.long, senior.lat],
+            },
+          };
+          regionalSeries[senior.state].markerData.push(
+            regionalSeries[senior.city]
+          );
+        } else {
+          regionalSeries[senior.city].seniors++;
+          regionalSeries[senior.city].count += senior.count;
+        }
+
+        // Process individual senior
+        regionalSeries[senior.city].markerData.push({
+          name: senior.location,
+          count: senior.count,
+          seniors: 1,
+          state: senior.state,
+          geometry: {
+            type: "Point",
+            coordinates: [senior.long, senior.lat],
+          },
+        });
+      });
+      console.log(regionalSeries.US.markerData);
+      regionalSeries.US.series.data.setAll(regionalSeries.US.markerData);
+    }
+
+    // Finds polygon in series by its id
+    function getPolygon(id) {
+      let found;
+      polygonSeries.mapPolygons.each(function (polygon) {
+        if (polygon.dataItem.get("id") == id) {
+          found = polygon;
+        }
+      });
+      return found;
+    }
+
+    // Creates series with heat rules
+    function createSeries(heatfield) {
+      // Create point series
+      let pointSeries = chart.series.push(
+        am5map.MapPointSeries.new(root, {
+          valueField: heatfield,
+          calculateAggregates: true,
+        })
+      );
+
+      // Add senior bullet
+      let circleTemplate = am5.Template.new(root);
+      pointSeries.bullets.push(function () {
+        let container = am5.Container.new(root, {});
+
+        let circle = container.children.push(
+          am5.Circle.new(
+            root,
+            {
+              radius: 10,
+              fill: am5.color(0x000000),
+              fillOpacity: 0.7,
+              cursorOverStyle: "pointer",
+              tooltipText: "{name}:\n[bold]{seniors} seniors[/]",
+            },
+            circleTemplate
+          )
+        );
+
+        let label = container.children.push(
+          am5.Label.new(root, {
+            text: "{seniors}",
+            fill: am5.color(0xffffff),
+            populateText: true,
+            centerX: am5.p50,
+            centerY: am5.p50,
+            textAlign: "center",
+          })
+        );
+
+        // Set up drill-down
+        circle.events.on("click", function (ev) {
+          // Determine what we've clicked on
+          let data = ev.target.dataItem.dataContext;
+
+          // No id? Individual senior - nothing to drill down to further
+          if (!data.target) {
+            return;
+          }
+
+          // Create actual series if it hasn't been yet created
+          if (!regionalSeries[data.target].series) {
+            regionalSeries[data.target].series = createSeries("count");
+            regionalSeries[data.target].series.data.setAll(data.markerData);
+          }
+
+          // Hide current series
+          if (currentSeries) {
+            currentSeries.hide();
+          }
+
+          // Control zoom
+          if (data.type == "state") {
+            let statePolygon = getPolygon("KR-" + data.state);
+            polygonSeries.zoomToDataItem(statePolygon.dataItem);
+          } else if (data.type == "city") {
+            chart.zoomToGeoPoint(
+              {
+                latitude: data.geometry.coordinates[1],
+                longitude: data.geometry.coordinates[0],
+              },
+              64,
+              true
+            );
+          }
+          zoomOut.show();
+
+          // Show new targert series
+          currentSeries = regionalSeries[data.target].series;
+          currentSeries.show();
+        });
+
+        return am5.Bullet.new(root, {
+          sprite: container,
+        });
+      });
+
+      // Add heat rule for circles
+      pointSeries.set("heatRules", [
+        {
+          target: circleTemplate,
+          dataField: "value",
+          min: 10,
+          max: 30,
+          key: "radius",
+        },
+      ]);
+
+      // Set up drill-down
+      // TODO
+
+      return pointSeries;
+    }
+
+    this.root = root;
+  }
+
+  componentWillUnmount() {
+    if (this.root) {
+      this.root.dispose();
+    }
+  }
+
+  render() {
+    return <div id="Map" style={{ width: "100%", height: "250px" }}></div>;
+  }
+}
+
+export default Map;
client/views/pages/main/Weather.jsx
--- client/views/pages/main/Weather.jsx
+++ client/views/pages/main/Weather.jsx
@@ -47,7 +47,7 @@
       <ul className="flex-start">
         <li id="fullDate">{date}</li>
         <li id="temp">{`${temp}°C`}</li>
-        <li><img src={weather} alt="" style={{width:"75%"}}/></li>
+        <li><img src={weather} alt="" /></li>
       </ul>
     </div>
   );
client/views/pages/senior_management/SeniorInsert.jsx
--- client/views/pages/senior_management/SeniorInsert.jsx
+++ client/views/pages/senior_management/SeniorInsert.jsx
@@ -8,7 +8,7 @@
   return (
     <main>
       <div className="content-wrap row">
-      <ContentTitle contentTitle={"대상자 등록"} />
+      <ContentTitle contentTitle={"대상자 등록"}/>
           <table className="margin-bottom2 senior-insert">
             <tr>
               <th>이름</th>
@@ -55,6 +55,12 @@
               </td>
             </tr>
             <tr>
+              <th>보호자 비상연락망</th>
+              <td colSpan={3}>
+                <input type="text" />
+              </td>
+            </tr>
+            <tr>
               <th>연락처</th>
               <td colSpan={3}>
                 <input type="text" />
client/views/pages/visit/visit/VisitSelectOne.jsx
--- client/views/pages/visit/visit/VisitSelectOne.jsx
+++ client/views/pages/visit/visit/VisitSelectOne.jsx
@@ -47,7 +47,7 @@
             </tr>
             <tr>
               <th>방문 상세 사유</th>
-              <td colSpan={3} style={{ height: "197px", overflow: "auto", textAlign: "left" }}>하루동안 미복약으로 방문.</td>
+              <td colSpan={3} style={{ height: "180px", overflow: "auto", textAlign: "left" }}>하루동안 미복약으로 방문.</td>
             </tr>
           </table>
           <div className="btn-wrap flex-center">
Add a comment
List