- 새 비밀번호 영문/숫자/특수문자 권장
+ 새 비밀번호 8자 이상 권장
-
+
새 비밀번호 확인
비밀번호 변경
-
이전
+{{--
로그인하기 --}}
- 인증이 완료된 상태에서만 비밀번호 재설정이 가능합니다.
+ 이메일 링크 인증이 완료된 상태에서만 비밀번호 재설정이 가능합니다.
@@ -101,11 +124,28 @@
let step = Number(@json($initialStep ?? 1));
const $email = document.getElementById('fp_email');
- const $code = document.getElementById('fp_code');
+ const $name = document.getElementById('fp_name');
const $newPw = document.getElementById('fp_new');
const $newPw2= document.getElementById('fp_new2');
- // 메시지 영역: 항상 활성 패널의 actions 위에 위치
+ const btnSend = document.getElementById('btnSendMail');
+ const btnResend = document.getElementById('btnResendMail');
+
+ // recaptcha hidden input (없으면 생성)
+ const ensureRecaptchaInput = () => {
+ let el = root.querySelector('input[name="g-recaptcha-response"]');
+ if(!el){
+ el = document.createElement('input');
+ el.type = 'hidden';
+ el.name = 'g-recaptcha-response';
+ el.id = 'g-recaptcha-response';
+ el.value = '';
+ root.prepend(el);
+ }
+ return el;
+ };
+
+ // ---------- message ----------
const mkMsg = () => {
let el = root.querySelector('.auth-msg');
if(!el){
@@ -132,7 +172,6 @@
};
const render = () => {
- // 전환 전 포커스 제거
const activeEl = document.activeElement;
if (activeEl && root.contains(activeEl)) activeEl.blur();
@@ -157,13 +196,37 @@
mkMsg();
- // 전환 후 포커스 이동
const target = root.querySelector(`.auth-panel[data-step="${step}"] input, .auth-panel[data-step="${step}"] button, .auth-panel[data-step="${step}"] a`);
target?.focus?.();
};
// -------- helpers ----------
- const csrf = () => document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
+ const csrf = () => document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
+
+ // ✅ recaptcha token getter
+ const getRecaptchaToken = async (action) => {
+ // production에서만 검증하지만, 프론트는 그냥 항상 시도해도 OK
+ const siteKey = window.__recaptchaSiteKey || '';
+ if(!siteKey) return '';
+
+ // grecaptcha 로딩 체크
+ if(typeof window.grecaptcha === 'undefined' || !window.grecaptcha?.execute){
+ return '';
+ }
+
+ try{
+ // ready 보장
+ await new Promise((resolve) => window.grecaptcha.ready(resolve));
+ const token = await window.grecaptcha.execute(siteKey, { action: action || 'find_pass' });
+
+ const input = ensureRecaptchaInput();
+ input.value = token || '';
+
+ return token || '';
+ }catch(e){
+ return '';
+ }
+ };
const postJson = async (url, data) => {
const res = await fetch(url, {
@@ -198,50 +261,57 @@
return json ?? { ok: true };
};
+ // -------- sending button animation ----------
+ const makeSendingAnimator = () => {
+ let timer = null;
+ return (btn, busy, finalTextAfter = null) => {
+ if (!btn) return;
+
+ if (busy) {
+ btn.disabled = true;
+ btn.dataset.prevText = btn.dataset.prevText || btn.textContent.trim();
+ btn.setAttribute('aria-busy', 'true');
+
+ let dots = 0;
+ btn.textContent = '발송중';
+ timer = setInterval(() => {
+ dots = (dots + 1) % 4;
+ btn.textContent = '발송중' + '.'.repeat(dots);
+ }, 320);
+ } else {
+ btn.disabled = false;
+ btn.removeAttribute('aria-busy');
+ if (timer) { clearInterval(timer); timer = null; }
+
+ if (finalTextAfter) {
+ btn.dataset.prevText = finalTextAfter;
+ btn.textContent = finalTextAfter;
+ } else {
+ btn.textContent = btn.dataset.prevText || btn.textContent;
+ }
+ }
+ };
+ };
+ const setBtnBusy = makeSendingAnimator();
+ const setResendLabel = () => {
+ if (btnSend) btnSend.textContent = '메일 재발송';
+ if (btnResend) btnResend.textContent = '메일 재발송';
+ };
+
// -------- timer ----------
let timerId = null;
let remain = 0;
- const ensureTimerUI = () => {
- let wrap = root.querySelector('.fp-timer');
- if(!wrap){
- wrap = document.createElement('div');
- wrap.className = 'fp-timer';
- wrap.style.marginTop = '8px';
- wrap.style.display = 'flex';
- wrap.style.gap = '10px';
- wrap.style.alignItems = 'center';
-
- const t = document.createElement('span');
- t.className = 'fp-timer__text';
- t.style.fontSize = '13px';
- t.style.color = '#c7c7c7';
-
- const btn = document.createElement('button');
- btn.type = 'button';
- btn.className = 'auth-btn auth-btn--ghost fp-resend';
- btn.textContent = '재전송';
- btn.style.padding = '10px 12px';
-
- wrap.appendChild(t);
- wrap.appendChild(btn);
-
- const step2Field = root.querySelector('[data-step="2"] .auth-field');
- step2Field?.appendChild(wrap);
- }
- return wrap;
- };
-
const tick = () => {
- const wrap = ensureTimerUI();
- const t = wrap.querySelector('.fp-timer__text');
- const btn = wrap.querySelector('.fp-resend');
-
+ const t = root.querySelector('.fp-timer__text');
const mm = String(Math.floor(remain/60)).padStart(2,'0');
const ss = String(remain%60).padStart(2,'0');
- t.textContent = remain > 0 ? `유효시간 ${mm}:${ss}` : '인증번호가 만료되었습니다. 재전송 해주세요.';
- btn.disabled = remain > 0;
+ if (t) {
+ t.textContent = remain > 0
+ ? `링크 유효시간 ${mm}:${ss}`
+ : '링크가 만료되었습니다. 메일 재발송을 진행해 주세요.';
+ }
if(remain <= 0){
clearInterval(timerId);
@@ -252,67 +322,62 @@
};
const startTimer = (sec) => {
- remain = Number(sec || 180);
+ remain = Number(sec || 1800); // 30분 기본
if(timerId) clearInterval(timerId);
timerId = setInterval(tick, 1000);
tick();
};
// -------- actions ----------
- const sendCode = async () => {
+ const sendResetMail = async (fromResend = false) => {
const email = ($email?.value || '').trim();
+ const name = ($name?.value || '').trim();
+
if(!email){
setMsg('이메일을 입력해 주세요.', 'error');
+ step = 1; render();
+ return;
+ }
+ if(!name){
+ setMsg('성명을 입력해 주세요.', 'error');
+ step = 1; render();
return;
}
setMsg('확인 중입니다...', 'info');
- try {
- const json = await postJson(@json(route('web.auth.find_password.send_code')), { email });
+ const targetBtn = fromResend ? btnResend : btnSend;
+ setBtnBusy(targetBtn, true);
- setMsg(json.message || '인증번호를 발송했습니다.', 'success');
+ try {
+ // ✅ 요청 직전에 토큰 생성해서 body에 포함
+ const token = await getRecaptchaToken('find_pass');
+
+ if (!token) {
+ // 로컬/개발에선 괜찮을 수 있지만, production이면 여기서 막아도 됨
+ // 너 정책대로: production에서만 required니까 일단 안내만.
+ setMsg('보안 검증(캡챠) 로딩에 실패했습니다. 새로고침 후 다시 시도해 주세요.', 'error');
+ return;
+ }
+
+ const json = await postJson(@json(route('web.auth.find_password.send_mail')), {
+ email,
+ name,
+ 'g-recaptcha-response': token,
+ });
+
+ setMsg(json.message || '재설정 메일을 발송했습니다. 메일함을 확인해 주세요.', 'success');
step = 2;
render();
- startTimer(json.expires_in || 180);
+ startTimer(json.expires_in || 1800);
+ setResendLabel();
- if(json.dev_code){
- setMsg(`(개발용) 인증번호: ${json.dev_code}`, 'info');
- }
- } catch (err) {
- const p = err.payload || {};
-
- if (err.status === 404 && p.code === 'EMAIL_NOT_FOUND') {
- step = 1;
- render();
- setMsg(p.message || '해당 이메일로 가입된 계정을 찾을 수 없습니다.', 'error');
- return;
- }
-
- setMsg(err.message || '오류가 발생했습니다.', 'error');
- }
- };
-
- const verifyCode = async () => {
- const code = ($code?.value || '').trim();
- if(!/^\d{6}$/.test(code)){
- setMsg('인증번호 6자리를 입력해 주세요.', 'error');
- return;
- }
-
- setMsg('인증 확인 중입니다...', 'info');
-
- try {
- const json = await postJson(@json(route('web.auth.find_password.verify')), { code });
-
- step = 3;
- render();
-
- setMsg(json.message || '인증이 완료되었습니다. 새 비밀번호를 설정해 주세요.', 'success');
} catch (err) {
setMsg(err.message || '오류가 발생했습니다.', 'error');
+ } finally {
+ setBtnBusy(targetBtn, false, '메일 재발송');
}
};
@@ -332,6 +397,7 @@
setMsg('변경 처리 중입니다...', 'info');
try {
+ // (비번 변경도 캡챠 걸 거면 여기에도 token 추가하면 됨)
const json = await postJson(@json(route('web.auth.find_password.reset')), {
new_password: pw1,
new_password_confirmation: pw2
@@ -349,66 +415,30 @@
// -------- events ----------
root.addEventListener('click', async (e) => {
- const resend = e.target.closest('.fp-resend');
- const next = e.target.closest('[data-next]');
+ const send = e.target.closest('[data-send]');
+ const resend = e.target.closest('[data-resend]');
const prev = e.target.closest('[data-prev]');
const reset = e.target.closest('[data-reset]');
- try{
- if(resend){
- await sendCode();
- return;
- }
-
- if(next){
- if(step === 1) await sendCode();
- else if(step === 2) await verifyCode();
- return;
- }
-
- if(reset){
- await resetPassword();
- return;
- }
-
- if(prev){
- step = Math.max(1, step - 1);
- render();
- return;
- }
- }catch(err){
- const stepFromServer = err?.payload?.step;
- if(stepFromServer){
- step = Number(stepFromServer);
- render();
- }
- setMsg(err.message || '오류가 발생했습니다.', 'error');
- }
+ if(send){ await sendResetMail(false); return; }
+ if(resend){ await sendResetMail(true); return; }
+ if(prev){ step = Math.max(1, step - 1); render(); return; }
+ if(reset){ await resetPassword(); return; }
});
- // Enter 키 UX
+ // Enter UX
$email?.addEventListener('keydown', (e) => {
- if(e.key === 'Enter'){
- e.preventDefault();
- root.querySelector('[data-step="1"] [data-next]')?.click();
- }
+ if(e.key === 'Enter'){ e.preventDefault(); btnSend?.click(); }
});
-
- $code?.addEventListener('keydown', (e) => {
- if(e.key === 'Enter'){
- e.preventDefault();
- root.querySelector('[data-step="2"] [data-next]')?.click();
- }
+ $name?.addEventListener('keydown', (e) => {
+ if(e.key === 'Enter'){ e.preventDefault(); btnSend?.click(); }
});
-
$newPw2?.addEventListener('keydown', (e) => {
- if(e.key === 'Enter'){
- e.preventDefault();
- root.querySelector('[data-step="3"] [data-reset]')?.click();
- }
+ if(e.key === 'Enter'){ e.preventDefault(); root.querySelector('[data-reset]')?.click(); }
});
render();
})();
+
@endpush
diff --git a/resources/views/web/auth/login.blade.php b/resources/views/web/auth/login.blade.php
index ca3326d..8424cd0 100644
--- a/resources/views/web/auth/login.blade.php
+++ b/resources/views/web/auth/login.blade.php
@@ -52,7 +52,7 @@
@@ -73,93 +73,150 @@
@endsection
+
@push('scripts')
- @push('scripts')
-
- @endpush
-
+ })();
+
@endpush
+
+
diff --git a/resources/views/web/layouts/layout.blade.php b/resources/views/web/layouts/layout.blade.php
index 504a5e7..9cb48bc 100644
--- a/resources/views/web/layouts/layout.blade.php
+++ b/resources/views/web/layouts/layout.blade.php
@@ -53,7 +53,7 @@
@yield('head')
-
+
{{-- Header --}}
@include('web.company.header')
diff --git a/resources/views/web/mypage/info/gate.blade.php b/resources/views/web/mypage/info/gate.blade.php
new file mode 100644
index 0000000..8de446a
--- /dev/null
+++ b/resources/views/web/mypage/info/gate.blade.php
@@ -0,0 +1,132 @@
+@php
+ $pageTitle = '나의정보';
+ $pageDesc = '연락처, 비밀번호, 보안 관련 설정을 여기서 정리하세요.';
+
+ $breadcrumbs = [
+ ['label' => '홈', 'url' => url('/')],
+ ['label' => '마이페이지', 'url' => url('/mypage/info')],
+ ['label' => '나의정보', 'url' => url()->current()],
+ ];
+
+ $mypageActive = 'info';
+@endphp
+
+@extends('web.layouts.subpage')
+
+@section('title', '나의정보 | PIN FOR YOU')
+@section('meta_description', 'PIN FOR YOU 마이페이지 나의정보 입니다. 회원 정보 및 설정을 확인하세요.')
+@section('canonical', url('/mypage/info'))
+
+@section('subcontent')
+
+ @include('web.partials.content-head', [
+ 'title' => '나의정보',
+ 'desc' => '내 계정 정보를 확인하고 필요한 항목을 관리하세요.'
+ ])
+
+
+
+
+
+
+
비밀번호 재확인
+
회원정보 변경을 위해 비밀번호를 한 번 더 확인합니다.
+
+
+
+ 인증 후 일정 시간 동안만 정보 변경이 가능합니다.
+ 공용 PC에서는 사용 후 반드시 로그아웃하세요.
+
+
+
+
+
+
+
+
+ {{-- ✅ 서브메뉴(사이드바) --}}
+
+
+
+
+ @include('web.partials.content-head', [
+ 'title' => '나의정보 변경',
+ 'desc' => '계정 보안과 개인정보를 안전하게 관리하세요.'
+ ])
+
+ {{-- ✅ 상단 상태 카드 --}}
+
+
+
+
ACCOUNT SETTINGS
+
내 정보 관리
+
+
+ 성명
+ {{ $memberName ?: '-' }}
+
+
+ 이메일
+ {{ $memberEmail ?: '-' }}
+
+
+ 휴대폰
+ {{ $memberPhone ?: '-' }}
+
+
+ 가입일
+ {{ $memberDtReg ?: '-' }}
+
+
+
+
+
+
+ 연락처·비밀번호·보안 설정을 한 곳에서 관리합니다.
+ 변경 작업은 보안을 위해 제한된 시간 동안만 가능합니다.
+
+
+
+ 인증 허용 잔여시간
+
+
+ {{ sprintf('%02d:%02d', intdiv((int)$remainSec, 60), (int)$remainSec % 60) }}
+
+
+
+
+
+
+
+
+
+
+ {{-- ✅ 설정 카드 그리드 --}}
+
+
+ 📱
+
+
연락처 변경
+
PASS 인증 후 휴대폰 번호를 변경합니다.
+
PASS 인증 필요
+
›
+
+
+
+ 🔒
+
+
비밀번호 변경
+
보안을 위해 주기적으로 변경을 권장해요
+
준비중
+
›
+
+
+
+ 🔐
+
+
2차비밀번호 변경
+
민감 기능 이용 시 추가로 확인하는 비밀번호
+
준비중
+
›
+
+
+
+ 🏦
+
+
출금계좌번호
+
+ {{ $hasWithdrawAccount ? '등록된 출금계좌 정보를 수정합니다.' : '출금계좌를 등록해 주세요.' }}
+
+
+ {{ $hasWithdrawAccount ? '수정' : '등록' }}
+
+
›
+
+
+
+ 📩
+
+
수신 동의
+
마케팅 정보 수신 여부를 설정합니다.
+
+ 이메일: {{ ($agreeEmail === 'y' || $agreeEmail === '1') ? '동의' : '미동의' }}
+ · SMS: {{ ($agreeSms === 'y' || $agreeSms === '1') ? '동의' : '미동의' }}
+
+
›
+
+
+
+ ⚠️
+
+
회원탈퇴
+
계정을 삭제합니다. 진행 전 주의사항을 확인해 주세요.
+
주의 필요
+
›
+
+
+
+ {{-- ✅ 안내/주의사항 --}}
+
+
안내
+
+ 개인정보 변경은 보안을 위해 재인증 후 일정 시간 동안만 가능합니다.
+ 예상치 못한 오류가 발생하면, 새로고침 후 다시 시도해 주세요.
+ 기능은 다음 단계에서 실제 처리(저장/검증/로그)를 연결합니다.
+
+
+
- 
- 
-