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

지난 포스트에 이어, 이번에는 Role 리소스의 폼 필드들을 Section 컴포넌트로 깔끔하게 그룹화하여 관리자 패널의 UI를 개선해 보겠다.

그리고 반복되는 리다이렉트 코드를 전역 설정으로 간소화하고, 동일한 패턴으로 Permission 리소스까지 함께 구축해 보겠다.

이전 포스트

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

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

filament Permission 리소스 CRUD 기능 구현 및 리소스 폼 필드를 섹션으로 그룹화하여 UI 개선 · 4th-avenue/laravel13-livewire@71ba85c · GitHub

설명 없음

github.com

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

Schemas/RoleForm.php 파일 수정

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

이전 포스트에서 수정했던 코드를 또 이렇게 바꿔보자.

변경 후에는 이 필드들이 묶여서 Section이라는 컴포넌트로 그룹화된다.

Section은 필드들을 시각적으로 그룹화하고, 설명(description)등을 추가할 수 있는 UI 컴포넌트다.

이전 포스트에서 완성했던 Role을 생성하는 폼의 모습니다.

Section이라는 컴포넌트로 그룹화한 후에는 이런 모습이 된다.

Sections - Filament

You may want to separate your fields into sections, each with a heading and description. To do this, you can use a section component.

filamentphp.com

여기서는 description도 생략하고 간단하게 끝냈지만, 더 많은 기능은 이 링크를 통해 확인해 보자.

데이터 저장 후 페이지를 이동하는 코드를 더 간단하게 수정

CreateRole.php와 EditRole.php에서 삭제할 코드

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

CreateRole.php와 EditRole.php에 추가했던 이 메서드를 삭제하자.

이런 메서드를 매번 추가하는 것보다 더 간단한 방법이 있다.

app/Providers/Filament/AdminPanelProvider.php에 추가할 코드

use Filament\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
        // 생략
        ->resourceEditPageRedirect('index') // 혹은 'index' 대신 'view'
}

여기에 이 코드를 추가해 두면, 개별 CreateRole.php나 EditRole.php 파일마다 getRedirectUrl() 메서드를 일일이 작성하지 않아도 모든 리소스(Role, User, Permission 등)에 전역(Global)으로 한 번에 적용된다.

만약 특정 리소스만 다른 곳으로 보내고 싶다면, 그 리소스 페이지 파일(CreateUser.php 등)에 기존처럼 getRedirectUrl()을 작성하면 된다. (개별 설정이 글로벌 설정보다 우선 적용된다.)

Creating records - Filament

설명 없음

filamentphp.com

이것에 대한 것 역시 더 자세한 것은 이 링크를 통해 확인해 보자.

filament Permission 리소스 생성

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

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

이후에는 이전 포스트와 위에 링크한 깃허브 링크를 참고해서 Permission 리소스도 데이터를 생성하고 수정할 수 있게 만들도록 하자.

모두 이전 포스트에서 다뤘던 코드들이니, 여기서는 생략하도록 하겠다.