Commit @6cab57f0323e21b22eb4fba361697516521a88c0

최정임 2023-02-08

230208 최정임 agency branch 생성

@6cab57f0323e21b22eb4fba361697516521a88c0

5ece6ce

6cab57f

client/resources/css/common.css

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

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


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

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

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

 .combine-right {
   grid-column: 3/4;
 }
-
 .combine-right2 {
   grid-column: 3/5;
 }
-
 .combine-right3 {
   grid-column: 2/3;
 }

   grid-column: 4/5;
   grid-row: 2/4;
 }
-
 .combine-right-government2 {
   grid-column: 4/5;
   grid-row: 4/6;
 }
-
 .combine-top-government {
   grid-row: 1/3;
 }

 .combine-all-government {
   grid-row: 1/2;
 }
-
 .combine-middle-government {
   grid-row: 2/4;
 }

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

   background: #ffffff;
   box-shadow: 1px 1px 5px 2px rgba(238, 238, 238, 0.5);
 }
-
-/*체크박스 크기*/
+.main-main{background: #f0ebe352;}
+ /*체크박스 크기*/
 .checkCon {
   width: 50%;
 }

   margin-bottom: 10rem;
 }
 
-hr {
-  border-top: 1px solid #d1e4e3;
-  margin-top: 2rem
-}
+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%);}

5ece6ce

6cab57f

client/resources/css/layout.css

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

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


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

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

5ece6ce

6cab57f

client/resources/css/main.css

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

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


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

   background-color: transparent;
 }
 /* -----------------------------------------------지자체 */
-
-/* 관리자 권한 관리 */
-.explain-table th{background: #ffffff;}
 .react-calendar{width: 100%;}
 .map {
   width: 100%;

   position: absolute;
   left: 0;
 }
-.statistics:nth-of-type(1) {
-  background-image: linear-gradient(to bottom right, #9890e3 0%, #b1f4cf 100%);
-}
-.statistics:nth-of-type(2) {
-  background-image: linear-gradient(to bottom right, #b1f4cf 0%, #5a70df 100%);
-}
-.statistics:nth-of-type(3) {
-  background-image: linear-gradient(to bottom right, #83a9d7 0%, #8d2ecd 100%);
-}
-.statistics:nth-of-type(4) {
-  background-image: linear-gradient(to bottom right, #8d2ecd 0%, #b1f4cf 100%);
-}
-.statistics li p{color: #ffffff;}
+
 .statistics li p:nth-of-type(2) {
   padding-bottom: 0.5rem;
   font-size: 1.6rem;

   font-size: 1.6rem;
   font-weight: bold;
 }
+
 .statistics li p:nth-of-type(3)::after {
   content: "명";
 }

5ece6ce

6cab57f

client/views/component/DetailSearch.jsx

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

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


                 <td colSpan={3}>
                   <div className="flex">
                     <select name="" id="">
-                      <option value="">구분</option>
+                      <option value="">사용자등록번호</option>
                       <option value="">어르신 성함</option>
                       <option value="">보호사 성함</option>
                     </select>

5ece6ce

6cab57f

client/views/component/chart/Chart.jsx

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

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


 
 class Chart extends Component {
   componentDidMount() {
-    let root5 = am5.Root.new("chart");
+    let root = am5.Root.new("chart");
 
 
-    root5._logo.dispose();
+    root._logo.dispose();
 // Set themes
 // https://www.amcharts.com/docs/v5/concepts/themes/
-root5.setThemes([
-  am5themes_Animated.new(root5)
+root.setThemes([
+  am5themes_Animated.new(root)
 ]);
 
 
 // Create chart
 // https://www.amcharts.com/docs/v5/charts/xy-chart/
-let chart = root5.container.children.push(am5xy.XYChart.new(root5, {
-  panX: true,
-  panY: true,
-  wheelX: "panX",
-  wheelY: "zoomX",
-  pinchZoomX:true
-}));
+let chart = root.container.children.push(
+  am5xy.XYChart.new(root, {
+    panX: false,
+    panY: false,
+    wheelX: "panX",
+    wheelY: "zoomX",
+    layout: root.verticalLayout
+  })
+);
 
-// 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(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}"
+let xRenderer = am5xy.AxisRendererX.new(root, {});
+let xAxis = chart.xAxes.push(
+  am5xy.CategoryAxis.new(root, {
+    categoryField: "year",
+    renderer: xRenderer,
+    tooltip: am5.Tooltip.new(root, {})
   })
-}));
-
-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
-}];
+);
+xRenderer.grid.template.setAll({
+  location: 1
+})
 
 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() {

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

5ece6ce

6cab57f

client/views/component/chart/Chart2.jsx

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

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


 
 // 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
-}));
+let chart = root.container.children.push(
+  am5xy.XYChart.new(root, {
+    panX: false,
+    panY: false,
+    wheelX: "panX",
+    wheelY: "zoomX",
+    layout: root.verticalLayout
+  })
+);
 
 
-// Add cursor
-// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
-let cursor = chart.set("cursor", am5xy.XYCursor.new(root, {
-  behavior: "none"
-}));
-cursor.lineY.set("visible", false);
-
-
-// The data
-let data = [{
-  "year": "1월",
-  "아침": 15.87,
-  "점심": 650,
-  "저녁": 121
-}, {
-  "year": "2월",
-  "아침": 1567,
-  "점심": 683,
-  "저녁": 146
-}, {
-  "year": "3월",
-  "아침": 1617,
-  "점심": 691,
-  "저녁": 138
-}, {
-  "year": "4월",
-  "아침": 1630,
-  "점심": 642,
-  "저녁": 127
-}, {
-  "year": "5월",
-  "아침": 1660,
-  "점심": 699,
-  "저녁": 105
-}, {
-  "year": "6월",
-  "아침": 1683,
-  "점심": 721,
-  "저녁": 109
-}, {
-  "year": "7월",
-  "아침": 1691,
-  "점심": 737,
-  "저녁": 112
-}, {
-  "year": "8월",
-  "아침": 1298,
-  "점심": 680,
-  "저녁": 101
-}, {
-  "year": "9월",
-  "아침": 1275,
-  "점심": 664,
-  "저녁": 97
-}, {
-  "year": "10월",
-  "아침": 1246,
-  "점심": 648,
-  "저녁": 93
-}, {
-  "year": "11월",
-  "아침": 1318,
-  "점심": 697,
-  "저녁": 111
-}, {
-  "year": "12월",
-  "아침": 1213,
-  "점심": 633,
-  "저녁": 87
-}];
-
+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.CategoryAxis.new(root, {
-  categoryField: "year",
-  startLocation: 0.5,
-  endLocation: 0.5,
-  renderer: am5xy.AxisRendererX.new(root, {}),
-  tooltip: am5.Tooltip.new(root, {})
-}));
+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
+})
 
 xAxis.data.setAll(data);
 
-let yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
-  renderer: am5xy.AxisRendererY.new(root, {})
-}));
+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/
 
