Commit @655be42197671be859a571e6587e8210c4c40eb0

최정임 2023-03-02

230302 최정임 반응형 수정

@655be42197671be859a571e6587e8210c4c40eb0

b9644ae

655be42

client/resources/css/layout.css

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

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


   padding: 1rem 3rem;
   background-color: white;
   grid-area: header;
-  height: 87px;
-  border-bottom: 1px solid #cccccc;
-  
+  height: 87px;  
+  z-index: 10;
+  width: 100%;
 }
 
 .page-title span {

   height: 100%;
   background-color: #f2f0eb;
   grid-area: nav;
-  border-right: 1px solid #cccccc;
-}
-.nav{
   position: relative;
   background: #ffffff;
+  box-shadow: 1px 0px 6px 2px rgb(0 0 0 / 20%); 
 }
+
 .logo {  
-  padding: 2rem 1rem;
+  padding: 3rem 1rem;
   font-size: large;
   text-align: center;
   font-weight: bold;
 }
-.logo img{width: 273px;}
 /* 네비게이션 */
 
 

 .info-id span, .logout span{
   margin: 0 auto;
 }
-.bottom-section{position: absolute; padding: 0 2rem; bottom: 3rem;}
+.bottom-section{position: absolute; padding: 0 1.6rem; bottom: 5rem;}
 .logout{background: #f26e50;}
 #pages {
   max-width: 100%;

   padding: 3rem;
   background-color: #f4f4f2;
   grid-area: main;
-  box-shadow: 0px 11px 12px -10px rgb(0 0 0 / 20%) inset;
+ 
 }
 
 

b9644ae

655be42

client/resources/css/main.css

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

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


   font-size: 2.4rem;
   font-family: 'AuctionGothic_Medium';
 }
