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

이번 포스트에서 만들었던 글 작성 폼에 이어, 이번 포스트에서는 filament를 활용해 Category와 Article 리소스를 생성하고, 글 작성 폼에 카테고리 목록을 불러와 연동하는 방법을 알아보겠다.

이전 포스트

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

라라벨에서 Route::middleware('auth')->group 구조를 활용해 인증된 사용자만 접근 가능한 라우트 그룹을 설정하는 방법을 다룹니다. 라이브와이어 pages::articles.new 컴포넌트 생성부터 글 작성 폼 UI 구성도 정리했습니다.

Category 리소스의 UI 수정 및 글 작성 폼에 카테고리 표시 · 4th-avenue/laravel13-livewire@6991a13 · GitHub

설명 없음

github.com

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

참고로.. (클릭)

app/Filament/Resources/Roles/Schemas/RoleForm.php와 app/Providers/Filament/AdminPanelProvider.php 파일의 수정된 내용은 이번 포스트와 관련이 없다.

라라벨 filament 관리자 패널 UI 개선: 폼 필드 그룹화 및 리소스 저장 후 전역 리다이렉트 설정

라라벨 Filament 관리자 패널의 Role 리소스 폼 필드를 Section 컴포넌트로 그룹화하여 깔끔한 UI를 구현하는 법을 알아봅니다. 그리고 글로벌 리다이렉트를 설정해 저장 후 페이지 이동 코드를 효율적으로 줄이는 팁도 함께 정리했습니다.

여기서 실수한 것을 수정한 것이다.

filament Section이 화면 전체 너비를 사용하도록 설정 · 4th-avenue/laravel13-livewire@7ffac43 · GitHub

설명 없음

github.com

그리고, 넣었어야 할 코드를 뒤늦게 추가했다.

CategoryForm.php에 ->columnSpanFull()이라는 코드를 추가하자.

filament Category 리소스와 Article 리소스 생성

make bash #컨테이너 안으로 들어간다.
php artisan make:filament-resource Category --generate
php artisan make:filament-resource Article --generate --view --soft-deletes

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

--soft-deletes 옵션은 filament의 Article 리소스에 Soft Delete 기능을 추가하는 역할을 한다.

각 데이터를 대표하는 대표 컬럼(필드명)이 무엇인지 묻는 질문에는, Category는 name을 Article은 title을 입력한다.

이전에 올렸던 포스트에서 전부 설명했었으니 나머지 자세한 설명은 생략하겠다.

filament 5, Role 리소스 생성하고 CRUD 기능 구현

라라벨 filament 관리자 패널에서 Role 리소스를 생성하고 역할 CRUD 기능을 손쉽게 구현하는 방법을 정리했습니다. 명령어 실행 시 출력되는 질문의 의미와 Role 모델 연결, 최신 버전의 분리된 Form 및 Table 클래스 설정 방법까지 설명합니다.

이 링크가 이전에 올렸던 관련 포스트다.

Category 모델에 Fillable 정의

app/Models/Category.php에 추가할 코드

#[Fillable(['name', 'slug', 'parent_id'])]

categories 테이블에 데이터를 저장할 수 있도록 class 위쪽에 이 코드를 넣도록 하자.

Post 모델에 Fillable 정의 후 새 글 저장 기능 구현

라라벨 13의 최신 어트리뷰트 방식을 사용해 Post 모델에 Fillable 대량 할당 속성을 정의하고, User 모델과 일대다(HasMany) 관계를 설정합니다. PostController에서 유효성 검사를 거쳐 새 글을 안전하게 저장하는 로직을 설명합니다.

이 코드에 대해서도 이 포스트에서 이전에 정리했었으니 넘어가도록 하겠다.

Schemas/CategoryForm.php 파일 수정

public static function configure(Schema $schema): Schema
{
    return $schema
        ->components([
            Section::make('Category')
            ->schema([
                TextInput::make('name')
                    ->required()
                    ->maxLength(15),
                TextInput::make('slug')
                    ->required()
                    ->maxLength(20),
                TextInput::make('parent_id')
                    ->numeric()
                    ->default(null),
            ])->columns(3)
            ->columnSpanFull()
        ]);
}

configure 메서드를 이렇게 수정했다.

마이그레이션 파일에서 설정했던 것처럼, name 컬럼은 최대 15글자, slug 컬럼은 최대 20글자까지만 입력할 수 있도록 제한했다.

라라벨 filament 관리자 패널 UI 개선: 폼 필드 그룹화 및 리소스 저장 후 전역 리다이렉트 설정

라라벨 Filament 관리자 패널의 Role 리소스 폼 필드를 Section 컴포넌트로 그룹화하여 깔끔한 UI를 구현하는 법을 알아봅니다. 그리고 글로벌 리다이렉트를 설정해 저장 후 페이지 이동 코드를 효율적으로 줄이는 팁도 함께 정리했습니다.

그리고 폼 필드를 Section 컴포넌트로 그룹화하여 깔끔하게 정리했는데, 자세한 내용은 이 포스트를 참고하자.

->columns(3)으로 Section 내부의 입력 필드들을 한 줄에 3개씩 가로로 배치하는 그리드(Grid) 레이아웃으로 설정했다.

참고로 이 캡처 이미지는 아직 ->columnSpanFull()을 추가하지 않은 상태에서 캡처한 거다.

->columnSpanFull()을 넣지 않으면 이렇게 섹션이 화면의 1/2만 차지하게 된다.

Tables/CategoriesTable.php 파일 수정

TextColumn::make('id'),

이 한 줄을 추가했다.

테이블에 ID가 표시되도록 한 것이다.

이제 이렇게 테이블에 ID가 표시된다.

그리고 Category를 생성할 수 있게 됐으니 시험 삼아서 몇 개 만들어봤다.

글 작성 폼에서 카테고리 표시하기

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

@foreach (\App\Models\Category::all() as $category)
    <option value="{{ $category->id }}">
        {{ $category->name }}
    </option>
@endforeach

이 코드를 추가할 위치는 깃허브 링크를 참고하자.

이 코드는 Laravel Blade 템플릿에서 카테고리 목록을 select 태그를 이용해서 출력하는 코드다.

• @foreach: Laravel Blade의 반복문으로, App\Models\Category 모델의 모든 데이터를 가져와 $category 변수에 할당하며 반복한다.
• <option value="{{ $category->id }}">: 셀렉트 메뉴의 항목을 나타낸다. value 속성에는 각 카테고리의 고유한 ID를 할당한다.
• {{ $category->name }}: 해당 카테고리의 이름을 출력한다.

이것으로 filament 관리자 패널에서 등록한 카테고리를 글 작성 폼에서 선택할 수 있게 되었다.

하지만 아직 완성된 건 아니다.

원래는 자식 카테고리만 표시되고 부모 카테고리는 선택할 수 없게 해야 하는데, 지금은 부모 자식 카테고리가 전부 표시되고 있다.

이 문제는 다음 포스트에서 해결하도록 하겠다.

다음 포스트

라라벨 Livewire를 이용해서 새 글 저장 기능 구현

라라벨 Livewire 컴포넌트에서 mount 메서드와 pluck을 활용해 자식 카테고리를 효율적으로 조회하는 방법과 Eloquent 모델 릴레이션 설정부터 wire:submit, wire:model을 활용한 새 글 저장 기능 구현 과정을 상세히 설명합니다.