Commit @c9727b561b6d9e9e411092d1fdc6928df6369494

24691f8

c9727b5

client/resources/css/main.css

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

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


 }
 .statistics-grid > div{height: 35rem;}
 .statistics-grid .statistics-guardian {
-  height: 41vh;
 }
+.statistics-grid .statistics-guardian li:nth-child(2) > div{height: 23vh !important;}
 .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 {

 .statistics-guardian li {
   padding: 1rem 3rem;
   background: #ffffff;
-  border-radius: 20px;
+  border-radius: 10px;
   margin: 0 auto;
   position: relative;
   text-align: center;

   left: 22px;
 }
 .chart-guardian {
-  height: 70%;
+  
 }
 
 .guardian-table {

24691f8

c9727b5

client/resources/css/responsive.css

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

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


   }
   .statistics-grid .statistics-guardian {
     margin-bottom: 1rem;
-    padding: 0;
-    height: 32vh;
+    padding: 0.5rem;   
+    
   }
   .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(2) {
+    box-shadow: 1px 1px 5px 1px rgb(0 0 0 / 9%);
+    margin-top: 1rem;
+  }
   .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;

   }
 
   .container button {
-    width: 30%;
   }
 
   /* 검색창 */

   }
 
   .modal-main table td {
-    padding: 0.5rem 0 0 12rem;
+    padding: 0.5rem ;
   }
 
   .medicine-revise tr {

  }
 
  .join-group h3{margin-bottom: 3rem;}
