라라벨 filament 관리자 패널 SPA 모드 활성화 및 커스텀 드롭다운 메뉴 (관리자 패널 나가기) 추가

이번 포스트에서는 라라벨 filament 관리자 패널의 사용자 경험(UX)을 끌어올리는 두 가지 핵심 설정을 다뤄보겠다.

단 한 줄의 코드로 반응 속도를 높이는 SPA 모드 활성화 방법과, 기본 메뉴에 빠져있는 '웹사이트 첫 페이지로 돌아가기' 링크를 드롭다운 메뉴에 추가하는 방법을 알아보겠다.

이전 포스트

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

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

filament 관리자 메뉴 SPA 모드 활성 및 드롭다운 메뉴에 홈으로 돌아가기 추가 · 4th-avenue/laravel13-livewire@b9e4168 · GitHub

설명 없음

github.com

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

filament 관리자 메뉴의 SPA 모드 활성

filament는 Livewire로 만들어졌지만, 기본적으로 SPA(싱글 페이지 애플리케이션) 모드가 활성화되어있지 않다.

하지만 굉장히 짧은 코드 하나로 SPA 모드를 활성화할 수 있다.

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

public function panel(Panel $panel): Panel
{
    return $panel
        // 생략
        ->spa();
}

이렇게 수정하면 SPA 모드가 활성화되어, 페이지 전환이 부드럽고 빨라지며, 네트워크 트래픽 절감 효과를 얻을 수 있다.

Panel configuration - Filament

설명 없음

filamentphp.com

SPA 모드에 대한 코드는 이 링크에 더 자세히 정리되어 있다.

filament 관리자 패널의 드롭다운 메뉴에 홈으로 돌아가기 추가

filament 관리자 패널에는 관리자 패널에서 나가는 링크가 없다.

캡처한 이미지에 보이는 것처럼, 왼쪽 메뉴에도 없고, 드롭다운 메뉴에도 없다.

웹사이트로 다시 돌아가고 싶다면 로그아웃을 하거나, 직접 URL을 입력해야 한다.

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

use Filament\Actions\Action;

public function panel(Panel $panel): Panel
{
    return $panel
        // 생략
        ->userMenuItems([
            [
                Action::make('exit_admin')
                    ->label('관리자 패널 나가기')
                    ->url('/')
                    ->icon('heroicon-o-home-modern'),
            ],
        ]);
}

그래서 드롭다운 메뉴에 웹사이트의 첫 페이지로 이동하는 링크를 넣었다.

코드에 대한 자세한 설명은 생략하겠다.

저장 후에 확인해 보면, 이렇게 드롭다운 메뉴에 filament 관리자 패널을 나가서 웹사이트의 첫 페이지로 이동하는 링크가 생겨있다.

그런데 여기서 좀 더 디테일한 수정을 넣고 싶다.

'관리자 패널 나가기'와 '로그아웃' 사이에 구분선이 있었으면 좋겠다.

use Filament\Actions\Action;

public function panel(Panel $panel): Panel
{
    return $panel
        // 생략
        ->userMenuItems([
            [
                Action::make('exit_admin')
                    ->label('관리자 패널 나가기')
                    ->url('/')
                    ->icon('heroicon-o-home-modern'),
            ],
            [
                'logout' => fn (Action $action): Action => $action,
            ],
        ]);
}

그럴 때는 이렇게, 굳이 코드를 넣지 않아도 항상 마지막에 위치하는 '로그아웃'을 명시적으로 등록해서 [ ]으로 구분해 나눠주면 된다.

선이 잘 안보이기 때문에 잠시 다크모드를 적용했다.

이렇게 '관리자 패널 나가기'와 '로그아웃' 사이에 구분선이 생겼다.

User menu - Filament

설명 없음

filamentphp.com

이렇게 filament 관리자 패널에서 메뉴를 커스텀하는 방법은 이 링크에 더 자세하게 나와있다.

다음 포스트

라라벨의 Soft Delete 기능에 대해 알아보자. (categories와 articles 테이블 추가)

라라벨에서 Category와 Article 모델 및 마이그레이션 파일을 생성하며, DB에서 실제 데이터를 지우지 않고 휴지통처럼 안전하게 관리하는 Soft Delete(softDeletes) 기능의 원리와 설정법을 정리했습니다.