hskwon
3721cfdc4b
- 01-analysis.md: 현재 상태 분석 - 02-implementation-plan.md: 5단계 구현 계획 - 06-excluded-menus.md: 모바일 제외 메뉴 목록 - Phase 1, 2 완료 상태 반영
251 lines
8.2 KiB
Markdown
251 lines
8.2 KiB
Markdown
# 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 # 모바일 제외 메뉴 목록
|
|
``` |