XE 메뉴프로(MenuPro) 모듈 : 라이믹스 사이트맵 관리의 새로운 표준

# MenuPro: Rhymix 사이트맵 관리의 새로운 표준



## TL;DR

- 🚀 메뉴 100개를 10분 만에 재배치 (기존 1시간 → 10분)
- 🎯 드래그 앤 드롭으로 사이트맵 간 자유로운 이동
- ✨ React 기반 현대적인 UI/UX
- 💾 일괄 저장으로 실수 방지
- 🔍 강력한 메뉴 검색 기능

---


<메뉴 아이템 수정부터 권한설정, 디자인설정까지 모두 하나의 화면에서>

## 들어가며: 왜 MenuPro를 만들었나?

Rhymix 관리자라면 누구나 공감할 이 순간:

```
메뉴 하나 옮기기
→ 자동 저장
→ 페이지 새로고침
→ 다시 메뉴 찾기
→ 또 하나 옮기기
→ 자동 저장
→ 페이지 새로고침
→ ...반복...
```

10개의 메뉴를 정리하려면 10번의 새로고침.
100개의 메뉴를 재구성하려면? 상상만 해도 지칩니다.

**"더 나은 방법이 있지 않을까?"**

이 질문에서 MenuPro가 탄생했습니다.

---

<사이트맵 메뉴별로 디자인 설정을 쉽게 할 수 있다>


## MenuPro가 해결한 문제들

### 문제 1: 반복적인 새로고침

**기존 방식**
- 메뉴 하나 이동 → 자동 저장 → 새로고침
- 메뉴 100개 정리 = 새로고침 100번
- 소요 시간: 약 1시간

**MenuPro 방식**
- 메뉴 100개를 자유롭게 드래그 앤 드롭
- 모두 정리한 후 "저장" 버튼 클릭 1회
- 소요 시간: 약 10분

**생산성 6배 향상!** ⚡

### 문제 2: 복잡한 구조 파악의 어려움

**기존 방식**
```
게시판
 ├ 공지사항
 ├ 자유게시판
 └ FAQ

커뮤니티
 ├ 갤러리
 └ Q&A
```

어떤 메뉴가 어디에 속하는지 한눈에 보기 어려웠습니다.

**MenuPro 방식**

<img src="screenshot_tree_structure.png" alt="트리 구조 스크린샷" />

- 📊 시각적 트리 구조
- 🔽 접기/펼치기로 원하는 뎁스만 보기
- 🎨 계층별 들여쓰기와 연결선
- 🏷️ 메뉴 타입 아이콘 표시

### 문제 3: 사이트맵 간 이동의 번거로움

**기존 방식**
1. 메뉴 A를 사이트맵 1에서 삭제
2. 사이트맵 2로 이동
3. 메뉴 A를 다시 생성
4. 모든 설정을 다시 입력

**MenuPro 방식**
1. 메뉴 A를 드래그
2. 사이트맵 2로 드롭
3. 끝! ✨

모든 설정(권한, 스킨, 레이아웃)이 그대로 유지됩니다.

### 문제 4: 메뉴 찾기의 어려움

사이트가 커질수록 메뉴를 찾기가 점점 어려워집니다.

**MenuPro의 검색 기능**
```
검색어 입력: "공지"
→ "공지사항" 메뉴 하이라이트
→ 해당 사이트맵 자동 펼침
→ 메뉴까지 자동 스크롤
```

- 🔍 메뉴명으로 검색
- 🎯 mid(모듈 ID)로 검색
- ⚡ 실시간 검색 결과

---

<모든 사이트맵을 접어서 이동 가능한 사이트맵 메뉴>

## MenuPro의 핵심 기능

### 1. 드래그 앤 드롭 시스템

**3가지 드래그 타입 지원**

#### 타입 1: 같은 사이트맵 내 순서 변경
```
[사이트맵 A]
  - 메뉴1
  - 메뉴2  ← 드래그
  - 메뉴3  ← 여기로 드롭

[결과]
  - 메뉴1
  - 메뉴3
  - 메뉴2
```

#### 타입 2: 계층 구조 변경
```
[드래그 전]
- 메뉴1
- 메뉴2
  └ 메뉴2-1

[메뉴1을 메뉴2 아래로 드래그]

[드래그 후]
- 메뉴2
  ├ 메뉴2-1
  └ 메뉴1  ← 2차 메뉴가 됨
```

#### 타입 3: 사이트맵 간 이동
```
[사이트맵 A]          [사이트맵 B]
- 메뉴1              - 메뉴A
- 메뉴2  ──드래그──→  - 메뉴B
- 메뉴3

[결과]
[사이트맵 A]          [사이트맵 B]
- 메뉴1              - 메뉴A
- 메뉴3              - 메뉴B
                     - 메뉴2 ← 이동됨
```

