라라벨 filament, 관리자 메뉴 아이콘 변경, 순서 정렬 및 그룹화 방법

이번 포스트에서는 라라벨 filament 관리자 패널의 기본 내비게이션 메뉴를 사용자가 더 직관적으로 관리할 수 있도록, 아이콘 설정, 순서 변경, 그리고 그룹화 및 그룹 순서 커스터마이징 방법을 상세하게 살펴보겠다.

이전 포스트

라라벨 filament, 엑셀 업로드 시 생성되는 임시 CSV 파일 자동 삭제 및 Try-Catch 예외 처리

라라벨 filament 관리자 페이지에서 엑셀 파일 업로드 시 스토리지 디렉터리에 쌓이는 불필요한 임시 CSV 파일을 자동으로 삭제하고, try-catch-finally 문을 활용하여 안정적인 예외 처리와 자원 정리를 구현하는 방법을 상세하게 살펴봅니다.

filament 관리자 메뉴의 아이콘과 순서 변경하고 그룹화 · 4th-avenue/laravel13-livewire@23f15d1 · GitHub

설명 없음

github.com

전체적인 코드 수정은 이 깃허브 링크를 통해 확인하자.

알파벳 순으로 정렬되어 있는 filament 관리자 메뉴

filament 관리자 패널로 이동해 보자.

관리자 메뉴(내비게이션)를 커스터마이징 하지 않으면 기본적으로는 이렇게 메뉴들이 알파벳 순으로 정렬이 된다.

filament 관리자 패널을 이용할 때마다 메뉴를 찾을 때 은근히 불편할 것 같다.

비슷한 성격의 메뉴들끼리 서로 묶어서 정렬을 할 필요가 있다.

Overview - Filament

설명 없음

filamentphp.com

오늘의 포스트와 관련된 내용을 filament 공식 문서에서 확인하고 싶다면 이 링크를 확인하자.

filament 관리자 메뉴, 아이콘 설정

app/Filament/Resources/.../...Resource.php의 수정 전 코드

protected static string|BackedEnum|null $navigationIcon = Heroicon::OutlinedRectangleStack;

ArticleResource.php나 CategoryResource.php처럼 ...Resource.php로 끝나는 파일 안에 이런 코드가 있다.

여기서 각 리소스의 아이콘을 변경할 수 있다.

딱 보면 느낌이 오겠지만, Heroicon::OutlinedRectangleStack 이 부분을 바꾸면 된다.

app/Filament/Resources/Articles/ArticleResource.php의 수정 후 코드

protected static string|BackedEnum|null $navigationIcon = Heroicon::OutlinedDocumentText;

이런 식으로 말이다.

테일윈드 공식 무료 SVG 아이콘 라이브러리 heroicons 특징과 사용법

테일윈드 CSS 제작사에서 만든 오픈소스 SVG 아이콘 라이브러리 heroicons 소개입니다. Outline, Solid, Mini, Micro 등 4가지 스타일 특징과 사용 방법, 크기 및 색상 등 테일윈드 클래스 문법 연동 팁을 공유합니다.

아이콘의 코드는 heroicons 사이트에서 찾으면 된다.

filament 관리자 메뉴, 순서 변경

app/Filament/Resources/Articles/ArticleResource.php

protected static ?int $navigationSort = 1;

이 코드는 원래는 없었던 코드를 추가한 거다.

이 코드는 filament 관리자 패널의 사이드바 내에서 리소스의 순서를 지정한다.

숫자가 낮을수록 사이드바에서 더 위쪽에 표시된다.

즉, 1은 사이드바에서 제일 위쪽에 위치함을 의미한다.

단, 이것 하나만 1로 설정했다고 혼자만 위로 올라가지는 않는다.

다른 리소스들도 2, 3, 4와 같이 숫자로 순서를 지정해줘야 한다.

filament 관리자 메뉴의 그룹화

app/Filament/Resources/Users/UserResource.php

protected static string|UnitEnum|null $navigationGroup = 'User와 역할・권한';

각 Resource.php에 이런 코드도 추가하자.

이 코드는 filament 관리자 패널의 사이드바에서 메뉴를 특정 그룹에 배치한다.

예를 들어, 여러 리소스를 "User와 역할・권한" 그룹에 묶어서 리소스를 체계적으로 관리할 수 있게 해준다.

각 리소스 파일의 코드 수정은 포스트 상단에 올려둔 깃허브 링크를 참고하자.

코드들을 수정한 결과, 이렇게 filament 관리자 메뉴가 훨씬 보기 깔끔해졌다.

관련된 리소스끼리 그룹으로 묶여있고, 각 리소스마다 어울리는 아이콘을 설정해 둬서 메뉴를 한눈에 알아보기가 편해졌다.

그런데 아직 한 가지 더 바꾸고 싶은 것이 있다.

바로 그룹의 순서다.

현재의 메뉴를 보면, 한번 설정해 두면 거의 바꿀 일이 없는 Category가 포함된 '사이트 관리' 그룹이 중간에 있다.

이렇게 거의 들어갈 것 같지 않은 그룹을 가장 위로 올려보겠다.

내비게이션 그룹의 순서 변경

app/Providers/Filament/AdminPanelProvider.php

->navigationGroups([
    '사이트 관리',
    '콘텐츠 관리',
    'User와 역할・권한',
])

AdminPanelProvider.php에서 navigationGroups()를 사용하면 filament 관리자 메뉴의 그룹 순서를 바꿀 수 있다.

오늘의 포스트는 여기까지다.

이제 이렇게 그룹의 순서도 원하는 대로 변경되었다.

Overview - Filament

설명 없음

filamentphp.com

그 외 더 자세한 설정 방법들은 이 filament 공식 문서를 확인하자.

다음 포스트

라라벨 Livewire, 폼 객체(Form Object)로 유효성 검사 로직 분리 및 카테고리 셀렉트 에러 해결

라라벨 Livewire 프로젝트에서 폼 객체(Form Object)를 생성해 유효성 검사 로직을 깔끔하게 분리하고 코드를 리팩토링하는 방법과, 개발 과정에서 우연히 발견한 셀렉트 박스 폼 에러의 원인 및 해결 방법을 상세하게 살펴봅니다.