멤버십·요금제

언제 쓰는가

구독 등급을 고르는 화면. 비교는 compare, 이 패턴은 "고르고 확인으로 넘어가기" 가 목적이다.

구조

<div class="gj-container gj-section">
    <div class="gj-section-head gj-section-head--center">
        <h2>{{ __('plan.title') }}</h2>
        <p>{{ __('plan.lead') }}</p>
    </div>
    <div class="gj-plans">
        @foreach ($plans as $plan)
            <div class="gj-plan{{ $plan->current ? ' gj-plan--hi' : '' }}">
                <h3>{{ $plan->title }}</h3>
                <p class="gj-plan-amount">{{ $plan->display_price }} <small>{{ __('plan.per_month') }}</small></p>
                <x-gujo::btn :href="route('checkout.show', $plan->id)">{{ __('plan.start') }}</x-gujo::btn>
            </div>
        @endforeach
    </div>
    <p class="gj-note">{{ __('plan.billed_via_core') }}</p>
</div>

1. 현재 구독은 .gj-plan--hi. "현재" 배지는 리본 하나.
2. 시작 버튼은 확인 화면(booking-payment)으로 보낸다. 카드 번호는 여기 없다.
3. 연/월 전환이 있으면 .gj-chips 두 개. 값은 쿼리.

쓰는 .gj-* 클래스와 Blade 컴포넌트

• 컴포넌트: <x-gujo::btn>
• 클래스: .gj-container, .gj-section, .gj-section-head, .gj-section-head--center, .gj-plans, .gj-plan, .gj-plan--hi, .gj-plan-amount, .gj-note, .gj-chips

하지 말 것

• 위성에서 빌링키를 받지 않는다. 결제는 core 계산대.
• 무료 체험을 작은 글씨로 숨기지 않는다. .gj-note 에 명시.
• 요금제 슬러그로 결제 인텐트를 만들지 않는다. 상품 숫자 ID.
• 네 번째 플랜을 그리드에 억지로 넣지 않는다. 표로 바꾼다.