kjh2064
c41e5063b7
Removed entire kbx-foundation-v36 directory as it's been replaced by the new KBX Foundation v4 patterns implemented in this session: - Registry-driven screen definitions - Density-aware UI adapter components - Feature module templates (ShadowRun, Models) Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
124 lines
8.5 KiB
HTML
124 lines
8.5 KiB
HTML
<!doctype html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; connect-src 'self'; font-src 'self'; object-src 'none'; frame-src 'none'; worker-src 'none'; base-uri 'none'; frame-ancestors 'none'; form-action 'self'" />
|
||
<meta name="referrer" content="no-referrer" />
|
||
<meta name="color-scheme" content="light dark" />
|
||
<title>KBX FE Reference Lab v52 · Operational Navigation · Screen Anatomy · T01~T09</title>
|
||
<link rel="stylesheet" href="./kbx-fe.css" />
|
||
</head>
|
||
<body>
|
||
<div id="app" class="kbx-app" data-density="compact" data-nav="expanded" data-module="COMMON">
|
||
<a class="skip-link" href="#workspace">본문 바로가기</a>
|
||
|
||
<header class="global-header">
|
||
<div class="brand-area">
|
||
<button id="homeButton" class="brand" type="button" aria-label="KBX 홈으로 이동">
|
||
<strong>KBX</strong><span>업무 플랫폼</span>
|
||
</button>
|
||
<label class="module-select"><span class="sr-only">업무 모듈</span>
|
||
<select id="moduleSelect"><option value="ALL">전체 모듈</option><option value="OMS">OMS</option><option value="ERP">ERP</option><option value="WMS">WMS</option><option value="COMMON">공통</option></select>
|
||
</label>
|
||
</div>
|
||
<button id="globalSearchButton" class="global-search" type="button" aria-keyshortcuts="Control+K">
|
||
<span>메뉴명 · 화면코드 · 업무명 검색</span><kbd>Ctrl K</kbd>
|
||
</button>
|
||
<div class="header-actions">
|
||
<button id="jobsButton" type="button" data-panel="jobs" aria-controls="systemPanel" aria-expanded="false">작업 <b>2</b></button>
|
||
<button id="noticeButton" type="button" data-panel="notice" aria-controls="systemPanel" aria-expanded="false">알림 <b>4</b></button>
|
||
<button id="densityButton" type="button" title="화면 밀도 전환">Compact</button>
|
||
<button id="themeButton" type="button" title="KBX Business 테마 전환" aria-label="어두운 테마로 변경"><span aria-hidden="true">☀</span> <span>Light</span></button>
|
||
<button type="button">사용자</button>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="shell-body">
|
||
<aside id="sideNav" class="side-nav" aria-label="업무 메뉴">
|
||
<div class="side-nav-top">
|
||
<button id="sideHomeButton" class="nav-home active" type="button"><span aria-hidden="true">⌂</span><span class="nav-label">홈</span></button>
|
||
<button id="collapseButton" class="collapse-button" type="button" aria-label="메뉴 접기" aria-expanded="true">‹</button>
|
||
</div>
|
||
<button id="sideSearchButton" class="side-search" type="button" aria-keyshortcuts="Control+K"><span class="nav-label">메뉴·화면 검색</span><kbd class="nav-label">Ctrl K</kbd><span class="collapsed-only" aria-hidden="true">⌕</span></button>
|
||
<nav id="moduleSwitcher" class="module-switcher" aria-label="업무 모듈"></nav>
|
||
<div id="favoriteNav" class="personal-nav"></div>
|
||
<div id="recentNav" class="personal-nav"></div>
|
||
<div id="menuNav" class="menu-nav"></div>
|
||
</aside>
|
||
|
||
<main class="workspace-shell">
|
||
<nav id="workspaceTabs" class="workspace-tabs" role="tablist" aria-label="열린 업무"></nav>
|
||
<div id="workspace" class="workspace" tabindex="-1"></div>
|
||
</main>
|
||
</div>
|
||
|
||
<dialog id="menuSearchDialog" class="menu-search-dialog" aria-labelledby="menuSearchTitle">
|
||
<div class="search-dialog-shell">
|
||
<header><strong id="menuSearchTitle">업무 화면 검색</strong><button id="searchCloseButton" type="button" aria-label="닫기">×</button></header>
|
||
<label class="search-input-wrap"><span class="sr-only">검색어</span><input id="menuSearchInput" autocomplete="off" placeholder="예: 주문, 재고, OMS-ORD-001" role="combobox" aria-controls="menuSearchResults" /></label>
|
||
<div id="menuSearchResults" class="menu-search-results" role="listbox" aria-label="검색 결과"></div>
|
||
<footer><span>↑↓ 이동 · Enter 열기 · Esc 닫기</span><span>화면코드 검색 지원</span></footer>
|
||
</div>
|
||
</dialog>
|
||
|
||
<dialog id="unsavedDialog" class="confirm-dialog" aria-labelledby="unsavedTitle">
|
||
<form method="dialog" class="confirm-shell">
|
||
<header><strong id="unsavedTitle">저장하지 않은 변경사항이 있습니다.</strong></header>
|
||
<p id="unsavedMessage">변경사항을 저장하거나 버린 뒤 화면을 닫을 수 있습니다.</p>
|
||
<footer>
|
||
<button id="unsavedStay" value="cancel" class="btn" type="submit">계속 편집</button>
|
||
<button id="unsavedDiscard" value="discard" class="btn danger" type="button">변경 버리기</button>
|
||
<button id="unsavedSave" value="save" class="btn primary" type="button">저장 후 닫기</button>
|
||
</footer>
|
||
</form>
|
||
</dialog>
|
||
|
||
|
||
<dialog id="lookupDialog" class="lookup-dialog" aria-labelledby="lookupTitle">
|
||
<div class="lookup-dialog-shell">
|
||
<header><div><strong id="lookupTitle">업무 조회</strong><small id="lookupSubtitle">F2 조회</small></div><button id="lookupCloseButton" type="button" aria-label="닫기">×</button></header>
|
||
<form id="lookupSearchForm" class="lookup-search">
|
||
<label><span class="sr-only">검색어</span><input id="lookupSearchInput" autocomplete="off" maxlength="80" placeholder="코드 또는 명칭" /></label>
|
||
<button class="btn" type="submit">조회</button>
|
||
</form>
|
||
<div id="lookupResults" class="lookup-results" role="listbox" aria-label="조회 결과"></div>
|
||
<footer><span id="lookupStatus">↑↓ 이동 · Enter 선택 · Esc 닫기</span><button id="lookupSelectButton" class="btn primary" type="button">선택</button></footer>
|
||
</div>
|
||
</dialog>
|
||
|
||
<dialog id="quantityDialog" class="confirm-dialog" aria-labelledby="quantityTitle">
|
||
<form method="dialog" class="confirm-shell" id="quantityForm">
|
||
<header><strong id="quantityTitle">피킹 수량 입력</strong></header>
|
||
<label class="dialog-field"><span>수량</span><input id="quantityInput" type="number" inputmode="numeric" min="0" step="1" /></label>
|
||
<p class="dialog-help" id="quantityHelp">필요수량을 초과할 수 없습니다.</p>
|
||
<footer><button class="btn" value="cancel" type="submit">취소</button><button id="quantityApply" class="btn primary" type="button">적용</button></footer>
|
||
</form>
|
||
</dialog>
|
||
|
||
<dialog id="exceptionDialog" class="confirm-dialog" aria-labelledby="exceptionTitle">
|
||
<form method="dialog" class="confirm-shell" id="exceptionForm">
|
||
<header><strong id="exceptionTitle">재고부족 신고</strong></header>
|
||
<fieldset class="exception-options"><legend>사유</legend><label><input type="radio" name="exceptionReason" value="실물 없음" checked /> 실물 없음</label><label><input type="radio" name="exceptionReason" value="수량 부족" /> 수량 부족</label><label><input type="radio" name="exceptionReason" value="위치 오류" /> 위치 오류</label><label><input type="radio" name="exceptionReason" value="상품 이상" /> 상품 이상</label></fieldset>
|
||
<label class="dialog-field"><span>메모</span><textarea id="exceptionMemo" rows="3" maxlength="200" placeholder="선택 입력"></textarea></label>
|
||
<footer><button class="btn" value="cancel" type="submit">취소</button><button id="exceptionApply" class="btn primary" type="button">등록</button></footer>
|
||
</form>
|
||
</dialog>
|
||
|
||
<aside id="systemPanel" class="system-panel" hidden tabindex="-1" role="region" aria-labelledby="systemPanelTitle">
|
||
<header><strong id="systemPanelTitle">업무 센터</strong><button id="systemPanelClose" type="button" aria-label="패널 닫기">×</button></header>
|
||
<div id="systemPanelBody" class="system-panel-body"></div>
|
||
</aside>
|
||
|
||
<aside id="drawer" class="drawer" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="drawerTitle" tabindex="-1">
|
||
<header><strong id="drawerTitle">상세</strong><button id="drawerClose" type="button" aria-label="닫기">×</button></header>
|
||
<div id="drawerBody" class="drawer-body"></div>
|
||
</aside>
|
||
<div id="drawerBackdrop" class="drawer-backdrop" hidden></div>
|
||
<div id="toastRegion" class="toast-region" aria-live="polite" aria-atomic="true"></div>
|
||
<div id="liveRegion" class="sr-only" aria-live="polite" aria-atomic="true"></div>
|
||
</div>
|
||
<script src="./kbx-fe.js"></script>
|
||
</body>
|
||
</html>
|