폼과 검증 오류

언제 쓰는가

손님이 값을 입력하는 모든 화면. 문의 접수, 프로필 수정, 쿠폰 입력, 검색. 결제 정보 입력은 core 계산대가 그리므로 위성에는 없다.

구조

<form method="post" action="{{ route('inquiries.store') }}" class="gj-panel">
    @csrf

    <x-gujo::field name="email" type="email" :label="__('store.f_email')" :hint="__('store.f_email_hint')" required />
    <x-gujo::field name="title" :label="__('store.f_title')" required />
    <x-gujo::field name="body" :label="__('store.f_body')" textarea :rows="6" required />

    <div class="gj-hero-cta">
        <x-gujo::btn type="submit">{{ __('store.f_submit') }}</x-gujo::btn>
        <x-gujo::btn :href="route('landing')" variant="ghost">{{ __('store.f_cancel') }}</x-gujo::btn>
    </div>
</form>

1. 폼 전체를 .gj-panel 로 감싼다. 한 화면에 폼은 하나.
2. 입력 하나는 <x-gujo::field> 하나. 라벨은 필수이고 도움말은 hint, 오류는 @error 또는 error 속성으로 필드 바로 아래에 붙는다(.gj-hint, .gj-err).
3. 검증 실패는 리다이렉트 후 같은 폼을 다시 그린다. 필드는 old() 로 값을 되살리므로 앱이 따로 채울 필요가 없다.
4. 제출 결과는 세션 status(성공) 또는 error(실패) 로 넘긴다. shell 이 .gj-flash / .gj-flash--error 로 화면 위에 그린다.
5. 제출 버튼은 <x-gujo::btn type="submit"> 하나, 취소는 variant="ghost" 링크.
6. 검색 한 줄은 폼이 아니라 .gj-search (input 하나 + 버튼). 자동완성이 있으면 같은 줄 아래 .gj-suggest.

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

• 컴포넌트: <x-gujo::field>, <x-gujo::btn>
• 클래스: .gj-panel, .gj-field, .gj-hint, .gj-err, .gj-flash, .gj-flash--error, .gj-hero-cta
• 검색 한 줄은 .gj-search (input 하나 + 버튼).

하지 말 것

• 오류를 폼 위에 한꺼번에 모아 놓지 않는다. 오류는 해당 필드 아래 .gj-err 한 줄.
• 검증 메시지를 영어 기본값으로 두지 않는다. lang/ko/validation.php 에 실제 쓰는 규칙만 둔다.
• placeholder 를 라벨 대신 쓰지 않는다. 라벨은 항상 보인다.
• 필드에 인라인 style 이나 자바스크립트 검증을 붙이지 않는다. 검증은 서버가 한다.