docs: MNG 모바일 반응형 프로젝트 문서 추가

- 01-analysis.md: 현재 상태 분석 - 02-implementation-plan.md: 5단계 구현 계획 - 06-excluded-menus.md: 모바일 제외 메뉴 목록 - Phase 1, 2 완료 상태 반영
2025-12-19 16:02:17 +09:00
parent 3b2f1cefa4
commit 3721cfdc4b
3 changed files with 789 additions and 0 deletions
--- a/projects/mng-mobile-responsive/01-analysis.md
+++ b/projects/mng-mobile-responsive/01-analysis.md
@@ -0,0 +1,251 @@
+# MNG 사이트 모바일 반응형 분석
+
+> 작성일: 2025-12-19
+> 목적: mng 관리자 패널의 모바일 반응형 개선 계획 수립
+
+## 1. 현재 상태 요약
+
+### 1.1 전체 구조
+```
+mng/resources/views/
+├── layouts/app.blade.php       # 메인 레이아웃 (flex 구조)
+├── partials/
+│   ├── sidebar.blade.php       # 사이드바 (w-64 고정)
+│   ├── header.blade.php        # 헤더 (h-16 고정)
+│   └── pagination.blade.php    # 페이지네이션 (sm 분기 있음)
+├── components/sidebar/         # 사이드바 메뉴 컴포넌트
+└── [페이지]/partials/table.blade.php  # 각 모듈 테이블
+```
+
+### 1.2 Tailwind 설정
+- **현재**: 기본 breakpoint 사용 (sm:640px, md:768px, lg:1024px)
+- **커스텀 설정 없음**: 추가 breakpoint나 반응형 변수 미정의
+- **플러그인**: `@tailwindcss/forms` 사용 중
+
+### 1.3 문제점
+| 구분 | 문제 | 심각도 |
+|------|------|--------|
+| 사이드바 | 모바일에서 항상 표시, 콘텐츠 영역 압박 | 🔴 높음 |
+| 헤더 | 테넌트 셀렉터/사용자 메뉴 공간 부족 | 🔴 높음 |
+| 테이블 | 수평 스크롤만 있고 사용성 낮음 | 🟡 중간 |
+| 폼/필터 | flex 고정으로 요소 겹침 가능 | 🟡 중간 |
+| 버튼 그룹 | 수평 배치로 작은 화면에서 문제 | 🟢 낮음 |
+
+---
+
+## 2. 상세 분석
+
+### 2.1 레이아웃 (app.blade.php)
+
+**현재 구조:**
+```html
+<div class="flex h-screen overflow-hidden">
+    @include('partials.sidebar')  <!-- 항상 표시 -->
+    <div class="flex-1 flex flex-col overflow-hidden min-w-0">
+        @include('partials.header')
+        <main class="flex-1 overflow-y-auto bg-gray-100 p-6">
+            @yield('content')
+        </main>
+    </div>
+</div>
+```
+
+**문제:**
+- 사이드바가 모바일에서도 w-64(256px) 차지
+- 콘텐츠 영역이 매우 좁아짐
+- 모바일/태블릿 분기 없음
+
+**개선 방향:**
+```html
+<!-- 제안: 모바일에서 사이드바 오버레이 -->
+<div class="flex h-screen overflow-hidden">
+    <!-- 모바일 오버레이 백드롭 -->
+    <div class="fixed inset-0 bg-black/50 z-40 lg:hidden" x-show="sidebarOpen"></div>
+
+    <!-- 사이드바: 모바일에서 absolute, 데스크톱에서 static -->
+    <aside class="fixed inset-y-0 left-0 z-50 w-64 lg:static lg:flex-shrink-0">
+        ...
+    </aside>
+
+    <div class="flex-1 flex flex-col overflow-hidden min-w-0">
+        <header>
+            <!-- 모바일: 햄버거 버튼 추가 -->
+            <button class="lg:hidden">☰</button>
+        </header>
+        <main>...</main>
+    </div>
+</div>
+```
+
+### 2.2 사이드바 (sidebar.blade.php)
+
+**현재 기능:**
+- 데스크톱 토글 (w-64 ↔ w-16)
+- localStorage 상태 저장
+- 접힌 상태에서 hover 툴팁
+- R&D Labs 플라이아웃 메뉴
+
+**모바일 미지원 사항:**
+- 햄버거 메뉴 버튼 없음
+- 오버레이/슬라이드 인 애니메이션 없음
+- 외부 클릭으로 닫기 없음
+- 스와이프 제스처 없음
+
+**개선 방향:**
+```
+데스크톱 (lg+):    [사이드바 | 콘텐츠]     또는 [접힌바 | 콘텐츠]
+태블릿 (md-lg):    [접힌 사이드바 | 콘텐츠]
+모바일 (< md):     [콘텐츠] + 햄버거 클릭 → 오버레이 사이드바
+```
+
+### 2.3 헤더 (header.blade.php)
+
+**현재 구조:**
+```html
+<header class="h-16 flex items-center justify-between px-6">
+    <!-- 좌측: 테넌트 셀렉터 + 현재 테넌트 표시 -->
+    <div class="flex items-center gap-4">
+        <label>테넌트 선택:</label>
+        <select class="min-w-[200px]">...</select>
+        <span>현재 테넌트 뱃지</span>
+    </div>
+
+    <!-- 우측: 알림 + 사용자 메뉴 -->
+    <div class="flex items-center gap-4">
+        <button>🔔</button>
+        <div>사용자 메뉴</div>
+    </div>
+</header>
+```
+
+**문제:**
+- 테넌트 셀렉터가 min-w-[200px]로 고정
+- 작은 화면에서 요소들이 겹침
+- 모바일에서 햄버거 버튼 들어갈 공간 없음
+
+**개선 방향:**
+```html
+<header class="h-16 flex items-center justify-between px-4 md:px-6">
+    <!-- 모바일: 햄버거 + 로고만 -->
+    <div class="flex items-center gap-2">
+        <button class="lg:hidden">☰</button>
+        <span class="text-lg font-bold lg:hidden">SAM</span>
+
+        <!-- 데스크톱: 테넌트 셀렉터 -->
+        <div class="hidden lg:flex items-center gap-4">
+            <select>...</select>
+        </div>
+    </div>
+
+    <!-- 우측: 동일 (반응형 조정) -->
+    <div class="flex items-center gap-2 md:gap-4">
+        <!-- 테넌트 드롭다운 (모바일) -->
+        <div class="lg:hidden">...</div>
+        <button>🔔</button>
+        <div>사용자</div>
+    </div>
+</header>
+```
+
+### 2.4 테이블 현황
+
+| 페이지 | 컬럼 수 | overflow-x-auto | 모바일 대응 |
+|--------|---------|-----------------|-------------|
+| users | 8개 | ❌ 없음 | ❌ |
+| tenants | 13개 | ❌ 없음 | ❌ |
+| roles | 6개 | ❌ 없음 | ❌ |
+| departments | 5개 | ❌ 없음 | ❌ |
+| permissions | 5개 | ❌ 없음 | ❌ |
+| boards | 7개 | ❌ 없음 | ❌ |
+| role-permissions | 11개+ | ✅ 있음 | 수평 스크롤만 |
+| archived-records | 6개 | ❌ 없음 | ❌ |
+| quote-formulas | 7개 | ❌ 없음 | ❌ |
+
+**사용자 요청:**
+- 카드형 대신 **좌우 스와이프** 형태 유지
+- 즉, `overflow-x-auto` + 터치 스크롤이 핵심
+
+**개선 방향:**
+```html
+<!-- 스와이프 테이블 래퍼 -->
+<div class="overflow-x-auto -mx-4 md:mx-0">
+    <div class="inline-block min-w-full align-middle px-4 md:px-0">
+        <table class="min-w-full divide-y divide-gray-200">
+            <!-- 테이블 내용 -->
+        </table>
+    </div>
+</div>
+
+<!-- 스와이프 힌트 (모바일에서만) -->
+<div class="md:hidden text-center text-xs text-gray-400 mt-2">
+    ← 좌우로 스와이프하여 더 보기 →
+</div>
+```
+
+---
+
+## 3. 메뉴별 모바일 적합성 분석
+
+### 3.1 모바일 적합 메뉴 ✅
+| 메뉴 | 이유 |
+|------|------|
+| 대시보드 | 단순 정보 표시 |
+| 프로필 | 개인 설정 |
+| 게시판 목록/상세 | 리스트 + 상세 뷰 |
+| 일반 CRUD 작업 | 간단한 폼 |
+
+### 3.2 모바일 주의 필요 메뉴 ⚠️
+| 메뉴 | 문제점 | 해결책 |
+|------|--------|--------|
+| 사용자 관리 | 8컬럼 테이블 | 핵심 컬럼만 표시 + 스와이프 |
+| 테넌트 관리 | 13컬럼, 다수 모달 | 간소화 필요 |
+| 역할 관리 | 테이블 + 권한 매트릭스 | 스와이프 적용 |
+| 부서 관리 | 간단 (5컬럼) | 스와이프만으로 충분 |
+
+### 3.3 모바일 구현 어려운 메뉴 ❌ (추후 검토)
+| 메뉴 | 문제점 | 권장 |
+|------|--------|------|
+| 역할 권한 매트릭스 | 11개+ 컬럼 체크박스 그리드 | 데스크톱 전용 또는 별도 UI |
+| 부서 권한 매트릭스 | 역할 권한과 동일 | 데스크톱 전용 또는 별도 UI |
+| 사용자 권한 | 복잡한 매트릭스 | 데스크톱 전용 또는 별도 UI |
+| 권한 분석 도구 | 트리 구조 + 분석 결과 | 데스크톱 권장 |
+| Flow Tester | 복잡한 JSON 편집기 | 데스크톱 전용 |
+| 프로젝트 관리 (Import) | 파일 업로드 + 매핑 | 데스크톱 권장 |
+| R&D Labs | 실험/테스트 목적 | 데스크톱 권장 |
+
+---
+
+## 4. 기술 스택 확인
+
+### 4.1 현재 사용 중
+- **Tailwind CSS**: 반응형 유틸리티 사용 가능
+- **Alpine.js**: 없음 (vanilla JS만 사용)
+- **HTMX**: 일부 페이지에서 사용
+- **localStorage**: 사이드바 상태 저장
+
+### 4.2 추가 고려
+- **Alpine.js**: 모바일 메뉴 토글에 유용 (x-show, x-transition)
+- **Swiper.js**: 터치 제스처 개선 (선택사항)
+
+---
+
+## 5. 다음 단계
+
+1. **계획 문서 작성** → `02-implementation-plan.md`
+2. **우선순위 결정** → 사이드바 > 헤더 > 테이블
+3. **프로토타입** → 레이아웃 변경 테스트
+4. **단계별 구현** → Phase 1, 2, 3
+
+---
+
+## 6. 파일 구조
+
+```
+docs/projects/mng-mobile-responsive/
+├── 01-analysis.md              # 현재 파일 (분석)
+├── 02-implementation-plan.md   # 구현 계획
+├── 03-sidebar-mobile.md        # 사이드바 개선 상세
+├── 04-header-responsive.md     # 헤더 반응형 상세
+├── 05-table-swipe.md           # 테이블 스와이프 상세
+└── 06-excluded-menus.md        # 모바일 제외 메뉴 목록
+```
--- a/projects/mng-mobile-responsive/02-implementation-plan.md
+++ b/projects/mng-mobile-responsive/02-implementation-plan.md
@@ -0,0 +1,350 @@
+# MNG 모바일 반응형 구현 계획
+
+> 작성일: 2025-12-19
+> 최종 수정: 2025-12-19
+> 상태: 진행 중 (Phase 1 완료)
+
+## 1. 구현 전략
+
+### 1.1 기본 방침
+- **Mobile-First 아님**: 기존 데스크톱 레이아웃 유지하며 모바일 대응 추가
+- **점진적 개선**: 핵심 레이아웃부터 단계별 적용
+- **기존 코드 최소 변경**: 새로운 반응형 클래스 추가 방식
+- **테이블 스와이프**: 카드형 변환 없이 수평 스크롤 개선
+
+### 1.2 Breakpoint 전략
+```
+< 640px (sm 미만):   모바일 - 사이드바 숨김, 햄버거 메뉴
+640px - 1024px:      태블릿 - 접힌 사이드바 또는 오버레이
+1024px+ (lg):        데스크톱 - 전체 레이아웃 (현재 상태)
+```
+
+---
+
+## 2. Phase 구성
+
+### Phase 1: 핵심 레이아웃 (필수) ✅ 완료
+**목표**: 모바일에서 기본 사용 가능하게
+**완료일**: 2025-12-19
+**커밋**: `093e98b`
+
+| 항목 | 작업 내용 | 파일 | 상태 |
+|------|----------|------|------|
+| 1-1 | 사이드바 모바일 오버레이 | `sidebar.blade.php` | ✅ |
+| 1-2 | 햄버거 메뉴 버튼 추가 | `header.blade.php` | ✅ |
+| 1-3 | 레이아웃 반응형 조정 | `app.blade.php` | ✅ |
+| 1-4 | 모바일 오버레이 백드롭 | `app.blade.php` | ✅ |
+
+**구현 내용**:
+- 모바일 사이드바 슬라이드 인/아웃 애니메이션
+- 햄버거 버튼 + 모바일 로고 추가
+- 반투명 백드롭 오버레이
+- ESC 키 및 메뉴 클릭 시 자동 닫힘
+
+### Phase 2: 헤더 최적화 ✅ 완료
+**목표**: 헤더 요소들의 모바일 배치
+**완료일**: 2025-12-19
+
+| 항목 | 작업 내용 | 파일 | 상태 |
+|------|----------|------|------|
+| 2-1 | 사이드바에 모바일 테넌트 셀렉터 | `sidebar.blade.php` | ✅ |
+| 2-2 | 헤더에 모바일 테넌트 뱃지 | `header.blade.php` | ✅ |
+| 2-3 | 사용자 메뉴 모바일 최적화 | `header.blade.php` | ✅ |
+
+**구현 내용**:
+- 사이드바 상단에 모바일 전용 테넌트 드롭다운 추가 (lg:hidden)
+- 헤더 로고 옆에 현재 테넌트 뱃지 표시 (클릭 시 사이드바 열림)
+- 사용자 메뉴 chevron 아이콘 모바일에서 숨김, 패딩 축소
+
+### Phase 3: 테이블 스와이프
+**목표**: 모든 테이블에 스와이프 기능 적용
+
+| 항목 | 작업 내용 | 대상 파일 |
+|------|----------|----------|
+| 3-1 | 테이블 래퍼 컴포넌트 생성 | `components/table-wrapper.blade.php` |
+| 3-2 | users 테이블 적용 | `users/partials/table.blade.php` |
+| 3-3 | tenants 테이블 적용 | `tenants/partials/table.blade.php` |
+| 3-4 | 기타 테이블 적용 | 각 모듈 테이블 |
+| 3-5 | 스와이프 힌트 UI | 공통 컴포넌트 |
+
+**예상 작업량**: 중간~높음 (테이블 수에 따라)
+**의존성**: 없음 (독립적으로 진행 가능)
+
+### Phase 4: 폼/필터 반응형
+**목표**: 필터 영역과 버튼 그룹 모바일 최적화
+
+| 항목 | 작업 내용 | 적용 범위 |
+|------|----------|----------|
+| 4-1 | 필터 영역 flex-wrap | 각 index 페이지 |
+| 4-2 | 버튼 그룹 스택 배치 | 각 페이지 헤더 |
+| 4-3 | 모바일 필터 접기/펼치기 | 선택적 적용 |
+
+**예상 작업량**: 낮음
+**의존성**: 없음
+
+### Phase 5: 제외 메뉴 처리
+**목표**: 모바일에서 어려운 메뉴 안내/제한
+
+| 항목 | 작업 내용 |
+|------|----------|
+| 5-1 | 데스크톱 전용 배너 컴포넌트 |
+| 5-2 | 권한 매트릭스 페이지 적용 |
+| 5-3 | Flow Tester 페이지 적용 |
+| 5-4 | R&D Labs 영역 처리 |
+
+**예상 작업량**: 낮음
+**의존성**: 없음
+
+---
+
+## 3. 상세 구현 방안
+
+### 3.1 사이드바 모바일 (Phase 1-1)
+
+**변경 전:**
+```html
+<aside id="sidebar" class="sidebar w-64">
+```
+
+**변경 후:**
+```html
+<!-- 모바일 오버레이 백드롭 -->
+<div id="sidebar-backdrop"
+     class="fixed inset-0 bg-black/50 z-40 lg:hidden hidden"
+     onclick="closeMobileSidebar()">
+</div>
+
+<!-- 사이드바: 모바일에서 fixed + transform -->
+<aside id="sidebar"
+       class="sidebar fixed inset-y-0 left-0 z-50 w-64
+              transform -translate-x-full lg:translate-x-0 lg:static
+              transition-transform duration-300 ease-in-out">
+```
+
+**JavaScript 추가:**
+```javascript
+function openMobileSidebar() {
+    document.getElementById('sidebar').classList.remove('-translate-x-full');
+    document.getElementById('sidebar-backdrop').classList.remove('hidden');
+    document.body.classList.add('overflow-hidden');
+}
+
+function closeMobileSidebar() {
+    document.getElementById('sidebar').classList.add('-translate-x-full');
+    document.getElementById('sidebar-backdrop').classList.add('hidden');
+    document.body.classList.remove('overflow-hidden');
+}
+
+// ESC 키로 닫기
+document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') closeMobileSidebar();
+});
+```
+
+### 3.2 헤더 햄버거 버튼 (Phase 1-2)
+
+```html
+<header class="h-16 flex items-center justify-between px-4 lg:px-6">
+    <div class="flex items-center gap-2 lg:gap-4">
+        <!-- 모바일 햄버거 -->
+        <button onclick="openMobileSidebar()"
+                class="p-2 rounded-lg hover:bg-gray-100 lg:hidden">
+            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                      d="M4 6h16M4 12h16M4 18h16"/>
+            </svg>
+        </button>
+
+        <!-- 모바일 로고 -->
+        <span class="text-xl font-bold lg:hidden">SAM</span>
+
+        <!-- 데스크톱 테넌트 셀렉터 (기존 유지) -->
+        <div class="hidden lg:flex items-center gap-4">
+            ...
+        </div>
+    </div>
+```
+
+### 3.3 테이블 스와이프 래퍼 (Phase 3-1)
+
+**새 컴포넌트: `components/table-swipe.blade.php`**
+```html
+@props(['showHint' => true])
+
+<div class="relative">
+    <!-- 스와이프 가능한 컨테이너 -->
+    <div class="overflow-x-auto -mx-4 sm:mx-0 scrollbar-thin">
+        <div class="inline-block min-w-full align-middle px-4 sm:px-0">
+            {{ $slot }}
+        </div>
+    </div>
+
+    <!-- 스와이프 힌트 (모바일에서만) -->
+    @if($showHint)
+    <div class="sm:hidden flex items-center justify-center gap-2 mt-2 text-xs text-gray-400">
+        <svg class="w-4 h-4 animate-bounce-x" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16l-4-4m0 0l4-4m-4 4h18"/>
+        </svg>
+        <span>좌우로 스와이프</span>
+        <svg class="w-4 h-4 animate-bounce-x" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
+        </svg>
+    </div>
+    @endif
+</div>
+
+<style>
+    @keyframes bounce-x {
+        0%, 100% { transform: translateX(0); }
+        50% { transform: translateX(3px); }
+    }
+    .animate-bounce-x {
+        animation: bounce-x 1s ease-in-out infinite;
+    }
+</style>
+```
+
+**적용 예시:**
+```html
+<!-- 변경 전 -->
+<div class="bg-white rounded-lg shadow-sm overflow-hidden">
+    <table class="w-full">...</table>
+</div>
+
+<!-- 변경 후 -->
+<div class="bg-white rounded-lg shadow-sm overflow-hidden">
+    <x-table-swipe>
+        <table class="min-w-full">...</table>
+    </x-table-swipe>
+</div>
+```
+
+### 3.4 데스크톱 전용 배너 (Phase 5-1)
+
+**새 컴포넌트: `components/desktop-only-banner.blade.php`**
+```html
+<div class="lg:hidden bg-amber-50 border border-amber-200 rounded-lg p-4 mb-4">
+    <div class="flex items-center gap-3">
+        <svg class="w-6 h-6 text-amber-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                  d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
+        </svg>
+        <div>
+            <p class="font-medium text-amber-800">데스크톱 환경 권장</p>
+            <p class="text-sm text-amber-600">이 기능은 넓은 화면에서 더 잘 동작합니다.</p>
+        </div>
+    </div>
+</div>
+```
+
+---
+
+## 4. CSS 추가 사항
+
+### 4.1 tailwind.config.js 수정 (선택)
+```javascript
+module.exports = {
+  theme: {
+    extend: {
+      // 필요시 추가 breakpoint
+      screens: {
+        'xs': '375px',  // 소형 모바일
+      },
+    },
+  },
+  plugins: [
+    require('@tailwindcss/forms'),
+  ],
+}
+```
+
+### 4.2 app.css 추가
+```css
+/* 스크롤바 스타일링 (선택) */
+.scrollbar-thin::-webkit-scrollbar {
+    height: 4px;
+}
+.scrollbar-thin::-webkit-scrollbar-thumb {
+    background-color: #d1d5db;
+    border-radius: 2px;
+}
+.scrollbar-thin::-webkit-scrollbar-track {
+    background-color: #f3f4f6;
+}
+
+/* 모바일 사이드바 오버레이 */
+.sidebar-mobile-open {
+    transform: translateX(0) !important;
+}
+
+/* 터치 스크롤 최적화 */
+.overflow-x-auto {
+    -webkit-overflow-scrolling: touch;
+    scroll-snap-type: x proximity;
+}
+```
+
+---
+
+## 5. 테스트 체크리스트
+
+### 5.1 디바이스별 테스트
+- [ ] iPhone SE (375px)
+- [ ] iPhone 14 (390px)
+- [ ] iPhone 14 Pro Max (430px)
+- [ ] iPad Mini (768px)
+- [ ] iPad Pro (1024px)
+- [ ] 데스크톱 (1280px+)
+
+### 5.2 기능별 테스트
+- [ ] 사이드바 열기/닫기
+- [ ] 햄버거 메뉴 동작
+- [ ] 테이블 스와이프
+- [ ] 테넌트 선택
+- [ ] 사용자 메뉴 드롭다운
+- [ ] 폼 입력
+- [ ] 필터 동작
+
+### 5.3 성능 테스트
+- [ ] 초기 로딩 속도
+- [ ] 스크롤 부드러움
+- [ ] 애니메이션 프레임 드랍
+
+---
+
+## 6. 롤백 계획
+
+각 Phase는 독립적으로 롤백 가능하도록 설계:
+- Git 브랜치: `feature/mng-mobile-responsive`
+- 각 Phase 완료 시 태그: `v-mobile-phase-1`, `v-mobile-phase-2` 등
+- 문제 발생 시 해당 Phase만 되돌리기
+
+---
+
+## 7. 추가 고려사항
+
+### 7.1 Alpine.js 도입 검토
+현재 vanilla JS로 구현 중이지만, Alpine.js 도입 시:
+- 더 선언적인 코드
+- x-show, x-transition 활용
+- 기존 HTMX와 호환
+
+**결정 필요**: Alpine.js 추가 vs vanilla JS 유지
+
+### 7.2 PWA 고려
+모바일 경험 개선을 위해 PWA 기능 추가 검토:
+- manifest.json
+- 서비스 워커
+- 오프라인 기본 페이지
+
+---
+
+## 8. 진행 현황
+
+| Phase | 상태 | 완료일 |
+|-------|------|--------|
+| Phase 1 | ✅ 완료 | 2025-12-19 |
+| Phase 2 | ✅ 완료 | 2025-12-19 |
+| Phase 3 | ⏳ 대기 | - |
+| Phase 4 | ⏳ 대기 | - |
+| Phase 5 | ⏳ 대기 | - |
--- a/projects/mng-mobile-responsive/06-excluded-menus.md
+++ b/projects/mng-mobile-responsive/06-excluded-menus.md
@@ -0,0 +1,188 @@
+# 모바일 제외/주의 메뉴 목록
+
+> 작성일: 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 오프라인 지원**: 모바일 사용 빈도에 따라 검토