Laravel 라우트 그룹 설정 (articles.new 컴포넌트 생성 및 글 작성 폼 만들기)

이전에 예고한 대로 이번 포스트에서는 글을 저장하는 역할을 하는 컴포넌트를 만들어 보겠다.

하지만 본격적인 백엔드 저장 로직 구현에 앞서, 프론트엔드 글 작성 폼 UI를 구축하는 과정까지만 먼저 다뤄보겠다.

이전 포스트

라라벨 Livewire 4 컴포넌트의 web.php 라우팅 설정

라라벨 Livewire 버전 4에서 web.php에 컴포넌트를 라우팅 하고 web 웹사이트 내비게이션 메뉴에 연결하는 방법을 정리합니다. pages:: 식별자를 통한 컴포넌트 자동 연결 구조와 PC 및 모바일 반응형 내비게이션 링크 추가 방법까지 정리했습니다.

LIVEWIRE pages::articles.new 컴포넌트 Route 및 글 작성 폼 만들기 · 4th-avenue/laravel13-livewire@e28798e · GitHub

설명 없음

github.com

전체적인 코드 수정은 이 깃허브 링크를 통해서 확인할 수 있다.

Livewire 컴포넌트 pages::articles.new 생성

make bash #컨테이너 안으로 들어간다.
php artisan make:livewire pages::articles.new

ubuntu 혹은 VSCode의 터미널에서 이 명령어들을 실행한다.

그러면 resources/views/pages/articles 디렉터리에⚡new.blade.php 파일이 생긴다.

Livewire 버전 4에서 컴포넌트 생성하기 (pages::articles.list 컴포넌트 생성)

라라벨 Livewire 버전 4에서 컴포넌트를 생성하는 방법을 다룹니다. 일반 컴포넌트와 pages:: 플래그를 활용한 페이지 컴포넌트의 차이점, 단일 파일 방식과 --mfc 옵션을 통한 프론트엔드・백엔드 분리 구조까지 알기 쉽게 비교 정리했습니다.

Livewire 컴포넌트를 생성하는 명령어에 대해서는 이 포스트를 참고하자.

routes/web.php에서 라우팅 설정하기 (라우트 그룹 설정)

routes/web.php의 수정 전 코드

Route::view('profile', 'profile')
    ->middleware(['auth'])
    ->name('profile');

routes/web.php의 수정 전 코드다.

이 부분을 아래와 같이 수정할 거다.

routes/web.php의 수정 후 코드

Route::middleware('auth')->group(function () {
    Route::view('profile', 'profile')->name('profile');
    Route::livewire('articles/new', 'pages::articles.new')->name('articles.new');
});

라우트 그룹을 만들었다.

• Route::middleware('auth')->group(function () { ... });: 이 코드는 해당 그룹 내의 모든 라우트에 접근하기 위해서는 반드시 로그인이 필요하도록 설정한다는 의미다. 즉, 사용자가 로그인하지 않은 상태에서 해당 라우트에 접근하려고 하면 로그인 페이지로 이동하게 된다.
• Route::view('profile', 'profile')->name('profile');: 이전에 있었던 코드에서 ->middleware(['auth']) 부분을 삭제하고 이 그룹으로 이동했다.
• Route::livewire('articles/new', 'pages::articles.new')->name('articles.new');: 글 작성 페이지를 이 그룹 안에서 라우트 했다.

글쓰기 버튼 만들기

src/resources/views/pages/articles/⚡list.blade.php

<div class="flex items-center justify-end mb-3">
    <a href="{{ route('articles.new') }}" class="inline-flex items-center px-4 py-2 bg-gray-800 dark:bg-gray-200 border border-transparent rounded-md font-semibold text-xs text-white dark:text-gray-800 uppercase tracking-widest hover:bg-gray-700 dark:hover:bg-white focus:bg-gray-700 dark:focus:bg-white active:bg-gray-900 dark:active:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150" wire:navigate>
        {{ __('Create') }}
    </a>
