sam-docs/projects/mng-mobile-responsive/06-excluded-menus.md

모바일 제외/주의 메뉴 목록

작성일: 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: 배너만 표시 (권장)

@if(request()->is('role-permissions*', 'department-permissions*', 'user-permissions*'))
    <x-desktop-only-banner />
@endif

방법 B: 메뉴에서 숨김

// SidebarComposer에서 모바일 감지 시 메뉴 제외
// (서버 사이드에서는 정확한 감지 어려움)

방법 C: 접근 시 리다이렉트

// 미들웨어에서 User-Agent 체크
// (권장하지 않음 - 사용자 경험 저하)

4.2 권장 접근법

1. 데스크톱 전용 배너 컴포넌트 생성
2. 해당 페이지 상단에 배너 포함
3. 기능은 그대로 유지 (사용자 선택권 존중)
4. R&D Labs는 모바일 메뉴에서 숨김 (개발 도구 특성상)

---

5. 배너 컴포넌트 상세

5.1 기본 배너

<!-- 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 사용 예시

<!-- 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 오프라인 지원: 모바일 사용 빈도에 따라 검토