-function createSeries(name, field) {
-  let series = chart.series.push(am5xy.LineSeries.new(root, {
-    name: name,
+let series1 = chart.series.push(
+  am5xy.ColumnSeries.new(root, {
+    name: "사용자 수",
     xAxis: xAxis,
     yAxis: yAxis,
-    stacked:true,
-    valueYField: field,
+    valueYField: "income",
     categoryXField: "year",
     tooltip: am5.Tooltip.new(root, {
       pointerOrientation: "horizontal",
-      labelText: "[bold]{name}[/]\n{categoryX}: {valueY}"
+      labelText: "{valueY} {info} 명"
     })
-  }));
+  })
+);
 
-  series.fills.template.setAll({
-    fillOpacity: 0.5,
-    visible: true
-  });
-
-  series.data.setAll(data);
-  series.appear(1000);
-}
-
-createSeries("아침", "아침");
-createSeries("점심", "점심");
-createSeries("저녁", "저녁");
-
-// Add scrollbar
-// https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
-// chart.set("scrollbarX", am5.Scrollbar.new(root, {
-//   orientation: "horizontal"
-// }));
-
-// Create axis ranges
-// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/axis-ranges/
-let rangeDataItem = xAxis.makeDataItem({
-  category: "1월",
-  endCategory: "12월"
+series1.columns.template.setAll({
+  tooltipY: am5.percent(10),
+  templateField: "columnSettings"
 });
 
-let range = xAxis.createAxisRange(rangeDataItem);
+series1.data.setAll(data);
 
-rangeDataItem.get("grid").setAll({
-  stroke: am5.color(0x00ff33),
-  strokeOpacity: 0.5,
-  strokeDasharray: [3]
-});
+// 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}"
+//     })
+//   })
+// );
 
-rangeDataItem.get("axisFill").setAll({
-  fill: am5.color(0x00ff33),
-  fillOpacity: 0.1,
-  visible:true
-});
-
-// rangeDataItem.get("label").setAll({
-//   inside: true,
-//   text: "Fines for speeding increased",
-//   rotation: 90,
-//   centerX: am5.p100,
-//   centerY: am5.p100,
-//   location: 0,
-//   paddingBottom: 10,
-//   paddingRight: 15
+// series2.strokes.template.setAll({
+//   strokeWidth: 3,
+//   templateField: "strokeSettings"
 // });
 
 
-let rangeDataItem2 = xAxis.makeDataItem({
-  category: "1월"
-});
+// series2.data.setAll(data);
 
-let range2 = xAxis.createAxisRange(rangeDataItem2);
-
-rangeDataItem2.get("grid").setAll({
-  stroke: am5.color(0x00ff33),
-  strokeOpacity: 1,
-  strokeDasharray: [3]
-});
-
-rangeDataItem2.get("axisFill").setAll({
-  fill: am5.color(0x00ff33),
-  fillOpacity: 0.1,
-  visible:true
-});
-
-// rangeDataItem2.get("label").setAll({
-//   inside: true,
-//   text: "Motorcycle fee introduced",
-//   rotation: 90,
-//   centerX: am5.p100,
-//   centerY: am5.p100,
-//   location: 0,
-//   paddingBottom: 10,
-//   paddingRight: 15
+// 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;
   }
 

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

6cab57f

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

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

...	...	@@ -0,0 +1,182 @@
	1	+import React, { Component } from "react";
	2	+import * as am5 from "@amcharts/amcharts5";
	3	+import * as am5xy from "@amcharts/amcharts5/xy";
	4	+import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
	5	+
	6	+class Chart2_1 extends Component {
	7	+ componentDidMount() {
	8	+ let root = am5.Root.new("Chart2_1");
	9	+
	10	+ root._logo.dispose();
	11	+ // Set themes
	12	+// https://www.amcharts.com/docs/v5/concepts/themes/
	13	+root.setThemes([
	14	+ am5themes_Animated.new(root)
	15	+]);
	16	+
	17	+// Create chart
	18	+// https://www.amcharts.com/docs/v5/charts/xy-chart/
	19	+let chart = root.container.children.push(
	20	+ am5xy.XYChart.new(root, {
	21	+ panX: false,
	22	+ panY: false,
	23	+ wheelX: "panX",
	24	+ wheelY: "zoomX",
	25	+ layout: root.verticalLayout
	26	+ })
	27	+);
	28	+
	29	+
	30	+let data = [
	31	+ {
	32	+ year: "1월",
	33	+ expenses: 23.5
	34	+ },
	35	+ {
	36	+ year: "2월",
	37	+ expenses: 26.2
	38	+ },
	39	+ {
	40	+ year: "3월",
	41	+ expenses: 30.1
	42	+ },
	43	+ {
	44	+ year: "4월",
	45	+ expenses: 29.5
	46	+ },
	47	+ {
	48	+ year: "5월",
	49	+ expenses: 30.6,
	50	+ strokeSettings: {
	51	+ stroke: chart.get("colors").getIndex(1),
	52	+ strokeWidth: 3,
	53	+ strokeDasharray: [5, 5]
	54	+ }
	55	+ },
	56	+ {
	57	+ year: "6월",
	58	+ expenses: 34.1,
	59	+ columnSettings: {
	60	+ strokeWidth: 1,
	61	+ strokeDasharray: [5],
	62	+ fillOpacity: 0.2
	63	+ },
	64	+ info: "(projection)"
	65	+ }
	66	+];
	67	+
	68	+// Create axes
	69	+// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
	70	+let xRenderer = am5xy.AxisRendererX.new(root, {});
	71	+let xAxis = chart.xAxes.push(
	72	+ am5xy.CategoryAxis.new(root, {
	73	+ categoryField: "year",
	74	+ renderer: xRenderer,
	75	+ tooltip: am5.Tooltip.new(root, {})
	76	+ })
	77	+);
	78	+xRenderer.grid.template.setAll({
	79	+ location: 1
	80	+})
	81	+
	82	+xAxis.data.setAll(data);
	83	+
	84	+let yAxis = chart.yAxes.push(
	85	+ am5xy.ValueAxis.new(root, {
	86	+ min: 0,
	87	+ extraMax: 0.1,
	88	+ renderer: am5xy.AxisRendererY.new(root, {
	89	+ strokeOpacity: 0.1
	90	+ })
	91	+ })
	92	+);
	93	+
	94	+
	95	+// Add series
	96	+// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
	97	+
	98	+// let series1 = chart.series.push(
	99	+// am5xy.ColumnSeries.new(root, {
	100	+// name: "Income",
	101	+// xAxis: xAxis,
	102	+// yAxis: yAxis,
	103	+// valueYField: "income",
	104	+// categoryXField: "year",
	105	+// tooltip: am5.Tooltip.new(root, {
	106	+// pointerOrientation: "horizontal",
	107	+// labelText: "{name} in {categoryX}: {valueY} {info}"
	108	+// })
	109	+// })
	110	+// );
	111	+
	112	+// series1.columns.template.setAll({
	113	+// tooltipY: am5.percent(10),
	114	+// templateField: "columnSettings"
	115	+// });
	116	+
	117	+// series1.data.setAll(data);
	118	+
	119	+let series2 = chart.series.push(
	120	+ am5xy.LineSeries.new(root, {
	121	+ name: "평균 복용률",
	122	+ xAxis: xAxis,
	123	+ yAxis: yAxis,
	124	+ valueYField: "expenses",
	125	+ categoryXField: "year",
	126	+ tooltip: am5.Tooltip.new(root, {
	127	+ pointerOrientation: "horizontal",
	128	+ labelText: "{valueY} {info} %"
	129	+ })
	130	+ })
	131	+);
	132	+
	133	+series2.strokes.template.setAll({
	134	+ strokeWidth: 3,
	135	+ templateField: "strokeSettings"
	136	+});
	137	+
	138	+
	139	+series2.data.setAll(data);
	140	+
	141	+series2.bullets.push(function() {
	142	+ return am5.Bullet.new(root, {
	143	+ sprite: am5.Circle.new(root, {
	144	+ strokeWidth: 3,
	145	+ stroke: series2.get("stroke"),
	146	+ radius: 5,
	147	+ fill: root.interfaceColors.get("background")
	148	+ })
	149	+ });
	150	+});
	151	+
	152	+chart.set("cursor", am5xy.XYCursor.new(root, {}));
	153	+
	154	+// Add legend
	155	+// https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/
	156	+let legend = chart.children.push(
	157	+ am5.Legend.new(root, {
	158	+ centerX: am5.p50,
	159	+ x: am5.p50
	160	+ })
	161	+);
	162	+legend.data.setAll(chart.series.values);
	163	+
	164	+// Make stuff animate on load
	165	+// https://www.amcharts.com/docs/v5/concepts/animations/
	166	+chart.appear(1000, 100);
	167	+series2.appear();
	168	+ this.root = root;
	169	+ }
	170	+
	171	+ componentWillUnmount() {
	172	+ if (this.root) {
	173	+ this.root.dispose();
	174	+ }
	175	+ }
	176	+
	177	+ render() {
	178	+ return <div id="Chart2_1" style={{ width: "100%", height: "80%" , maxwidth: "100%"}}></div>;
	179	+ }
	180	+}
	181	+
	182	+export default Chart2_1;

5ece6ce

6cab57f

client/views/component/chart/Chart4.jsx

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

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


-import React, { Component } from "react";
-import * as am5 from "@amcharts/amcharts5";
-import * as am5percent from "@amcharts/amcharts5/percent";
-import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
-
-class Chart4 extends Component {
-  componentDidMount() {
-    let root = am5.Root.new("Chart4");
-
-    root._logo.dispose();
-    root.setThemes([am5themes_Animated.new(root)]);
-
-    // Create chart
-    // https://www.amcharts.com/docs/v5/charts/percent-charts/sliced-chart/
-    let chart = root.container.children.push(am5percent.SlicedChart.new(root, {
-      layout: root.verticalLayout
-    }));
-
-
-    // Create series
-    // https://www.amcharts.com/docs/v5/charts/percent-charts/sliced-chart/#Series
-    let series = chart.series.push(am5percent.PyramidSeries.new(root, {
-      orientation: "vertical",
-      valueField: "value",
-      categoryField: "category"
-    }));
-
-
-    // Set data
-    // https://www.amcharts.com/docs/v5/charts/percent-charts/sliced-chart/#Setting_data
-    series.data.setAll([
-      { value: 10, category: "부계면" },
-      { value: 9, category: "소보면" },
-      { value: 6, category: "군위읍" },
-      { value: 5, category: "우보면" },
-      { value: 4, category: "의흥면" },
-      { value: 3, category: "삼국유사면" },
-      { value: 3, category: "산성면" },
-      { value: 2, category: "효령면" }
-    ].reverse());
-
-
-    // Play initial series animation
-    // https://www.amcharts.com/docs/v5/concepts/animations/#Animation_of_series
-    series.appear();
-
-
-    // Create legend
-    // https://www.amcharts.com/docs/v5/charts/percent-charts/legend-percent-series/
-    let legend = chart.children.push(am5.Legend.new(root, {
-      centerX: am5.percent(50),
-      x: am5.percent(50),
-      marginTop: 15,
-      marginBottom: 15
-    }));
-
-    legend.data.setAll(am5.array.copy(series.dataItems).reverse());
-
-
-    // Make stuff animate on load
-    // https://www.amcharts.com/docs/v5/concepts/animations/
-    chart.appear(1000, 100);
-
-    this.root = root;
-  }
-  componentWillUnmount() {
-    if (this.root) {
-      this.root.dispose();
-    }
-  }
-  render() {
-    return <div id="Chart4" style={{ width: "100%", height: "80%" }}></div>
-  }
-}
-
-export default Chart4;

5ece6ce

6cab57f

client/views/component/chart/ClusteredColumnChart.jsx

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

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

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

5ece6ce

6cab57f

client/views/component/chart/Donut1.jsx

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

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


     // Set data
     // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Setting_data
     series.data.setAll([
-      { value: 1, category: "1등급" },
-      { value: 2, category: "2등급" },
-      { value: 3, category: "3등급" },
-      { value: 3, category: "4등급" },
-      { value: 1, category: "5등급" },
+      { value: 1, category: "미사용" },
+      { value: 2, category: "사용" },
     ]);
 
     // Create legend

5ece6ce

6cab57f

client/views/component/chart/LineColor.jsx

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

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


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

5ece6ce

6cab57f

client/views/component/chart/Map.jsx

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

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


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

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

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

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

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

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

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

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

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

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

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

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

5ece6ce

6cab57f

client/views/component/chart/RowChart.jsx

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

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


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

5ece6ce

6cab57f

client/views/component/map.js

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

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


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

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

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

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

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

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

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

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

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

5ece6ce

6cab57f

client/views/component/store.json

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

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

This diff is too big to display.

5ece6ce

6cab57f

client/views/layout/Menu.jsx

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

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


 import SpeakerPhoneIcon from "@mui/icons-material/SpeakerPhone";
 import SettingsIcon from "@mui/icons-material/Settings";
 import CallIcon from '@mui/icons-material/Call';
+import QuestionMarkIcon from '@mui/icons-material/QuestionMark';
 
 export const items = [
   {

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

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

5ece6ce

6cab57f

client/views/pages/AppRoute.jsx

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

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


 import EquipmentRentalInsert from "./equipment/EquipmentRentalInsert.jsx";
 import EquipmentManagementSelect from "./equipment/EquipmentManagementSelect.jsx";
 import EquipmentManagementSelectOne from "./equipment/EquipmentManagementSelectOne.jsx";
-import EquipmentManagementInsert from "./equipment/EquipmentManagementInsert.jsx";
 import UserAuthoriySelect from "./authority/UserAuthoriySelect.jsx";
 import MyInfoUpdate from "./authority/MyInfoUpdate.jsx";
 import EquipmentManagementSelectReturn from "./equipment/EquipmentManagementSelectReturn.jsx";
-import AuthorityManagement from "./authority/AuthorityManagement.jsx";
-import ServiceInsert from "./serviceCenter/ServiceInsert.jsx";
-import AgencyInsert from "./authority/AgencyInsert.jsx";
-import RiskInsert from "./authority/RiskInsert.jsx";
+import Main3 from "./Main/Main3.jsx";
+import QandA from "./authority/QandA.jsx";
 
 function AppRoute() {
   return (

       ></Route>
       <Route path="/MyInfoUpdate" element={<MyInfoUpdate />}></Route>
       <Route path="/EquipmentManagementSelectReturn" element={<EquipmentManagementSelectReturn />}></Route>
-      <Route path="/AuthorityManagement" element={<AuthorityManagement />}></Route>
-      <Route path="/EquipmentManagementInsert" element={<EquipmentManagementInsert />}></Route>
-      <Route path="/ServiceInsert" element={<ServiceInsert />}></Route>
-      <Route path="/AgencyInsert" element={<AgencyInsert />}></Route>
-      <Route path="/RiskInsert" element={<RiskInsert />}></Route>
+      <Route path="/Main3" element={<Main3 />}></Route>
+      <Route path="/QandA" element={<QandA />}></Route>
     </Routes>
   );
 }

5ece6ce

6cab57f

client/views/pages/authority/AuthorityManagement.jsx

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

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

...	...	@@ -31,11 +31,11 @@
31	31	return (
32	32	<main>
33	33	<div className="content-wrap">
34		- <ContentTitle contentTitle={"관리자 권한관리"} />
	34	+ <ContentTitle contentTitle={"권한관리"} />
35	35	<div className="board-wrap">
36	36	<SubTitle className="margin-bottom" explanation={"메뉴 권한을 설정할 수 있습니다."} />
37	37	<div className="board-wrap">
38		- {/* <table className="authority-table-pc">
	38	+ <table className="authority-table">
39	39	<thead>
40	40	<tr>
41	41	<th colSpan={2} style={{ width: "30%" }}>
...	...	@@ -109,126 +109,10 @@
109	109	)
110	110	)}
111	111	</tbody>
112		- </table> */}
113		- <table>
114		- <thead>
115		- <tr>
116		- <th rowSpan="2">구분</th>
117		- <th rowSpan="2">사용자 관리</th>
118		- <th colSpan="3">건강관리</th>
119		- <th rowSpan="2">방문관리</th>
120		- <th rowSpan="2">장비관리</th>
121		- <th rowSpan="2">고객지원센터</th>
122		- <th rowSpan="2">Q&A</th>
123		- </tr>
124		- <tr>
125		- <th>복약관리</th>
126		- <th>댁내온도관리</th>
127		- <th>복약통계</th>
128		- </tr>
129		- </thead>
130		- <tbody>
131		- <tr>
132		- <td>시행기관(병원, 복지관 등)</td>
133		- <td><input type="checkbox" checked="checked"/></td>
134		- <td><input type="checkbox" checked="checked"/></td>
135		- <td><input type="checkbox" checked="checked"/></td>
136		- <td><input type="checkbox" checked="checked"/></td>
137		- <td><input type="checkbox" /></td>
138		- <td><input type="checkbox" checked="checked"/></td>
139		- <td><input type="checkbox" checked="checked"/></td>
140		- <td><input type="checkbox" checked="checked"/></td>
141		- </tr>
142		- <tr>
143		- <td>보호사(간호사, 복지사 등)</td>
144		- <td><input type="checkbox" checked="checked"/></td>
145		- <td><input type="checkbox" checked="checked"/></td>
146		- <td><input type="checkbox" checked="checked"/></td>
147		- <td><input type="checkbox" /></td>
148		- <td><input type="checkbox" checked="checked"/></td>
149		- <td><input type="checkbox" /></td>
150		- <td><input type="checkbox" /></td>
151		- <td><input type="checkbox" /></td>
152		- </tr>
153		- <tr>
154		- <td>보호자(대상자 가족)</td>
155		- <td><input type="checkbox" checked="checked"/></td>
156		- <td><input type="checkbox" /></td>
157		- <td><input type="checkbox" /></td>
158		- <td><input type="checkbox" /></td>
159		- <td><input type="checkbox" /></td>
160		- <td><input type="checkbox" /></td>
161		- <td><input type="checkbox" /></td>
162		- <td><input type="checkbox" checked="checked"/></td>
163		- </tr>
164		- <tr>
165		- <td>대상자</td>
166		- <td><input type="checkbox" checked="checked"/></td>
167		- <td><input type="checkbox" /></td>
168		- <td><input type="checkbox" /></td>
169		- <td><input type="checkbox" /></td>
170		- <td><input type="checkbox" /></td>
171		- <td><input type="checkbox" /></td>
172		- <td><input type="checkbox" /></td>
173		- <td><input type="checkbox" checked="checked"/></td>
174		- </tr>
175		-
176		- </tbody>
177	112	</table>
178	113	<div className="btn-wrap flex-end">
179	114	<Button className={"btn-small green-btn"} btnName={"저장"} />
180	115	</div>
181		- <SubTitle className="margin-bottom" explanation={"각 메뉴에 대한 설명"} />
182		- <table className="explain-table">
183		- <thead>
184		- <tr>
185		- <th rowSpan="2">메뉴</th>
186		- <th rowSpan="2">소메뉴</th>
187		- <th rowSpan="2">상세설명</th>
188		- </tr>
189		- </thead>
190		- <tbody>
191		- <tr>
192		- <td>사용자 관리</td>
193		- <td>-</td>
194		- <td>사용자(노인, 보호자 등)를 등록하고 삭제할 수 있다.</td>
195		- </tr>
196		- <tr>
197		- <td rowSpan="3">건강관리</td>
198		- <td>복약관리</td>
199		- <td>사용자(노인)의 아침, 점심, 저녁 복약여부를 확인하고 관리할 수 있다.</td>
200		- </tr>
201		- <tr>
202		- <td>댁내온도관리</td>
203		- <td>사용자(노인)의 아침, 점심, 저녁 댁내온도를 확인하고 관리할 수 있다.</td>
204		- </tr>
205		- <tr>
206		- <td>복약통계</td>
207		- <td>시행기관에 등록되어 있는 사용자(노인)의 복약 통계 자료를 볼 수 있다.</td>
208		- </tr>
209		- <tr>
210		- <td>방문 관리</td>
211		- <td>-</td>
212		- <td>시행기관의 복지사가 사용자(노인)을 방문한 내역을 확인하고 관리할 수 있다.</td>
213		- </tr>
214		- <tr>
215		- <td>장비 관리</td>
216		- <td>-</td>
217		- <td>시행기관에서 관리하고 있는 장비(전체, 미사용, 사용)현황을 관리하고 사용자를 등록할 수 있다.</td>
218		- </tr>
219		- <tr>
220		- <td>고객지원센터</td>
221		- <td>-</td>
222		- <td>장비업체에 교환/반납 요청을 할 수 있다.</td>
223		- </tr>
224		- <tr>
225		- <td>Q&A</td>
226		- <td>-</td>
227		- <td>사용자(노인, 보호자 등)질문을 등록하고 답변할 수 있다.</td>
228		- </tr>
229		-
230		- </tbody>
231		- </table>
232	116	</div>
233	117	</div>
234	118	</div>

6cab57f

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

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

...	...	@@ -0,0 +1,47 @@
	1	+import React from "react";
	2	+import Button from "../../component/Button.jsx";
	3	+import Table from "../../component/Table.jsx";
	4	+import Modal from "../../component/Modal.jsx";
	5	+import { useNavigate } from "react-router";
	6	+import ContentTitle from "../../component/ContentTitle.jsx";
	7	+
	8	+export default function QandA() {
	9	+ const navigate = useNavigate();
	10	+ //게시판
	11	+ const thead = [
	12	+ "No",
	13	+ "제목",
	14	+ "작성자",
	15	+ "작성일자",
	16	+ "상태",
	17	+ ];
	18	+ const key = [
	19	+ "No",
	20	+ "title",
	21	+ "name",
	22	+ "date",
	23	+ "work",
	24	+ ];
	25	+ const content = [
	26	+ {
	27	+ No: 1,
	28	+ title: (
	29	+ <p style={{textDecoration:"underline"}}>질문입니다.</p>
	30	+ ),
	31	+ name: "홍**",
	32	+ date: "2022-08-01",
	33	+ work: "답변완료"
	34	+ },
	35	+
	36	+ ];
	37	+ return (
	38	+ <main>
	39	+ <div className="content-wrap">
	40	+ <ContentTitle contentTitle={"Q&A"} />
	41	+ <div className="board-wrap">
	42	+ <Table className="equipment-detail" head={thead} contents={content} contentKey={key} />
	43	+ </div>
	44	+ </div>
	45	+ </main>
	46	+ );
	47	+}

5ece6ce

6cab57f

client/views/pages/authority/UserAuthoriySelect.jsx

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

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


 import React from "react";
 import Table from "../../component/Table.jsx";
 import Button from "../../component/Button.jsx";
-import { useNavigate } from "react-router";
-import AgencySearch from "../../component/AgencySearch.jsx";
-import ContentTitle from "../../component/ContentTitle.jsx";
 import SubTitle from "../../component/SubTitle.jsx";
+import Modal from "../../component/Modal.jsx";
+import Modal2 from "../../component/Modal2.jsx";
+import { useNavigate } from "react-router";
 
-export default function SeniorSelect() {
+export default function UserAuthoriySelect() {
   const navigate = useNavigate();
-
-  //게시판
-  const thead = [
+  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",
-    "기관명",    
-    "사업자번호",
-    "담당자명",
-    "담당 부서 연락처",
-    "관리 장비 개수",
+    "사용자명",
+    "사용자관리번호",
+    "성별",
+    "생년월일",
     "주소",
-    "등록된 복지사",
+    "대상자 관리",
   ];
-  const key = [
-    "No",
-    "name",    
-    "BusinessNumber",
-    "representative",
-    "phone",
-    "Fax",
-    "address",
-    "worker",
-  ];
-  const content = [
+  const key1 = ["No", "name", "Id", "gender", "birth", "address", "management"];
+  const content1 = [
     {
       No: 1,
-      name: "A복지관",
-      BusinessNumber: "515-82-00000",
-      representative: "김길동",
-      phone: "053-811-1234",
-      Fax: "50개",
+      name: "김복남",
+      Id: "20230131",
+      gender: "여",
+      birth: "1948.11.15",
       address: "경상북도 군위군 삼국유사면",
-      worker: (
+      management: (
         <Button
           className={"btn-small gray-btn"}
-          btnName={"상세보기"}
-          onClick={() => {
-            navigate("/SeniorSelectOne");
-          }}
-        />
-      ),
-    },
-    {
-      No: 2,
-      name: "B복지관",
-      BusinessNumber: "515-82-00000",
-      representative: "김길동",
-      phone: "053-811-1234",
-      Fax: "80개",
-      address: "경상북도 군위군 삼국유사면",
-      worker: (
-        <Button
-          className={"btn-small gray-btn"}
-          btnName={"상세보기"}
-          onClick={() => {
-            navigate("/SeniorSelectOne");
-          }}
-        />
-      ),
-    },
-    {
-      No: 3,
-      name: "대구보훈병원",
-      BusinessNumber: "515-82-00000",
-      representative: "김길동",
-      phone: "053-811-1234",
-      Fax: "30개",
-      address: "경상북도 군위군 삼국유사면",
-      worker: (
-        <Button
-          className={"btn-small gray-btn"}
-          btnName={"상세보기"}
-          onClick={() => {
-            navigate("/SeniorSelectOne");
-          }}
+          btnName={"보호자(가족) 보기"}
+          onClick={openModal}
         />
       ),
     },
   ];
 
-  //select option 동적 생성
-  // const optionList = () => {
-  //   let year = [];
-  //   let month = [];
-  //   let days = [];
-  //   let currentDate = new Date();
-  //   let currentYear = currentDate.getFullYear();
+  const thead2 = [
+    "No",
+    "사용자명",
+    "사용자ID",
+    "연락처",
+    "주소",
+    "보호 대상자",
+  ];
+  const key2 = [
+    "No",
+    "name",
+    "Id",
+    "phone",
+    "address",
+    "Target_management",
+  ];
+  const content2 = [
+    {
+      No: 1,
+      name: "김훈",
+      Id: "admin2",
+      phone: "010-1234-1234",
+      address: "경상북도 군위군 삼국유사면",
+      Target_management: (
+        <Button
+          className={"btn-small gray-btn"}
+          btnName={"보호대상자"}
+          onClick={openModal2}
+        />
+      ),
+    },
+  ];
+  const thead3 = [
+    "No",
+    "사용자명",
+    "사용자ID",
+    "대상자와의 관계",
+    "보호자 연락처",
+  ];
+  const key3 = [
+    "No",
+    "name",
+    "Id",
+    "relationship",
+    "phone",
+  ];
+  const content3 = [
+    {
+      No: 1,
+      name: "김훈",
+      Id: "admin2",
+      relationship: "아들",
+      phone: "010-1234-1234",
+    },
+  ];
+  const thead4 = [
+    "No",
+    "어르신 성함",
+    "사용자등록번호",
+    "성별",
+    "생년월일",
+    "주소",
+    "관계",
+  ];
+  const key4 = ["No", "name", "Id", "gender", "birth", "address", "management"];
+  const content4 = [
+    {
+      No: 1,
+      name: "김복남",
+      Id: "20230131",
+      gender: "여",
+      birth: "1948.11.15",
+      address: "경상북도 군위군 삼국유사면",
+      management: "부"
+    },
+  ];
 
-  //   for (let i = 1910; i < currentYear.length; i++) {
-  //     year.push(i);
-  //   }
 
-  //   for (let j = 1; i < 13; j++) {
-  //     month.push(j);
-  //   }
 
-  //   for (let k = 1; i < 32; k++) {
-  //     days.push(k);
-  //   }
-  //   return year, month, days;
-  // };
-
-  // React.useEffect(() => {
-  //   optionList();
-  // }, []);
-
+  const data = [
+    {
+      id: 1,
+      title: "개인(노인)",
+      description: (
+        <Table
+          className={"protector-user"}
+          head={thead1}
+          contents={content1}
+          contentKey={key1}
+        />
+      ),
+    },
+    {
+      id: 2,
+      title: "보호자(가족)",
+      description: (
+        <Table
+          className={"caregiver-user"}
+          head={thead2}
+          contents={content2}
+          contentKey={key2}
+        />
+      ),
+    },
+  ];
+  const [index, setIndex] = React.useState(1);
   return (
     <main>
-      <div className="content-wrap">
-        <ContentTitle contentTitle={"기관 조회"} />
-        <div>
-          <AgencySearch />
-          <div className="board-wrap">
-            <div className="flex-end">
-              <div className="btn-wrap flex-end margin-bottom ">
-                <Button
-                  className={"btn-small green-btn"}
-                  btnName={"등록"}
-                  onClick={() => {
-                    navigate("/AgencyInsert");
-                  }}
-                />
-                <Button className={"btn-small green-btn"} btnName={"삭제"} />
-              </div>
-            </div >
+      <Modal open={modalOpen} close={closeModal} header="'김복남'님의 가족">
+        <div className="board-wrap">
+          <div>
             <Table
-              className={"senior-table"}
-              head={thead}
-              contents={content}
-              contentKey={key}
+              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">
+          {data.map((item) => (
+            <li
+              key={item.id}
+              className={index === item.id ? "active" : null}
+              onClick={() => setIndex(item.id)}
+            >
+              {item.title}
+            </li>
+          ))}
+        </ul>
+        <div className="content-wrap">
+          <div className="search-management flex-start margin-bottom2">
+            <select name="management-agency">
+              <option value="기관전체">기관전체</option>
+              <option value="대구보훈병원">복지재단1</option>
+              <option value="군위군청">복지재단2</option>
+              <option value="군위군청">복지재단3</option>
+            </select>
+            <select>
+              <option value="이름">이름</option>
+              <option value="아이디">아이디</option>
+            </select>
+            <input type="text" />
+            <Button
+              className={"btn-small gray-btn"}
+              btnName={"검색"}
+            />
+          </div>
+          <div className="btn-wrap flex-end">
+              <Button
+                className={"btn-small green-btn"}
+                btnName={"등록"}
+                onClick={() => {
+                  navigate("/SeniorInsert");
+                }}
+              />
+              <Button className={"btn-small green-btn"} btnName={"삭제"} />
+            </div>
+          <ul className="tab-content">
+            {data
+              .filter((item) => index === item.id)
+              .map((item) => (
+                <li>{item.description}</li>
+              ))}
+          </ul>
         </div>
       </div>
     </main>

5ece6ce

6cab57f

client/views/pages/equipment/EquipmentManagementSelectOne.jsx

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

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


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

5ece6ce

6cab57f

client/views/pages/equipment/EquipmentManagementSelectReturn.jsx

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

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


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

5ece6ce

6cab57f

client/views/pages/equipment/EquipmentRentalInsert.jsx

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

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

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

5ece6ce

6cab57f

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

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

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


-
+import React from "react";
 import ContentTitle from "../../../component/ContentTitle.jsx";
 import SubTitle from "../../../component/SubTitle.jsx";
 import Button from "../../../component/Button.jsx";

 import Donut2 from "./../../../component/chart/Donut2.jsx";
 import ToggleButton from "../../../component/ToggleButton.jsx";
 import Chart from './../../../component/chart/Chart.jsx';
-import AgencySearch from "../../../component/AgencySearch.jsx";
-import Table from "../../../component/Table.jsx";
-import React, { useState } from "react";
 
 export default function MedicineStatistics() {
-  const [show, setShow] = useState(false);
-  const onClickShow = () => {
-    setShow(!show);
-  };
-
-  const thead = [
-    "No",
-    "기관명",
-    "사업자번호",
-    "담당자명",
-    "담당 부서 연락처",
-    "FAX",
-    "주소",
-    "통계",
-  ];
-  const key = [
-    "No",
-    "name",
-    "BusinessNumber",
-    "representative",
-    "phone",
-    "Fax",
-    "address",
-    "worker",
-  ];
-  const content = [
-    {
-      No: 1,
-      name: "A복지관",
-      BusinessNumber: "515-82-00000",
-      representative: "김길동",
-      phone: "053-811-1234",
-      Fax: "053-811-1234",
-      address: "경상북도 군위군 삼국유사면",
-      worker: (
-        <Button
-          className={"btn-small gray-btn"}
-          btnName={"통계보기"}
-          onClick={onClickShow}
-        />
-      ),
-    },
-  ];
-
   return (
     <main>
       <div className="content-wrap">
         <ContentTitle contentTitle={"복약율 통계"} />
-        <div style={{ height: "calc(100% - 60px)" }}>
-        <div className="content-box combine-left-government2 margin-bottom">
-              <div>
-                <AgencySearch />
-                <div className="board-wrap">
-                  <Table
-                    className={"senior-table"}
-                    head={thead}
-                    contents={content}
-                    contentKey={key}
-                  />
+        <div className="board-wrap" style={{ height: "calc(100% - 60px)" }}>
+          <div className="statistics-grid" style={{ height: "100%" }}>
+            <div>
+              <SubTitle
+                className="margin-bottom"
+                explanation={"토탈 복약율 통계"}
+                color={"#333333"}
+              />
+              <div
+                style={{
+                  border: "1px solid #eeeeee",
+                  borderRadius: "0.5rem",
+                  padding: "1rem",
+                  height: "calc(100% - 47px)",
+                }}
+              >
+                <div className="flex-end">
+                  <div className="flex flex30">
+                    <input type="date" name="" id="" />
+                  </div>
+                  <div className="flex10">
+                    <Button className={"green-btn"} btnName={"검색"} />
+                  </div>
                 </div>
+                <Donut2 />
               </div>
             </div>
-          <div className={show ? "statistics-grid-wrap show" : "statistics-grid-wrap"} style={{ height: "100%" }}>
-            <div className="statistics-grid" style={{ height: "100%" }}>           
-              <div className="content-box combine-left2">
+            <div>
+              <div className="flex">
                 <SubTitle
                   className="margin-bottom"
-                  explanation={"토탈 복약율 통계"}
+                  explanation={"나이대별 복약율 통계"}
                   color={"#333333"}
                 />
-                <div
-                  style={{
-                    border: "1px solid #eeeeee",
-                    borderRadius: "0.5rem",
-                    padding: "1rem",
-                    height: "calc(100% - 47px)",
-                  }}
-                >
-                  <div className="flex-end">
-                    <div className="flex flex30">
-                      <input type="date" name="" id="" />
-                    </div>
-                    <div className="flex10">
-                      <Button className={"green-btn"} btnName={"검색"} />
-                    </div>
-                  </div>
-                  <Donut2 />
-                </div>
               </div>
-              <div className="content-box combine-left2">
-                <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 className="content-box combine-right3">
-                <div className="flex">
-                  <SubTitle
-                    className="margin-bottom"
-                    explanation={"주별, 월별 복약율 통계"}
-                    color={"#333333"}
-                  />
-                  <ToggleButton
-                    btnName1={"주별"}
-                    btnName2={"월별"}
-                  />
-                </div>
-                <div
-                  style={{
-                    border: "1px solid #eeeeee",
-                    borderRadius: "0.5rem",
-                    padding: "1rem",
-                    height: "calc(100% - 47px)",
-                  }}
-                >
-                  <div className="flex-end">
-                    <select name="" id="">
-                      <option value="">1월</option>
-                      <option value="">2월</option>
-                      <option value="">3월</option>
-                      <option value="">4월</option>
-                      <option value="">5월</option>
-                      <option value="">6월</option>
-                      <option value="">7월</option>
-                      <option value="">8월</option>
-                      <option value="">9월</option>
-                      <option value="">10월</option>
-                      <option value="">11월</option>
-                      <option value="">12월</option>
-                    </select>
-                  </div>
-                  <Chart />
-                </div>
-              </div>
-              <div className="content-box combine-right3 combine-all-government">
-                <div className="flex">
-                  <SubTitle
-                    className="margin-bottom"
-                    explanation={"분기별 년별 복약율 통계"}
-                    color={"#333333"}
-                  />
-                  <ToggleButton
-                    btnName1={"분기별"}
-                    btnName2={"년별"}
-                  />
-                </div>
-  
-                <div
-                  style={{
-                    border: "1px solid #eeeeee",
-                    borderRadius: "0.5rem",
-                    padding: "1rem",
-                    height: "calc(100% - 47px)",
-                  }}
-                >
-                  <div className="flex-end">
-                    <select name="" id="">
-                      <option value="">2022</option>
-                      <option value="">2023</option>
-                    </select>
-                  </div>
-                  <LineColor />
-                </div>
+              <div
+                style={{
+                  border: "1px solid #eeeeee",
+                  borderRadius: "0.5rem",
+                  padding: "1rem",
+                  height: "calc(100% - 47px)",
+                }}
+              >
+                <Chart3 />
               </div>
             </div>
-          </div >
+            <div>
+              <div className="flex">
+                <SubTitle
+                  className="margin-bottom"
+                  explanation={"주별, 월별 복약율 통계"}
+                  color={"#333333"}
+                />
+                <ToggleButton
+                  btnName1={"주별"}
+                  btnName2={"월별"}
+                />
+              </div>
+              <div
+                style={{
+                  border: "1px solid #eeeeee",
+                  borderRadius: "0.5rem",
+                  padding: "1rem",
+                  height: "calc(100% - 47px)",
+                }}
+              >
+                <div className="flex-end">
+                  <select name="" id="">
+                    <option value="">1월</option>
+                    <option value="">2월</option>
+                    <option value="">3월</option>
+                    <option value="">4월</option>
+                    <option value="">5월</option>
+                    <option value="">6월</option>
+                    <option value="">7월</option>
+                    <option value="">8월</option>
+                    <option value="">9월</option>
+                    <option value="">10월</option>
+                    <option value="">11월</option>
+                    <option value="">12월</option>
+                  </select>
+                </div>
+                <Chart />
+              </div>
+            </div>
+            <div>
+              <div className="flex">
+                <SubTitle
+                  className="margin-bottom"
+                  explanation={"분기별 년별 복약율 통계"}
+                  color={"#333333"}
+                />
+                <ToggleButton
+                  btnName1={"분기별"}
+                  btnName2={"년별"}
+                />
+              </div>
+
+              <div
+                style={{
+                  border: "1px solid #eeeeee",
+                  borderRadius: "0.5rem",
+                  padding: "1rem",
+                  height: "calc(100% - 47px)",
+                }}
+              >
+                <div className="flex-end">
+                  <select name="" id="">
+                    <option value="">2022</option>
+                    <option value="">2023</option>
+                  </select>
+                </div>
+                <LineColor />
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </main>

5ece6ce

6cab57f

client/views/pages/login/Login.jsx

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

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


 import React from "react";
 import Button from "../../component/Button.jsx";
-import Join from "./../join/Join.jsx";
+import { useNavigate } from "react-router";
 
 export default function Login({ getLogin }) {
   const [isJoin, setIsJoin] = React.useState(false);

     setIsJoin(true);
     console.log(isJoin);
   };
-  const onClickLogin = () => {
-    getLogin();
+  const onClickLogin = (loginComponentName) => {
+    getLogin(loginComponentName);
   };
-  return (
-    <div className="row login-wrap">
-      <h1>시니어 스마트 케어 모니터링 플랫폼</h1>
-      {isJoin ? (
-        <Join />
-      ) : (
-        <div className="container row flex-center join-login">
-          <div className="login-form-management">
-            <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}
+
+  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 className="flex-center btn-bottom">
-                <Button
-                  className={"join-btn"}
-                  btnName={"회원가입"}
-                  onClick={onClickJoin}
-                />
-              </div>
+            </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>
-      )}
-    </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>
+          </div>
+        )}
+      </div>
+
+
+
+    </main>
   );
 }

5ece6ce

6cab57f

client/views/pages/main/Main2.jsx

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

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


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

5ece6ce

6cab57f

client/views/pages/senior_management/SeniorInsert.jsx

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

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


 import React from "react";
 import Button from "../../component/Button.jsx";
+import ContentTitle from "../../component/ContentTitle.jsx";
 import { useNavigate } from "react-router";
 
 export default function SeniorInsert() {

   return (
     <main>
       <div className="content-wrap row">
-        <div className="page-title margin-bottom">대상자 등록</div>
+      <ContentTitle contentTitle={"대상자 등록"} />
           <table className="margin-bottom2 senior-insert">
             <tr>
               <th>이름</th>

                   <option value="">4등급</option>
                   <option value="">등급없음</option>
                 </select>
-              </td>
-            </tr>
-            <tr>
-              <th>보호자 비상연락망</th>
-              <td colSpan={3}>
-                <input type="text" />
               </td>
             </tr>
             <tr>

5ece6ce

6cab57f

client/views/pages/senior_management/SeniorSelect.jsx

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

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


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

5ece6ce

6cab57f

client/views/pages/senior_management/SeniorSelectOne.jsx

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

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


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

5ece6ce

6cab57f

node_modules/.package-lock.json

--- node_modules/.package-lock.json

+++ node_modules/.package-lock.json


 {
-  "name": "node_react_web_server_framework_v1.0",
+  "name": "senior_care_system",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {

5ece6ce

6cab57f

package-lock.json

--- package-lock.json

+++ package-lock.json


 {
-  "name": "node_react_web_server_framework_v1.0",
+  "name": "senior_care_system",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {

         "file-loader": "^6.2.0",
         "fs": "0.0.1-security",
         "history": "5.3.0",
-        "mysql": "^2.18.1",
-        "oracledb": "^5.5.0",
+        "mysql": "2.18.1",
+        "oracledb": "5.5.0",
         "pg": "8.8.0",
         "react": "18.2.0",
         "react-dom": "18.2.0",

Add a comment

Open 0
Closed 0

List

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

...	...	@@ -7,15 +7,13 @@
7	7	grid-template-rows: 1fr 0.1fr 0.1fr;
8	8	gap: 1rem;
9	9	}
10		-
11		-.main-grid-guardian {
	10	+.main-grid-guardian{
12	11	height: 100%;
13	12	display: grid;
14	13	grid-template-columns: 0.9fr 0.9fr 1.1fr 1.1fr;
15	14	grid-template-rows: 0.5fr 0.1fr;
16	15	gap: 1rem;
17	16	}
18		-
19	17	.main-grid-government {
20	18	height: 100%;
21	19	display: grid;
...	...	@@ -23,38 +21,19 @@
23	21	grid-template-rows: 0.1fr 0.5fr 0.3fr 0.3fr 0.3fr;
24	22	gap: 1rem;
25	23	}
26		-
	24	+.main-grid-agency {
	25	+ height: 100%;
	26	+ display: grid;
	27	+ grid-template-columns: 1fr 1fr 1fr 1fr;
	28	+ grid-template-rows: 0.1fr 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr;
	29	+ gap: 1rem;
	30	+}
27	31	.main-grid-government-2 {
28	32	height: 100%;
29	33	display: grid;
30	34	grid-template-columns: 1fr 1fr 1fr 1fr;
31	35	grid-template-rows: 0.1fr 1fr;
32	36	gap: 1rem;
33		-}
34		-
35		-#Chart5>div>div {
36		- position: inherit;
37		- width: 353px;
38		- height: 35rem;
39		-}
40		-
41		-#RowChart>div>div {
42		- position: inherit;
43		- width: 353px;
44		- height: 25rem;
45		-}
46		-#Map>div>div {
47		- position: inherit;
48		- width: 100%;
49		-}
50		-/* #Map{position: absolute; top: 17%;} */
51		-.main-map {
52		- position: relative;
53		-}
54		-.main-map > div:nth-child(2){height: 83%;}
55		-
56		-.grid-map {
57		- width: 25%;
58	37	}
59	38
60	39	.main-grid-hospital {
...	...	@@ -65,51 +44,17 @@
65	44	gap: 1rem;
66	45	}
67	46
68		-.grid-map>div {
69		- width: 100%;
70		- height: 24px;
71		- line-height: 22px;
72		- background: #f0f4dd;
73		- border: 1px solid green;
74		- margin-bottom: 1rem;
75		- border-radius: 10px;
76		- font-size: 1.4rem;
77		- text-align: center;
78		- box-shadow: 1px 1px 1px 1px rgb(20 105 3 / 19%);
79		-}
80		-
81		-.tab-menu>div.active {
82		-}
83		-.pulse {
84		- animation: pulse-animation 2s ;
85		-}
86		-@keyframes pulse-animation {
87		- 0% {
88		- box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
89		- }
90		- 100% {
91		- box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
92		- }
93		-}
94		-.statistics-grid-wrap {
95		- display: none;
96		-}
97		-
98		-.statistics-grid {
	47	+.statistics-grid{
99	48	display: grid;
100	49	grid-template-columns: 1fr 1fr;
101		- grid-template-rows: 1fr 1fr;
	50	+ grid-template-rows: 1fr 1fr 1fr;
102	51	gap: 2rem;
103	52	}
104	53
105		-.show {
106		- display: block;
107		-}
108	54
109	55	.combine-left {
110	56	grid-column: 1/3;
111	57	}
112		-
113	58	.combine-left2 {
114	59	grid-column: 1/2;
115	60	}
...	...	@@ -117,7 +62,6 @@
117	62	.combine-left-government {
118	63	grid-column: 2/4;
119	64	}
120		-
121	65	.combine-left-government2 {
122	66	grid-column: 1/4;
123	67	}
...	...	@@ -125,11 +69,9 @@
125	69	.combine-right {
126	70	grid-column: 3/4;
127	71	}
128		-
129	72	.combine-right2 {
130	73	grid-column: 3/5;
131	74	}
132		-
133	75	.combine-right3 {
134	76	grid-column: 2/3;
135	77	}
...	...	@@ -138,12 +80,10 @@
138	80	grid-column: 4/5;
139	81	grid-row: 2/4;
140	82	}
141		-
142	83	.combine-right-government2 {
143	84	grid-column: 4/5;
144	85	grid-row: 4/6;
145	86	}
146		-
147	87	.combine-top-government {
148	88	grid-row: 1/3;
149	89	}
...	...	@@ -151,7 +91,6 @@
151	91	.combine-all-government {
152	92	grid-row: 1/2;
153	93	}
154		-
155	94	.combine-middle-government {
156	95	grid-row: 2/4;
157	96	}
...	...	@@ -162,6 +101,18 @@
162	101
163	102	.combine-bottom-government2 {
164	103	grid-row: 2/5;
	104	+}
	105	+.combine-bottom-government3 {
	106	+ grid-row: 3/4;
	107	+}
	108	+.combine-bottom-government5 {
	109	+ grid-row: 5/8;
	110	+}
	111	+.combine-bottom-government6 {
	112	+ grid-row: 4/6;
	113	+}
	114	+.combine-bottom-government7 {
	115	+ grid-row: 6/8;
165	116	}
166	117
167	118
...	...	@@ -295,8 +246,8 @@
295	246	background: #ffffff;
296	247	box-shadow: 1px 1px 5px 2px rgba(238, 238, 238, 0.5);
297	248	}
298		-
299		-/체크박스 크기/
	249	+.main-main{background: #f0ebe352;}
	250	+ /체크박스 크기/
300	251	.checkCon {
301	252	width: 50%;
302	253	}
...	...	@@ -375,7 +326,8 @@
375	326	margin-bottom: 10rem;
376	327	}
377	328
378		-hr {
379		- border-top: 1px solid #d1e4e3;
380		- margin-top: 2rem
381		-} (No newline at end of file)
	329	+hr{border-top: 1px solid #d1e4e3; margin-top: 2rem}
	330	+
	331	+/* background */
	332	+.bg-1{background-image: linear-gradient(to right top, #fff1eb 0%, #f3f6f7 100%);}
	333	+.bg-2{background-image: linear-gradient(to left top, #f1f7fa 0%, #fff1eb 100%);} (No newline at end of file)

...	...	@@ -32,20 +32,20 @@
32	32	}
33	33
34	34	nav{
35		- height: 123%;
	35	+ height: 100%;
36	36	background-color: #242d2e;
37	37	grid-area: nav;
38	38	}
39	39
40	40	.logo {
41	41	padding: 2rem 1rem;
42		- font-size: 2.4rem;
	42	+ font-size: large;
43	43	text-align: center;
44	44	color: #ffffff;
45	45	font-weight: bold;
46	46	}
47	47	/* 네비게이션 */
48		-.nav > div > ul{position: fixed;}
	48	+
49	49	.sidebar-item {
50	50	margin: 1rem 0;
51	51	}
...	...	@@ -109,13 +109,12 @@
109	109	font-weight: bold;
110	110	}
111	111
112		-.info-wrap{
113		- padding-top: 64rem;
	112	+.info-wrap{
	113	+ border-top: 1px solid #4b4b4b;
114	114	}
115	115
116	116	.bottom-section {
117		- border-top: 1px solid #4b4b4b;
118		- padding: 2rem 4rem;
	117	+ padding: 1rem 4rem;
119	118	}
120	119
121	120	.info-id {

...	...	@@ -1,4 +1,8 @@
1	1	/* 공통 */
	2	+.logo {
	3	+ font-size: 2.4rem;
	4	+ font-family: "KoPubDotumBold_0";
	5	+}
2	6
3	7	header .page-title span {
4	8	font-family: "KoPubDotumBold_0";
...	...	@@ -13,9 +17,6 @@
13	17	background-color: transparent;
14	18	}
15	19	/* -----------------------------------------------지자체 */
16		-
17		-/* 관리자 권한 관리 */
18		-.explain-table th{background: #ffffff;}
19	20	.react-calendar{width: 100%;}
20	21	.map {
21	22	width: 100%;
...	...	@@ -41,19 +42,7 @@
41	42	position: absolute;
42	43	left: 0;
43	44	}
44		-.statistics:nth-of-type(1) {
45		- background-image: linear-gradient(to bottom right, #9890e3 0%, #b1f4cf 100%);
46		-}
47		-.statistics:nth-of-type(2) {
48		- background-image: linear-gradient(to bottom right, #b1f4cf 0%, #5a70df 100%);
49		-}
50		-.statistics:nth-of-type(3) {
51		- background-image: linear-gradient(to bottom right, #83a9d7 0%, #8d2ecd 100%);
52		-}
53		-.statistics:nth-of-type(4) {
54		- background-image: linear-gradient(to bottom right, #8d2ecd 0%, #b1f4cf 100%);
55		-}
56		-.statistics li p{color: #ffffff;}
	45	+
57	46	.statistics li p:nth-of-type(2) {
58	47	padding-bottom: 0.5rem;
59	48	font-size: 1.6rem;
...	...	@@ -63,6 +52,7 @@
63	52	font-size: 1.6rem;
64	53	font-weight: bold;
65	54	}
	55	+
66	56	.statistics li p:nth-of-type(3)::after {
67	57	content: "명";
68	58	}

...	...	@@ -199,7 +199,7 @@
199	199	<td colSpan={3}>
200	200	<div className="flex">
201	201	<select name="" id="">
202		- <option value="">구분</option>
	202	+ <option value="">사용자등록번호</option>
203	203	<option value="">어르신 성함</option>
204	204	<option value="">보호사 성함</option>
205	205	</select>

...	...	@@ -5,104 +5,174 @@
5	5
6	6	class Chart extends Component {
7	7	componentDidMount() {
8		- let root5 = am5.Root.new("chart");
	8	+ let root = am5.Root.new("chart");
9	9
10	10
11		- root5._logo.dispose();
	11	+ root._logo.dispose();
12	12	// Set themes
13	13	// https://www.amcharts.com/docs/v5/concepts/themes/
14		-root5.setThemes([
15		- am5themes_Animated.new(root5)
	14	+root.setThemes([
	15	+ am5themes_Animated.new(root)
16	16	]);
17	17
18	18
19	19	// Create chart
20	20	// https://www.amcharts.com/docs/v5/charts/xy-chart/
21		-let chart = root5.container.children.push(am5xy.XYChart.new(root5, {
22		- panX: true,
23		- panY: true,
24		- wheelX: "panX",
25		- wheelY: "zoomX",
26		- pinchZoomX:true
27		-}));
	21	+let chart = root.container.children.push(
	22	+ am5xy.XYChart.new(root, {
	23	+ panX: false,
	24	+ panY: false,
	25	+ wheelX: "panX",
	26	+ wheelY: "zoomX",
	27	+ layout: root.verticalLayout
	28	+ })
	29	+);
28	30
29		-// Add cursor
30		-// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
31		-let cursor = chart.set("cursor", am5xy.XYCursor.new(root5, {}));
32		-cursor.lineY.set("visible", false);
33	31
	32	+let data = [
	33	+ {
	34	+ year: "1월",
	35	+ income: 22,
	36	+ expenses: 44
	37	+ },
	38	+ {
	39	+ year: "2월",
	40	+ income: 20,
	41	+ expenses: 40
	42	+ },
	43	+ {
	44	+ year: "3월",
	45	+ income: 15,
	46	+ expenses: 30
	47	+ },
	48	+ {
	49	+ year: "4월",
	50	+ income: 15,
	51	+ expenses: 30
	52	+ },
	53	+ {
	54	+ year: "5월",
	55	+ income: 15,
	56	+ expenses: 30,
	57	+ strokeSettings: {
	58	+ stroke: chart.get("colors").getIndex(1),
	59	+ strokeWidth: 3,
	60	+ strokeDasharray: [5, 5]
	61	+ }
	62	+ },
	63	+ {
	64	+ year: "6월",
	65	+ income: 10,
	66	+ expenses: 20,
	67	+ columnSettings: {
	68	+ strokeWidth: 1,
	69	+ strokeDasharray: [5],
	70	+ fillOpacity: 0.2
	71	+ },
	72	+ info: "(projection)"
	73	+ }
	74	+];
34	75
35	76	// Create axes
36	77	// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
37		-let xRenderer = am5xy.AxisRendererX.new(root5, { minGridDistance: 30 });
38		-xRenderer.labels.template.setAll({
39		- rotation: -90,
40		- centerY: am5.p50,
41		- centerX: am5.p100,
42		- paddingRight: 15
43		-});
44		-
45		-let xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root5, {
46		- maxDeviation: 0.3,
47		- categoryField: "country",
48		- renderer: xRenderer,
49		- tooltip: am5.Tooltip.new(root5, {})
50		-}));
51		-
52		-let yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root5, {
53		- maxDeviation: 0.3,
54		- renderer: am5xy.AxisRendererY.new(root5, {})
55		-}));
56		-
57		-
58		-// Create series
59		-// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
60		-let series = chart.series.push(am5xy.ColumnSeries.new(root5, {
61		- name: "Series 1",
62		- xAxis: xAxis,
63		- yAxis: yAxis,
64		- valueYField: "value",
65		- sequencedInterpolation: true,
66		- categoryXField: "country",
67		- tooltip: am5.Tooltip.new(root5, {
68		- labelText:"{valueY}"
	78	+let xRenderer = am5xy.AxisRendererX.new(root, {});
	79	+let xAxis = chart.xAxes.push(
	80	+ am5xy.CategoryAxis.new(root, {
	81	+ categoryField: "year",
	82	+ renderer: xRenderer,
	83	+ tooltip: am5.Tooltip.new(root, {})
69	84	})
70		-}));
71		-
72		-series.columns.template.setAll({ cornerRadiusTL: 5, cornerRadiusTR: 5 });
73		-series.columns.template.adapters.add("fill", function(fill, target) {
74		- return chart.get("colors").getIndex(series.columns.indexOf(target));
75		-});
76		-
77		-series.columns.template.adapters.add("stroke", function(stroke, target) {
78		- return chart.get("colors").getIndex(series.columns.indexOf(target));
79		-});
80		-
81		-
82		-// Set data
83		-let data = [{
84		- country: "1주",
85		- value: 80
86		-}, {
87		- country: "2주",
88		- value: 80
89		-}, {
90		- country: "3주",
91		- value: 70
92		-}, {
93		- country: "4주",
94		- value: 80
95		-}];
	85	+);
	86	+xRenderer.grid.template.setAll({
	87	+ location: 1
	88	+})
96	89
97	90	xAxis.data.setAll(data);
98		-series.data.setAll(data);
99	91
	92	+let yAxis = chart.yAxes.push(
	93	+ am5xy.ValueAxis.new(root, {
	94	+ min: 0,
	95	+ extraMax: 0.1,
	96	+ renderer: am5xy.AxisRendererY.new(root, {
	97	+ strokeOpacity: 0.1
	98	+ })
	99	+ })
	100	+);
	101	+
	102	+
	103	+// Add series
	104	+// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
	105	+
	106	+let series1 = chart.series.push(
	107	+ am5xy.ColumnSeries.new(root, {
	108	+ name: "인원",
	109	+ xAxis: xAxis,
	110	+ yAxis: yAxis,
	111	+ valueYField: "income",
	112	+ categoryXField: "year",
	113	+ tooltip: am5.Tooltip.new(root, {
	114	+ pointerOrientation: "horizontal",
	115	+ labelText: "{valueY} {info} 명"
	116	+ })
	117	+ })
	118	+);
	119	+
	120	+series1.columns.template.setAll({
	121	+ tooltipY: am5.percent(10),
	122	+ templateField: "columnSettings"
	123	+});
	124	+
	125	+series1.data.setAll(data);
	126	+
	127	+let series2 = chart.series.push(
	128	+ am5xy.LineSeries.new(root, {
	129	+ name: "인건비",
	130	+ xAxis: xAxis,
	131	+ yAxis: yAxis,
	132	+ valueYField: "expenses",
	133	+ categoryXField: "year",
	134	+ tooltip: am5.Tooltip.new(root, {
	135	+ pointerOrientation: "horizontal",
	136	+ labelText: "{valueY} {info} (백만원)"
	137	+ })
	138	+ })
	139	+);
	140	+
	141	+series2.strokes.template.setAll({
	142	+ strokeWidth: 3,
	143	+ templateField: "strokeSettings"
	144	+});
	145	+
	146	+
	147	+series2.data.setAll(data);
	148	+
	149	+series2.bullets.push(function() {
	150	+ return am5.Bullet.new(root, {
	151	+ sprite: am5.Circle.new(root, {
	152	+ strokeWidth: 3,
	153	+ stroke: series2.get("stroke"),
	154	+ radius: 5,
	155	+ fill: root.interfaceColors.get("background")
	156	+ })
	157	+ });
	158	+});
	159	+
	160	+chart.set("cursor", am5xy.XYCursor.new(root, {}));
	161	+
	162	+// Add legend
	163	+// https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/
	164	+let legend = chart.children.push(
	165	+ am5.Legend.new(root, {
	166	+ centerX: am5.p50,
	167	+ x: am5.p50
	168	+ })
	169	+);
	170	+legend.data.setAll(chart.series.values);
100	171
101	172	// Make stuff animate on load
102	173	// https://www.amcharts.com/docs/v5/concepts/animations/
103		-series.appear(1000);
104	174	chart.appear(1000, 100);
105		-
	175	+series1.appear();
106	176	}
107	177
108	178	componentWillUnmount() {
...	...	@@ -112,7 +182,7 @@
112	182	}
113	183
114	184	render() {
115		- return <div id="chart" style={{ width: "100%", height: "90%" }}></div>;
	185	+ return <div id="chart" style={{ width: "100%", height: "80%" }}></div>;
116	186	}
117	187	}
118	188

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

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

...	...	@@ -33,11 +33,8 @@
33	33	// Set data
34	34	// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Setting_data
35	35	series.data.setAll([
36		- { value: 1, category: "1등급" },
37		- { value: 2, category: "2등급" },
38		- { value: 3, category: "3등급" },
39		- { value: 3, category: "4등급" },
40		- { value: 1, category: "5등급" },
	36	+ { value: 1, category: "미사용" },
	37	+ { value: 2, category: "사용" },
41	38	]);
42	39
43	40	// Create legend

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

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

...	...	@@ -56,7 +56,6 @@
56	56	xAxis: xAxis,
57	57	yAxis: yAxis,
58	58	valueXField: "value",
59		- descriptionField : "value",
60	59	categoryYField: "network",
61	60	tooltip: am5.Tooltip.new(root, {
62	61	pointerOrientation: "left",

...	...	@@ -23,14 +23,11 @@
23	23	import EquipmentRentalInsert from "./equipment/EquipmentRentalInsert.jsx";
24	24	import EquipmentManagementSelect from "./equipment/EquipmentManagementSelect.jsx";
25	25	import EquipmentManagementSelectOne from "./equipment/EquipmentManagementSelectOne.jsx";
26		-import EquipmentManagementInsert from "./equipment/EquipmentManagementInsert.jsx";
27	26	import UserAuthoriySelect from "./authority/UserAuthoriySelect.jsx";
28	27	import MyInfoUpdate from "./authority/MyInfoUpdate.jsx";
29	28	import EquipmentManagementSelectReturn from "./equipment/EquipmentManagementSelectReturn.jsx";
30		-import AuthorityManagement from "./authority/AuthorityManagement.jsx";
31		-import ServiceInsert from "./serviceCenter/ServiceInsert.jsx";
32		-import AgencyInsert from "./authority/AgencyInsert.jsx";
33		-import RiskInsert from "./authority/RiskInsert.jsx";
	29	+import Main3 from "./Main/Main3.jsx";
	30	+import QandA from "./authority/QandA.jsx";
34	31
35	32	function AppRoute() {
36	33	return (
...	...	@@ -81,11 +78,8 @@
81	78	></Route>
82	79	<Route path="/MyInfoUpdate" element={<MyInfoUpdate />}></Route>
83	80	<Route path="/EquipmentManagementSelectReturn" element={<EquipmentManagementSelectReturn />}></Route>
84		- <Route path="/AuthorityManagement" element={<AuthorityManagement />}></Route>
85		- <Route path="/EquipmentManagementInsert" element={<EquipmentManagementInsert />}></Route>
86		- <Route path="/ServiceInsert" element={<ServiceInsert />}></Route>
87		- <Route path="/AgencyInsert" element={<AgencyInsert />}></Route>
88		- <Route path="/RiskInsert" element={<RiskInsert />}></Route>
	81	+ <Route path="/Main3" element={<Main3 />}></Route>
	82	+ <Route path="/QandA" element={<QandA />}></Route>
89	83	</Routes>
90	84	);
91	85	}

...	...	@@ -1,145 +1,249 @@
1	1	import React from "react";
2	2	import Table from "../../component/Table.jsx";
3	3	import Button from "../../component/Button.jsx";
4		-import { useNavigate } from "react-router";
5		-import AgencySearch from "../../component/AgencySearch.jsx";
6		-import ContentTitle from "../../component/ContentTitle.jsx";
7	4	import SubTitle from "../../component/SubTitle.jsx";
	5	+import Modal from "../../component/Modal.jsx";
	6	+import Modal2 from "../../component/Modal2.jsx";
	7	+import { useNavigate } from "react-router";
8	8
9		-export default function SeniorSelect() {
	9	+export default function UserAuthoriySelect() {
10	10	const navigate = useNavigate();
11		-
12		- //게시판
13		- const thead = [
	11	+ const [modalOpen, setModalOpen] = React.useState(false);
	12	+ const openModal = () => {
	13	+ setModalOpen(true);
	14	+ };
	15	+ const closeModal = () => {
	16	+ setModalOpen(false);
	17	+ };
	18	+ const [modalOpen2, setModalOpen2] = React.useState(false);
	19	+ const openModal2 = () => {
	20	+ setModalOpen2(true);
	21	+ console.log("ddd")
	22	+ };
	23	+ const closeModal2 = () => {
	24	+ setModalOpen2(false);
	25	+ };
	26	+ const thead1 = [
14	27	"No",
15		- "기관명",
16		- "사업자번호",
17		- "담당자명",
18		- "담당 부서 연락처",
19		- "관리 장비 개수",
	28	+ "사용자명",
	29	+ "사용자관리번호",
	30	+ "성별",
	31	+ "생년월일",
20	32	"주소",
21		- "등록된 복지사",
	33	+ "대상자 관리",
22	34	];
23		- const key = [
24		- "No",
25		- "name",
26		- "BusinessNumber",
27		- "representative",
28		- "phone",
29		- "Fax",
30		- "address",
31		- "worker",
32		- ];
33		- const content = [
	35	+ const key1 = ["No", "name", "Id", "gender", "birth", "address", "management"];
	36	+ const content1 = [
34	37	{
35	38	No: 1,
36		- name: "A복지관",
37		- BusinessNumber: "515-82-00000",
38		- representative: "김길동",
39		- phone: "053-811-1234",
40		- Fax: "50개",
	39	+ name: "김복남",
	40	+ Id: "20230131",
	41	+ gender: "여",
	42	+ birth: "1948.11.15",
41	43	address: "경상북도 군위군 삼국유사면",
42		- worker: (
	44	+ management: (
43	45	<Button
44	46	className={"btn-small gray-btn"}
45		- btnName={"상세보기"}
46		- onClick={() => {
47		- navigate("/SeniorSelectOne");
48		- }}
49		- />
50		- ),
51		- },
52		- {
53		- No: 2,
54		- name: "B복지관",
55		- BusinessNumber: "515-82-00000",
56		- representative: "김길동",
57		- phone: "053-811-1234",
58		- Fax: "80개",
59		- address: "경상북도 군위군 삼국유사면",
60		- worker: (
61		- <Button
62		- className={"btn-small gray-btn"}
63		- btnName={"상세보기"}
64		- onClick={() => {
65		- navigate("/SeniorSelectOne");
66		- }}
67		- />
68		- ),
69		- },
70		- {
71		- No: 3,
72		- name: "대구보훈병원",
73		- BusinessNumber: "515-82-00000",
74		- representative: "김길동",
75		- phone: "053-811-1234",
76		- Fax: "30개",
77		- address: "경상북도 군위군 삼국유사면",
78		- worker: (
79		- <Button
80		- className={"btn-small gray-btn"}
81		- btnName={"상세보기"}
82		- onClick={() => {
83		- navigate("/SeniorSelectOne");
84		- }}
	47	+ btnName={"보호자(가족) 보기"}
	48	+ onClick={openModal}
85	49	/>
86	50	),
87	51	},
88	52	];
89	53
90		- //select option 동적 생성
91		- // const optionList = () => {
92		- // let year = [];
93		- // let month = [];
94		- // let days = [];
95		- // let currentDate = new Date();
96		- // let currentYear = currentDate.getFullYear();
	54	+ const thead2 = [
	55	+ "No",
	56	+ "사용자명",
	57	+ "사용자ID",
	58	+ "연락처",
	59	+ "주소",
	60	+ "보호 대상자",
	61	+ ];
	62	+ const key2 = [
	63	+ "No",
	64	+ "name",
	65	+ "Id",
	66	+ "phone",
	67	+ "address",
	68	+ "Target_management",
	69	+ ];
	70	+ const content2 = [
	71	+ {
	72	+ No: 1,
	73	+ name: "김훈",
	74	+ Id: "admin2",
	75	+ phone: "010-1234-1234",
	76	+ address: "경상북도 군위군 삼국유사면",
	77	+ Target_management: (
	78	+ <Button
	79	+ className={"btn-small gray-btn"}
	80	+ btnName={"보호대상자"}
	81	+ onClick={openModal2}
	82	+ />
	83	+ ),
	84	+ },
	85	+ ];
	86	+ const thead3 = [
	87	+ "No",
	88	+ "사용자명",
	89	+ "사용자ID",
	90	+ "대상자와의 관계",
	91	+ "보호자 연락처",
	92	+ ];
	93	+ const key3 = [
	94	+ "No",
	95	+ "name",
	96	+ "Id",
	97	+ "relationship",
	98	+ "phone",
	99	+ ];
	100	+ const content3 = [
	101	+ {
	102	+ No: 1,
	103	+ name: "김훈",
	104	+ Id: "admin2",
	105	+ relationship: "아들",
	106	+ phone: "010-1234-1234",
	107	+ },
	108	+ ];
	109	+ const thead4 = [
	110	+ "No",
	111	+ "어르신 성함",
	112	+ "사용자등록번호",
	113	+ "성별",
	114	+ "생년월일",
	115	+ "주소",
	116	+ "관계",
	117	+ ];
	118	+ const key4 = ["No", "name", "Id", "gender", "birth", "address", "management"];
	119	+ const content4 = [
	120	+ {
	121	+ No: 1,
	122	+ name: "김복남",
	123	+ Id: "20230131",
	124	+ gender: "여",
	125	+ birth: "1948.11.15",
	126	+ address: "경상북도 군위군 삼국유사면",
	127	+ management: "부"
	128	+ },
	129	+ ];
97	130
98		- // for (let i = 1910; i < currentYear.length; i++) {
99		- // year.push(i);
100		- // }
101	131
102		- // for (let j = 1; i < 13; j++) {
103		- // month.push(j);
104		- // }
105	132
106		- // for (let k = 1; i < 32; k++) {
107		- // days.push(k);
108		- // }
109		- // return year, month, days;
110		- // };
111		-
112		- // React.useEffect(() => {
113		- // optionList();
114		- // }, []);
115		-
	133	+ const data = [
	134	+ {
	135	+ id: 1,
	136	+ title: "개인(노인)",
	137	+ description: (
	138	+ <Table
	139	+ className={"protector-user"}
	140	+ head={thead1}
	141	+ contents={content1}
	142	+ contentKey={key1}
	143	+ />
	144	+ ),
	145	+ },
	146	+ {
	147	+ id: 2,
	148	+ title: "보호자(가족)",
	149	+ description: (
	150	+ <Table
	151	+ className={"caregiver-user"}
	152	+ head={thead2}
	153	+ contents={content2}
	154	+ contentKey={key2}
	155	+ />
	156	+ ),
	157	+ },
	158	+ ];
	159	+ const [index, setIndex] = React.useState(1);
116	160	return (
117	161	<main>
118		- <div className="content-wrap">
119		- <ContentTitle contentTitle={"기관 조회"} />
120		- <div>
121		- <AgencySearch />
122		- <div className="board-wrap">
123		- <div className="flex-end">
124		- <div className="btn-wrap flex-end margin-bottom ">
125		- <Button
126		- className={"btn-small green-btn"}
127		- btnName={"등록"}
128		- onClick={() => {
129		- navigate("/AgencyInsert");
130		- }}
131		- />
132		- <Button className={"btn-small green-btn"} btnName={"삭제"} />
133		- </div>
134		- </div >
	162	+ <Modal open={modalOpen} close={closeModal} header="'김복남'님의 가족">
	163	+ <div className="board-wrap">
	164	+ <div>
135	165	<Table
136		- className={"senior-table"}
137		- head={thead}
138		- contents={content}
139		- contentKey={key}
	166	+ className={"caregiver-user"}
	167	+ head={thead3}
	168	+ contents={content3}
	169	+ contentKey={key3}
140	170	/>
141		-
142	171	</div>
	172	+ <div>
	173	+ <Button
	174	+ className={"btn-100 green-btn"}
	175	+ btnName={"닫기"}
	176	+ onClick={closeModal}
	177	+ />
	178	+ </div>
	179	+ </div>
	180	+ </Modal>
	181	+ <Modal2 className={"modal"} open={modalOpen2} close={closeModal2} header="보호 대상자">
	182	+ <div className="board-wrap">
	183	+ <div>
	184	+ <Table
	185	+ className={"caregiver-user"}
	186	+ head={thead4}
	187	+ contents={content4}
	188	+ contentKey={key4}
	189	+ />
	190	+ </div>
	191	+ <div>
	192	+ <Button
	193	+ className={"btn-100 green-btn"}
	194	+ btnName={"닫기"}
	195	+ onClick={closeModal2}
	196	+ />
	197	+ </div>
	198	+ </div>
	199	+ </Modal2>
	200	+ <div className="tab-container">
	201	+ <ul className="tab-menu">
	202	+ {data.map((item) => (
	203	+ <li
	204	+ key={item.id}
	205	+ className={index === item.id ? "active" : null}
	206	+ onClick={() => setIndex(item.id)}
	207	+ >
	208	+ {item.title}
	209	+ </li>
	210	+ ))}
	211	+ </ul>
	212	+ <div className="content-wrap">
	213	+ <div className="search-management flex-start margin-bottom2">
	214	+ <select name="management-agency">
	215	+ <option value="기관전체">기관전체</option>
	216	+ <option value="대구보훈병원">복지재단1</option>
	217	+ <option value="군위군청">복지재단2</option>
	218	+ <option value="군위군청">복지재단3</option>
	219	+ </select>
	220	+ <select>
	221	+ <option value="이름">이름</option>
	222	+ <option value="아이디">아이디</option>
	223	+ </select>
	224	+ <input type="text" />
	225	+ <Button
	226	+ className={"btn-small gray-btn"}
	227	+ btnName={"검색"}
	228	+ />
	229	+ </div>
	230	+ <div className="btn-wrap flex-end">
	231	+ <Button
	232	+ className={"btn-small green-btn"}
	233	+ btnName={"등록"}
	234	+ onClick={() => {
	235	+ navigate("/SeniorInsert");
	236	+ }}
	237	+ />
	238	+ <Button className={"btn-small green-btn"} btnName={"삭제"} />
	239	+ </div>
	240	+ <ul className="tab-content">
	241	+ {data
	242	+ .filter((item) => index === item.id)
	243	+ .map((item) => (
	244	+ <li>{item.description}</li>
	245	+ ))}
	246	+ </ul>
143	247	</div>
144	248	</div>
145	249	</main>

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

...	...	@@ -60,7 +60,7 @@
60	60	className={"btn-small green-btn"}
61	61	btnName={"등록"}
62	62	onClick={() => {
63		- navigate("/ServiceInsert");
	63	+ navigate("/SeniorInsert");
64	64	}}
65	65	/>
66	66	<Button className={"btn-small green-btn "} btnName={"삭제"} />

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

...	...	@@ -1,6 +1,6 @@
1	1	import React from "react";
2	2	import Button from "../../component/Button.jsx";
3		-import Join from "./../join/Join.jsx";
	3	+import { useNavigate } from "react-router";
4	4
5	5	export default function Login({ getLogin }) {
6	6	const [isJoin, setIsJoin] = React.useState(false);
...	...	@@ -8,56 +8,135 @@
8	8	setIsJoin(true);
9	9	console.log(isJoin);
10	10	};
11		- const onClickLogin = () => {
12		- getLogin();
	11	+ const onClickLogin = (loginComponentName) => {
	12	+ getLogin(loginComponentName);
13	13	};
14		- return (
15		- <div className="row login-wrap">
16		- <h1>시니어 스마트 케어 모니터링 플랫폼</h1>
17		- {isJoin ? (
18		- <Join />
19		- ) : (
20		- <div className="container row flex-center join-login">
21		- <div className="login-form-management">
22		- <div>
23		- <h3>로그인</h3>
24		- <div className="login-inner">
25		- <div className="content">
26		- <i className="fa-solid fa-user"></i>
27		- <input
28		- required
29		- maxlength="15"
30		- type="text"
31		- placeholder="아이디를 입력하세요"
32		- />
33		- </div>
34		- <div className="content">
35		- <i className="fa-solid fa-lock"></i>
36		- <input
37		- type="password"
38		- name="password"
39		- placeholder="비밀번호를 입력하세요"
40		- />
41		- </div>
42		- </div>
43		- </div>
44		- <div className="btn-wrap">
45		- <Button
46		- className={"btn-100 green-btn"}
47		- btnName={"로그인"}
48		- onClick={onClickLogin}
	14	+
	15	+ function a () {
	16	+ console.log("a함수 실행!");
	17	+ }
	18	+
	19	+ a();
	20	+
	21	+ const data = [
	22	+ {
	23	+ id: 1,
	24	+ title: "복지관(관리자)",
	25	+ description: (
	26	+ <div className="login-inner">
	27	+ <div>
	28	+ <div className="content">
	29	+ <i className="fa-solid fa-user"></i>
	30	+ <input
	31	+ required
	32	+ maxlength="15"
	33	+ type="text"
	34	+ placeholder="아이디를 입력하세요"
49	35	/>
50		- <div className="flex-center btn-bottom">
51		- <Button
52		- className={"join-btn"}
53		- btnName={"회원가입"}
54		- onClick={onClickJoin}
55		- />
56		- </div>
	36	+ </div>
	37	+ <div className="content">
	38	+ <i className="fa-solid fa-lock"></i>
	39	+ <input
	40	+ type="password"
	41	+ name="password"
	42	+ placeholder="비밀번호를 입력하세요"
	43	+ />
	44	+ </div>
	45	+ </div>
	46	+ <div className="btn-wrap">
	47	+ <Button
	48	+ className={"btn-100 green-btn"}
	49	+ btnName={"로그인"}
	50	+ onClick={() => onClickLogin('/Main')}
	51	+ />
	52	+ <div className="flex-center btn-bottom">
	53	+ <Button
	54	+ className={"join-btn"}
	55	+ btnName={"회원가입"}
	56	+ onClick={onClickJoin}
	57	+ />
57	58	</div>
58	59	</div>
59	60	</div>
60		- )}
61		- </div>
	61	+ ),
	62	+ },
	63	+ {
	64	+ id: 2,
	65	+ title: "보호사",
	66	+ description: (
	67	+ <div className="login-inner">
	68	+ <div>
	69	+ <div className="content">
	70	+ <i className="fa-solid fa-user"></i>
	71	+ <input
	72	+ required
	73	+ maxlength="15"
	74	+ type="text"
	75	+ placeholder="아이디를 입력하세요"
	76	+ />
	77	+ </div>
	78	+ <div className="content">
	79	+ <i className="fa-solid fa-lock"></i>
	80	+ <input
	81	+ type="password"
	82	+ name="password"
	83	+ placeholder="비밀번호를 입력하세요"
	84	+ />
	85	+ </div>
	86	+ </div>
	87	+ <div className="btn-wrap">
	88	+ <Button
	89	+ className={"btn-100 green-btn"}
	90	+ btnName={"로그인"}
	91	+ onClick={() => onClickLogin('/Main3')}
	92	+ />
	93	+ <div className="flex-center btn-bottom">
	94	+ <Button
	95	+ className={"join-btn"}
	96	+ btnName={"회원가입"}
	97	+ onClick={onClickJoin}
	98	+ />
	99	+ </div>
	100	+ </div>
	101	+ </div>
	102	+ ),
	103	+ },
	104	+ ];
	105	+ const [index, setIndex] = React.useState(1);
	106	+ return (
	107	+ <main>
	108	+ <div className="row login-wrap">
	109	+ <h1>시니어 스마트 케어 모니터링 플랫폼</h1>
	110	+ {isJoin ? (
	111	+ <Join />
	112	+ ) : (
	113	+ <div className="tab-container">
	114	+ <ul className="tab-menu">
	115	+ {data.map((item) => (
	116	+ <li
	117	+ key={item.id}
	118	+ className={index === item.id ? "active" : null}
	119	+ onClick={() => setIndex(item.id)}
	120	+ >
	121	+ {item.title}
	122	+ </li>
	123	+ ))}
	124	+ </ul>
	125	+ <div className="content-wrap">
	126	+ <ul className="tab-content">
	127	+ {data
	128	+ .filter((item) => index === item.id)
	129	+ .map((item) => (
	130	+ <li>{item.description}</li>
	131	+ ))}
	132	+ </ul>
	133	+ </div>
	134	+ </div>
	135	+ )}
	136	+ </div>
	137	+
	138	+
	139	+
	140	+ </main>
62	141	);
63	142	}

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

...	...	@@ -1,5 +1,6 @@
1	1	import React from "react";
2	2	import Button from "../../component/Button.jsx";
	3	+import ContentTitle from "../../component/ContentTitle.jsx";
3	4	import { useNavigate } from "react-router";
4	5
5	6	export default function SeniorInsert() {
...	...	@@ -7,7 +8,7 @@
7	8	return (
8	9	<main>
9	10	<div className="content-wrap row">
10		- <div className="page-title margin-bottom">대상자 등록</div>
	11	+ <ContentTitle contentTitle={"대상자 등록"} />
11	12	<table className="margin-bottom2 senior-insert">
12	13	<tr>
13	14	<th>이름</th>
...	...	@@ -51,12 +52,6 @@
51	52	<option value="">4등급</option>
52	53	<option value="">등급없음</option>
53	54	</select>
54		- </td>
55		- </tr>
56		- <tr>
57		- <th>보호자 비상연락망</th>
58		- <td colSpan={3}>
59		- <input type="text" />
60	55	</td>
61	56	</tr>
62	57	<tr>

...	...	@@ -2,7 +2,7 @@
2	2	import Table from "../../component/Table.jsx";
3	3	import Button from "../../component/Button.jsx";
4	4	import { useNavigate } from "react-router";
5		-import DetailSearch from "../../component/AgencySearch.jsx";
	5	+import DetailSearch from "./../../component/DetailSearch.jsx";
6	6	import ContentTitle from "../../component/ContentTitle.jsx";
7	7	import SubTitle from "../../component/SubTitle.jsx";
8	8

Delete comment

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

...	...	@@ -1,5 +1,5 @@
1	1	{
2		- "name": "node_react_web_server_framework_v1.0",
	2	+ "name": "senior_care_system",
3	3	"lockfileVersion": 2,
4	4	"requires": true,
5	5	"packages": {