yjryu / senior_care_system star
최정임 최정임 2023-03-06
230306 최정임 반응형 수정
@8905862cf1ecbf961928c9253965a337df6c171e
4ea5dec
8905862
client/resources/css/common.css
--- client/resources/css/common.css
+++ client/resources/css/common.css
@@ -2,7 +2,8 @@
 
 /* layout 공통 */
 
 textarea{border: 1px solid #d8d3c7; border-radius: 5px;}
 
 em{font-style: normal;}
 
-main img{margin-right: 1rem;}
 
+main img{margin-right: 1rem; max-width: 100%;
 
+  width: unset;}
 
 /* grid */
 
 
 .main-grid-admin {
@@ -28,7 +29,6 @@
 
   gap: 1rem;
 
 }
 
 .main-grid-agency {
 
-  height: 100%;
 
   display: grid;
 
   grid-template-columns: 1fr 1fr 1fr 1fr;
 
   grid-template-rows: 0.1fr;
4ea5dec
8905862
client/resources/css/layout.css
--- client/resources/css/layout.css
+++ client/resources/css/layout.css
@@ -129,7 +129,6 @@
 
 .logout{background: #f26e50;}
 
 #pages {
 
   max-width: 100%;
 
-  height: fit-content;
 
   padding: 3rem;
 
   background-color: #f4f4f2;
 
   grid-area: main;
4ea5dec
8905862
client/resources/css/main.css
--- client/resources/css/main.css
+++ client/resources/css/main.css
@@ -272,12 +272,13 @@
 
   color: #cbc9c9;
 
 }
 
 
-.statistics-guardian {
 
-  height: 100%;
 
+.statistics-grid .statistics-guardian {
 
+  height: 41vh;
 
 }
 
-
 
+.statistics-grid .statistics-guardian li:nth-child(1) p:nth-child(2){font-size: 2rem; font-weight: bold; margin-right: 1rem;}
 
+.statistics-grid .statistics-guardian li:nth-child(1) p:nth-child(3){font-size: 1.6rem; }
 
 .guardian-medicine {
 
-  height: 16vh;
 
+  height: 17vh;
 
 }
 
 
 .statistics-guardian li {
@@ -286,52 +287,17 @@
 
   border-radius: 20px;
 
   margin: 0 auto;
 
   margin-bottom: 1rem;
 
+  position: relative;
 
 }
 
-
 
-/* .statistics-guardian:nth-child(1) {
 
-  background: #fbe4e4;
 
-}
 
-
 
-.statistics-guardian:nth-child(2) {
 
-  background: #edf7df;
 
-}
 
-
 
-.statistics-guardian:nth-child(3) {
 
-  background: #f9f7e0;
 
-}
 
-
 
-.statistics-guardian:nth-child(4) {
 
-  background: #e9e7fe;
 
-}
 
-.statistics-guardian li p{
 
-  padding: 0 2rem;
 
-} */
 
-.statistics-guardian li:nth-child(2),
 
-.statistics-guardian li:nth-child(3),
 
-.statistics-guardian li:nth-child(4),
 
-.statistics-guardian li:nth-child(5),
 
-.statistics-guardian li:nth-child(6),
 
-.statistics-guardian li:nth-child(7) {
 
-  background: rgba(255, 254, 254, 0.5);
 
-}
 
-
 
-.chart-guardian {
 
-  height: 77%;
 
-}
 
-
 
-.statistics-guardian li p:nth-child(3) {
 
-  font-size: 1.5rem;
 
-}
 
-
 
-.statistics-guardian li p:nth-of-type(1) {
 
-  position: inherit;
 
-  font-size: 1.5rem;
 
+.medicine-title{
 
+  position: absolute;
 
+  right: -13px;
 
+  top: 78px;
 
   font-weight: bold;
 
+  font-size: 1.5rem;
 
 }
 
-
 
-.statistics-guardian li p:nth-of-type(2) {
 
-  padding: 0;
 
-  font-size: 2rem;
 
+.chart-guardian {
 
+  height: 70%;
 
 }
 
 
 .guardian-table {
@@ -463,6 +429,8 @@
 
   display: none;
 
   box-shadow: 1px 1px 14px 1px rgba(0, 0, 0, 0.15);
 
   border-radius: 20px;
 
+  max-width: 100%;
 
+  width: unset;
 
 }
 
 
 .battery-img img.show {
4ea5dec
8905862
client/resources/css/responsive.css
--- client/resources/css/responsive.css
+++ client/resources/css/responsive.css
@@ -259,11 +259,6 @@
 
   }
 
 
   /* 사용자 관리 */
 
-  .tab-menu-mobile {
 
-    display: block;
 
-    padding: 1rem;
 
-    background-color: #ffffff;
 
-  }
 
 
   .tab-menu {
 
     display: none;
@@ -576,7 +571,7 @@
 
   .ittLqr{font-size: 1.3rem !important;}
 
   /* 공통 */
 
   #layout{display: block;}
 
-  #pages{padding: 1rem; }
 
+  #pages{padding: 1rem; padding-top: 12rem; background-color: #ffffff;}
 
   header {
 
     padding: 1rem;
 
     position: fixed;
@@ -590,7 +585,6 @@
 
     box-shadow:12px -6px 10px -10px rgb(0 0 0 / 20%);
 
     height:91vh;
 
   }
 
-  main{padding-top: 9rem;}
 
   nav.on {
 
     left: 0;
 
     transition: 0.5s;
@@ -613,6 +607,22 @@
 
   #RowChart>div{height: 36rem;}  
   .main-grid-government .content-box{margin-bottom: 1rem;}
 
   .statistics-govern{margin-bottom: 1rem;}
 
+  /* 보호자 메인 */
 
+  .main-grid-guardian{display: block;}
 
+  .guardian-img{width: 2rem;}
 
+ 
+  /* 보호자 그래프보기 */
 
+  #chartdiv1{height: 26vh !important;}
 
+  #chartdiv{height: 26vh !important;}
 
+  #chart{height: 27vh !important;}
 
+  #Chart2{height: 27vh !important;}
 
+  .statistics-grid{display: block;}
 
+  .statistics-grid .statistics-guardian {
 
+   margin-bottom: 1rem; padding: 0; height: 32vh;
 
+  }
 
+  .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%;}
 
   /* Q&A */
 
   .question-select select{width: 22%;}
 
   /* 권한관리 */
@@ -671,6 +681,7 @@
 
   }
 
 
   /* 사용자관리 */
 
+  .senior-search{width: 25% !important;}
 
   .searchselect label{margin-right: 2rem;}
 
   .protector-user{margin-top: 2rem;}
 
   .userauthoriylist{display: block;}
@@ -678,7 +689,9 @@
 
     width: 100% ;
 
 }
 
 .userauthoriylist .right{margin-top: 2rem;}
 
+.tab-menu {display: block;}
 
 .tab-menu li{width: 100%;}
 
+.userlist{padding: 1rem !important;}
 
   .search-management {
 
     justify-content: space-between;
 
   }
@@ -736,7 +749,7 @@
 
 
 
   /* 검색창 */
 
-
 
+  .detail-search tbody select{margin-right: 1rem;}
 
   .area-wrap {
 
     display: none;
 
   }
4ea5dec
8905862
client/views/component/chart/LineColor.jsx
--- client/views/component/chart/LineColor.jsx
+++ client/views/component/chart/LineColor.jsx
@@ -151,13 +151,13 @@
 
 
     // Add scrollbar
 
     // https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
 
-    chart.set(
 
-      "scrollbarX",
 
-      am5.Scrollbar.new(root, {
 
-        orientation: "horizontal",
 
-        marginBottom: 20,
 
-      })
 
-    );
 
+    // chart.set(
 
+    //   "scrollbarX",
 
+    //   am5.Scrollbar.new(root, {
 
+    //     orientation: "horizontal",
 
+    //     marginBottom: 20,
 
+    //   })
 
+    // );
 
 
     // Make stuff animate on load
 
     // https://www.amcharts.com/docs/v5/concepts/animations/
4ea5dec
8905862
client/views/pages/callcenter/QuestionSelect.jsx
--- client/views/pages/callcenter/QuestionSelect.jsx
+++ client/views/pages/callcenter/QuestionSelect.jsx
@@ -120,14 +120,14 @@
 
           offset={offset}
 
           limit={limit}
 
         />
 
-      </div>
 
-      <div>
 
-        <Pagination
 
-          total={myQnaTotal}
 
-          limit={limit}
 
-          page={page}
 
-          setPage={setPage}
 
-        />
 
+        <div className="margin-bottom">
 
+          <Pagination
 
+            total={myQnaTotal}
 
+            limit={limit}
 
+            page={page}
 
+            setPage={setPage}            
+          />
 
+        </div>
 
       </div>
 
     </main>
 
   );
4ea5dec
8905862
client/views/pages/healthcare/Healthcare.jsx
--- client/views/pages/healthcare/Healthcare.jsx
+++ client/views/pages/healthcare/Healthcare.jsx
@@ -122,31 +122,14 @@
 
 
     return (
 
         <main>
 
-            <ContentTitle contentTitle={"건강 관리"} explanation={"대상자의 복약/댁내온도/방문 관리를 할 수 있습니다."} />
 
             <div className="content-wrap">
 
-
 
+            <DetailTitle contentTitle={"대상자의 복약 / 댁내온도 / 방문 관리를 할 수 있습니다."} />
 
                 <div
 
                     style={{ height: "calc(100% - 61px)" }}
 
                 >
 
                     <div className="right" style={{ height: "100%", }}>
 
                         <div style={{ height: "100%" }}>
 
-                            <div className="tab-container">
 
-                                <ul className="tab-menu-mobile">
 
-                                    <div>
 
-                                        <SubTitle
 
-                                            className="margin-bottom"
 
-                                            subtitle={"사용자 선택"}
 
-                                            explanation={"사용자 별로 선택 후 관리할 수 있습니다. "}
 
-                                        />
 
-                                    </div>
 
-                                    <select name="" id="" style={{ width: "100%" }}>
 
-                                        <option value="사용자선택">보호자</option>
 
-                                        <option value="사용자선택">보호사</option>
 
-                                        <option value="사용자선택">병원</option>
 
-                                        <option value="사용자선택">지자체</option>
 
-                                        <option value="사용자선택">관리자</option>
 
-                                    </select>
 
-                                </ul>
 
+                            <div className="tab-container" style={{ marginTop: "5rem", }}>                                
                                 <ul className="tab-menu flex-end">
 
                                     {data.map((item) => (
 
                                         <li
@@ -159,7 +142,7 @@
 
                                     ))}
 
                                 </ul>
 
                                 <div className="content-wrap userlist">
 
-                                    <DetailTitle contentTitle={`${tapName}`} />
 
+                                    
                                     <div className="search-management flex-start margin-bottom2">
 
                                         <DetailSearch />
 
                                     </div>
4ea5dec
8905862
client/views/pages/healthcare/Medicalcare.jsx
--- client/views/pages/healthcare/Medicalcare.jsx
+++ client/views/pages/healthcare/Medicalcare.jsx
@@ -169,6 +169,7 @@
 
     return (
 
         <main>
 
             <div className="content-wrap">
 
+            <DetailTitle contentTitle={"대상자의 문진표 / 심전도 / 혈압 관리를 할 수 있습니다."} />
 
                 <Modal_Questionnaire open={modalOpen} close={closeModal} />
 
                 <Modal_MedicalHistory open={modalOpen2} close={closeModal2} />
 
                 <Modal_ECG open={modalOpen3} close={closeModal3} />
@@ -178,7 +179,7 @@
 
                 >
 
                     <div className="right" style={{ height: "100%", }}>
 
                         <div style={{ height: "100%" }}>
 
-                            <div className="tab-container">
 
+                            <div className="tab-container" style={{ marginTop: "5rem", }}>
 
                                 <ul className="tab-menu flex-end">
 
                                     {data.map((item) => (
 
                                         <li
@@ -190,8 +191,7 @@
 
                                         </li>
 
                                     ))}
 
                                 </ul>
 
-                                <div className="content-wrap userlist">
 
-                                    <DetailTitle contentTitle={"대상자의 문진표 / 심전도 / 혈압 관리를 할 수 있습니다."} />
 
+                                <div className="content-wrap userlist">                                    
                                     <div className="search-management flex-start margin-bottom2">
 
                                         <DetailSearch />
 
                                     </div>
4ea5dec
8905862
client/views/pages/healthcare/statistics/GuardianStatistics.jsx
--- client/views/pages/healthcare/statistics/GuardianStatistics.jsx
+++ client/views/pages/healthcare/statistics/GuardianStatistics.jsx
@@ -10,6 +10,10 @@
 
 import Chart1 from "../../../component/chart/Chart1.jsx";
 
 import LineColor from "../../../component/chart/LineColor.jsx";
 
 import ContentTitle from "../../../component/ContentTitle.jsx";
 
+import battery from '../../../../resources/files/images/battery.png';
 
+import temperature from '../../../../resources/files/images/temperature.png';
 
+import medicine from '../../../../resources/files/images/medicine.png';
 
+import calendarBig from '../../../../resources/files/images/calendarBig.png';
 
 
 export default function GuardianStatistics() {
@@ -18,11 +22,10 @@
 
   return (
 
     <>
 
       <main>
 
-        <ContentTitle contentTitle={"그래프로 한눈에 보기"} />
 
         <div className="statistics-grid">
 
           <ul className="content-box statistics-guardian">
 
             <li className="flex-start">
 
-              <p><AssignmentTurnedInIcon sx={{ width: "5rem", height: "5rem", color: "#bf0629", borderRadius: "50px" }} /></p>
 
+              <p><img className="guardian-img" src={calendarBig} alt="" /></p>
 
               <p>방문 그래프</p>
 
               <p>이번달 보호사님이 방문한 횟수는 총 4회 입니다.</p>
 
             </li>
@@ -32,7 +35,7 @@
 
           </ul>
 
           <ul className="content-box statistics-guardian">
 
             <li className="flex-start">
 
-              <p><MedicationIcon sx={{ width: "5rem", height: "5rem", color: "#0dd390", borderRadius: "50px" }} /></p>
 
+              <p><img className="guardian-img" src={medicine} alt="" /></p>
 
               <p>복약 체크</p>
 
               <p>약을 잘 복용하고 계신지 체크해주세요</p>
 
             </li>
@@ -42,7 +45,7 @@
 
           </ul>
 
           <ul className="content-box statistics-guardian">
 
             <li className="flex-start">
 
-              <p><DeviceThermostatIcon sx={{ width: "5rem", height: "5rem", color: "#f1de05", borderRadius: "50px" }} /></p>
 
+              <p><img className="guardian-img" src={temperature} alt="" /></p>
 
               <p>온도 체크</p>
 
               <p>댁내 온도가 적절한지 체크해보세요.</p>
 
             </li>
@@ -52,7 +55,7 @@
 
           </ul>
 
           <ul className="content-box statistics-guardian">
 
             <li className="flex-start">
 
-              <p><BatteryCharging20Icon sx={{ width: "5rem", height: "5rem", color: "#5f9af3", borderRadius: "50px" }} /></p>
 
+              <p><img className="guardian-img" src={battery} alt="" /></p>
 
               <p>약상자 배터리 그래프</p>
 
               <p>배터리 평균</p>
 
             </li>
4ea5dec
8905862
client/views/pages/main/Main_guardian.jsx
--- client/views/pages/main/Main_guardian.jsx
+++ client/views/pages/main/Main_guardian.jsx
@@ -30,43 +30,43 @@
 
 
 export default function Main_guardian() {
 
   const tableHead1 = ["", "", "", "", "", ""];
 
-  const Key1 = ["morning", "morning2", "lunch","lunch2", "dinner","dinner2"];
 
+  const Key1 = ["morning", "morning2", "lunch", "lunch2", "dinner", "dinner2"];
 
   const content1 = [
 
     {
 
       morning: "아침",
 
-      morning2:(
 
-        <CheckCircleOutlineIcon sx={{ width: "3rem", height: "3rem", color: "#067943", borderRadius: "50px" }}/> 
+      morning2: (
 
+        <CheckCircleOutlineIcon sx={{ width: "3rem", height: "3rem", color: "#067943", borderRadius: "50px" }} />
 
       ),
 
       lunch: "점심",
 
       lunch2: (
 
-        <CheckCircleOutlineIcon sx={{ width: "3rem", height: "3rem", color: "#067943", borderRadius: "50px" }}/> 
+        <CheckCircleOutlineIcon sx={{ width: "3rem", height: "3rem", color: "#067943", borderRadius: "50px" }} />
 
       ),
 
       dinner: "저녁",
 
       dinner2: (
 
-        <CheckCircleOutlineIcon sx={{ width: "3rem", height: "3rem", color: "#067943", borderRadius: "50px" }}/> 
+        <CheckCircleOutlineIcon sx={{ width: "3rem", height: "3rem", color: "#067943", borderRadius: "50px" }} />
 
       ),
 
     }
 
   ];
 
   const tableHead2 = ["", "", "", "", "", ""];
 
-  const Key2 = ["morning", "morning2", "lunch","lunch2", "dinner","dinner2"];
 
+  const Key2 = ["morning", "morning2", "lunch", "lunch2", "dinner", "dinner2"];
 
   const content2 = [
 
     {
 
       morning: "아침",
 
-      morning2:(
 
-        <ClearIcon sx={{ width: "3rem", height: "3rem", color: "#bf0629", borderRadius: "50px" }}/> 
+      morning2: (
 
+        <ClearIcon sx={{ width: "3rem", height: "3rem", color: "#bf0629", borderRadius: "50px" }} />
 
       ),
 
       lunch: "점심",
 
       lunch2: (
 
-        <ClearIcon sx={{ width: "3rem", height: "3rem", color: "#bf0629", borderRadius: "50px" }}/> 
+        <ClearIcon sx={{ width: "3rem", height: "3rem", color: "#bf0629", borderRadius: "50px" }} />
 
       ),
 
       dinner: "저녁",
 
       dinner2: (
 
-        <ClearIcon sx={{ width: "3rem", height: "3rem", color: "#bf0629", borderRadius: "50px" }}/> 
+        <ClearIcon sx={{ width: "3rem", height: "3rem", color: "#bf0629", borderRadius: "50px" }} />
 
       ),
 
     }
 
   ];
 
   const tableHead3 = ["월", "화", "수", "목", "금", "토", "일"];
 
-  const Key3 = ["mon", "tue", "wed","thu", "fri","sat","sun"];
 
+  const Key3 = ["mon", "tue", "wed", "thu", "fri", "sat", "sun"];
 
   const content3 = [
 
     {
 
       mon: "24°C",
@@ -85,55 +85,15 @@
 
       <main>
 
         <div className="flex-start main-guardian"><img src={Senior} alt="" /><Title title={"김복남 어르신"} explanation={"방문, 복약, 온도, 배터리 현황을 확인하세요."} /></div>
 
         <div className="main-grid-guardian">
 
-          <div className=" statistics-guardian combine-left2 combine-middle-government">
 
-          <div className="flex-start margin-bottom2"><img src={calendarBig} alt="" /><TitleSmall title={"방문체크"} /></div>
 
-            <ul >         
-              <li>
 
-              <Calendar />
 
-              </li>     
-            </ul>
 
-          </div>
 
-          <div className=" statistics-guardian combine-right3">
 
-          <div className="flex-start margin-bottom2"><img src={temperature} alt="" /><TitleSmall title={"온도체크"} explanation={"댁내 온도가 적절한지 체크해보세요."}/></div>
 
-            <ul >
 
-              <li>
 
-                <DateMonth />
 
-                <Chart6 />
 
-              </li>   
-            </ul>
 
-          </div>
 
-          
-          <div className="statistics-guardian combine-right3">
 
-          <div className="flex-start margin-bottom2"><img src={medicine} alt="" /><TitleSmall title={"복약체크"} explanation={"약을 잘 복용하고 계신지 체크해주세요."}/></div>
 
-            <ul className="">
 
-              <li className="guardian-medicine">
 
-                <DateDay />
 
-                <ul className="flex">
 
-                  <li>
 
-                    <img src={mornon} alt="" className="show"/>
 
-                    <img src={mornoff} alt="" />
 
-                  </li>
 
-                  <li>
 
-                    <img src={lunchon} alt="" />
 
-                    <img src={lunchoff} alt="" className="show"/>
 
-                  </li>
 
-                  <li>
 
-                    <img src={dinneron} alt="" />
 
-                    <img src={dinneroff} alt="" className="show"/>
 
-                  </li>
 
-                </ul>
 
-              </li>
 
-            </ul>
 
-          </div>
 
           <div className="combine-left combine-all-government battery-wrap ">
 
-            <div className="battery flex-start"><img src={battery} alt="" /><p>현재 스마트 약상자의 배터리가 <em className="red">40</em>% 입니다.</p><p className="red">※충전이 필요합니다.</p></div> 
-            <div className="battery-img"> 
+            <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="" /> 
+              <img src={zeropercent} alt="" />
 
               {/* 0~20%일때 */}
 
               <img src={twentypercent} alt="" />
 
               {/* 20~40%일때 */}
 
-              <img src={fortypercent} alt="" className="show"/>
 
+              <img src={fortypercent} alt="" className="show" />
 
               {/* 40~60%일때 */}
 
               <img src={sixtytypercent} alt="" />
 
               {/* 60~80% 일때 */}
@@ -143,6 +103,48 @@
 
             </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>
 
+            <ul className="">
 
+              <li className="guardian-medicine">
 
+                <DateDay />
 
+                <ul className="flex">
 
+                  <li>
 
+                    <img src={mornon} alt="" className="show" />
 
+                    <img src={mornoff} alt="" />
 
+                    <p className="medicine-title">아침</p>
 
+                  </li>
 
+                  <li>
 
+                    <img src={lunchon} alt="" />
 
+                    <img src={lunchoff} alt="" className="show" />
 
+                    <p className="medicine-title">점심</p>
 
+                  </li>
 
+                  <li>
 
+                    <img src={dinneron} alt="" />
 
+                    <img src={dinneroff} alt="" className="show" />
 
+                    <p className="medicine-title">저녁</p>
 
+                  </li>
 
+                </ul>
 
+              </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>
 
+            <ul >
 
+              <li>
 
+                <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>
 
+            <ul >
 
+              <li>
 
+                <Calendar />
 
+              </li>
 
+            </ul>
 
+          </div> 
         </div>
 
       </main>
 
     </>
4ea5dec
8905862
client/views/pages/user_management/UserAuthoriySelect_agency.jsx
--- client/views/pages/user_management/UserAuthoriySelect_agency.jsx
+++ client/views/pages/user_management/UserAuthoriySelect_agency.jsx
@@ -340,7 +340,7 @@
 
               <option value="이름">이름</option>
 
               <option value="아이디">아이디</option>
 
             </select>
 
-            <input type="text" />
 
+            <input type="text" className="senior-search"/>
 
             <Button
 
               className={"btn-small gray-btn"}
 
               btnName={"검색"}
Add a comment
List