+ .detail-table td{padding: 0 !important;}
+ .detail-table input[type="text"]{width: -webkit-fill-available;}
+ .detail-table input[type="file"]{width: -webkit-fill-available;}
+
+
+ .agency-visitlist {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+.agency-visitlist thead{display: none;}
+.agency-visitlist span{border-bottom: 1px solid #e4dccf; font-weight: bold; padding: 0.5rem; margin-bottom: 0.5rem; display: block;}
+.agency-visitlist span img{width: 2rem;}
+.agency-visitlist tr{background-color: #f2f0eb; padding: 1rem; margin-bottom: 1rem;}
+.agency-visitlist td{background-color: #ffffffde;
+  border-radius: 5px; margin-bottom: 0.5rem;}
+  .agency-visitlist .btn-wrap{margin-top: 0;}
+ 
 }
 
 
 /* 반응형 그냥 테이블 protector-user / medicine-detail-table
    컴포넌트 senior-table
-   상세페이지 questionnaire-table */
+   상세페이지 detail-table */

24691f8

c9727b5

client/views/component/Modal_Blood.jsx

--- client/views/component/Modal_Blood.jsx

+++ client/views/component/Modal_Blood.jsx


 import React from "react";
 import Button from "./Button.jsx";
 import Table from "./Table.jsx";
+import AssignmentIcon from '@mui/icons-material/Assignment';
 
 export default function Modal({open, close, }) {
   const thead1 = [

   const key1 = ["No", "date", "high","low", "pulse", "writer"];
   const content1 = [
     {
-      No: 1,
-      date: "2023-01-25",
-      high: "130",
-      low: "90",
-      pulse: "60",
-      writer: "정간호",
+      No: (
+        <p><span><AssignmentIcon sx={{ fontSize: 20 }} />{thead1[0]}</span>  1948.11.15</p>
+      ),
+      date:(
+        <p><span>{thead1[1]}</span> 2023-01-25</p>
+      ), 
+      high: (
+        <p><span>{thead1[2]}</span> 130</p>
+      ),
+      low: (
+        <p><span>{thead1[3]}</span> 90</p>
+      ),
+      pulse: (
+        <p><span>{thead1[4]}</span> 60</p>
+      ),
+      writer: (
+        <p><span>{thead1[5]}</span>정간호</p>
+      ),
     },
   ];
   return (

           </div>
           <div className="modal-main"><div className="board-wrap">        
           <div>
-          <table className="margin-bottom2">
+          <table className="margin-bottom2 detail-table">
             <tr>
               <th>대상자명</th>
               <td className="flex-start">

             </div>
           </div>
           <Table
-              className={"caregiver-user "}
+              className={"caregiver-user senior-table"}
               head={thead1}
               contents={content1}
               contentKey={key1}

24691f8

c9727b5

client/views/component/Modal_ECG.jsx

--- client/views/component/Modal_ECG.jsx

+++ client/views/component/Modal_ECG.jsx


 import React from "react";
 import Button from "./Button.jsx";
 import Table from "./Table.jsx";
+import AssignmentIcon from '@mui/icons-material/Assignment';
 
 export default function Modal({ open, close, }) {
   const thead1 = [

   const key1 = ["No", "date", "file","writer",];
   const content1 = [
     {
-      No: 1,
-      date: "2023-01-25",
-      file: ( <a href="" download="테스트">다운로드</a>),
-      writer: "정간호",
+      No: (
+        <p><span><AssignmentIcon sx={{ fontSize: 20 }} />{thead1[0]}</span> 1</p>
+      ),
+      date: (
+        <p><span>{thead1[1]}</span>  2023-01-25</p>
+      ),
+      file: (
+        <p><span>{thead1[2]}</span> <a href="" download="테스트">다운로드</a></p>
+      ),
+      writer: (
+        <p><span>{thead1[3]}</span>  정간호</p>
+      ),
     },
   ];
   return (

           </div>
           <div className="modal-main"><div className="board-wrap">        
           <div>
-          <table className="margin-bottom2">
+          <table className="margin-bottom2 detail-table ">
             <tr>
               <th>대상자명</th>
               <td className="flex-start">

             </div>
           </div>
           <Table
-              className={"caregiver-user "}
+              className={"caregiver-user senior-table"}
               head={thead1}
               contents={content1}
               contentKey={key1}

24691f8

c9727b5

client/views/pages/equipment/EquipmentManagementSelect.jsx

--- client/views/pages/equipment/EquipmentManagementSelect.jsx

+++ client/views/pages/equipment/EquipmentManagementSelect.jsx


 			<Modal open={modalEquipmentIsOpen} close={modalEquipmentClose} header="장비 등록">
 				<div className="board-wrap">
 					<div>
-						<table className="flex70 margin-bottom">
-							<tbody className="equipment-insert">
+						<table className="flex70 margin-bottom detail-table">
+							<tbody className="equipment-insert ">
 								<tr>
 									<th><span style={{color : "red"}}>*</span>종류</th>
 									<td>

 					<li>납품 장비</li>
 				</ul>
 				<div className="content-wrap">
-					<div className="search-management flex-end margin-bottom2">						
+					<div className="search-management flex-end margin-bottom2 margin-top gap">						
 						<select style={{maxWidth: 'fit-content'}}
 							onChange={(e) => equipmentSearchChange('searchType', e.target.value)}>
 							<option value="equipment_name">모델명</option>

 										<button className={"btn-small gray-btn"} onClick={() => {modalEquipmentOpen()}}>등록</button>
 									</div>
 								</div>
-								<table class="caregiver-user">
+								<table class="caregiver-user protector-user">
 									<thead>
 										<tr>
 											<th>No</th>

 									<tbody>
 										{stockEquipmentList.equipmentList.map((item, idx) => { return (
 											<tr>
-												<td>{stockEquipmentList.equipmentListCount - idx - (stockEquipmentSearch.currentPage - 1) * stockEquipmentSearch.perPage}</td>
-												<td>{item['equipment_name']}</td>
-												<td>{item['equipment_serial_number']}</td>
-												<td>{item['equipment_product_date']}</td>
-												<td>{item['equipment_stock_date']}</td>
-												<td>{equipmentStates[item['equipment_state']]}</td>
-												<td>
+												<td data-label="No">{stockEquipmentList.equipmentListCount - idx - (stockEquipmentSearch.currentPage - 1) * stockEquipmentSearch.perPage}</td>
+												<td data-label="모델명">{item['equipment_name']}</td>
+												<td data-label="시리얼넘버">{item['equipment_serial_number']}</td>
+												<td data-label="생산일자">{item['equipment_product_date']}</td>
+												<td data-label="입고일자">{item['equipment_stock_date']}</td>
+												<td data-label="상태">{equipmentStates[item['equipment_state']]}</td>
+												<td data-label="납품">
 													<button className={"btn-small gray-btn"} onClick={() => modalDeliveryOpen(item)}>장비 납품</button>
 												</td>
-												<td>
+												<td data-label="관리">
 													<button className={"btn-small gray-btn"} onClick={() => modalEquipmentOpen(item)}>정보 수정</button>
 												</td>
 											</tr>

24691f8

c9727b5

client/views/pages/main/Main_agency.jsx

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

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

...	...	@@ -22,11 +22,21 @@
22	22	const key = ["No", "agency", "division", "phone", "address",];
23	23	const content = [
24	24	{
25		- No: 1,
26		- agency: "A복지관",
27		- division: "교환",
28		- phone: "010-1234-5678",
29		- address: "경상북도 군위군 삼국유사면",
	25	+ No: (
	26	+ <p><span>{thead[0]}</span> 1948.11.15</p>
	27	+ ),
	28	+ agency: (
	29	+ <p><span>{thead[1]}</span> A복지관</p>
	30	+ ),
	31	+ division: (
	32	+ <p><span>{thead[2]}</span>교환</p>
	33	+ ),
	34	+ phone: (
	35	+ <p><span>{thead[3]}</span>010-1234-5678</p>
	36	+ ),
	37	+ address: (
	38	+ <p><span>{thead[4]}</span>경상북도 군위군 삼국유사면</p>
	39	+ ),
30	40	},
31	41	];
32	42

24691f8

c9727b5

client/views/pages/visit/visit/VisitSelectOne.jsx

--- client/views/pages/visit/visit/VisitSelectOne.jsx

+++ client/views/pages/visit/visit/VisitSelectOne.jsx


               </tr>
             </tbody>
           </table>
-          <div className="flex-center"><Button className={"btn-small green-btn"} btnName={"저장"} /></div >
+          <div className="flex-center"><Button className={"btn-small gray-btn"} btnName={"저장"} /></div >
         </div>
       </Modal>
       <div className="content-wrap">

...	...	@@ -417,8 +417,8 @@
417	417	}
418	418	.statistics-grid > div{height: 35rem;}
419	419	.statistics-grid .statistics-guardian {
420		- height: 41vh;
421	420	}
	421	+.statistics-grid .statistics-guardian li:nth-child(2) > div{height: 23vh !important;}
422	422	.statistics-grid .statistics-guardian li:nth-child(1) p:nth-child(2){font-size: 2rem; font-weight: bold; margin-right: 1rem;}
423	423	.statistics-grid .statistics-guardian li:nth-child(1) p:nth-child(3){font-size: 1.6rem; }
424	424	.guardian-medicine {
...	...	@@ -428,7 +428,7 @@
428	428	.statistics-guardian li {
429	429	padding: 1rem 3rem;
430	430	background: #ffffff;
431		- border-radius: 20px;
	431	+ border-radius: 10px;
432	432	margin: 0 auto;
433	433	position: relative;
434	434	text-align: center;
...	...	@@ -441,7 +441,7 @@
441	441	left: 22px;
442	442	}
443	443	.chart-guardian {
444		- height: 70%;
	444	+
445	445	}
446	446
447	447	.guardian-table {

...	...	@@ -688,17 +688,22 @@
688	688	}
689	689	.statistics-grid .statistics-guardian {
690	690	margin-bottom: 1rem;
691		- padding: 0;
692		- height: 32vh;
	691	+ padding: 0.5rem;
	692	+
693	693	}
694	694	.statistics-grid .statistics-guardian li {
695	695	padding: 0;
	696	+
696	697	}
697	698	.statistics-grid .statistics-guardian li p:nth-child(1) {
698	699	margin-right: 1rem;
699	700	}
	701	+ .statistics-grid .statistics-guardian li:nth-child(2) {
	702	+ box-shadow: 1px 1px 5px 1px rgb(0 0 0 / 9%);
	703	+ margin-top: 1rem;
	704	+ }
700	705	.statistics-grid .statistics-guardian li:nth-child(1) p:nth-child(2) {
701		- width: 100%;
	706	+
702	707	}
703	708	.statistics-grid .statistics-guardian li:nth-child(1) p:nth-child(3) {
704	709	display: none;
...	...	@@ -822,7 +827,6 @@
822	827	}
823	828
824	829	.container button {
825		- width: 30%;
826	830	}
827	831
828	832	/* 검색창 */
...	...	@@ -955,7 +959,7 @@
955	959	}
956	960
957	961	.modal-main table td {
958		- padding: 0.5rem 0 0 12rem;
	962	+ padding: 0.5rem ;
959	963	}
960	964
961	965	.medicine-revise tr {
...	...	@@ -1149,9 +1153,26 @@
1149	1153	}
1150	1154
1151	1155	.join-group h3{margin-bottom: 3rem;}
	1156	+ .detail-table td{padding: 0 !important;}
	1157	+ .detail-table input[type="text"]{width: -webkit-fill-available;}
	1158	+ .detail-table input[type="file"]{width: -webkit-fill-available;}
	1159	+
	1160	+
	1161	+ .agency-visitlist {
	1162	+ overflow-x: auto;
	1163	+ -webkit-overflow-scrolling: touch;
	1164	+}
	1165	+.agency-visitlist thead{display: none;}
	1166	+.agency-visitlist span{border-bottom: 1px solid #e4dccf; font-weight: bold; padding: 0.5rem; margin-bottom: 0.5rem; display: block;}
	1167	+.agency-visitlist span img{width: 2rem;}
	1168	+.agency-visitlist tr{background-color: #f2f0eb; padding: 1rem; margin-bottom: 1rem;}
	1169	+.agency-visitlist td{background-color: #ffffffde;
	1170	+ border-radius: 5px; margin-bottom: 0.5rem;}
	1171	+ .agency-visitlist .btn-wrap{margin-top: 0;}
	1172	+
1152	1173	}
1153	1174
1154	1175
1155	1176	/* 반응형 그냥 테이블 protector-user / medicine-detail-table
1156	1177	컴포넌트 senior-table
1157		- 상세페이지 questionnaire-table */ (파일 끝에 줄바꿈 문자 없음)
	1178	+ 상세페이지 detail-table */ (파일 끝에 줄바꿈 문자 없음)

...	...	@@ -306,8 +306,8 @@
306	306	<Modal open={modalEquipmentIsOpen} close={modalEquipmentClose} header="장비 등록">
307	307	<div className="board-wrap">
308	308	<div>
309		- <table className="flex70 margin-bottom">
310		- <tbody className="equipment-insert">
	309	+ <table className="flex70 margin-bottom detail-table">
	310	+ <tbody className="equipment-insert ">
311	311	<tr>
312	312	<th><span style={{color : "red"}}>*</span>종류</th>
313	313	<td>
...	...	@@ -403,7 +403,7 @@
403	403	<li>납품 장비</li>
404	404	</ul>
405	405	<div className="content-wrap">
406		- <div className="search-management flex-end margin-bottom2">
	406	+ <div className="search-management flex-end margin-bottom2 margin-top gap">
407	407	<select style={{maxWidth: 'fit-content'}}
408	408	onChange={(e) => equipmentSearchChange('searchType', e.target.value)}>
409	409	<option value="equipment_name">모델명</option>
...	...	@@ -426,7 +426,7 @@
426	426	<button className={"btn-small gray-btn"} onClick={() => {modalEquipmentOpen()}}>등록</button>
427	427	</div>
428	428	</div>
429		- <table class="caregiver-user">
	429	+ <table class="caregiver-user protector-user">
430	430	<thead>
431	431	<tr>
432	432	<th>No</th>
...	...	@@ -442,16 +442,16 @@
442	442	<tbody>
443	443	{stockEquipmentList.equipmentList.map((item, idx) => { return (
444	444	<tr>
445		- <td>{stockEquipmentList.equipmentListCount - idx - (stockEquipmentSearch.currentPage - 1) * stockEquipmentSearch.perPage}</td>
446		- <td>{item['equipment_name']}</td>
447		- <td>{item['equipment_serial_number']}</td>
448		- <td>{item['equipment_product_date']}</td>
449		- <td>{item['equipment_stock_date']}</td>
450		- <td>{equipmentStates[item['equipment_state']]}</td>
451		- <td>
	445	+ <td data-label="No">{stockEquipmentList.equipmentListCount - idx - (stockEquipmentSearch.currentPage - 1) * stockEquipmentSearch.perPage}</td>
	446	+ <td data-label="모델명">{item['equipment_name']}</td>
	447	+ <td data-label="시리얼넘버">{item['equipment_serial_number']}</td>
	448	+ <td data-label="생산일자">{item['equipment_product_date']}</td>
	449	+ <td data-label="입고일자">{item['equipment_stock_date']}</td>
	450	+ <td data-label="상태">{equipmentStates[item['equipment_state']]}</td>
	451	+ <td data-label="납품">
452	452	<button className={"btn-small gray-btn"} onClick={() => modalDeliveryOpen(item)}>장비 납품</button>
453	453	</td>
454		- <td>
	454	+ <td data-label="관리">
455	455	<button className={"btn-small gray-btn"} onClick={() => modalEquipmentOpen(item)}>정보 수정</button>
456	456	</td>
457	457	</tr>

...	...	@@ -1,6 +1,7 @@
1	1	import React from "react";
2	2	import Button from "./Button.jsx";
3	3	import Table from "./Table.jsx";
	4	+import AssignmentIcon from '@mui/icons-material/Assignment';
4	5
5	6	export default function Modal({open, close, }) {
6	7	const thead1 = [
...	...	@@ -14,12 +15,24 @@
14	15	const key1 = ["No", "date", "high","low", "pulse", "writer"];
15	16	const content1 = [
16	17	{
17		- No: 1,
18		- date: "2023-01-25",
19		- high: "130",
20		- low: "90",
21		- pulse: "60",
22		- writer: "정간호",
	18	+ No: (
	19	+ <p><span><AssignmentIcon sx={{ fontSize: 20 }} />{thead1[0]}</span> 1948.11.15</p>
	20	+ ),
	21	+ date:(
	22	+ <p><span>{thead1[1]}</span> 2023-01-25</p>
	23	+ ),
	24	+ high: (
	25	+ <p><span>{thead1[2]}</span> 130</p>
	26	+ ),
	27	+ low: (
	28	+ <p><span>{thead1[3]}</span> 90</p>
	29	+ ),
	30	+ pulse: (
	31	+ <p><span>{thead1[4]}</span> 60</p>
	32	+ ),
	33	+ writer: (
	34	+ <p><span>{thead1[5]}</span>정간호</p>
	35	+ ),
23	36	},
24	37	];
25	38	return (
...	...	@@ -32,7 +45,7 @@
32	45	</div>
33	46	<div className="modal-main"><div className="board-wrap">
34	47	<div>
35		- <table className="margin-bottom2">
	48	+ <table className="margin-bottom2 detail-table">
36	49	<tr>
37	50	<th>대상자명</th>
38	51	<td className="flex-start">
...	...	@@ -70,7 +83,7 @@
70	83	</div>
71	84	</div>
72	85	<Table
73		- className={"caregiver-user "}
	86	+ className={"caregiver-user senior-table"}
74	87	head={thead1}
75	88	contents={content1}
76	89	contentKey={key1}

...	...	@@ -88,7 +88,7 @@
88	88	</tr>
89	89	</tbody>
90	90	</table>
91		- <div className="flex-center"><Button className={"btn-small green-btn"} btnName={"저장"} /></div >
	91	+ <div className="flex-center"><Button className={"btn-small gray-btn"} btnName={"저장"} /></div >
92	92	</div>
93	93	</Modal>
94	94	<div className="content-wrap">

Delete comment