fix : 배송지 등록/수정 - 일본 주소(일본어) 옵션 추가

src/main/resources/static/js/dlvylc/dlvylc.js

@@ -133,6 +133,7 @@ const fn_move_dlvylc_regpage = function (dftDlvylcAt) {
  배송지 등록
  ***********************************************/
 const fn_insert_dlvylc = function (msg, data, isMobile) {
+    $("#dlvylcUpdate").remove();
     let paramData = null;
     const registForm = $("#dlvylcRegistForm").serialize();
     if (data != null) {
@@ -387,8 +388,74 @@ const fn_update_dlvylc = function (pageIndex,msg,isMobile) {
         if (id == 'langJp') {
             $('#cstmclerCd').prop('disabled', true);
             $('#zip').prop('readonly', false);
+            $('#dtlAdres').attr('placeholder', '以降の住所を入力してください。');
+            $('#mbtlnb').attr('placeholder', '');
+            $('#prefcode').prop('disabled', true);
         } else {
             $('#cstmclerCd').prop('disabled', false);
             $('#zip').prop('readonly', true);
+            $('#dtlAdres').attr('placeholder', '나머지 주소를 입력해 주세요');
+            $('#mbtlnb').attr('placeholder', '휴대폰번호\'-\'없이 입력하세요');
+            $('#prefcode').prop('disabled', false);
+
+            $('#postcodeAlert').hide();
+        }
+    }
+
+    /**********************************************
+     ibsnet api 호출
+     ***********************************************/
+    const fn_select_postcodeJp = function () {
+        $('#postcodeAlert').hide();
+
+        $.ajax({
+            type: 'GET',
+            url: 'https://zipcloud.ibsnet.co.jp/api/search?zipcode=' + $('#zip').val()
+                +'&callback=' + 'fn_set_postcodeJp',
+            dataType: 'jsonp'
+        });
+    }
+
+    /**********************************************
+     ibsnet api 호출 콜백 (화면에 주소 결과값 세팅)
+     ***********************************************/
+    const fn_set_postcodeJp = function (Data) {
+        if(Data.status == 200) {
+            let result = Data.results[0];
+
+            let adres = result.address1;
+            let dtlAdres = [result.address2, result.address3].join(" ");
+            let prefcode = result.prefcode;
+
+            $("#adres").val(adres);
+            $("#dtlAdres").val(dtlAdres);
+            $("#prefcode").val(prefcode);
+        } else {
+            $('#postcodeAlert').show();
+        }
+    }
+
+    /**********************************************
+     배송지 관리 팝업 언어별 form 초기화
+     ***********************************************/
+    let dlvylcFormPreValues = {};
+    const fn_clear_dlvylcForm = function () {
+        const tableInputs = $("#dlvylcFormTable").find("input[name]");
+
+        if (Object.keys(dlvylcFormPreValues).length == 0) {
+            tableInputs.each(function () {
+                const input = $(this);
+                const name = input.attr("name");
+                dlvylcFormPreValues[name] = input.val();
+                input.val("");
+            });
+        } else {
+            tableInputs.each(function () {
+                const input = $(this);
+                const name = input.attr("name");
+                const currentValue = input.val();
+                input.val(dlvylcFormPreValues[name] ?? "");
+                dlvylcFormPreValues[name] = currentValue;
+            });
         }
     }

src/main/resources/static/js/mngr/js/crm/dlvylc/dlvylc_2.js

@@ -150,6 +150,7 @@ const fn_move_dlvylc_regpage_pop = function (isPop, mbrInnb, mbrDvCd, dftDlvylcA
  배송지 등록 ok
  ***********************************************/
 const fn_insert_dlvylc = function (mbrInnb, mbrDvCd, msg, data) {
+    $("#dlvylcUpdate").remove();
     let paramData = null;
     const registForm = $("#dlvylcRegistForm").serialize();
     if (data != null) {
@@ -336,8 +337,74 @@ const fn_toggle_langHeader = function () {
     if (id == 'langJp') {
         $('#cstmclerCd').prop('disabled', true);
         $('#zip').prop('readonly', false);
+        $('#dtlAdres').attr('placeholder', '以降の住所を入力してください。');
+        $('#mbtlnb').attr('placeholder', '');
+        $('#prefcode').prop('disabled', true);
     } else {
         $('#cstmclerCd').prop('disabled', false);
         $('#zip').prop('readonly', true);
+        $('#dtlAdres').attr('placeholder', '나머지 주소를 입력해 주세요');
+        $('#mbtlnb').attr('placeholder', '휴대폰번호\'-\'없이 입력하세요');
+        $('#prefcode').prop('disabled', false);
+
+        $('#postcodeAlert').hide();
+    }
+}
+
+/**********************************************
+ ibsnet api 호출
+ ***********************************************/
+const fn_select_postcodeJp = function () {
+    $('#postcodeAlert').hide();
+
+    $.ajax({
+        type: 'GET',
+        url: 'https://zipcloud.ibsnet.co.jp/api/search?zipcode=' + $('#zip').val()
+            +'&callback=' + 'fn_set_postcodeJp',
+        dataType: 'jsonp'
+    });
+}
+
+/**********************************************
+ ibsnet api 호출 콜백 (화면에 주소 결과값 세팅)
+ ***********************************************/
+const fn_set_postcodeJp = function (Data) {
+    if(Data.status == 200) {
+        let result = Data.results[0];
+
+        let adres = result.address1;
+        let dtlAdres = [result.address2, result.address3].join(" ");
+        let prefcode = result.prefcode;
+
+        $("#adres").val(adres);
+        $("#dtlAdres").val(dtlAdres);
+        $("#prefcode").val(prefcode);
+    } else {
+        $('#postcodeAlert').show();
+    }
+}
+
+/**********************************************
+ 배송지 관리 팝업 언어별 form 초기화
+ ***********************************************/
+let dlvylcFormPreValues = {};
+const fn_clear_dlvylcForm = function () {
+    const tableInputs = $("#dlvylcFormTable").find("input[name]");
+
+    if (Object.keys(dlvylcFormPreValues).length == 0) {
+        tableInputs.each(function () {
+            const input = $(this);
+            const name = input.attr("name");
+            dlvylcFormPreValues[name] = input.val();
+            input.val("");
+        });
+    } else {
+        tableInputs.each(function () {
+            const input = $(this);
+            const name = input.attr("name");
+            const currentValue = input.val();
+            input.val(dlvylcFormPreValues[name] ?? "");
+            dlvylcFormPreValues[name] = currentValue;
+        });
     }
 }

src/main/resources/static/mngr/js/crm/dlvylc/dlvylc.js

@@ -139,6 +139,7 @@ const fn_move_dlvylc_regpage_pop = function (isPop, mbrInnb, mbrDvCd, dftDlvylcA
  배송지 등록 ok
  ***********************************************/
 const fn_insert_dlvylc = function (mbrInnb, mbrDvCd, msg, data) {
+    $("#dlvylcUpdate").remove();
     let paramData = null;
     const registForm = $("#dlvylcRegistForm").serialize();
     if (data != null) {
@@ -326,8 +327,74 @@ const fn_toggle_langHeader = function () {
     if (id == 'langJp') {
         $('#cstmclerCd').prop('disabled', true);
         $('#zip').prop('readonly', false);
+        $('#dtlAdres').attr('placeholder', '以降の住所を入力してください。');
+        $('#mbtlnb').attr('placeholder', '');
+        $('#prefcode').prop('disabled', true);
     } else {
         $('#cstmclerCd').prop('disabled', false);
         $('#zip').prop('readonly', true);
+        $('#dtlAdres').attr('placeholder', '나머지 주소를 입력해 주세요');
+        $('#mbtlnb').attr('placeholder', '휴대폰번호\'-\'없이 입력하세요');
+        $('#prefcode').prop('disabled', false);
+
+        $('#postcodeAlert').hide();
+    }
+}
+
+/**********************************************
+ ibsnet api 호출
+ ***********************************************/
+const fn_select_postcodeJp = function () {
+    $('#postcodeAlert').hide();
+
+    $.ajax({
+        type: 'GET',
+        url: 'https://zipcloud.ibsnet.co.jp/api/search?zipcode=' + $('#zip').val()
+            +'&callback=' + 'fn_set_postcodeJp',
+        dataType: 'jsonp'
+    });
+}
+
+/**********************************************
+ ibsnet api 호출 콜백 (화면에 주소 결과값 세팅)
+ ***********************************************/
+const fn_set_postcodeJp = function (Data) {
+    if(Data.status == 200) {
+        let result = Data.results[0];
+
+        let adres = result.address1;
+        let dtlAdres = [result.address2, result.address3].join(" ");
+        let prefcode = result.prefcode;
+
+        $("#adres").val(adres);
+        $("#dtlAdres").val(dtlAdres);
+        $("#prefcode").val(prefcode);
+    } else {
+        $('#postcodeAlert').show();
+    }
+}
+
+/**********************************************
+ 배송지 관리 팝업 언어별 form 초기화
+ ***********************************************/
+let dlvylcFormPreValues = {};
+const fn_clear_dlvylcForm = function () {
+    const tableInputs = $("#dlvylcFormTable").find("input[name]");
+
+    if (Object.keys(dlvylcFormPreValues).length == 0) {
+        tableInputs.each(function () {
+            const input = $(this);
+            const name = input.attr("name");
+            dlvylcFormPreValues[name] = input.val();
+            input.val("");
+        });
+    } else {
+        tableInputs.each(function () {
+            const input = $(this);
+            const name = input.attr("name");
+            const currentValue = input.val();
+            input.val(dlvylcFormPreValues[name] ?? "");
+            dlvylcFormPreValues[name] = currentValue;
+        });
     }
 }

src/main/resources/static/mngr/js/crm/dlvylc/dlvylc_2.js

@@ -150,6 +150,7 @@ const fn_move_dlvylc_regpage_pop = function (isPop, mbrInnb, mbrDvCd, dftDlvylcA
  배송지 등록 ok
  ***********************************************/
 const fn_insert_dlvylc = function (mbrInnb, mbrDvCd, msg, data) {
+    $("#dlvylcUpdate").remove();
     let paramData = null;
     const registForm = $("#dlvylcRegistForm").serialize();
     if (data != null) {
@@ -336,8 +337,74 @@ const fn_toggle_langHeader = function () {
     if (id == 'langJp') {
         $('#cstmclerCd').prop('disabled', true);
         $('#zip').prop('readonly', false);
+        $('#dtlAdres').attr('placeholder', '以降の住所を入力してください。');
+        $('#mbtlnb').attr('placeholder', '');
+        $('#prefcode').prop('disabled', true);
     } else {
         $('#cstmclerCd').prop('disabled', false);
         $('#zip').prop('readonly', true);
+        $('#dtlAdres').attr('placeholder', '나머지 주소를 입력해 주세요');
+        $('#mbtlnb').attr('placeholder', '휴대폰번호\'-\'없이 입력하세요');
+        $('#prefcode').prop('disabled', false);
+
+        $('#postcodeAlert').hide();
+    }
+}
+
+/**********************************************
+ ibsnet api 호출
+ ***********************************************/
+const fn_select_postcodeJp = function () {
+    $('#postcodeAlert').hide();
+
+    $.ajax({
+        type: 'GET',
+        url: 'https://zipcloud.ibsnet.co.jp/api/search?zipcode=' + $('#zip').val()
+            +'&callback=' + 'fn_set_postcodeJp',
+        dataType: 'jsonp'
+    });
+}
+
+/**********************************************
+ ibsnet api 호출 콜백 (화면에 주소 결과값 세팅)
+ ***********************************************/
+const fn_set_postcodeJp = function (Data) {
+    if(Data.status == 200) {
+        let result = Data.results[0];
+
+        let adres = result.address1;
+        let dtlAdres = [result.address2, result.address3].join(" ");
+        let prefcode = result.prefcode;
+
+        $("#adres").val(adres);
+        $("#dtlAdres").val(dtlAdres);
+        $("#prefcode").val(prefcode);
+    } else {
+        $('#postcodeAlert').show();
+    }
+}
+
+/**********************************************
+ 배송지 관리 팝업 언어별 form 초기화
+ ***********************************************/
+let dlvylcFormPreValues = {};
+const fn_clear_dlvylcForm = function () {
+    const tableInputs = $("#dlvylcFormTable").find("input[name]");
+
+    if (Object.keys(dlvylcFormPreValues).length == 0) {
+        tableInputs.each(function () {
+            const input = $(this);
+            const name = input.attr("name");
+            dlvylcFormPreValues[name] = input.val();
+            input.val("");
+        });
+    } else {
+        tableInputs.each(function () {
+            const input = $(this);
+            const name = input.attr("name");
+            const currentValue = input.val();
+            input.val(dlvylcFormPreValues[name] ?? "");
+            dlvylcFormPreValues[name] = currentValue;
+        });
     }
 }

src/main/webapp/WEB-INF/views/sopmal/mpage/mbr/DlvylcRegistPopupC.jsp

@@ -19,27 +19,14 @@
 <!-- 배송지 등록-->
 <script>
     $(document).ready(function () {
-        $('[name=dlvylcAreaCd]').on('change', fn_toggle_langHeader);
+        $('#mbtlnbAlert').hide();
+        $('#postcodeAlert').hide();
+        dlvylcFormPreValues = {};
+
+        $('[name=dlvylcAreaCd]').on('change', fn_toggle_langHeader)
+                                .on('change', fn_clear_dlvylcForm);
         fn_toggle_langHeader();
     });
-
-    const fn_select_postcodeJp = function () {
-        $.ajax({
-            type: 'GET',
-            url: 'https://zipcloud.ibsnet.co.jp/api/search?zipcode='+$('#zip').val()+'&callback=testcall',
-            dataType: 'jsonp',
-            success: function (Data) {
-                console.log(Data);
-            },
-            error: function (xhr, status, error) {
-                console.error('API 호출 실패:', error);
-            }
-        });
-    }
-
-    const testcall = function () {
-        console.log("hello");
-    }
 </script>
 <div id="dlvylcRegist" class="modal default" style="max-width: 600px;">
     <form id = "dlvylcRegistForm">
@@ -57,7 +44,7 @@
                     <label for="langJp">JP</label>
                 </div>
             </div>
-            <table class="table-address">
+            <table class="table-address" id="dlvylcFormTable">
                 <caption>해당 테이블에 대한 내용</caption>
                 <colgroup>
                     <col style="width:116px;">
@@ -83,8 +70,9 @@
                         <th class="langJp">郵便番号<span class="required-asterisk">*</span></th>
                         <td>
                             <input type="text" class="m-input short" id="zip" name="zip"  title="우편번호" maxlength="7" readonly>
-                            <button class="find-address-btn" onclick="fn_select_postcode(fn_select_dlvylc_postcode); return false;">우편번호 찾기</button>
+                            <button class="find-address-btn langKr" onclick="fn_select_postcode(fn_select_dlvylc_postcode); return false;">우편번호 찾기</button>
-                            <button class="find-address-btn" onclick="fn_select_postcodeJp(); return false;">検索</button>
+                            <button class="find-address-btn langJp" onclick="fn_select_postcodeJp(); return false;">検索</button>
+                            <p class="signUp__inputBox__alertText" id="postcodeAlert">郵便番号を正しく入力してください。</p>
                             <input type="text" class="m-input long my" id="adres" name="adres"  maxlength="66" readonly title="주소">
                             <input type="text" class="m-input long" id="dtlAdres" name="dtlAdres" title="상세주소" maxlength="66" placeholder="나머지 주소를 입력해 주세요">
                         </td>
@@ -93,7 +81,8 @@
                         <th class="langKr">휴대전화번호<span class="required-asterisk">*</span></th>
                         <th class="langJp">電話番号<span class="required-asterisk">*</span></th>
                         <td>
-                            <input name="mbtlnb" type="text" class="m-input telno" title="휴대전화번호"  maxlength="13" placeholder="휴대폰번호'-'없이 입력하세요">
+                            <input id="mbtlnb" name="mbtlnb" type="text" class="m-input telno" title="휴대전화번호"  maxlength="13" placeholder="휴대폰번호'-'없이 입력하세요">
+                            <p class="userform__inputBox__alertText langJp" id="mbtlnbAlert">電話番号をハイフンなしで入力してください。</p>
                         </td>
                     </tr>
                     <tr class="langKr">
@@ -101,6 +90,7 @@
                         <td>
                             <input type="text" class="m-input" id="cstmclerCd" name="cstmclerCd" title="개인통관번호(개인통관부호)" maxlength="13" placeholder="P로 시작하는 13자리 부호를 입력하세요">
                             <button class="find-address-btn" onclick="window.open('https://unipass.customs.go.kr/per/persIndex.do', '_blank'); return false;">통관번호 조회</button>
+                            <input type="hidden" class="m-input" id="prefcode" name="prefCd">
                         </td>
                     </tr>
                 </tbody>

src/main/webapp/WEB-INF/views/sopmal/mpage/mbr/DlvylcUpdtPopupU.jsp

@@ -18,9 +18,13 @@
 <html>
 <script>
     $(document).ready(function (){
-        $(".telno").val(fn_format_mbtlnb($(".telno").val()));
+        $("#mbtlnb").val(fn_format_mbtlnb($("#mbtlnb").val()));
+        $('#mbtlnbAlert').hide();
+        $('#postcodeAlert').hide();
+        dlvylcFormPreValues = {};
 
-        $('[name=dlvylcAreaCd]').on('change', fn_toggle_langHeader);
+        $('[name=dlvylcAreaCd]').on('change', fn_toggle_langHeader)
+                                .on('change', fn_clear_dlvylcForm);
         fn_toggle_langHeader();
     });
 </script>
@@ -40,7 +44,7 @@
                     <label for="langJp">JP</label>
                 </div>
             </div>
-            <table class="table-address">
+            <table class="table-address" id="dlvylcFormTable">
                 <caption>해당 테이블에 대한 내용</caption>
                 <colgroup>
                     <col style="width:116px;">
@@ -68,6 +72,7 @@
                         <input type="text" class="m-input short" id="zip" name="zip"  title="우편번호" value="<c:out value = "${dtlDlvylc.resultVO.zip}"/>" maxlength="7" readonly>
                         <button class="find-address-btn langKr" onclick="fn_select_postcode(fn_select_dlvylc_postcode); return false;">우편번호 찾기</button>
                         <button class="find-address-btn langJp" onclick="fn_select_postcodeJp(); return false;">検索</button>
+                        <p class="signUp__inputBox__alertText" id="postcodeAlert">郵便番号を正しく入力してください。</p>
                         <input type="text" class="m-input long my" id="adres" name="adres"  title="주소" maxlength="66"
                                value=<c:choose>
                                         <c:when test = "${dtlDlvylc.resultVO.adresDv eq '01'}">'<c:out value = "${dtlDlvylc.resultVO.rnmAdres}"/>'</c:when>
@@ -81,8 +86,9 @@
                     <th class="langKr">휴대전화번호<span class="required-asterisk">*</span></th>
                     <th class="langJp">電話番号<span class="required-asterisk">*</span></th>
                     <td>
-                        <input name="mbtlnb" type="text" class="m-input telno" title="휴대전화번호"  value="<c:out value = "${dtlDlvylc.resultVO.mbtlnb}"/>"
+                        <input id="mbtlnb" name="mbtlnb" type="text" class="m-input telno" title="휴대전화번호"  value="<c:out value = "${dtlDlvylc.resultVO.mbtlnb}"/>"
                                maxlength="13" placeholder="휴대폰번호'-'없이 입력하세요">
+                        <p class="userform__inputBox__alertText langJp" id="mbtlnbAlert">電話番号をハイフンなしで入力してください。</p>
                     </td>
                 </tr>
                 <tr class="langKr">
@@ -91,6 +97,7 @@
                         <input type="text" class="m-input" id="cstmclerCd" name="cstmclerCd" title="개인통관번호(개인통관부호)" value="<c:out value = "${dtlDlvylc.resultVO.cstmclerCd}"/>"
                                maxlength="13" placeholder="P로 시작하는 13자리 부호를 입력하세요">
                         <button class="find-address-btn" onclick="window.open('https://unipass.customs.go.kr/per/persIndex.do', '_blank'); return false;">통관번호 조회</button>
+                        <input type="hidden" class="m-input" id="prefcode" name="prefCd">
                     </td>
                 </tr>
                 </tbody>