293 lines
13 KiB
PHP
293 lines
13 KiB
PHP
@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_renew'))
|
||
|
||
@section('subcontent')
|
||
<div class="mypage-info-page">
|
||
|
||
@include('web.partials.content-head', [
|
||
'title' => '나의정보 변경',
|
||
'desc' => '계정 보안과 개인정보를 안전하게 관리하세요.'
|
||
])
|
||
|
||
{{-- ✅ 상단 상태 카드 --}}
|
||
<div class="mypage-hero mt-3">
|
||
<div class="mypage-hero__inner">
|
||
<div class="mypage-hero__left">
|
||
<div class="mypage-hero__kicker">ACCOUNT SETTINGS</div>
|
||
<div class="mypage-hero__title">내 정보 관리</div>
|
||
<div class="mypage-hero__me mt-2">
|
||
<div class="mypage-hero__me-row">
|
||
<span class="k">성명</span>
|
||
<span class="v">{{ $memberName ?: '-' }}</span>
|
||
</div>
|
||
<div class="mypage-hero__me-row">
|
||
<span class="k">이메일</span>
|
||
<span class="v">{{ $memberEmail ?: '-' }}</span>
|
||
</div>
|
||
<div class="mypage-hero__me-row">
|
||
<span class="k">휴대폰</span>
|
||
<span class="v">{{ $memberPhone ?: '-' }}</span>
|
||
</div>
|
||
<div class="mypage-hero__me-row">
|
||
<span class="k">가입일</span>
|
||
<span class="v">{{ $memberDtReg ?: '-' }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mypage-hero__right">
|
||
<div class="mypage-hero__desc">
|
||
연락처·비밀번호·보안 설정을 한 곳에서 관리합니다.
|
||
변경 작업은 보안을 위해 제한된 시간 동안만 가능합니다.
|
||
</div>
|
||
<div class="mypage-reauth mypage-reauth--countdown"
|
||
data-expire="{{ (int)$expireTs }}"
|
||
data-remain="{{ (int)$remainSec }}">
|
||
<div class="mypage-reauth__one">
|
||
<span class="mypage-reauth__label">인증 허용 잔여시간</span>
|
||
<span class="mypage-reauth__value">
|
||
<b id="reauthCountdown">
|
||
{{ sprintf('%02d:%02d', intdiv((int)$remainSec, 60), (int)$remainSec % 60) }}
|
||
</b>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mypage-hero__actions">
|
||
<a href="{{ route('web.mypage.info.gate_reset') }}" class="btn btn-mypage-primary">
|
||
인증 다시 하기
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- ✅ 설정 카드 그리드 --}}
|
||
<div class="mypage-grid mt-3">
|
||
<button type="button"
|
||
class="mypage-card mypage-card--btn"
|
||
data-action="phone-change"
|
||
data-ready-url="{{ route('web.mypage.info.pass.ready') }}">
|
||
<div class="mypage-card__icon">📱</div>
|
||
<div class="mypage-card__body">
|
||
<div class="mypage-card__title">연락처 변경</div>
|
||
<div class="mypage-card__desc">PASS 인증 후 휴대폰 번호를 변경합니다.</div>
|
||
<div class="mypage-card__meta">PASS 인증 필요</div>
|
||
</div>
|
||
<div class="mypage-card__arrow">›</div>
|
||
</button>
|
||
|
||
<a class="mypage-card" href="javascript:void(0)" aria-label="비밀번호 변경 (준비중)" data-action="pw-change">
|
||
<div class="mypage-card__icon">🔒</div>
|
||
<div class="mypage-card__body">
|
||
<div class="mypage-card__title">비밀번호 변경</div>
|
||
<div class="mypage-card__desc">보안을 위해 주기적으로 변경을 권장해요</div>
|
||
<div class="mypage-card__meta">변경</div>
|
||
</div>
|
||
<div class="mypage-card__arrow">›</div>
|
||
</a>
|
||
|
||
<button type="button"
|
||
class="mypage-card mypage-card--btn"
|
||
data-action="pw2-change"
|
||
aria-label="2차 비밀번호 변경">
|
||
<div class="mypage-card__icon">🔐</div>
|
||
<div class="mypage-card__body">
|
||
<div class="mypage-card__title">2차비밀번호 변경</div>
|
||
<div class="mypage-card__desc">민감 기능 이용 시 추가로 확인하는 비밀번호</div>
|
||
<div class="mypage-card__meta">변경</div>
|
||
</div>
|
||
<div class="mypage-card__arrow">›</div>
|
||
</button>
|
||
|
||
<button type="button"
|
||
class="mypage-card mypage-card--btn"
|
||
aria-label="출금계좌번호 {{ $hasWithdrawAccount ? '수정' : '등록' }}"
|
||
data-action="withdraw-account">
|
||
<div class="mypage-card__icon">🏦</div>
|
||
<div class="mypage-card__body">
|
||
<div class="mypage-card__title">출금계좌번호</div>
|
||
<div class="mypage-card__desc">
|
||
{{ $hasWithdrawAccount ? '등록된 출금계좌 정보를 수정합니다.' : '출금계좌를 등록해 주세요.' }}
|
||
</div>
|
||
<div class="mypage-card__meta">
|
||
{{ $hasWithdrawAccount ? '수정' : '등록' }}
|
||
</div>
|
||
</div>
|
||
<div class="mypage-card__arrow">›</div>
|
||
</button>
|
||
|
||
<button type="button" class="mypage-card mypage-card--btn" data-action="consent-edit">
|
||
<div class="mypage-card__icon">📩</div>
|
||
<div class="mypage-card__body">
|
||
<div class="mypage-card__title">수신 동의</div>
|
||
<div class="mypage-card__desc">마케팅 정보 수신 여부를 설정합니다.</div>
|
||
<div class="mypage-card__meta">
|
||
이메일: {{ ($agreeEmail === 'y' || $agreeEmail === '1') ? '동의' : '미동의' }}
|
||
· SMS: {{ ($agreeSms === 'y' || $agreeSms === '1') ? '동의' : '미동의' }}
|
||
</div>
|
||
</div>
|
||
<div class="mypage-card__arrow">›</div>
|
||
</button>
|
||
|
||
<button type="button" class="mypage-card mypage-card--btn mypage-card--danger" data-action="withdraw-member">
|
||
<div class="mypage-card__icon">⚠️</div>
|
||
<div class="mypage-card__body">
|
||
<div class="mypage-card__title">회원탈퇴</div>
|
||
<div class="mypage-card__desc">계정을 삭제합니다. 진행 전 주의사항을 확인해 주세요.</div>
|
||
<div class="mypage-card__meta">주의 필요</div>
|
||
</div>
|
||
<div class="mypage-card__arrow">›</div>
|
||
</button>
|
||
</div>
|
||
|
||
{{-- ✅ 안내/주의사항 --}}
|
||
<div class="mypage-note mt-3">
|
||
<div class="mypage-note__title">안내</div>
|
||
<ul class="mypage-note__list">
|
||
<li>개인정보 변경은 보안을 위해 <b>재인증 후 일정 시간</b> 동안만 가능합니다.</li>
|
||
<li>예상치 못한 오류가 발생하면, 새로고침 후 다시 시도해 주세요.</li>
|
||
<li>기능은 다음 단계에서 실제 처리(저장/검증/로그)를 연결합니다.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<form id="mypageDanalStartForm" method="post" action="{{ route('web.mypage.info.danal.start') }}" style="display:none;">
|
||
@csrf
|
||
<input type="hidden" name="platform" id="mypagePlatform" value="web">
|
||
<input type="hidden" name="fields" id="mypagePassFields" value="">
|
||
</form>
|
||
|
||
@push('styles')
|
||
<style>
|
||
.mypage-reauth__one{
|
||
display:flex;
|
||
align-items:center;
|
||
justify-content:space-between;
|
||
gap:10px;
|
||
}
|
||
#reauthCountdown{
|
||
font-size:14px;
|
||
letter-spacing:0.5px;
|
||
}
|
||
/* 더 강한 특이도(덮임 방지) + 흰 배경에서도 확실히 보이게 */
|
||
.mypage-info-page .mypage-hero .mypage-hero__me{
|
||
margin-top:12px;
|
||
padding:14px;
|
||
border-radius:14px;
|
||
background:#f7f8fb; /* ✅ 흰배경에서도 티 나게 */
|
||
border:1px solid #e5e7eb;
|
||
box-shadow: 0 10px 24px rgba(16,24,40,.08);
|
||
}
|
||
|
||
.mypage-info-page .mypage-hero .mypage-hero__me-row{
|
||
display:flex;
|
||
align-items:center;
|
||
justify-content:space-between;
|
||
gap:12px;
|
||
padding:10px 12px;
|
||
border-radius:12px;
|
||
background:#ffffff;
|
||
border:1px solid rgba(0,0,0,.04);
|
||
}
|
||
|
||
.mypage-info-page .mypage-hero .mypage-hero__me-row + .mypage-hero__me-row{
|
||
margin-top:8px;
|
||
}
|
||
|
||
.mypage-info-page .mypage-hero .mypage-hero__me-row:hover{
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 6px 16px rgba(16,24,40,.06);
|
||
}
|
||
|
||
.mypage-info-page .mypage-hero .mypage-hero__me-row .k{
|
||
display:inline-flex;
|
||
align-items:center;
|
||
gap:8px;
|
||
font-size:12px;
|
||
font-weight:800;
|
||
color:#667085;
|
||
white-space:nowrap;
|
||
}
|
||
|
||
.mypage-info-page .mypage-hero .mypage-hero__me-row .k::before{
|
||
content:'';
|
||
width:8px;
|
||
height:8px;
|
||
border-radius:999px;
|
||
background:#2563eb; /* 포인트 컬러 */
|
||
box-shadow: 0 0 0 4px rgba(37,99,235,.12);
|
||
}
|
||
|
||
.mypage-info-page .mypage-hero .mypage-hero__me-row .v{
|
||
font-size:14px;
|
||
font-weight:900;
|
||
color:#101828;
|
||
letter-spacing:.2px;
|
||
text-align:right;
|
||
word-break:break-all;
|
||
}
|
||
|
||
/* 모바일 */
|
||
@media (max-width: 480px){
|
||
.mypage-info-page .mypage-hero .mypage-hero__me{
|
||
padding:12px;
|
||
border-radius:12px;
|
||
}
|
||
.mypage-info-page .mypage-hero .mypage-hero__me-row{
|
||
padding:10px 10px;
|
||
}
|
||
.mypage-info-page .mypage-hero .mypage-hero__me-row .v{
|
||
font-size:13px;
|
||
}
|
||
}
|
||
|
||
</style>
|
||
@endpush
|
||
@push('scripts')
|
||
<script>
|
||
(function () {
|
||
const prev = window.mypageRenew || {};
|
||
|
||
window.mypageRenew = Object.assign({}, prev, {
|
||
memberName: @json($memberName),
|
||
bankGroups: @json(config('bank_code.groups')),
|
||
bankFlat: @json(config('bank_code.flat')),
|
||
bankGroupLabels: {
|
||
bank_1st: '메이저 1금융권',
|
||
bank_2nd: '2금융권/협동조합/서민금융',
|
||
global: '글로벌/외국계 은행',
|
||
securities: '증권사',
|
||
others: '기타/유관기관',
|
||
},
|
||
urls: Object.assign({}, (prev.urls || {}), {
|
||
gateReset: @json(route('web.mypage.info.gate_reset')),
|
||
passReady: @json(route('web.mypage.info.pass.ready')),
|
||
danalStart: @json(route('web.mypage.info.danal.start')),
|
||
passwordUpdate: @json(route('web.mypage.info.password.update')),
|
||
pin2Update: @json(route('web.mypage.info.pin2.update')),
|
||
withdrawVerifyOut: @json(route('web.mypage.info.withdraw.verify_out')),
|
||
})
|
||
});
|
||
})();
|
||
</script>
|
||
<script src="{{ asset('assets/js/mypage_renew.js') }}" defer></script>
|
||
@endpush
|
||
|
||
@endsection
|