commit
This commit is contained in:
457
kngil/js/mypage.js
Normal file
457
kngil/js/mypage.js
Normal file
@@ -0,0 +1,457 @@
|
||||
/**
|
||||
* mypage.js
|
||||
* 마이페이지 관련 모든 모달 흐름 관리
|
||||
*/
|
||||
|
||||
/* =========================
|
||||
공통 유틸
|
||||
========================= */
|
||||
function show(id) {
|
||||
const el = document.getElementById(id)
|
||||
if (el) el.style.display = 'block'
|
||||
}
|
||||
|
||||
function hide(id) {
|
||||
const el = document.getElementById(id)
|
||||
if (el) el.style.display = 'none'
|
||||
}
|
||||
|
||||
/* =========================
|
||||
마이페이지 1단계 (비밀번호 인증)
|
||||
- 헤더에서 호출
|
||||
========================= */
|
||||
window.mypage01 = function () {
|
||||
if (!window.IS_LOGIN) {
|
||||
if (typeof window.login === 'function') {
|
||||
window.login()
|
||||
}
|
||||
return
|
||||
}
|
||||
show('pop_mypage01')
|
||||
}
|
||||
|
||||
/* =========================
|
||||
마이페이지 2단계 (실제 마이페이지)
|
||||
========================= */
|
||||
let currentPage = 1
|
||||
|
||||
window.mypage02 = async function (page = 1) {
|
||||
currentPage = page
|
||||
hide('pop_mypage01')
|
||||
|
||||
try {
|
||||
const res = await fetch(`/kngil/bbs/mypage02.php?page=${page}`)
|
||||
const json = await res.json()
|
||||
|
||||
if (json.status !== 'success') {
|
||||
alert(json.message || '데이터 로드 실패')
|
||||
return
|
||||
}
|
||||
|
||||
renderMyPage02(json.user)
|
||||
renderMyPageHistory(json.history)
|
||||
renderPagination(json.pagination)
|
||||
|
||||
show('pop_mypage02')
|
||||
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
alert('마이페이지 로딩 오류')
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function renderMyPage02(data) {
|
||||
|
||||
// 이름 / ID
|
||||
document.getElementById('mp_user_nm').textContent = data.user_nm
|
||||
document.getElementById('mp_user_id').textContent = `(${data.user_id})`
|
||||
|
||||
// 연락처
|
||||
document.getElementById('mp_tel').textContent = data.tel_no || '-'
|
||||
document.getElementById('mp_email').textContent = data.email || '-'
|
||||
|
||||
// 회사 정보
|
||||
document.getElementById('mp_co_nm').textContent = data.co_nm || '-'
|
||||
document.getElementById('mp_dept_nm').textContent = data.dept_nm || '-'
|
||||
|
||||
// 사용량
|
||||
document.getElementById('mp_tot_use').textContent =
|
||||
Number(data.tot_use || 0).toLocaleString()
|
||||
|
||||
document.getElementById('mp_year_use').textContent =
|
||||
Number(data.year_use || 0).toLocaleString()
|
||||
}
|
||||
|
||||
function formatDate(dateStr) {
|
||||
if (!dateStr) return '-'
|
||||
const d = new Date(dateStr)
|
||||
const yy = String(d.getFullYear()).slice(2)
|
||||
const mm = String(d.getMonth() + 1).padStart(2, '0')
|
||||
const dd = String(d.getDate()).padStart(2, '0')
|
||||
return `${yy}-${mm}-${dd}`
|
||||
}
|
||||
|
||||
function renderMyPageHistory(list) {
|
||||
const tbody = document.getElementById('mp_history_body')
|
||||
tbody.innerHTML = ''
|
||||
|
||||
if (!list.length) {
|
||||
tbody.innerHTML = `
|
||||
<tr>
|
||||
<td colspan="4" style="text-align:center;">사용 이력이 없습니다.</td>
|
||||
</tr>
|
||||
`
|
||||
return
|
||||
}
|
||||
|
||||
list.forEach((row, idx) => {
|
||||
const tr = document.createElement('tr')
|
||||
tr.innerHTML = `
|
||||
<td>${(currentPage - 1) * 5 + idx + 1}</td>
|
||||
<td class="tit">${row.ser_bc}</td>
|
||||
<td>${formatDate(row.use_dt)}</td>
|
||||
<td><em>${Number(row.use_area).toLocaleString()}</em></td>
|
||||
`
|
||||
tbody.appendChild(tr)
|
||||
})
|
||||
}
|
||||
|
||||
function renderPagination(p) {
|
||||
|
||||
const ul = document.querySelector('.pagination-list')
|
||||
if (!ul) return
|
||||
|
||||
ul.innerHTML = ''
|
||||
|
||||
for (let i = 1; i <= p.totalPages; i++) {
|
||||
const li = document.createElement('li')
|
||||
li.className = (i === p.page) ? 'on' : ''
|
||||
|
||||
const a = document.createElement('a')
|
||||
a.href = '#'
|
||||
a.textContent = i
|
||||
a.addEventListener('click', (e) => {
|
||||
e.preventDefault()
|
||||
mypage02(i)
|
||||
})
|
||||
|
||||
li.appendChild(a)
|
||||
ul.appendChild(li)
|
||||
}
|
||||
}
|
||||
|
||||
/* =========================
|
||||
마이페이지 3단계 (마이페이지 정보수정)
|
||||
========================= */
|
||||
|
||||
window.mypage03 = async function () {
|
||||
|
||||
// ✅ 비밀번호 변경 영역 초기 상태 강제
|
||||
const rowCurrent = document.getElementById('row-pw-current')
|
||||
const rowNew = document.getElementById('row-pw-new')
|
||||
const rowView = document.querySelector('.btn-sm.change')?.closest('tr')
|
||||
|
||||
rowCurrent && (rowCurrent.style.display = 'none')
|
||||
rowNew && (rowNew.style.display = 'none')
|
||||
rowView && (rowView.style.display = '')
|
||||
|
||||
try {
|
||||
const res = await fetch('/kngil/bbs/mypage03.php')
|
||||
const json = await res.json()
|
||||
|
||||
if (json.status !== 'success') {
|
||||
alert(json.message)
|
||||
return
|
||||
}
|
||||
|
||||
fillMyPage03(json.data)
|
||||
bindPasswordValidation()
|
||||
hide('pop_mypage02')
|
||||
show('pop_mypage03')
|
||||
bindPasswordChangeUI()
|
||||
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
alert('회원정보 조회 오류')
|
||||
}
|
||||
};
|
||||
|
||||
;(function bindMyPage03Save() {
|
||||
|
||||
const popup = document.getElementById('pop_mypage03')
|
||||
if (!popup) return
|
||||
|
||||
const btnSave = popup.querySelector('.btn-full')
|
||||
|
||||
btnSave.addEventListener('click', async () => {
|
||||
|
||||
const password = popup.querySelector('#new_pw')?.value.trim() || ''
|
||||
|
||||
const emailId = popup.querySelector('.e-id')?.value.trim()
|
||||
const domainSel = popup.querySelector('#domain_list')
|
||||
const customDomain = popup.querySelector('#custom_domain')
|
||||
|
||||
let email = ''
|
||||
if (emailId) {
|
||||
const domain =
|
||||
domainSel.value === 'type'
|
||||
? customDomain.value.trim()
|
||||
: domainSel.options[domainSel.selectedIndex].text
|
||||
email = `${emailId}@${domain}`
|
||||
}
|
||||
|
||||
const telNo = popup.querySelector('#user_phone')?.value.trim()
|
||||
const deptNm = popup.querySelector('#department_name')?.value.trim()
|
||||
|
||||
try {
|
||||
const res = await fetch('/kngil/bbs/mypage03.php', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
password,
|
||||
email,
|
||||
tel_no: telNo,
|
||||
dept_nm: deptNm
|
||||
})
|
||||
})
|
||||
|
||||
const json = await res.json()
|
||||
|
||||
if (json.status === 'success') {
|
||||
alert('정보가 수정되었습니다.')
|
||||
hide('pop_mypage03')
|
||||
mypage02()
|
||||
} else {
|
||||
alert(json.message)
|
||||
}
|
||||
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
alert('저장 중 오류 발생')
|
||||
}
|
||||
})
|
||||
|
||||
})();
|
||||
|
||||
|
||||
function fillMyPage03(data) {
|
||||
|
||||
const popup = document.getElementById('pop_mypage03')
|
||||
if (!popup) return
|
||||
|
||||
/* =========================
|
||||
아이디
|
||||
========================= */
|
||||
const idInput = popup.querySelector('input[readonly]')
|
||||
if (idInput) idInput.value = data.user_id || ''
|
||||
|
||||
/* =========================
|
||||
이름
|
||||
========================= */
|
||||
const nameInput = popup.querySelector('input[placeholder="이지빔"]')
|
||||
if (nameInput) nameInput.value = data.user_nm || ''
|
||||
|
||||
/* =========================
|
||||
이메일
|
||||
========================= */
|
||||
if (data.email) {
|
||||
const [emailId, domain] = data.email.split('@')
|
||||
|
||||
const emailInput = popup.querySelector('.e-id')
|
||||
const domainList = popup.querySelector('#domain_list')
|
||||
const customDomain = popup.querySelector('#custom_domain')
|
||||
|
||||
if (emailInput) emailInput.value = emailId
|
||||
|
||||
// 도메인 목록에 있으면 선택
|
||||
const option = [...domainList.options].find(opt => opt.text === domain)
|
||||
|
||||
if (option) {
|
||||
domainList.value = option.value
|
||||
customDomain.classList.add('d-none')
|
||||
customDomain.value = ''
|
||||
} else {
|
||||
domainList.value = 'type'
|
||||
customDomain.classList.remove('d-none')
|
||||
customDomain.value = domain
|
||||
}
|
||||
}
|
||||
|
||||
/* =========================
|
||||
부서명
|
||||
========================= */
|
||||
const deptInput = popup.querySelector('#department_name')
|
||||
if (deptInput) deptInput.value = data.dept_nm || ''
|
||||
|
||||
/* =========================
|
||||
휴대폰 (표시만)
|
||||
========================= */
|
||||
const phoneInput = popup.querySelector('#user_phone')
|
||||
if (phoneInput) phoneInput.value = data.tel_no || ''
|
||||
}
|
||||
|
||||
|
||||
/* =========================
|
||||
비밀번호 재인증 처리
|
||||
========================= */
|
||||
;(function bindPasswordVerify() {
|
||||
|
||||
const popup = document.getElementById('pop_mypage01')
|
||||
if (!popup) return
|
||||
|
||||
const form = popup.querySelector('.tab-content.id form')
|
||||
if (!form) return
|
||||
|
||||
form.addEventListener('submit', async (e) => {
|
||||
e.preventDefault()
|
||||
|
||||
const pwInput = popup.querySelector('#login_password')
|
||||
const pw = pwInput?.value.trim()
|
||||
|
||||
if (!pw) {
|
||||
alert('비밀번호를 입력하세요.')
|
||||
pwInput?.focus()
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await fetch('/kngil/bbs/mypage01.php', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ pw })
|
||||
})
|
||||
|
||||
const json = await res.json()
|
||||
|
||||
if (json.status === 'success') {
|
||||
pwInput.value = ''
|
||||
window.mypage02()
|
||||
} else {
|
||||
alert(json.message || '비밀번호가 올바르지 않습니다.')
|
||||
pwInput.focus()
|
||||
}
|
||||
|
||||
} catch (err) {
|
||||
console.error('[mypage verify error]', err)
|
||||
alert('인증 중 오류가 발생했습니다.')
|
||||
}
|
||||
})
|
||||
|
||||
})(); // ✅ IIFE 종료
|
||||
|
||||
/* =========================
|
||||
공통 닫기
|
||||
========================= */
|
||||
window.closeMyPage = function () {
|
||||
hide('pop_mypage01')
|
||||
hide('pop_mypage02')
|
||||
hide('pop_mypage03')
|
||||
}
|
||||
|
||||
/* =========================
|
||||
새로고침 / bfcache 대응 (script-only)
|
||||
========================= */
|
||||
window.addEventListener('pageshow', () => {
|
||||
['pop_mypage01','pop_mypage02','pop_mypage03']
|
||||
.forEach(hide)
|
||||
})
|
||||
|
||||
|
||||
/* =========================
|
||||
비밀번호 변경 UI 토글
|
||||
========================= */
|
||||
function bindPasswordChangeUI() {
|
||||
|
||||
const rowOriginal = document.getElementById('row-pw-original')
|
||||
const rowNew = document.getElementById('row-pw-new')
|
||||
const btnChange = document.getElementById('btnPwChange')
|
||||
const btnCancel = document.getElementById('btnPwCancel')
|
||||
|
||||
if (!rowOriginal || !rowNew || !btnChange || !btnCancel) {
|
||||
console.warn('[mypage] password toggle elements missing')
|
||||
return
|
||||
}
|
||||
|
||||
// 초기 상태
|
||||
rowNew.style.display = 'none'
|
||||
|
||||
// 비밀번호 변경
|
||||
btnChange.addEventListener('click', () => {
|
||||
rowOriginal.style.display = 'none'
|
||||
rowNew.style.display = ''
|
||||
})
|
||||
|
||||
// 취소
|
||||
btnCancel.addEventListener('click', () => {
|
||||
rowOriginal.style.display = ''
|
||||
rowNew.style.display = 'none'
|
||||
|
||||
document.getElementById('current_pw').value = ''
|
||||
document.getElementById('new_pw').value = ''
|
||||
document.getElementById('new_pw_confirm').value = ''
|
||||
})
|
||||
}
|
||||
/* =========================
|
||||
회원정보 유효성 체크
|
||||
========================= */
|
||||
function bindPasswordValidation() {
|
||||
const pw = document.getElementById('new_pw')
|
||||
const pwConfirm = document.getElementById('new_pw_confirm')
|
||||
const msg = document.getElementById('pwPolicyMsg')
|
||||
|
||||
if (!pw || !pwConfirm || !msg) return
|
||||
|
||||
function updateMessage(text, isError = true) {
|
||||
msg.textContent = text
|
||||
msg.classList.remove('d-none')
|
||||
msg.style.color = isError ? '#e60000' : '#2e7d32'
|
||||
}
|
||||
|
||||
function validate() {
|
||||
const v = pw.value
|
||||
const c = pwConfirm.value
|
||||
|
||||
if (!v && !c) {
|
||||
msg.classList.add('d-none')
|
||||
return
|
||||
}
|
||||
|
||||
const policy = checkPasswordPolicy(v)
|
||||
|
||||
if (!policy.length) {
|
||||
updateMessage('비밀번호는 8자 이상이어야 합니다.')
|
||||
return
|
||||
}
|
||||
if (!policy.eng) {
|
||||
updateMessage('영문자를 포함해야 합니다.')
|
||||
return
|
||||
}
|
||||
if (!policy.num) {
|
||||
updateMessage('숫자를 포함해야 합니다.')
|
||||
return
|
||||
}
|
||||
if (!policy.special) {
|
||||
updateMessage('특수문자를 포함해야 합니다.')
|
||||
return
|
||||
}
|
||||
if (c && v !== c) {
|
||||
updateMessage('비밀번호가 일치하지 않습니다.')
|
||||
return
|
||||
}
|
||||
|
||||
updateMessage('사용 가능한 비밀번호입니다.', false)
|
||||
}
|
||||
|
||||
pw.addEventListener('input', validate)
|
||||
pwConfirm.addEventListener('input', validate)
|
||||
}
|
||||
|
||||
function checkPasswordPolicy(pw) {
|
||||
return {
|
||||
length: pw.length >= 8,
|
||||
eng: /[a-zA-Z]/.test(pw),
|
||||
num: /[0-9]/.test(pw),
|
||||
special: /[^a-zA-Z0-9]/.test(pw)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user