New research

로그인·회원가입

5 screens · 5 / 5 apps

언제 쓰는가

공유 세션으로 들어가는 첫 화면. 위성은 자체 회원 원장을 만들지 않고 로그인·가입 폼만 그린 뒤 core 가 준 세션을 받는다. 소셜 연결도 같은 골격이다.

구조

<x-gujo::shell :title="__('auth.login_title')">
    <x-slot:nav>@include('partials.nav')</x-slot:nav>

    <div class="gj-container gj-section">
        <div class="gj-section-head gj-section-head--center">
            <h2>{{ __('auth.login_title') }}</h2>
            <p>{{ __('auth.login_lead') }}</p>
        </div>

        <form method="post" action="{{ route('login') }}" class="gj-panel">
            @csrf
            <x-gujo::field name="email" type="email" :label="__('auth.f_email')" required />
            <x-gujo::field name="password" type="password" :label="__('auth.f_password')" required />
            <div class="gj-hero-cta">
                <x-gujo::btn type="submit">{{ __('auth.submit_login') }}</x-gujo::btn>
                <x-gujo::btn :href="route('register')" variant="ghost">{{ __('auth.go_register') }}</x-gujo::btn>
            </div>
        </form>
        <p class="gj-note">{{ __('auth.session_shared') }}</p>
    </div>
</x-gujo::shell>
  1. 폼은 .gj-panel 하나. 로그인과 회원가입은 화면을 나누고, 서로 ghost 링크로만 건너간다.
  2. 필드 두세 개(email·password, 가입이면 이름 추가)만. 약관 체크는 terms 패턴으로 보낸다.
  3. 실패는 필드 아래 .gj-err 와 shell 의 .gj-flash--error. 성공은 원래 가려던 주소로 리다이렉트.

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

  • 컴포넌트: <x-gujo::shell>, <x-gujo::field>, <x-gujo::btn>
  • 클래스: .gj-container, .gj-section, .gj-section-head, .gj-section-head--center, .gj-panel, .gj-hero-cta, .gj-note, .gj-err, .gj-flash--error

하지 말 것

  • 위성에 users 를 쓰지 않는다. 세션은 공유 쿠키이고 원장은 core 다.
  • 화면에 이메일 값을 다시 출력하거나 사용자 ID 를 보이지 않는다. old('email') 은 필드 값으로만.
  • 로그인 카드 옆에 상품·프로모션을 두지 않는다.
  • 인라인 style 로 폼 너비를 조이지 않는다. .gj-panel 이 너비를 가진다.

5 screens use this pattern