188 lines
8.5 KiB
PHP
188 lines
8.5 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'))
|
|
|
|
@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="#" aria-disabled="true" onclick="return false;">
|
|
내 문의내용 확인 (준비중)
|
|
</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="#" method="post" enctype="multipart/form-data" novalidate>
|
|
@csrf
|
|
|
|
{{-- 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($enquiryCategories as $c)
|
|
<option value="{{ $c['key'] }}">{{ $c['label'] }}</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="60" placeholder="예) 결제는 완료됐는데 코드가 안 보여요" required>
|
|
<div class="qna-help">제목은 60자 이내로 작성해 주세요.</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></textarea>
|
|
<div class="qna-help">
|
|
정확한 안내를 위해 개인정보(주민번호/전체 카드번호 등)는 작성하지 마세요.
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Upload --}}
|
|
<div class="qna-field qna-field--mt">
|
|
<label class="qna-label" for="screenshots">스크린샷 <span class="qna-sub">(최대 4장)</span></label>
|
|
<input class="qna-file" type="file" id="screenshots" name="screenshots[]"
|
|
accept=".png,.jpeg,.jpg,.gif" multiple>
|
|
<div class="qna-help">
|
|
업로드 가능 확장자: .png, .jpeg, .jpg, .gif · 용량이 큰 파일은 업로드에 시간이 걸릴 수 있어요.
|
|
</div>
|
|
<div class="qna-filelist" id="fileList" aria-live="polite"></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 class="qna-help">현재는 UI만 제공되며, 실제 알림 연동은 추후 적용됩니다.</div>
|
|
</div>
|
|
|
|
{{-- Recaptcha placeholder --}}
|
|
<div class="qna-field qna-field--mt">
|
|
<div class="qna-recap">
|
|
<div class="qna-recap__badge">reCAPTCHA</div>
|
|
<div class="qna-recap__text">스팸 방지 기능은 추후 적용 예정입니다.</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Submit --}}
|
|
<div class="qna-actions">
|
|
<button class="qna-btn qna-btn--primary" type="submit">문의등록</button>
|
|
<div class="qna-actions__note">현재는 저장 기능이 준비 중입니다. (UI 확인용)</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
@include('web.partials.cs-quick-actions')
|
|
</section>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script>
|
|
(() => {
|
|
const form = document.getElementById('qnaForm');
|
|
const fileInput = document.getElementById('screenshots');
|
|
const fileList = document.getElementById('fileList');
|
|
|
|
// 파일 리스트 표시(최대 4장)
|
|
const renderFiles = () => {
|
|
if (!fileList || !fileInput) return;
|
|
const files = Array.from(fileInput.files || []);
|
|
fileList.innerHTML = '';
|
|
|
|
const shown = files.slice(0, 4);
|
|
if (files.length > 4) {
|
|
fileList.innerHTML = '<div class="qna-filelist__warn">최대 4장까지만 업로드할 수 있어요. 처음 4장만 표시됩니다.</div>';
|
|
}
|
|
|
|
shown.forEach(f => {
|
|
const el = document.createElement('div');
|
|
el.className = 'qna-filelist__item';
|
|
el.textContent = `• ${f.name}`;
|
|
fileList.appendChild(el);
|
|
});
|
|
};
|
|
|
|
fileInput?.addEventListener('change', renderFiles);
|
|
|
|
// 임시 submit(저장 기능 추후)
|
|
form?.addEventListener('submit', (e) => {
|
|
e.preventDefault();
|
|
alert('현재는 문의 저장 기능이 준비 중입니다.\nUI/디자인 확인용으로 폼만 제공됩니다.');
|
|
});
|
|
})();
|
|
</script>
|
|
@endpush
|