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

오늘은 filament의 리소스를 생성해서 관리자 패널에서 역할(Role)을 만들거나 수정하거나 삭제할 수 있게 해 보겠다.

한마디로 Role의 CRUD 기능을 구현하는 건데, filament 덕분에 정말 손쉽게 구현할 수 있다.

이전 포스트

Laravel 드롭다운 메뉴에 Admin Panel 추가 및 디자인 변경

라라벨 상단 내비게이션 드롭다운에 Filament 관리자 패널 링크를 추가하고 로고 클릭 시 홈으로 이동하도록 경로를 설정합니다. SPATIE 권한 지시어로 관리자에게만 메뉴를 노출하고 리다이렉트 및 한글 다국어 처리까지 적용하는 가이드입니다.

filament Role 리소스 CRUD 기능 구현 · 4th-avenue/laravel13-livewire@66c95d7 · GitHub

설명 없음

github.com

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

filament Role 리소스 생성

make bash #컨테이너 안으로 들어간다.
php artisan make:filament-resource Role

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

원래 내가 이전에 filament 3을 사용했을 때에는 이 명령어 한 줄이면,

• RoleResource.php
• CreateRole.php
• EditRole.php
• ListRoles.php

이렇게 4개의 파일들이 자동으로 생성됐었다.

그런데 이제는 파일이 생성되기 전에 이렇게 질문들이 뜬다.

각 질문들이 뭘 물어보는 것인지 정리해 보겠다.

What is the title attribute for this model?

이 질문은「이 모델(Role)의 데이터 목록을 화면에 표시하거나 검색할 때, 각 데이터를 대표하는 대표 컬럼(필드명)이 무엇인가요?」라고 물어보는 것이다.

Roles 테이블을 확인해보자.

딱 봐도 filament가 사용자에게 이 역할을 보여줄 때 id 컬럼의 숫자 1, 3보다는 name 컬럼의 admin, user를 보여주는 게 훨씬 직관적이다.

그러니 name를 입력하고 enter를 누른다.

Would you like to generate a read-only view page for the resource?

이 질문은「이 리소스(Role)에 대해 '읽기 전용 상세 보기(View) 페이지'를 별도로 생성하시겠습니까?」라고 묻는 것이다.

역할(Role), 카테고리(Category), 사용자(User)처럼 필드 수가 적고 단순한 데이터를 관리할 때는 'No'를, 게시물(Post 혹은 Article)이나 댓글처럼 내용이 너무 길어서 한눈에 보는 전용 페이지가 필요하거나, 수정보다 조회가 훨씬 빈번한 데이터일 경우에는 'Yes'를 선택하면 된다.

즉, 현재의 Role 리소스의 경우에는 No를 선택하자.

Should the configuration be generated from the current database columns?

이 질문은「DB 테이블에 있는 컬럼(필드)들을 자동으로 읽어와서, filament 양식(Form)과 테이블(Table) 코드를 자동으로 짜드릴까요?」라고 묻는 것이다.

'Yes'는 DB에 있는 컬럼명과 타입(string, text, datetime 등)을 filament가 스캔해서 폼 필드와 테이블 컬럼 코드를 알아서 기본 완성해 주는 것이고, 'No'는 빈 파일만 만들어주며, 폼과 테이블 요소를 직접 작성해야 한다.

리소스를 생성하는 명령어를 입력할 때 --generate 옵션을 넣어서 php artisan make:filament-resource Role --generate라고 입력하면, 자동으로 'Yes'를 선택한 것으로 간주되어 이 질문은 뜨지 않는다.

보통은 Yes를 선택하는 게 맞다.

하지만 지금의 경우에는 Yes를 선택해도, No를 선택해고 빈 파일만 생성된다.

그 이유는 이따가 자세히..

Does the model use soft-deletes?

이 질문은「Role 모델이 SoftDeletes(휴지통 기능)를 사용하나요?」라고 묻는 것이다.

Soft Delete 기능은 나중에 다시 한번 다룰 예정이다.

일단 여기서는 결론부터! 그냥 No를 선택하면 된다.

Spatie의 Role 모델은 기본적으로 SoftDeletes를 쓰지 않고 DB에서 완전 삭제하는 방식을 사용한다.

여기까지 끝나면,