**하위 메뉴 자동 이동**
- 메뉴2를 이동하면 메뉴2의 모든 하위 메뉴도 함께 이동
- 계층 구조 완벽 유지

<부모를 잃어버린 사이트맵 메뉴 찾기>

### 2. 일괄 저장 시스템

**변경 내역 실시간 추적**

```
[변경 내역 패널]
✓ 메뉴1: 순서 변경 (3 → 5)
✓ 메뉴2: 사이트맵 이동 (A → B)
✓ 메뉴3: 계층 변경 (1차 → 2차)
✓ 사이트맵 A: 순서 변경

[저장] [취소] [되돌리기]
```

- 📝 모든 변경사항 리스트로 표시
- ↩️ 저장 전 언제든 되돌리기
- 💾 한 번의 클릭으로 모두 적용
- ❌ 취소 버튼으로 전체 복원

**실수 방지 기능**
- 저장 전 확인 대화상자
- 중요한 변경(삭제 등)은 2단계 확인
- 변경 내역 미리보기

### 3. 사이트맵 관리

**사이트맵 순서 변경**
```
[드래그 앤 드롭으로 순서 변경]

메인 메뉴      서브 메뉴
   ↓ ↑          ↓ ↑
푸터 메뉴      모바일 메뉴
```

- 🖱️ 사이트맵 헤더 드래그로 순서 변경
- 💾 변경 즉시 저장
- 🔄 언제든 순서 재배치

**사이트맵 생성/편집/삭제**
```
[사이트맵 생성]
이름: 새 사이트맵
설명: (선택사항)
[생성]

[사이트맵 편집]
이름 클릭 → 인라인 수정 → Enter
```

- ➕ 빠른 사이트맵 생성
- ✏️ 이름 클릭으로 즉시 수정
- 🗑️ 삭제 시 하위 메뉴 처리 선택

### 4. 메뉴 검색 기능

**강력한 검색 옵션**

```
[검색창]
🔍 메뉴 찾기...

검색 대상:
☑ 메뉴명
☑ mid(모듈 ID)
☑ 설명

검색 결과:
📌 공지사항 (mid: notice)
📌 공지사항 > 중요공지 (mid: notice_important)
```

**검색 결과 처리**
- 🎯 검색된 메뉴 하이라이트
- 📂 해당 사이트맵 자동 펼침
- 📜 메뉴 위치로 자동 스크롤
- 🔢 검색 결과 개수 표시

### 5. 메뉴 아이템 관리

**메뉴 생성**
```
[메뉴 추가]

메뉴 타입 선택:
○ 위젯 페이지
○ 문서 페이지
○ 게시판
○ 외부 페이지
● 바로가기

[다음 단계로]
```

**지원하는 메뉴 타입**
- 📄 위젯 페이지
- 📝 문서 페이지
- 📋 게시판
- 🔗 외부 페이지
- ⚡ 바로가기

**메뉴 편집**
```
[메뉴 편집 사이드바]

기본 정보
├ 메뉴명: 공지사항
├ mid: notice
└ 설명: 중요한 공지를 올리는...

디자인
├ 레이아웃: el_basic
├ PC 스킨: board_default
└ 모바일 스킨: mobile_default

권한
├ 목록 권한: 전체
├ 글쓰기 권한: 회원
└ 댓글 권한: 회원

고급 설정
├ 새 창에서 열기: □
└ 확장 상태: □
```

**메뉴 삭제**
```
[메뉴 삭제 확인]

"공지사항" 메뉴를 삭제하시겠습니까?

연결된 모듈도 함께 삭제하시겠습니까?
○ 메뉴만 삭제 (모듈은 유지)
● 모듈도 함께 삭제 (복구 불가)

[취소] [삭제]
```

---

<실수로 연결이 끊어진 메뉴도 자동으로 제 자리를 찾아줍니다>

## 기술 스택: 현대적인 아키텍처

### 프론트엔드

**React 18 + TypeScript**
```typescript
// 타입 안정성과 최신 React 기능
interface MenuItem {
  menu_item_srl: number;
  name: string;
  url: string;
  parent_srl: number;
  // ...
}

const MenuGrid: React.FC<MenuGridProps> = ({ menus, onSave }) => {
  // Hooks 기반 상태 관리
  const [selectedMenu, setSelectedMenu] = useState<MenuItem | null>(null);
  // ...
};
```

**주요 라이브러리**
- **react-complex-tree**: 트리 구조 및 드래그 앤 드롭
- **@dnd-kit**: 사이트맵 순서 변경
- **shadcn/ui**: 세련된 UI 컴포넌트
- **Webpack 5**: 최적화된 번들링

**왜 React인가?**
- ⚡ 빠른 렌더링 (Virtual DOM)
- 🔄 효율적인 상태 관리
- 🧩 컴포넌트 재사용
- 📦 풍부한 생태계

