233 lines
10 KiB
PHP
233 lines
10 KiB
PHP
@extends('web.layouts.subpage')
|
|
|
|
@php
|
|
$pageTitle = '1:1 문의';
|
|
$pageDesc = '결제·발송·코드 확인 등 상세 문의는 접수 후 순차적으로 답변드려요.';
|
|
|
|
$breadcrumbs = [
|
|
['label' => '홈', 'url' => url('/')],
|
|
['label' => '고객센터', 'url' => url('/cs/notice')],
|
|
['label' => '1:1 문의', 'url' => url()->current()],
|
|
];
|
|
|
|
// 고객센터 탭
|
|
$subnavItems = collect(config('web.cs_tabs', []))->map(fn($t) => [
|
|
'label' => $t['label'],
|
|
'url' => route($t['route']),
|
|
'key' => $t['key'],
|
|
])->all();
|
|
$subnavActive = 'qna';
|
|
|
|
// 문의 분류 (FAQ 카테고리와 맞춰 통일)
|
|
$enquiryCategories = config('cs_faq.categories', [
|
|
['key' => 'signup', 'label' => '회원가입 문의'],
|
|
['key' => 'login', 'label' => '로그인 문의'],
|
|
['key' => 'pay', 'label' => '결제 문의'],
|
|
['key' => 'code', 'label' => '상품권 코드 문의'],
|
|
['key' => 'event', 'label' => '이벤트 문의'],
|
|
['key' => 'etc', 'label' => '기타문의'],
|
|
]);
|
|
@endphp
|
|
|
|
@section('title', '1:1 문의 | PIN FOR YOU')
|
|
@section('meta_description', '핀포유 1:1 문의 페이지입니다. 결제/발송/코드 확인 등 상세 문의를 접수하면 순차적으로 답변드립니다.')
|
|
@section('canonical', url('/cs/qna'))
|
|
|
|
@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
|
|
@push('styles')
|
|
<link rel="stylesheet" href="{{ asset('assets/css/cs_qna.css') }}?v={{ config('app.version', time()) }}">
|
|
@endpush
|
|
|
|
@section('subcontent')
|
|
@include('web.partials.content-head', [
|
|
'title' => '1:1 문의 접수',
|
|
'desc' => '정확한 처리를 위해 주문 정보와 상황을 구체적으로 작성해 주세요.'
|
|
])
|
|
|
|
<section class="qna" aria-label="1:1 문의 폼">
|
|
|
|
{{-- Top actions --}}
|
|
<div class="qna-top">
|
|
<div class="qna-top__hint">
|
|
<span class="qna-pill">안내</span>
|
|
운영시간 평일 09:00~18:00 · 점심 12:00~13:00 · 주말/공휴일 휴무
|
|
</div>
|
|
|
|
<div class="qna-top__actions">
|
|
<a class="qna-btn qna-btn--ghost"
|
|
href="{{ route('web.mypage.qna.index') }}">
|
|
내 문의내용 확인
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Form card --}}
|
|
<div class="qna-card">
|
|
<div class="qna-card__head">
|
|
<h2 class="qna-card__title">내용 작성</h2>
|
|
<p class="qna-card__desc">답변 속도를 높이려면 “주문시각/결제수단/금액/오류문구”를 같이 적어주세요.</p>
|
|
</div>
|
|
|
|
<form class="qna-form" id="qnaForm" action="{{ route('web.cs.qna.store') }}" method="post" novalidate>
|
|
@csrf
|
|
<input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response" value="">
|
|
<input type="text" name="hp" value="" autocomplete="off"
|
|
style="position:absolute; left:-9999px; width:1px; height:1px; opacity:0;"
|
|
tabindex="-1" aria-hidden="true">
|
|
|
|
{{-- Subject row --}}
|
|
<div class="qna-grid">
|
|
|
|
<div class="qna-field">
|
|
<label class="qna-label" for="enquiry_code">문의분류 <span class="qna-req">*</span></label>
|
|
<select class="qna-input" id="enquiry_code" name="enquiry_code" required>
|
|
<option value="">문의분류선택</option>
|
|
@foreach(($enquiryCodes ?? []) as $c)
|
|
<option value="{{ $c['code'] }}" @selected(old('enquiry_code') == $c['code'])>
|
|
{{ $c['title'] }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
<div class="qna-help">가장 가까운 분류를 선택해 주세요.</div>
|
|
</div>
|
|
|
|
<div class="qna-field">
|
|
<label class="qna-label" for="enquiry_title">문의 제목 <span class="qna-req">*</span></label>
|
|
<input class="qna-input" type="text" id="enquiry_title" name="enquiry_title"
|
|
maxlength="30" placeholder="문의 제목을 넣어주세요."
|
|
value="{{ old('enquiry_title') }}"
|
|
required>
|
|
<div class="qna-help">제목은 30자 이내로 작성해 주세요.</div>
|
|
</div>
|
|
|
|
</div>
|
|
{{-- Content --}}
|
|
<div class="qna-field qna-field--mt">
|
|
<label class="qna-label" for="enquiry_content">문의 내용 <span class="qna-req">*</span></label>
|
|
<textarea class="qna-textarea" id="enquiry_content" name="enquiry_content"
|
|
placeholder="문제 상황을 자세히 적어주세요. 예) 주문시각/결제수단/금액/오류메시지/상품명"
|
|
required>{{ old('enquiry_content') }}</textarea>
|
|
<div class="qna-help">
|
|
정확한 안내를 위해 내용은 상세하게 작성해 주시고, 개인정보(주민번호/전체 카드번호 등)는 작성하지 마세요.
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Reply options --}}
|
|
<div class="qna-field qna-field--mt">
|
|
<div class="qna-label">추가회신</div>
|
|
<div class="qna-choice">
|
|
<label class="qna-check">
|
|
<input type="checkbox" checked disabled>
|
|
<span>웹답변</span>
|
|
</label>
|
|
|
|
<label class="qna-radio">
|
|
<input type="radio" name="return_type" value="sms">
|
|
<span>SMS 알림</span>
|
|
</label>
|
|
|
|
<label class="qna-radio">
|
|
<input type="radio" name="return_type" value="email">
|
|
<span>이메일 답변</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{{-- Submit --}}
|
|
<div class="qna-actions">
|
|
<button class="qna-btn qna-btn--primary" type="submit">문의등록</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
@include('web.partials.cs-quick-actions')
|
|
</section>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script>
|
|
(() => {
|
|
const form = document.getElementById('qnaForm');
|
|
if (!form) return;
|
|
|
|
const btn = form.querySelector('button[type="submit"]');
|
|
|
|
function ensureHiddenRecaptcha(){
|
|
let el = document.getElementById('g-recaptcha-response');
|
|
if(!el){
|
|
el = document.createElement('input');
|
|
el.type = 'hidden';
|
|
el.id = 'g-recaptcha-response';
|
|
el.name = 'g-recaptcha-response';
|
|
form.appendChild(el);
|
|
}
|
|
return el;
|
|
}
|
|
|
|
async function getRecaptchaToken(action){
|
|
if (typeof window.recaptchaV3Exec === 'function') {
|
|
try { return (await window.recaptchaV3Exec(action)) || ''; } catch(e){ return ''; }
|
|
}
|
|
const siteKey = window.__recaptchaSiteKey || '';
|
|
if (!siteKey || typeof window.grecaptcha === 'undefined') return '';
|
|
try {
|
|
await new Promise(r => window.grecaptcha.ready(r));
|
|
return (await window.grecaptcha.execute(siteKey, { action })) || '';
|
|
} catch(e){
|
|
return '';
|
|
}
|
|
}
|
|
|
|
form.addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
|
|
// 프론트 기본 폼체크(너가 이미 구현한 것 있으면 유지)
|
|
const code = (document.getElementById('enquiry_code')?.value || '').trim();
|
|
const title = (document.getElementById('enquiry_title')?.value || '').trim();
|
|
const content = (document.getElementById('enquiry_content')?.value || '').trim();
|
|
|
|
if (!code) { await showMsg("문의분류를 선택해 주세요.", { type:'alert', title:'폼체크' }); return; }
|
|
if (!title) { await showMsg("문의 제목을 입력해 주세요.", { type:'alert', title:'폼체크' }); return; }
|
|
if (!content) { await showMsg("문의 내용을 입력해 주세요.", { type:'alert', title:'폼체크' }); return; }
|
|
|
|
if (btn) btn.disabled = true;
|
|
|
|
try {
|
|
const isProd = @json(app()->environment('production'));
|
|
const hasKey = @json((bool) config('services.recaptcha.site_key'));
|
|
|
|
if (isProd && hasKey) {
|
|
const hidden = ensureHiddenRecaptcha();
|
|
hidden.value = '';
|
|
|
|
const token = await getRecaptchaToken('cs_qna_create');
|
|
hidden.value = token || '';
|
|
|
|
if (!hidden.value) {
|
|
if (btn) btn.disabled = false;
|
|
await showMsg('보안 검증(캡챠) 로딩에 실패했습니다. 새로고침 후 다시 시도해 주세요.', {
|
|
type:'alert', title:'보안검증 실패'
|
|
});
|
|
return;
|
|
}
|
|
}
|
|
|
|
form.submit();
|
|
} catch (err) {
|
|
if (btn) btn.disabled = false;
|
|
await showMsg('문의 등록 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.', {
|
|
type:'alert', title:'오류'
|
|
});
|
|
}
|
|
});
|
|
})();
|
|
</script>
|
|
@endpush
|
|
|
|
|
|
|