Laravel 드롭다운 메뉴에 Admin Panel 추가 및 디자인 변경

이번 포스트에서는 관리자 계정으로 로그인했을 경우에 내비게이션의 드롭다운 메뉴에 filament 관리자 패널로 이동하는 링크를 만들어 보겠다.

그리고 내비게이션의 라라벨 로고(웹사이트의 로고가 들어갈 자리)를 클릭하면 대시보드가 아닌 웹사이트의 홈 화면으로 이동하도록 수정하고, http://localhost/admin으로 가면 일반 로그인 페이지로 리다이렉트 되도록 수정해 보겠다.

이전 포스트

Laravel Seeder 활용법: 초기 역할(Role) 및 관리자 계정 생성 가이드

라라벨 Seeder를 활용해 초기 역할과 관리자 계정을 생성하고 데이터베이스에 자동으로 주입하는 방법을 정리합니다. RoleSeeder 및 UserFactory 수정부터 User 모델 인터페이스 구현까지, 초기 데이터 구축 과정을 깔끔하게 알아봅니다.

드롭다운 메뉴에 Admin Panel 추가 및 디자인 변경 · 4th-avenue/laravel13-livewire@8ce1adc · GitHub

설명 없음

github.com

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

web.php에서 라우트에 이름을 부여

Route::view('/', 'welcome')
    ->name('/');

->name('/');을 추가했다.

웹사이트의 첫 페이지(welcome 페이지)로 가는 라우트에 이름을 부여했다.

livewire/layout/navigation.blade.php 파일 수정

<a href="{{ route('/') }}" wire:navigate>

dashboard를 삭제하고 /를 넣었다.

메뉴의 로고를 클릭하면 대시보드 대신 welcome 페이지로 이동하도록 수정한 것이다.

이건 수정하기 전의 드롭다운 메뉴의 모습이다.

<x-slot name="content">
    <!-- Account Management -->
    <div class="block px-4 py-2 text-xs text-gray-400">
        {{ __('Manage Account') }}
    </div>

    <x-dropdown-link :href="route('profile')" wire:navigate>
        {{ __('Profile') }}
    </x-dropdown-link>

    @role('admin')
        <div class="border-t border-gray-200 dark:border-gray-400"></div>

        <div class="block px-4 py-2 text-xs text-gray-400">
            {{ __('Manage Site') }}
        </div>

        <x-dropdown-link href="/admin">
            {{ __('Admin Panel') }}
        </x-dropdown-link>
    @endrole

    <div class="border-t border-gray-200 dark:border-gray-400"></div>

    <!-- Authentication -->
    <button wire:click="logout" class="w-full text-start">
        <x-dropdown-link>
            {{ __('Log Out') }}
        </x-dropdown-link>
    </button>
</x-slot>

어떤 코드를 추가한 것인지, 그리고 코드를 추가하는 위치 등은 깃허브 링크를 참고하자.

드롭다운 메뉴에 Admin Panel로 이동하는 메뉴를 추가했다.

이 메뉴는 admin 역할의 사용자에게만 보이도록 @role('admin')과 @endrole로 감쌌다.

@role('admin')
    <x-responsive-nav-link href="/admin">
        {{ __('Admin Panel') }}
    </x-responsive-nav-link>
@endrole

모바일 화면에도 잊지 말고 Admin Panel 메뉴를 추가하자.

Blade directives | laravel-permission | Spatie

laravel-permission

spatie.be

@role('admin')에 대해서는 이 링크를 참고하자.

lang/ko.json 파일 수정

lang/ko.json에 추가할 코드

"Manage Account": "계정 관리",
"Manage Site": "웹사이트 관리",
"Admin Panel": "관리자 패널",

navigation.blade.php에서 :value="__(' ')" 속성 안에 입력된 영어가 한글로 뜨도록 lang/ko.json에서 적절한 위치에 이 코드를 추가한다.

수정 후의 드롭다운 메뉴의 모습이다.

관리자 계정으로 로그인했을 경우에만 이렇게 Admin Panel로 이동하는 링크가 표시된다.

AdminPanelProvider.php 파일 수정

->login()

이 코드들을 삭제한다.

이 코드를 제거하면 관리자 로그인 페이지 설정이 삭제된다.

즉, 이전에는 비로그인 상태에서 /admin 경로로 가면 관리자 로그인 페이지가 떴는데, 이제는 관리자 로그인 페이지가 사라지게 되고, 일반 로그인 페이지로 리다이렉트 된다.

다음 포스트

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

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