### 백엔드

**Rhymix 2.1.8+ 네임스페이스 구조**

```php
namespace Rhymix\Modules\Menupro\Controllers;

class Admin extends Base
{
    public function procMenuproAdminUpdateMenuItemsOrder()
    {
        // PSR-4 자동로드
        // 명확한 네임스페이스
        // 현대적인 PHP 코드
    }
}
```

**MVC 패턴**
```
modules/menupro/
├── controllers/        # 요청 처리
│   ├── Admin.php      # 관리자 액션
│   ├── Index.php      # API 엔드포인트
│   └── Install.php    # 설치/업데이트
├── models/            # 비즈니스 로직
│   └── Menu.php       # 메뉴 데이터 관리
├── views/             # 화면 템플릿
│   └── admin/
│       └── config.blade.php
└── conf/
    ├── info.xml       # 모듈 정보
    └── module.xml     # 액션 정의
```

**Blade v2 템플릿**
```blade
@version(2)

<div class="menupro-container">
    @if($menus)
        @foreach($menus as $menu)
            <div class="menu-item">
                {{ $menu->title }}
            </div>
        @endforeach
    @else
        <p>등록된 사이트맵이 없습니다.</p>
    @endif
</div>
```

---

<다중 선택 이동 기능>

## 실전 활용 시나리오

### 시나리오 1: 대형 포털 사이트 메뉴 재구성

**상황**
- 100개의 메뉴가 있는 커뮤니티 사이트
- 카테고리별로 메뉴 그룹 재구성 필요
- 3개 사이트맵 → 5개 사이트맵으로 분리

**기존 방식 (약 2시간)**
```
1. 새 사이트맵 2개 생성 (10분)
2. 메뉴 하나씩 이동 (100번 × 1분 = 100분)
3. 순서 정리 (30분)
4. 테스트 및 수정 (20분)
```

**MenuPro 방식 (약 20분)**
```
1. 새 사이트맵 2개 생성 (2분)
2. 메뉴 드래그 앤 드롭으로 일괄 이동 (10분)
3. 순서 드래그로 정리 (5분)
4. 한 번에 저장 (1분)
5. 테스트 (2분)
```

**생산성 6배 향상!**

### 시나리오 2: 모바일/PC 메뉴 분리

**상황**
- 기존: PC와 모바일이 같은 메뉴 사용
- 목표: 모바일 전용 간소화 메뉴 구성

**MenuPro로 쉽게 해결**
```
1. "모바일 메뉴" 사이트맵 생성
2. PC 메뉴에서 주요 메뉴만 드래그 앤 드롭으로 복사
3. 불필요한 하위 메뉴 정리
4. 모바일 레이아웃에 "모바일 메뉴" 사이트맵 연결
```

**소요 시간: 5분**

### 시나리오 3: 시즌별 메뉴 교체

**상황**
- 이벤트 기간에만 보이는 메뉴
- 평상시에는 숨김 처리

**MenuPro 활용**
```
[평상시]
메인 메뉴
 ├ 홈
 ├ 소개
 └ 게시판

[이벤트 사이트맵] ← 접어두기
 ├ 이벤트 안내
 ├ 참여 방법
 └ 당첨자 발표

[이벤트 시작]
→ 이벤트 메뉴를 메인 메뉴로 드래그
→ 한 번에 저장
→ 완료!
```

---

## 설치 및 시작하기

### 시스템 요구사항

**필수**
- Rhymix 2.1.8 이상
- PHP 7.4 이상
- 모던 브라우저 (Chrome, Firefox, Safari, Edge)

**권장**
- PHP 8.0 이상
- SSD 스토리지
- 메모리 512MB 이상

### 설치 방법

**1. 모듈 다운로드**
```bash
# Git으로 다운로드
git clone https://github.com/eond/menupro.git modules/menupro

# 또는 ZIP 파일 다운로드 후 압축 해제
```

**2. 관리자 페이지 접속**
```
http://yoursite.com/index.php?module=admin&act=dispMenuproAdminConfig
```

**3. 기본 사용법**
```
1. 기존 사이트맵이 자동으로 로드됨
2. 드래그 앤 드롭으로 메뉴 정리
3. "저장" 버튼 클릭
4. 완료! 🎉
```

### 빌드 (개발자용)

```bash
# 의존성 설치
npm install

# 개발 모드 (Hot Reload)
npm run dev:menupro

# 프로덕션 빌드
npm run build:menupro
```

---

## 버전 히스토리

### v1.0.7 (2025-11-28) - 최신
- ✨ 위젯페이지/문서페이지 mid 필드 표시 및 수정 기능
- 🐛 프론트엔드 모듈 타입 인식 개선

### v1.0.6 (2025-11-28)
- ✨ getMenuDetail에서 enrichMenuItem 호출 추가
- 🐛 MenuGrid에 module_type 전달

