121 lines
4.5 KiB
PHP
121 lines
4.5 KiB
PHP
@php
|
|
$pageTitle = '자주 묻는 질문';
|
|
$pageDesc = '결제/발송/환불 등 자주 문의되는 내용을 빠르게 확인하세요.';
|
|
|
|
$breadcrumbs = [
|
|
['label' => '홈', 'url' => url('/')],
|
|
['label' => '고객센터', 'url' => url('/cs')],
|
|
['label' => '자주 묻는 질문', 'url' => url()->current()],
|
|
];
|
|
|
|
$csActive = 'faq';
|
|
@endphp
|
|
|
|
@extends('web.layouts.subpage')
|
|
|
|
@section('title', '자주 묻는 질문(FAQ) | PIN FOR YOU')
|
|
@section('meta_description', 'PIN FOR YOU FAQ입니다. 결제/발송/환불/이용 관련 자주 묻는 질문을 확인하세요.')
|
|
@section('canonical', url('/cs/faq'))
|
|
|
|
@section('subcontent')
|
|
@include('web.partials.content-head', [
|
|
'title' => 'FAQ',
|
|
'desc' => '원하는 키워드로 빠르게 찾고, 카테고리별로 정리해서 확인하세요.'
|
|
])
|
|
|
|
<section class="faq" aria-label="자주 묻는 질문">
|
|
{{-- Tools --}}
|
|
<div class="faq-tools">
|
|
<div class="faq-search" role="search">
|
|
<label class="sr-only" for="faqSearch">FAQ 검색</label>
|
|
<input id="faqSearch" class="faq-search__input" type="search" placeholder="예) 휴대폰 결제, 비밀번호, 코드 확인" autocomplete="off">
|
|
<span class="faq-search__icon" aria-hidden="true">⌕</span>
|
|
</div>
|
|
|
|
<div class="faq-cats" role="tablist" aria-label="FAQ 카테고리">
|
|
<button type="button" class="faq-cat is-active" data-cat="all" role="tab" aria-selected="true">전체</button>
|
|
@foreach(config('cs_faq.categories', []) as $c)
|
|
<button type="button" class="faq-cat" data-cat="{{ $c['key'] }}" role="tab" aria-selected="false">
|
|
{{ $c['label'] }}
|
|
</button>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
|
|
{{-- List --}}
|
|
<div class="faq-list" id="faqList">
|
|
@foreach(config('cs_faq.items', []) as $idx => $it)
|
|
<details class="faq-item" data-cat="{{ $it['category'] ?? 'etc' }}">
|
|
<summary class="faq-q">
|
|
<span class="faq-q__badge">Q</span>
|
|
<span class="faq-q__text">{{ $it['q'] ?? '' }}</span>
|
|
<span class="faq-q__chev" aria-hidden="true">▾</span>
|
|
</summary>
|
|
<div class="faq-a">
|
|
{!! nl2br(e($it['a'] ?? '')) !!}
|
|
</div>
|
|
</details>
|
|
@endforeach
|
|
|
|
<div class="faq-empty" hidden>
|
|
검색 결과가 없어요. 다른 키워드로 다시 시도해 주세요.
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{-- (선택) 하단 CS Quick 영역 재사용 가능 --}}
|
|
@include('web.partials.cs-quick-actions')
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script>
|
|
(() => {
|
|
const wrap = document.querySelector('.faq');
|
|
if (!wrap) return;
|
|
|
|
const search = wrap.querySelector('#faqSearch');
|
|
const catBtns = [...wrap.querySelectorAll('.faq-cat')];
|
|
const items = [...wrap.querySelectorAll('.faq-item')];
|
|
const empty = wrap.querySelector('.faq-empty');
|
|
|
|
let activeCat = 'all';
|
|
|
|
const apply = () => {
|
|
const q = (search?.value || '').trim().toLowerCase();
|
|
let visible = 0;
|
|
|
|
items.forEach(el => {
|
|
const cat = el.dataset.cat || 'etc';
|
|
const text = el.innerText.toLowerCase();
|
|
|
|
const catOk = (activeCat === 'all') || (cat === activeCat);
|
|
const qOk = !q || text.includes(q);
|
|
|
|
const show = catOk && qOk;
|
|
el.style.display = show ? '' : 'none';
|
|
if (show) visible++;
|
|
});
|
|
|
|
empty.hidden = visible !== 0;
|
|
};
|
|
|
|
catBtns.forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
catBtns.forEach(b => {
|
|
b.classList.remove('is-active');
|
|
b.setAttribute('aria-selected', 'false');
|
|
});
|
|
btn.classList.add('is-active');
|
|
btn.setAttribute('aria-selected', 'true');
|
|
activeCat = btn.dataset.cat || 'all';
|
|
apply();
|
|
});
|
|
});
|
|
|
|
search?.addEventListener('input', apply);
|
|
|
|
apply();
|
|
})();
|
|
</script>
|
|
@endpush
|