</div>

list.blade.php에 이 코드를 추가한다.

저장하고 웹사이트를 살펴보면, 이렇게 '글쓰기' 버튼이 생긴 것을 확인할 수 있다. (버튼처럼 생겼지만 일단 <a> 태그를 사용한 링크다.)

이미지처럼 한글화를 하기 위해서는 lang/ko.json 파일에 코드를 추가하면 된다.

Laravel 회원가입 폼 수정: 아이디와 닉네임 필드 추가 및 한글화

라라벨 브리즈 회원가입 폼을 수정하여 기본 name 필드를 삭제하고, userid와 nickname 컬럼을 추가하는 방법입니다. 데이터베이스 테이블 변경부터 #[Fillable] 어트리뷰트 정의, 그리고 유효성 검사 에러 메시지를 한글화 하는 팁까지 정리했습니다.

이에 대한 설명은 이 포스트에서 했었으니 넘어가도록 하겠다.

글 작성 폼 만들기

src/resources/views/pages/articles/⚡new.blade.php

<div>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
            {{ __('Create') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-900 dark:text-gray-100">
                    <form wire:submit="register" class="space-y-4">
                        <!-- Category -->
                        <div>
                            <x-input-label for="category_id" :value="__('Category')" />
                            <select id="category_id" class="border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-indigo-500 focus:border-indigo-500 block w-full mt-1 p-2.5" name="category_id" required>
                                <option>{{ __('Select a category.') }}</option>
                            </select>
                            <x-input-error :messages="$errors->get('category_id')" class="mt-2" />
                        </div>

                        <!-- Title -->
                        <div>
                            <x-input-label for="title" :value="__('Title')" />
                            <x-text-input id="title" class="block mt-1 w-full" type="text" name="title" required autofocus autocomplete="off" />
                            <x-input-error :messages="$errors->get('title')" class="mt-2" />
                        </div>

                        <!-- Body -->
                        <div>
                            <x-input-label for="body" :value="__('Body')" />
                            <textarea id="body" rows="4" class="block mt-1 p-2.5 w-full text-sm text-gray-900 rounded-lg border border-gray-300 focus:ring-indigo-500 focus:border-indigo-500" name="body" required autocomplete="off"></textarea>
                            <x-input-error :messages="$errors->get('body')" class="mt-2" />
                        </div>

                        <div class="flex items-center justify-end">
                            <x-primary-button>
                                {{ __('Save') }}
                            </x-primary-button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

new.blade.php에 이 코드를 추가한다.

<form> 태그는 register.blade.php에서 복사해 온 것을 수정했다.

'글쓰기' 버튼을 클릭해서 글 작성 페이지로 이동했다.

백엔드 로직을 아직 작성하지 않았으니, 당연히 아직은 제대로 작동하지 않는 페이지다.

현재는 이렇게 카테고리 목록이 비어있다.

글 저장 기능을 구현하기 전에 filament로 카테고리 리소스를 먼저 만들어야 할 것 같다.

그러니 다음 포스트에서는 filament 카테고리 리소스를 먼저 만들고, 그 후에 글 저장 기능을 구현해 보도록 하겠다.

셀렉트와 본문 작성 필드에만 다크모드가 적용되지 않는 문제도 남아있다.

이건 어차피 나중에 따로 컴포넌트로 만들 예정이기 때문에 대충 만들어서 그렇다.

이 문제도 나중에 해결하도록 하겠다.

다음 포스트

filament, Category와 Article 리소스 생성 및 글 작성 폼에 카테고리 표시하기

라라벨 filament의 Category와 Article 리소스를 생성하고 Soft Delete 옵션을 적용하는 방법을 다룹니다.Blade 템플릿의 foreach 구문으로 글 작성 폼에 카테고리 선택 메뉴를 연동하는 과정을 설명합니다.