Laravel 프로젝트에 filament 설치

드디어 필라멘트^filament를 설치한다.

그것도 최신 버전인 5를 설치하기 위해서, 지금까지 tailwindcss도 4로 업그레이드하고, Livewire도 4로 업그레이드했다.

이전 포스트

tailwindcss 4 클릭 가능한 요소 위에서 마우스 커서 안 바뀌는 문제 해결법

tailwindcss 4 업그레이드 후 드롭다운 메뉴와 버튼 태그에 마우스를 올려도 커서가 손가락 모양으로 바뀌지 않는 오류 수정 방법입니다. app.css에 pointer 스타일을 추가하여 활성화된 버튼에만 커서가 바뀌도록 하는 팁을 공유합니다.

filament란?

filament는 라라벨^Laravel 생태계에서 가장 널리 쓰이는 오픈소스 '관리자 패키지'다.

TALL 스택(tailwindcss, Alpine.js, Laravel, Livewire)을 기반으로 구축되어 있어, 복잡한 백엔드 관리자 화면(CRUD, 대시보드, 폼, 테이블 등)을 별도의 프론트엔드 작업 없이 깔끔하고 세련된 UI로 바로 만들어서 개발할 수 있다.

한마디로 말하자면, 웹사이트의 관리자 메뉴를 쉽고 빠르게 만들어주는 것이다.

Build Laravel apps & admin panels fast - Filament

Filament is a powerful open-source UI framework for Laravel. Build and ship apps & admin panels fast with Livewire.

filamentphp.com

filament 웹사이트의 링크다.

오늘의 포스트는 filament를 설치만 하고 끝낼 거다.

혹시 이 글을 확인하는 시점에서 filament가 5보다 더 높은 버전이 나왔다면 웹사이트를 보면서 설치를 진행하자.

filament의 최신 버전이 5인 현재의 filament 웹사이트 첫 화면의 디자인이다.

make app #컨테이너 안으로 들어간다.
composer require filament/filament:"^5.0"
php artisan filament:install --panels

VSCode의 터미널에서 이 명령어들을 차례대로 실행한다.

두 번째 명령어를 입력하면 "What is the panel's ID?" 라고 뜬다.

이 질문은 filament 관리자 패널을 설정할 때 패널의 고유 ID를 지정하라는 요청이다.

이 ID는 관리자 패널의 구성을 식별하는 데 사용된다.

여러 개의 패널을 사용할 수 있는 경우, 각 패널을 구분하기 위해 이 ID가 필요하다.

일반적으로, 특별한 이유가 없다면 기본 ID를 사용하는 것이 좋다.

All done! Would you like to show some love by starring the Filament repo on GitHub?

그 다음에는 이런 질문이 뜬다.

빠르게 진행하고 싶다면 그냥 No를 선택하자.

이건 설치가 성공적으로 끝났으니 "filament의 공식 GitHub 저장소(Repository)에 방문해서 별(좋아요)을 눌러주지 않겠냐"고 요청하는 안내 메시지다.

별을 눌러주고 싶다면 Yes를 선택하고 엔터를 치면 filament GitHub 페이지로 이동한다.

마지막으로 php artisan make:filament-user 명령어로 사용자 계정을 생성하고, http://localhost/admin으로 접속해서 로그인을 해보는 것이 보통이다.

하지만, 곧 Seeder를 사용해서 계정을 생성할 예정이기 때문에 생략하겠다.

참고로 현시점에서는 http://localhost/admin으로 접속도 안된다.

에러가 발생하는데, 이것도 곧 해결할 거다.