diff --git a/projects/mng-mobile-responsive/01-analysis.md b/projects/mng-mobile-responsive/01-analysis.md new file mode 100644 index 0000000..a48d668 --- /dev/null +++ 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 +
+ @include('partials.sidebar') +
+ @include('partials.header') +
+ @yield('content') +
+
+
+``` + +**문제:** +- 사이드바가 모바일에서도 w-64(256px) 차지 +- 콘텐츠 영역이 매우 좁아짐 +- 모바일/태블릿 분기 없음 + +**개선 방향:** +```html + +
+ +
+ + + + +
+
+ + +
+
...
+
+
+``` + +### 2.2 사이드바 (sidebar.blade.php) + +**현재 기능:** +- 데스크톱 토글 (w-64 ↔ w-16) +- localStorage 상태 저장 +- 접힌 상태에서 hover 툴팁 +- R&D Labs 플라이아웃 메뉴 + +**모바일 미지원 사항:** +- 햄버거 메뉴 버튼 없음 +- 오버레이/슬라이드 인 애니메이션 없음 +- 외부 클릭으로 닫기 없음 +- 스와이프 제스처 없음 + +**개선 방향:** +``` +데스크톱 (lg+): [사이드바 | 콘텐츠] 또는 [접힌바 | 콘텐츠] +태블릿 (md-lg): [접힌 사이드바 | 콘텐츠] +모바일 (< md): [콘텐츠] + 햄버거 클릭 → 오버레이 사이드바 +``` + +### 2.3 헤더 (header.blade.php) + +**현재 구조:** +```html +
+ +
+ + + 현재 테넌트 뱃지 +
+ + +
+ +
사용자 메뉴
+
+
+``` + +**문제:** +- 테넌트 셀렉터가 min-w-[200px]로 고정 +- 작은 화면에서 요소들이 겹침 +- 모바일에서 햄버거 버튼 들어갈 공간 없음 + +**개선 방향:** +```html +
+ +
+ + SAM + + + +
+ + +
+ +
...
+ +
사용자
+
+
+``` + +### 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 + +
+
+ + +
+
+
+ + +
+ ← 좌우로 스와이프하여 더 보기 → +
+``` + +--- + +## 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 # 모바일 제외 메뉴 목록 +``` \ No newline at end of file diff --git a/projects/mng-mobile-responsive/02-implementation-plan.md b/projects/mng-mobile-responsive/02-implementation-plan.md new file mode 100644 index 0000000..f70566d --- /dev/null +++ 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 +