File name
Commit message
Commit date
2023-04-18
File name
Commit message
Commit date
import React from "react";
import SubTitle from "./SubTitle.jsx";
import CommonUtil from "../../resources/js/CommonUtil.js";
import { JUSO_API_KEY, JUSO_CORRD_API_KEY } from "../../../Global.js";
import proj4 from "proj4";
export default function Modal_Guardian({ open, close, guardianManagementCallback, seniorId, guardianBySenior }) {
const relationshipList = [
'자녀',
'손자녀',
'배우자',
'사위',
'며느리',
'형제',
'자매',
'남매',
'친척'
];
const guardianInit = {
'user_id': '',
'user_name': '',
'user_password': '',
'user_phonenumber': '',
'user_birth': '',
'user_gender': '',
'user_address': '',
'user_email': '',
'authority': 'ROLE_GUARDIAN',
'agency_id': null,
'government_id': null,
'senior_id': seniorId,
'senior_relationship': '자녀',
};
//보호자 정보
const [guardian, setGuardian] = React.useState(JSON.parse(JSON.stringify(guardianInit)));
//각 데이터별로 Dom 정보 담을 Ref 생성
const guardianRefInit = JSON.parse(JSON.stringify(guardian));
guardianRefInit['user_gender'] = {};
guardianRefInit['senior_relationship_etc'] = null;
const guardianRef = React.useRef(guardianRefInit);
//등록할 보호자 정보 변경
const guardianValueChange = (targetKey, value) => {
let newGuardian = JSON.parse(JSON.stringify(guardian));
newGuardian[targetKey] = value;
setGuardian(newGuardian);
}
//아이디 중복 확인
const [isIdCheck, setIsIdCheck] = React.useState(false);
//로그인 아이디 중복 검사
const userIdCheck = () => {
if (CommonUtil.isEmpty(guardian['user_phonenumber']) == true) {
guardianRef.current['user_phonenumber'].focus();
alert("연락처를 입력해 주세요.");
return false;
}
guardian['user_id'] = guardian['user_phonenumber'];
fetch("/user/userSelectOne.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify(guardian),
}).then((response) => response.json()).then((data) => {
console.log("로그인 아이디 중복 검사(아이디를 통한 사용자 조회) : ", data);
if (CommonUtil.isEmpty(data) == true) {
setIsIdCheck(true);
guardianRef.current['user_address'].focus();
alert("사용가능한 연락처 입니다.");
} else {
setIsIdCheck(false);
guardianRef.current['user_phonenumber'].focus();
alert("이미 존재하는 연락처 입니다.");
}
}).catch((error) => {
console.log('userIdCheck() /user/userSelectOne.json error : ', error);
});
}
// 연락처 정보 검색
const [isPhoneCheck, setIsPhoneCheck] = React.useState(false);
// 연락처 정보 검색 결과
const [searchGuardian, setSearchGuardian] = React.useState({});
const insertGuardianValueChange = (targetKey, value) => {
searchGuardian[targetKey] = value;
setGuardian(searchGuardian);
}
const userPhoneCheck = () => {
if (CommonUtil.isEmpty(searchGuardian['user_id']) == true) {
guardianRef.current['gardian_phonenumber'].focus();
alert("연락처를 입력해 주세요.");
return false;
}
fetch("/user/userSelectOne.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify(searchGuardian),
}).then((response) => response.json()).then((data) => {
console.log("정보 검색 결과 : ", data);
if (CommonUtil.isEmpty(data) == true) {
setIsPhoneCheck(false);
guardianRef.current['gardian_phonenumber'].focus();
alert("존재하지 않는 보호자 연락처입니다.");
} else {
if (data['authority'] == 'ROLE_GUARDIAN') {
setIsPhoneCheck(true);
alert("보호자 정보 검색에 성공했습니다.");
setSearchGuardian(data);
} else {
setIsPhoneCheck(false);
guardianRef.current['gardian_phonenumber'].focus();
alert("보호자의 연락처가 아닙니다.");
}
}
}).catch((error) => {
console.log('userIdCheck() /user/userSelectOne.json error : ', error);
});
}
// 기존 보호자 등록
const guardianNewInsert = () => {
searchGuardian['senior_id'] = seniorId;
searchGuardian['guardian_id'] = searchGuardian['user_id'];
if (CommonUtil.isEmpty(guardian['guardian_id']) && isPhoneCheck == false) {
alert("연락처 검색을 해주세요.");
return false;
}
fetch("/user/seniorGuardianInsert.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify(searchGuardian),
}).then((response) => response.json()).then((data) => {
console.log("시니어 등록 결과(건수) : ", data);
if (data > 0) {
alert("등록완료");
guardianManagementCallback();
} else {
alert("등록에 실패하였습니다. 관리자에게 문의바랍니다.");
}
}).catch((error) => {
console.log('guardianNewInsert() /user/seniorGuardianInsert.json error : ', error);
});
}
//보호자 등록 유효성 검사
const guardianInsertValidation = () => {
if (CommonUtil.isEmpty(guardian['user_name']) == true) {
guardianRef.current['user_name'].focus();
alert("이름을 입력해 주세요.");
return false;
}
if (CommonUtil.isEmpty(guardian['user_gender']) == true) {
guardianRef.current['user_gender']['m'].focus();
alert("성별을 선택해 주세요.");
return false;
}
if (CommonUtil.isEmpty(guardian['user_birth']) == true) {
guardianRef.current['user_birth'].focus();
alert("생년월일을 선택해 주세요.");
return false;
}
if (CommonUtil.isEmpty(guardian['user_phonenumber']) == true) {
guardianRef.current['user_phonenumber'].focus();
alert("연락처를 입력해 주세요.");
return false;
}
if (CommonUtil.isEmpty(guardian['guardian_id']) && isIdCheck == false) {
alert("연락처 중복확인을 해주세요.");
return false;
}
if (CommonUtil.isEmpty(guardian['user_address']) == true) {
guardianRef.current['user_address'].focus();
alert("주소를 입력해 주세요.");
return false;
}
if (CommonUtil.isEmpty(guardian['zip_no']) == true) {
guardianRef.current['user_address'].focus();
alert("검색을 통해 주소를 선택해 주세요.");
return false;
}
if (CommonUtil.isEmpty(guardian['senior_relationship']) == true) {
guardianRef.current['senior_relationship_etc'].focus();
alert("대상자와의 관계를 입력 주세요.");
return false;
}
return true;
}
//보호자 등록
const guardianInsert = () => {
if (guardianInsertValidation() == false) {
return;
}
fetch("/user/guardianInsert.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify(guardian),
}).then((response) => response.json()).then((data) => {
console.log("시니어 등록 결과(건수) : ", data);
if (data > 0) {
alert("등록완료");
guardianManagementCallback();
} else {
alert("등록에 실패하였습니다. 관리자에게 문의바랍니다.");
}
}).catch((error) => {
console.log('guardianInsert() /user/guardianInsert.json error : ', error);
});
}
//보호자 수정
const guardianUpdate = () => {
if (guardianInsertValidation() == false) {
return;
}
fetch("/user/guardianUpdate.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify(guardian),
}).then((response) => response.json()).then((data) => {
console.log("시니어 수정 결과(건수) : ", data);
if (data > 0) {
alert("수정완료");
guardianManagementCallback();
} else {
alert("수정에 실패하였습니다. 관리자에게 문의바랍니다.");
}
}).catch((error) => {
console.log('guardianInsert() /user/guardianInsert.json error : ', error);
});
}
//보호자 삭제
const guardianDelete = () => {
if (confirm("보호자를 삭제하시겠습니까?") == false) {
return;
}
fetch("/user/guardianDelete.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify(guardian),
}).then((response) => response.json()).then((data) => {
console.log("시니어 삭제 결과(건수) : ", data);
if (data > 0) {
alert("삭제완료");
guardianManagementCallback();
} else {
alert("삭제에 실패하였습니다. 관리자에게 문의바랍니다.");
}
}).catch((error) => {
console.log('guardianDelete() /user/guardianDelete.json error : ', error);
});
}
//주소 검색 결과 객체
const [jusoList, setJusoList] = React.useState({
common: {
countPerPage: 10,
currentPage: 1,
errorCode: '0',
errorMessage: '정상',
totalCount: 0
}, juso: [],
});
//주소 검색
const jusoSearch = (currentPage) => {
if (CommonUtil.isEmpty(guardian['user_address']) == true) {
guardianRef.current['user_address'].focus();
alert("주소를 입력해 주세요.");
return false;
}
// console.log("check done");
const vm = this;
let url = 'https://business.juso.go.kr/addrlink/addrLinkApi.do'
url += `?currentPage=${CommonUtil.isEmpty(currentPage) ? 1 : currentPage}`
url += '&countPerPage=10'
url += '&resultType=json'
url += `&keyword=${guardian['user_address']}`
url += `&confmKey=${JUSO_API_KEY}`;
fetch(url, {
method: "GET",
}).then((response) => response.json()).then((data) => {
console.log("주소 검색 결과(건수) : ", data);
setJusoList(data.results);
if (data.results.common.errorCode != '0') {
alert(data.results.common.errorMessage);
} else {
if (CommonUtil.isEmpty(data.results.juso)) {
alert('조회된 주소 정보가 없습니다.');
}
}
}).catch((error) => {
console.log('jusoSearch() : ', error);
});
};
const grs80 = "+proj=tmerc +lat_0=38 +lon_0=127.5 +k=0.9996 +x_0=1000000 +y_0=2000000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs";
const wgs84 = "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs";
//주소 정보 활용 좌표 검색
const coordSearch = () => {
console.log("check guardian : ", guardian);
let url = 'https://business.juso.go.kr/addrlink/addrCoordApi.do'
url += `?admCd=${guardian['adm_cd']}`
url += `&rnMgtSn=${guardian['rn_mgt_sn']}`
url += `&udrtYn=${guardian['udrt_yn']}`
url += `&buldMnnm=${guardian['buld_mnnm']}`
url += `&buldSlno=${guardian['buld_slno']}`
url += '&resultType=json'
url += `&confmKey=${JUSO_CORRD_API_KEY}`;
fetch(url, {
method: "GET",
}).then((response) => response.json()).then((data) => {
console.log("주소 정보 활용 좌표 검색 결과(건수) : ", data);
//setJusoList(data.results);
if (data.results.common.errorCode == '0' && CommonUtil.isEmpty(data.results.juso) == false) {
let grs80Point = [parseFloat(data.results.juso[0].entX), parseFloat(data.results.juso[0].entY)];
let wgs84Point = proj4(grs80, wgs84).forward(grs80Point);
guardian['x'] = wgs84Point[0];
guardian['y'] = wgs84Point[1];
setGuardian({ ...guardian });
}
}).catch((error) => {
console.log('jusoSearch() : ', error);
});
};
const [isNewGuardian, setIsNewGuardian] = React.useState(true);
//Mounted
React.useEffect(() => {
console.log('guardianBySenior : ', guardianBySenior);
if (CommonUtil.isEmpty(guardianBySenior) == false) {
setGuardian(guardianBySenior);
} else {
console.log('guardianBySenior : ', guardianBySenior);
setGuardian(JSON.parse(JSON.stringify(guardianInit)));
}
}, [open]);
return (
<div class={open ? "openModal modal" : "modal"}>
{open ? (
<div className="modal-inner" >
<div className="modal-header flex">
보호자(가족) 보기
<button className={"close"} onClick={() => { close() }}>X</button>
</div>
<div className="modal-main">
<SubTitle explanation={"최초 ID는 연락처, PW는 qwer1234!입니다."} className="margin-bottom" />
{CommonUtil.isEmpty(guardian['guardian_id']) ?
<div className="flex-end margin-bottom">
<div className="flex searchselect" style={{ width: 'auto' }}>
<input type="radio" id="new_guardian" name="guardian" checked={isNewGuardian}
onChange={(e) => { e.target.checked ? setIsNewGuardian(true) : null }} />
<label for="new_guardian" style={{ marginRight: '3rem' }}>신규 보호자</label>
<input type="radio" id="guardian" name="guardian" checked={!isNewGuardian}
onChange={(e) => { e.target.checked ? setIsNewGuardian(false) : null }} />
<label for="guardian" style={{ marginRight: '0' }}>기존 보호자</label>
</div>
</div> : null
}
{CommonUtil.isEmpty(guardian['guardian_id']) && !isNewGuardian ? (
<>
<table className="margin-bottom2 senior-insert">
<tr>
<th><span style={{ color: "red" }}>*</span>연락처 검색</th>
<td colSpan={3}>
<input type="number" maxLength="11" style={{ width: 'calc(100% - 160px)' }}
value={searchGuardian['user_phonenumber']}
onChange={(e) => { insertGuardianValueChange('user_id', e.target.value); setIsPhoneCheck(false); }}
ref={el => guardianRef.current['gardian_phonenumber'] = el}
/>
<button className={"red-btn btn-large"} onClick={userPhoneCheck}>
정보검색
</button>
</td>
</tr>
</table>
<table className="margin-bottom2 senior-insert">
<tr>
<th><span style={{ color: "red" }}>*</span>이름</th>
<td>
<input type="text"
value={searchGuardian['user_name']}
disabled
/>
</td>
<th><span style={{ color: "red" }}>*</span>성별</th>
<td className=" gender">
<div className="flex-start">
<input type="radio" id="user_gender_m" name="user_gender" value="남" disabled checked={searchGuardian['user_gender'] == "남"} />
<label for="user_gender_m">남</label>
</div>
<div className="flex-start">
<input type="radio" id="user_gender_f" name="user_gender" value="여" disabled checked={searchGuardian['user_gender'] == "여"} />
<label for="user_gender_f">여</label>
</div>
</td>
</tr>
<tr>
<th><span style={{ color: "red" }}>*</span>생년월일</th>
<td>
<div className="flex">
<input type='date'
value={searchGuardian['user_birth']}
disabled
/>
</div>
</td>
</tr>
<tr>
<th><span style={{ color: "red" }}>*</span>주소</th>
<td colSpan={3}>
<input type="text"
value={searchGuardian['user_address']}
disabled
/>
</td>
</tr>
<tr>
<th><span style={{ color: "red" }}>*</span>대상자와의 관계</th>
<td colSpan={3}>
<select onChange={(e) => { insertGuardianValueChange('senior_relationship', e.target.value) }}
ref={el => guardianRef.current['senior_relationship'] = el}>
{relationshipList.map((relationship, idx) => {
return (
<option key={idx}>{relationship}</option>
)
})}
<option value="" selected={relationshipList.indexOf(guardian['senior_relationship']) == -1}>기타</option>
</select>
{relationshipList.indexOf(guardian['senior_relationship']) == -1 ? (
<input type="text"
value={guardian['senior_relationship']}
onChange={(e) => { insertGuardianValueChange('senior_relationship', e.target.value) }}
ref={el => guardianRef.current['senior_relationship_etc'] = el}
/>
) : null}
</td>
</tr>
</table>
<div className="btn-wrap flex-center margin-bottom5">
<button className={"btn-small gray-btn"} onClick={guardianNewInsert}>기존추가</button>
</div>
</>
) : (
<>
<table className="margin-bottom2 senior-insert">
<tr>
<th><span style={{ color: "red" }}>*</span>이름</th>
<td>
<input type="text"
value={guardian['user_name']}
onChange={(e) => { guardianValueChange('user_name', e.target.value) }}
ref={el => guardianRef.current['user_name'] = el}
/>
</td>
<th><span style={{ color: "red" }}>*</span>성별</th>
<td className=" gender">
<div className="flex-start">
<input type="radio" id="user_gender_m" name="user_gender" value="남"
onChange={(e) => { e.target.checked ? guardianValueChange('user_gender', e.target.value) : null }}
ref={el => guardianRef.current['user_gender']['m'] = el}
/>
<label for="user_gender_m">남</label>
</div>
<div className="flex-start">
<input type="radio" id="user_gender_f" name="user_gender" value="여"
onChange={(e) => { e.target.checked ? guardianValueChange('user_gender', e.target.value) : null }}
ref={el => guardianRef.current['user_gender']['f'] = el}
/>
<label for="user_gender_f">여</label>
</div>
</td>
</tr>
<tr>
<th><span style={{ color: "red" }}>*</span>생년월일</th>
<td>
<div className="flex">
<input type='date'
value={guardian['user_birth']}
onChange={(e) => { guardianValueChange('user_birth', e.target.value) }}
ref={el => guardianRef.current['user_birth'] = el}
/>
</div>
</td>
</tr>
<tr>
<th><span style={{ color: "red" }}>*</span>연락처</th>
<td colSpan={3}>
{CommonUtil.isEmpty(guardian['guardian_id']) ?
<>
<input type="number" maxLength="11" style={{ width: 'calc(100% - 160px)' }}
value={guardian['user_phonenumber']}
onChange={(e) => { guardianValueChange('user_phonenumber', e.target.value); setIsIdCheck(false); }}
ref={el => guardianRef.current['user_phonenumber'] = el}
/>
<button className={"red-btn btn-large"} onClick={userIdCheck}>
중복확인
</button>
</>
: <input type="number" maxLength="11" disabled
value={guardian['user_phonenumber']}
/>}
</td>
</tr>
<tr>
<th><span style={{ color: "red" }}>*</span>주소</th>
<td colSpan={3}>
<div>
<input type="text" style={{ width: 'calc(100% - 160px)' }}
value={guardian['user_address']} disabled={CommonUtil.isEmpty(guardian['zip_no']) == false}
onChange={(e) => { guardianValueChange('user_address', e.target.value) }}
onKeyUp={(e) => { e.key == 'Enter' ? jusoSearch() : null }}
ref={el => guardianRef.current['user_address'] = el}
/>
{CommonUtil.isEmpty(guardian['zip_no'])
? <button className={"red-btn btn-large"} onClick={() => { jusoSearch() }}>주소검색</button>
: <button className={"gray-btn btn-large"} onClick={() => { guardianValueChange('zip_no', null) }}>다시검색</button>
}
</div>
{CommonUtil.isEmpty(jusoList.juso) == false && CommonUtil.isEmpty(guardian['zip_no']) ?
<div>
<ul className="list-box" style={{ width: '100%' }}>
{CommonUtil.isEmpty(jusoList.juso) == false ? jusoList.juso.map((item, idx) => {
return (
<li className={guardian['zip_no'] == item['zipNo'] ? 'active' : null} onClick={() => {
guardian['zip_no'] = item['zipNo']; guardian['adm_cd'] = item['admCd'];
guardian['rn_mgt_sn'] = item['rnMgtSn']; guardian['bd_mgt_sn'] = item['bdMgtSn'];
guardian['siNsi_nmm'] = item['siNm']; guardian['sgg_nm'] = item['sggNm'];
guardian['emd_nm'] = item['emdNm']; guardian['li_nm'] = item['liNm'];
guardian['rn'] = item['rn']; guardian['emd_no'] = item['emdNo'];
guardian['hemd_nm'] = item['hemdNm']; guardian['road_addr'] = item['roadAddr'];
guardian['buld_mnnm'] = item['buldMnnm']; guardian['buld_slno'] = item['buldSlno'];
guardian['user_address'] = item['roadAddr'];
if (CommonUtil.isEmpty(item['udrtYn'])) {
guardian['udrt_yn'] = null;
} else {
if (item['udrtYn'] == 1 || item['udrtYn'] == true || item['udrtYn'] == '1' || item['udrtYn'].toLowerCase() == 'true') {
guardian['udrt_yn'] = true;
} else {
guardian['udrt_yn'] = false;
}
}
setGuardian({ ...guardian }); coordSearch();
}}>
<span style={{ fontWeight: 600 }}>[지번]</span> {item['jibunAddr']}
<br />
<span style={{ fontWeight: 600 }}>[도로명]</span> {item['roadAddr']}
</li>
)
}) : null}
</ul>
</div>
: null}
</td>
</tr>
<tr>
<th><span style={{ color: "red" }}>*</span>대상자와의 관계</th>
<td colSpan={3}>
<select onChange={(e) => { guardianValueChange('senior_relationship', e.target.value) }}
ref={el => guardianRef.current['senior_relationship'] = el}>
{relationshipList.map((relationship, idx) => {
return (
<option key={idx}>{relationship}</option>
)
})}
<option value="" selected={relationshipList.indexOf(guardian['senior_relationship']) == -1}>기타</option>
</select>
{relationshipList.indexOf(guardian['senior_relationship']) == -1 ? (
<input type="text"
value={guardian['senior_relationship']}
onChange={(e) => { guardianValueChange('senior_relationship', e.target.value) }}
ref={el => guardianRef.current['senior_relationship_etc'] = el}
/>
) : null}
</td>
</tr>
</table>
<div className="btn-wrap flex-center margin-bottom5">
{CommonUtil.isEmpty(guardian['guardian_id'])
? <button className={"btn-small gray-btn"} onClick={guardianInsert}>추가</button>
: <>
<button className={"btn-small gray-btn"} onClick={guardianUpdate}>수정</button>
<button className={"btn-small red-btn"} onClick={guardianDelete}>삭제</button>
</>}
</div>
</>
)}
</div>
</div>
) : null}
</div>
)
}