Commit @cd13ca86888fbf1384af6255cd2dab3e9440b0d4

최정임 2023-02-24

Merge branch 'admin' of http://210.180.118.83/yjryu/senior_care_system into admin

@cd13ca86888fbf1384af6255cd2dab3e9440b0d4

92072bd

cd13ca8

client/views/component/Table.jsx

--- client/views/component/Table.jsx

+++ client/views/component/Table.jsx

...	...	@@ -1,7 +1,52 @@
1	1	import React from "react";
	2	+import Button from "./Button.jsx";
2	3	// import styled from "styled-components";
3	4
4		-export default function Table({ head, contents, contentKey, onClick, className}) {
	5	+export default function Table({ head, contents, contentKey, onClick, className, view, offset, limit}) {
	6	+ const [modalOpen, setModalOpen] = React.useState(false);
	7	+ const openModal = () => {
	8	+ setModalOpen(true);
	9	+ };
	10	+
	11	+ const [modalOpen2, setModalOpen2] = React.useState(false);
	12	+ const openModal2 = () => {
	13	+ setModalOpen2(true);
	14	+ };
	15	+
	16	+
	17	+ const buttonPrint = () => {
	18	+ if(view == 'mySenior'){
	19	+ return(
	20	+ <td>
	21	+ <Button
	22	+ className={"btn-small gray-btn"}
	23	+ btnName={"보기"}
	24	+ onClick={openModal}
	25	+ />
	26	+ </td>)
	27	+ }
	28	+ else if(view == 'allSenior'){
	29	+ return(
	30	+ <>
	31	+ <td>
	32	+ <Button
	33	+ className={"btn-small gray-btn"}
	34	+ btnName={"선택"}
	35	+ onClick={openModal2}
	36	+ />
	37	+ </td>
	38	+ <td>
	39	+ <Button
	40	+ className={"btn-small gray-btn"}
	41	+ btnName={"보기"}
	42	+ onClick={openModal}
	43	+ />
	44	+ </td>
	45	+ </>
	46	+ )
	47	+ }
	48	+ }
	49	+
5	50	return (
6	51	<table className={className}>
7	52	<thead>
...	...	@@ -12,17 +57,30 @@
12	57	</tr>
13	58	</thead>
14	59	<tbody>
15		- {contents.map((i, index) => {
	60	+ {contents.slice(offset, offset + limit).map((i, index) => {
16	61	return (
17	62	<tr key={index}>
18		- {contentKey.map((kes) => {
19		- return <td onClick={onClick}>{i[kes]}</td>;
20		- })}
	63	+ {/* // <td>{i.rn}</td>
	64	+ // <td>{i.user_name}</td>
	65	+ // <td>{i.user_phonenumber}</td>
	66	+ // <td>{i.user_gender}</td>
	67	+ // <td>{i.user_birth}</td>
	68	+ // <td>{i.user_address}</td>
	69	+ // {buttonPrint()} */}
	70	+ {contentKey.map((kes) => {
	71	+ return (
	72	+ <>
	73	+ <td onClick={onClick}>{i[kes]}</td>
	74	+ </>
	75	+ )
	76	+ })}
	77	+ {buttonPrint()}
21	78	</tr>
22	79	);
23	80	})}
24	81	</tbody>
25	82	</table>
	83	+
26	84	);
27	85	}
28	86

92072bd

cd13ca8

client/views/pages/equipment/EquipmentManagementSelect.jsx

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

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


 
 export default function EquipmentManagementSelect() {
 
+	// 시스템 코드 - 장비 상태
+	const [equipmentStates, setEquipmentStates] = React.useState({});
+	// 시스템 코드 - 장비 대여 상태
+	const [equipmentRentalStates, setEquipmentRentalStates] = React.useState({});
+
 	const [modalOpen, setModalOpen] = React.useState(false);
 	const openModal = () => {
 		setModalOpen(true);

 	const closeModal = () => {
 		setModalOpen(false);
 	};
-	
+
 	const [modalOpen3, setModalOpen3] = React.useState(false);
 	const openModal3 = () => {
 		// equipmentListData();

 		setModalOpen3(false);
 	};
 
-	// 대상자 매칭 삭제
+	// 대상자 매칭 반납
 	const seniorMatchDelete = () => {
-		if(confirm('등록된 대상자를 삭제하시겠습니까?') == false) {
+		if (confirm('아니다') == false) {
 			return;
 		}
-		// 대상자 매칭 삭제 함수 사용하기
+		// 대상자 매칭 반납 함수 사용하기
 	};
 
 	const navigate = useNavigate();
+
+	// 시스템 코드 - 장비 대여 상태 조회
+	const equipmentStatesSelect = () => {
+		console.log('equipmentStatesSelect Function Run');
+
+		//fetch post
+		fetch("/common/systemCode/equipmentStatesSelect.json", {
+			method: "POST",
+			headers: {
+				'Content-Type': 'application/json; charset=UTF-8'
+			},
+			body: JSON.stringify({})
+		}).then((response) => response.json()).then((data) => {
+			console.log('equipmentStatesSelect response : ', data);
+			setEquipmentStates(data);
+		}).catch((error) => {
+			console.log('equipmentStatesSelect error : ', error);
+		});
+	}
+
+	// 시스템 코드 - 장비 대여 상태 조회
+	const equipmentRentalStatesSelect = () => {
+		console.log('equipmentRentalStatesSelect Function Run');
+
+		//fetch post
+		fetch("/common/systemCode/equipmentRentalStatesSelect.json", {
+			method: "POST",
+			headers: {
+				'Content-Type': 'application/json; charset=UTF-8'
+			},
+			body: JSON.stringify({})
+		}).then((response) => response.json()).then((data) => {
+			console.log('equipmentRentalStatesSelect response : ', data);
+			setEquipmentRentalStates(data);
+		}).catch((error) => {
+			console.log('equipmentRentalStatesSelect error : ', error);
+		});
+
+		//fetch get
+		/* fetch('/common/systemCode/equipmentRentalStatesSelect.json')
+		.then((response) => response.json()).then((data) => {
+			console.log('equipmentRentalStatesSelect response : ', data);
+		}).catch((error) => {
+			console.log('equipmentRentalStatesSelect error : ', error);
+		}); */
+
+		//axios get
+		/* axios.get('/common/systemCode/equipmentRentalStatesSelect.json')
+		.then(function (response) {
+			console.log('equipmentRentalStatesSelect : ', response.data);
+		}).catch(function (error) {
+			console.log("equipmentRentalStatesSelect - error : ", error);
+		}); */
+
+		//axios post
+		/* axios({
+			url: '/common/systemCode/equipmentRentalStatesSelect.json',
+			method: 'post',
+			headers: {
+				'Content-Type': "application/json; charset=UTF-8",
+			},
+			data: {}
+		}).then(function (response) {
+			console.log("equipmentRentalStatesSelect - response : ", response.data);
+		}).catch(function (error) {
+			console.log("equipmentRentalStatesSelect - error : ", error);
+		}); */
+	}
+
+	// 장비 비매칭 대상자 목록 조회
+	const equipmentNotMatchSeniorSelectList = () => {
+		console.log('seniorSelectList Function Run');
+		fetch("/user/equipmentMatchStateSelectListBySenior.json", {
+			method: "POST",
+			headers: {
+				'Content-Type': 'application/json; charset=UTF-8'
+			},
+			body: JSON.stringify({
+				agency_id: 'AGENCY01',
+				matchState: false
+			})
+		}).then((response) => response.json()).then((data) => {
+			console.log('equipmentNotMatchSeniorSelectList response : ', data);
+			setEquipmentNotMatchSeniorList(data);
+		}).catch((error) => {
+			console.log('equipmentNotMatchSeniorSelectList error : ', error);
+		});
+	}
+
+	// 담당자 목록 조회
+	const workerSelectList = () => {
+		console.log('workerSelectList Function Run');
+		fetch("/user/selectUserList.json", {
+			method: "POST",
+			headers: {
+				'Content-Type': 'application/json; charset=UTF-8'
+			},
+			body: JSON.stringify({
+				user_code: 'WORKER01'
+			})
+		}).then((response) => response.json()).then((data) => {
+			console.log('workerSelectList response : ', data);
+			setWorkerList(data);
+		}).catch((error) => {
+			console.log('workerSelectList error : ', error);
+		});
+	}
 
 	/********************************** 관리자 장비 (시작) **********************************/
 	// 관리자 전체 장비 목록

 			headers: {
 				'Content-Type': 'application/json; charset=UTF-8'
 			},
+			body: JSON.stringify({})
 		}).then((response) => response.json()).then((data) => {
 			console.log('equipmentSelectList response : ', data);
 			setEquipmentList(data);

 		"equipment_stock_date",
 		"equipment_state",
 		"agency_name",
-		"user_name",
+		"senior_name",
 	];
 
 	const thead2 = [

 			date: "2022.12.02",
 			agency: (
 				<Button
-					className={"btn-small lightgray-btn"}
+					className={"btn-small gray-btn"}
 					btnName={"선택"}
 					onClick={openModal}
 				/>
 			),
 			senior: (
 				<Button
-					className={"btn-small lightgray-btn"}
+					className={"btn-small gray-btn"}
 					btnName={"선택"}
-					// onClick={openModal2}
+				// onClick={openModal2}
 				/>
 			),
 		},

 			serialNumber: "ABCD-1",
 			date: "2022.12.02",
 			agency: (<Button
-				className={"btn-small lightgray-btn"}
+				className={"btn-small gray-btn"}
 				btnName={"선택"}
 				onClick={openModal}
 			/>),
 			senior: (
 				<Button
-					className={"btn-small lightgray-btn"}
+					className={"btn-small gray-btn"}
 					btnName={"선택"}
-					// onClick={openModal2}
+				// onClick={openModal2}
 				/>
 			),
 		},

 	/********************************** 시행기관 장비 (시작) **********************************/
 	//로그 확인
 	const logCheck = () => {
-		console.log('seniorList - change: ', seniorList);
+		console.log('equipmentNotMatchSeniorList - change: ', equipmentNotMatchSeniorList);
 	};
 
 	// 시행기관 전체 장비 목록

 	const [agencySeniorEquipmentList, setAgencySeniorEquipmentList] = React.useState([]);
 	// 시행기관 재고 장비 목록
 	const [agencyStockEquipmentList, setAgencyStockEquipmentList] = React.useState([]);
-	// 선택 대상자 장비
+	// 선택한 대상자 장비
 	const [seniorEquipment, setSeniorEquipment] = React.useState({});
-	// 대상자 목록
-	const [seniorList, setSeniorList] = React.useState([]);
 	// 대상자 장비 등록 모달창
-	const [seniorMatchModal, setSeniorMatchModal] = React.useState(false);
-	
+	const [seniorMatchInsertModal, setSeniorMatchInsertModal] = React.useState(false);
+	// 대상자 장비 반납 모달창
+	const [seniorMatchReturnModal, setSeniorMatchReturnModal] = React.useState(false);
+
+	// 장비 비매칭 대상자 목록
+	const [equipmentNotMatchSeniorList, setEquipmentNotMatchSeniorList] = React.useState([]);
+	// 담당자 목록
+	const [workerList, setWorkerList] = React.useState([]);
+
 
 	// 대상자 장비 등록 모달창 열기
-	const seniorMatchModalOpen = (item) => {
+	const seniorMatchInsertModalOpen = (item) => {
 		setSeniorEquipment(item); // 선택한 장비 데이터 저장
-		setSeniorMatchModal(true);
+		setSeniorMatchInsertModal(true);
 	};
 	// 대상자 장비 등록 모달창 닫기
-	const seniorMatchModalClose = () => {
-		setSeniorMatchModal(false);
+	const seniorMatchInsertModalClose = () => {
+		setSeniorMatchInsertModal(false);
 	};
 
 	// 대상자 장비 등록 - 대상자

 	};
 
 
+	// 대상자 장비 반납 모달창 열기
+	const seniorMatchReturnModalOpen = (item) => {
+		setSeniorEquipment(item); // 선택한 장비 데이터 저장
+		setSeniorMatchReturnModal(true);
+	};
+
+	// 대상자 장비 반납 모달창 닫기
+	const seniorMatchReturnModalClose = () => {
+		setSeniorMatchReturnModal(false);
+	};
+
+	// 대상자 장비 - 반납일
+	const seniorEquipmentRentalReturnDateInsert = (e) => {
+		console.log('@@@', e.target.value);
+		// 원본 데이터 복사 및 수정
+		let data = {
+			...seniorEquipment,
+			equipment_rental_return_date: e.target.value
+		}
+		// 복사 데이터를 원본 데이터에 덮어쓰기
+		setSeniorEquipment(data);
+	};
+
+	// 대상자 장비 - 반납 담당자
+	const seniorEquipmentReturnUserIdInsert = (e) => {
+		console.log('@@@@@', e.target.value);
+		// 원본 데이터 복사 및 수정
+		let data = {
+			...seniorEquipment,
+			return_user_id: e.target.value
+		}
+		// 복사 데이터를 원본 데이터에 덮어쓰기
+		setSeniorEquipment(data);
+	};
+
+
 	// 시행기관 전체 장비 목록 조회
 	const agencyEquipmentSelectList = () => {
 		console.log('agencyEquipmentSelectList Function Run');
-		fetch("/equipment/agencyEquipmentSelectList.json", {
+		fetch("/equipment/equipmentSelectList.json", {
 			method: "POST",
 			headers: {
 				'Content-Type': 'application/json; charset=UTF-8'
 			},
 			body: JSON.stringify({
 				agency_id: 'AGENCY01',
+				searchAll: true
 			}),
 		}).then((response) => response.json()).then((data) => {
 			console.log('agencyEquipmentSelectList response : ', data);

 	}
 
 	// 시행기관 대상자 장비 목록 조회
-	// const agencySeniorEquipmentSelectList = () => {
-	// 	console.log('agencySeniorEquipmentSelectList Function Run');
-	// 	fetch("/equipment/agencySeniorEquipmentSelectList.json", {
-	// 		method: "POST",
-	// 		headers: {
-	// 			'Content-Type': 'application/json; charset=UTF-8'
-	// 		},
-	// 		body: JSON.stringify({
-	// 			agency_id: 'AGENCY01',
-	// 		}),
-	// 	}).then((response) => response.json()).then((data) => {
-	// 		console.log('agencySeniorEquipmentSelectList response : ', data);
-	// 		setAgencySeniorEquipmentList(data);
-	// 	}).catch((error) => {
-	// 		console.log('agencySeniorEquipmentSelectList error : ', error);
-	// 	});
-	// }
+	const agencySeniorEquipmentSelectList = () => {
+		console.log('agencySeniorEquipmentSelectList Function Run');
+		fetch("/equipment/equipmentSelectList.json", {
+			method: "POST",
+			headers: {
+				'Content-Type': 'application/json; charset=UTF-8'
+			},
+			body: JSON.stringify({
+				agency_id: 'AGENCY01',
+				seniorCheck: true
+			}),
+		}).then((response) => response.json()).then((data) => {
+			console.log('agencySeniorEquipmentSelectList response : ', data);
+			setAgencySeniorEquipmentList(data);
+		}).catch((error) => {
+			console.log('agencySeniorEquipmentSelectList error : ', error);
+		});
+	}
+
+	// 시행기관 재고 장비 목록 조회
+	const agencyStockEquipmentSelectList = () => {
+		console.log('agencyStockEquipmentList Function Run');
+		fetch("/equipment/equipmentSelectList.json", {
+			method: "POST",
+			headers: {
+				'Content-Type': 'application/json; charset=UTF-8'
+			},
+			body: JSON.stringify({
+				agency_id: 'AGENCY01',
+				seniorCheck: false
+			}),
+		}).then((response) => response.json()).then((data) => {
+			console.log('agencyStockEquipmentList response : ', data);
+			setAgencyStockEquipmentList(data);
+		}).catch((error) => {
+			console.log('agencyStockEquipmentList error : ', error);
+		});
+	}
 
 	// 대상자 장비 등록
 	const seniorEquipmentInsert = () => {

 
 		// 대상자 아이디 유효성 검사
 		let check = 0;
-		for(let i = 0; i < seniorList.length; i++) {
-			// 입력한 데이터가 대상자 목록에 있을 경우
-			if(seniorList[i]['user_id'] == seniorEquipment['senior_id']) {
-				console.log('success: ', seniorList[i]['user_id']);
+		for (let i = 0; i < equipmentNotMatchSeniorList.length; i++) {
+			// 입력한 대상자 아이디가 대상자 목록에 있을 경우
+			if (equipmentNotMatchSeniorList[i]['senior_id'] == seniorEquipment['senior_id']) {
+				console.log('success: ', equipmentNotMatchSeniorList[i]['senior_id']);
 				// 원본 데이터 복사 및 수정
 				let data = {
 					...seniorEquipment,
-					user_name: seniorList[i]['user_name']
+					user_name: equipmentNotMatchSeniorList[i]['user_name'],
 				}
 				// 복사 데이터를 원본 데이터에 덮어쓰기
 				setSeniorEquipment(data);

 				check = 1;
 			}
 		}
-		// 입력한 데이터가 대상자 목록에 없을 경우
-		if(check != 1) {
-			console.log('fail: ', seniorList, seniorEquipment['senior_id']);
+		// 입력한 대상자 아이디가 대상자 목록에 없을 경우
+		if (check != 1) {
+			console.log('fail: ', equipmentNotMatchSeniorList, seniorEquipment['senior_id']);
 			alert('존재하지 않는 대상자입니다.');
 			return;
 		}
+
+		// 대여일 유효성 검사
+		/* if(seniorEquipment['equipment_rental_start_date'] == null) {
+			alert('대여일을 입력해 주세요');
+			return;
+		} */
+
+		// 반납 예정일 유효성 검사
+		/* if(seniorEquipment['equipment_rental_end_date'] == null) {
+			alert('반납 예정일 입력해 주세요');
+			return;
+		} */
 
 		fetch("/equipment/seniorEquipmentInsert.json", {
 			method: "POST",

 			console.log('seniorEquipmentInsert response : ', data);
 			// 대상자 장비 데이터 초기화
 			setSeniorEquipment({});
+			//장비 비매칭 대상자 목록 조회
+			equipmentNotMatchSeniorSelectList();
+			// 장비 목록 조회
+			agencyEquipmentSelectList();
+			agencySeniorEquipmentSelectList();
+			agencyStockEquipmentSelectList();
+			// 모달창 닫기
+			setSeniorMatchInsertModal(false);
+
 			alert('등록이 완료됐습니다.');
 		}).catch((error) => {
 			console.log('seniorEquipmentInsert error : ', error);

 		});
 	}
 
-	// 대상자 목록 조회
-	const seniorSelectList = () => {
-		console.log('seniorSelectList Function Run');
-		fetch("/user/selectSubjectList.json", {
+	// 대상자 장비 반납
+	const seniorEquipmentReturn = () => {
+		console.log('seniorEquipmentReturn Function Run');
+
+		// 담당자 아이디 유효성 검사
+		let check = 0;
+		for (let i = 0; i < workerList.length; i++) {
+			// 입력한 담당자 아이디가 담당자 목록에 있을 경우
+			if (workerList[i]['user_id'] == seniorEquipment['return_user_id']) {
+				console.log('success: ', workerList[i]['user_id']);
+				check = 1;
+			}
+		}
+		// 입력한 담당자 아이디가 담당자 목록에 없을 경우
+		if (check != 1) {
+			console.log('fail: ', workerList, seniorEquipment['return_user_id']);
+			alert('존재하지 않는 담당자입니다.');
+			return;
+		}
+
+		// 반납 예정일 유효성 검사
+		/* if(seniorEquipment['equipment_rental_return_date'] == null) {
+			alert('반납일 입력해 주세요');
+			return;
+		} */
+
+		fetch("/equipment/seniorEquipmentReturn.json", {
 			method: "POST",
 			headers: {
 				'Content-Type': 'application/json; charset=UTF-8'
 			},
+			body: JSON.stringify(seniorEquipment),
 		}).then((response) => response.json()).then((data) => {
-			console.log('seniorSelectList response : ', data);
-			setSeniorList(data);
+			console.log('seniorEquipmentReturn response : ', data);
+			// 대상자 장비 데이터 초기화
+			setSeniorEquipment({});
+			//장비 비매칭 대상자 목록 조회
+			equipmentNotMatchSeniorSelectList();
+			// 장비 목록 조회
+			agencyEquipmentSelectList();
+			agencySeniorEquipmentSelectList();
+			agencyStockEquipmentSelectList();
+			// 모달창 닫기
+			setSeniorMatchReturnModal(false);
+
+			alert('반납이 완료됐습니다.');
 		}).catch((error) => {
-			console.log('seniorSelectList error : ', error);
+			console.log('seniorEquipmentReturn error : ', error);
+			alert('반납에 실패했습니다.');
 		});
 	}
 
+
+	// 시행기관 전체 장비 thead, key
 	const thead11 = [
 		"No",
 		"모델 명",
 		"시리얼 넘버",
-		"상태",
-		"대상자",
-		"대여일",
-		"반납예정일",
-		"반납일",
-		"관리"
+		"기기 상태",
+		"대여 상태",
+		"동일 기기 매칭 순번",
+		"대상자 관리",
 	];
 	const key11 = [
 		"equipment_name",
 		"equipment_serial_number",
 		"equipment_state",
-		"user_name",
-		"equipment_rental_start_date",
-		"equipment_rental_end_date",
-		"equipment_rental_return_date"
+		"equipment_rental_state",
 	];
 
+	// 시행기관 대상자 장비 thead, key
 	const thead22 = [
 		"No",
 		"모델 명",
 		"시리얼 넘버",
-		"상태",
+		"기기 상태",
 		"대상자",
 		"대여일",
 		"반납예정일",
-		"반납일",
-		"관리"
+		"동일 기기 매칭 순번",
+		"대상자 관리",
 	];
 	const key22 = [
 		"equipment_name",
 		"equipment_serial_number",
 		"equipment_state",
-		"user_name",
+		"senior_name",
 		"equipment_rental_start_date",
 		"equipment_rental_end_date",
-		"equipment_rental_return_date"
+		"equipment_match_idx",
 	];
 
+	// 시행기관 재고 장비 thead, key
 	const thead33 = [
 		"No",
-		"장비명",
+		"모델 명",
 		"시리얼 넘버",
-		"입고일자",
-		"납품 기관",//관리기관, 올잇메디
-		"대상자",//시행기관
+		"기기 상태",
+		"대상자 관리",
 	];
 	const key33 = [
-		"No",
-		"equipment",
-		"serialNumber",
-		"date",
-		"agency",
-		"senior",
+		"equipment_name",
+		"equipment_serial_number",
+		"equipment_state",
 	];
-	const content33 = [
-		{
-			No: 1,
-			equipment: "스마트약상자",
-			serialNumber: "ABCD-1",
-			date: "2022.12.02",
-			agency: (
-				<Button
-					className={"btn-small lightgray-btn"}
-					btnName={"선택"}
-					onClick={openModal}
-				/>
-			),
-			senior: (
-				<Button
-					className={"btn-small lightgray-btn"}
-					btnName={"선택"}
-					// onClick={openModal2}
-				/>
-			),
-		},
-		{
-			No: 2,
-			equipment: "스마트약상자",
-			serialNumber: "ABCD-1",
-			date: "2022.12.02",
-			agency: (<Button
-				className={"btn-small lightgray-btn"}
-				btnName={"선택"}
-				onClick={openModal}
-			/>),
-			senior: (
-				<Button
-					className={"btn-small lightgray-btn"}
-					btnName={"선택"}
-					// onClick={openModal2}
-				/>
-			),
-		},
+
+	// 장비 대상자 등록 모달창 thead
+	const thead44 = [
+		"대상자",
+		"대여일",
+		"반납예정일",
+		"선택",
+	];
+
+	// 장비 대상자 반납 모달창 thead
+	const thead55 = [
+		"반납일",
+		"반납 담당자",
+		"선택",
 	];
 
 	// 마운트 시 실행 함수
 	React.useEffect(() => {
+		equipmentStatesSelect();
+		equipmentRentalStatesSelect();
+		equipmentNotMatchSeniorSelectList();
+		workerSelectList();
+
+		//관리자
 		equipmentSelectList();
 
+		//시행기관
 		agencyEquipmentSelectList();
-		// agencySeniorEquipmentSelectList();
-		seniorSelectList();
+		agencySeniorEquipmentSelectList();
+		agencyStockEquipmentSelectList();
 	}, [])
-
-	// 대상자, 재고 장비 목록 
-	React.useEffect(() => {
-		console.log('@@@', agencyEquipmentList);
-		let data = [];
-		for(let i = 0; i < agencyEquipmentList.length; i++) {
-			if(agencyEquipmentList[i]['senior_id'] != null) {
-				data.push(agencyEquipmentList[i]);
-			}
-		}
-		console.log('@@@data', data);
-		setAgencySeniorEquipmentList(data);
-	}, [agencyEquipmentList])
 
 	/********************************** 시행기관 장비 (끝) **********************************/
 
+	// 장비 납품 모달창 thead, key
 	const thead4 = [
 		"No",
 		"기관명",

 		{
 			No: 1,
 			agency: (
-				<div className="select-agency">
+				<div>
 					<Category />
 				</div>
 			)

 
 		},
 	];
-	const thead5 = [
-		"대상자",
-		"대여일",
-		"반납예정일",
-		"선택",
-	];
-	const key5 = [
-		"senior",
-		"date",
-		"choice",
-	];
-	const content5 = [
-		{
-			No: 1,
-			senior: (
-				<div>
-					<input type="text" list="senior_list" />
-					<datalist id="senior_list">
-						<option value="대상자1(ID)"></option>
-						<option value="대상자2(ID)"></option>
-						<option value="대상자3(ID)"></option>
-					</datalist>
-				</div>
-			)
-			,
-			choice: (<Button
-				className={"btn-small gray-btn"}
-				btnName={"선택"}
-			/>)
 
-		},
-	];
-
-
-
+	// 장비 탭별 화면
 	const data = [
 		{
 			id: 1,

 						<SubTitle explanation={"장비 클릭 시 지난 매칭이력을 확인할 수 있습니다."} />
 						<div className="btn-wrap flex-end margin-bottom ">
 							<Button
-								className={"btn-small gray-btn"}
+								className={"btn-small green-btn"}
 								btnName={"등록"}
 								onClick={openModal3}
 							/>

 							navigate("/EquipmentManagementSelectOne");
 						}}
 					/> */}
-					<table class = "caregiver-user">
+					<table class="caregiver-user">
 						<thead>
 							<tr>
-							{thead1.map((i) => {
-								return <th>{i}</th>;
-							})}
+								{thead1.map((i) => {
+									return <th>{i}</th>;
+								})}
 							</tr>
 						</thead>
 						<tbody>
 							{equipmentList.map((item, index) => {
-							return (
-								<tr key={index}>
-									<td>{equipmentList.length - index}</td>
-									{key1.map((kes) => {
-										return <td>{item[kes]}</td>
-									})}
-									<td>
-									{
-										item['senior_id'] == null
-										? <Button
-												className={"btn-small green-btn"}
-												btnName={"등록"}
-												onClick={() => seniorMatchModalOpen(item)}
-											/>
-										: <Button
-											className={"btn-small green-btn"}
-											btnName={"삭제"}
-											onClick={seniorMatchDelete}
-										/>
-									}
-									</td>
-								</tr>
-							);
+								return (
+									<tr key={index}>
+										<td>{equipmentList.length - index}</td>
+										{key1.map((kes) => {
+											return <td>{item[kes]}</td>
+										})}
+										<td>
+											{
+												item['senior_id'] == null
+													? <Button
+														className={"btn-small green-btn"}
+														btnName={"등록"}
+														onClick={() => seniorMatchInsertModalOpen(item)}
+													/>
+													: <Button
+														className={"btn-small green-btn"}
+														btnName={"반납"}
+														onClick={seniorMatchDelete}
+													/>
+											}
+										</td>
+									</tr>
+								);
 							})}
 						</tbody>
 					</table>

 						<SubTitle explanation={"장비 클릭 시 지난 매칭이력을 확인할 수 있습니다."} />
 						<div className="btn-wrap flex-end margin-bottom ">
 							<Button
-								className={"btn-small gray-btn"}
+								className={"btn-small green-btn"}
 								btnName={"LOG"}
 								onClick={logCheck}
 							/>
-							<Button
-								className={"btn-small gray-btn"}
-								btnName={"등록"}
-								onClick={openModal3}
-							/>
 						</div>
 					</div>
-					<table class = "caregiver-user">
+					<table class="caregiver-user">
 						<thead>
 							<tr>
-							{thead11.map((i) => {
-								return <th>{i}</th>;
-							})}
+								{thead11.map((i) => {
+									return <th>{i}</th>;
+								})}
 							</tr>
 						</thead>
 						<tbody>
 							{agencyEquipmentList.map((item, index) => {
-							return (
-								<tr key={index}>
-									<td>{agencyEquipmentList.length - index}</td>
-									{key11.map((kes) => {
-										return <td>{item[kes]}</td>
-									})}
-									<td>
-									{
-										item['senior_id'] == null
-										? <Button
-												className={"btn-small green-btn"}
-												btnName={"등록"}
-												onClick={() => seniorMatchModalOpen(item)}
-											/>
-										: <Button
-											className={"btn-small green-btn"}
-											btnName={"삭제"}
-											onClick={seniorMatchDelete}
-										/>
-									}
-									</td>
-								</tr>
-							);
+								if(item)
+								return (
+									<tr key={index}>
+										<td>{agencyEquipmentList.length - index}</td>
+										{/* {key11.map((kes) => {
+											if(kes == "equipment_rental_state") {
+												for(let i = 0; i < Object.keys(equipmentRentalStates).length; i++) {
+													if(item[kes].toString().toUpperCase() == Object.keys(equipmentRentalStates)[i]) {
+														item[kes] = Object.values(equipmentRentalStates)[i];
+													}
+												}
+											}
+											return <td>{item[kes]}</td>
+										})} */}
+										<td>{item['equipment_name']}</td>
+										<td>{item['equipment_serial_number']}</td>
+										{Object.keys(equipmentStates).map((key, idx) => {
+											if(item['equipment_state'] == key)
+											return <td>{Object.values(equipmentStates)[idx]}</td>
+										})}
+										{Object.keys(equipmentRentalStates).map((key, idx) => {
+											if(item['equipment_rental_state'] == key)
+											return <td>{Object.values(equipmentRentalStates)[idx]}</td>
+										})}
+										<td>{item['equipment_match_idx']}</td>
+										<td>
+											{
+												item['equipment_rental_state'] == 'RENTABLE'
+													? <Button
+														className={"btn-small green-btn"}
+														btnName={"등록"}
+														onClick={() => seniorMatchInsertModalOpen(item)}
+													/>
+													: <Button
+														className={"btn-small green-btn"}
+														btnName={"반납"}
+														onClick={() => seniorMatchReturnModalOpen(item)}
+													/>
+											}
+										</td>
+									</tr>
+								);
 							})}
 						</tbody>
 					</table>

 			title: "대상자 장비(시행기관)" + "(" + agencySeniorEquipmentList.length + ")",
 			description: (
 				<div>
-					{/* <table class = "caregiver-user">
+					<div className="flex">
+						<SubTitle explanation={"장비 클릭 시 지난 매칭이력을 확인할 수 있습니다."} />
+					</div>
+					<table class="caregiver-user">
 						<thead>
 							<tr>
-							{thead22.map((i) => {
-								return <th>{i}</th>;
-							})}
+								{thead22.map((i) => {
+									return <th>{i}</th>;
+								})}
 							</tr>
 						</thead>
 						<tbody>
 							{agencySeniorEquipmentList.map((item, index) => {
-							return (
-								<tr key={index}>
-									<td>{agencySeniorEquipmentList.length - index}</td>
-									{key22.map((kes) => {
-										return <td>{item[kes]}</td>
-									})}
-									<td>
-										<Button
-											className={"btn-small green-btn"}
-											btnName={"삭제"}
-											onClick={seniorMatchDelete}
-										/>
-									</td>
-								</tr>
-							);
-							})}
-						</tbody>
-					</table> */}
-					<table class = "caregiver-user">
-						<thead>
-							<tr>
-							{thead22.map((i) => {
-								return <th>{i}</th>;
-							})}
-							</tr>
-						</thead>
-						<tbody>
-							{agencySeniorEquipmentList.map((item, index) => {
-							return (
-								<tr key={index}>
-									<td>{agencySeniorEquipmentList.length - index}</td>
-									{key22.map((kes) => {
-										return <td>{item[kes]}</td>
-									})}
-									<td>
-										<Button
-											className={"btn-small green-btn"}
-											btnName={"삭제"}
-											onClick={seniorMatchDelete}
-										/>
-									</td>
-								</tr>
-							);
+								return (
+									<tr key={index}>
+										<td>{agencySeniorEquipmentList.length - index}</td>
+										{key22.map((kes) => {
+											return <td>{item[kes]}</td>
+										})}
+										<td>
+											{
+												<Button
+													className={"btn-small green-btn"}
+													btnName={"반납"}
+													onClick={() => seniorMatchReturnModalOpen(item)}
+												/>
+											}
+										</td>
+									</tr>
+								);
 							})}
 						</tbody>
 					</table>

 		},
 		{
 			id: 6,
-			title: "재고 장비(시행기관)" + "(" + ")",
+			title: "재고 장비(시행기관)" + "(" + agencyStockEquipmentList.length + ")",
 			description: (
-				<Table
-					className={"caregiver-user"}
-					head={thead33}
-					contents={content33}
-					contentKey={key33}
-				/>
+				<div>
+					<div className="flex">
+						<SubTitle explanation={"장비 클릭 시 지난 매칭이력을 확인할 수 있습니다."} />
+					</div>
+					<table class="caregiver-user">
+						<thead>
+							<tr>
+								{thead33.map((i) => {
+									return <th>{i}</th>;
+								})}
+							</tr>
+						</thead>
+						<tbody>
+							{agencyStockEquipmentList.map((item, index) => {
+								return (
+									<tr key={index}>
+										<td>{agencyStockEquipmentList.length - index}</td>
+										{key33.map((kes) => {
+											return <td>{item[kes]}</td>
+										})}
+										<td>
+											{
+												<Button
+													className={"btn-small green-btn"}
+													btnName={"등록"}
+													onClick={() => seniorMatchInsertModalOpen(item)}
+												/>
+											}
+										</td>
+									</tr>
+								);
+							})}
+						</tbody>
+					</table>
+				</div>
 			),
 		},
 	];
 
 	//시작 탭 설정
 	const [index, setIndex] = React.useState(4);
+
 	return (
 		<main>
 			<Modal open={modalOpen} close={closeModal} header="납품 기관 선택">

 							contentKey={key4}
 						/>
 					</div>
-				</div>
-			</Modal>
-			<Modal open={seniorMatchModal} close={seniorMatchModalClose} header="대상자 장비 등록">
-				<div className="board-wrap">
-					<div>
-						<table className={"caregiver-user"}>
-							<thead>
-								<tr>
-								{thead5.map((i) => {
-									return <th>{i}</th>;
-								})}
-								</tr>
-							</thead>
-							<tbody>
-								<tr>
-									<td>
-										<input type="text" list="senior_list" placeholder="대상자를 입력해 주세요" onChange={seniorEquipmentSeniorInsert}/>
-										<datalist id="senior_list">
-											{seniorList.map((item) => {
-												// return <option value={item['user_name'] + " (" + item['user_id'] + ")"}></option>
-												return <option value={item['user_id']}>{item['user_name']}</option>
-
-											})}
-										</datalist>
-									</td>
-									<td>
-										<input type="date" onChange={seniorEquipmentRentalStartDateInsert}/>
-									</td>
-									<td>
-										<input type="date" onChange={seniorEquipmentRentalEndDateInsert}/>
-									</td>
-									<td>
-										<Button
-											className={"btn-small gray-btn"}
-											btnName={"선택"}
-											onClick={seniorEquipmentInsert}
-										/>
-									</td>
-								</tr>
-							</tbody>
-						</table>
-					</div>
 					<div>
 						<Button
 							className={"btn-100 green-btn"}
 							btnName={"닫기"}
-							onClick={seniorMatchModalClose}
+							onClick={closeModal}
 						/>
 					</div>
 				</div>
 			</Modal>
+
 			<Modal open={modalOpen3} close={closeModal3} header="장비 등록">
 				<div className="board-wrap">
 					<div>

 							</tbody>
 						</table>
 					</div>
-					<div className="flex-center">
+					<div>
 						<Button
-							className={"btn-small red-btn"}
+							className={"btn-100 green-btn"}
 							btnName={"저장"}
 							onClick={closeModal3}
 						/>
 					</div>
 				</div>
 			</Modal>
+			
+			<Modal open={seniorMatchInsertModal} close={seniorMatchInsertModalClose} header="대상자 장비 등록">
+				<div className="board-wrap">
+					<div>
+						<table className={"caregiver-user"}>
+							<thead>
+								<tr>
+									{thead44.map((i) => {
+										return <th>{i}</th>;
+									})}
+								</tr>
+							</thead>
+							<tbody>
+								<tr>
+									<td>
+										<input type="text" list="senior_list" placeholder="대상자를 입력해 주세요" onChange={seniorEquipmentSeniorInsert} />
+										<datalist id="senior_list">
+											{equipmentNotMatchSeniorList.map((item) => {
+												// return <option value={item['user_name'] + " (" + item['senior_id'] + ")"}></option>
+												return <option value={item['senior_id']}>{item['user_name']}</option>
+
+											})}
+										</datalist>
+									</td>
+									<td>
+										<input type="date" onChange={seniorEquipmentRentalStartDateInsert} />
+									</td>
+									<td>
+										<input type="date" onChange={seniorEquipmentRentalEndDateInsert} />
+									</td>
+									<td>
+										<Button
+											className={"btn-small gray-btn"}
+											btnName={"선택"}
+											onClick={seniorEquipmentInsert}
+										/>
+									</td>
+								</tr>
+							</tbody>
+						</table>
+					</div>
+					<div>
+						<Button
+							className={"btn-100 green-btn"}
+							btnName={"닫기"}
+							onClick={seniorMatchInsertModalClose}
+						/>
+					</div>
+				</div>
+			</Modal>
+
+			<Modal open={seniorMatchReturnModal} close={seniorMatchReturnModalClose} header="대상자 장비 반납">
+				<div className="board-wrap">
+					<div>
+						<table className={"caregiver-user"}>
+							<thead>
+								<tr>
+									{thead55.map((i) => {
+										return <th>{i}</th>;
+									})}
+								</tr>
+							</thead>
+							<tbody>
+								<tr>
+									<td>
+										<input type="date" onChange={seniorEquipmentRentalReturnDateInsert} />
+									</td>
+									<td>
+										<input type="text" list="senior_list" placeholder="반납 담당자를 입력해 주세요" onChange={seniorEquipmentReturnUserIdInsert} />
+										<datalist id="senior_list">
+											{workerList.map((item) => {
+												return <option value={item['user_id']}>{item['user_name']}</option>
+											})}
+										</datalist>
+									</td>
+									<td>
+										<Button
+											className={"btn-small gray-btn"}
+											btnName={"선택"}
+											onClick={seniorEquipmentReturn}
+										/>
+									</td>
+								</tr>
+							</tbody>
+						</table>
+					</div>
+					<div>
+						<Button
+							className={"btn-100 green-btn"}
+							btnName={"닫기"}
+							onClick={seniorMatchInsertModalClose}
+						/>
+					</div>
+				</div>
+			</Modal>
+
+
 			<div className="tab-container">
 				<ul className="tab-menu">
 					{data.map((item) => (

92072bd

cd13ca8

client/views/pages/user_management/UserAuthoriySelect_agency.jsx

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

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


 import SubTitle from "../../component/SubTitle.jsx";
 import Modal from "../../component/Modal.jsx";
 import { useNavigate } from "react-router";
+import Pagination from "../../component/Pagination.jsx";
 
 export default function UserAuthoriySelect_agency() {
   // 화면 진입 시 탭 별 노출될ㄹ 리스트 초기화 
   const [subjectList, setSubjectList] = React.useState([]);
   const [subjectMyList, setSubjectMyList] = React.useState([]);
   
+
+  //페이징 작업
+  const limit = 10; // 페이지당 보여줄 공지 개수
+  const [page, setPage] = React.useState(1); //page index
+  const offset = (page - 1) * limit; //게시물 위치 계산
+  const [myUserTotal, setMyUserTotal] = React.useState(0); //최대길이 넣을 변수
+  const [userTotal, setUserTotal] = React.useState(0); //최대길이 넣을 변수
+
   // ------ 등록 버튼 클릭 시 노출되는 모달 데이터 ------//
+
   // 사용자 등록 시 초기값 세팅
   const [userName, setUserName] = React.useState("");
   const [gender, setGender] = React.useState("");

   const [medicineD, setMedicineD] = React.useState(false);
   const [medication, setMedication] = React.useState("");
   const [note, setNote] = React.useState("");
-
+  
+  // 등록 후 초기화 진행
+  const dataReset = () => {
+    setUserName("");
+    setGender("");
+    setBrith("");
+    setTelNum("");
+    setHomeAddress("");
+    setMedicineM("");
+    setMedicineL("");
+    setMedicineD("");
+    setMedication("");
+    setNote("");
+  }
   // 변경되는 데이터 Handler
   const handleUserName = (e) => {
     setUserName(e.target.value);

     setBrith(e.target.value);
   };
   const handleTelNum = (e) => {
-    e.target.value =  e.target.value.replace(/[^0-9]/g, '').replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-$2-$3`);
+    e.target.value = e.target.value.replace(/[^0-9]/g, '').replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-$2-$3`);
     setTelNum(e.target.value);
   };
   const handleHomeAddress = (e) => {

   };
 
   // 대상자 등록 함수 
-  const seniorInsert = () => {
-    // userName,gender,brith, telNum, homeAddress, note, medicineM, medicineL, medicineD
-    // console.log("userName : ",userName);
-    // console.log("gender : ",gender);
-    // console.log("brith : ",brith);
-    // console.log("telNum : ",telNum);
-    // console.log("homeAddress : ",homeAddress);
-    // console.log("note : ",note);
-    // console.log("medicineM : ",medicineM);
-    // console.log("medicineL : ",medicineL);
-    // console.log("medicineD : ",medicineD);
+  const InsertSenior = () => {
     var insertBtn = confirm("등록하시겠습니까?");
-    if(insertBtn){
-      fetch("/user/userInsert_userMadicationInsert.json", {
-        method: "POST",
-        headers: {
-          'Content-Type': 'application/json; charset=UTF-8'
-        },
-        body: JSON.stringify({
-          userName:userName,
-          gender:gender,
-          brith :brith,
-          userTel :telNum,
-          homeAddress:homeAddress,
-          medicineM:medicineM,
-          medicineL:medicineL,
-          medicineD:medicineD,
-          medication:medication,
-          note:note,
-          agancyId:'agency1',
-          govId:'government1',
-          userCode : '4'
-        }),
-      }).then((response) => response.json()).then((data) => {
-        alert("등록 되었습니다.");
-      }).catch((error) => {
-        console.log('selectNotice() /Notice/selectNotice.json error : ', error);
-      });
-    }else{
-        return;
+    if (insertBtn) {
+      InsertUserData();
+      alert("등록 되었습니다.");
+      dataReset();
+      closeModal3();
+      getSelectSubjectList();
+      getSelectMySubjectList();
+    } else {
+      return;
     }
-    
+
   };
-
+  // 대상자 정보 등록을 위한 함수 
+  const InsertUserData = () => {
+    fetch("/user/insertSeniorData.json", {
+      method: "POST",
+      headers: {
+        'Content-Type': 'application/json; charset=UTF-8'
+      },
+      body: JSON.stringify({
+        user_name: userName,
+        user_gender: gender,
+        user_birth: brith,
+        user_phonenumber: telNum,
+        user_address: homeAddress,
+        agency_id: 'agency1',
+        government_id: 'government1',
+        user_code: '4'
+      }),
+    }).then((response) => response.json()).then((data) => {
+      console.log("대상자 정보 등록");
+      InsertUserPillData();
+    }).catch((error) => {
+      console.log('insertSeniorData() /Notice/insertSeniorData.json error : ', error);
+    });
+  };
+  // 대상자 약 복용 정보 등록을 위한 함수 
+  const InsertUserPillData = () => {
+    fetch("/user/insertSeniorMadication.json", {
+      method: "POST",
+      headers: {
+        'Content-Type': 'application/json; charset=UTF-8'
+      },
+      body: JSON.stringify({
+        user_phonenumber: telNum,
+        breakfast_medication_check: medicineM,
+        lunch_medication_check: medicineL,
+        dinner_medication_check: medicineD,
+        medication_pill: medication,
+        senior_note: note,
+      }),
+    }).then((response) => response.json()).then((data) => {
+      console.log("약 정보 등록");
+    }).catch((error) => {
+      console.log('InsertUserPillData() /user/insertSeniorMadication.json error : ', error);
+    });
+  };
+ //select 
   const getSelectSubjectList = () => {
-    fetch("/user/selectSubjectList.json", {
-          method: "POST",
-          headers: {
-            'Content-Type': 'application/json; charset=UTF-8'
-          },
-        }).then((response) => response.json()).then((data) => {
-          const rowData = data;
-          console.log(data);
-          setSubjectList(rowData)
-
-        }).catch((error) => {
-          console.log('getSelectSubjectList() /user/selectSubjectList.json error : ', error);
-        });
+    fetch("/user/selectUserList.json", {
+      method: "POST",
+      headers: {
+        'Content-Type': 'application/json; charset=UTF-8'
+      },
+      body: JSON.stringify({
+        user_code: '4',
+      }),
+    }).then((response) => response.json()).then((data) => {
+      const rowData = data;
+      console.log(data);
+      setSubjectList(rowData)
+      setUserTotal(rowData.length)
+    }).catch((error) => {
+      console.log('getSelectSubjectList() /user/selectUserList.json error : ', error);
+    });
   };
 
   const getSelectMySubjectList = () => {
-    fetch("/user/selectMySubjectList.json", {
-          method: "POST",
-          headers: {
-            'Content-Type': 'application/json; charset=UTF-8'
-          },
-          body: JSON.stringify({
-            agancyId: 'agency1',
-          }),
-        }).then((response) => response.json()).then((data) => {
-          const rowData = data;
-          console.log(data);
-          setSubjectMyList(rowData)
-        }).catch((error) => {
-          console.log('getSubjectMySelect() /user/selectMySubjectList.json error : ', error);
-        });
+    fetch("/user/selectMyUserList.json", {
+      method: "POST",
+      headers: {
+        'Content-Type': 'application/json; charset=UTF-8'
+      },
+      body: JSON.stringify({
+        agency_id: 'agency1',
+        user_code: '4',
+      }),
+    }).then((response) => response.json()).then((data) => {
+      const rowData = data;
+      console.log(data);
+      setSubjectMyList(rowData)
+      setMyUserTotal(rowData.length)
+    }).catch((error) => {
+      console.log('getSubjectMySelect() /user/selectMyUserList.json error : ', error);
+    });
   };
 
   const navigate = useNavigate();

     "생년월일",
     "주소",
     "보호자",
-    
+
   ];
   const key1 = [
     // "No", "name", "Id", "call", "gender", "birth", "address", "management"

       id: 1,
       title: "내가 관리하는 대상자",
       description: (
-        
+
         <Table
           className={"protector-user"}
           head={thead1}
           contents={subjectMyList}
           contentKey={key1}
+          view={"mySenior"}
+          offset={offset}
+          limit={limit}
         />
       ),
     },

           head={thead2}
           contents={subjectList}
           contentKey={key2}
+          view={"allSenior"}
+          offset={offset}
+          limit={limit}
         />
       ),
     },

 
   const [index, setIndex] = React.useState(1);
 
+  
   React.useEffect(() => {
     getSelectSubjectList();
     getSelectMySubjectList();

       </Modal>
       <Modal open={modalOpen2} close={closeModal2} header="담당자 배정">
         <div className="board-wrap">
-          <SubTitle explanation={"담당자 선택"} className="margin-bottom"/>
+          <SubTitle explanation={"담당자 선택"} className="margin-bottom" />
           <div className="flex-start protectorlist margin-bottom5">
             <input type="text" list="protectorlist" />
             <datalist id="protectorlist">

       </Modal>
       <Modal open={modalOpen3} close={closeModal3} header="대상자 등록">
         <div className="board-wrap">
-          <SubTitle explanation={"회원 등록 시 ID는 연락처, 패스워드는 생년월일 8자리입니다."} className="margin-bottom"/>
+          <SubTitle explanation={"회원 등록 시 ID는 연락처, 패스워드는 생년월일 8자리입니다."} className="margin-bottom" />
           <table className="margin-bottom2 senior-insert">
-          {/* <tr>
+            {/* <tr>
               <th>대상자등록번호</th>
               <td colSpan={3} className="flex">
                 <input type="text" placeholder="생성하기 버튼 클릭 시 자동으로 생성됩니다."/>

               </td>
             </tr>
             <tr>
-            <th>생년월일</th>
+              <th>생년월일</th>
               <td>
                 <div className="flex">
                   <input type='date' value={brith} onChange={handleBrithday} />

               <td>
               <input type="text" />
               </td> */}
-              
+
             </tr>
             <tr>
               <th>연락처</th>

             <tr>
               <th>필요 복약</th>
               <td>
-              <div className="flex">
-                  <input type="checkbox" name="medicationSelect" checked={medicineM} onClick={(e) => {handleMedicineM(e)}} /><label for="medicationTime">아침</label>
-                  <input type="checkbox" name="medicationSelect" checked={medicineL} onClick={(e) => {handleMedicineL(e)}}/><label for="medicationTime">점심</label>
-                  <input type="checkbox" name="medicationSelect" checked={medicineD} onClick={(e) => {handleMedicineD(e)}}/><label for="medicationTime">저녁</label>
+                <div className="flex">
+                  <input type="checkbox" name="medicationSelect" checked={medicineM} onClick={(e) => { handleMedicineM(e) }} /><label for="medicationTime">아침</label>
+                  <input type="checkbox" name="medicationSelect" checked={medicineL} onClick={(e) => { handleMedicineL(e) }} /><label for="medicationTime">점심</label>
+                  <input type="checkbox" name="medicationSelect" checked={medicineD} onClick={(e) => { handleMedicineD(e) }} /><label for="medicationTime">저녁</label>
                 </div>
               </td>
             </tr>

                 <textarea className="note" cols="30" rows="2" value={note} onChange={handleNote}></textarea>
               </td>
             </tr>
-            
+
             {/* <tr>
               <th>기저질환</th>
               <td colSpan={3}>

               </td>
             </tr> */}
           </table>
-            <div className="btn-wrap flex-center">
-              <Button
-                className={"btn-small green-btn"}
-                btnName={"등록"}
-                onClick={() => {
-                  seniorInsert(userName,gender,brith, telNum, homeAddress, note, medicineM, medicineL, medicineD)
-                }}
-              />
-            </div>
+          <div className="btn-wrap flex-center">
+            <Button
+              className={"btn-small green-btn"}
+              btnName={"등록"}
+              onClick={() => {
+                InsertSenior(userName, gender, brith, telNum, homeAddress, note, medicineM, medicineL, medicineD)
+              }}
+            />
+          </div>
         </div>
       </Modal>
 

             />
           </div>
           <div className="btn-wrap flex-end">
-            <Button className={"btn-small green-btn"} btnName={"등록"} onClick={openModal3}/>
+            <Button className={"btn-small green-btn"} btnName={"등록"} onClick={openModal3} />
           </div>
           <ul className="tab-content">
             {data

                 <li>{item.description}</li>
               ))}
           </ul>
+          <div>
+            <Pagination total={data.id == 1 ? myUserTotal:userTotal} limit={limit} page={page} setPage={setPage} />
+          </div>
         </div>
       </div>
     </main>

Add a comment

Open 0
Closed 0

List

...	...	@@ -0,0 +1,26 @@
	1	+import React from "react";
	2	+import styled from "styled-components";
	3	+
	4	+export default function Pagination({ total, limit, page, setPage }) {
	5	+ const numPages = Math.ceil(total / limit);
	6	+
	7	+ return (
	8	+ <>
	9	+ <Paging>
	10	+ <button onClick={() => setPage(page - 1)} disabled={page === 1}><</button>
	11	+ {Array(numPages).fill().map((_, i) => (
	12	+ <button key={i + 1} onClick={() => setPage(i + 1)} aria-current={page === i + 1 ? "page" : null}> {i + 1} </button>
	13	+ ))}
	14	+ <button onClick={() => setPage(page + 1)} disabled={page === numPages}>></button>
	15	+ </Paging>
	16	+ </>
	17	+ );
	18	+}
	19	+
	20	+const Paging = styled.div`
	21	+ display: flex;
	22	+ justify-content: center;
	23	+ align-items: center;
	24	+ gap: 4px;
	25	+ margin: 16px;
	26	+`;(No newline at end of file)

...	...	@@ -4,13 +4,23 @@
4	4	import SubTitle from "../../component/SubTitle.jsx";
5	5	import Modal from "../../component/Modal.jsx";
6	6	import { useNavigate } from "react-router";
	7	+import Pagination from "../../component/Pagination.jsx";
7	8
8	9	export default function UserAuthoriySelect_agency() {
9	10	// 화면 진입 시 탭 별 노출될ㄹ 리스트 초기화
10	11	const [subjectList, setSubjectList] = React.useState([]);
11	12	const [subjectMyList, setSubjectMyList] = React.useState([]);
12	13
	14	+
	15	+ //페이징 작업
	16	+ const limit = 10; // 페이지당 보여줄 공지 개수
	17	+ const [page, setPage] = React.useState(1); //page index
	18	+ const offset = (page - 1) * limit; //게시물 위치 계산
	19	+ const [myUserTotal, setMyUserTotal] = React.useState(0); //최대길이 넣을 변수
	20	+ const [userTotal, setUserTotal] = React.useState(0); //최대길이 넣을 변수
	21	+
13	22	// ------ 등록 버튼 클릭 시 노출되는 모달 데이터 ------//
	23	+
14	24	// 사용자 등록 시 초기값 세팅
15	25	const [userName, setUserName] = React.useState("");
16	26	const [gender, setGender] = React.useState("");
...	...	@@ -22,7 +32,20 @@
22	32	const [medicineD, setMedicineD] = React.useState(false);
23	33	const [medication, setMedication] = React.useState("");
24	34	const [note, setNote] = React.useState("");
25		-
	35	+
	36	+ // 등록 후 초기화 진행
	37	+ const dataReset = () => {
	38	+ setUserName("");
	39	+ setGender("");
	40	+ setBrith("");
	41	+ setTelNum("");
	42	+ setHomeAddress("");
	43	+ setMedicineM("");
	44	+ setMedicineL("");
	45	+ setMedicineD("");
	46	+ setMedication("");
	47	+ setNote("");
	48	+ }
26	49	// 변경되는 데이터 Handler
27	50	const handleUserName = (e) => {
28	51	setUserName(e.target.value);
...	...	@@ -34,7 +57,7 @@
34	57	setBrith(e.target.value);
35	58	};
36	59	const handleTelNum = (e) => {
37		- e.target.value = e.target.value.replace(/[^0-9]/g, '').replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-$2-$3`);
	60	+ e.target.value = e.target.value.replace(/[^0-9]/g, '').replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-$2-$3`);
38	61	setTelNum(e.target.value);
39	62	};
40	63	const handleHomeAddress = (e) => {
...	...	@@ -57,82 +80,103 @@
57	80	};
58	81
59	82	// 대상자 등록 함수
60		- const seniorInsert = () => {
61		- // userName,gender,brith, telNum, homeAddress, note, medicineM, medicineL, medicineD
62		- // console.log("userName : ",userName);
63		- // console.log("gender : ",gender);
64		- // console.log("brith : ",brith);
65		- // console.log("telNum : ",telNum);
66		- // console.log("homeAddress : ",homeAddress);
67		- // console.log("note : ",note);
68		- // console.log("medicineM : ",medicineM);
69		- // console.log("medicineL : ",medicineL);
70		- // console.log("medicineD : ",medicineD);
	83	+ const InsertSenior = () => {
71	84	var insertBtn = confirm("등록하시겠습니까?");
72		- if(insertBtn){
73		- fetch("/user/userInsert_userMadicationInsert.json", {
74		- method: "POST",
75		- headers: {
76		- 'Content-Type': 'application/json; charset=UTF-8'
77		- },
78		- body: JSON.stringify({
79		- userName:userName,
80		- gender:gender,
81		- brith :brith,
82		- userTel :telNum,
83		- homeAddress:homeAddress,
84		- medicineM:medicineM,
85		- medicineL:medicineL,
86		- medicineD:medicineD,
87		- medication:medication,
88		- note:note,
89		- agancyId:'agency1',
90		- govId:'government1',
91		- userCode : '4'
92		- }),
93		- }).then((response) => response.json()).then((data) => {
94		- alert("등록 되었습니다.");
95		- }).catch((error) => {
96		- console.log('selectNotice() /Notice/selectNotice.json error : ', error);
97		- });
98		- }else{
99		- return;
	85	+ if (insertBtn) {
	86	+ InsertUserData();
	87	+ alert("등록 되었습니다.");
	88	+ dataReset();
	89	+ closeModal3();
	90	+ getSelectSubjectList();
	91	+ getSelectMySubjectList();
	92	+ } else {
	93	+ return;
100	94	}
101		-
	95	+
102	96	};
103		-
	97	+ // 대상자 정보 등록을 위한 함수
	98	+ const InsertUserData = () => {
	99	+ fetch("/user/insertSeniorData.json", {
	100	+ method: "POST",
	101	+ headers: {
	102	+ 'Content-Type': 'application/json; charset=UTF-8'
	103	+ },
	104	+ body: JSON.stringify({
	105	+ user_name: userName,
	106	+ user_gender: gender,
	107	+ user_birth: brith,
	108	+ user_phonenumber: telNum,
	109	+ user_address: homeAddress,
	110	+ agency_id: 'agency1',
	111	+ government_id: 'government1',
	112	+ user_code: '4'
	113	+ }),
	114	+ }).then((response) => response.json()).then((data) => {
	115	+ console.log("대상자 정보 등록");
	116	+ InsertUserPillData();
	117	+ }).catch((error) => {
	118	+ console.log('insertSeniorData() /Notice/insertSeniorData.json error : ', error);
	119	+ });
	120	+ };
	121	+ // 대상자 약 복용 정보 등록을 위한 함수
	122	+ const InsertUserPillData = () => {
	123	+ fetch("/user/insertSeniorMadication.json", {
	124	+ method: "POST",
	125	+ headers: {
	126	+ 'Content-Type': 'application/json; charset=UTF-8'
	127	+ },
	128	+ body: JSON.stringify({
	129	+ user_phonenumber: telNum,
	130	+ breakfast_medication_check: medicineM,
	131	+ lunch_medication_check: medicineL,
	132	+ dinner_medication_check: medicineD,
	133	+ medication_pill: medication,
	134	+ senior_note: note,
	135	+ }),
	136	+ }).then((response) => response.json()).then((data) => {
	137	+ console.log("약 정보 등록");
	138	+ }).catch((error) => {
	139	+ console.log('InsertUserPillData() /user/insertSeniorMadication.json error : ', error);
	140	+ });
	141	+ };
	142	+ //select
104	143	const getSelectSubjectList = () => {
105		- fetch("/user/selectSubjectList.json", {
106		- method: "POST",
107		- headers: {
108		- 'Content-Type': 'application/json; charset=UTF-8'
109		- },
110		- }).then((response) => response.json()).then((data) => {
111		- const rowData = data;
112		- console.log(data);
113		- setSubjectList(rowData)
114		-
115		- }).catch((error) => {
116		- console.log('getSelectSubjectList() /user/selectSubjectList.json error : ', error);
117		- });
	144	+ fetch("/user/selectUserList.json", {
	145	+ method: "POST",
	146	+ headers: {
	147	+ 'Content-Type': 'application/json; charset=UTF-8'
	148	+ },
	149	+ body: JSON.stringify({
	150	+ user_code: '4',
	151	+ }),
	152	+ }).then((response) => response.json()).then((data) => {
	153	+ const rowData = data;
	154	+ console.log(data);
	155	+ setSubjectList(rowData)
	156	+ setUserTotal(rowData.length)
	157	+ }).catch((error) => {
	158	+ console.log('getSelectSubjectList() /user/selectUserList.json error : ', error);
	159	+ });
118	160	};
119	161
120	162	const getSelectMySubjectList = () => {
121		- fetch("/user/selectMySubjectList.json", {
122		- method: "POST",
123		- headers: {
124		- 'Content-Type': 'application/json; charset=UTF-8'
125		- },
126		- body: JSON.stringify({
127		- agancyId: 'agency1',
128		- }),
129		- }).then((response) => response.json()).then((data) => {
130		- const rowData = data;
131		- console.log(data);
132		- setSubjectMyList(rowData)
133		- }).catch((error) => {
134		- console.log('getSubjectMySelect() /user/selectMySubjectList.json error : ', error);
135		- });
	163	+ fetch("/user/selectMyUserList.json", {
	164	+ method: "POST",
	165	+ headers: {
	166	+ 'Content-Type': 'application/json; charset=UTF-8'
	167	+ },
	168	+ body: JSON.stringify({
	169	+ agency_id: 'agency1',
	170	+ user_code: '4',
	171	+ }),
	172	+ }).then((response) => response.json()).then((data) => {
	173	+ const rowData = data;
	174	+ console.log(data);
	175	+ setSubjectMyList(rowData)
	176	+ setMyUserTotal(rowData.length)
	177	+ }).catch((error) => {
	178	+ console.log('getSubjectMySelect() /user/selectMyUserList.json error : ', error);
	179	+ });
136	180	};
137	181
138	182	const navigate = useNavigate();
...	...	@@ -181,7 +225,7 @@
181	225	"생년월일",
182	226	"주소",
183	227	"보호자",
184		-
	228	+
185	229	];
186	230	const key1 = [
187	231	// "No", "name", "Id", "call", "gender", "birth", "address", "management"
...	...	@@ -339,12 +383,15 @@
339	383	id: 1,
340	384	title: "내가 관리하는 대상자",
341	385	description: (
342		-
	386	+
343	387	<Table
344	388	className={"protector-user"}
345	389	head={thead1}
346	390	contents={subjectMyList}
347	391	contentKey={key1}
	392	+ view={"mySenior"}
	393	+ offset={offset}
	394	+ limit={limit}
348	395	/>
349	396	),
350	397	},
...	...	@@ -357,6 +404,9 @@
357	404	head={thead2}
358	405	contents={subjectList}
359	406	contentKey={key2}
	407	+ view={"allSenior"}
	408	+ offset={offset}
	409	+ limit={limit}
360	410	/>
361	411	),
362	412	},
...	...	@@ -364,6 +414,7 @@
364	414
365	415	const [index, setIndex] = React.useState(1);
366	416
	417	+
367	418	React.useEffect(() => {
368	419	getSelectSubjectList();
369	420	getSelectMySubjectList();
...	...	@@ -429,7 +480,7 @@
429	480	</Modal>
430	481	<Modal open={modalOpen2} close={closeModal2} header="담당자 배정">
431	482	<div className="board-wrap">
432		- <SubTitle explanation={"담당자 선택"} className="margin-bottom"/>
	483	+ <SubTitle explanation={"담당자 선택"} className="margin-bottom" />
433	484	<div className="flex-start protectorlist margin-bottom5">
434	485	<input type="text" list="protectorlist" />
435	486	<datalist id="protectorlist">
...	...	@@ -456,9 +507,9 @@
456	507	</Modal>
457	508	<Modal open={modalOpen3} close={closeModal3} header="대상자 등록">
458	509	<div className="board-wrap">
459		- <SubTitle explanation={"회원 등록 시 ID는 연락처, 패스워드는 생년월일 8자리입니다."} className="margin-bottom"/>
	510	+ <SubTitle explanation={"회원 등록 시 ID는 연락처, 패스워드는 생년월일 8자리입니다."} className="margin-bottom" />
460	511	<table className="margin-bottom2 senior-insert">
461		- {/* <tr>
	512	+ {/* <tr>
462	513	<th>대상자등록번호</th>
463	514	<td colSpan={3} className="flex">
464	515	<input type="text" placeholder="생성하기 버튼 클릭 시 자동으로 생성됩니다."/>
...	...	@@ -486,7 +537,7 @@
486	537	</td>
487	538	</tr>
488	539	<tr>
489		- <th>생년월일</th>
	540	+ <th>생년월일</th>
490	541	<td>
491	542	<div className="flex">
492	543	<input type='date' value={brith} onChange={handleBrithday} />
...	...	@@ -496,7 +547,7 @@
496	547	<td>
497	548	<input type="text" />
498	549	</td> */}
499		-
	550	+
500	551	</tr>
501	552	<tr>
502	553	<th>연락처</th>
...	...	@@ -513,10 +564,10 @@
513	564	<tr>
514	565	<th>필요 복약</th>
515	566	<td>
516		- <div className="flex">
517		- <input type="checkbox" name="medicationSelect" checked={medicineM} onClick={(e) => {handleMedicineM(e)}} /><label for="medicationTime">아침</label>
518		- <input type="checkbox" name="medicationSelect" checked={medicineL} onClick={(e) => {handleMedicineL(e)}}/><label for="medicationTime">점심</label>
519		- <input type="checkbox" name="medicationSelect" checked={medicineD} onClick={(e) => {handleMedicineD(e)}}/><label for="medicationTime">저녁</label>
	567	+ <div className="flex">
	568	+ <input type="checkbox" name="medicationSelect" checked={medicineM} onClick={(e) => { handleMedicineM(e) }} /><label for="medicationTime">아침</label>
	569	+ <input type="checkbox" name="medicationSelect" checked={medicineL} onClick={(e) => { handleMedicineL(e) }} /><label for="medicationTime">점심</label>
	570	+ <input type="checkbox" name="medicationSelect" checked={medicineD} onClick={(e) => { handleMedicineD(e) }} /><label for="medicationTime">저녁</label>
520	571	</div>
521	572	</td>
522	573	</tr>
...	...	@@ -532,7 +583,7 @@
532	583	<textarea className="note" cols="30" rows="2" value={note} onChange={handleNote}></textarea>
533	584	</td>
534	585	</tr>
535		-
	586	+
536	587	{/* <tr>
537	588	<th>기저질환</th>
538	589	<td colSpan={3}>
...	...	@@ -540,15 +591,15 @@
540	591	</td>
541	592	</tr> */}
542	593	</table>
543		- <div className="btn-wrap flex-center">
544		- <Button
545		- className={"btn-small green-btn"}
546		- btnName={"등록"}
547		- onClick={() => {
548		- seniorInsert(userName,gender,brith, telNum, homeAddress, note, medicineM, medicineL, medicineD)
549		- }}
550		- />
551		- </div>
	594	+ <div className="btn-wrap flex-center">
	595	+ <Button
	596	+ className={"btn-small green-btn"}
	597	+ btnName={"등록"}
	598	+ onClick={() => {
	599	+ InsertSenior(userName, gender, brith, telNum, homeAddress, note, medicineM, medicineL, medicineD)
	600	+ }}
	601	+ />
	602	+ </div>
552	603	</div>
553	604	</Modal>
554	605
...	...	@@ -584,7 +635,7 @@
584	635	/>
585	636	</div>
586	637	<div className="btn-wrap flex-end">
587		- <Button className={"btn-small green-btn"} btnName={"등록"} onClick={openModal3}/>
	638	+ <Button className={"btn-small green-btn"} btnName={"등록"} onClick={openModal3} />
588	639	</div>
589	640	<ul className="tab-content">
590	641	{data
...	...	@@ -593,6 +644,9 @@
593	644	<li>{item.description}</li>
594	645	))}
595	646	</ul>
	647	+ <div>
	648	+ <Pagination total={data.id == 1 ? myUserTotal:userTotal} limit={limit} page={page} setPage={setPage} />
	649	+ </div>
596	650	</div>
597	651	</div>
598	652	</main>

Delete comment