최정임 최정임 2023-03-06
230306 최정임 반응형 수정
@8905862cf1ecbf961928c9253965a337df6c171e
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;
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;
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 {
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;
   }
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/
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>
   );
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>
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>
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>
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>
     </>
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