========================================================================== */ (function () { 'use strict'; // WooCommerce 주소 편집 폼 페이지 (/edit-address/shipping 등) var addressForm = document.querySelector('.woocommerce-address-fields'); if (addressForm) { initAddressEdit(); return; } // WooCommerce 주소 표시 페이지 (/edit-address/) var addressDisplay = document.querySelector('.woocommerce-Addresses'); if (addressDisplay) { initInlineAddressForm(); } /* -------------------------------------------------------------------------- 주소 표시 페이지 → 인라인 편집 폼으로 교체 -------------------------------------------------------------------------- */ function initInlineAddressForm() { var addressColumns = addressDisplay.querySelectorAll('.woocommerce-Address'); addressColumns.forEach(function (col) { var header = col.querySelector('.woocommerce-Address-title'); var addressEl = col.querySelector('address'); var editLink = col.querySelector('a.edit'); if (!addressEl) return; // shipping / billing 구분 var type = 'shipping'; if (col.classList.contains('u-column2') || (editLink && editLink.href.indexOf('billing') > -1)) { type = 'billing'; } // 기존 주소 파싱 var parsed = parseAddress(addressEl.innerHTML); // 기존 주소 표시 숨기기 addressEl.style.display = 'none'; if (editLink) editLink.style.display = 'none'; // 인라인 편집 폼 생성 var form = createAddressForm(type, parsed); col.appendChild(form); }); } /* -------------------------------------------------------------------------- 기존 주소 HTML 파싱 -------------------------------------------------------------------------- */ function parseAddress(html) { var parts = html.split('
').map(function (s) { return s.replace(/<[^>]*>/g, '').trim(); }).filter(Boolean); // WooCommerce KR 주소 형식: 이름 / 주소1 / 주소2 / 시도 / 우편번호 return { name: parts[0] || '', address1: parts[1] || '', address2: parts[2] || '', state: parts[3] || '', postcode: parts[4] || '', phone: parts[5] || '' }; } /* -------------------------------------------------------------------------- 인라인 주소 편집 폼 생성 -------------------------------------------------------------------------- */ function createAddressForm(type, parsed) { var wrapper = document.createElement('div'); wrapper.className = 'feedus-address-inline-edit'; wrapper.innerHTML = '
' + '' + '' + '
' + '
' + '
' + '' + '' + '
' + '' + '
' + '
' + '' + '' + '
' + '
' + '' + '' + '
' + '
' + '' + '
'; // 우편번호 검색 버튼 이벤트 setTimeout(function () { var searchBtn = document.getElementById('feedus_' + type + '_search'); var postcodeInput = document.getElementById('feedus_' + type + '_postcode'); var address1Input = document.getElementById('feedus_' + type + '_address1'); var address2Input = document.getElementById('feedus_' + type + '_address2'); if (searchBtn) { searchBtn.addEventListener('click', function () { openDaumPostcode(type); }); } if (postcodeInput) { postcodeInput.addEventListener('click', function () { openDaumPostcode(type); }); } // 저장 버튼 var saveBtn = document.getElementById('feedus_' + type + '_save'); if (saveBtn) { saveBtn.addEventListener('click', function () { saveAddress(type); }); } }, 0); return wrapper; } /* -------------------------------------------------------------------------- 카카오 우편번호 검색 -------------------------------------------------------------------------- */ function openDaumPostcode(type) { if (typeof daum === 'undefined' || !daum.Postcode) { alert('카카오 우편번호 API가 로드되지 않았습니다.'); return; } new daum.Postcode({ oncomplete: function (data) { var postcodeInput = document.getElementById('feedus_' + type + '_postcode'); var address1Input = document.getElementById('feedus_' + type + '_address1'); var address2Input = document.getElementById('feedus_' + type + '_address2'); postcodeInput.value = data.zonecode; var fullAddress = data.roadAddress || data.jibunAddress; if (data.buildingName) { fullAddress += ' (' + data.buildingName + ')'; } address1Input.value = fullAddress; if (address2Input) { address2Input.value = ''; address2Input.focus(); } } }).open(); } /* -------------------------------------------------------------------------- 주소 저장 (WooCommerce AJAX) -------------------------------------------------------------------------- */ function saveAddress(type) { var phone = document.getElementById('feedus_' + type + '_phone').value; var postcode = document.getElementById('feedus_' + type + '_postcode').value; var address1 = document.getElementById('feedus_' + type + '_address1').value; var address2 = document.getElementById('feedus_' + type + '_address2').value; if (!postcode || !address1) { alert('우편번호 검색으로 주소를 입력해주세요.'); return; } // WooCommerce 주소 편집 페이지로 폼 데이터 전송 var formData = new FormData(); formData.append(type + '_postcode', postcode); formData.append(type + '_address_1', address1); formData.append(type + '_address_2', address2); formData.append(type + '_phone', phone); formData.append(type + '_country', 'KR'); // 시/도 추출 (주소에서) var sido = extractSido(address1); if (sido) { formData.append(type + '_state', sido); } // 시/군/구 추출 var city = extractCity(address1); if (city) { formData.append(type + '_city', city); } var saveBtn = document.getElementById('feedus_' + type + '_save'); saveBtn.textContent = '저장 중...'; saveBtn.disabled = true; // WooCommerce edit-address 페이지에 POST로 전송 var editUrl = '/my-account/edit-address/' + type + '/'; // 먼저 편집 페이지를 GET으로 가져와서 nonce를 추출 fetch(editUrl, { credentials: 'same-origin' }) .then(function (res) { return res.text(); }) .then(function (html) { var parser = new DOMParser(); var doc = parser.parseFromString(html, 'text/html'); var nonceField = doc.querySelector('input[name="woocommerce-edit-address-nonce"]'); var nonce = nonceField ? nonceField.value : ''; // 폼의 모든 필드를 가져와서 업데이트 var originalForm = doc.querySelector('.woocommerce-address-fields form') || doc.querySelector('form.edit-address'); var submitData = new FormData(); if (originalForm) { // 원본 폼의 모든 input 값을 복사 var inputs = originalForm.querySelectorAll('input, select, textarea'); inputs.forEach(function (input) { if (input.name) { submitData.set(input.name, input.value || ''); } }); } // 우리가 수정한 값으로 덮어쓰기 submitData.set(type + '_country', 'KR'); submitData.set(type + '_postcode', postcode); submitData.set(type + '_address_1', address1); submitData.set(type + '_address_2', address2); submitData.set(type + '_phone', phone); if (sido) submitData.set(type + '_state', sido); if (city) submitData.set(type + '_city', city); submitData.set('woocommerce-edit-address-nonce', nonce); submitData.set('action', 'edit_address'); submitData.set('save_address', 'Save address'); return fetch(editUrl, { method: 'POST', credentials: 'same-origin', body: submitData }); }) .then(function (res) { if (res.ok) { saveBtn.textContent = '저장 완료!'; setTimeout(function () { window.location.reload(); }, 500); } else { throw new Error('저장 실패'); } }) .catch(function (err) { alert('주소 저장에 실패했습니다. 다시 시도해주세요.'); saveBtn.textContent = '저장'; saveBtn.disabled = false; }); } /* -------------------------------------------------------------------------- 주소 편집 페이지 - 카카오 우편번호 API 연동 (기존 WooCommerce 폼) -------------------------------------------------------------------------- */ function initAddressEdit() { var prefix = getAddressPrefix(); if (!prefix) return; var postcodeField = document.getElementById(prefix + '_postcode'); var address1Field = document.getElementById(prefix + '_address_1'); var address2Field = document.getElementById(prefix + '_address_2'); var stateField = document.getElementById(prefix + '_state'); var cityField = document.getElementById(prefix + '_city'); if (!postcodeField || !address1Field) return; // 우편번호 검색 버튼 생성 var searchBtn = document.createElement('button'); searchBtn.type = 'button'; searchBtn.className = 'button feedus-postcode-search'; searchBtn.textContent = '우편번호 검색'; var postcodeWrapper = postcodeField.closest('.form-row') || postcodeField.parentElement; postcodeWrapper.style.display = 'flex'; postcodeWrapper.style.alignItems = 'center'; postcodeWrapper.style.flexWrap = 'wrap'; postcodeField.insertAdjacentElement('afterend', searchBtn); postcodeField.readOnly = true; address1Field.readOnly = true; postcodeField.style.backgroundColor = '#f5f5f5'; address1Field.style.backgroundColor = '#f5f5f5'; searchBtn.addEventListener('click', function () { openDaumPostcodeForForm(prefix, postcodeField, address1Field, address2Field, stateField, cityField); }); postcodeField.addEventListener('click', function () { openDaumPostcodeForForm(prefix, postcodeField, address1Field, address2Field, stateField, cityField); }); if (address2Field) { address2Field.placeholder = '상세주소를 입력하세요'; } } function openDaumPostcodeForForm(prefix, postcodeField, address1Field, address2Field, stateField, cityField) { if (typeof daum === 'undefined' || !daum.Postcode) { alert('카카오 우편번호 API가 로드되지 않았습니다.'); return; } new daum.Postcode({ oncomplete: function (data) { postcodeField.value = data.zonecode; var fullAddress = data.roadAddress || data.jibunAddress; if (data.buildingName) { fullAddress += ' (' + data.buildingName + ')'; } address1Field.value = fullAddress; if (stateField) { var sido = convertSido(data.sido); if (stateField.tagName === 'SELECT') { var option = stateField.querySelector('option[value="' + sido + '"]'); stateField.value = option ? sido : data.sido; } else { stateField.value = data.sido; } stateField.dispatchEvent(new Event('change', { bubbles: true })); } if (cityField) { cityField.value = data.sigungu; } if (address2Field) { address2Field.value = ''; address2Field.focus(); } postcodeField.dispatchEvent(new Event('change', { bubbles: true })); address1Field.dispatchEvent(new Event('change', { bubbles: true })); } }).open(); } /* -------------------------------------------------------------------------- 유틸리티 -------------------------------------------------------------------------- */ function getAddressPrefix() { if (document.getElementById('shipping_postcode')) return 'shipping'; if (document.getElementById('billing_postcode')) return 'billing'; if (window.location.href.indexOf('edit-address/shipping') > -1) return 'shipping'; if (window.location.href.indexOf('edit-address/billing') > -1) return 'billing'; return null; } function escAttr(str) { return (str || '').replace(/&/g, '&').replace(/"/g, '"').replace(//g, '>'); } function extractSido(address) { var match = address.match(/^(서울|부산|대구|인천|광주|대전|울산|세종|경기|강원|충북|충남|전북|전남|경북|경남|제주)/); if (match) return convertSido(match[1]); return ''; } function extractCity(address) { var match = address.match(/(?:서울|부산|대구|인천|광주|대전|울산|세종|경기|강원|충북|충남|전북|전남|경북|경남|제주)\s+(\S+[시군구])/); return match ? match[1] : ''; } function convertSido(sido) { var map = { '서울': 'KR-11', '서울특별시': 'KR-11', '부산': 'KR-26', '부산광역시': 'KR-26', '대구': 'KR-27', '대구광역시': 'KR-27', '인천': 'KR-28', '인천광역시': 'KR-28', '광주': 'KR-29', '광주광역시': 'KR-29', '대전': 'KR-30', '대전광역시': 'KR-30', '울산': 'KR-31', '울산광역시': 'KR-31', '세종': 'KR-36', '세종특별자치시': 'KR-36', '경기': 'KR-41', '경기도': 'KR-41', '강원': 'KR-42', '강원도': 'KR-42', '강원특별자치도': 'KR-42', '충북': 'KR-43', '충청북도': 'KR-43', '충남': 'KR-44', '충청남도': 'KR-44', '전북': 'KR-45', '전라북도': 'KR-45', '전북특별자치도': 'KR-45', '전남': 'KR-46', '전라남도': 'KR-46', '경북': 'KR-47', '경상북도': 'KR-47', '경남': 'KR-48', '경상남도': 'KR-48', '제주': 'KR-49', '제주특별자치도': 'KR-49' }; return map[sido] || sido; } })();

Sample Page

This is an example page. It’s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this:

Hi there! I’m a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin’ caught in the rain.)

…or something like this:

The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.

As a new WordPress user, you should go to your dashboard to delete this page and create new pages for your content. Have fun!


Send Close