최정임 최정임 2023-04-06
230406최정임 올잇메디 반응형 수정
@cf4f2acb988d1bac95dfa71f7df97f94153ffadd
client/resources/css/common.css
--- client/resources/css/common.css
+++ client/resources/css/common.css
@@ -139,6 +139,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+
 }
 
 .flex-align-start {
@@ -163,6 +164,7 @@
   display: flex;
   justify-content: flex-start;
   align-items: center;
+  
 }
 
 .flex-center {
client/resources/css/main.css
--- client/resources/css/main.css
+++ client/resources/css/main.css
@@ -1244,8 +1244,8 @@
 }
 
 /* 사용자 관리 */
-.userauthoriylist .left{width: 27%;}
- .userauthoriylist .right{width: 70%; }
+.userauthoriylist .left{width: 33%;}
+ .userauthoriylist .right{width: 100%;}
 .bSXvtB{display: none;}
 .tab-menu .tab-menu-agency {
   display: flex;
@@ -1325,4 +1325,6 @@
   background-color: #ff7f50;
   color: #ffffff;
 
-}
(No newline at end of file)
+}
+.senior-table span{display: none;}
+.senior-table span img{display: none; }
(No newline at end of file)
client/resources/css/reset.css
--- client/resources/css/reset.css
+++ client/resources/css/reset.css
@@ -45,7 +45,6 @@
   width: 100%;
   border-collapse: collapse;
 }
-table span{display: none;}
 thead{
   font-weight: bold;
   background: #d8d3c7;
@@ -53,7 +52,7 @@
   text-align: center;
 }
 thead tr{border-radius: 10px;}
