Commit @962079ed4ed2055498c5a44f23dfdcee66bce310

최정임 2023-03-08

230308 최정임 반응형 수정

@962079ed4ed2055498c5a44f23dfdcee66bce310

0f8fe44

962079e

client/resources/css/common.css

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

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


 /* layout 공통 */
 textarea{border: 1px solid #d8d3c7; border-radius: 5px;}
 em{font-style: normal;}
-main img{margin-right: 1rem; max-width: 100%;
+main img{margin-right: 1rem; 
   width: unset;}
 /* grid */
 

 .margin-bottom2 {
   margin-bottom: 2rem;
 }
+.margin-top {
+  margin-top: 2rem;
+}
 
 .margin-bottom5 {
   margin-bottom: 5rem;

0f8fe44

962079e

client/resources/css/main.css

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

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


 }
 
 /* 시행기관 장비관리 리스트 */
-.react-calendar__month-view__days__day--neighboringMonth{display: none;}
 .visitlist {
   height: 55vh;
 }

 .battery-wrap {
   height: 10rem;
 }
-
+.battery-mobile{display: none;}
+.battery-mobile .battery-img img{position: absolute;}
 .battery-img {
   position: relative;
-  padding: 1.5rem 0 1.5rem 3rem;
+  margin-top: 1rem;
 }
 
 .battery-img img {

 }
 
 /* 노인 상세 정보 */
+.senior-detail{border-top: 2px solid #cccccc; border-bottom: 1px solid #cccccc;}
+.senior-detail tr{height: 4rem; border-bottom: 1px solid #f4f4f2;}
 .senior-detail th {
   text-align: left;
   width: 15%;
-  border: 6px solid #ffffff;
-  background: #f0ebe3;
+  background: #f7f7f7;
   padding-left: 2rem;
   color: rgb(115, 60, 29);
   font-size: 1.6rem;

0f8fe44

962079e

client/resources/css/reset.css

--- client/resources/css/reset.css

+++ client/resources/css/reset.css


-/* @font-face {
-  font-family: "KoPubDotumLight";
-  src: url(../files/font/KoPubDotumLight_0.ttf);
-} */
+@font-face {
+  font-family: "KoPubDotumBold";
+  src: url(../files/font/KoPubDotumBold_0.ttf);
+}
 
 :root{
   --font-KoPubDotumLight:"KoPubDotumLight"

 table {
   width: 100%;
   border-collapse: collapse;
-  font-family:"AuctionGothic_Medium";
-  border: 1px solid #d8d3c7;
 }
 thead{
   font-weight: bold;

   font-size: 1.6rem;
   text-align: center;
 }
-tr{cursor: pointer;}
+tr{cursor: pointer; }
 
 button {
   cursor: pointer;

0f8fe44

962079e

client/resources/css/responsive.css

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

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


 /* 테블릿 가로 (해상도 768px ~ 1023px)*/
 @media all and (min-width:768px) and (max-width:1023px) {
 
-
-  /* 메인 */
-  .content-box:nth-child(3)>div {
-    display: flex;
-  }
-
-  .temp p {
-    font-size: 2rem;
-  }
-
-  .main-battery-title {
-    font-size: 1.4rem;
-    justify-content: flex-start;
-    padding-right: 1rem;
-  }
-
-  .battery::after {
-    content: " 남았습니다.";
-    font-size: 1.4rem;
-    margin-left: 0;
-  }
-
-  .battery p {
-    font-size: 2rem;
-    padding-left: 0;
-    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;
-  }
-
-  .senior-detail th {
-    display: block;
-    width: 34%;
-  }
-
-  .senior-detail td {
-    padding: 0;
-  }
-
-  .senior-detail td span {
-    text-align: center;
-  }
-
-
-  /* 검색창 */
-  .mobile-area-wrap {
-    display: block;
-    margin-top: 1rem;
-  }
-
-  .mobile-area-wrap div {
-    width: 100%;
-    margin-top: 1rem;
-  }
-
-  .mobile-area-wrap div label {
-    width: 30%;
-    font-size: 1.6rem;
-  }
-
-  .mobile-area-wrap div select {
-    width: 70%;
-  }
-
-  .area-wrap {
-    display: none;
-  }
-
-  .search-area {
-    padding: 1rem;
-  }
-
-  .detail-search table tr,
-  .detail-search table th,
-  .detail-search table td {
-    display: block;
-  }
-
-  .detail-search table th {
-    width: 100%;
-  }
-
-  .detail-search table td::before {
-    display: none;
-  }
-
-  .detail-search table td {
-    padding: 0;
-    border: 0;
-  }
-
-  .detail-search table tr {
-    border: 0;
-  }
-
-  .detail-search tbody tr:nth-of-type(3) td {
-    width: 50%;
-    display: flex;
-  }
-
-  /* 복약 수정 페이지 */
-  .modal-main table th {
-    width: 100%;
-    display: block;
-  }
-
-  .modal-main table td {
-    padding: 0.5rem 0;
-  }
-
-  .medicine-revise tr {
-    border: 0;
-  }
-
-  .medicine-revise tr:nth-child(3)>td div,
-  .medicine-revise tr:nth-child(4)>td div,
-  .medicine-revise tr:nth-child(5)>td div {
-    width: 50%;
-  }
-
-  .medicine-revise tr:nth-child(3)>td div input,
-  .medicine-revise tr:nth-child(4)>td div input,
-  .medicine-revise tr:nth-child(5)>td div input {
-    width: 20%;
-  }
-
-  .medicine-revise tr:nth-child(3)>td div label,
-  .medicine-revise tr:nth-child(4)>td div label,
-  .medicine-revise tr:nth-child(5)>td div label {
-    width: 50%;
-  }
-
-
-
-
 }
 
 /* 모바일 가로, 테블릿 세로 (해상도 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;
-  }
-
-  .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 tbody td label {}
-
-  .authority-table-mobile th {
-    width: 50%;
-  }
-
-  /* 사용자 관리 */
-
-  .tab-menu {
-    display: none;
-  }
-
-  /* 공통 */
-  /* 보호자 메인 그리드 */
-  .pc {
-    display: none;
-  }
-
-  .mobile {
-    display: block;
-  }
-
-  .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;
-  }
-
-  .mobile .main-grid-guardian .content-box:nth-child(7)>div {
-    justify-content: flex-start;
-  }
-
-  .mobile .main-grid-guardian .combine-right-government,
-  .mobile .main-grid-guardian .combine-left {
-    grid-column: 1;
-  }
-
-  .mobile .main-grid-guardian .combine-bottom-government {
-    grid-column: 0;
-  }
-
-  /* button */
-
-  .btn-large {
-    font-size: 1.4rem;
-    width: 20%;
-  }
-
-
-
-  /* 로그인 */
-  .login-wrap h1 {
-    font-size: 1.8rem;
-    line-height: 1rem;
-  }
-
-  .login-wrap h3 {
-    margin: 20% 0 5% 0;
-    font-size: 2rem;
-    text-align: center;
-  }
-
-  .login-form .login-inner .content {
-    width: 80%;
-    margin: 1rem auto;
-  }
-
-  .container {
-    width: 100%;
-    margin: 0;
-    padding: 2rem;
-  }
-
-  .container .btn-wrap {
-    margin-top: 5rem;
-  }
-
-  .container button {
-    width: 30%;
-  }
-
-  /* 검색창 */
-  .mobile-area-wrap {
-    display: block;
-    margin-top: 1rem;
-  }
-
-  .mobile-area-wrap div {
-    width: 100%;
-    margin-top: 1rem;
-  }
-
-  .mobile-area-wrap div label {
-    width: 30%;
-    font-size: 1.6rem;
-  }
-
-  .mobile-area-wrap div select {
-    width: 70%;
-  }
-
-  .area-wrap {
-    display: none;
-  }
-
-  .search-area {
-    padding: 1rem;
-  }
-
-  .detail-search table tr,
-  .detail-search table th,
-  .detail-search table td {
-    display: block;
-  }
-
-  .detail-search table th {
-    width: 100%;
-  }
-
-  .detail-search table td::before {
-    display: none;
-  }
-
-  .detail-search table td {
-    padding: 0;
-    border: 0;
-  }
-
-  .detail-search table tr {
-    border: 0;
-  }
-
-  .detail-search tbody tr:nth-of-type(3) td {
-    width: 50%;
-    display: flex;
-  }
-
-  /* 시니어 정보 상세 조회 */
-  .senior-detail {
-    border: 0;
-  }
-
-  .senior-detail th {
-    display: block;
-    width: 34%;
-  }
-
-  .senior-detail td span {
-    text-align: center;
-  }
-
-
-  /* 시니어 등록창 */
-  .senior-insert th {
-    font-size: 1.4rem;
-  }
-
-
-  /* 복약 수정 페이지 */
-  .medicine-revise tr {
-    border: 0;
-  }
-
-  .medicine-revise tr:nth-child(3)>td div,
-  .medicine-revise tr:nth-child(4)>td div,
-  .medicine-revise tr:nth-child(5)>td div {
-    width: 50%;
-  }
-
-  .medicine-revise tr:nth-child(3)>td div input,
-  .medicine-revise tr:nth-child(4)>td div input,
-  .medicine-revise tr:nth-child(5)>td div input {
-    width: 20%;
-  }
-
-  .medicine-revise tr:nth-child(3)>td div label,
-  .medicine-revise tr:nth-child(4)>td div label,
-  .medicine-revise tr:nth-child(5)>td div label {
-    width: 50%;
-  }
-
-  /* 복약 상세페이지 */
-  .medicine-detail-graph {
-    display: block;
-  }
-
-  /* 복약 수정 페이지 */
-  .modal-main table th {
-    width: 100%;
-    display: block;
-  }
-
-  .modal-main table td {
-    padding: 0.5rem 0;
-  }
-
-  /* 최근 일주일 댁내 온도(모달창) */
-  .temperature-modal td:nth-of-type(1) {
-    font-weight: 900;
-    padding: 1rem;
-  }
-
-  .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-revise th {
-    width: 40%;
-    font-size: 1.4rem;
-  }
-
-  .visit-revise tr:nth-child(3) td {
-    display: block;
-  }
-
-  .visit-revise tr:nth-child(3) td>div {
-    display: flex;
-    margin: 0.5rem 0;
-  }
-
-  /* 방문 등록 */
-  .user-list {
-    display: none;
-  }
-
-  .insert {
-    display: block;
-  }
-
-  .insert table tr:nth-child(6) td {
-    display: block;
-  }
-
-  .insert tr:nth-child(6) td>div {
-    display: flex;
-    margin: 0.5rem 0;
-  }
-
-  .insert tr:nth-child(6) td>div input {
-    width: 50%;
-  }
-
-  /* 장비조회 */
-
-  /* 장비 상세 조회 */
-
-  /* 장비등록 */
-
-  .equipment-insert tr:nth-child(5) td {
-    width: 28%;
-  }
-
-  .equipment-insert tr:nth-child(6) td {
-    width: 100%;
-  }
-
-  .equipment-insert tr:nth-child(5) td select {
-    display: flex;
-    justify-content: flex-start;
-    width: 100%;
-  }
-
-  .equipment-insert tr:nth-child(5) td input {
-    display: table;
-    width: 90%;
-  }
-
-  .equipment-insert tr:nth-child(6) td select {
-    display: flex;
-    justify-content: flex-start;
-    width: 100%;
-  }
-
-  /* 내정보수정 */
-  .join-inner {
-    width: 100%;
-  }
-
 }
 
 /* 모바일 세로 (해상도 ~ 479px)*/

   .ittLqr{font-size: 1.3rem !important;}
   /* 공통 */
   #layout{display: block;}
-  #pages{padding: 1rem; padding-top: 12rem; background-color: #ffffff;}
+  #pages{padding: 0; padding-top: 8rem; background-color: #ffffff;}
+  main{padding: 3rem 1rem 2rem 1rem;}
   header {
     padding: 1rem;
     position: fixed;

     transition: 0.5s;
   }
   .bottom-section{padding: 0.9rem ; bottom: 6rem;}
-  .content-wrap{padding: 3rem 1rem 0 1rem; }
+  .content-wrap{padding: 1rem 1rem 0 1rem; }
   th,td,tr{display: block;}
   .header-info-id,#fullDate, #temp,.cCoJhO{display: none;}
   /* 에이젼시 메인 */
   .main-grid-agency{display: block;}
-  .main-grid-agency .agency-visitlist{margin-top: 16rem;}
+  .main-grid-agency .agency-visitlist{margin-top: 22rem;}
   .agency-calendar .react-calendar__month-view__weekdays{display: flex !important;}
   .agency-calendar .react-calendar__month-view__days__day{flex: 0 0 12.5% !important;}
   .agency-calendar .react-calendar__month-view__days{flex-wrap: wrap !important;}

   .main-grid-government .content-box{margin-bottom: 1rem;}
   .statistics-govern{margin-bottom: 1rem;}
   /* 보호자 메인 */
-  .main-grid-guardian{display: block;}
+  .main-guardian img{width: 3rem;}
+  .main-grid-guardian{display: block; padding: 0 1rem;}
+  .main-grid-guardian #fullDate{display: block;}
   .guardian-img{width: 2rem;}
- 
+  .battery{display: none;}
+  .battery-mobile{display: block;}
+  .statistics-guardian li{padding: 1rem; }
+  .smallbox{box-shadow: 1px 1px 9px 3px rgb(0 0 0 / 11%);}
+  .guardian-medicine{height: 28vh;}
+  .guardian-medicine ul li img{left: -23px;}
+  .medicine-title{
+    right: -9px;
+    top: 96px;
+    width: 3rem;}
+  .react-calendar__month-view__days button{padding: 1rem;}
+  .pink{background-color: #fdeeea;}
   /* 보호자 그래프보기 */
   #chartdiv1{height: 26vh !important;}
   #chartdiv{height: 26vh !important;}

   }
   .statistics-grid .statistics-guardian li{padding: 0;}
   .statistics-grid .statistics-guardian li p:nth-child(1){margin-right: 1rem;}
-  .statistics-grid .statistics-guardian li:nth-child(1) p:nth-child(2){width: 20%;}
+  .statistics-grid .statistics-guardian li:nth-child(1) p:nth-child(2){width: 100%;}
+  .statistics-grid .statistics-guardian li:nth-child(1) p:nth-child(3){display: none;}
   /* Q&A */
   .question-select select{width: 22%;}
   /* 권한관리 */

962079e

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

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

Binary file is not shown

962079e

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

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

Binary file is not shown

962079e

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

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

Binary file is not shown

962079e

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

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

Binary file is not shown

962079e

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

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

Binary file is not shown

962079e

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

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

Binary file is not shown

0f8fe44

962079e

client/views/component/Calendar.jsx

--- client/views/component/Calendar.jsx

+++ client/views/component/Calendar.jsx


   const [value, setValue] = useState(new Date());
   const mark = ["12-02-2023", "21-02-2023", "05-02-2023", "02-02-2023"];
   return (
-    <div className="w-full h-full p-10">
-      <Calendar
-        className="w-96 h-full rounded-xl bg-violet-300"
+   <>
+   <Calendar
         onChange={setValue}
         value={value}
         tileClassName={({ date, view }) => {
-          // if (mark.find((x) => x === moment(date).format("DD-MM-YYYY"))) {
-          //   return "highlight";
-          // }
-          let day = date.getDate()
-          let month = date.getMonth()+1
-          if(date.getMonth()<10){
-            month = '0'+day
+          if (mark.find((x) => x === moment(date).format("DD-MM-YYYY"))) {
+            return "highlight";
           }
-          const realDate =day+'-'+month+'-'+date.getFullYear()
-          if(mark.find(val=> val === realDate)){
-            return 'highlight'
-          }
-
         }}
       />
-    </div>
+   </>
   );
 }
-

0f8fe44

962079e

client/views/component/SubTitle.jsx

--- client/views/component/SubTitle.jsx

+++ client/views/component/SubTitle.jsx


   color: #733c1d;
 `;
 const Explanation = styled.p`
-  font-size: 1.5rem;
+  font-size: 1.8rem;
   padding: 0.5rem;
+  font-weight: bold;
   color: ${(color) => color ? color : "#733c1d"};
   &::before {
     content: "";
-    border-left: #f25430 2px solid;
+    border-left: #f25430 5px solid;
     padding-right: 1rem;
   } 
 `;

0f8fe44

962079e

client/views/pages/main/Main_guardian.jsx

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

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


 import lunchoff from '../../../resources/files/images/lunchoff.png';
 import dinneron from '../../../resources/files/images/dinneron.png';
 import dinneroff from '../../../resources/files/images/dinneroff.png';
+import percent_m_0 from '../../../resources/files/images/percent_m_0.png';
+import percent_m_20 from '../../../resources/files/images/percent_m_20.png';
+import percent_m_40 from '../../../resources/files/images/percent_m_40.png';
+import percent_m_60 from '../../../resources/files/images/percent_m_60.png';
+import percent_m_80 from '../../../resources/files/images/percent_m_80.png';
+import percent_m_100 from '../../../resources/files/images/percent_m_100.png';
 
 export default function Main_guardian() {
   const tableHead1 = ["", "", "", "", "", ""];

 
   return (
     <>
-      <main>
+      <main className="pink">
         <div className="flex-start main-guardian"><img src={Senior} alt="" /><Title title={"김복남 어르신"} explanation={"방문, 복약, 온도, 배터리 현황을 확인하세요."} /></div>
         <div className="main-grid-guardian">
           <div className="combine-left combine-all-government battery-wrap ">
-            <div className="battery flex-start"><img className="guardian-img" src={battery} alt="" /><p>현재 스마트 약상자의 배터리가 <em className="red">40</em>% 입니다.</p><p className="red">※충전이 필요합니다.</p></div>
-            <div className="battery-img">
-              {/* 0%일때 */}
-              <img src={zeropercent} alt="" />
-              {/* 0~20%일때 */}
-              <img src={twentypercent} alt="" />
-              {/* 20~40%일때 */}
-              <img src={fortypercent} alt="" className="show" />
-              {/* 40~60%일때 */}
-              <img src={sixtytypercent} alt="" />
-              {/* 60~80% 일때 */}
-              <img src={eightytypercent} alt="" />
-              {/* 80~100%일때 */}
-              <img src={pullpercent} alt="" />
+            <div className="battery">
+             <div className="flex-start"> 
+                <img className="guardian-img" src={battery} alt="" />
+                <div className="pc flex-start"><p>현재 스마트 약상자의 배터리가 <em className="red">40</em>% 입니다.</p><p className="red">※충전이 필요합니다.</p></div >
+             </div>
+              <div className="battery-img">
+                {/* 0%일때 */}
+                <img src={zeropercent} alt="" />
+                {/* 0~20%일때 */}
+                <img src={twentypercent} alt="" />
+                {/* 20~40%일때 */}
+                <img src={fortypercent} alt="" className="show" />
+                {/* 40~60%일때 */}
+                <img src={sixtytypercent} alt="" />
+                {/* 60~80% 일때 */}
+                <img src={eightytypercent} alt="" />
+                {/* 80~100%일때 */}
+                <img src={pullpercent} alt="" />
+              </div>
+            </div>
+            <div className="battery-mobile">
+              <div className="flex-start "><img className="guardian-img" src={battery} alt="" /><TitleSmall title={"배터리"} /><TitleSmall title={"40%"} /><p className="red">※충전이 필요합니다.</p></div >
+              <div className="battery-img">
+                <img src={percent_m_0} alt="" />
+                <img src={percent_m_20} alt="" />
+                <img src={percent_m_40} alt="" className="show" />
+                <img src={percent_m_60} alt="" />
+                <img src={percent_m_80} alt="" />
+                <img src={percent_m_100} alt="" />
+              </div>              
             </div>
 
           </div>
           <div className="statistics-guardian combine-right3">
-            <div className="flex-start margin-bottom2"><img className="guardian-img" src={medicine} alt="" /><TitleSmall title={"복약체크"} explanation={"약을 잘 복용하고 계신지 체크해주세요."} /></div>
+            <div className="flex-start margin-bottom2 margin-top"><img className="guardian-img" src={medicine} alt="" /><TitleSmall title={"복약체크"} explanation={"약을 잘 복용하고 계신지 체크해주세요."} /></div>
             <ul className="">
-              <li className="guardian-medicine">
+              <li className="guardian-medicine smallbox">
                 <DateDay />
                 <ul className="flex">
                   <li>

             </ul>
           </div>
           <div className=" statistics-guardian combine-right3">
-            <div className="flex-start margin-bottom2"><img className="guardian-img" src={temperature} alt="" /><TitleSmall title={"온도체크"} explanation={"댁내 온도가 적절한지 체크해보세요."} /></div>
+            <div className="flex-start margin-bottom2 margin-top"><img className="guardian-img" src={temperature} alt="" /><TitleSmall title={"온도체크"} explanation={"댁내 온도가 적절한지 체크해보세요."} /></div>
             <ul >
-              <li>
+              <li className="smallbox">
                 <DateMonth />
                 <Chart6 />
               </li>
             </ul>
           </div>
           <div className=" statistics-guardian combine-left2 combine-middle-government">
-            <div className="flex-start margin-bottom2"><img className="guardian-img" src={calendarBig} alt="" /><TitleSmall title={"방문체크"} /></div>
+            <div className="flex-start margin-bottom2 margin-top"><img className="guardian-img" src={calendarBig} alt="" /><TitleSmall title={"방문체크"} /></div>
             <ul >
-              <li>
+              <li className="smallbox">
                 <Calendar />
               </li>
             </ul>
-          </div> 
+          </div>
         </div>
       </main>
     </>

0f8fe44

962079e

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 Button from "../../component/Button.jsx";
+import SubTitle from "../../component/SubTitle.jsx";
 import { useNavigate } from "react-router";
 import ContentTitle from "../../component/ContentTitle.jsx";
 import PersonIcon from '@mui/icons-material/Person';

   return (
     <main>
     <div className="content-wrap row">
-    <ContentTitle contentTitle={"대상자 상세 프로필"}/>
+    <SubTitle explanation={"대상자 상세 프로필"} className="margin-bottom" />
       <div>
         <table className="margin-bottom senior-detail">
           <tbody>

         <div className="btn-wrap flex-center">
           <Button
             className={"btn-large gray-btn"}
-            btnName={"이전"}
-            onClick={() => {
-              navigate("/UserAuthoriySelect_agency");
-            }}
-          />
-          <Button
-            className={"btn-large green-btn"}
             btnName={"수정"}
             onClick={() => {
               navigate(`/SeniorEdit/${seniorId}`);
             }}
           />
+          <Button
+            className={"btn-large green-btn"}
+            btnName={"삭제"}
+            
+          />
         </div>
       </div>
     </div>

0f8fe44

962079e

client/views/pages/user_management/UserAuthoriySelect.jsx

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

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


           </div>
         </div>
       </Modal>
-      <ContentTitle contentTitle={"사용자 관리"} explanation={"관리기관 리스트 및 시행기관 사용자 리스트를 확인할 수 있습니다."} />
+      <ContentTitle  explanation={"사용자 관리"} />
       <div className="content-wrap">
         
         <div

           <div className="left" style={{ height: "100%", }}>
             <div style={{ height: "100%" }}>
               <SubTitle
-                subtitle={"관리기관 리스트"}
-                explanation={"시스템 로그인의 사용자를 관리합니다."}
+                explanation={"관리기관 리스트"}
                 className="margin-bottom"
               />
                 <Category />

           <div className="right" style={{ height: "100%", }}>
             <div style={{ height: "100%" }}>
               <SubTitle
-                subtitle={`${agencyName} 사용자 리스트`}
-                explanation={"선택된 기관의 사용자 리스트 입니다."}
+                explanation={`${agencyName} 사용자 리스트`}
                 className="margin-bottom"
               />
               <div className="tab-container">

Add a comment

Open 0
Closed 0

List

...	...	@@ -2,7 +2,7 @@
2	2	/* layout 공통 */
3	3	textarea{border: 1px solid #d8d3c7; border-radius: 5px;}
4	4	em{font-style: normal;}
5		-main img{margin-right: 1rem; max-width: 100%;
	5	+main img{margin-right: 1rem;
6	6	width: unset;}
7	7	/* grid */
8	8
...	...	@@ -381,6 +381,9 @@
381	381	.margin-bottom2 {
382	382	margin-bottom: 2rem;
383	383	}
	384	+.margin-top {
	385	+ margin-top: 2rem;
	386	+}
384	387
385	388	.margin-bottom5 {
386	389	margin-bottom: 5rem;

...	...	@@ -21,7 +21,6 @@
21	21	}
22	22
23	23	/* 시행기관 장비관리 리스트 */
24		-.react-calendar__month-view__days__day--neighboringMonth{display: none;}
25	24	.visitlist {
26	25	height: 55vh;
27	26	}
...	...	@@ -418,10 +417,11 @@
418	417	.battery-wrap {
419	418	height: 10rem;
420	419	}
421		-
	420	+.battery-mobile{display: none;}
	421	+.battery-mobile .battery-img img{position: absolute;}
422	422	.battery-img {
423	423	position: relative;
424		- padding: 1.5rem 0 1.5rem 3rem;
	424	+ margin-top: 1rem;
425	425	}
426	426
427	427	.battery-img img {
...	...	@@ -885,11 +885,12 @@
885	885	}
886	886
887	887	/* 노인 상세 정보 */
	888	+.senior-detail{border-top: 2px solid #cccccc; border-bottom: 1px solid #cccccc;}
	889	+.senior-detail tr{height: 4rem; border-bottom: 1px solid #f4f4f2;}
888	890	.senior-detail th {
889	891	text-align: left;
890	892	width: 15%;
891		- border: 6px solid #ffffff;
892		- background: #f0ebe3;
	893	+ background: #f7f7f7;
893	894	padding-left: 2rem;
894	895	color: rgb(115, 60, 29);
895	896	font-size: 1.6rem;

...	...	@@ -1,5 +1,6 @@
1	1	import React from "react";
2	2	import Button from "../../component/Button.jsx";
	3	+import SubTitle from "../../component/SubTitle.jsx";
3	4	import { useNavigate } from "react-router";
4	5	import ContentTitle from "../../component/ContentTitle.jsx";
5	6	import PersonIcon from '@mui/icons-material/Person';
...	...	@@ -39,7 +40,7 @@
39	40	return (
40	41	<main>
41	42	<div className="content-wrap row">
42		- <ContentTitle contentTitle={"대상자 상세 프로필"}/>
	43	+ <SubTitle explanation={"대상자 상세 프로필"} className="margin-bottom" />
43	44	<div>
44	45	<table className="margin-bottom senior-detail">
45	46	<tbody>
...	...	@@ -101,18 +102,16 @@
101	102	<div className="btn-wrap flex-center">
102	103	<Button
103	104	className={"btn-large gray-btn"}
104		- btnName={"이전"}
105		- onClick={() => {
106		- navigate("/UserAuthoriySelect_agency");
107		- }}
108		- />
109		- <Button
110		- className={"btn-large green-btn"}
111	105	btnName={"수정"}
112	106	onClick={() => {
113	107	navigate(`/SeniorEdit/${seniorId}`);
114	108	}}
115	109	/>
	110	+ <Button
	111	+ className={"btn-large green-btn"}
	112	+ btnName={"삭제"}
	113	+
	114	+ />
116	115	</div>
117	116	</div>
118	117	</div>

...	...	@@ -300,7 +300,7 @@
300	300	</div>
301	301	</div>
302	302	</Modal>
303		- <ContentTitle contentTitle={"사용자 관리"} explanation={"관리기관 리스트 및 시행기관 사용자 리스트를 확인할 수 있습니다."} />
	303	+ <ContentTitle explanation={"사용자 관리"} />
304	304	<div className="content-wrap">
305	305
306	306	<div
...	...	@@ -310,8 +310,7 @@
310	310	<div className="left" style={{ height: "100%", }}>
311	311	<div style={{ height: "100%" }}>
312	312	<SubTitle
313		- subtitle={"관리기관 리스트"}
314		- explanation={"시스템 로그인의 사용자를 관리합니다."}
	313	+ explanation={"관리기관 리스트"}
315	314	className="margin-bottom"
316	315	/>
317	316	<Category />
...	...	@@ -320,8 +319,7 @@
320	319	<div className="right" style={{ height: "100%", }}>
321	320	<div style={{ height: "100%" }}>
322	321	<SubTitle
323		- subtitle={`${agencyName} 사용자 리스트`}
324		- explanation={"선택된 기관의 사용자 리스트 입니다."}
	322	+ explanation={`${agencyName} 사용자 리스트`}
325	323	className="margin-bottom"
326	324	/>
327	325	<div className="tab-container">

...	...	@@ -1,7 +1,7 @@
1		-/* @font-face {
2		- font-family: "KoPubDotumLight";
3		- src: url(../files/font/KoPubDotumLight_0.ttf);
4		-} */
	1	+@font-face {
	2	+ font-family: "KoPubDotumBold";
	3	+ src: url(../files/font/KoPubDotumBold_0.ttf);
	4	+}
5	5
6	6	:root{
7	7	--font-KoPubDotumLight:"KoPubDotumLight"
...	...	@@ -44,8 +44,6 @@
44	44	table {
45	45	width: 100%;
46	46	border-collapse: collapse;
47		- font-family:"AuctionGothic_Medium";
48		- border: 1px solid #d8d3c7;
49	47	}
50	48	thead{
51	49	font-weight: bold;
...	...	@@ -62,7 +60,7 @@
62	60	font-size: 1.6rem;
63	61	text-align: center;
64	62	}
65		-tr{cursor: pointer;}
	63	+tr{cursor: pointer; }
66	64
67	65	button {
68	66	cursor: pointer;

...	...	@@ -3,559 +3,10 @@
3	3	/* 테블릿 가로 (해상도 768px ~ 1023px)*/
4	4	@media all and (min-width:768px) and (max-width:1023px) {
5	5
6		-
7		- /* 메인 */
8		- .content-box:nth-child(3)>div {
9		- display: flex;
10		- }
11		-
12		- .temp p {
13		- font-size: 2rem;
14		- }
15		-
16		- .main-battery-title {
17		- font-size: 1.4rem;
18		- justify-content: flex-start;
19		- padding-right: 1rem;
20		- }
21		-
22		- .battery::after {
23		- content: " 남았습니다.";
24		- font-size: 1.4rem;
25		- margin-left: 0;
26		- }
27		-
28		- .battery p {
29		- font-size: 2rem;
30		- padding-left: 0;
31		- padding-right: 1rem;
32		- }
33		-
34		- .menuicon {
35		- display: block;
36		- }
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;}
63		- /* 시니어 정보 상세 조회 */
64		- .senior-detail {
65		- border: 0;
66		- }
67		-
68		- .senior-detail th {
69		- display: block;
70		- width: 34%;
71		- }
72		-
73		- .senior-detail td {
74		- padding: 0;
75		- }
76		-
77		- .senior-detail td span {
78		- text-align: center;
79		- }
80		-
81		-
82		- /* 검색창 */
83		- .mobile-area-wrap {
84		- display: block;
85		- margin-top: 1rem;
86		- }
87		-
88		- .mobile-area-wrap div {
89		- width: 100%;
90		- margin-top: 1rem;
91		- }
92		-
93		- .mobile-area-wrap div label {
94		- width: 30%;
95		- font-size: 1.6rem;
96		- }
97		-
98		- .mobile-area-wrap div select {
99		- width: 70%;
100		- }
101		-
102		- .area-wrap {
103		- display: none;
104		- }
105		-
106		- .search-area {
107		- padding: 1rem;
108		- }
109		-
110		- .detail-search table tr,
111		- .detail-search table th,
112		- .detail-search table td {
113		- display: block;
114		- }
115		-
116		- .detail-search table th {
117		- width: 100%;
118		- }
119		-
120		- .detail-search table td::before {
121		- display: none;
122		- }
123		-
124		- .detail-search table td {
125		- padding: 0;
126		- border: 0;
127		- }
128		-
129		- .detail-search table tr {
130		- border: 0;
131		- }
132		-
133		- .detail-search tbody tr:nth-of-type(3) td {
134		- width: 50%;
135		- display: flex;
136		- }
137		-
138		- /* 복약 수정 페이지 */
139		- .modal-main table th {
140		- width: 100%;
141		- display: block;
142		- }
143		-
144		- .modal-main table td {
145		- padding: 0.5rem 0;
146		- }
147		-
148		- .medicine-revise tr {
149		- border: 0;
150		- }
151		-
152		- .medicine-revise tr:nth-child(3)>td div,
153		- .medicine-revise tr:nth-child(4)>td div,
154		- .medicine-revise tr:nth-child(5)>td div {
155		- width: 50%;
156		- }
157		-
158		- .medicine-revise tr:nth-child(3)>td div input,
159		- .medicine-revise tr:nth-child(4)>td div input,
160		- .medicine-revise tr:nth-child(5)>td div input {
161		- width: 20%;
162		- }
163		-
164		- .medicine-revise tr:nth-child(3)>td div label,
165		- .medicine-revise tr:nth-child(4)>td div label,
166		- .medicine-revise tr:nth-child(5)>td div label {
167		- width: 50%;
168		- }
169		-
170		-
171		-
172		-
173	6	}
174	7
175	8	/* 모바일 가로, 테블릿 세로 (해상도 480px ~ 767px)*/
176	9	@media all and (min-width:480px) and (max-width:767px) {
177		- .menuicon {
178		- display: block;
179		- }
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;}
206		- /* 권한관리 */
207		- .authority-table-pc {
208		- display: none;
209		- }
210		-
211		- .authority-table-mobile thead tr:nth-child(1) {
212		- display: flex;
213		- }
214		-
215		- .authority-table-mobile thead tr:nth-child(1)>div {
216		- font-size: 1.6rem;
217		- width: 100%;
218		- }
219		-
220		- .authority-table-mobile select {
221		- margin: 1rem 0;
222		- }
223		-
224		- .authority-table-mobile {
225		- display: block;
226		- }
227		-
228		- .authority-table-mobile thead {
229		- display: inline-table;
230		- width: 100%;
231		- }
232		-
233		- .authority-table-mobile tr,
234		- .authority-table-mobile td {
235		- display: revert;
236		- }
237		-
238		- .authority-table-mobile tr {
239		- width: 100%;
240		- }
241		-
242		- .authority-table-mobile tr:nth-child(2) th:nth-child(1) {
243		- width: 50%;
244		- }
245		-
246		- .authority-table-mobile td {
247		- padding: 1rem;
248		- width: 10%;
249		- }
250		-
251		- .authority-table-mobile tbody td input {
252		- margin-right: 1rem;
253		- }
254		-
255		- .authority-table-mobile tbody td label {}
256		-
257		- .authority-table-mobile th {
258		- width: 50%;
259		- }
260		-
261		- /* 사용자 관리 */
262		-
263		- .tab-menu {
264		- display: none;
265		- }
266		-
267		- /* 공통 */
268		- /* 보호자 메인 그리드 */
269		- .pc {
270		- display: none;
271		- }
272		-
273		- .mobile {
274		- display: block;
275		- }
276		-
277		- .mobile .main-grid-guardian {
278		- gap: 0.5rem;
279		- }
280		-
281		- .mobile .main-grid-guardian .content-box {
282		- padding: 0.5rem;
283		- }
284		-
285		- .mobile .main-grid-guardian .content-box:nth-child(2)>div p {
286		- font-size: 1.8rem;
287		- }
288		-
289		- .mobile .main-grid-guardian .content-box:nth-child(7)>div {
290		- justify-content: flex-start;
291		- }
292		-
293		- .mobile .main-grid-guardian .combine-right-government,
294		- .mobile .main-grid-guardian .combine-left {
295		- grid-column: 1;
296		- }
297		-
298		- .mobile .main-grid-guardian .combine-bottom-government {
299		- grid-column: 0;
300		- }
301		-
302		- /* button */
303		-
304		- .btn-large {
305		- font-size: 1.4rem;
306		- width: 20%;
307		- }
308		-
309		-
310		-
311		- /* 로그인 */
312		- .login-wrap h1 {
313		- font-size: 1.8rem;
314		- line-height: 1rem;
315		- }
316		-
317		- .login-wrap h3 {
318		- margin: 20% 0 5% 0;
319		- font-size: 2rem;
320		- text-align: center;
321		- }
322		-
323		- .login-form .login-inner .content {
324		- width: 80%;
325		- margin: 1rem auto;
326		- }
327		-
328		- .container {
329		- width: 100%;
330		- margin: 0;
331		- padding: 2rem;
332		- }
333		-
334		- .container .btn-wrap {
335		- margin-top: 5rem;
336		- }
337		-
338		- .container button {
339		- width: 30%;
340		- }
341		-
342		- /* 검색창 */
343		- .mobile-area-wrap {
344		- display: block;
345		- margin-top: 1rem;
346		- }
347		-
348		- .mobile-area-wrap div {
349		- width: 100%;
350		- margin-top: 1rem;
351		- }
352		-
353		- .mobile-area-wrap div label {
354		- width: 30%;
355		- font-size: 1.6rem;
356		- }
357		-
358		- .mobile-area-wrap div select {
359		- width: 70%;
360		- }
361		-
362		- .area-wrap {
363		- display: none;
364		- }
365		-
366		- .search-area {
367		- padding: 1rem;
368		- }
369		-
370		- .detail-search table tr,
371		- .detail-search table th,
372		- .detail-search table td {
373		- display: block;
374		- }
375		-
376		- .detail-search table th {
377		- width: 100%;
378		- }
379		-
380		- .detail-search table td::before {
381		- display: none;
382		- }
383		-
384		- .detail-search table td {
385		- padding: 0;
386		- border: 0;
387		- }
388		-
389		- .detail-search table tr {
390		- border: 0;
391		- }
392		-
393		- .detail-search tbody tr:nth-of-type(3) td {
394		- width: 50%;
395		- display: flex;
396		- }
397		-
398		- /* 시니어 정보 상세 조회 */
399		- .senior-detail {
400		- border: 0;
401		- }
402		-
403		- .senior-detail th {
404		- display: block;
405		- width: 34%;
406		- }
407		-
408		- .senior-detail td span {
409		- text-align: center;
410		- }
411		-
412		-
413		- /* 시니어 등록창 */
414		- .senior-insert th {
415		- font-size: 1.4rem;
416		- }
417		-
418		-
419		- /* 복약 수정 페이지 */
420		- .medicine-revise tr {
421		- border: 0;
422		- }
423		-
424		- .medicine-revise tr:nth-child(3)>td div,
425		- .medicine-revise tr:nth-child(4)>td div,
426		- .medicine-revise tr:nth-child(5)>td div {
427		- width: 50%;
428		- }
429		-
430		- .medicine-revise tr:nth-child(3)>td div input,
431		- .medicine-revise tr:nth-child(4)>td div input,
432		- .medicine-revise tr:nth-child(5)>td div input {
433		- width: 20%;
434		- }
435		-
436		- .medicine-revise tr:nth-child(3)>td div label,
437		- .medicine-revise tr:nth-child(4)>td div label,
438		- .medicine-revise tr:nth-child(5)>td div label {
439		- width: 50%;
440		- }
441		-
442		- /* 복약 상세페이지 */
443		- .medicine-detail-graph {
444		- display: block;
445		- }
446		-
447		- /* 복약 수정 페이지 */
448		- .modal-main table th {
449		- width: 100%;
450		- display: block;
451		- }
452		-
453		- .modal-main table td {
454		- padding: 0.5rem 0;
455		- }
456		-
457		- /* 최근 일주일 댁내 온도(모달창) */
458		- .temperature-modal td:nth-of-type(1) {
459		- font-weight: 900;
460		- padding: 1rem;
461		- }
462		-
463		- .temperature-modal td:nth-of-type(2):before {
464		- content: "날짜";
465		- }
466		-
467		- .temperature-modal td:nth-of-type(3):before {
468		- content: "02:00";
469		- }
470		-
471		- .temperature-modal td:nth-of-type(4):before {
472		- content: "10:00";
473		- }
474		-
475		- .temperature-modal td:nth-of-type(5):before {
476		- content: "14:00";
477		- }
478		-
479		- .temperature-modal td:nth-of-type(6):before {
480		- content: "23:00";
481		- }
482		-
483		-
484		-
485		- /* 방문 관리 상세 페이지 */
486		- /* 방문 수정 페이지 */
487		- .visit-revise th {
488		- width: 40%;
489		- font-size: 1.4rem;
490		- }
491		-
492		- .visit-revise tr:nth-child(3) td {
493		- display: block;
494		- }
495		-
496		- .visit-revise tr:nth-child(3) td>div {
497		- display: flex;
498		- margin: 0.5rem 0;
499		- }
500		-
501		- /* 방문 등록 */
502		- .user-list {
503		- display: none;
504		- }
505		-
506		- .insert {
507		- display: block;
508		- }
509		-
510		- .insert table tr:nth-child(6) td {
511		- display: block;
512		- }
513		-
514		- .insert tr:nth-child(6) td>div {
515		- display: flex;
516		- margin: 0.5rem 0;
517		- }
518		-
519		- .insert tr:nth-child(6) td>div input {
520		- width: 50%;
521		- }
522		-
523		- /* 장비조회 */
524		-
525		- /* 장비 상세 조회 */
526		-
527		- /* 장비등록 */
528		-
529		- .equipment-insert tr:nth-child(5) td {
530		- width: 28%;
531		- }
532		-
533		- .equipment-insert tr:nth-child(6) td {
534		- width: 100%;
535		- }
536		-
537		- .equipment-insert tr:nth-child(5) td select {
538		- display: flex;
539		- justify-content: flex-start;
540		- width: 100%;
541		- }
542		-
543		- .equipment-insert tr:nth-child(5) td input {
544		- display: table;
545		- width: 90%;
546		- }
547		-
548		- .equipment-insert tr:nth-child(6) td select {
549		- display: flex;
550		- justify-content: flex-start;
551		- width: 100%;
552		- }
553		-
554		- /* 내정보수정 */
555		- .join-inner {
556		- width: 100%;
557		- }
558		-
559	10	}
560	11
561	12	/* 모바일 세로 (해상도 ~ 479px)*/
...	...	@@ -571,7 +22,8 @@
571	22	.ittLqr{font-size: 1.3rem !important;}
572	23	/* 공통 */
573	24	#layout{display: block;}
574		- #pages{padding: 1rem; padding-top: 12rem; background-color: #ffffff;}
	25	+ #pages{padding: 0; padding-top: 8rem; background-color: #ffffff;}
	26	+ main{padding: 3rem 1rem 2rem 1rem;}
575	27	header {
576	28	padding: 1rem;
577	29	position: fixed;
...	...	@@ -590,12 +42,12 @@
590	42	transition: 0.5s;
591	43	}
592	44	.bottom-section{padding: 0.9rem ; bottom: 6rem;}
593		- .content-wrap{padding: 3rem 1rem 0 1rem; }
	45	+ .content-wrap{padding: 1rem 1rem 0 1rem; }
594	46	th,td,tr{display: block;}
595	47	.header-info-id,#fullDate, #temp,.cCoJhO{display: none;}
596	48	/* 에이젼시 메인 */
597	49	.main-grid-agency{display: block;}
598		- .main-grid-agency .agency-visitlist{margin-top: 16rem;}
	50	+ .main-grid-agency .agency-visitlist{margin-top: 22rem;}
599	51	.agency-calendar .react-calendar__month-view__weekdays{display: flex !important;}
600	52	.agency-calendar .react-calendar__month-view__days__day{flex: 0 0 12.5% !important;}
601	53	.agency-calendar .react-calendar__month-view__days{flex-wrap: wrap !important;}
...	...	@@ -608,9 +60,22 @@
608	60	.main-grid-government .content-box{margin-bottom: 1rem;}
609	61	.statistics-govern{margin-bottom: 1rem;}
610	62	/* 보호자 메인 */
611		- .main-grid-guardian{display: block;}
	63	+ .main-guardian img{width: 3rem;}
	64	+ .main-grid-guardian{display: block; padding: 0 1rem;}
	65	+ .main-grid-guardian #fullDate{display: block;}
612	66	.guardian-img{width: 2rem;}
613		-
	67	+ .battery{display: none;}
	68	+ .battery-mobile{display: block;}
	69	+ .statistics-guardian li{padding: 1rem; }
	70	+ .smallbox{box-shadow: 1px 1px 9px 3px rgb(0 0 0 / 11%);}
	71	+ .guardian-medicine{height: 28vh;}
	72	+ .guardian-medicine ul li img{left: -23px;}
	73	+ .medicine-title{
	74	+ right: -9px;
	75	+ top: 96px;
	76	+ width: 3rem;}
	77	+ .react-calendar__month-view__days button{padding: 1rem;}
	78	+ .pink{background-color: #fdeeea;}
614	79	/* 보호자 그래프보기 */
615	80	#chartdiv1{height: 26vh !important;}
616	81	#chartdiv{height: 26vh !important;}
...	...	@@ -622,7 +87,8 @@
622	87	}
623	88	.statistics-grid .statistics-guardian li{padding: 0;}
624	89	.statistics-grid .statistics-guardian li p:nth-child(1){margin-right: 1rem;}
625		- .statistics-grid .statistics-guardian li:nth-child(1) p:nth-child(2){width: 20%;}
	90	+ .statistics-grid .statistics-guardian li:nth-child(1) p:nth-child(2){width: 100%;}
	91	+ .statistics-grid .statistics-guardian li:nth-child(1) p:nth-child(3){display: none;}
626	92	/* Q&A */
627	93	.question-select select{width: 22%;}
628	94	/* 권한관리 */

...	...	@@ -7,28 +7,16 @@
7	7	const [value, setValue] = useState(new Date());
8	8	const mark = ["12-02-2023", "21-02-2023", "05-02-2023", "02-02-2023"];
9	9	return (
10		- <div className="w-full h-full p-10">
11		- <Calendar
12		- className="w-96 h-full rounded-xl bg-violet-300"
	10	+ <>
	11	+ <Calendar
13	12	onChange={setValue}
14	13	value={value}
15	14	tileClassName={({ date, view }) => {
16		- // if (mark.find((x) => x === moment(date).format("DD-MM-YYYY"))) {
17		- // return "highlight";
18		- // }
19		- let day = date.getDate()
20		- let month = date.getMonth()+1
21		- if(date.getMonth()<10){
22		- month = '0'+day
	15	+ if (mark.find((x) => x === moment(date).format("DD-MM-YYYY"))) {
	16	+ return "highlight";
23	17	}
24		- const realDate =day+'-'+month+'-'+date.getFullYear()
25		- if(mark.find(val=> val === realDate)){
26		- return 'highlight'
27		- }
28		-
29	18	}}
30	19	/>
31		- </div>
	20	+ </>
32	21	);
33	22	}
34		-

...	...	@@ -18,12 +18,13 @@
18	18	color: #733c1d;
19	19	`;
20	20	const Explanation = styled.p`
21		- font-size: 1.5rem;
	21	+ font-size: 1.8rem;
22	22	padding: 0.5rem;
	23	+ font-weight: bold;
23	24	color: ${(color) => color ? color : "#733c1d"};
24	25	&::before {
25	26	content: "";
26		- border-left: #f25430 2px solid;
	27	+ border-left: #f25430 5px solid;
27	28	padding-right: 1rem;
28	29	}
29	30	`;

...	...	@@ -27,6 +27,12 @@
27	27	import lunchoff from '../../../resources/files/images/lunchoff.png';
28	28	import dinneron from '../../../resources/files/images/dinneron.png';
29	29	import dinneroff from '../../../resources/files/images/dinneroff.png';
	30	+import percent_m_0 from '../../../resources/files/images/percent_m_0.png';
	31	+import percent_m_20 from '../../../resources/files/images/percent_m_20.png';
	32	+import percent_m_40 from '../../../resources/files/images/percent_m_40.png';
	33	+import percent_m_60 from '../../../resources/files/images/percent_m_60.png';
	34	+import percent_m_80 from '../../../resources/files/images/percent_m_80.png';
	35	+import percent_m_100 from '../../../resources/files/images/percent_m_100.png';
30	36
31	37	export default function Main_guardian() {
32	38	const tableHead1 = ["", "", "", "", "", ""];
...	...	@@ -82,31 +88,47 @@
82	88
83	89	return (
84	90	<>
85		- <main>
	91	+ <main className="pink">
86	92	<div className="flex-start main-guardian"><img src={Senior} alt="" /><Title title={"김복남 어르신"} explanation={"방문, 복약, 온도, 배터리 현황을 확인하세요."} /></div>
87	93	<div className="main-grid-guardian">
88	94	<div className="combine-left combine-all-government battery-wrap ">
89		- <div className="battery flex-start"><img className="guardian-img" src={battery} alt="" /><p>현재 스마트 약상자의 배터리가 <em className="red">40</em>% 입니다.</p><p className="red">※충전이 필요합니다.</p></div>
90		- <div className="battery-img">
91		- {/* 0%일때 */}
92		- <img src={zeropercent} alt="" />
93		- {/* 0~20%일때 */}
94		- <img src={twentypercent} alt="" />
95		- {/* 20~40%일때 */}
96		- <img src={fortypercent} alt="" className="show" />
97		- {/* 40~60%일때 */}
98		- <img src={sixtytypercent} alt="" />
99		- {/* 60~80% 일때 */}
100		- <img src={eightytypercent} alt="" />
101		- {/* 80~100%일때 */}
102		- <img src={pullpercent} alt="" />
	95	+ <div className="battery">
	96	+ <div className="flex-start">
	97	+ <img className="guardian-img" src={battery} alt="" />
	98	+ <div className="pc flex-start"><p>현재 스마트 약상자의 배터리가 <em className="red">40</em>% 입니다.</p><p className="red">※충전이 필요합니다.</p></div >
	99	+ </div>
	100	+ <div className="battery-img">
	101	+ {/* 0%일때 */}
	102	+ <img src={zeropercent} alt="" />
	103	+ {/* 0~20%일때 */}
	104	+ <img src={twentypercent} alt="" />
	105	+ {/* 20~40%일때 */}
	106	+ <img src={fortypercent} alt="" className="show" />
	107	+ {/* 40~60%일때 */}
	108	+ <img src={sixtytypercent} alt="" />
	109	+ {/* 60~80% 일때 */}
	110	+ <img src={eightytypercent} alt="" />
	111	+ {/* 80~100%일때 */}
	112	+ <img src={pullpercent} alt="" />
	113	+ </div>
	114	+ </div>
	115	+ <div className="battery-mobile">
	116	+ <div className="flex-start "><img className="guardian-img" src={battery} alt="" /><TitleSmall title={"배터리"} /><TitleSmall title={"40%"} /><p className="red">※충전이 필요합니다.</p></div >
	117	+ <div className="battery-img">
	118	+ <img src={percent_m_0} alt="" />
	119	+ <img src={percent_m_20} alt="" />
	120	+ <img src={percent_m_40} alt="" className="show" />
	121	+ <img src={percent_m_60} alt="" />
	122	+ <img src={percent_m_80} alt="" />
	123	+ <img src={percent_m_100} alt="" />
	124	+ </div>
103	125	</div>
104	126
105	127	</div>
106	128	<div className="statistics-guardian combine-right3">
107		- <div className="flex-start margin-bottom2"><img className="guardian-img" src={medicine} alt="" /><TitleSmall title={"복약체크"} explanation={"약을 잘 복용하고 계신지 체크해주세요."} /></div>
	129	+ <div className="flex-start margin-bottom2 margin-top"><img className="guardian-img" src={medicine} alt="" /><TitleSmall title={"복약체크"} explanation={"약을 잘 복용하고 계신지 체크해주세요."} /></div>
108	130	<ul className="">
109		- <li className="guardian-medicine">
	131	+ <li className="guardian-medicine smallbox">
110	132	<DateDay />
111	133	<ul className="flex">
112	134	<li>
...	...	@@ -129,22 +151,22 @@
129	151	</ul>
130	152	</div>
131	153	<div className=" statistics-guardian combine-right3">
132		- <div className="flex-start margin-bottom2"><img className="guardian-img" src={temperature} alt="" /><TitleSmall title={"온도체크"} explanation={"댁내 온도가 적절한지 체크해보세요."} /></div>
	154	+ <div className="flex-start margin-bottom2 margin-top"><img className="guardian-img" src={temperature} alt="" /><TitleSmall title={"온도체크"} explanation={"댁내 온도가 적절한지 체크해보세요."} /></div>
133	155	<ul >
134		- <li>
	156	+ <li className="smallbox">
135	157	<DateMonth />
136	158	<Chart6 />
137	159	</li>
138	160	</ul>
139	161	</div>
140	162	<div className=" statistics-guardian combine-left2 combine-middle-government">
141		- <div className="flex-start margin-bottom2"><img className="guardian-img" src={calendarBig} alt="" /><TitleSmall title={"방문체크"} /></div>
	163	+ <div className="flex-start margin-bottom2 margin-top"><img className="guardian-img" src={calendarBig} alt="" /><TitleSmall title={"방문체크"} /></div>
142	164	<ul >
143		- <li>
	165	+ <li className="smallbox">
144	166	<Calendar />
145	167	</li>
146	168	</ul>
147		- </div>
	169	+ </div>
148	170	</div>
149	171	</main>
150	172	</>

Delete comment