SamProject/sam-docs
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
9c8809c43a37a28b8694a8d55d5c9954ac68725a
sam-docs/projects/mng-mobile-responsive/01-analysis.md
hskwon 3721cfdc4b 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

8.2 KiB
Raw Blame History

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)

현재 구조:

<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) 차지
  • 콘텐츠 영역이 매우 좁아짐
  • 모바일/태블릿 분기 없음

개선 방향:

<!-- 제안: 모바일에서 사이드바 오버레이 -->
<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)

현재 구조:

<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]로 고정
  • 작은 화면에서 요소들이 겹침
  • 모바일에서 햄버거 버튼 들어갈 공간 없음

개선 방향:

<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 + 터치 스크롤이 핵심

개선 방향:

<!-- 스와이프 테이블 래퍼 -->
<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        # 모바일 제외 메뉴 목록