-th{background-color: #d8d3c7; padding: 0.5rem;}
+th{background-color: #f7f7f7; padding: 0.5rem;}
 
 td {
   padding: 0.5rem;
client/resources/css/responsive.css
--- client/resources/css/responsive.css
+++ client/resources/css/responsive.css
@@ -445,7 +445,7 @@
   .userauthoriylist .right {
     margin-top: 2rem;
   }
-
+.userauthoriylist .category{width: -webkit-fill-available;}
   .modal .modal-inner {
     width: 100%;
     border-radius: 0;
@@ -751,6 +751,7 @@
   .userauthoriylist .right {
     margin-top: 2rem;
   }
+  .userauthoriylist .category{width: -webkit-fill-available !important; margin-top: 1rem;}
   .tab-menu {
     display: block;
   }
@@ -873,7 +874,7 @@
   }
   .senior-detail th,
   .senior-detail td {
-    display: inline-table;
+    display: flex;
     margin: 0.5rem;
   }
 
@@ -890,15 +891,14 @@
 
   .senior-detail td span {
     width: 100%;
-    font-size: 1.2rem;
+    font-size: 1.6rem;
     text-align: center;
   }
-
   /* 시니어 등록창 */
   .senior-insert {
     display: grid;
   }
-
+ .senior-insert span{display: revert;}
   .senior-insert th {
     font-size: 1.4rem;
     width: 50%;
@@ -1089,14 +1089,14 @@
   .total-equip {
     margin-bottom: 0.5rem;
   }
-
+ /* 복약상세 (컴포넌트  테이블)*/
   .senior-table {
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
   }
   .senior-table thead{display: none;}
-  .senior-table span{border-bottom: 1px solid #e4dccf; font-weight: bold; padding: 0.5rem; margin-bottom: 0.5rem; }
-  .senior-table span img{width: 2rem; }
+  .senior-table span{border-bottom: 1px solid #e4dccf; font-weight: bold; padding: 0.5rem; margin-bottom: 0.5rem; display: block;}
+  .senior-table span img{width: 2rem;}
   .senior-table tr{background-color: #f2f0eb; padding: 1rem; margin-bottom: 1rem;}
   .senior-table td{background-color: #ffffffde;
     border-radius: 5px; margin-bottom: 0.5rem;}
@@ -1115,14 +1115,14 @@
 
  /* 문진표 */
  .questionnaire-table td{padding: 0 !important;}
- .questionnaire-table input[type="text"]{width: auto;}
+ .questionnaire-table input[type="text"]{width: -webkit-fill-available;}
 
  .caregiver-user{}
 
+
  .medicine-detail-table th{display: none;}
  .medicine-detail-table tbody tr{background-color: #f2f0eb; border-radius: 5px; padding: 0.5rem; margin-bottom: 1rem;}
- .medicine-detail-table td{text-align: right; position: relative; padding-left: 50%;}
- .medicine-detail-table td:nth-child(odd){background-color: #ffffff;}
+ .medicine-detail-table td{text-align: right; position: relative; padding-left: 50%; background-color: #ffffff; border-bottom: 1px solid #f2f0eb}
  .medicine-detail-table td::before{
   content: attr(data-label);
   position: absolute;
@@ -1131,5 +1131,27 @@
   text-align: left;
   border-left: 8px solid #d8d3c7;
     padding-left: 1rem;
+    margin-left: 1rem;
  }
+ .protector-user th{display: none;}
+ .protector-user tbody tr{background-color: #f2f0eb; border-radius: 5px; padding: 0.5rem; margin-bottom: 1rem;}
+ .protector-user td{text-align: right; position: relative; padding-left: 50%; min-height: 3rem; border-bottom: 1px solid #f2f0eb; background-color: #ffffff;}
+ /* .protector-user td:nth-child(odd){background-color: #ffffff;} */
+ .protector-user td::before{
+  content: attr(data-label);
+  position: absolute;
+  left: 0;
+  width: 34%;
+  text-align: left;
+  border-left: 8px solid #d8d3c7;
+    padding-left: 1rem;
+    margin-left: 1rem;
+ }
+
+ .join-group h3{margin-bottom: 3rem;}
 }
+
+
+/* 반응형 그냥 테이블 protector-user / medicine-detail-table
+   컴포넌트 senior-table
+   상세페이지 questionnaire-table */
(No newline at end of file)
client/views/pages/healthcare/Healthcare.jsx
--- client/views/pages/healthcare/Healthcare.jsx
+++ client/views/pages/healthcare/Healthcare.jsx
@@ -151,7 +151,7 @@
             title: "복약관리",
             description: (
                 <Table
-                    className={"protector-user senior-table"}
+                    className={" senior-table"}
                     head={thead}
                     contents={content}
                     contentKey={key}
client/views/pages/healthcare/Medicalcare.jsx
--- client/views/pages/healthcare/Medicalcare.jsx
+++ client/views/pages/healthcare/Medicalcare.jsx
@@ -107,7 +107,7 @@
                 <p><span>{thead1[2]}</span>  0000001</p>
               ),
             birth:  (
-                <p><span>{thead1[3]}</span>  1948.11.15</p>
+                <p><span><img src={person} alt="" />{thead1[0]}</span> 1</p>
               ),
             phone: (
                 <p><span>{thead1[4]}</span>  010-1234-1234</p>
@@ -178,7 +178,7 @@
             title: "문진표 관리",
             description: (
                 <Table
-                    className={"protector-user senior-table"}
+                    className={" senior-table"}
                     head={thead}
                     contents={content}
                     contentKey={key}
client/views/pages/healthcare/medicinecare/MedicineCareSelectOne.jsx
--- client/views/pages/healthcare/medicinecare/MedicineCareSelectOne.jsx
+++ client/views/pages/healthcare/medicinecare/MedicineCareSelectOne.jsx
@@ -25,7 +25,7 @@
     <main>
       <Modal open={modalOpen} close={closeModal} header="복약 내역 수정">
         <div>
-          <table className="margin-bottom medicine-revise">
+          <table className="margin-bottom medicine-revise questionnaire-table">
             <tr>
               <th>대상자명</th>
               <td></td>
client/views/pages/healthcare/temperature/TemperatureManagementSelectOne.jsx
--- client/views/pages/healthcare/temperature/TemperatureManagementSelectOne.jsx
+++ client/views/pages/healthcare/temperature/TemperatureManagementSelectOne.jsx
@@ -13,7 +13,7 @@
           <ClusteredColumnChart />
         </div>
         <div className="board-wrap">
-          <table className="table-border margin-bottom2 temperature-modal">
+          <table className="table-border margin-bottom2 temperature-modal medicine-detail-table">
             <thead>
               <tr>
                 <th rowSpan="2">No</th>
@@ -29,20 +29,20 @@
             </thead>
             <tbody>
               <tr>
-                <td>2</td>
-                <td>2022.08.10</td>
-                <td>18 ℃</td>
-                <td>5 ℃</td>
-                <td>10 ℃</td>
-                <td>13 ℃</td>
+                <td data-label="No" >2</td>
+                <td data-label="날짜">2022.08.10</td>
+                <td data-label="댁내온도(02:00)">18 ℃</td>
+                <td data-label="댁내온도(10:00)">5 ℃</td>
+                <td data-label="댁내온도(14:00)">10 ℃</td>
+                <td data-label="댁내온도(23:00)">13 ℃</td>
               </tr>
               <tr>
-                <td>1</td>
-                <td>2022.08.09</td>
-                <td>18 ℃</td>
-                <td>5 ℃</td>
-                <td>10 ℃</td>
-                <td>13 ℃</td>
+                <td data-label="No">1</td>
+                <td data-label="날짜">2022.08.09</td>
+                <td data-label="댁내온도(02:00)">18 ℃</td>
+                <td data-label="댁내온도(10:00)">5 ℃</td>
+                <td data-label="댁내온도(14:00)">10 ℃</td>
+                <td data-label="댁내온도(23:00)">13 ℃</td>
               </tr>
             </tbody>
           </table>
client/views/pages/login/Login.jsx
--- client/views/pages/login/Login.jsx
+++ client/views/pages/login/Login.jsx
@@ -77,7 +77,7 @@
             </div>
             <div className="btn-wrap">
               <Button
-                className={"btn-100 green-btn"}
+                className={"btn-100 gray-btn"}
                 btnName={"로그인"}
                 onClick={login}
               />
client/views/pages/senior_management/SeniorSelectOne.jsx
--- client/views/pages/senior_management/SeniorSelectOne.jsx
+++ client/views/pages/senior_management/SeniorSelectOne.jsx
@@ -263,18 +263,18 @@
           <tbody>
             {guardianListBySenior.map((item, idx) => { return (
               <tr key={idx}>
-                <td>{idx + 1}</td>
-                <td>{item['user_name']}</td>
-                <td>{item['senior_relationship']}</td>
-                <td>{item['user_phonenumber']}</td>
-                <td>{item['user_birth']}</td>
-                <td>{item['user_address']}</td>
-                <td>
+                <td data-label="No">{idx + 1}</td>
+                <td data-label="이름">{item['user_name']}</td>
+                <td data-label="관계">{item['senior_relationship']}</td>
+                <td data-label="연락처">{item['user_phonenumber']}</td>
+                <td data-label="생년월일">{item['user_birth']}</td>
+                <td data-label="주소">{item['user_address']}</td>
+                <td data-label="가입승인">
                   {item['is_accept'] ? "승인완료" : 
                     <button className={"btn-small red-btn"} onClick={() => {userUpdate(item, guardianSelectListBySenior)}}>가입승인</button>
                   }
                 </td>
-                <td>
+                <td data-label="관리">
                   <button className={"btn-small lightgray-btn"} onClick={() => guardianBySeniorManagement(item)}>정보 수정</button>
                 </td>
               </tr>
@@ -291,7 +291,7 @@
 
       <SubTitle explanation={"대상자의 보호사"} className="margin-bottom" />
       <div className="margin-bottom5">
-        <table className={"senior-user"}>
+        <table className={"senior-user protector-user"}>
           <thead>
             <tr>
               <th>No</th>
@@ -309,16 +309,16 @@
           <tbody>
             {agent.agentListBySenior.map((item, idx) => { return (
               <tr key={idx}>
-                <td>{idx + 1}</td>
-                <td>{item['government_name']}</td>
-                <td>{item['agency_name']}</td>
-                <td>{item['user_name']}</td>
-                <td>{item['user_phonenumber']}</td>
-                <td>{item['user_email']}</td>
-                <td>{item['agent_match_state'] ? <span className="green">현재 보호사</span> : <span className="grey">이전 보호사</span>}</td>
-                <td>{item['agent_match_start_date']}</td>
-                <td>{item['agent_match_end_date']}</td>
-                <td>
+                <td data-label="No">{idx + 1}</td>
+                <td data-label="관리기관명">{item['government_name']}</td>
+                <td data-label="소속기관명">{item['agency_name']}</td>
+                <td data-label="이름">{item['user_name']}</td>
+                <td data-label="연락처">{item['user_phonenumber']}</td>
+                <td data-label="이메일">{item['user_email']}</td>
+                <td data-label="상태">{item['agent_match_state'] ? <span className="green">현재 보호사</span> : <span className="grey">이전 보호사</span>}</td>
+                <td data-label="배정시작일">{item['agent_match_start_date']}</td>
+                <td data-label="배정종료일">{item['agent_match_end_date']}</td>
+                <td data-label="상세보기">
                   <button className={"btn-small lightgray-btn"} onClick={() => {navigate("/AgentSelectOne", {state: {'agent_id': item['agent_id']}})}}>상세 페이지 이동</button>
                 </td>
               </tr>
client/views/pages/user_management/UserAuthoriySelect.jsx
--- client/views/pages/user_management/UserAuthoriySelect.jsx
+++ client/views/pages/user_management/UserAuthoriySelect.jsx
@@ -344,7 +344,7 @@
                 className="margin-bottom"
               />
               {/* 카테고리 디자인 필요 (a.active 클래스 필요) */}
-              <div style={{width: '100%', fontSize: '16px'}} className="category">
+              <div style={{width: '88%', fontSize: '16px'}} className="category">
                 {/* <a className={() => {return "active"}} onClick={adminChange}>올잇메디</a> */}
                 <a onClick={adminChange}
                    className={userSearch['government_id'] == null && userSearch['agency_id'] == null ? "active" : ""}>
@@ -434,13 +434,13 @@
                             <tbody>
                               {senior.userList.map((item, idx) => { return (
                                 <tr key={idx} onClick={() => {navigate("/SeniorSelectOne", {state: {'senior_id': item['user_id']}})}}>
-                                  <td>{senior.userListCount - idx - (senior.search.currentPage - 1) * senior.search.perPage}</td>
-                                  <td>{item['agency_name']}</td>
-                                  <td>{item['user_name']}</td>
-                                  <td>{item['user_birth']}</td>
-                                  <td>{item['user_gender']}</td>
-                                  <td>{item['user_phonenumber']}</td>
-                                  <td>{item['user_address']}</td>
+                                  <td data-label="No">{senior.userListCount - idx - (senior.search.currentPage - 1) * senior.search.perPage}</td>
+                                  <td data-label="No">{item['agency_name']}</td>
+                                  <td data-label="소속기관명">{item['user_name']}</td>
+                                  <td data-label="생년월일">{item['user_birth']}</td>
+                                  <td data-label="성별">{item['user_gender']}</td>
+                                  <td data-label="연락처">{item['user_phonenumber']}</td>
+                                  <td data-label="주소">{item['user_address']}</td>
                                 </tr>
                               )})}
                               {senior.userList == null || senior.userList.length == 0 ?
@@ -486,7 +486,7 @@
                             <button className={"btn-small gray-btn"} onClick={join}>등록</button>
                           </div>
 
-                          <table className={"senior-user"}>
+                          <table className={"senior-user protector-user"}>
                             <thead>
                               <tr>
                                 <th>No</th>
@@ -502,18 +502,18 @@
                             <tbody>
                               {agent.userList.map((item, idx) => { return (
                                 <tr key={idx}>
-                                  <td>{agent.userListCount - idx - (agent.search.currentPage - 1) * agent.search.perPage}</td>
-                                  <td>{item['government_name']}</td>
-                                  <td>{item['agency_name']}</td>
-                                  <td>{item['user_name']}</td>
-                                  <td>{item['user_phonenumber']}</td>
-                                  <td>{item['user_email']}</td>
-                                  <td>
+                                  <td data-label="No">{agent.userListCount - idx - (agent.search.currentPage - 1) * agent.search.perPage}</td>
+                                  <td data-label="관리기관명">{item['government_name']}</td>
+                                  <td data-label="소속기관명">{item['agency_name']}</td>
+                                  <td data-label="이름">{item['user_name']}</td>
+                                  <td data-label="연락처">{item['user_phonenumber']}</td>
+                                  <td data-label="이메일">{item['user_email']}</td>
+                                  <td data-label="가입승인">
                                     {item['is_accept'] ? "승인완료" : 
                                       <button className={"btn-small red-btn"} onClick={() => {userUpdate(item, agentSelectList)}}>가입승인</button>
                                     }
                                   </td>
-                                  <td>
+                                  <td data-label="상세보기">
                                     <button className={"btn-small lightgray-btn"} onClick={() => {navigate("/AgentSelectOne", {state: {'agent_id': item['user_id']}})}}>상세 페이지 이동</button>
                                   </td>
                                 </tr>
@@ -561,7 +561,7 @@
                             <button className={"btn-small gray-btn"} onClick={join}>등록</button>
                           </div>
 
-                          <table className={"senior-user"}>
+                          <table className={"senior-user protector-user"}>
                             <thead>
                               <tr>
                                 <th>No</th>
@@ -576,17 +576,17 @@
                             <tbody>
                               {government.userList.map((item, idx) => { return (
                                 <tr key={idx}>
-                                  <td>{government.userListCount - idx - (government.search.currentPage - 1) * government.search.perPage}</td>
-                                  <td>{item['government_name']}</td>
-                                  <td>{item['user_name']}</td>
-                                  <td>{item['user_phonenumber']}</td>
-                                  <td>{item['user_email']}</td>
-                                  <td>
+                                  <td data-label="No">{government.userListCount - idx - (government.search.currentPage - 1) * government.search.perPage}</td>
+                                  <td data-label="소속기관명">{item['government_name']}</td>
+                                  <td data-label="이름">{item['user_name']}</td>
+                                  <td data-label="연락처">{item['user_phonenumber']}</td>
+                                  <td data-label="이메일">{item['user_email']}</td>
+                                  <td data-label="가입승인">
                                     {item['is_accept'] ? "승인완료" : 
                                       <button className={"btn-small red-btn"} onClick={() => {userUpdate(item, governmentSelectList)}}>가입승인</button>
                                     }
                                   </td>
-                                  <td>
+                                  <td data-label="관리">
                                     <button className={"btn-small lightgray-btn"} onClick={() => {navigate("/UserEdit", {state: {'user_id': item['user_id']}})}}>정보 수정</button>
                                   </td>
                                 </tr>
@@ -628,7 +628,7 @@
                             <button className={"btn-small gray-btn"} onClick={join}>등록</button>
                           </div>
 
-                          <table className={"senior-user"}>
+                          <table className={"senior-user protector-user"}>
                             <thead>
                               <tr>
                                 <th>No</th>
@@ -642,16 +642,16 @@
                             <tbody>
                               {admin.userList.map((item, idx) => { return (
                                 <tr key={idx}>
-                                  <td>{admin.userListCount - idx - (admin.search.currentPage - 1) * admin.search.perPage}</td>
-                                  <td>{item['user_name']}</td>
-                                  <td>{item['user_phonenumber']}</td>
-                                  <td>{item['user_email']}</td>
-                                  <td>
+                                  <td data-label="No">{admin.userListCount - idx - (admin.search.currentPage - 1) * admin.search.perPage}</td>
+                                  <td data-label="이름">{item['user_name']}</td>
+                                  <td data-label="연락처">{item['user_phonenumber']}</td>
+                                  <td data-label="이메일">{item['user_email']}</td>
+                                  <td data-label="가입승인">
                                     {item['is_accept'] ? "승인완료" : 
                                       <button className={"btn-small red-btn"} onClick={() => {userUpdate(item, adminSelectList)}}>가입승인</button>
                                     }
                                   </td>
-                                  <td>
+                                  <td data-label="관리">
                                     <button className={"btn-small lightgray-btn"} onClick={() => {navigate("/UserEdit", {state: {'user_id': item['user_id']}})}}>정보 수정</button>
                                   </td>
                                 </tr>
client/views/pages/visit/visit/VisitSelectOne.jsx
--- client/views/pages/visit/visit/VisitSelectOne.jsx
+++ client/views/pages/visit/visit/VisitSelectOne.jsx
@@ -8,6 +8,7 @@
 import Chart2 from "../../../component/chart/Chart2.jsx";
 import Button from "../../../component/Button.jsx";
 import Modal from "../../../component/Modal.jsx";
+import person from "../../../../resources/files/icon/person.png";
 
 export default function MedicineCareSelect() {
   const navigate = useNavigate();
@@ -23,16 +24,18 @@
   const key = ["No", "birth", "phone", "address", ];
   const content = [
     {
-      No: 1,
-      birth: "2023.02.08",
-      phone: "정기방문",
-      address: "정기방문일",
-    },
-    {
-      No: 2,
-      birth: "2023.01.08",
-      phone: "정기방문",
-      address: "정기방문일",
+      No: (
+        <p><span><img src={person} alt="" />{thead[0]}</span> 1</p>
+      ),
+      birth: (
+        <p><span>{thead[1]}</span> 2020.03.04</p>
+      ),
+      phone: (
+        <p><span>{thead[2]}</span> 정기방문</p>
+      ),
+      address: (
+        <p><span>{thead[3]}</span> 정기방문일</p>
+      ),
     },
   ];
 
@@ -40,7 +43,7 @@
     <main>
       <Modal open={modalOpen} close={closeModal} header="방문 등록">
         <div className="board-wrap">
-        <table className="flex70 margin-bottom">
+        <table className="flex70 margin-bottom questionnaire-table">
             <tbody>
               <tr>
                 <th>대상자</th>
@@ -103,7 +106,7 @@
             />
           </div>
         <Table
-            className={"medicine-table"}
+            className={"medicine-table  senior-table"}
               head={thead}
               contents={content}
               contentKey={key}
Add a comment
List