Rinjae
a92fc85730
- PortalMenuCacheClient 클래스 작성 - JSP 화면 portalMenuMan.jsp 추가 및 렌더링 로직 구현 - PortalMenuManController 클래스 작성
551 lines
29 KiB
Plaintext
551 lines
29 KiB
Plaintext
<%@ page language="java" contentType="text/html; charset=utf-8" %>
|
|
<%@ page import="java.io.*" %>
|
|
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
|
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>
|
|
<%
|
|
response.setHeader("Pragma", "No-cache");
|
|
response.setHeader("Cache-Control", "no-cache");
|
|
response.setHeader("Expires", "0");
|
|
%>
|
|
<html>
|
|
<head>
|
|
<title></title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
<jsp:include page="/jsp/common/include/css.jsp"/>
|
|
<jsp:include page="/jsp/common/include/script.jsp"/>
|
|
<jsp:include page="/jsp/common/include/portal.jsp"/>
|
|
|
|
<style>
|
|
/* ── 스윔레인 보드 ── */
|
|
.menu-board { display: flex; gap: 12px; align-items: flex-start; }
|
|
.menu-lane-strip { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px; flex: 1 1 auto; }
|
|
.menu-lane { background: #f1f3f5; border-radius: 10px; min-width: 230px; max-width: 230px; flex: 0 0 230px; }
|
|
.menu-lane.unplaced { background: #fff4e6; border: 1px dashed #fd7e14; }
|
|
.lane-header { display: flex; align-items: center; gap: 6px; padding: 10px 12px;
|
|
border-bottom: 1px solid #dee2e6; cursor: grab; }
|
|
.menu-lane.unplaced .lane-header { cursor: default; }
|
|
.lane-title { font-weight: 700; font-size: 14px; flex: 1 1 auto; overflow: hidden;
|
|
text-overflow: ellipsis; white-space: nowrap; }
|
|
.lane-body { list-style: none; margin: 0; padding: 8px; min-height: 60px; }
|
|
.menu-card { background: #fff; border: 1px solid #dee2e6; border-radius: 8px;
|
|
padding: 8px 10px; margin-bottom: 8px; cursor: grab;
|
|
box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
|
|
.menu-card.hidden-item, .menu-lane.hidden-item > .lane-header { opacity: 0.45; }
|
|
.menu-card .card-name { font-size: 13px; font-weight: 600; }
|
|
.menu-card .card-id { font-size: 11px; color: #868e96; }
|
|
.menu-card .card-path { font-size: 11px; color: #495057; word-break: break-all; }
|
|
.card-actions, .lane-actions { display: flex; gap: 4px; }
|
|
.icon-btn { border: none; background: transparent; padding: 1px 3px; cursor: pointer;
|
|
font-size: 14px; color: #495057; }
|
|
.icon-btn:hover { color: #0d6efd; }
|
|
.icon-btn.danger:hover { color: #dc3545; }
|
|
.badge-src { font-size: 10px; }
|
|
.role-check-group { display: flex; flex-wrap: wrap; gap: 4px 12px; }
|
|
.role-check-group .form-check { min-width: 45%; }
|
|
.dflt-hint { font-size: 11px; color: #868e96; }
|
|
.board-toolbar { display: flex; gap: 6px; margin-bottom: 10px; align-items: center; }
|
|
.board-toolbar .spacer { flex: 1 1 auto; }
|
|
.sortable-placeholder { border: 2px dashed #adb5bd; border-radius: 8px; height: 48px;
|
|
margin-bottom: 8px; background: #e9ecef; }
|
|
.lane-placeholder { border: 2px dashed #adb5bd; border-radius: 10px; min-width: 230px; }
|
|
</style>
|
|
|
|
<script language="javascript">
|
|
// AuthorizeInterceptor 는 serviceType 을 "요청 파라미터"에서 읽으므로
|
|
// 모든 .json 호출 URL 에 serviceType 을 부착한다 (누락 시 권한 조회 실패 → Access denied)
|
|
var url = urlAddServiceType('<c:url value="/onl/apim/portalmenu/portalMenuMan.json" />');
|
|
|
|
// 화면 상태 (저장 버튼 클릭 시에만 서버 반영 — 드래그/토글은 클라이언트 상태만 변경)
|
|
var state = { itemsById: {}, lanes: [], unplaced: [], roles: [] };
|
|
var dirty = false;
|
|
|
|
function escapeHtml(s) {
|
|
return String(s == null ? '' : s)
|
|
.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')
|
|
.replace(/"/g, '"').replace(/'/g, ''');
|
|
}
|
|
|
|
function loadAll(afterFn) {
|
|
$.post(url, { cmd: 'LIST_ALL' }, function (data) {
|
|
buildState(data);
|
|
render();
|
|
dirty = false;
|
|
if (afterFn) afterFn();
|
|
}, 'json').fail(ajaxFail);
|
|
}
|
|
|
|
function buildState(data) {
|
|
state.itemsById = {};
|
|
state.roles = data.roles || [];
|
|
(data.items || []).forEach(function (it) { state.itemsById[it.menuId] = it; });
|
|
|
|
var placedTop = [], childrenByParent = {}, unplaced = [];
|
|
(data.items || []).forEach(function (it) {
|
|
if (!it.placed) { unplaced.push(it.menuId); return; }
|
|
if (!it.parentId) {
|
|
placedTop.push(it);
|
|
} else {
|
|
(childrenByParent[it.parentId] = childrenByParent[it.parentId] || []).push(it);
|
|
}
|
|
});
|
|
placedTop.sort(function (a, b) { return (a.sortOrder || 0) - (b.sortOrder || 0); });
|
|
|
|
state.lanes = placedTop.map(function (top) {
|
|
var kids = (childrenByParent[top.menuId] || [])
|
|
.sort(function (a, b) { return (a.sortOrder || 0) - (b.sortOrder || 0); })
|
|
.map(function (c) { return { menuId: c.menuId, visibleYn: c.visibleYn || 'Y' }; });
|
|
delete childrenByParent[top.menuId];
|
|
return { menuId: top.menuId, visibleYn: top.visibleYn || 'Y', children: kids };
|
|
});
|
|
// 부모가 미배치/부재인 고아 배치는 미배치로 강등
|
|
Object.keys(childrenByParent).forEach(function (pid) {
|
|
childrenByParent[pid].forEach(function (c) { unplaced.push(c.menuId); });
|
|
});
|
|
state.unplaced = unplaced;
|
|
}
|
|
|
|
// ── 렌더 ──
|
|
function cardHtml(menuId, visibleYn, inLane) {
|
|
var it = state.itemsById[menuId];
|
|
if (!it) return '';
|
|
var hidden = visibleYn === 'N';
|
|
var srcBadge = it.sourceType === 'PORTAL'
|
|
? '<span class="badge text-bg-secondary badge-src">기본</span>'
|
|
: '<span class="badge text-bg-warning badge-src">커스텀</span>';
|
|
var grpBadge = it.groupYn === 'Y' ? ' <span class="badge text-bg-info badge-src">그룹</span>' : '';
|
|
var placeBtn = (!inLane && it.groupYn === 'Y')
|
|
? '<button type="button" class="icon-btn" title="최상위 레인으로 배치" onclick="placeAsLane(\'' + menuId + '\')"><i class="bi bi-box-arrow-in-up"></i></button>'
|
|
: '';
|
|
var eyeBtn = inLane
|
|
? '<button type="button" class="icon-btn" title="노출/숨김" onclick="toggleVisible(\'' + menuId + '\')"><i class="bi ' + (hidden ? 'bi-eye-slash' : 'bi-eye') + '"></i></button>'
|
|
: '';
|
|
return '<li class="menu-card' + (hidden ? ' hidden-item' : '') + '" data-menu-id="' + escapeHtml(menuId) + '">'
|
|
+ '<div class="d-flex align-items-start">'
|
|
+ '<div class="flex-grow-1">'
|
|
+ '<div class="card-name">' + escapeHtml(it.menuName) + ' ' + srcBadge + grpBadge + '</div>'
|
|
+ '<div class="card-id">' + escapeHtml(it.menuId) + '</div>'
|
|
+ (it.menuPath ? '<div class="card-path">' + escapeHtml(it.menuPath) + '</div>' : '')
|
|
+ '</div>'
|
|
+ '<div class="card-actions">'
|
|
+ placeBtn + eyeBtn
|
|
+ '<button type="button" class="icon-btn" title="수정" onclick="openModal(\'' + menuId + '\')"><i class="bi bi-pencil"></i></button>'
|
|
+ '<button type="button" class="icon-btn danger" level="W" title="' + (it.sourceType === 'PORTAL' ? '미배치로 이동' : '삭제') + '" onclick="minusItem(\'' + menuId + '\')"><i class="bi bi-dash-circle"></i></button>'
|
|
+ '</div></div></li>';
|
|
}
|
|
|
|
function laneHtml(lane) {
|
|
var it = state.itemsById[lane.menuId];
|
|
if (!it) return '';
|
|
var hidden = lane.visibleYn === 'N';
|
|
var sectionBadge = it.menuSection === 'MYPAGE'
|
|
? '<span class="badge text-bg-primary badge-src">마이페이지</span>'
|
|
: '<span class="badge text-bg-success badge-src">GNB</span>';
|
|
var srcBadge = it.sourceType === 'PORTAL' ? '' : ' <span class="badge text-bg-warning badge-src">커스텀</span>';
|
|
var cards = lane.children.map(function (c) { return cardHtml(c.menuId, c.visibleYn, true); }).join('');
|
|
return '<div class="menu-lane' + (hidden ? ' hidden-item' : '') + '" data-menu-id="' + escapeHtml(lane.menuId) + '">'
|
|
+ '<div class="lane-header lane-drag-handle">'
|
|
+ '<span class="lane-title">' + escapeHtml(it.menuName) + '</span>'
|
|
+ sectionBadge + srcBadge
|
|
+ '<div class="lane-actions">'
|
|
+ '<button type="button" class="icon-btn" title="노출/숨김" onclick="toggleVisible(\'' + lane.menuId + '\')"><i class="bi ' + (hidden ? 'bi-eye-slash' : 'bi-eye') + '"></i></button>'
|
|
+ '<button type="button" class="icon-btn" title="수정" onclick="openModal(\'' + lane.menuId + '\')"><i class="bi bi-pencil"></i></button>'
|
|
+ '<button type="button" class="icon-btn danger" level="W" title="레인 미배치" onclick="unplaceLane(\'' + lane.menuId + '\')"><i class="bi bi-dash-circle"></i></button>'
|
|
+ '</div></div>'
|
|
+ '<ul class="lane-body" data-lane-id="' + escapeHtml(lane.menuId) + '">' + cards + '</ul>'
|
|
+ '</div>';
|
|
}
|
|
|
|
function render() {
|
|
var strip = state.lanes.map(laneHtml).join('');
|
|
$('#laneStrip').html(strip);
|
|
$('#unplacedBody').html(state.unplaced.map(function (id) { return cardHtml(id, 'Y', false); }).join(''));
|
|
initSortables();
|
|
buttonControl();
|
|
}
|
|
|
|
function initSortables() {
|
|
$('#laneStrip').sortable({
|
|
items: '.menu-lane',
|
|
handle: '.lane-drag-handle',
|
|
placeholder: 'lane-placeholder',
|
|
tolerance: 'pointer',
|
|
update: function () { syncFromDom(); }
|
|
});
|
|
$('.lane-body, #unplacedBody').sortable({
|
|
connectWith: '.lane-body, #unplacedBody',
|
|
items: '.menu-card',
|
|
placeholder: 'sortable-placeholder',
|
|
tolerance: 'pointer',
|
|
stop: function () { syncFromDom(); }
|
|
});
|
|
}
|
|
|
|
// 드래그 종료 후 DOM 순서 → 상태 동기화 (visible 값은 기존 상태 유지)
|
|
function syncFromDom() {
|
|
var visibleMap = {};
|
|
state.lanes.forEach(function (l) {
|
|
visibleMap[l.menuId] = l.visibleYn;
|
|
l.children.forEach(function (c) { visibleMap[c.menuId] = c.visibleYn; });
|
|
});
|
|
|
|
var lanes = [];
|
|
$('#laneStrip .menu-lane').each(function () {
|
|
var laneId = $(this).data('menu-id');
|
|
var children = [];
|
|
$(this).find('.lane-body .menu-card').each(function () {
|
|
var id = $(this).data('menu-id');
|
|
children.push({ menuId: id, visibleYn: visibleMap[id] || 'Y' });
|
|
});
|
|
lanes.push({ menuId: laneId, visibleYn: visibleMap[laneId] || 'Y', children: children });
|
|
});
|
|
var unplaced = [];
|
|
$('#unplacedBody .menu-card').each(function () { unplaced.push($(this).data('menu-id')); });
|
|
|
|
state.lanes = lanes;
|
|
state.unplaced = unplaced;
|
|
dirty = true;
|
|
render();
|
|
}
|
|
|
|
// ── 카드/레인 조작 ──
|
|
function toggleVisible(menuId) {
|
|
state.lanes.forEach(function (l) {
|
|
if (l.menuId === menuId) l.visibleYn = (l.visibleYn === 'N' ? 'Y' : 'N');
|
|
l.children.forEach(function (c) {
|
|
if (c.menuId === menuId) c.visibleYn = (c.visibleYn === 'N' ? 'Y' : 'N');
|
|
});
|
|
});
|
|
dirty = true;
|
|
render();
|
|
}
|
|
|
|
function placeAsLane(menuId) {
|
|
state.unplaced = state.unplaced.filter(function (id) { return id !== menuId; });
|
|
state.lanes.push({ menuId: menuId, visibleYn: 'Y', children: [] });
|
|
dirty = true;
|
|
render();
|
|
}
|
|
|
|
function minusItem(menuId) {
|
|
var it = state.itemsById[menuId];
|
|
if (!it) return;
|
|
if (it.sourceType === 'PORTAL') {
|
|
removeFromBoard(menuId);
|
|
if (state.unplaced.indexOf(menuId) < 0) state.unplaced.push(menuId);
|
|
dirty = true;
|
|
render();
|
|
} else {
|
|
if (!confirm('커스텀 항목은 미배치 시 삭제됩니다.\n[' + it.menuName + '] 을(를) 삭제하시겠습니까?')) return;
|
|
$.post(url, { cmd: 'DELETE', menuId: menuId }, function () {
|
|
removeFromBoard(menuId);
|
|
state.unplaced = state.unplaced.filter(function (id) { return id !== menuId; });
|
|
delete state.itemsById[menuId];
|
|
dirty = true;
|
|
render();
|
|
}, 'json').fail(ajaxFail);
|
|
}
|
|
}
|
|
|
|
function unplaceLane(laneId) {
|
|
var lane = null;
|
|
state.lanes = state.lanes.filter(function (l) {
|
|
if (l.menuId === laneId) { lane = l; return false; }
|
|
return true;
|
|
});
|
|
if (!lane) return;
|
|
lane.children.forEach(function (c) {
|
|
if (state.unplaced.indexOf(c.menuId) < 0) state.unplaced.push(c.menuId);
|
|
});
|
|
var it = state.itemsById[laneId];
|
|
if (it && it.sourceType !== 'PORTAL') {
|
|
if (confirm('커스텀 항목은 미배치 시 삭제됩니다.\n[' + it.menuName + '] 항목을 삭제하시겠습니까?')) {
|
|
$.post(url, { cmd: 'DELETE', menuId: laneId }, function () {
|
|
delete state.itemsById[laneId];
|
|
render();
|
|
}, 'json').fail(ajaxFail);
|
|
} else {
|
|
state.unplaced.push(laneId);
|
|
}
|
|
} else {
|
|
if (state.unplaced.indexOf(laneId) < 0) state.unplaced.push(laneId);
|
|
}
|
|
dirty = true;
|
|
render();
|
|
}
|
|
|
|
function removeFromBoard(menuId) {
|
|
state.lanes = state.lanes.filter(function (l) { return l.menuId !== menuId; });
|
|
state.lanes.forEach(function (l) {
|
|
l.children = l.children.filter(function (c) { return c.menuId !== menuId; });
|
|
});
|
|
}
|
|
|
|
// ── 저장 / 초기화 / 캐시 Reload ──
|
|
function savePlacements() {
|
|
// 미배치 상태의 커스텀 항목은 저장 시 삭제 처리 (스펙: 커스텀은 미배치=삭제)
|
|
var unplacedAdmin = state.unplaced.filter(function (id) {
|
|
var it = state.itemsById[id];
|
|
return it && it.sourceType !== 'PORTAL';
|
|
});
|
|
if (unplacedAdmin.length > 0) {
|
|
var names = unplacedAdmin.map(function (id) { return state.itemsById[id].menuName; }).join(', ');
|
|
if (!confirm('미배치된 커스텀 항목은 저장 시 삭제됩니다: ' + names + '\n계속하시겠습니까?')) return;
|
|
}
|
|
|
|
var rows = [];
|
|
state.lanes.forEach(function (l, i) {
|
|
rows.push({ menuId: l.menuId, parentId: null, sortOrder: (i + 1) * 10, visibleYn: l.visibleYn });
|
|
l.children.forEach(function (c, j) {
|
|
rows.push({ menuId: c.menuId, parentId: l.menuId, sortOrder: (j + 1) * 10, visibleYn: c.visibleYn });
|
|
});
|
|
});
|
|
|
|
var deleteCalls = unplacedAdmin.map(function (id) {
|
|
return $.post(url, { cmd: 'DELETE', menuId: id });
|
|
});
|
|
$.when.apply($, deleteCalls).always(function () {
|
|
$.ajax({
|
|
url: url + '&cmd=TRANSACTION_PLACEMENT',
|
|
type: 'POST',
|
|
contentType: 'application/json; charset=utf-8',
|
|
data: JSON.stringify(rows)
|
|
}).done(function () {
|
|
dirty = false;
|
|
loadAll(function () {
|
|
if (confirm('배치가 저장되었습니다.\n포탈 메뉴 캐시를 즉시 반영(Reload)하시겠습니까?\n(미반영 시 캐시 TTL 후 자동 반영)')) {
|
|
reloadPortalCache();
|
|
}
|
|
});
|
|
}).fail(ajaxFail);
|
|
});
|
|
}
|
|
|
|
function initializeMenus() {
|
|
if (!confirm('메뉴 초기화 시 포탈 기본(menu.yml) 값으로 복원되고\n커스텀 항목은 모두 삭제됩니다. 계속하시겠습니까?')) return;
|
|
$.post(url, { cmd: 'INITIALIZE' }, function () {
|
|
loadAll(function () { alert('메뉴가 초기화되었습니다.'); });
|
|
}, 'json').fail(ajaxFail);
|
|
}
|
|
|
|
function reloadPortalCache() {
|
|
$.post(url, { cmd: 'TRANSACTION_RELOAD' }, function (result) {
|
|
if (result && result.success) {
|
|
alert('포탈 메뉴 캐시 리로드 완료 (항목 ' + result.itemCount + '건, ' + result.reloadedAt + ')');
|
|
} else {
|
|
alert('캐시 리로드 실패: ' + (result ? result.message : '알 수 없는 오류'));
|
|
}
|
|
}, 'json').fail(ajaxFail);
|
|
}
|
|
|
|
function ajaxFail(xhr) {
|
|
var msg = '처리 중 오류가 발생했습니다.';
|
|
try {
|
|
var body = JSON.parse(xhr.responseText);
|
|
if (body.errorMsg) msg = body.errorMsg;
|
|
else if (body.message) msg = body.message;
|
|
} catch (e) { /* ignore */ }
|
|
alert(msg + ' (HTTP ' + xhr.status + ')');
|
|
}
|
|
|
|
// ── 추가/수정 모달 ──
|
|
var menuModal;
|
|
|
|
function roleChecksHtml(namePrefix, checkedCsv) {
|
|
var checked = (checkedCsv || '').split(',').map(function (s) { return s.trim(); }).filter(Boolean);
|
|
var html = '';
|
|
var all = [{ roleCode: 'AUTHENTICATED', roleName: '로그인 사용자', roleType: '-' }].concat(state.roles);
|
|
all.forEach(function (r) {
|
|
var id = namePrefix + '_' + r.roleCode;
|
|
html += '<div class="form-check form-check-sm">'
|
|
+ '<input class="form-check-input" type="checkbox" name="' + namePrefix + '" id="' + id + '" value="' + escapeHtml(r.roleCode) + '"'
|
|
+ (checked.indexOf(r.roleCode) >= 0 ? ' checked' : '') + '>'
|
|
+ '<label class="form-check-label" for="' + id + '" style="font-size:12px;">'
|
|
+ escapeHtml(r.roleName) + ' <span class="text-muted">(' + escapeHtml(r.roleCode) + ')</span></label>'
|
|
+ '</div>';
|
|
});
|
|
return html;
|
|
}
|
|
|
|
function openModal(menuId) {
|
|
var isNew = !menuId;
|
|
var it = isNew ? { sourceType: 'ADMIN', groupYn: 'N', menuSection: 'GNB', newWindowYn: 'N' }
|
|
: state.itemsById[menuId];
|
|
if (!it) return;
|
|
var isPortal = it.sourceType === 'PORTAL';
|
|
|
|
$('#modalTitle').text(isNew ? '메뉴 추가' : '메뉴 수정' + (isPortal ? ' (기본 항목)' : ''));
|
|
$('#fMenuId').val(it.menuId || '').prop('readonly', !isNew);
|
|
$('#fMenuName').val(it.menuName || '');
|
|
$('#fMenuPath').val(it.menuPath || '');
|
|
$('#fIconClass').val(it.iconClass || '');
|
|
$('#fMenuSection').val(it.menuSection || 'GNB').prop('disabled', isPortal);
|
|
$('#fGroupYn').prop('checked', it.groupYn === 'Y').prop('disabled', isPortal);
|
|
$('#fNewWindowYn').prop('checked', it.newWindowYn === 'Y');
|
|
$('#exposeRoleChecks').html(roleChecksHtml('exposeRole', it.exposeRoles));
|
|
$('#accessRoleChecks').html(roleChecksHtml('accessRole', it.accessRoles));
|
|
|
|
// 기본 항목: 기본값(DFLT_*) 병기
|
|
if (isPortal) {
|
|
$('#hintMenuName').text('기본값: ' + (it.dfltMenuName || '-'));
|
|
$('#hintMenuPath').text('기본값: ' + (it.dfltMenuPath || '-'));
|
|
$('#hintExposeRoles').text('기본값: ' + (it.dfltExposeRoles || '전체 노출'));
|
|
$('#hintAccessRoles').text('기본값: ' + (it.dfltAccessRoles || '제한 없음'));
|
|
$('.dflt-hint').show();
|
|
} else {
|
|
$('.dflt-hint').hide();
|
|
}
|
|
|
|
$('#modalMode').val(isNew ? 'INSERT' : 'UPDATE');
|
|
menuModal.show();
|
|
}
|
|
|
|
function submitModal() {
|
|
var cmd = $('#modalMode').val();
|
|
var data = {
|
|
cmd: cmd,
|
|
menuId: $('#fMenuId').val().trim(),
|
|
menuName: $('#fMenuName').val().trim(),
|
|
menuPath: $('#fMenuPath').val().trim(),
|
|
iconClass: $('#fIconClass').val().trim(),
|
|
menuSection: $('#fMenuSection').val(),
|
|
groupYn: $('#fGroupYn').is(':checked') ? 'Y' : 'N',
|
|
newWindowYn: $('#fNewWindowYn').is(':checked') ? 'Y' : 'N',
|
|
exposeRoles: $('input[name=exposeRole]:checked').map(function () { return this.value; }).get().join(','),
|
|
accessRoles: $('input[name=accessRole]:checked').map(function () { return this.value; }).get().join(',')
|
|
};
|
|
if (!data.menuId) { alert('메뉴 ID 를 입력하세요.'); return; }
|
|
if (cmd === 'INSERT' && !/^[a-z0-9-]+$/.test(data.menuId)) {
|
|
alert('메뉴 ID 는 kebab-case(소문자/숫자/하이픈)만 허용합니다.');
|
|
return;
|
|
}
|
|
if (!data.menuName) { alert('노출명을 입력하세요.'); return; }
|
|
|
|
$.post(url, data, function () {
|
|
menuModal.hide();
|
|
loadAll();
|
|
}, 'json').fail(ajaxFail);
|
|
}
|
|
|
|
$(document).ready(function () {
|
|
menuModal = new bootstrap.Modal(document.getElementById('menuModal'));
|
|
loadAll();
|
|
|
|
window.addEventListener('beforeunload', function (e) {
|
|
if (dirty) { e.preventDefault(); e.returnValue = ''; }
|
|
});
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="right_box">
|
|
<div class="content_top">
|
|
<ul class="path">
|
|
<li><a href="#">${rmsMenuPath}</a></li>
|
|
</ul>
|
|
</div><!-- end content_top -->
|
|
<div class="content_middle" id="content_middle">
|
|
|
|
<div class="title">포탈 메뉴 관리</div>
|
|
|
|
<div class="board-toolbar">
|
|
<button type="button" class="btn btn-sm btn-primary" level="W" onclick="openModal()">
|
|
<i class="bi bi-plus-lg"></i> 메뉴 추가</button>
|
|
<button type="button" class="btn btn-sm btn-outline-danger" level="W" onclick="initializeMenus()">
|
|
<i class="bi bi-arrow-counterclockwise"></i> 메뉴 초기화</button>
|
|
<span class="spacer"></span>
|
|
<button type="button" class="btn btn-sm btn-outline-secondary" level="W" onclick="reloadPortalCache()">
|
|
<i class="bi bi-arrow-repeat"></i> 캐시 Reload</button>
|
|
<button type="button" class="btn btn-sm btn-success" level="W" onclick="savePlacements()">
|
|
<i class="bi bi-save"></i> 저장</button>
|
|
</div>
|
|
|
|
<div style="background:#e7f1ff; border:1px solid #0d6efd33; padding:8px 15px; margin-bottom:10px; border-radius:6px; font-size:12px; color:#31507a;">
|
|
드래그로 위치를 조절한 뒤 <strong>저장</strong> 버튼으로 일괄 반영합니다.
|
|
기본 항목([기본] 배지)은 [-] 시 <strong>미배치</strong>로만 이동하고, 커스텀 항목은 미배치 시 <strong>삭제</strong>됩니다.
|
|
저장 후 <strong>캐시 Reload</strong> 를 실행해야 포탈에 즉시 반영됩니다(미실행 시 TTL 경과 후 반영).
|
|
</div>
|
|
|
|
<div class="menu-board">
|
|
<div class="menu-lane-strip" id="laneStrip"><!-- 렌더링 --></div>
|
|
<div class="menu-lane unplaced">
|
|
<div class="lane-header">
|
|
<span class="lane-title">미배치</span>
|
|
<span class="badge text-bg-warning badge-src">보관함</span>
|
|
</div>
|
|
<ul class="lane-body" id="unplacedBody"><!-- 렌더링 --></ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 추가/수정 모달 -->
|
|
<div class="modal fade" id="menuModal" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="modalTitle">메뉴 추가</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="닫기"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<input type="hidden" id="modalMode" value="INSERT">
|
|
<div class="row g-3">
|
|
<div class="col-md-6">
|
|
<label class="form-label" for="fMenuId">메뉴 ID (kebab-case)</label>
|
|
<input type="text" class="form-control form-control-sm" id="fMenuId" placeholder="ex) custom-link">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label" for="fMenuName">노출명</label>
|
|
<input type="text" class="form-control form-control-sm" id="fMenuName">
|
|
<div class="dflt-hint" id="hintMenuName"></div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label" for="fMenuPath">Path (그룹은 생략 가능)</label>
|
|
<input type="text" class="form-control form-control-sm" id="fMenuPath" placeholder="/example 또는 https://...">
|
|
<div class="dflt-hint" id="hintMenuPath"></div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label" for="fIconClass">아이콘 클래스 (마이페이지용, ex: fa-users)</label>
|
|
<input type="text" class="form-control form-control-sm" id="fIconClass">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label class="form-label" for="fMenuSection">섹션</label>
|
|
<select class="form-select form-select-sm" id="fMenuSection">
|
|
<option value="GNB">GNB (상단 메뉴)</option>
|
|
<option value="MYPAGE">마이페이지</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-4 d-flex align-items-end">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="fGroupYn">
|
|
<label class="form-check-label" for="fGroupYn">그룹(상위 메뉴)</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 d-flex align-items-end">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="fNewWindowYn">
|
|
<label class="form-check-label" for="fNewWindowYn">새 창 열기</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label">노출 권한 (미선택 = 전체 노출)</label>
|
|
<div class="role-check-group" id="exposeRoleChecks"></div>
|
|
<div class="dflt-hint" id="hintExposeRoles"></div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label">접근 권한 (미선택 = 제한 없음)</label>
|
|
<div class="role-check-group" id="accessRoleChecks"></div>
|
|
<div class="dflt-hint" id="hintAccessRoles"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">취소</button>
|
|
<button type="button" class="btn btn-sm btn-primary" level="W" onclick="submitModal()">저장</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- end content_middle -->
|
|
</div><!-- end right_box -->
|
|
</body>
|
|
</html>
|