349 lines
14 KiB
PHP
349 lines
14 KiB
PHP
@extends('web.layouts.auth')
|
|
|
|
@section('title', '회원가입 | PIN FOR YOU')
|
|
@section('meta_description', 'PIN FOR YOU 회원가입 페이지입니다.')
|
|
@section('canonical', url('/auth/register'))
|
|
|
|
@section('h1', '회원가입')
|
|
@section('desc', '휴대폰 번호로 가입 여부를 먼저 확인한 뒤, PASS 본인인증을 진행합니다.')
|
|
@section('card_aria', '회원가입 Step0 - 휴대폰 확인')
|
|
@section('show_cs_links', true)
|
|
|
|
@section('auth_content')
|
|
|
|
{{-- Step0 Hero Image + 안내문구 --}}
|
|
<div class="terms-wrap">
|
|
<div class="terms-steps" aria-label="진행 단계">
|
|
<div class="terms-step is-active">가입정보확인</div>
|
|
<div class="terms-step">약관/인증 확인</div>
|
|
<div class="terms-step">가입정보입력</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<form class="auth-form" id="regStep0Form" onsubmit="return false;">
|
|
@csrf
|
|
|
|
{{-- ✅ hidden input만 생성(토큰은 JS에서 발급 후 payload에 포함) --}}
|
|
<x-recaptcha-v3 />
|
|
|
|
<div class="auth-field">
|
|
<label class="auth-label" for="reg_carrier">
|
|
통신사 <small>선택</small>
|
|
</label>
|
|
|
|
{{-- 서버 전송용 hidden --}}
|
|
<input type="hidden" id="reg_carrier" name="carrier" value="">
|
|
|
|
<div id="reg_carrier_group" style="display:flex; gap:8px; flex-wrap:wrap;">
|
|
<button type="button" class="auth-btn auth-btn--ghost" data-carrier="01">SKT</button>
|
|
<button type="button" class="auth-btn auth-btn--ghost" data-carrier="02">KT</button>
|
|
<button type="button" class="auth-btn auth-btn--ghost" data-carrier="03">LG U+</button>
|
|
{{-- <button type="button" class="auth-btn auth-btn--ghost" data-carrier="04">SKT(알뜰폰)</button>--}}
|
|
{{-- <button type="button" class="auth-btn auth-btn--ghost" data-carrier="05">KT(알뜰폰)</button>--}}
|
|
{{-- <button type="button" class="auth-btn auth-btn--ghost" data-carrier="06">LGU+(알뜰폰)</button>--}}
|
|
</div>
|
|
|
|
<div class="auth-help" id="reg_carrier_help" style="display:none;"></div>
|
|
</div>
|
|
<div class="auth-field">
|
|
<label class="auth-label" for="reg_phone">
|
|
휴대폰 번호 <small>가입 여부 확인</small>
|
|
</label>
|
|
<input class="auth-input" id="reg_phone" name="phone" type="tel"
|
|
placeholder="010-0000-0000"
|
|
autocomplete="tel"
|
|
inputmode="numeric"
|
|
maxlength="13">
|
|
<div class="auth-help" id="reg_phone_help" style="display:none;"></div>
|
|
</div>
|
|
|
|
<div class="auth-actions">
|
|
<button class="auth-btn auth-btn--primary" id="reg_next_btn" type="submit">다음</button>
|
|
<a class="auth-btn auth-btn--ghost" href="{{ route('web.auth.login') }}">
|
|
이미 계정이 있어요 (로그인)
|
|
</a>
|
|
</div>
|
|
</form>
|
|
|
|
<style>
|
|
.terms-steps{
|
|
display:flex;
|
|
gap:10px;
|
|
align-items:center;
|
|
justify-content:space-between;
|
|
}
|
|
|
|
.terms-step{
|
|
flex:1;
|
|
text-align:center;
|
|
padding:10px 12px;
|
|
border-radius:999px; /* ✅ badge */
|
|
font-size:12.5px;
|
|
font-weight:800;
|
|
letter-spacing:-0.2px;
|
|
margin-top: 30px;
|
|
margin-bottom: 50px;
|
|
|
|
/* 기본(비활성) */
|
|
color: rgba(136, 105, 105, 0.78);
|
|
border:1px solid rgba(255,255,255,.14);
|
|
background:rgba(255,255,255,.06);
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255,255,255,.10),
|
|
0 10px 22px rgba(0,0,0,.14);
|
|
|
|
opacity:.78;
|
|
position:relative;
|
|
overflow:hidden;
|
|
}
|
|
|
|
/* ✅ 비활성도 살짝 그라데이션 느낌(은은하게) */
|
|
.terms-step::before{
|
|
content:"";
|
|
position:absolute;
|
|
inset:0;
|
|
background:linear-gradient(135deg,
|
|
rgba(47,107,255,.18),
|
|
rgba(74,163,255,.14),
|
|
rgba(47,210,255,.12)
|
|
);
|
|
opacity:.55;
|
|
pointer-events:none;
|
|
}
|
|
|
|
/* ✅ 활성: 선명한 그라데이션 */
|
|
.terms-step.is-active{
|
|
opacity:1;
|
|
color:#fff;
|
|
border-color:rgba(120,180,255,.50);
|
|
background:linear-gradient(135deg, #2f6bff 0%, #4aa3ff 55%, #2fd2ff 100%);
|
|
box-shadow:
|
|
0 18px 38px rgba(47,107,255,.28),
|
|
0 10px 20px rgba(47,210,255,.14);
|
|
}
|
|
|
|
/* shine 효과 (활성만) */
|
|
.terms-step.is-active::after{
|
|
content:"";
|
|
position:absolute;
|
|
top:-40%;
|
|
left:-45%;
|
|
width:55%;
|
|
height:180%;
|
|
transform:rotate(18deg);
|
|
background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
|
|
opacity:.55;
|
|
animation: termsStepShine 2.8s ease-in-out infinite;
|
|
pointer-events:none;
|
|
}
|
|
|
|
@keyframes termsStepShine{
|
|
0% { transform: translateX(-30%) rotate(18deg); opacity:.20; }
|
|
45% { opacity:.70; }
|
|
100% { transform: translateX(240%) rotate(18deg); opacity:.20; }
|
|
}
|
|
|
|
/* 모바일에서 글자 길어서 깨질 때 대비 */
|
|
@media (max-width: 420px){
|
|
.terms-step{
|
|
font-size:12px;
|
|
padding:10px 10px;
|
|
}
|
|
}
|
|
|
|
</style>
|
|
{{-- ✅ reCAPTCHA 스크립트/공통함수는 이 페이지에서만 로드 --}}
|
|
@push('recaptcha')
|
|
<script>window.__recaptchaSiteKey = @json(config('services.recaptcha.site_key'));</script>
|
|
<script src="https://www.google.com/recaptcha/api.js?render={{ config('services.recaptcha.site_key') }}"></script>
|
|
<script src="{{ asset('assets/js/recaptcha-v3.js') }}"></script>
|
|
@endpush
|
|
|
|
<script>
|
|
(function () {
|
|
const form = document.getElementById('regStep0Form');
|
|
const input = document.getElementById('reg_phone');
|
|
const help = document.getElementById('reg_phone_help');
|
|
const btn = document.getElementById('reg_next_btn');
|
|
|
|
// ✅ 통신사
|
|
const carrierHidden = document.getElementById('reg_carrier');
|
|
const carrierGroup = document.getElementById('reg_carrier_group');
|
|
|
|
let selectedCarrier = '';
|
|
|
|
// 숫자만 남기고 010-0000-0000 형태로 포맷
|
|
function formatPhone(value) {
|
|
const digits = (value || '').replace(/\D/g, '').slice(0, 11);
|
|
if (digits.length <= 3) return digits;
|
|
if (digits.length <= 7) return digits.slice(0, 3) + '-' + digits.slice(3);
|
|
return digits.slice(0, 3) + '-' + digits.slice(3, 7) + '-' + digits.slice(7);
|
|
}
|
|
|
|
// 서버 전송용(숫자만)
|
|
function toDigits(value) {
|
|
return (value || '').replace(/\D/g, '');
|
|
}
|
|
|
|
// ✅ 통신사 버튼 레이아웃/동일 크기(기존 CSS 크게 안 건드리고 JS로 스타일만 주입)
|
|
function applyCarrierButtonLayout() {
|
|
if (!carrierGroup) return;
|
|
|
|
carrierGroup.style.display = 'grid';
|
|
carrierGroup.style.gridTemplateColumns = 'repeat(3, 1fr)';
|
|
carrierGroup.style.gap = '8px';
|
|
carrierGroup.style.width = '100%';
|
|
carrierGroup.style.justifyItems = 'stretch';
|
|
carrierGroup.style.alignItems = 'stretch';
|
|
|
|
carrierGroup.querySelectorAll('button[data-carrier]').forEach(b => {
|
|
b.style.width = '100%';
|
|
b.style.height = '44px'; // 동일 세로
|
|
b.style.padding = '0'; // 높이 고정에 방해되는 padding 제거
|
|
b.style.display = 'inline-flex';
|
|
b.style.alignItems = 'center';
|
|
b.style.justifyContent = 'center';
|
|
b.style.borderRadius = '12px'; // 기존 톤에 맞게(원하면 삭제)
|
|
});
|
|
}
|
|
|
|
// ✅ 통신사 선택 UI
|
|
function bindCarrierButtons() {
|
|
if (!carrierGroup || !carrierHidden) return;
|
|
|
|
carrierGroup.addEventListener('click', function (e) {
|
|
const btnEl = e.target.closest('button[data-carrier]');
|
|
if (!btnEl) return;
|
|
|
|
selectedCarrier = btnEl.getAttribute('data-carrier') || '';
|
|
carrierHidden.value = selectedCarrier;
|
|
|
|
// 선택=primary, 나머지=ghost
|
|
carrierGroup.querySelectorAll('button[data-carrier]').forEach(b => {
|
|
b.classList.remove('auth-btn--primary');
|
|
b.classList.add('auth-btn--ghost');
|
|
});
|
|
btnEl.classList.remove('auth-btn--ghost');
|
|
btnEl.classList.add('auth-btn--primary');
|
|
});
|
|
}
|
|
|
|
// ✅ 휴대폰 입력 UX
|
|
input.addEventListener('input', function () {
|
|
const formatted = formatPhone(input.value);
|
|
if (input.value !== formatted) input.value = formatted;
|
|
});
|
|
|
|
input.addEventListener('keydown', function (e) {
|
|
const allowKeys = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Home', 'End'];
|
|
if (allowKeys.includes(e.key)) return;
|
|
if (e.ctrlKey || e.metaKey) return;
|
|
if (!/^\d$/.test(e.key)) e.preventDefault();
|
|
});
|
|
|
|
input.addEventListener('paste', function (e) {
|
|
e.preventDefault();
|
|
const text = (e.clipboardData || window.clipboardData).getData('text') || '';
|
|
const digits = text.replace(/\D/g, '');
|
|
input.value = formatPhone(digits);
|
|
});
|
|
|
|
// 초기 적용
|
|
applyCarrierButtonLayout();
|
|
bindCarrierButtons();
|
|
|
|
// ✅ submit
|
|
form.addEventListener('submit', async function () {
|
|
// clearMsg()가 기존에 전역으로 있다면 유지
|
|
if (typeof clearMsg === 'function') clearMsg();
|
|
|
|
// 통신사 선택 체크
|
|
if (!selectedCarrier) {
|
|
await showMsg('통신사를 선택하세요.', { type: 'alert', title: '입력오류' });
|
|
return;
|
|
}
|
|
|
|
const phoneDigits = toDigits(input.value);
|
|
|
|
if (!phoneDigits) {
|
|
await showMsg('휴대폰 번호를 입력해 주세요.', { type:'alert', title:'입력오류' });
|
|
input.focus();
|
|
return;
|
|
}
|
|
if (phoneDigits.length < 10) {
|
|
await showMsg('휴대폰 번호를 끝까지 입력해 주세요.', { type:'alert', title:'입력오류' });
|
|
input.focus();
|
|
return;
|
|
}
|
|
|
|
btn.disabled = true;
|
|
|
|
try {
|
|
// ✅ 공통 함수로 토큰 발급 (한 줄)
|
|
const token = await window.recaptchaV3Token('register_phone_check', form);
|
|
|
|
const res = await fetch("{{ route('web.auth.register.phone_check') }}", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
"X-CSRF-TOKEN": "{{ csrf_token() }}",
|
|
"Accept": "application/json"
|
|
},
|
|
body: JSON.stringify({
|
|
phone: phoneDigits,
|
|
carrier: selectedCarrier,
|
|
"g-recaptcha-response": token
|
|
})
|
|
});
|
|
|
|
const raw = await res.text();
|
|
let data = {};
|
|
try { data = JSON.parse(raw || "{}"); } catch (e) { data = {}; }
|
|
|
|
const msg = data.message || '처리에 실패했습니다.';
|
|
|
|
if (data.reason === 'already_member') {
|
|
await showMsg(msg, {
|
|
type: 'confirm',
|
|
title: '안내',
|
|
okText: '이동',
|
|
cancelText: '취소',
|
|
redirect: data.redirect,
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (data.ok === true) {
|
|
|
|
await showMsg(msg || '회원가입 가능한 전화번호 입니다.\n\n인증페이지로 이동합니다.', {
|
|
type: 'confirm',
|
|
title: '안내',
|
|
okText: '이동',
|
|
cancelText: '취소',
|
|
redirect: data.redirect,
|
|
});
|
|
return;
|
|
}
|
|
|
|
await showMsg(msg, { type: 'alert', title: '안내' });
|
|
|
|
|
|
|
|
} catch (e) {
|
|
await showMsg("네트워크 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.", {
|
|
type:'alert',
|
|
title:'네트워크오류'
|
|
});
|
|
} finally {
|
|
btn.disabled = false;
|
|
}
|
|
});
|
|
})();
|
|
</script>
|
|
|
|
@endsection
|
|
|
|
@section('auth_bottom')
|
|
@endsection
|