• RoleResource.php
• Pages/CreateRole.php
• Pages/EditRole.php
• Pages/ListRoles.php
• Schemas/RoleForm.php
• Tables/RolesTable.php

filament 5에서는 이렇게 6개의 파일들이 생성된다.

두껍게 표시한 파일들이 새로 추가된 파일들이다.

이건 filament가 최신 버전으로 업데이트되면서 구조를 개편하고 코드를 더 깔끔하게 분리할 수 있도록 바뀐 부분이다.

기존에는 RoleResource.php 한 파일 안에 입력 폼(Form)과 목록 테이블(Table) 코드가 한데 섞여 있었다.

그래서 프로젝트가 커지면 RoleResource.php 파일 하나의 코드만 길어지는 현상이 있었다.

이를 막기 위해 폼과 테이블 클래스를 독립시켜 모듈화한 것이다.

RoleResource.php 파일 수정

use Spatie\Permission\Models\Role;

기존에 임포트^Import 되어 있던 use App\Models\Role;을 삭제하고, 이 코드로 바꾸자.

Schemas/RoleForm.php 파일 수정

public static function configure(Schema $schema): Schema
{
    return $schema
        ->components([
            TextInput::make('name')
                ->minLength(2)
                ->maxLength(30)
                ->required()
                ->unique()
        ]);
}

비어있던 configure 메서드에 이 코드를 넣었다.

이 코드는 name 필드에 대한 입력창(텍스트 인풋)을 만들고, 글자 수 제한 유효성 검사(Validation) 규칙을 설정하는 코드다.

• TextInput::make('name'): 화면에 한 줄짜리 텍스트 입력 상자를 생성한다. DB 테이블의 name 컬럼과 데이터를 서로 연결(매핑)한다.
• ->minLength(2): 최소 2글자 이상 입력해야 하도록 제한한다. (2글자 미만 입력 시 에러 메시지 출력)
• ->maxLength(30): 최대 30글자까지만 입력할 수 있도록 제한한다. (30글자 초과 입력 불가)
• ->required(): 필수 입력 항목으로 지정하여 빈 값을 제출할 수 없게 한다.
• ->unique(): 데이터베이스 테이블 내 중복된 값이 이미 존재하는지 검사하여 중복 입력을 막는다.

Tables/RolesTable.php 파일 수정

return $table
    ->columns([
        TextColumn::make('id'),
        TextColumn::make('name')
    ])

마찬가지로 비어있던 table 메서드의 columns([ ... ]) 부분에 코드를 채웠다.

이 코드는 데이터베이스 목록(테이블) 화면에 id와 name 두 개의 컬럼을 텍스트로 출력하도록 설정하는 코드다.

CreateRole.php와 EditRole.php 파일 수정

protected function getRedirectUrl(): string
{
    return $this->getResource()::getUrl('index');
}

CreateRole.php와 EditRole.php에 이 메서드를 추가한다.

filament 리소스는 기본적으로 데이터를 저장하거나 수정한 다음에 페이지의 이동이 없다.

그런데 이 메서드를 추가하면 데이터를 생성하거나 수정한 뒤 목록(Index) 페이지로 이동하게 된다.

분명 아까 전에 Role 리소스를 생성할 때, 「DB 테이블에 있는 컬럼(필드)들을 자동으로 읽어와서, filament 양식(Form)과 테이블(Table) 코드를 자동으로 짜드릴까요?」라는 질문에 Yes를 선택했었는데, 결국 RoleForm.php와 RolesTable.php의 내부는 비어있었고, 코드를 직접 추가해야 했다.

그 원인은 RoleResource.php에 Import 되어있었던 use App\Models\Role; 때문이었다.

use Spatie\Permission\Models\Role;이 아닌, 존재하지도 않는 use App\Models\Role;이 Import 되어있었기 때문에 결국 코드를 직접 짜야했다.

여기까지 코드를 수정하고, filament 관리자 패널의 Role로 들어가봤다.

테이블도 제대로 표시되고 있고, 역할 데이터도 새로 만들거나 수정할 수 있다.

이렇게 filament를 이용하면 내가 직접 작성하는 코드가 거의 없어도 간단하게 CRUD 기능을 구현할 수 있다.

다음 포스트

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

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