# 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        # 모바일 제외 메뉴 목록
```