hskwon
3721cfdc4b
- 01-analysis.md: 현재 상태 분석 - 02-implementation-plan.md: 5단계 구현 계획 - 06-excluded-menus.md: 모바일 제외 메뉴 목록 - Phase 1, 2 완료 상태 반영
188 lines
6.1 KiB
Markdown
188 lines
6.1 KiB
Markdown
# 모바일 제외/주의 메뉴 목록
|
|
|
|
> 작성일: 2025-12-19
|
|
> 목적: 모바일에서 구현이 어렵거나 데스크톱 권장 메뉴 정리
|
|
|
|
## 1. 모바일 제외 권장 메뉴 ❌
|
|
|
|
### 1.1 권한 매트릭스 계열
|
|
복잡한 체크박스 그리드로 모바일에서 사용성 매우 낮음
|
|
|
|
| 메뉴 | 경로 | 이유 |
|
|
|------|------|------|
|
|
| 역할 권한 설정 | `/role-permissions` | 11개+ 컬럼 체크박스 매트릭스 |
|
|
| 부서 권한 설정 | `/department-permissions` | 역할 권한과 동일 구조 |
|
|
| 사용자 권한 설정 | `/user-permissions` | 복잡한 권한 트리 |
|
|
|
|
**대응 방안:**
|
|
- 데스크톱 전용 배너 표시
|
|
- 기능은 유지하되 "데스크톱에서 사용 권장" 안내
|
|
|
|
### 1.2 개발/분석 도구
|
|
개발자/관리자 전용 기능으로 모바일 사용 빈도 낮음
|
|
|
|
| 메뉴 | 경로 | 이유 |
|
|
|------|------|------|
|
|
| 권한 분석 도구 | `/permission-analyze` | 트리 구조 + 복잡한 분석 결과 |
|
|
| Flow Tester | `/dev-tools/flow-tester` | JSON 편집기, 복잡한 UI |
|
|
|
|
**대응 방안:**
|
|
- 개발 도구 메뉴 전체를 모바일에서 숨김 처리
|
|
- 또는 데스크톱 전용 배너
|
|
|
|
### 1.3 R&D Labs 전체
|
|
실험/테스트 목적의 기능들로 안정적인 모바일 지원 불필요
|
|
|
|
| 메뉴 | 이유 |
|
|
|------|------|
|
|
| 영업관리 Labs | 실험적 기능, 복잡한 폼 |
|
|
| SAM Labs | 개발 테스트용 |
|
|
| API Labs | API 테스트 도구 |
|
|
|
|
**대응 방안:**
|
|
- 모바일에서 R&D Labs 메뉴 그룹 숨김
|
|
- 또는 접근 시 데스크톱 권장 안내
|
|
|
|
---
|
|
|
|
## 2. 모바일 주의 필요 메뉴 ⚠️
|
|
|
|
### 2.1 테넌트 관리
|
|
| 메뉴 | 경로 | 문제점 | 해결책 |
|
|
|------|------|--------|--------|
|
|
| 테넌트 목록 | `/tenants` | 13컬럼 테이블 | 스와이프 + 핵심 컬럼만 표시 |
|
|
| 테넌트 상세 모달 | - | 다수 탭/모달 | 탭별 스크롤 |
|
|
|
|
### 2.2 사용자 관리
|
|
| 메뉴 | 경로 | 문제점 | 해결책 |
|
|
|------|------|--------|--------|
|
|
| 사용자 목록 | `/users` | 8컬럼 테이블 | 스와이프 적용 |
|
|
| 사용자 생성/수정 | `/users/create`, `/users/{id}/edit` | 복잡한 폼 | 섹션별 정리 |
|
|
|
|
### 2.3 프로젝트 관리
|
|
| 메뉴 | 경로 | 문제점 | 해결책 |
|
|
|------|------|--------|--------|
|
|
| 프로젝트 Import | `/project-management/import` | 파일 업로드 + 매핑 | 기본 기능만 지원 |
|
|
| 프로젝트 목록 | `/project-management/projects` | 테이블 | 스와이프 적용 |
|
|
|
|
---
|
|
|
|
## 3. 모바일 적합 메뉴 ✅
|
|
|
|
### 3.1 기본 CRUD
|
|
| 메뉴 | 경로 | 비고 |
|
|
|------|------|------|
|
|
| 대시보드 | `/dashboard` | 카드 레이아웃 반응형 적용 |
|
|
| 프로필 | `/profile` | 간단한 폼 |
|
|
| 역할 관리 | `/roles` | 6컬럼 테이블 |
|
|
| 부서 관리 | `/departments` | 5컬럼 테이블 |
|
|
| 권한 관리 | `/permissions` | 5컬럼 테이블 |
|
|
| 게시판 관리 | `/boards` | 7컬럼 테이블 |
|
|
|
|
### 3.2 게시판 관련
|
|
| 메뉴 | 경로 | 비고 |
|
|
|------|------|------|
|
|
| 게시글 목록 | `/posts` | 리스트 뷰 |
|
|
| 게시글 상세 | `/posts/{id}` | 상세 뷰 |
|
|
| 게시글 작성 | `/posts/create` | 폼 |
|
|
|
|
### 3.3 견적 공식
|
|
| 메뉴 | 경로 | 비고 |
|
|
|------|------|------|
|
|
| 공식 목록 | `/quote-formulas` | 7컬럼 테이블 |
|
|
| 카테고리 관리 | `/quote-formulas/categories` | 간단한 CRUD |
|
|
| 시뮬레이터 | `/quote-formulas/simulator` | 단일 계산 폼 |
|
|
|
|
---
|
|
|
|
## 4. 구현 전략
|
|
|
|
### 4.1 모바일 제외 메뉴 처리 방법
|
|
|
|
**방법 A: 배너만 표시 (권장)**
|
|
```html
|
|
@if(request()->is('role-permissions*', 'department-permissions*', 'user-permissions*'))
|
|
<x-desktop-only-banner />
|
|
@endif
|
|
```
|
|
|
|
**방법 B: 메뉴에서 숨김**
|
|
```php
|
|
// SidebarComposer에서 모바일 감지 시 메뉴 제외
|
|
// (서버 사이드에서는 정확한 감지 어려움)
|
|
```
|
|
|
|
**방법 C: 접근 시 리다이렉트**
|
|
```php
|
|
// 미들웨어에서 User-Agent 체크
|
|
// (권장하지 않음 - 사용자 경험 저하)
|
|
```
|
|
|
|
### 4.2 권장 접근법
|
|
|
|
1. **데스크톱 전용 배너 컴포넌트** 생성
|
|
2. **해당 페이지 상단에 배너 포함**
|
|
3. **기능은 그대로 유지** (사용자 선택권 존중)
|
|
4. **R&D Labs는 모바일 메뉴에서 숨김** (개발 도구 특성상)
|
|
|
|
---
|
|
|
|
## 5. 배너 컴포넌트 상세
|
|
|
|
### 5.1 기본 배너
|
|
```html
|
|
<!-- components/desktop-only-banner.blade.php -->
|
|
@props(['title' => '데스크톱 환경 권장', 'message' => '이 기능은 넓은 화면에서 더 잘 동작합니다.'])
|
|
|
|
<div class="lg:hidden bg-amber-50 border border-amber-200 rounded-lg p-4 mb-4">
|
|
<div class="flex items-start gap-3">
|
|
<svg class="w-5 h-5 text-amber-600 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
|
|
</svg>
|
|
<div>
|
|
<p class="font-medium text-amber-800">{{ $title }}</p>
|
|
<p class="text-sm text-amber-600 mt-1">{{ $message }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
### 5.2 사용 예시
|
|
```html
|
|
<!-- role-permissions/index.blade.php -->
|
|
@section('content')
|
|
<x-desktop-only-banner
|
|
title="권한 매트릭스"
|
|
message="복잡한 권한 설정은 태블릿이나 PC에서 사용하시는 것이 편리합니다."
|
|
/>
|
|
|
|
<!-- 기존 내용 -->
|
|
<div class="...">
|
|
...
|
|
</div>
|
|
@endsection
|
|
```
|
|
|
|
---
|
|
|
|
## 6. 체크리스트
|
|
|
|
### 제외 메뉴 처리
|
|
- [ ] `desktop-only-banner` 컴포넌트 생성
|
|
- [ ] `role-permissions/index.blade.php` 적용
|
|
- [ ] `department-permissions/index.blade.php` 적용
|
|
- [ ] `user-permissions/index.blade.php` 적용
|
|
- [ ] `permission-analyze/index.blade.php` 적용
|
|
- [ ] `dev-tools/flow-tester/*.blade.php` 적용
|
|
|
|
### R&D Labs 처리
|
|
- [ ] 모바일에서 Labs 메뉴 그룹 숨김 여부 결정
|
|
- [ ] `labs-menu.blade.php` 수정 (선택 시)
|
|
|
|
---
|
|
|
|
## 7. 향후 검토 사항
|
|
|
|
- **권한 매트릭스 모바일 UI**: 별도 설계 필요 시 추후 검토
|
|
- **개발 도구 모바일 버전**: 필요성 검토 후 결정
|
|
- **PWA 오프라인 지원**: 모바일 사용 빈도에 따라 검토 |