필라멘트 위젯: 그리드 레이아웃, 대시보드 및 반응형 디자인

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

Laravel 및 Filament 프레임워크를 사용하는 웹 개발자, 특히 관리자 패널(Admin Panel) 개발에 관심 있는 중급~고급 개발자

핵심 요약

• Filament\Pages\Dashboard 클래스를 상속하여 커스텀 대시보드 생성
• 반응형 그리드 레이아웃 정의 시 getColumns() 메서드와 브레이크포인트(md, xl) 사용
• 위젯의 columnSpan 속성을 통해 그리드 내 위젯 배치 조정 (예: protected $columnSpan = 'full')

섹션별 세부 요약

1. 커스텀 대시보드 생성

• Filament\Pages\Dashboard를 상속한 클래스를 app/Filament/Pages/에 생성
• AdminPanelProvider에서 기본 대시보드 설정 제거 (->pages([]))
• 여러 패널이 있을 경우 해당 패널 디렉터리 내에 커스텀 대시보드 배치

1. 반응형 그리드 레이아웃 정의

• getColumns() 메서드로 컬럼 수 설정 (기본값 2, 1~12 범위)
• 브레이크포인트 지원:

```php

return ['md' => 4, 'xl' => 6]; // 중간 화면: 4컬럼, 대형 화면: 6컬럼

```

1. 위젯 구성 및 커스텀

• php artisan make:filament-widget StatsOverview --stats-overview 명령어로 위젯 생성
• columnSpan 속성으로 위젯의 그리드 배치 조정:

```php

protected $columnSpan = ['xl' => 4]; // 대형 화면에서 4컬럼 차지

```

• getColumns() 메서드로 위젯 내부 컬럼 수 설정 (예: return 2;)

1. 위젯 등록 방법

• 자동 탐지: ->discoverWidgets(in: ...) 설정
• 수동 등록: ->widgets([StatsOverview::class]) 또는 getWidgets() 메서드 활용
• 주의사항: 수동 등록 시 자동 탐지 비활성화

결론

Filament 대시보드를 커스텀할 때는 getColumns()과 columnSpan 속성을 통해 반응형 레이아웃을 구현하고, 위젯 등록 방식에 따라 자동/수동 탐지 설정을 고려해야 합니다. 특히 xl 브레이크포인트와 full 너비 설정은 대형 화면에서의 UX 개선에 효과적입니다.