브랜딩 설정: 멀티테넌트 Filament 앱에서 로고 및 색상 커스터마이징

카테고리

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

서브카테고리

웹 개발

대상자

• 멀티테넌트 애플리케이션 개발자 (Laravel + Filament 사용자)
• 난이도: 중급 (Filament 패널 커스터마이징 경험 필요)

핵심 요약

• Entity 모델에 logo와 config 필드 추가하여 테넌트별 브랜딩 정보 저장
• ApplyFilamentTenantThemeMiddleware 미들웨어 생성 후 Filament::getCurrentPanel()을 통해 동적으로 로고/색상 적용
• PanelProvider에서 brandLogo() 및 tenantMiddleware() 설정으로 기본값과 미들웨어 등록

섹션별 세부 요약

1. `Entity` 모델 설정

• logo 필드: 테넌트의 커스텀 로고 저장
• config 필드 (JSON): 색상 정보 (colors.primary) 포함
• getBrandLogo() 메서드: 로고 파일 경로 반환 (기본값: images/logo.svg)
• getPrimaryColorCode() 메서드: config에서 #0099a8 기본 색상 추출

2. `EditEntityProfile` 페이지 구성

• FileUpload 필드: 로고 업로드 (디스크: private, 디렉토리: logos)
• ColorPicker 필드: config.colors.primary에 HEX 색상 입력
• 예시 코드:

FileUpload::make('logo')->disk('private')->directory('logos');
ColorPicker::make('config.colors.primary')->hexColor();

3. `PanelProvider` 기본 설정

• brandLogo() 메서드로 기본 로고 설정: asset('images/logo.svg')
• brandLogoHeight()로 로고 높이 조정: '7rem'
• 미들웨어 등록:

->tenantMiddleware([ApplyFilamentTenantThemeMiddleware::class])

4. 미들웨어 동작 방식

• handle() 메서드:

- filament()->getTenant()로 현재 테넌트 식별

- Filament::getCurrentPanel()->brandLogo()로 로고 동적 적용

- FilamentColor::register()로 주요 색상(primary) 설정

• 예시 코드:

FilamentColor::register(['primary' => $tenant->getPrimaryColorCode()]);

결론

• ApplyFilamentTenantThemeMiddleware 미들웨어 사용으로 테넌트별 브랜딩 자동 적용 가능
• Entity 모델의 config 필드를 통해 색상/로고 관리 시 테넌트별 고유 UI 구현
• Filament의 PanelProvider 설정과 미들웨어 연동이 필수적 (기본값과 동적 적용 병행)