160 lines
7.2 KiB
PHP
160 lines
7.2 KiB
PHP
@php
|
|
$pageTitle = '이용안내';
|
|
$pageDesc = '구매부터 발송/환불까지 서비스 이용 방법을 한눈에 안내합니다.';
|
|
|
|
$breadcrumbs = [
|
|
['label' => '홈', 'url' => url('/')],
|
|
['label' => '고객센터', 'url' => url('/cs')],
|
|
['label' => '이용안내', 'url' => url()->current()],
|
|
];
|
|
|
|
$csActive = 'guide';
|
|
@endphp
|
|
|
|
@extends('web.layouts.subpage')
|
|
|
|
@section('title', '이용안내 | PIN FOR YOU')
|
|
@section('meta_description', 'PIN FOR YOU 이용안내입니다. 상품권 구매/발송/환불 등 이용 방법을 확인하세요.')
|
|
@section('canonical', url('/cs/guide'))
|
|
|
|
@section('subcontent')
|
|
@include('web.partials.content-head', [
|
|
'title' => '이용안내',
|
|
'desc' => '필요한 부분만 빠르게 확인할 수 있도록 핵심 흐름만 모았습니다.'
|
|
])
|
|
|
|
<section class="guide" aria-label="이용안내 본문">
|
|
|
|
{{-- Intro --}}
|
|
<div class="guide-hero">
|
|
<div class="guide-hero__badge">Quick Guide</div>
|
|
<div class="guide-hero__title">처음 방문하셨나요?</div>
|
|
<p class="guide-hero__desc">
|
|
회원가입 → 로그인 → 상품 선택/결제 → 코드 확인까지, 기본 흐름은 아주 간단해요.
|
|
처음 1회는 보안을 위해 본인인증이 진행될 수 있습니다.
|
|
</p>
|
|
|
|
<div class="guide-hero__chips" aria-label="핵심 요약">
|
|
<span class="guide-chip">회원가입: 본인인증 + 필수 정보 입력</span>
|
|
<span class="guide-chip">로그인: 이메일(ID) + 비밀번호</span>
|
|
<span class="guide-chip">구매: 상품 선택 → 결제</span>
|
|
<span class="guide-chip">문의: 1:1 문의로 접수</span>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Grid --}}
|
|
<div class="guide-grid">
|
|
|
|
{{-- Signup --}}
|
|
<article class="guide-card" aria-label="회원가입 안내">
|
|
<div class="guide-card__top">
|
|
<div class="guide-card__icon" aria-hidden="true">①</div>
|
|
<h3 class="guide-card__title">회원가입</h3>
|
|
</div>
|
|
|
|
<p class="guide-card__lead">
|
|
안정적인 서비스 제공과 정보 보호를 위해 회원가입 시 최초 1회 본인인증이 진행될 수 있어요.
|
|
</p>
|
|
|
|
<ol class="guide-steps">
|
|
<li><b>본인인증(PASS)</b>을 진행합니다. (PASS로 승인)</li>
|
|
<li><b>이메일</b>을 아이디로 사용합니다.</li>
|
|
<li>
|
|
<b>비밀번호</b>는 영문(대/소) + 숫자 + 특수문자 조합으로
|
|
<b>8~16자</b> 범위로 설정합니다.
|
|
</li>
|
|
<li><b>2차 비밀번호</b>는 <b>숫자 4자리</b>로 설정합니다.</li>
|
|
<li><b>만 14세 이상</b>만 가입이 가능합니다.</li>
|
|
</ol>
|
|
|
|
<div class="guide-note">
|
|
<b>Tip</b>
|
|
같은 이메일로 재가입이 제한될 수 있어요. 가입 이메일은 신중하게 선택해 주세요.
|
|
</div>
|
|
</article>
|
|
|
|
{{-- Login --}}
|
|
<article class="guide-card" aria-label="로그인 안내">
|
|
<div class="guide-card__top">
|
|
<div class="guide-card__icon" aria-hidden="true">②</div>
|
|
<h3 class="guide-card__title">로그인</h3>
|
|
</div>
|
|
|
|
<p class="guide-card__lead">
|
|
이메일(ID)과 비밀번호로 로그인합니다. 보안을 위해 자동로그인/공용기기 사용에 유의해 주세요.
|
|
</p>
|
|
|
|
<ul class="guide-bullets">
|
|
<li><b>아이디</b>: 가입 시 사용한 이메일</li>
|
|
<li><b>비밀번호</b>: 가입 시 설정한 비밀번호</li>
|
|
<li><b>인증 안내</b>: 최초 1회 인증 이후에는 더 간편해질 수 있어요</li>
|
|
</ul>
|
|
|
|
<div class="guide-note guide-note--muted">
|
|
<b>권장</b>
|
|
비밀번호는 주기적으로 변경하고, 다른 사이트와 동일한 비밀번호 사용은 피하세요.
|
|
</div>
|
|
</article>
|
|
|
|
{{-- Purchase --}}
|
|
<article class="guide-card" aria-label="상품권 구매 안내">
|
|
<div class="guide-card__top">
|
|
<div class="guide-card__icon" aria-hidden="true">③</div>
|
|
<h3 class="guide-card__title">상품권 구매</h3>
|
|
</div>
|
|
|
|
<p class="guide-card__lead">
|
|
원하는 상품을 선택한 뒤 수량과 결제수단을 선택해 결제를 완료하면 됩니다.
|
|
</p>
|
|
|
|
<ol class="guide-steps">
|
|
<li><b>상품 선택</b>: 구매할 상품권을 고릅니다.</li>
|
|
<li><b>구매하기</b>: 선택한 상품에서 구매 진행을 시작합니다.</li>
|
|
<li><b>수량/결제수단 선택</b> 후 <b>결제하기</b>로 결제를 완료합니다.</li>
|
|
</ol>
|
|
|
|
<div class="guide-note">
|
|
<b>확인</b>
|
|
결제 완료 후 안내가 진행되며, 필요한 경우 마이페이지 이용내역에서 확인할 수 있어요.
|
|
</div>
|
|
</article>
|
|
|
|
{{-- QnA --}}
|
|
<article class="guide-card" aria-label="1:1 문의 안내">
|
|
<div class="guide-card__top">
|
|
<div class="guide-card__icon" aria-hidden="true">④</div>
|
|
<h3 class="guide-card__title">1:1 문의</h3>
|
|
</div>
|
|
|
|
<p class="guide-card__lead">
|
|
구매/발송/이용 관련 이슈는 1:1 문의로 접수하면 가장 정확하게 안내받을 수 있어요.
|
|
</p>
|
|
|
|
<ul class="guide-bullets">
|
|
<li><b>문의 주제</b>: 결제/발송/코드 확인/오류/계정</li>
|
|
<li><b>필수 정보</b>: 주문 시각, 결제수단, 금액, 오류 화면(가능 시)</li>
|
|
<li><b>처리 방식</b>: 접수 후 순차적으로 답변됩니다</li>
|
|
</ul>
|
|
|
|
<div class="guide-note guide-note--muted">
|
|
<b>빠른 처리 팁</b>
|
|
화면 캡처 1장과 함께 상황을 “언제/어떤 결제/무슨 메시지”로 정리해 주시면 좋아요.
|
|
</div>
|
|
</article>
|
|
|
|
</div>
|
|
|
|
{{-- Small closing --}}
|
|
<div class="guide-footer">
|
|
<div class="guide-footer__box">
|
|
<div class="guide-footer__title">가장 많이 막히는 지점</div>
|
|
<div class="guide-footer__desc">
|
|
회원가입 인증, 비밀번호 규칙, 결제 완료 여부 확인이 가장 많습니다.
|
|
위 흐름대로 진행 후에도 해결이 어렵다면 1:1 문의로 접수해 주세요.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@include('web.partials.cs-quick-actions')
|
|
</section>
|
|
@endsection
|