-header > div{height: 100%;}
-.join-btn{
+
+header>div {
+  height: 100%;
+}
+
+.join-btn {
   background-color: transparent;
 }
-.highlight{
+
+.highlight {
   font-weight: 900;
   background-color: #18924e;
 }
 
+.menuicon {
+  display: none;
+  cursor: pointer;
+  height: 9.4rem;
+  left: 2.5rem;
+  top: 2.6rem;
+  position: absolute;
+}
+
 /* 시행기관 장비관리 리스트 */
 
-.visitlist{height: 55vh;}
-.visitlist .agency-visitlist{border: 0;}
-.visitlist .agency-visitlist th{background-color: #fdede9; }
-.agency-calendar .react-calendar{height: 10vh;}
-.agency-calendar .react-calendar__month-view__weekdays{display: none !important;}
-.agency-calendar .react-calendar__month-view__days{flex-wrap: unset !important; padding: 0 0 3rem 0;}
-.agency-calendar .react-calendar__month-view__days__day{flex: 0 0 2.85% !important; padding: 1rem 0;}
+.visitlist {
+  height: 55vh;
+}
+
+.agency-visitlist {
+  border: 0;
+}
+
+.agency-visitlist th {
+  background-color: #fdede9;
+}
+
+.agency-calendar .react-calendar {
+  height: 10vh;
+}
+
+.agency-calendar .react-calendar__month-view__weekdays {
+  display: none !important;
+}
+
+.agency-calendar .react-calendar__month-view__days {
+  flex-wrap: unset !important;
+  padding: 0 0 3rem 0;
+}
+
+.agency-calendar .react-calendar__month-view__days__day {
+  flex: 0 0 2.85% !important;
+  padding: 1rem 0;
+}
 
 /* .agency-calendar .react-calendar__month-view__days{overflow: hidden;} */
 
 /* Q&A */
-.question-select input{width: 3%;}
-.question-select label{width: 10%;}
-.question-select select{width: 16%; height: 3.7rem;}
-.qna-insert select{height: 3.7rem;}
-.qna-insert th{font-size: 1.8rem; color: #733c1d;}
+.question-select input {
+  width: 3%;
+}
+
+.question-select label {
+  width: 10%;
+}
+
+.question-select select {
+  width: 16%;
+  height: 3.7rem;
+}
+
+.qna-insert select {
+  height: 3.7rem;
+}
+
+.qna-insert th {
+  font-size: 1.8rem;
+  color: #733c1d;
+}
+
 /* 담당자배정 */
-.protectorlist input{width: 20rem;}
+.protectorlist input {
+  width: 20rem;
+}
+
 /* 위험기준관리 */
-.risk-table input{
+.risk-table input {
   width: 100%;
 }
-.risk-table select{
+
+.risk-table select {
   width: 100%;
 }
+
 /* 문진표 */
-.questionnaire-table th{display: block;}
-.questionnaire-table tr{padding: 1rem;}
-.questionnaire-table input{width: 9%;}
+.questionnaire-table th {
+  display: block;
+}
+
+.questionnaire-table tr {
+  padding: 1rem;
+}
+
+.questionnaire-table input {
+  width: 9%;
+}
+
 /* 카테고리 기관 추가*/
-.explain-table th{background: #ffffff;}
-.total p{font-size: 1.6rem; font-weight: 600;}
-.total{color: #733c1d; }
-.total-equip::before{
+.explain-table th {
+  background: #ffffff;
+}
+
+.total p {
+  font-size: 1.6rem;
+  font-weight: 600;
+}
+
+.total {
+  color: #733c1d;
+}
+
+.total-equip::before {
   content: "";
   border-left: 20px solid #5a70df;
   margin-right: 1rem;
 }
-.total-senior::before{
+
+.total-senior::before {
   content: "";
   border-left: 20px solid #7D9D9C;
   margin: 0 1rem 0 3rem;

 .statistics li:nth-child(3) {
   border: 1px solid #2132e3;
 }
+
 .statistics li:nth-child(4) {
   border: 1px solid #e3d621;
 }

 .statistics li p:nth-of-type(2)::after {
   content: "명";
 }
+
 .statistics-govern li {
   position: relative;
   padding-left: 5rem;

   position: absolute;
   left: 0;
 }
+
 .statistics-govern:nth-of-type(1) {
   background-image: linear-gradient(to bottom right, #9890e3 0%, #b1f4cf 100%);
 }
+
 .statistics-govern:nth-of-type(2) {
   background-image: linear-gradient(to bottom right, #b1f4cf 0%, #5a70df 100%);
 }
+
 .statistics-govern:nth-of-type(3) {
   background-image: linear-gradient(to bottom right, #83a9d7 0%, #8d2ecd 100%);
 }
+
 .statistics-govern:nth-of-type(4) {
   background-image: linear-gradient(to bottom right, #8d2ecd 0%, #b1f4cf 100%);
 }
-.statistics-govern li p{color: #ffffff;}
+
+.statistics-govern li p {
+  color: #ffffff;
+}
+
 .statistics-govern li p:nth-of-type(2) {
   padding-bottom: 0.5rem;
   font-size: 1.6rem;
   font-weight: bold;
 }
+
 .statistics-govern li p:nth-of-type(3) {
   font-size: 1.6rem;
   font-weight: bold;
 }
+
 .statistics-govern li p:nth-of-type(3)::after {
   content: "명";
 }
-.statistics-agency{border-radius: 1.5rem; box-shadow: 1px 1px 18px 1px rgb(0 0 0 / 13%);}
+
+.statistics-agency {
+  border-radius: 1.5rem;
+  box-shadow: 1px 1px 18px 1px rgb(0 0 0 / 13%);
+}
+
 .statistics-agency li {
   padding: 0 2rem;
 }
-.statistics-agency li .text{padding-left: 1rem; width: 100%;}
+
+.statistics-agency li .text {
+  padding-left: 1rem;
+  width: 100%;
+}
+
 .statistics-agency li div p:nth-of-type(1) {
   font-size: 1.8rem;
   font-weight: bold;
   color: #ed724a;
 }
+
 .statistics-agency li div p:nth-of-type(2) {
   font-size: 2.5rem;
   font-weight: bold;
 }
-.statistics-agency li div p:nth-of-type(2)::after{
+
+.peoplecount::after {
   content: "명";
   font-size: 1.5rem;
   color: #cbc9c9;
 }
-.statistics-guardian{height: 100%;}
-.guardian-medicine{height: 16vh;}
-.statistics-guardian li{
+
+.equipcount::after {
+  content: "개";
+  font-size: 1.5rem;
+  color: #cbc9c9;
+}
+
+.statistics-guardian {
+  height: 100%;
+}
+
+.guardian-medicine {
+  height: 16vh;
+}
+
+.statistics-guardian li {
   padding: 1rem 3rem;
   background: #ffffff;
   border-radius: 20px;
   margin: 0 auto;
   margin-bottom: 1rem;
 }
+
 /* .statistics-guardian:nth-child(1) {
   background: #fbe4e4;
 }

 .statistics-guardian li:nth-child(7) {
   background: rgba(255, 254, 254, 0.5);
 }
-.chart-guardian{height: 77%;}
+
+.chart-guardian {
+  height: 77%;
+}
+
 .statistics-guardian li p:nth-child(3) {
   font-size: 1.5rem;
 }

   padding: 0;
   font-size: 2rem;
 }
+
 .guardian-table {
   width: 100%;
 }

 .guardian-table th {
   background: none;
 }
+
 .guardian-table td {
   border: 0;
 }

   font-weight: bold;
   margin-right: 2rem;
 }
+
 .guardian-table1 {
   width: 100%;
 }

   background: none;
   font-size: 1.9rem;
 }
-.guardian-table1 th:nth-child(1){
+
+.guardian-table1 th:nth-child(1) {
   background: #f48d8d;
   border: 6px solid rgba(255, 254, 254, 0.5);
 }
-.guardian-table1 th:nth-child(2){
+
+.guardian-table1 th:nth-child(2) {
   background: #efa33a;
   border: 6px solid rgba(255, 254, 254, 0.5);
 }
-.guardian-table1 th:nth-child(3){
+
+.guardian-table1 th:nth-child(3) {
   background: #eeeb3c;
   border: 6px solid rgba(255, 254, 254, 0.5);
 }
-.guardian-table1 th:nth-child(4){
+
+.guardian-table1 th:nth-child(4) {
   background: #9be32e;
   border: 6px solid rgba(255, 254, 254, 0.5);
 }
-.guardian-table1 th:nth-child(5){
+
+.guardian-table1 th:nth-child(5) {
   background: #9fa6f2;
   border: 6px solid rgba(255, 254, 254, 0.5);
 }
-.guardian-table1 th:nth-child(6){
+
+.guardian-table1 th:nth-child(6) {
   background: #b089ed;
   border: 6px solid rgba(255, 254, 254, 0.5);
 }
-.guardian-table1 th:nth-child(7){
+
+.guardian-table1 th:nth-child(7) {
   background: #e057f0;
   border: 6px solid rgba(255, 254, 254, 0.5);
 }
+
 .guardian-table1 td {
   border: 0;
 }

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

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

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

   padding: 1rem;
   line-height: 2rem;
 }
-.join-inner select{padding: 1rem;}
+
+.join-inner select {
+  padding: 1rem;
+}
+
 .join-inner #id {
   max-width: 65%;
   margin-right: 1rem;

 }
 
 /* 검색창 */
-.searchselect{width: 25%;}
-.searchselect label{width: 100%; margin-right: 3rem;}
+.searchselect {
+  width: 25%;
+}
+
+.searchselect label {
+  width: 100%;
+  margin-right: 3rem;
+}
+
 .mobile-area-wrap {
   display: none;
 }

   width: 100%;
   margin-bottom: 2rem;
 }
+
 .detail-search table {
-  border-top: none;
-  border-bottom: none;
+  border: none;
 }
 
 .detail-search table th,

 .detail-search tbody tr:nth-of-type(2) select {
   width: 24.4%;
 }
+
 .detail-search tbody select {
   height: 3.7rem;
 }

 .search-area {
   padding: 2rem;
 }
-.search-area button{width: 100%;}
+
+.search-area button {
+  width: 100%;
+}
+
 .search-area details {
   margin-top: 1rem;
 }

   padding: 0 0rem 0 1rem;
   width: 5rem;
 }
-.senior-insert tr:nth-child(5) input{
-  width: 2rem;
+
+.senior-insert select {
+  padding: 1rem;
 }
-.senior-insert select{padding: 1rem;}
+
 .senior-insert tr:nth-child(2) .gender {
   padding: 2rem 1rem;
 }

   border: 6px solid #ffffff;
   background: #f0ebe3;
   padding-left: 2rem;
+  color: rgb(115, 60, 29);
+  font-size: 1.6rem;
 }
 
 .senior-detail td {

 }
 
 /* 장비등록 */
-.select-agency{width: 59%; margin: 0 auto;}
-.user-list{
+.select-agency {
+  width: 59%;
+  margin: 0 auto;
+}
+
+.user-list {
   background-color: #eeeeee;
   height: 57.8vh;
 }

 .modal-main {
   padding: 2rem;
 }
-.modal-main table{border: 1px solid #d8d3c7;}
+
+.modal-main table {
+  border: 1px solid #d8d3c7;
+}
+
 .modal-main table th,
 .modal-main table td {
   text-align: center;

 }
 
 /* 사용자 관리 */
-.tab-menu .tab-menu-agency{
+.tab-menu .tab-menu-agency {
   display: flex;
 }
+
 .tab-menu-agency li {
   padding: 1rem 2rem;
   margin-right: 0.2rem;
-  color: #733c1d;  
+  color: #733c1d;
   font-size: 1.6rem;
   font-weight: bold;
   text-align: center;
 }
+
 .tab-menu-agency li.active {
   color: #f25430;
   border-bottom: 2px solid #f25430;
 }
+
 .tab-menu li {
   padding: 1rem 2rem;
   margin-right: 0.2rem;
   background-color: #f2f0eb;
-  color: #733c1d;  
+  color: #733c1d;
   border-radius: 0.5rem 0.5rem 0 0;
   font-size: 1.6rem;
   font-weight: bold;
   text-align: center;
   box-shadow: 3px -2px 5px -2px rgb(0 0 0 / 20%);
 }
+
 .tab-menu li.active {
   background-color: #f25430;
   color: #ffffff;

   height: 3.7rem;
   margin-right: 1rem;
 }
+
 .tab-container>div>div:nth-child(2) {
   margin: 1rem 0;
 }
 
 /* 권한 설정 */
-.authority-table-mobile{display: none;}
+.authority-table-mobile {
+  display: none;
+}
+
 .authority-table-pc th,
 .authority-table-pc td {
   padding: 1.5rem;

   }
 }
 
-.mobile{
+.mobile {
   display: none;
 }
 
 /* -------------- 페이징 버튼 색상 적용 ----------------- */
-.PagingBtn{
+.PagingBtn {
   background-color: #ff7f50;
   color: #ffffff;
 

b9644ae

655be42

client/resources/css/responsive.css

--- client/resources/css/responsive.css

+++ client/resources/css/responsive.css


-/* 공통 */
-@media all and (max-width:769px) {
 
-  /* 권한관리 */
-  .authority-table-pc {
-    display: none;
-  }
 
-  .authority-table-mobile thead tr:nth-child(1) {
-    display: flex;
-  }
-
-  .authority-table-mobile thead tr:nth-child(1)>div {
-    font-size: 1.6rem;
-    width: 100%;
-  }
-
-  .authority-table-mobile select {
-    margin: 1rem 0;
-  }
-
-  .authority-table-mobile {
-    display: block;
-  }
-
-  .authority-table-mobile thead {
-    display: inline-table;
-    width: 100%;
-  }
-
-  .authority-table-mobile tr,
-  .authority-table-mobile td {
-    display: revert;
-  }
-
-  .authority-table-mobile tr {
-    width: 100%;
-  }
-
-  .authority-table-mobile tr:nth-child(2) th:nth-child(1) {
-    width: 50%;
-  }
-
-  .authority-table-mobile td {
-    padding: 1rem;
-    width: 10%;
-  }
-
-  .authority-table-mobile tbody td input {
-    margin-right: 1rem;
-  }
-
-  .authority-table-mobile th {
-    width: 50%;
-  }
-
-  /* 레이아웃 */
-  #layout {
-    width: 100%;
-    height: 100%;
-    display: grid;
-    grid-template-areas:
-      "nav header"
-      "nav pages"
-      "nav  main";
-    grid-template-columns: 200px 1fr;
-    grid-template-rows: 0.1fr 1.9fr;
-  }
-
-  #layout.expander {
-    grid-template-columns: 0px 1fr;
-  }
-
-  #layout.on {
-    grid-template-columns: 0px 1fr;
-    grid-template-rows: 0.1fr 1.9fr;
-  }
-
-  #pages {
-    grid-area: pages;
-    padding: 0.5rem;
-  }
-
-  main {
-    padding: 0;
-  }
-
-  /* 보호자 메인 그리드 */
-  .main-grid-guardian {
-    height: 100%;
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: 0.5fr 0.1fr;
-    gap: 1rem;
-  }
-
-  /* 정부 메인 그리드 */
-  .main-grid-government {
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: 0.1fr 0.1fr 1fr;
-    gap: 0.5rem;
-  }
-
-  /* 병원 메인 그리드 */
-  .main-grid-hospital {
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: 0.1fr 0.1fr 1fr;
-    gap: 0.5rem;
-  }
-
-  .main-grid-government .content-box {
-    padding: 1rem;
-  }
-
-  .main-grid-government .content-box .table {
-    border: none;
-  }
-
-  .main-grid-government .combine-all-government {
-    grid-row: auto;
-  }
-
-  .main-grid-government .combine-right {
-    grid-column: auto;
-  }
-
-  .main-grid-government .combine-right-government,
-  .main-grid-government .combine-left,
-  .main-grid-hospital .combine-right-government,
-  .main-grid-hospital .combine-left {
-    grid-column: 1;
-  }
-
-  .main-grid-government .combine-bottom-government {
-    grid-column: 0;
-  }
-
-  header {
-    border-bottom: 1px solid #eeeeee
-  }
-
-  .header-flex {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  /* 공통 */
-  .page-title svg {
-    display: block;
-  }
-
-  #fullDate,
-  #temp {
-    font-size: 1.2rem;
-  }
-
-  .content-wrap {
-    padding: 2rem 1rem;
-  }
-
-  nav {
-    position: fixed;
-    top: 58px;
-    left: -250px;
-    z-index: 10;
-    transition: 0.5s;
-  }
-
-  nav.on {
-    left: 0;
-    transition: 0.5s;
-  }
-
-
-  /* 메인 */
-
-  .react-calendar {
-    width: 100%;
-  }
-
-  .temp p {
-    font-size: 2rem;
-  }
-
-  .main-battery-title {
-    font-size: 1.4rem;
-    justify-content: flex-start;
-    padding-right: 1rem;
-  }
-
-  .main-battery-title p {
-    padding-right: 1rem;
-  }
-
-  .battery::after {
-    content: " 남았습니다.";
-    font-size: 1.4rem;
-    margin-left: 0;
-  }
-
-  .battery p {
-    font-size: 2rem;
-    padding-left: 0;
-    padding-right: 1rem;
-  }
-
-  #chartdiv1 {
-    height: 25vh;
-  }
-
-  .statistics li p:nth-of-type(1),
-  .statistics li p:nth-of-type(2) {
-    font-size: 1.4rem;
-  }
-
-  .weather-info {
-    width: 70%;
-    padding-right: 1rem;
-  }
-
-  .mobile .main-grid-guardian {
-    gap: 0.5rem;
-  }
-
-  .mobile .main-grid-guardian .content-box {
-    padding: 0.5rem;
-  }
-
-  .mobile .main-grid-guardian .content-box:nth-child(2)>div p {
-    font-size: 1.8rem;
-  }
-
-  /* 테이블 */
-
-  table {
-    display: table;
-    border: 0;
-  }
-
-  thead {
-    display: none;
-  }
-
-  tbody {
-    display: block;
-  }
-
-  tr {
-    display: block;
-    margin-bottom: 1rem;
-  }
-
-  td {
-    display: block;
-  }
-
-  tr>td::before {
-    display: inline-block;
-    width: 33%;
-    position: relative;
-  }
-
-  table td {
-    border: none;
-    position: relative;
-    border-bottom: 1px solid #eee;
-    font-size: 1.2rem;
-  }
-
-
-  table td span {
-    display: block;
-  }
-
-  table td::before {
-    position: absolute;
-    white-space: nowrap;
-    left: 1rem;
-    width: 100px;
-    border-radius: 10px;
-    text-align: center;
-    align-items: center;
-    background-color: #F0EBE3;
-    font-weight: 900;
-  }
-
-  /* 메인테이블 */
-  .none-medicine-list td:nth-of-type(1) {
-    font-weight: bold;
-    padding: 0.5rem;
-  }
-
-  .none-medicine-list td:nth-of-type(1)::before {
-    content: "";
-  }
-
-  .none-medicine-list td:nth-of-type(2):before {
-    content: "요양등급";
-  }
-
-  .none-medicine-list td:nth-of-type(3):before {
-    content: "생년월일";
-  }
-
-  .none-medicine-list td:nth-of-type(4):before {
-    content: "전화번호";
-  }
-
-  .none-medicine-list td:nth-of-type(5):before {
-    content: "주소";
-  }
-
-  .none-medicine-list td:nth-of-type(6):before {
-    content: "기저질환";
-  }
-
-  .recent-visit {
-    border: 0;
-  }
-
-  .recent-visit tr {
-    margin-bottom: 3rem;
-  }
-
-  .recent-visit td:nth-of-type(1) {
-    font-weight: bold;
-    padding: 0.5rem;
-  }
-
-  .recent-visit td:nth-of-type(1)::before {
-    content: "";
-  }
-
-  .recent-visit td:nth-of-type(2):before {
-    content: "방문목적";
-  }
-
-  .recent-visit td:nth-of-type(3):before {
-    content: "방문 상세 이유";
-  }
-
-  /* 시니어 조회 테이블 */
-  .senior-table td:nth-of-type(1) {
-    font-weight: bold;
-    padding: 0.5rem;
-  }
-
-  .senior-table td:nth-of-type(1)::before {
-    content: "";
-  }
-
-  .senior-table td:nth-of-type(2):before {
-    content: "No";
-  }
-
-  .senior-table td:nth-of-type(3):before {
-    content: "사용자등록번호";
-  }
-
-  .senior-table td:nth-of-type(4):before {
-    content: "요양등급";
-  }
-
-  .senior-table td:nth-of-type(5):before {
-    content: "이름";
-  }
-
-  .senior-table td:nth-of-type(6):before {
-    content: "생년월일";
-  }
-
-  .senior-table td:nth-of-type(7):before {
-    content: "전화번호";
-  }
-
-  .senior-table td:nth-of-type(8):before {
-    content: "주소";
-  }
-
-  .senior-table td:nth-of-type(9):before {
-    content: "기저질환";
-  }
-
-  /* 복약 조회 테이블*/
-  .medicine-table td {
-    padding-left: 14rem;
-  }
-
-  .medicine-table td:nth-of-type(1) {
-    display: block;
-    font-weight: 900;
-    padding: 1rem;
-  }
-
-  .medicine-table td:nth-of-type(1):before {
-    display: none;
-    content: "";
-  }
-
-  .medicine-table td:nth-of-type(2):before {
-    content: "이름";
-  }
-
-  .medicine-table td:nth-of-type(3):before {
-    content: "생년월일";
-  }
-
-  .medicine-table td:nth-of-type(4):before {
-    content: "전화번호";
-  }
-
-  .medicine-table td:nth-of-type(5):before {
-    content: "주소";
-  }
-
-  .medicine-table td:nth-of-type(6):before {
-    content: "평균 복약률 💊";
-  }
-
-  /* 복약 상세페이지 테이블 */
-  .medicine-detail-table td:nth-of-type(1) {
-    font-weight: 900;
-    padding: 1rem;
-  }
-
-  .medicine-detail-table td:nth-of-type(1)::before {
-    display: none;
-    content: "";
-  }
-
-  .medicine-detail-table td:nth-of-type(2):before {
-    content: "날짜";
-  }
-
-  .medicine-detail-table td:nth-of-type(3):before {
-    content: "복약상태 (아침)";
-  }
-
-  .medicine-detail-table td:nth-of-type(4):before {
-    content: "복약상태 (점심)";
-  }
-
-  .medicine-detail-table td:nth-of-type(5):before {
-    content: "복약상태 (저녁)";
-  }
-
-  .medicine-detail-table td:nth-of-type(6):before {
-    content: "필요 복용 횟수";
-  }
-
-  .medicine-detail-table td:nth-of-type(7):before {
-    content: "복약률";
-  }
-
-  .medicine-detail-table td:nth-of-type(8):before {
-    content: "수정 상세 사유";
-  }
-
-  .medicine-detail-table td:nth-of-type(9):before {
-    content: "수정자";
-  }
-
-  .medicine-detail-table td:nth-of-type(10)::before {
-    content: "수정일시";
-  }
-
-  .medicine-detail-table td:nth-of-type(11) {
-    padding: 1rem 1rem 0 1rem;
-  }
-
-  /* 댁내 온도 조회 테이블 */
-  .temperature-table td:nth-of-type(1) {
-    display: block;
-    font-weight: 900;
-    padding: 1rem;
-  }
-
-  .temperature-table td:nth-of-type(1):before {
-    display: none;
-    content: "";
-  }
-
-  .temperature-table td:nth-of-type(2):before {
-    content: "이름";
-  }
-
-  .temperature-table td:nth-of-type(3):before {
-    content: "생년월일";
-  }
-
-  .temperature-table td:nth-of-type(4):before {
-    content: "전화번호";
-  }
-
-  .temperature-table td:nth-of-type(5):before {
-    content: "주소";
-  }
-
-  .temperature-table td:nth-of-type(6):before {
-    content: "최근 온도";
-  }
-
-  .temperature-table td:nth-of-type(7):before {
-    content: "상태";
-  }
-
-  /* 최근 일주일 댁내 온도 */
-  .temperature-modal td:nth-of-type(1) {
-    display: block;
-    font-weight: 900;
-    padding: 1rem;
-  }
-
-  .temperature-modal td:nth-of-type(1):before {
-    display: none;
-    content: "";
-  }
-
-  .temperature-modal td:nth-of-type(2):before {
-    content: "날짜";
-  }
-
-  .temperature-modal td:nth-of-type(3):before {
-    content: "02:00";
-  }
-
-  .temperature-modal td:nth-of-type(4):before {
-    content: "10:00";
-  }
-
-  .temperature-modal td:nth-of-type(5):before {
-    content: "14:00";
-  }
-
-  .temperature-modal td:nth-of-type(6):before {
-    content: "23:00";
-  }
-
-  /* 방문 조회 테이블*/
-  .visit-table table td:nth-of-type(1) {
-    font-weight: 900;
-    padding: 1rem;
-  }
-
-  .visit-table table td:nth-of-type(2):before {
-    content: "날짜";
-  }
-
-  .visit-table table td:nth-of-type(3):before {
-    content: "이름";
-  }
-
-  .visit-table table td:nth-of-type(4):before {
-    content: "방문 목적";
-  }
-
-  .visit-table table td:nth-of-type(5):before {
-    content: "방문 상세 사유";
-  }
-
-  .visit-table table td:nth-of-type(6):before {
-    content: "보호사 연락처";
-  }
-
-  /* 장비 조회 테이블*/
-  .equipment-table td:nth-of-type(1) {
-    font-weight: 900;
-    padding: 1rem;
-  }
-
-  .equipment-table td:nth-of-type(2):before {
-    content: "No";
-  }
-
-  .equipment-table td:nth-of-type(3):before {
-    content: "장비명";
-  }
-
-  .equipment-table td:nth-of-type(4):before {
-    content: "시리얼 넘버";
-  }
-
-  .equipment-table td:nth-of-type(5):before {
-    content: "기기 상태";
-  }
-
-  .equipment-table td:nth-of-type(6):before {
-    content: "구매일";
-  }
-
-  .equipment-table td:nth-of-type(7):before {
-    content: "배터리 잔량";
-  }
-
-  .equipment-table td:nth-of-type(8):before {
-    content: "대여가능 여부";
-  }
-
-  .equipment-table td:nth-of-type(9):before {
-    content: "관리";
-  }
-
-  /* 장비 상세 목록 테이블*/
-  .equipment-detail td:nth-of-type(1) {
-    font-weight: 900;
-    padding: 1rem;
-  }
-
-
-  .equipment-detail td:nth-of-type(2):before {
-    content: "장비명";
-  }
-
-  .equipment-detail td:nth-of-type(3):before {
-    content: "시리얼 넘버";
-  }
-
-  .equipment-detail td:nth-of-type(4):before {
-    content: "사용자명";
-  }
-
-  .equipment-detail td:nth-of-type(5):before {
-    content: "사용자관리번호";
-  }
-
-  .equipment-detail td:nth-of-type(6):before {
-    content: "위치";
-  }
-
-  .equipment-detail td:nth-of-type(7):before {
-    content: "대여 기간";
-  }
-
-  /* 장비등록창 */
-  .equipment-modal table td {
-    padding: 0;
-  }
-
-  /* 내정보수정 */
-  .join-inner {
-    width: 100%;
-  }
-
-  /* 권한 관리 테이블 */
-  .authority-table thead {
-    display: block;
-  }
-
-  /* 사용자 관리 */
-  /* 보호자 */
-  .protector-user td:nth-of-type(1) {
-    font-weight: 900;
-    padding: 1rem;
-  }
-
-  .protector-user td:nth-of-type(2):before {
-    content: "사용자명";
-  }
-
-  .protector-user td:nth-of-type(3):before {
-    content: "사용자ID";
-  }
-
-  .protector-user td:nth-of-type(4):before {
-    content: "성별";
-  }
-
-  .protector-user td:nth-of-type(5):before {
-    content: "생년월일";
-  }
-
-  .protector-user td:nth-of-type(6):before {
-    content: "주소";
-  }
-
-  .protector-user td:nth-of-type(7):before {
-    content: "대상자 관리";
-  }
-
-  /* 보호사 */
-  .caregiver-user td:nth-of-type(1) {
-    font-weight: 900;
-    padding: 1rem;
-  }
-
-  .caregiver-user td:nth-of-type(2):before {
-    content: "사용자명";
-  }
-
-  .caregiver-user td:nth-of-type(3):before {
-    content: "사용자ID";
-  }
-
-  .caregiver-user td:nth-of-type(4):before {
-    content: "관리기관";
-  }
-
-  .caregiver-user td:nth-of-type(5):before {
-    content: "성별";
-  }
-
-  .caregiver-user td:nth-of-type(6):before {
-    content: "생년월일";
-  }
-
-  .caregiver-user td:nth-of-type(7):before {
-    content: "주소";
-  }
-
-  .caregiver-user td:nth-of-type(8):before {
-    content: "대상자 관리";
-  }
-
-  /* 병원 */
-  .common-user td:nth-of-type(1) {
-    font-weight: 900;
-    padding: 1rem;
-  }
-
-  .common-user td:nth-of-type(2):before {
-    content: "사용자명";
-  }
-
-  .common-user td:nth-of-type(3):before {
-    content: "사용자ID";
-  }
-
-  .common-user td:nth-of-type(4):before {
-    content: "관리기관";
-  }
-
-  .common-user td:nth-of-type(5):before {
-    content: "성별";
-  }
-
-  .common-user td:nth-of-type(6):before {
-    content: "생년월일";
-  }
-
-  .common-user td:nth-of-type(7):before {
-    content: "주소";
-  }
-
-  /* 관리자 */
-  .management-user td:nth-of-type(1) {
-    font-weight: 900;
-    padding: 1rem;
-  }
-
-  .management-user td:nth-of-type(2):before {
-    content: "사용자명";
-  }
-
-  .management-user td:nth-of-type(3):before {
-    content: "사용자ID";
-  }
-
-  .management-user td:nth-of-type(4):before {
-    content: "성별";
-  }
-
-  .management-user td:nth-of-type(5):before {
-    content: "생년월일";
-  }
-
-  .management-user td:nth-of-type(6):before {
-    content: "주소";
-  }
-
-  .management-user td:nth-of-type(7):before {
-    content: "관리";
-  }
-}
-
-/* 테블릿 세로 (해상도 768px ~ 1023px)*/
+/* 테블릿 가로 (해상도 768px ~ 1023px)*/
 @media all and (min-width:768px) and (max-width:1023px) {
 
 

     padding-right: 1rem;
   }
 
-  /* 공통 */
+  .menuicon {
+    display: block;
+  }
 
+  .usericon {
+    display: none;
+  }
+
+  /* 공통 */
+  #layout{grid-template-columns: 0px 1fr;}
+  header {
+    padding: 1rem 2rem;
+  }
+  .header-info-id{margin-left: 5rem;}
+  nav {
+    position: absolute;
+    left: -293px;
+    top: 86px;
+    z-index: 10;
+    transition: 0.5s;
+    box-shadow:12px -6px 10px -10px rgb(0 0 0 / 20%);
+    height:91vh;
+  }
+
+  nav.on {
+    left: 0;
+    transition: 0.5s;
+  }
+  .bottom-section{padding: 0 ; bottom: 6rem;}
   /* 시니어 정보 상세 조회 */
   .senior-detail {
     border: 0;

 
 /* 모바일 가로, 테블릿 세로 (해상도 480px ~ 767px)*/
 @media all and (min-width:480px) and (max-width:767px) {
+  .menuicon {
+    display: block;
+  }
 
+  .usericon {
+    display: none;
+  }
+
+  /* 공통 */
+  #layout{grid-template-columns: 0px 1fr;}
+  header {
+    padding: 1rem 2rem;
+  }
+  .header-info-id{margin-left: 5rem;}
+  nav {
+    position: absolute;
+    left: -293px;
+    top: 87px;
+    z-index: 10;
+    transition: 0.5s;
+    box-shadow:12px -6px 10px -10px rgb(0 0 0 / 20%);
+    height:91vh;
+  }
+
+  nav.on {
+    left: 0;
+    transition: 0.5s;
+  }
+  .bottom-section{padding: 0 ; bottom: 14rem;}
   /* 권한관리 */
   .authority-table-pc {
     display: none;

 
 }
 
-/* 모바일 가로, 테블릿 세로 (해상도 ~ 479px)*/
+/* 모바일 세로 (해상도 ~ 479px)*/
 @media all and (max-width:479px) {
+  .menuicon {
+    display: block;
+    position: fixed;
+  }
 
+  .usericon {
+    display: none;
+  }
+
+  /* 공통 */
+  #layout{display: block;}
+  #pages{padding: 1rem;}
+  header {
+    padding: 1rem;
+    position: fixed;
+  }
+  nav {
+    position: fixed;
+    left: -310px;
+    top: 86px;
+    z-index: 10;
+    transition: 0.5s;
+    box-shadow:12px -6px 10px -10px rgb(0 0 0 / 20%);
+    height:91vh;
+  }
+  main{padding-top: 9rem;}
+  nav.on {
+    left: 0;
+    transition: 0.5s;
+  }
+  .bottom-section{padding: 0.9rem ; bottom: 6rem;}
+  .content-wrap{padding: 1rem;}
+  th,td,tr{display: block;}
   /* 권한관리 */
   .authority-table-pc {
     display: none;

   }
 
   /* 공통 */
-  table td {
-    border: none;
-    position: relative;
-    border-bottom: 1px solid #eee;
-    font-size: 1.2rem;
-    padding-left: 10rem;
-  }
 
   .header-flex {
     display: flex;

 
   .weather-info {
     width: 70%;
-    padding-right: 1rem;
   }
 
   .recent-visit {

655be42

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

+++ client/views/component/TableRisk.jsx

...	...	@@ -0,0 +1,56 @@
	1	+import React from "react";
	2	+// import styled from "styled-components";
	3	+
	4	+export default function Table({ head, contents, contentKey, onClick, className}) {
	5	+ return (
	6	+ <table className={className}>
	7	+ <thead>
	8	+ <tr>
	9	+ {head.map((i) => {
	10	+ return <th>{i}</th>;
	11	+ })}
	12	+ </tr>
	13	+ </thead>
	14	+ <tbody>
	15	+ {contents.map((i, index) => {
	16	+ return (
	17	+ <tr key={index}>
	18	+ {contentKey.map((kes) => {
	19	+ return <td onClick={onClick}>{i[kes]}</td>;
	20	+ })}
	21	+ </tr>
	22	+ );
	23	+ })}
	24	+ </tbody>
	25	+ </table>
	26	+ );
	27	+}
	28	+
	29	+
	30	+// const TableStyled = styled.table`
	31	+// border-top: 2px solid #2d303f;
	32	+// border-bottom: 1px solid #e4dccf;
	33	+// /* &:hover {
	34	+// background-color: #e4dccf;
	35	+// } */
	36	+// `;
	37	+
	38	+// const TrStyled = styled.tr`
	39	+// cursor: pointer;
	40	+// `;
	41	+
	42	+// const ThStyled = styled.th`
	43	+// padding: 1rem 0;
	44	+// font-weight: bold;
	45	+// background-color: #f0ebe3;
	46	+// font-size: 1.4rem;
	47	+// text-align: center;
	48	+// `;
	49	+
	50	+// const TdStyled = styled.td`
	51	+// padding: 1rem 0;
	52	+// border-top: 1px solid #ececec;
	53	+// text-align: center;
	54	+// font-size: 1.3rem;
	55	+// background-color: #ffffff;
	56	+// `;

b9644ae

655be42

client/views/layout/Menu.jsx

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

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


 import Button from "../component/Button.jsx";
 import { useNavigate } from "react-router";
 import logo from "../../resources/files/images/logo.png";
+import MenuIcon from "@mui/icons-material/Menu";
 
 export default function Sidebar({items}) {
   const [menuToggle, setMenuToggle] = React.useState(false);
+  const onClickshow=()=>{
+    setMenuToggle(!menuToggle)
+  }
+  const closeSidebar = () => {
+    setMenuToggle(false);
+  };
   const navigate = useNavigate();
 
   return (
-    <nav
-      className={"nav"}
-      onClick={() => (menuToggle ? setMenuToggle(false) : setMenuToggle(true))}
-    >
-      <h1 className="logo"><img src={logo} alt="" /></h1>
-      <div className="flex-align-column" style={{ marginTop: `3rem` }}>
-        <ul>
-          {items.map((item, index) => (
-            <SidebarItem key={index} item={item} />
-          ))}
-        </ul>
-      </div>
-      <div className="bottom-section flex-center">
-          <div className="info-id" ><span onClick={() => {
-            navigate("/Join");
-          }}>계정추가</span></div>
-          <div className="logout"><span>로그아웃</span></div>
+ <>
+      <nav
+        className={menuToggle? "nav on" : "nav"}        
+      >
+        <div className="menuicon" onClick={onClickshow}><MenuIcon sx={{ width:35, height:35,}}/></div >
+        <h1 className="logo"><img src={logo} alt="" /></h1>
+        <div className="flex-align-column" style={{ marginTop: `3rem` }}>
+          <ul onClick={closeSidebar}>
+            {items.map((item, index) => (
+              <SidebarItem key={index} item={item} />
+            ))}
+          </ul>
         </div>
-    </nav>
+        <div className="bottom-section flex-center">
+            <div className="info-id" ><span onClick={() => {
+              navigate("/Join");
+            }}>계정추가</span></div>
+            <div className="logout"><span>로그아웃</span></div>
+          </div>
+      </nav>
+        
+ </>
   );
 }

b9644ae

655be42

client/views/pages/main/Main.jsx

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

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


 import TitleSmall from "../../component/TitleSmall.jsx";
 
 export default function Main2() {
+  const thead = ["No", "계약업체명", "구분", "담당자 연락처", "주소"];
+  const key = ["No", "agency", "division", "phone", "address",];
+  const content = [
+    {
+      No: 1,
+      agency: "A복지관",
+      division: "교환",
+      phone: "010-1234-5678",
+      address: "경상북도 군위군 삼국유사면",
+    },
+  ];
+
   const data = [
     {
       id: 1,
       title: "교환/수리 리스트",
+      description: (
+				<Table
+					className={"agency-visitlist"}
+					head={thead}
+					contents={content}
+					contentKey={key}
+				/>
+			),
     },
     {
       id: 2,
       title: "장비 추가 리스트",
+      description: (
+				<Table
+					className={"agency-visitlist"}
+					head={thead}
+					contents={content}
+					contentKey={key}
+				/>
+			),
     },
   ]
   const [index, setIndex] = React.useState(1);
-  const thead = ["No", "이름", "대상자등록번호", "생년월일", "연락처", "주소", "미복약 누적 횟수",];
-  const key = ["No", "name", "number", "birth", "phone", "address", "average"];
-  const content = [
-    {
-      No: 1,
-      name: "김복남",
-      number: "00000001",
-      birth: "1948.11.15",
-      phone: "010-1234-5678",
-      address: "경상북도 군위군 삼국유사면",
-      average: "6회",
-    },
-  ];
-
+ 
 
   return (
     <main>
-      <div className="flex-start margin-bottom2"><img src={medicinebox} alt="" /><TitleSmall title={"대상자 현황"} explanation={"2023.02.28 기준"} /></div>
+      <div className="flex-start margin-bottom2"><img src={tool} alt="" /><TitleSmall title={"장비 및 업체 현황"} explanation={"2023.02.28 기준"} /></div>
       <div className="main-grid-agency margin-bottom2">
         <ul className="content-box statistics-agency" background="#f7acba">
           <li className="flex-start">
             <img src={box} alt="" />
             <div className="text">
-              <p>나의 관리 대상자</p>
-              <p>40</p>
+              <p>전체 장비 대여 수</p>
+              <p className="equipcount">40</p>
             </div>
           </li>
         </ul>
         <ul className="content-box statistics-agency" background="#8ef3d1">
           <li className="flex-start">
-            <img src={medicineAgency} alt="" />
+            <img src={error} alt="" />
             <div className="text">
-              <p>미복약 위험 대상자</p>
-              <p>40</p>
+              <p>계약 업체 수</p>
+              <p className="equipcount">40</p>
             </div>
           </li>
         </ul>
         <ul className="content-box statistics-agency" background="#ebe7b9" >
           <li className="flex-start">
-            <img src={temperatureAgency} alt="" />
+            <img src={exchange} alt="" />
             <div className="text">
-              <p>댁내 온도 위험 대상자</p>
-              <p>40</p>
+              <p>교환/수리 요청 수</p>
+              <p className="equipcount">40</p>
             </div>
           </li>
         </ul>
         <ul className="content-box statistics-agency" background="#5f9af3">
           <li className="flex-start">
-            <img src={batteryAgency} alt="" />
+            <img src={error} alt="" />
             <div className="text">
-              <p>배터리 부족 대상자 </p>
-              <p>40</p>
+              <p>추가 요청 장비 수 </p>
+              <p className="equipcount">40</p>
             </div>
           </li>
         </ul>
       </div>
-      <div className="flex-start margin-bottom2"><img src={medicinebox} alt="" /><TitleSmall title={"장비 관리 리스트"}  /></div>
+      <div className="flex-start margin-bottom2"><img src={tool} alt="" /><TitleSmall title={"장비 관리 리스트"}  /></div>
       <div className="main-grid-agency">
         <div className="content-box combine-left-government3">
           <ul className="tab-menu-agency flex-start">

               </li>
             ))}
           </ul>
-          <div className="content-wrap equipmentlist">
-            <div className="margin-bottom2">
+          <div>
+          <div className="margin-bottom2">
               <Calendar_agency />
-            </div>
+            </div>                          
             <ul className="tab-content">
               {data
                 .filter((item) => index === item.id)

b9644ae

655be42

client/views/pages/main/Main_agency.jsx

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

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

...	...	@@ -40,7 +40,7 @@
40	40	<img src={box} alt="" />
41	41	<div className="text">
42	42	<p>나의 관리 대상자</p>
43		- <p>40</p>
	43	+ <p className="peoplecount">40</p>
44	44	</div>
45	45	</li>
46	46	</ul>
...	...	@@ -49,7 +49,7 @@
49	49	<img src={medicineAgency} alt="" />
50	50	<div className="text">
51	51	<p>미복약 위험 대상자</p>
52		- <p>40</p>
	52	+ <p className="peoplecount">40</p>
53	53	</div>
54	54	</li>
55	55	</ul>
...	...	@@ -58,7 +58,7 @@
58	58	<img src={temperatureAgency} alt="" />
59	59	<div className="text">
60	60	<p>댁내 온도 위험 대상자</p>
61		- <p>40</p>
	61	+ <p className="peoplecount">40</p>
62	62	</div>
63	63	</li>
64	64	</ul>
...	...	@@ -67,7 +67,7 @@
67	67	<img src={batteryAgency} alt="" />
68	68	<div className="text">
69	69	<p>배터리 부족 대상자 </p>
70		- <p>40</p>
	70	+ <p className="peoplecount">40</p>
71	71	</div>
72	72	</li>
73	73	</ul>

b9644ae

655be42

client/views/pages/main/Weather.jsx

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

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

...	...	@@ -47,7 +47,7 @@
47	47	<ul className="flex-start">
48	48	<li id="fullDate">{date}</li>
49	49	<li id="temp">{`${temp}°C`}</li>
50		- <li><img src={weather} alt="" style={{width:"75%"}}/></li>
	50	+ <li><img src={weather} alt="" /></li>
51	51	</ul>
52	52	</div>
53	53	);

b9644ae

655be42

client/views/pages/setting/RiskSet.jsx

--- client/views/pages/setting/RiskSet.jsx

+++ client/views/pages/setting/RiskSet.jsx


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

       id: 1,
       title: "온도 관리",
       description: (
-        <Table
+        <TableRisk
           className={"risk-table"}
           head={thead1}
           contents={content1}

       id: 2,
       title: "복약 관리",
       description: (
-        <Table
+        <TableRisk
           className={"risk-table"}
           head={thead2}
           contents={content2}

       id: 3,
       title: "배터리 관리",
       description: (
-        <Table
+        <TableRisk
           className={"risk-table"}
           head={thead3}
           contents={content3}

     <main>
 <ContentTitle contentTitle={"위험 기준 관리 "} />
       <div className="tab-container">
-        <ul className="tab-menu">
+        <ul className="tab-menu flex-start">
           {data.map((item) => (
             <li
               key={item.id}

b9644ae

655be42

client/views/pages/user_management/UserAuthoriySelect.jsx

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

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


                     <option value="사용자선택">관리자</option>
                   </select>
                 </ul>
-                <ul className="tab-menu">
+                <ul className="tab-menu flex-end">
                   {data.map((item) => (
                     <li
                       key={item.id}

Add a comment

Open 0
Closed 0

List

...	...	@@ -341,7 +341,7 @@
341	341	<option value="사용자선택">관리자</option>
342	342	</select>
343	343	</ul>
344		- <ul className="tab-menu">
	344	+ <ul className="tab-menu flex-end">
345	345	{data.map((item) => (
346	346	<li
347	347	key={item.id}

...	...	@@ -23,9 +23,9 @@
23	23	padding: 1rem 3rem;
24	24	background-color: white;
25	25	grid-area: header;
26		- height: 87px;
27		- border-bottom: 1px solid #cccccc;
28		-
	26	+ height: 87px;
	27	+ z-index: 10;
	28	+ width: 100%;
29	29	}
30	30
31	31	.page-title span {
...	...	@@ -38,19 +38,17 @@
38	38	height: 100%;
39	39	background-color: #f2f0eb;
40	40	grid-area: nav;
41		- border-right: 1px solid #cccccc;
42		-}
43		-.nav{
44	41	position: relative;
45	42	background: #ffffff;
	43	+ box-shadow: 1px 0px 6px 2px rgb(0 0 0 / 20%);
46	44	}
	45	+
47	46	.logo {
48		- padding: 2rem 1rem;
	47	+ padding: 3rem 1rem;
49	48	font-size: large;
50	49	text-align: center;
51	50	font-weight: bold;
52	51	}
53		-.logo img{width: 273px;}
54	52	/* 네비게이션 */
55	53
56	54
...	...	@@ -129,7 +127,7 @@
129	127	.info-id span, .logout span{
130	128	margin: 0 auto;
131	129	}
132		-.bottom-section{position: absolute; padding: 0 2rem; bottom: 3rem;}
	130	+.bottom-section{position: absolute; padding: 0 1.6rem; bottom: 5rem;}
133	131	.logout{background: #f26e50;}
134	132	#pages {
135	133	max-width: 100%;
...	...	@@ -137,7 +135,7 @@
137	135	padding: 3rem;
138	136	background-color: #f4f4f2;
139	137	grid-area: main;
140		- box-shadow: 0px 11px 12px -10px rgb(0 0 0 / 20%) inset;
	138	+
141	139	}
142	140
143	141

...	...	@@ -3,56 +3,134 @@
3	3	font-size: 2.4rem;
4	4	font-family: 'AuctionGothic_Medium';
5	5	}
6		-header > div{height: 100%;}
7		-.join-btn{
	6	+
	7	+header>div {
	8	+ height: 100%;
	9	+}
	10	+
	11	+.join-btn {
8	12	background-color: transparent;
9	13	}
10		-.highlight{
	14	+
	15	+.highlight {
11	16	font-weight: 900;
12	17	background-color: #18924e;
13	18	}
14	19
	20	+.menuicon {
	21	+ display: none;
	22	+ cursor: pointer;
	23	+ height: 9.4rem;
	24	+ left: 2.5rem;
	25	+ top: 2.6rem;
	26	+ position: absolute;
	27	+}
	28	+
15	29	/* 시행기관 장비관리 리스트 */
16	30
17		-.visitlist{height: 55vh;}
18		-.visitlist .agency-visitlist{border: 0;}
19		-.visitlist .agency-visitlist th{background-color: #fdede9; }
20		-.agency-calendar .react-calendar{height: 10vh;}
21		-.agency-calendar .react-calendar__month-view__weekdays{display: none !important;}
22		-.agency-calendar .react-calendar__month-view__days{flex-wrap: unset !important; padding: 0 0 3rem 0;}
23		-.agency-calendar .react-calendar__month-view__days__day{flex: 0 0 2.85% !important; padding: 1rem 0;}
	31	+.visitlist {
	32	+ height: 55vh;
	33	+}
	34	+
	35	+.agency-visitlist {
	36	+ border: 0;
	37	+}
	38	+
	39	+.agency-visitlist th {
	40	+ background-color: #fdede9;
	41	+}
	42	+
	43	+.agency-calendar .react-calendar {
	44	+ height: 10vh;
	45	+}
	46	+
	47	+.agency-calendar .react-calendar__month-view__weekdays {
	48	+ display: none !important;
	49	+}
	50	+
	51	+.agency-calendar .react-calendar__month-view__days {
	52	+ flex-wrap: unset !important;
	53	+ padding: 0 0 3rem 0;
	54	+}
	55	+
	56	+.agency-calendar .react-calendar__month-view__days__day {
	57	+ flex: 0 0 2.85% !important;
	58	+ padding: 1rem 0;
	59	+}
24	60
25	61	/* .agency-calendar .react-calendar__month-view__days{overflow: hidden;} */
26	62
27	63	/* Q&A */
28		-.question-select input{width: 3%;}
29		-.question-select label{width: 10%;}
30		-.question-select select{width: 16%; height: 3.7rem;}
31		-.qna-insert select{height: 3.7rem;}
32		-.qna-insert th{font-size: 1.8rem; color: #733c1d;}
	64	+.question-select input {
	65	+ width: 3%;
	66	+}
	67	+
	68	+.question-select label {
	69	+ width: 10%;
	70	+}
	71	+
	72	+.question-select select {
	73	+ width: 16%;
	74	+ height: 3.7rem;
	75	+}
	76	+
	77	+.qna-insert select {
	78	+ height: 3.7rem;
	79	+}
	80	+
	81	+.qna-insert th {
	82	+ font-size: 1.8rem;
	83	+ color: #733c1d;
	84	+}
	85	+
33	86	/* 담당자배정 */
34		-.protectorlist input{width: 20rem;}
	87	+.protectorlist input {
	88	+ width: 20rem;
	89	+}
	90	+
35	91	/* 위험기준관리 */
36		-.risk-table input{
	92	+.risk-table input {
37	93	width: 100%;
38	94	}
39		-.risk-table select{
	95	+
	96	+.risk-table select {
40	97	width: 100%;
41	98	}
	99	+
42	100	/* 문진표 */
43		-.questionnaire-table th{display: block;}
44		-.questionnaire-table tr{padding: 1rem;}
45		-.questionnaire-table input{width: 9%;}
	101	+.questionnaire-table th {
	102	+ display: block;
	103	+}
	104	+
	105	+.questionnaire-table tr {
	106	+ padding: 1rem;
	107	+}
	108	+
	109	+.questionnaire-table input {
	110	+ width: 9%;
	111	+}
	112	+
46	113	/* 카테고리 기관 추가*/
47		-.explain-table th{background: #ffffff;}
48		-.total p{font-size: 1.6rem; font-weight: 600;}
49		-.total{color: #733c1d; }
50		-.total-equip::before{
	114	+.explain-table th {
	115	+ background: #ffffff;
	116	+}
	117	+
	118	+.total p {
	119	+ font-size: 1.6rem;
	120	+ font-weight: 600;
	121	+}
	122	+
	123	+.total {
	124	+ color: #733c1d;
	125	+}
	126	+
	127	+.total-equip::before {
51	128	content: "";
52	129	border-left: 20px solid #5a70df;
53	130	margin-right: 1rem;
54	131	}
55		-.total-senior::before{
	132	+
	133	+.total-senior::before {
56	134	content: "";
57	135	border-left: 20px solid #7D9D9C;
58	136	margin: 0 1rem 0 3rem;
...	...	@@ -96,6 +174,7 @@
96	174	.statistics li:nth-child(3) {
97	175	border: 1px solid #2132e3;
98	176	}
	177	+
99	178	.statistics li:nth-child(4) {
100	179	border: 1px solid #e3d621;
101	180	}
...	...	@@ -114,6 +193,7 @@
114	193	.statistics li p:nth-of-type(2)::after {
115	194	content: "명";
116	195	}
	196	+
117	197	.statistics-govern li {
118	198	position: relative;
119	199	padding-left: 5rem;
...	...	@@ -124,59 +204,95 @@
124	204	position: absolute;
125	205	left: 0;
126	206	}
	207	+
127	208	.statistics-govern:nth-of-type(1) {
128	209	background-image: linear-gradient(to bottom right, #9890e3 0%, #b1f4cf 100%);
129	210	}
	211	+
130	212	.statistics-govern:nth-of-type(2) {
131	213	background-image: linear-gradient(to bottom right, #b1f4cf 0%, #5a70df 100%);
132	214	}
	215	+
133	216	.statistics-govern:nth-of-type(3) {
134	217	background-image: linear-gradient(to bottom right, #83a9d7 0%, #8d2ecd 100%);
135	218	}
	219	+
136	220	.statistics-govern:nth-of-type(4) {
137	221	background-image: linear-gradient(to bottom right, #8d2ecd 0%, #b1f4cf 100%);
138	222	}
139		-.statistics-govern li p{color: #ffffff;}
	223	+
	224	+.statistics-govern li p {
	225	+ color: #ffffff;
	226	+}
	227	+
140	228	.statistics-govern li p:nth-of-type(2) {
141	229	padding-bottom: 0.5rem;
142	230	font-size: 1.6rem;
143	231	font-weight: bold;
144	232	}
	233	+
145	234	.statistics-govern li p:nth-of-type(3) {
146	235	font-size: 1.6rem;
147	236	font-weight: bold;
148	237	}
	238	+
149	239	.statistics-govern li p:nth-of-type(3)::after {
150	240	content: "명";
151	241	}
152		-.statistics-agency{border-radius: 1.5rem; box-shadow: 1px 1px 18px 1px rgb(0 0 0 / 13%);}
	242	+
	243	+.statistics-agency {
	244	+ border-radius: 1.5rem;
	245	+ box-shadow: 1px 1px 18px 1px rgb(0 0 0 / 13%);
	246	+}
	247	+
153	248	.statistics-agency li {
154	249	padding: 0 2rem;
155	250	}
156		-.statistics-agency li .text{padding-left: 1rem; width: 100%;}
	251	+
	252	+.statistics-agency li .text {
	253	+ padding-left: 1rem;
	254	+ width: 100%;
	255	+}
	256	+
157	257	.statistics-agency li div p:nth-of-type(1) {
158	258	font-size: 1.8rem;
159	259	font-weight: bold;
160	260	color: #ed724a;
161	261	}
	262	+
162	263	.statistics-agency li div p:nth-of-type(2) {
163	264	font-size: 2.5rem;
164	265	font-weight: bold;
165	266	}
166		-.statistics-agency li div p:nth-of-type(2)::after{
	267	+
	268	+.peoplecount::after {
167	269	content: "명";
168	270	font-size: 1.5rem;
169	271	color: #cbc9c9;
170	272	}
171		-.statistics-guardian{height: 100%;}
172		-.guardian-medicine{height: 16vh;}
173		-.statistics-guardian li{
	273	+
	274	+.equipcount::after {
	275	+ content: "개";
	276	+ font-size: 1.5rem;
	277	+ color: #cbc9c9;
	278	+}
	279	+
	280	+.statistics-guardian {
	281	+ height: 100%;
	282	+}
	283	+
	284	+.guardian-medicine {
	285	+ height: 16vh;
	286	+}
	287	+
	288	+.statistics-guardian li {
174	289	padding: 1rem 3rem;
175	290	background: #ffffff;
176	291	border-radius: 20px;
177	292	margin: 0 auto;
178	293	margin-bottom: 1rem;
179	294	}
	295	+
180	296	/* .statistics-guardian:nth-child(1) {
181	297	background: #fbe4e4;
182	298	}
...	...	@@ -203,7 +319,11 @@
203	319	.statistics-guardian li:nth-child(7) {
204	320	background: rgba(255, 254, 254, 0.5);
205	321	}
206		-.chart-guardian{height: 77%;}
	322	+
	323	+.chart-guardian {
	324	+ height: 77%;
	325	+}
	326	+
207	327	.statistics-guardian li p:nth-child(3) {
208	328	font-size: 1.5rem;
209	329	}
...	...	@@ -218,6 +338,7 @@
218	338	padding: 0;
219	339	font-size: 2rem;
220	340	}
	341	+
221	342	.guardian-table {
222	343	width: 100%;
223	344	}
...	...	@@ -225,6 +346,7 @@
225	346	.guardian-table th {
226	347	background: none;
227	348	}
	349	+
228	350	.guardian-table td {
229	351	border: 0;
230	352	}
...	...	@@ -244,6 +366,7 @@
244	366	font-weight: bold;
245	367	margin-right: 2rem;
246	368	}
	369	+
247	370	.guardian-table1 {
248	371	width: 100%;
249	372	}
...	...	@@ -252,34 +375,42 @@
252	375	background: none;
253	376	font-size: 1.9rem;
254	377	}
255		-.guardian-table1 th:nth-child(1){
	378	+
	379	+.guardian-table1 th:nth-child(1) {
256	380	background: #f48d8d;
257	381	border: 6px solid rgba(255, 254, 254, 0.5);
258	382	}
259		-.guardian-table1 th:nth-child(2){
	383	+
	384	+.guardian-table1 th:nth-child(2) {
260	385	background: #efa33a;
261	386	border: 6px solid rgba(255, 254, 254, 0.5);
262	387	}
263		-.guardian-table1 th:nth-child(3){
	388	+
	389	+.guardian-table1 th:nth-child(3) {
264	390	background: #eeeb3c;
265	391	border: 6px solid rgba(255, 254, 254, 0.5);
266	392	}
267		-.guardian-table1 th:nth-child(4){
	393	+
	394	+.guardian-table1 th:nth-child(4) {
268	395	background: #9be32e;
269	396	border: 6px solid rgba(255, 254, 254, 0.5);
270	397	}
271		-.guardian-table1 th:nth-child(5){
	398	+
	399	+.guardian-table1 th:nth-child(5) {
272	400	background: #9fa6f2;
273	401	border: 6px solid rgba(255, 254, 254, 0.5);
274	402	}
275		-.guardian-table1 th:nth-child(6){
	403	+
	404	+.guardian-table1 th:nth-child(6) {
276	405	background: #b089ed;
277	406	border: 6px solid rgba(255, 254, 254, 0.5);
278	407	}
279		-.guardian-table1 th:nth-child(7){
	408	+
	409	+.guardian-table1 th:nth-child(7) {
280	410	background: #e057f0;
281	411	border: 6px solid rgba(255, 254, 254, 0.5);
282	412	}
	413	+
283	414	.guardian-table1 td {
284	415	border: 0;
285	416	}
...	...	@@ -299,8 +430,15 @@
299	430	font-weight: bold;
300	431	margin-right: 2rem;
301	432	}
302		-.main-guardian{margin-bottom: 3rem;}
303		-.red{color: red;}
	433	+
	434	+.main-guardian {
	435	+ margin-bottom: 3rem;
	436	+}
	437	+
	438	+.red {
	439	+ color: red;
	440	+}
	441	+
304	442	.main-battery-title span::after {
305	443	content: " 님의";
306	444	margin-right: 1rem;
...	...	@@ -311,11 +449,31 @@
311	449	font-size: 1.6rem;
312	450	font-weight: 900;
313	451	}
314		-.main-battery-title p{padding-right: 1rem;}
315		-.battery-wrap{height: 10rem;}
316		-.battery-img{position: relative; padding: 1.5rem 0 1.5rem 3rem;}
317		-.battery-img img{position: absolute; display: none; box-shadow: 1px 1px 14px 1px rgba(0, 0, 0, 0.15); border-radius: 20px;}
318		-.battery-img img.show{display: block; }
	452	+
	453	+.main-battery-title p {
	454	+ padding-right: 1rem;
	455	+}
	456	+
	457	+.battery-wrap {
	458	+ height: 10rem;
	459	+}
	460	+
	461	+.battery-img {
	462	+ position: relative;
	463	+ padding: 1.5rem 0 1.5rem 3rem;
	464	+}
	465	+
	466	+.battery-img img {
	467	+ position: absolute;
	468	+ display: none;
	469	+ box-shadow: 1px 1px 14px 1px rgba(0, 0, 0, 0.15);
	470	+ border-radius: 20px;
	471	+}
	472	+
	473	+.battery-img img.show {
	474	+ display: block;
	475	+}
	476	+
319	477	.map svg {
320	478	display: block;
321	479	}
...	...	@@ -327,35 +485,70 @@
327	485	text-align: center;
328	486	padding-right: 1rem;
329	487	}
	488	+
330	489	.temp::after {
331	490	content: " 입니다.";
332	491	font-size: 1.6rem;
333	492	font-weight: 500;
334	493	}
	494	+
335	495	.battery p {
336	496	font-size: 2rem;
337	497	font-weight: bold;
338	498	text-align: center;
339	499	padding-right: 1rem;
340	500	}
341		-.battery p:nth-child(3){font-size: 1.5rem; padding-top: 0.7rem;}
	501	+
	502	+.battery p:nth-child(3) {
	503	+ font-size: 1.5rem;
	504	+ padding-top: 0.7rem;
	505	+}
342	506
343	507	#chartdiv1 {
344	508	height: 22vh;
345	509	}
346	510
347	511	/* ------------------------------------------------보호자 */
348		-.react-calendar{width: 100%; border: none; height: 54vh;}
349		-.react-calendar__month-view__days{padding: 2rem 0;}
350		-.react-calendar__month-view__days button{padding: 2.5rem; border: 1px solid #fdede8; border-radius: 0;}
351		-.react-calendar__tile--active:enabled:hover, .react-calendar__tile--active:enabled:focus{background: #e26f49;}
352		-.react-calendar__tile--active{background: #e26f49;}
	512	+.react-calendar {
	513	+ width: 100%;
	514	+ border: none;
	515	+ height: 54vh;
	516	+}
	517	+
	518	+.react-calendar__month-view__days {
	519	+ padding: 2rem 0;
	520	+}
	521	+
	522	+.react-calendar__month-view__days button {
	523	+ padding: 2.5rem;
	524	+ border: 1px solid #fdede8;
	525	+ border-radius: 0;
	526	+}
	527	+
	528	+.react-calendar__tile--active:enabled:hover,
	529	+.react-calendar__tile--active:enabled:focus {
	530	+ background: #e26f49;
	531	+}
	532	+
	533	+.react-calendar__tile--active {
	534	+ background: #e26f49;
	535	+}
	536	+
353	537	.weather-info
354	538
355	539	/* 보호자 복약 */
356		-.guardian-medicine ul li{position: relative;}
357		-.guardian-medicine ul li img{position: absolute; display: none;}
358		-.guardian-medicine ul li img.show{display: block;}
	540	+.guardian-medicine ul li {
	541	+ position: relative;
	542	+}
	543	+
	544	+.guardian-medicine ul li img {
	545	+ position: absolute;
	546	+ display: none;
	547	+}
	548	+
	549	+.guardian-medicine ul li img.show {
	550	+ display: block;
	551	+}
359	552
360	553	/* ------------------------------------- main page --------------------------------- */
361	554	/* 사용자 정보*/
...	...	@@ -532,7 +725,11 @@
532	725	padding: 1rem;
533	726	line-height: 2rem;
534	727	}
535		-.join-inner select{padding: 1rem;}
	728	+
	729	+.join-inner select {
	730	+ padding: 1rem;
	731	+}
	732	+
536	733	.join-inner #id {
537	734	max-width: 65%;
538	735	margin-right: 1rem;
...	...	@@ -546,8 +743,15 @@
546	743	}
547	744
548	745	/* 검색창 */
549		-.searchselect{width: 25%;}
550		-.searchselect label{width: 100%; margin-right: 3rem;}
	746	+.searchselect {
	747	+ width: 25%;
	748	+}
	749	+
	750	+.searchselect label {
	751	+ width: 100%;
	752	+ margin-right: 3rem;
	753	+}
	754	+
551	755	.mobile-area-wrap {
552	756	display: none;
553	757	}
...	...	@@ -556,9 +760,9 @@
556	760	width: 100%;
557	761	margin-bottom: 2rem;
558	762	}
	763	+
559	764	.detail-search table {
560		- border-top: none;
561		- border-bottom: none;
	765	+ border: none;
562	766	}
563	767
564	768	.detail-search table th,
...	...	@@ -579,6 +783,7 @@
579	783	.detail-search tbody tr:nth-of-type(2) select {
580	784	width: 24.4%;
581	785	}
	786	+
582	787	.detail-search tbody select {
583	788	height: 3.7rem;
584	789	}
...	...	@@ -609,7 +814,11 @@
609	814	.search-area {
610	815	padding: 2rem;
611	816	}
612		-.search-area button{width: 100%;}
	817	+
	818	+.search-area button {
	819	+ width: 100%;
	820	+}
	821	+
613	822	.search-area details {
614	823	margin-top: 1rem;
615	824	}
...	...	@@ -704,10 +913,11 @@
704	913	padding: 0 0rem 0 1rem;
705	914	width: 5rem;
706	915	}
707		-.senior-insert tr:nth-child(5) input{
708		- width: 2rem;
	916	+
	917	+.senior-insert select {
	918	+ padding: 1rem;
709	919	}
710		-.senior-insert select{padding: 1rem;}
	920	+
711	921	.senior-insert tr:nth-child(2) .gender {
712	922	padding: 2rem 1rem;
713	923	}
...	...	@@ -723,6 +933,8 @@
723	933	border: 6px solid #ffffff;
724	934	background: #f0ebe3;
725	935	padding-left: 2rem;
	936	+ color: rgb(115, 60, 29);
	937	+ font-size: 1.6rem;
726	938	}
727	939
728	940	.senior-detail td {
...	...	@@ -864,8 +1076,12 @@
864	1076	}
865	1077
866	1078	/* 장비등록 */
867		-.select-agency{width: 59%; margin: 0 auto;}
868		-.user-list{
	1079	+.select-agency {
	1080	+ width: 59%;
	1081	+ margin: 0 auto;
	1082	+}
	1083	+
	1084	+.user-list {
869	1085	background-color: #eeeeee;
870	1086	height: 57.8vh;
871	1087	}
...	...	@@ -903,7 +1119,11 @@
903	1119	.modal-main {
904	1120	padding: 2rem;
905	1121	}
906		-.modal-main table{border: 1px solid #d8d3c7;}
	1122	+
	1123	+.modal-main table {
	1124	+ border: 1px solid #d8d3c7;
	1125	+}
	1126	+
907	1127	.modal-main table th,
908	1128	.modal-main table td {
909	1129	text-align: center;
...	...	@@ -917,32 +1137,36 @@
917	1137	}
918	1138
919	1139	/* 사용자 관리 */
920		-.tab-menu .tab-menu-agency{
	1140	+.tab-menu .tab-menu-agency {
921	1141	display: flex;
922	1142	}
	1143	+
923	1144	.tab-menu-agency li {
924	1145	padding: 1rem 2rem;
925	1146	margin-right: 0.2rem;
926		- color: #733c1d;
	1147	+ color: #733c1d;
927	1148	font-size: 1.6rem;
928	1149	font-weight: bold;
929	1150	text-align: center;
930	1151	}
	1152	+
931	1153	.tab-menu-agency li.active {
932	1154	color: #f25430;
933	1155	border-bottom: 2px solid #f25430;
934	1156	}
	1157	+
935	1158	.tab-menu li {
936	1159	padding: 1rem 2rem;
937	1160	margin-right: 0.2rem;
938	1161	background-color: #f2f0eb;
939		- color: #733c1d;
	1162	+ color: #733c1d;
940	1163	border-radius: 0.5rem 0.5rem 0 0;
941	1164	font-size: 1.6rem;
942	1165	font-weight: bold;
943	1166	text-align: center;
944	1167	box-shadow: 3px -2px 5px -2px rgb(0 0 0 / 20%);
945	1168	}
	1169	+
946	1170	.tab-menu li.active {
947	1171	background-color: #f25430;
948	1172	color: #ffffff;
...	...	@@ -958,12 +1182,16 @@
958	1182	height: 3.7rem;
959	1183	margin-right: 1rem;
960	1184	}
	1185	+
961	1186	.tab-container>div>div:nth-child(2) {
962	1187	margin: 1rem 0;
963	1188	}
964	1189
965	1190	/* 권한 설정 */
966		-.authority-table-mobile{display: none;}
	1191	+.authority-table-mobile {
	1192	+ display: none;
	1193	+}
	1194	+
967	1195	.authority-table-pc th,
968	1196	.authority-table-pc td {
969	1197	padding: 1.5rem;
...	...	@@ -995,12 +1223,12 @@
995	1223	}
996	1224	}
997	1225
998		-.mobile{
	1226	+.mobile {
999	1227	display: none;
1000	1228	}
1001	1229
1002	1230	/* -------------- 페이징 버튼 색상 적용 ----------------- */
1003		-.PagingBtn{
	1231	+.PagingBtn {
1004	1232	background-color: #ff7f50;
1005	1233	color: #ffffff;
1006	1234

...	...	@@ -1,780 +1,6 @@
1		-/* 공통 */
2		-@media all and (max-width:769px) {
3	1
4		- /* 권한관리 */
5		- .authority-table-pc {
6		- display: none;
7		- }
8	2
9		- .authority-table-mobile thead tr:nth-child(1) {
10		- display: flex;
11		- }
12		-
13		- .authority-table-mobile thead tr:nth-child(1)>div {
14		- font-size: 1.6rem;
15		- width: 100%;
16		- }
17		-
18		- .authority-table-mobile select {
19		- margin: 1rem 0;
20		- }
21		-
22		- .authority-table-mobile {
23		- display: block;
24		- }
25		-
26		- .authority-table-mobile thead {
27		- display: inline-table;
28		- width: 100%;
29		- }
30		-
31		- .authority-table-mobile tr,
32		- .authority-table-mobile td {
33		- display: revert;
34		- }
35		-
36		- .authority-table-mobile tr {
37		- width: 100%;
38		- }
39		-
40		- .authority-table-mobile tr:nth-child(2) th:nth-child(1) {
41		- width: 50%;
42		- }
43		-
44		- .authority-table-mobile td {
45		- padding: 1rem;
46		- width: 10%;
47		- }
48		-
49		- .authority-table-mobile tbody td input {
50		- margin-right: 1rem;
51		- }
52		-
53		- .authority-table-mobile th {
54		- width: 50%;
55		- }
56		-
57		- /* 레이아웃 */
58		- #layout {
59		- width: 100%;
60		- height: 100%;
61		- display: grid;
62		- grid-template-areas:
63		- "nav header"
64		- "nav pages"
65		- "nav main";
66		- grid-template-columns: 200px 1fr;
67		- grid-template-rows: 0.1fr 1.9fr;
68		- }
69		-
70		- #layout.expander {
71		- grid-template-columns: 0px 1fr;
72		- }
73		-
74		- #layout.on {
75		- grid-template-columns: 0px 1fr;
76		- grid-template-rows: 0.1fr 1.9fr;
77		- }
78		-
79		- #pages {
80		- grid-area: pages;
81		- padding: 0.5rem;
82		- }
83		-
84		- main {
85		- padding: 0;
86		- }
87		-
88		- /* 보호자 메인 그리드 */
89		- .main-grid-guardian {
90		- height: 100%;
91		- display: grid;
92		- grid-template-columns: 1fr;
93		- grid-template-rows: 0.5fr 0.1fr;
94		- gap: 1rem;
95		- }
96		-
97		- /* 정부 메인 그리드 */
98		- .main-grid-government {
99		- display: grid;
100		- grid-template-columns: 1fr;
101		- grid-template-rows: 0.1fr 0.1fr 1fr;
102		- gap: 0.5rem;
103		- }
104		-
105		- /* 병원 메인 그리드 */
106		- .main-grid-hospital {
107		- display: grid;
108		- grid-template-columns: 1fr;
109		- grid-template-rows: 0.1fr 0.1fr 1fr;
110		- gap: 0.5rem;
111		- }
112		-
113		- .main-grid-government .content-box {
114		- padding: 1rem;
115		- }
116		-
117		- .main-grid-government .content-box .table {
118		- border: none;
119		- }
120		-
121		- .main-grid-government .combine-all-government {
122		- grid-row: auto;
123		- }
124		-
125		- .main-grid-government .combine-right {
126		- grid-column: auto;
127		- }
128		-
129		- .main-grid-government .combine-right-government,
130		- .main-grid-government .combine-left,
131		- .main-grid-hospital .combine-right-government,
132		- .main-grid-hospital .combine-left {
133		- grid-column: 1;
134		- }
135		-
136		- .main-grid-government .combine-bottom-government {
137		- grid-column: 0;
138		- }
139		-
140		- header {
141		- border-bottom: 1px solid #eeeeee
142		- }
143		-
144		- .header-flex {
145		- display: flex;
146		- justify-content: space-between;
147		- }
148		-
149		- /* 공통 */
150		- .page-title svg {
151		- display: block;
152		- }
153		-
154		- #fullDate,
155		- #temp {
156		- font-size: 1.2rem;
157		- }
158		-
159		- .content-wrap {
160		- padding: 2rem 1rem;
161		- }
162		-
163		- nav {
164		- position: fixed;
165		- top: 58px;
166		- left: -250px;
167		- z-index: 10;
168		- transition: 0.5s;
169		- }
170		-
171		- nav.on {
172		- left: 0;
173		- transition: 0.5s;
174		- }
175		-
176		-
177		- /* 메인 */
178		-
179		- .react-calendar {
180		- width: 100%;
181		- }
182		-
183		- .temp p {
184		- font-size: 2rem;
185		- }
186		-
187		- .main-battery-title {
188		- font-size: 1.4rem;
189		- justify-content: flex-start;
190		- padding-right: 1rem;
191		- }
192		-
193		- .main-battery-title p {
194		- padding-right: 1rem;
195		- }
196		-
197		- .battery::after {
198		- content: " 남았습니다.";
199		- font-size: 1.4rem;
200		- margin-left: 0;
201		- }
202		-
203		- .battery p {
204		- font-size: 2rem;
205		- padding-left: 0;
206		- padding-right: 1rem;
207		- }
208		-
209		- #chartdiv1 {
210		- height: 25vh;
211		- }
212		-
213		- .statistics li p:nth-of-type(1),
214		- .statistics li p:nth-of-type(2) {
215		- font-size: 1.4rem;
216		- }
217		-
218		- .weather-info {
219		- width: 70%;
220		- padding-right: 1rem;
221		- }
222		-
223		- .mobile .main-grid-guardian {
224		- gap: 0.5rem;
225		- }
226		-
227		- .mobile .main-grid-guardian .content-box {
228		- padding: 0.5rem;
229		- }
230		-
231		- .mobile .main-grid-guardian .content-box:nth-child(2)>div p {
232		- font-size: 1.8rem;
233		- }
234		-
235		- /* 테이블 */
236		-
237		- table {
238		- display: table;
239		- border: 0;
240		- }
241		-
242		- thead {
243		- display: none;
244		- }
245		-
246		- tbody {
247		- display: block;
248		- }
249		-
250		- tr {
251		- display: block;
252		- margin-bottom: 1rem;
253		- }
254		-
255		- td {
256		- display: block;
257		- }
258		-
259		- tr>td::before {
260		- display: inline-block;
261		- width: 33%;
262		- position: relative;
263		- }
264		-
265		- table td {
266		- border: none;
267		- position: relative;
268		- border-bottom: 1px solid #eee;
269		- font-size: 1.2rem;
270		- }
271		-
272		-
273		- table td span {
274		- display: block;
275		- }
276		-
277		- table td::before {
278		- position: absolute;
279		- white-space: nowrap;
280		- left: 1rem;
281		- width: 100px;
282		- border-radius: 10px;
283		- text-align: center;
284		- align-items: center;
285		- background-color: #F0EBE3;
286		- font-weight: 900;
287		- }
288		-
289		- /* 메인테이블 */
290		- .none-medicine-list td:nth-of-type(1) {
291		- font-weight: bold;
292		- padding: 0.5rem;
293		- }
294		-
295		- .none-medicine-list td:nth-of-type(1)::before {
296		- content: "";
297		- }
298		-
299		- .none-medicine-list td:nth-of-type(2):before {
300		- content: "요양등급";
301		- }
302		-
303		- .none-medicine-list td:nth-of-type(3):before {
304		- content: "생년월일";
305		- }
306		-
307		- .none-medicine-list td:nth-of-type(4):before {
308		- content: "전화번호";
309		- }
310		-
311		- .none-medicine-list td:nth-of-type(5):before {
312		- content: "주소";
313		- }
314		-
315		- .none-medicine-list td:nth-of-type(6):before {
316		- content: "기저질환";
317		- }
318		-
319		- .recent-visit {
320		- border: 0;
321		- }
322		-
323		- .recent-visit tr {
324		- margin-bottom: 3rem;
325		- }
326		-
327		- .recent-visit td:nth-of-type(1) {
328		- font-weight: bold;
329		- padding: 0.5rem;
330		- }
331		-
332		- .recent-visit td:nth-of-type(1)::before {
333		- content: "";
334		- }
335		-
336		- .recent-visit td:nth-of-type(2):before {
337		- content: "방문목적";
338		- }
339		-
340		- .recent-visit td:nth-of-type(3):before {
341		- content: "방문 상세 이유";
342		- }
343		-
344		- /* 시니어 조회 테이블 */
345		- .senior-table td:nth-of-type(1) {
346		- font-weight: bold;
347		- padding: 0.5rem;
348		- }
349		-
350		- .senior-table td:nth-of-type(1)::before {
351		- content: "";
352		- }
353		-
354		- .senior-table td:nth-of-type(2):before {
355		- content: "No";
356		- }
357		-
358		- .senior-table td:nth-of-type(3):before {
359		- content: "사용자등록번호";
360		- }
361		-
362		- .senior-table td:nth-of-type(4):before {
363		- content: "요양등급";
364		- }
365		-
366		- .senior-table td:nth-of-type(5):before {
367		- content: "이름";
368		- }
369		-
370		- .senior-table td:nth-of-type(6):before {
371		- content: "생년월일";
372		- }
373		-
374		- .senior-table td:nth-of-type(7):before {
375		- content: "전화번호";
376		- }
377		-
378		- .senior-table td:nth-of-type(8):before {
379		- content: "주소";
380		- }
381		-
382		- .senior-table td:nth-of-type(9):before {
383		- content: "기저질환";
384		- }
385		-
386		- /* 복약 조회 테이블*/
387		- .medicine-table td {
388		- padding-left: 14rem;
389		- }
390		-
391		- .medicine-table td:nth-of-type(1) {
392		- display: block;
393		- font-weight: 900;
394		- padding: 1rem;
395		- }
396		-
397		- .medicine-table td:nth-of-type(1):before {
398		- display: none;
399		- content: "";
400		- }
401		-
402		- .medicine-table td:nth-of-type(2):before {
403		- content: "이름";
404		- }
405		-
406		- .medicine-table td:nth-of-type(3):before {
407		- content: "생년월일";
408		- }
409		-
410		- .medicine-table td:nth-of-type(4):before {
411		- content: "전화번호";
412		- }
413		-
414		- .medicine-table td:nth-of-type(5):before {
415		- content: "주소";
416		- }
417		-
418		- .medicine-table td:nth-of-type(6):before {
419		- content: "평균 복약률 💊";
420		- }
421		-
422		- /* 복약 상세페이지 테이블 */
423		- .medicine-detail-table td:nth-of-type(1) {
424		- font-weight: 900;
425		- padding: 1rem;
426		- }
427		-
428		- .medicine-detail-table td:nth-of-type(1)::before {
429		- display: none;
430		- content: "";
431		- }
432		-
433		- .medicine-detail-table td:nth-of-type(2):before {
434		- content: "날짜";
435		- }
436		-
437		- .medicine-detail-table td:nth-of-type(3):before {
438		- content: "복약상태 (아침)";
439		- }
440		-
441		- .medicine-detail-table td:nth-of-type(4):before {
442		- content: "복약상태 (점심)";
443		- }
444		-
445		- .medicine-detail-table td:nth-of-type(5):before {
446		- content: "복약상태 (저녁)";
447		- }
448		-
449		- .medicine-detail-table td:nth-of-type(6):before {
450		- content: "필요 복용 횟수";
451		- }
452		-
453		- .medicine-detail-table td:nth-of-type(7):before {
454		- content: "복약률";
455		- }
456		-
457		- .medicine-detail-table td:nth-of-type(8):before {
458		- content: "수정 상세 사유";
459		- }
460		-
461		- .medicine-detail-table td:nth-of-type(9):before {
462		- content: "수정자";
463		- }
464		-
465		- .medicine-detail-table td:nth-of-type(10)::before {
466		- content: "수정일시";
467		- }
468		-
469		- .medicine-detail-table td:nth-of-type(11) {
470		- padding: 1rem 1rem 0 1rem;
471		- }
472		-
473		- /* 댁내 온도 조회 테이블 */
474		- .temperature-table td:nth-of-type(1) {
475		- display: block;
476		- font-weight: 900;
477		- padding: 1rem;
478		- }
479		-
480		- .temperature-table td:nth-of-type(1):before {
481		- display: none;
482		- content: "";
483		- }
484		-
485		- .temperature-table td:nth-of-type(2):before {
486		- content: "이름";
487		- }
488		-
489		- .temperature-table td:nth-of-type(3):before {
490		- content: "생년월일";
491		- }
492		-
493		- .temperature-table td:nth-of-type(4):before {
494		- content: "전화번호";
495		- }
496		-
497		- .temperature-table td:nth-of-type(5):before {
498		- content: "주소";
499		- }
500		-
501		- .temperature-table td:nth-of-type(6):before {
502		- content: "최근 온도";
503		- }
504		-
505		- .temperature-table td:nth-of-type(7):before {
506		- content: "상태";
507		- }
508		-
509		- /* 최근 일주일 댁내 온도 */
510		- .temperature-modal td:nth-of-type(1) {
511		- display: block;
512		- font-weight: 900;
513		- padding: 1rem;
514		- }
515		-
516		- .temperature-modal td:nth-of-type(1):before {
517		- display: none;
518		- content: "";
519		- }
520		-
521		- .temperature-modal td:nth-of-type(2):before {
522		- content: "날짜";
523		- }
524		-
525		- .temperature-modal td:nth-of-type(3):before {
526		- content: "02:00";
527		- }
528		-
529		- .temperature-modal td:nth-of-type(4):before {
530		- content: "10:00";
531		- }
532		-
533		- .temperature-modal td:nth-of-type(5):before {
534		- content: "14:00";
535		- }
536		-
537		- .temperature-modal td:nth-of-type(6):before {
538		- content: "23:00";
539		- }
540		-
541		- /* 방문 조회 테이블*/
542		- .visit-table table td:nth-of-type(1) {
543		- font-weight: 900;
544		- padding: 1rem;
545		- }
546		-
547		- .visit-table table td:nth-of-type(2):before {
548		- content: "날짜";
549		- }
550		-
551		- .visit-table table td:nth-of-type(3):before {
552		- content: "이름";
553		- }
554		-
555		- .visit-table table td:nth-of-type(4):before {
556		- content: "방문 목적";
557		- }
558		-
559		- .visit-table table td:nth-of-type(5):before {
560		- content: "방문 상세 사유";
561		- }
562		-
563		- .visit-table table td:nth-of-type(6):before {
564		- content: "보호사 연락처";
565		- }
566		-
567		- /* 장비 조회 테이블*/
568		- .equipment-table td:nth-of-type(1) {
569		- font-weight: 900;
570		- padding: 1rem;
571		- }
572		-
573		- .equipment-table td:nth-of-type(2):before {
574		- content: "No";
575		- }
576		-
577		- .equipment-table td:nth-of-type(3):before {
578		- content: "장비명";
579		- }
580		-
581		- .equipment-table td:nth-of-type(4):before {
582		- content: "시리얼 넘버";
583		- }
584		-
585		- .equipment-table td:nth-of-type(5):before {
586		- content: "기기 상태";
587		- }
588		-
589		- .equipment-table td:nth-of-type(6):before {
590		- content: "구매일";
591		- }
592		-
593		- .equipment-table td:nth-of-type(7):before {
594		- content: "배터리 잔량";
595		- }
596		-
597		- .equipment-table td:nth-of-type(8):before {
598		- content: "대여가능 여부";
599		- }
600		-
601		- .equipment-table td:nth-of-type(9):before {
602		- content: "관리";
603		- }
604		-
605		- /* 장비 상세 목록 테이블*/
606		- .equipment-detail td:nth-of-type(1) {
607		- font-weight: 900;
608		- padding: 1rem;
609		- }
610		-
611		-
612		- .equipment-detail td:nth-of-type(2):before {
613		- content: "장비명";
614		- }
615		-
616		- .equipment-detail td:nth-of-type(3):before {
617		- content: "시리얼 넘버";
618		- }
619		-
620		- .equipment-detail td:nth-of-type(4):before {
621		- content: "사용자명";
622		- }
623		-
624		- .equipment-detail td:nth-of-type(5):before {
625		- content: "사용자관리번호";
626		- }
627		-
628		- .equipment-detail td:nth-of-type(6):before {
629		- content: "위치";
630		- }
631		-
632		- .equipment-detail td:nth-of-type(7):before {
633		- content: "대여 기간";
634		- }
635		-
636		- /* 장비등록창 */
637		- .equipment-modal table td {
638		- padding: 0;
639		- }
640		-
641		- /* 내정보수정 */
642		- .join-inner {
643		- width: 100%;
644		- }
645		-
646		- /* 권한 관리 테이블 */
647		- .authority-table thead {
648		- display: block;
649		- }
650		-
651		- /* 사용자 관리 */
652		- /* 보호자 */
653		- .protector-user td:nth-of-type(1) {
654		- font-weight: 900;
655		- padding: 1rem;
656		- }
657		-
658		- .protector-user td:nth-of-type(2):before {
659		- content: "사용자명";
660		- }
661		-
662		- .protector-user td:nth-of-type(3):before {
663		- content: "사용자ID";
664		- }
665		-
666		- .protector-user td:nth-of-type(4):before {
667		- content: "성별";
668		- }
669		-
670		- .protector-user td:nth-of-type(5):before {
671		- content: "생년월일";
672		- }
673		-
674		- .protector-user td:nth-of-type(6):before {
675		- content: "주소";
676		- }
677		-
678		- .protector-user td:nth-of-type(7):before {
679		- content: "대상자 관리";
680		- }
681		-
682		- /* 보호사 */
683		- .caregiver-user td:nth-of-type(1) {
684		- font-weight: 900;
685		- padding: 1rem;
686		- }
687		-
688		- .caregiver-user td:nth-of-type(2):before {
689		- content: "사용자명";
690		- }
691		-
692		- .caregiver-user td:nth-of-type(3):before {
693		- content: "사용자ID";
694		- }
695		-
696		- .caregiver-user td:nth-of-type(4):before {
697		- content: "관리기관";
698		- }
699		-
700		- .caregiver-user td:nth-of-type(5):before {
701		- content: "성별";
702		- }
703		-
704		- .caregiver-user td:nth-of-type(6):before {
705		- content: "생년월일";
706		- }
707		-
708		- .caregiver-user td:nth-of-type(7):before {
709		- content: "주소";
710		- }
711		-
712		- .caregiver-user td:nth-of-type(8):before {
713		- content: "대상자 관리";
714		- }
715		-
716		- /* 병원 */
717		- .common-user td:nth-of-type(1) {
718		- font-weight: 900;
719		- padding: 1rem;
720		- }
721		-
722		- .common-user td:nth-of-type(2):before {
723		- content: "사용자명";
724		- }
725		-
726		- .common-user td:nth-of-type(3):before {
727		- content: "사용자ID";
728		- }
729		-
730		- .common-user td:nth-of-type(4):before {
731		- content: "관리기관";
732		- }
733		-
734		- .common-user td:nth-of-type(5):before {
735		- content: "성별";
736		- }
737		-
738		- .common-user td:nth-of-type(6):before {
739		- content: "생년월일";
740		- }
741		-
742		- .common-user td:nth-of-type(7):before {
743		- content: "주소";
744		- }
745		-
746		- /* 관리자 */
747		- .management-user td:nth-of-type(1) {
748		- font-weight: 900;
749		- padding: 1rem;
750		- }
751		-
752		- .management-user td:nth-of-type(2):before {
753		- content: "사용자명";
754		- }
755		-
756		- .management-user td:nth-of-type(3):before {
757		- content: "사용자ID";
758		- }
759		-
760		- .management-user td:nth-of-type(4):before {
761		- content: "성별";
762		- }
763		-
764		- .management-user td:nth-of-type(5):before {
765		- content: "생년월일";
766		- }
767		-
768		- .management-user td:nth-of-type(6):before {
769		- content: "주소";
770		- }
771		-
772		- .management-user td:nth-of-type(7):before {
773		- content: "관리";
774		- }
775		-}
776		-
777		-/* 테블릿 세로 (해상도 768px ~ 1023px)*/
	3	+/* 테블릿 가로 (해상도 768px ~ 1023px)*/
778	4	@media all and (min-width:768px) and (max-width:1023px) {
779	5
780	6
...	...	@@ -805,8 +31,35 @@
805	31	padding-right: 1rem;
806	32	}
807	33
808		- /* 공통 */
	34	+ .menuicon {
	35	+ display: block;
	36	+ }
809	37
	38	+ .usericon {
	39	+ display: none;
	40	+ }
	41	+
	42	+ /* 공통 */
	43	+ #layout{grid-template-columns: 0px 1fr;}
	44	+ header {
	45	+ padding: 1rem 2rem;
	46	+ }
	47	+ .header-info-id{margin-left: 5rem;}
	48	+ nav {
	49	+ position: absolute;
	50	+ left: -293px;
	51	+ top: 86px;
	52	+ z-index: 10;
	53	+ transition: 0.5s;
	54	+ box-shadow:12px -6px 10px -10px rgb(0 0 0 / 20%);
	55	+ height:91vh;
	56	+ }
	57	+
	58	+ nav.on {
	59	+ left: 0;
	60	+ transition: 0.5s;
	61	+ }
	62	+ .bottom-section{padding: 0 ; bottom: 6rem;}
810	63	/* 시니어 정보 상세 조회 */
811	64	.senior-detail {
812	65	border: 0;
...	...	@@ -921,7 +174,35 @@
921	174
922	175	/* 모바일 가로, 테블릿 세로 (해상도 480px ~ 767px)*/
923	176	@media all and (min-width:480px) and (max-width:767px) {
	177	+ .menuicon {
	178	+ display: block;
	179	+ }
924	180
	181	+ .usericon {
	182	+ display: none;
	183	+ }
	184	+
	185	+ /* 공통 */
	186	+ #layout{grid-template-columns: 0px 1fr;}
	187	+ header {
	188	+ padding: 1rem 2rem;
	189	+ }
	190	+ .header-info-id{margin-left: 5rem;}
	191	+ nav {
	192	+ position: absolute;
	193	+ left: -293px;
	194	+ top: 87px;
	195	+ z-index: 10;
	196	+ transition: 0.5s;
	197	+ box-shadow:12px -6px 10px -10px rgb(0 0 0 / 20%);
	198	+ height:91vh;
	199	+ }
	200	+
	201	+ nav.on {
	202	+ left: 0;
	203	+ transition: 0.5s;
	204	+ }
	205	+ .bottom-section{padding: 0 ; bottom: 14rem;}
925	206	/* 권한관리 */
926	207	.authority-table-pc {
927	208	display: none;
...	...	@@ -1282,9 +563,41 @@
1282	563
1283	564	}
1284	565
1285		-/* 모바일 가로, 테블릿 세로 (해상도 ~ 479px)*/
	566	+/* 모바일 세로 (해상도 ~ 479px)*/
1286	567	@media all and (max-width:479px) {
	568	+ .menuicon {
	569	+ display: block;
	570	+ position: fixed;
	571	+ }
1287	572
	573	+ .usericon {
	574	+ display: none;
	575	+ }
	576	+
	577	+ /* 공통 */
	578	+ #layout{display: block;}
	579	+ #pages{padding: 1rem;}
	580	+ header {
	581	+ padding: 1rem;
	582	+ position: fixed;
	583	+ }
	584	+ nav {
	585	+ position: fixed;
	586	+ left: -310px;
	587	+ top: 86px;
	588	+ z-index: 10;
	589	+ transition: 0.5s;
	590	+ box-shadow:12px -6px 10px -10px rgb(0 0 0 / 20%);
	591	+ height:91vh;
	592	+ }
	593	+ main{padding-top: 9rem;}
	594	+ nav.on {
	595	+ left: 0;
	596	+ transition: 0.5s;
	597	+ }
	598	+ .bottom-section{padding: 0.9rem ; bottom: 6rem;}
	599	+ .content-wrap{padding: 1rem;}
	600	+ th,td,tr{display: block;}
1288	601	/* 권한관리 */
1289	602	.authority-table-pc {
1290	603	display: none;
...	...	@@ -1369,13 +682,6 @@
1369	682	}
1370	683
1371	684	/* 공통 */
1372		- table td {
1373		- border: none;
1374		- position: relative;
1375		- border-bottom: 1px solid #eee;
1376		- font-size: 1.2rem;
1377		- padding-left: 10rem;
1378		- }
1379	685
1380	686	.header-flex {
1381	687	display: flex;
...	...	@@ -1493,7 +799,6 @@
1493	799
1494	800	.weather-info {
1495	801	width: 70%;
1496		- padding-right: 1rem;
1497	802	}
1498	803
1499	804	.recent-visit {

...	...	@@ -18,74 +18,89 @@
18	18	import TitleSmall from "../../component/TitleSmall.jsx";
19	19
20	20	export default function Main2() {
	21	+ const thead = ["No", "계약업체명", "구분", "담당자 연락처", "주소"];
	22	+ const key = ["No", "agency", "division", "phone", "address",];
	23	+ const content = [
	24	+ {
	25	+ No: 1,
	26	+ agency: "A복지관",
	27	+ division: "교환",
	28	+ phone: "010-1234-5678",
	29	+ address: "경상북도 군위군 삼국유사면",
	30	+ },
	31	+ ];
	32	+
21	33	const data = [
22	34	{
23	35	id: 1,
24	36	title: "교환/수리 리스트",
	37	+ description: (
	38	+ <Table
	39	+ className={"agency-visitlist"}
	40	+ head={thead}
	41	+ contents={content}
	42	+ contentKey={key}
	43	+ />
	44	+ ),
25	45	},
26	46	{
27	47	id: 2,
28	48	title: "장비 추가 리스트",
	49	+ description: (
	50	+ <Table
	51	+ className={"agency-visitlist"}
	52	+ head={thead}
	53	+ contents={content}
	54	+ contentKey={key}
	55	+ />
	56	+ ),
29	57	},
30	58	]
31	59	const [index, setIndex] = React.useState(1);
32		- const thead = ["No", "이름", "대상자등록번호", "생년월일", "연락처", "주소", "미복약 누적 횟수",];
33		- const key = ["No", "name", "number", "birth", "phone", "address", "average"];
34		- const content = [
35		- {
36		- No: 1,
37		- name: "김복남",
38		- number: "00000001",
39		- birth: "1948.11.15",
40		- phone: "010-1234-5678",
41		- address: "경상북도 군위군 삼국유사면",
42		- average: "6회",
43		- },
44		- ];
45		-
	60	+
46	61
47	62	return (
48	63	<main>
49		- <div className="flex-start margin-bottom2"><img src={medicinebox} alt="" /><TitleSmall title={"대상자 현황"} explanation={"2023.02.28 기준"} /></div>
	64	+ <div className="flex-start margin-bottom2"><img src={tool} alt="" /><TitleSmall title={"장비 및 업체 현황"} explanation={"2023.02.28 기준"} /></div>
50	65	<div className="main-grid-agency margin-bottom2">
51	66	<ul className="content-box statistics-agency" background="#f7acba">
52	67	<li className="flex-start">
53	68	<img src={box} alt="" />
54	69	<div className="text">
55		- <p>나의 관리 대상자</p>
56		- <p>40</p>
	70	+ <p>전체 장비 대여 수</p>
	71	+ <p className="equipcount">40</p>
57	72	</div>
58	73	</li>
59	74	</ul>
60	75	<ul className="content-box statistics-agency" background="#8ef3d1">
61	76	<li className="flex-start">
62		- <img src={medicineAgency} alt="" />
	77	+ <img src={error} alt="" />
63	78	<div className="text">
64		- <p>미복약 위험 대상자</p>
65		- <p>40</p>
	79	+ <p>계약 업체 수</p>
	80	+ <p className="equipcount">40</p>
66	81	</div>
67	82	</li>
68	83	</ul>
69	84	<ul className="content-box statistics-agency" background="#ebe7b9" >
70	85	<li className="flex-start">
71		- <img src={temperatureAgency} alt="" />
	86	+ <img src={exchange} alt="" />
72	87	<div className="text">
73		- <p>댁내 온도 위험 대상자</p>
74		- <p>40</p>
	88	+ <p>교환/수리 요청 수</p>
	89	+ <p className="equipcount">40</p>
75	90	</div>
76	91	</li>
77	92	</ul>
78	93	<ul className="content-box statistics-agency" background="#5f9af3">
79	94	<li className="flex-start">
80		- <img src={batteryAgency} alt="" />
	95	+ <img src={error} alt="" />
81	96	<div className="text">
82		- <p>배터리 부족 대상자 </p>
83		- <p>40</p>
	97	+ <p>추가 요청 장비 수 </p>
	98	+ <p className="equipcount">40</p>
84	99	</div>
85	100	</li>
86	101	</ul>
87	102	</div>
88		- <div className="flex-start margin-bottom2"><img src={medicinebox} alt="" /><TitleSmall title={"장비 관리 리스트"} /></div>
	103	+ <div className="flex-start margin-bottom2"><img src={tool} alt="" /><TitleSmall title={"장비 관리 리스트"} /></div>
89	104	<div className="main-grid-agency">
90	105	<div className="content-box combine-left-government3">
91	106	<ul className="tab-menu-agency flex-start">
...	...	@@ -99,10 +114,10 @@
99	114	</li>
100	115	))}
101	116	</ul>
102		- <div className="content-wrap equipmentlist">
103		- <div className="margin-bottom2">
	117	+ <div>
	118	+ <div className="margin-bottom2">
104	119	<Calendar_agency />
105		- </div>
	120	+ </div>
106	121	<ul className="tab-content">
107	122	{data
108	123	.filter((item) => index === item.id)

...	...	@@ -1,5 +1,5 @@
1	1	import React from "react";
2		-import Table from "../../component/Table.jsx";
	2	+import TableRisk from "../../component/TableRisk.jsx";
3	3	import Button from "../../component/Button.jsx";
4	4	import SubTitle from "../../component/SubTitle.jsx";
5	5	import ContentTitle from "../../component/ContentTitle.jsx";
...	...	@@ -82,7 +82,7 @@
82	82	id: 1,
83	83	title: "온도 관리",
84	84	description: (
85		- <Table
	85	+ <TableRisk
86	86	className={"risk-table"}
87	87	head={thead1}
88	88	contents={content1}
...	...	@@ -94,7 +94,7 @@
94	94	id: 2,
95	95	title: "복약 관리",
96	96	description: (
97		- <Table
	97	+ <TableRisk
98	98	className={"risk-table"}
99	99	head={thead2}
100	100	contents={content2}
...	...	@@ -106,7 +106,7 @@
106	106	id: 3,
107	107	title: "배터리 관리",
108	108	description: (
109		- <Table
	109	+ <TableRisk
110	110	className={"risk-table"}
111	111	head={thead3}
112	112	contents={content3}
...	...	@@ -120,7 +120,7 @@
120	120	<main>
121	121	<ContentTitle contentTitle={"위험 기준 관리 "} />
122	122	<div className="tab-container">
123		- <ul className="tab-menu">
	123	+ <ul className="tab-menu flex-start">
124	124	{data.map((item) => (
125	125	<li
126	126	key={item.id}

Delete comment