### v1.0.5 (2025-11-28)
- 🐛 외부 페이지(OUTSIDE) 생성 시 "새 창에서 열기" 강제 설정 제거

### v1.0.4 (2025-11-28)
- ✨ 위젯페이지 모듈 타입 인식 개선 (enrichMenuItem 함수 추가)

### v1.0.3 (2025-11-27)
- 🐛 메뉴 아이템 mid 변경 시 실제 모듈 mid도 함께 변경되도록 수정

### v1.0.2 (2025-11-27)
- 🐛 **중요 버그 수정**: 메뉴 이동 시 하위 메뉴가 함께 이동하지 않는 문제 해결
- ✨ updateChildrenMenuSrlRecursive 재귀 함수 추가

### v1.0.1 (2025-11-25)
- 🐛 skin/mskin 파라미터 이름 충돌 문제 해결
- ✨ 스킨 저장 시 is_skin_fix 설정 추가
- ✨ 사이트 기본 스킨 정보 표시

### v1.0.0 (2025-11-14) - 초기 릴리즈
- 🎉 MenuPro 첫 출시
- ✨ React 기반 드래그 앤 드롭
- ✨ 사이트맵 간 메뉴 이동
- ✨ 일괄 저장 시스템
- ✨ 메뉴 검색 기능

---

## 로드맵: 다음 업데이트 계획

### v1.1.0 (예정)
- [ ] 메뉴 복사/붙여넣기 강화
- [ ] 메뉴 템플릿 기능 (자주 쓰는 구조 저장)
- [ ] 메뉴 일괄 편집 기능

### v1.2.0 (예정)
- [ ] 권한 설정 UI 개선
- [ ] 메뉴 아이콘 라이브러리
- [ ] 드래그 앤 드롭 애니메이션 개선

### v2.0.0 (장기)
- [ ] 다중 사이트 지원
- [ ] 메뉴 변경 이력 관리
- [ ] 메뉴 롤백 기능

---

## FAQ

### Q1. 기존 메뉴 데이터가 손실되나요?
**A.** 아니요. MenuPro는 Rhymix 기본 메뉴 테이블을 그대로 사용합니다. 데이터 마이그레이션이 필요 없으며, 언제든 기본 메뉴 관리로 돌아갈 수 있습니다.

### Q2. 기존 메뉴 관리와 함께 사용할 수 있나요?
**A.** 네, 가능합니다. MenuPro와 기본 메뉴 관리를 혼용해도 문제없습니다.

### Q3. 성능은 어떤가요? 메뉴가 많으면 느리지 않나요?
**A.** 메뉴 1000개까지 테스트했으며, 쾌적하게 동작합니다. React의 Virtual DOM과 효율적인 렌더링으로 빠른 성능을 보장합니다.

### Q4. 모바일에서도 사용할 수 있나요?
**A.** 현재는 데스크톱 브라우저 최적화되어 있습니다. 모바일 대응은 v1.1.0에서 추가 예정입니다.

### Q5. 라이선스는 어떻게 되나요?
**A.** 유료 라이선스입니다.

### Q6. 버그를 발견했어요. 어디에 제보하나요?
**A.** GitHub Issues 또는 EOND 포럼(https://eond.com)에 제보해주세요.

---

## 사용자 후기 (테스트 사용자)

> "100개 넘는 메뉴를 관리하는 게 이렇게 쉬울 줄 몰랐습니다. 드래그 앤 드롭 하나로 모든 게 해결되네요."
> — K사 웹마스터

> "사이트맵 간 이동이 정말 편합니다. 기존엔 일일이 복사했는데, 이제 드래그 한 번이면 끝!"
> — 커뮤니티 관리자 L

> "검색 기능이 생각보다 훨씬 유용합니다. 메뉴가 많아도 바로 찾을 수 있어요."
> — 포털 운영자 P

---

## 결론

MenuPro는 단순한 도구가 아닙니다.

**Rhymix 사이트맵 관리의 패러다임을 바꾸는 혁신**입니다.

### MenuPro가 제공하는 가치

✅ **생산성**: 작업 시간 6배 단축
✅ **편의성**: 직관적인 드래그 앤 드롭
✅ **안정성**: 일괄 저장으로 실수 방지
✅ **확장성**: 대규모 사이트도 문제없음
✅ **현대성**: 최신 기술 스택

### 지금 바로 시작하세요

더 이상 번거로운 메뉴 관리로 시간을 낭비하지 마세요.
MenuPro로 10분 만에 끝낼 수 있습니다.

**문의**: eond@eond.com

---

**작성일**: 2025-12-03
**카테고리**: Rhymix, 모듈, 관리도구
**태그**: #MenuPro #Rhymix #사이트맵 #React #드래그앤드롭 #관리도구
**버전**: MenuPro v1.0.7