xit-app
/
IBMS_NEW
21
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

단속 > 단속 등록&열람: 주소 검색 로직 및 상세주소 자동 완성 기능 추가, 위치정보 관리 화면 입력 필드 구조 개선 및 전체주소 재조합 로직 구현

Browse Source
dev
박성영 4 months ago
parent 5fbb89255a
commit d8d2a21f6e
2 changed files with 201 additions and 97 deletions
Show Stats Download Patch File Download Diff File

64
src/main/webapp/WEB-INF/views/common/address/searchAddress.jsp
Unescape Escape View File

@ -113,8 +113,8 @@ function searchAddress(page) {
html += "data-lnbr-slno='" + juso.lnbrSlno + "' ";
html += "data-emd-no='" + juso.emdNo + "' ";
html += ">";
html += "<p><strong>[도로명]</strong> " + juso.roadAddr + "</p>";
html += "<p><strong>[지번]</strong> " + juso.jibunAddr + "</p>";
html += "<p><strong>[지번]</strong> " + juso.jibunAddr + "</p>";
html += "<p><strong>[도로명]</strong> " + juso.roadAddr + "</p>";
html += "<p><strong>[우편번호]</strong> " + juso.zipNo + "</p>";
html += "</div>";
}
@ -209,31 +209,31 @@ function selectAddress(element) {
obj.inputYn = "Y";
obj.addrDetail = "";
obj.roadFullAddr = element.getAttribute("data-road-addr");
obj.roadAddr = element.getAttribute("data-road-addr");
obj.roadAddrPart1 = element.getAttribute("data-road-addr-part1");
obj.roadAddrPart2 = element.getAttribute("data-road-addr-part2");
obj.jibunAddr = element.getAttribute("data-jibun-addr");
obj.engAddr = element.getAttribute("data-eng-addr");
obj.zipNo = element.getAttribute("data-zip-no");
obj.admCd = element.getAttribute("data-adm-cd");
obj.rnMgtSn = element.getAttribute("data-rn-mgt-sn");
obj.bdMgtSn = element.getAttribute("data-bd-mgt-sn");
obj.detBdNmList = element.getAttribute("data-det-bd-nm-list");
obj.bdNm = element.getAttribute("data-bd-nm");
obj.bdKdcd = element.getAttribute("data-bd-kdcd");
obj.siNm = element.getAttribute("data-si-nm");
obj.sggNm = element.getAttribute("data-sgg-nm");
obj.emdNm = element.getAttribute("data-emd-nm");
obj.liNm = element.getAttribute("data-li-nm");
obj.rn = element.getAttribute("data-rn");
obj.udrtYn = element.getAttribute("data-udrt-yn");
obj.buldMnnm = element.getAttribute("data-buld-mnnm");
obj.buldSlno = element.getAttribute("data-buld-slno");
obj.mtYn = element.getAttribute("data-mt-yn");
obj.lnbrMnnm = element.getAttribute("data-lnbr-mnnm");
obj.lnbrSlno = element.getAttribute("data-lnbr-slno");
obj.emdNo = element.getAttribute("data-emd-no");
obj.roadFullAddr = element.getAttribute("data-road-addr"); // 전체 도로명주소
obj.roadAddr = element.getAttribute("data-road-addr"); // 도로명주소
obj.roadAddrPart1 = element.getAttribute("data-road-addr-part1"); // 도로명주소(참고항목 제외)
obj.roadAddrPart2 = element.getAttribute("data-road-addr-part2"); // 도로명주소 참고항목
obj.jibunAddr = element.getAttribute("data-jibun-addr"); // 지번주소
obj.engAddr = element.getAttribute("data-eng-addr"); // 영문 주소
obj.zipNo = element.getAttribute("data-zip-no"); // 우편번호
obj.admCd = element.getAttribute("data-adm-cd"); // 행정구역코드
obj.rnMgtSn = element.getAttribute("data-rn-mgt-sn"); // 도로명코드
obj.bdMgtSn = element.getAttribute("data-bd-mgt-sn"); // 건물관리번호
obj.detBdNmList = element.getAttribute("data-det-bd-nm-list"); // 상세건물명
obj.bdNm = element.getAttribute("data-bd-nm"); // 건물명
obj.bdKdcd = element.getAttribute("data-bd-kdcd"); // 공동주택여부(1:공동주택, 0:비공동주택)
obj.siNm = element.getAttribute("data-si-nm"); // 시도명
obj.sggNm = element.getAttribute("data-sgg-nm"); // 시군구명
obj.emdNm = element.getAttribute("data-emd-nm"); // 읍면동명
obj.liNm = element.getAttribute("data-li-nm"); // 법정리명
obj.rn = element.getAttribute("data-rn"); // 도로명
obj.udrtYn = element.getAttribute("data-udrt-yn"); // 지하여부(0:지상, 1:지하)
obj.buldMnnm = element.getAttribute("data-buld-mnnm"); // 건물본번
obj.buldSlno = element.getAttribute("data-buld-slno"); // 건물부번
obj.mtYn = element.getAttribute("data-mt-yn"); // 산여부(0:대지, 1:산)
obj.lnbrMnnm = element.getAttribute("data-lnbr-mnnm"); // 지번본번(번지)
obj.lnbrSlno = element.getAttribute("data-lnbr-slno"); // 지번부번(호)
obj.emdNo = element.getAttribute("data-emd-no"); // 읍면동일련번호
var callback = '<%= callback %>';
if(callback==''||callback==null||callback==undefined)
@ -259,6 +259,16 @@ function init() {
var inputYn = "<%= inputYn %>";
if(inputYn == "Y") {
window.close();
return;
}
// 중요로직: URL에서 keyword 파라미터를 받아서 검색어 필드에 자동 입력
var urlParams = new URLSearchParams(window.location.search);
var keyword = urlParams.get('keyword');
if (keyword) {
document.getElementById("keyword").value = decodeURIComponent(keyword);
// 자동으로 검색 실행
searchAddress(1);
}
}
</script>

234
src/main/webapp/WEB-INF/views/crdn/crndRegistAndView/crdnPstnInfo/popup.jsp
Unescape Escape View File

@ -25,6 +25,12 @@
<col style="width: 18%;" />
<col style="width: 32%;" />
</colgroup>
<tr>
<th class="th">위치정보 ID</th>
<td colspan="3">
<input type="text" id="pstnInfoId" name="pstnInfoId" class="input" style="width: 180px;" readonly />
</td>
</tr>
<tr>
<th class="th">단속년도</th>
<td>
@ -56,79 +62,78 @@
</td>
</tr>
<tr>
<th class="th"><span class="required">*</span> 행정구역코드</th>
<td>
<input type="text" id="pbadmsZoneCd" name="pbadmsZoneCd" class="input" maxlength="10" style="width: 180px;" placeholder="예) 4128700000"/>
</td>
<th class="th">우편번호</th>
<td>
<input type="text" id="zip" name="zip" class="input" maxlength="6" style="width: 120px;" />
<button class="newbtn bg1 userser" type="button" onclick="searchZipCode();">주소 찾기</button>
</td>
</tr>
<tr>
<th class="th">지번 전체주소</th>
<th class="th">지번 주소</th>
<td colspan="3">
<input type="text" id="lotnoWholAddr" name="lotnoWholAddr" class="input" style="width: 95%;" maxlength="2000"/>
<input type="text" id="lotnoAddr" name="lotnoAddr" class="input" style="width: 450px;" maxlength="320" readonly/>
<input type="text" id="lotnoMno" name="lotnoMno" class="input" style="width: 120px;" maxlength="4" readonly/>
<input type="text" id="lotnoSno" name="lotnoSno" class="input" style="width: 120px;" maxlength="4" readonly/>
</td>
</tr>
<tr>
<th class="th">도로명 전체주소</th>
<th class="th">도로명 주소</th>
<td colspan="3">
<input type="text" id="roadNmWholAddr" name="roadNmWholAddr" class="input" style="width: 95%;" maxlength="2000"/>
<input type="text" id="roadNmAddr" name="roadNmAddr" class="input" style="width: 450px;" maxlength="320" readonly/>
<input type="text" id="bldgMno" name="bldgMno" class="input" style="width: 120px;" maxlength="4" readonly/>
<input type="text" id="bldgSno" name="bldgSno" class="input" style="width: 120px;" maxlength="4" readonly/>
</td>
</tr>
<tr>
<th class="th">상세주소</th>
<td colspan="3">
<input type="text" id="dtlAddr" name="dtlAddr" class="input" style="width: 95%;" maxlength="320"/>
<input type="text" id="dtlAddr" name="dtlAddr" class="input" maxlength="320"/>
</td>
</tr>
<tr>
<th class="th">지적(PTOUT)</th>
<td>
<input type="text" id="ptout" name="ptout" class="input" style="width: 180px;" maxlength="22" placeholder="예) 12345.67"/>
</td>
<th class="th">공시지가(OALP)</th>
<td>
<input type="text" id="oalp" name="oalp" class="input" style="width: 180px;" maxlength="13" placeholder="예) 1000000"/>
</td>
</tr>
<tr>
<th class="th">비고</th>
<td colspan="3">
<textarea id="rmrk" name="rmrk" class="textarea" rows="3" maxlength="1000" style="width: 95%;"></textarea>
<textarea id="rmrk" name="rmrk" class="textarea" rows="3" maxlength="1000"></textarea>
</td>
</tr>
<!-- 아래부터 tb_pstn_info 누락 컬럼 입력 영역 추가 -->
<!-- 중요로직: sggCd(시군구 코드는 세션에서 서버가 설정) -->
<tr>
<th class="th">지번 주소</th>
<td>
<input type="text" id="lotnoAddr" name="lotnoAddr" class="input" style="width: 95%;" maxlength="320"/>
</td>
<th class="th">도로명 주소</th>
<td>
<input type="text" id="roadNmAddr" name="roadNmAddr" class="input" style="width: 95%;" maxlength="320"/>
<tr style="">
<th class="th"><span class="required">*</span> 행정구역코드</th>
<td colspan="3">
<input type="text" id="pbadmsZoneCd" name="pbadmsZoneCd" class="input" maxlength="10" style="width: 180px;" placeholder="예) 4128700000"/>
</td>
</tr>
<tr>
<th class="th">참고 주소</th>
<td>
<input type="text" id="refAddr" name="refAddr" class="input" style="width: 95%;" maxlength="320"/>
</td>
<th class="th">도로명 코드</th>
<td>
<input type="text" id="roadNmCd" name="roadNmCd" class="input" style="width: 180px;" maxlength="12"/>
<th class="th">지번 전체주소</th>
<td colspan="3">
<input type="text" id="lotnoWholAddr" name="lotnoWholAddr" class="input" maxlength="2000"/>
</td>
</tr>
<tr>
<th class="th">지번 본번</th>
<td>
<input type="text" id="lotnoMno" name="lotnoMno" class="input" style="width: 120px;" maxlength="4"/>
</td>
<th class="th">지번 부번</th>
<td>
<input type="text" id="lotnoSno" name="lotnoSno" class="input" style="width: 120px;" maxlength="4"/>
<th class="th">도로명 전체주소</th>
<td colspan="3">
<input type="text" id="roadNmWholAddr" name="roadNmWholAddr" class="input" maxlength="2000"/>
</td>
</tr>
<tr>
<th class="th">건물 본번</th>
<th class="th">참고 주소</th>
<td>
<input type="text" id="bldgMno" name="bldgMno" class="input" style="width: 120px;" maxlength="4"/>
<input type="text" id="refAddr" name="refAddr" class="input" maxlength="320"/>
</td>
<th class="th">건물 부번</th>
<th class="th">도로명 코드</th>
<td>
<input type="text" id="bldgSno" name="bldgSno" class="input" style="width: 120px;" maxlength="4"/>
<input type="text" id="roadNmCd" name="roadNmCd" class="input" style="width: 180px;" maxlength="12"/>
</td>
</tr>
<tr>
@ -149,53 +154,25 @@
</select>
</td>
</tr>
<tr>
<th class="th">지적(PTOUT)</th>
<td>
<input type="text" id="ptout" name="ptout" class="input" style="width: 180px;" maxlength="22" placeholder="예) 12345.67"/>
</td>
<th class="th">공시지가(OALP)</th>
<td>
<input type="text" id="oalp" name="oalp" class="input" style="width: 180px;" maxlength="13" placeholder="예) 1000000"/>
</td>
</tr>
<!-- 시스템 정보 (읽기전용 표시) -->
<tr>
<th class="th">위치정보 ID</th>
<td>
<input type="text" id="pstnInfoId" name="pstnInfoId" class="input" style="width: 180px;" readonly />
</td>
<th class="th">등록 일시</th>
<td>
<input type="text" id="regDt" name="regDt" class="input" style="width: 180px;" readonly />
</td>
</tr>
<tr>
<th class="th">등록자</th>
<td>
<input type="text" id="rgtr" name="rgtr" class="input" style="width: 180px;" readonly />
</td>
<th class="th">수정 일시</th>
<td>
<input type="text" id="mdfcnDt" name="mdfcnDt" class="input" style="width: 180px;" readonly />
</td>
</tr>
<tr>
<th class="th">수정자</th>
<td>
<input type="text" id="mdfr" name="mdfr" class="input" style="width: 180px;" readonly />
</td>
<td colspan="2"></td>
</tr>
<tr>
<th class="th">삭제 여부</th>
<th class="th">수정 일시</th>
<td>
<input type="text" id="delYn" name="delYn" class="input" style="width: 120px;" readonly />
</td>
<th class="th">삭제 일시 / 삭제자</th>
<th class="th">수정자</th>
<td>
<input type="text" id="delDt" name="delDt" class="input" style="width: 180px;" readonly />
<input type="text" id="dltr" name="dltr" class="input" style="width: 120px; margin-left: 6px;" readonly />
</td>
</tr>
</table>
@ -233,6 +210,9 @@
return;
}
// 중요로직: 저장 전 최종적으로 전체주소 재조합
updateWholeAddress();
var formData = $('#pstnInfoForm').serialize();
$.ajax({
@ -259,10 +239,124 @@
});
}
/**
* 우편번호 검색 팝업 호출
* - 법정동이 선택된 경우 해당 동 이름을 검색어로 전달
*/
function searchZipCode() {
var popUrl = '<c:url value="/common/address/search.do"/>';
var params = '?callback=searchZipCodeCallback';
// 중요로직: 법정동이 선택된 경우 동 이름을 검색어로 전달
var selectedEmd = $('#stdgEmdCd').val();
if (selectedEmd) {
var selectedEmdText = $('#stdgEmdCd option:selected').text();
if (selectedEmdText && selectedEmdText !== '선택하세요') {
params += '&keyword=' + encodeURIComponent(selectedEmdText);
}
}
popUrl += params;
var popTitle = "주소 찾기";
var popOption = "width=570px, height=530px, resizable=yes, scrollbars=yes, location=no, top=100px, left=100px";
window.open(popUrl, popTitle, popOption);
}
/**
* 주소 검색 콜백 함수
* - 주소 검색 팝업의 검색결과를 전달 받아 해당 필드에 설정
* @param {Object} obj - 주소 검색 결과 객체
*/
function searchZipCodeCallback(obj) {
// 중요로직: 우편번호와 기본 주소 정보 설정
$("#zip").val(obj.zipNo || ""); // 우편번호
$("#roadNmAddr").val(obj.roadAddrPart1 || ""); // 도로명 주소 (참고항목 제외)
$("#lotnoAddr").val(obj.jibunAddr || ""); // 지번 주소
$("#dtlAddr").val(""); // 상세주소는 사용자가 직접 입력
// 중요로직: 전체주소는 초기에는 기본주소만 설정 (상세주소 입력 후 동적으로 결합)
$("#roadNmWholAddr").val(obj.roadAddrPart1 || ""); // 도로명 전체주소 (초기값: 도로명주소만)
$("#lotnoWholAddr").val(obj.jibunAddr || ""); // 지번 전체주소 (초기값: 지번주소만)
$("#refAddr").val(obj.roadAddrPart2 || ""); // 참고 주소 (도로명주소 참고항목)
$("#roadNmCd").val(obj.rnMgtSn || ""); // 도로명 코드
$("#pbadmsZoneCd").val(obj.admCd || ""); // 행정구역코드
// 중요로직: 지번 관련 정보 설정
$("#lotnoMno").val(obj.lnbrMnnm || ""); // 지번 본번
$("#lotnoSno").val(obj.lnbrSlno || ""); // 지번 부번
$("#bldgMno").val(obj.buldMnnm || ""); // 건물 본번
$("#bldgSno").val(obj.buldSlno || ""); // 건물 부번
// 중요로직: Y/N 코드 설정 (지하여부, 산여부)
$("#udgdYnCd").val(obj.udrtYn === "1" ? "Y" : "N"); // 지하여부 (1:지하, 0:지상)
$("#mtnYnCd").val(obj.mtYn === "1" ? "Y" : "N"); // 산여부 (1:산, 0:대지)
// 중요로직: 법정동 자동 선택 - 주소 검색 결과의 읍면동명과 매칭되는 옵션 찾아서 선택
if (obj.emdNm) {
var emdName = obj.emdNm.trim(); // 읍면동명
var $stdgEmdCd = $("#stdgEmdCd");
var found = false;
// selectbox의 각 옵션을 순회하면서 매칭되는 항목 찾기
$stdgEmdCd.find('option').each(function() {
var optionText = $(this).text().trim();
var optionValue = $(this).val();
// 빈 값이 아니고, 옵션 텍스트가 읍면동명과 일치하는 경우
if (optionValue && (optionText === emdName || optionText.indexOf(emdName) !== -1)) {
$stdgEmdCd.val(optionValue);
found = true;
return false; // each 루프 종료
}
});
// 매칭되지 않은 경우 콘솔에 정보 출력 (디버깅용)
if (!found) {
console.info('[법정동 자동 선택] 매칭되는 법정동을 찾을 수 없습니다. 검색된 읍면동명:', emdName);
}
}
// 상세주소 입력 필드에 포커스
$("#dtlAddr").focus();
}
/**
* 전체주소 업데이트 함수
* - 기본주소 + 상세주소를 결합하여 전체주소 필드를 업데이트
*/
function updateWholeAddress() {
var roadNmAddr = $("#roadNmAddr").val() || ""; // 도로명 주소
var lotnoAddr = $("#lotnoAddr").val() || ""; // 지번 주소
var dtlAddr = $("#dtlAddr").val() || ""; // 상세주소
// 중요로직: 도로명 전체주소 = 도로명 주소 + 상세주소
var roadNmWholAddr = roadNmAddr;
if (dtlAddr.trim() !== "") {
roadNmWholAddr = roadNmAddr + " " + dtlAddr.trim();
}
$("#roadNmWholAddr").val(roadNmWholAddr);
// 중요로직: 지번 전체주소 = 지번 주소 + 상세주소
var lotnoWholAddr = lotnoAddr;
if (dtlAddr.trim() !== "") {
lotnoWholAddr = lotnoAddr + " " + dtlAddr.trim();
}
$("#lotnoWholAddr").val(lotnoWholAddr);
}
$(document).ready(function() {
$('#saveBtn').on('click', savePstnInfo);
$('#closeBtn, #btnCloseTop').on('click', function(e){ e.preventDefault(); window.close(); });
// 중요로직: 상세주소 입력 시 실시간으로 전체주소 업데이트
$('#dtlAddr').on('input keyup blur', function() {
updateWholeAddress();
});
});
// 전역 함수로 노출하여 onclick에서 호출 가능하게 처리
window.searchZipCode = searchZipCode;
window.searchZipCodeCallback = searchZipCodeCallback;
})(window, jQuery);
</script>

Write Preview
Loading…
Cancel
Save