feat: 입고 PDA UI (UI Toolkit) — 보류 작업물 정리

캐릭터-first 전환 전에 만든 PDA/창고 UI 작업물을 히스토리에 보존. - InboundPda.uxml/.uss/.tss + InboundPanelSettings - InboundUIController: 단계별 렌더링 + 입력 위임 - InboundSceneSetup: UIDocument/PanelSettings 자동 와이어링 씬에는 비활성 상태로 존재. 추후 입고 로직 재연결 시 재사용 가능. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-14 20:08:17 +09:00
parent f8577c5f7d
commit 0a372cb88d
15 changed files with 902 additions and 4 deletions
@@ -0,0 +1,245 @@
+/* SINO WMS 입고 교육 — PDA/창고 UI 스타일 (mockup/inbound_pda.html 이식) */
+
+.root {
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: flex-start;
+    padding: 24px;
+    background-color: rgb(31, 36, 48);
+    flex-grow: 1;
+}
+
+.h1 {
+    font-size: 18px;
+    color: rgb(230, 233, 239);
+    -unity-font-style: bold;
+    margin-bottom: 4px;
+}
+
+.sub {
+    color: rgb(139, 147, 167);
+    font-size: 13px;
+    margin-bottom: 16px;
+}
+
+/* ---- 탑다운 창고 ---- */
+.warehouse {
+    background-color: rgb(39, 45, 58);
+    border-radius: 12px;
+    padding: 18px;
+    margin-right: 24px;
+    margin-bottom: 24px;
+}
+
+.grid {
+    flex-direction: column;
+    margin-top: 12px;
+}
+
+.grid-row {
+    flex-direction: row;
+}
+
+.loc {
+    width: 64px;
+    height: 56px;
+    border-radius: 8px;
+    align-items: center;
+    justify-content: center;
+    margin: 4px;
+    border-width: 2px;
+    border-color: rgba(0, 0, 0, 0);
+}
+
+.loc-code {
+    font-size: 11px;
+    color: rgb(230, 233, 239);
+}
+
+.loc-cap {
+    font-size: 9px;
+    color: rgb(170, 178, 197);
+}
+
+.ambient { background-color: rgb(58, 66, 86); }
+.chilled { background-color: rgb(30, 74, 95); }
+.frozen  { background-color: rgb(30, 58, 111); }
+
+.loc--selectable {
+    border-color: rgb(110, 168, 254);
+}
+
+.loc--filled {
+    opacity: 0.5;
+}
+
+.legend {
+    flex-direction: row;
+    margin-top: 12px;
+}
+
+.legend-item {
+    flex-direction: row;
+    align-items: center;
+    margin-right: 12px;
+}
+
+.legend-item Label {
+    font-size: 11px;
+    color: rgb(139, 147, 167);
+}
+
+.dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 2px;
+    margin-right: 4px;
+}
+
+.dot-ambient { background-color: rgb(58, 66, 86); }
+.dot-chilled { background-color: rgb(30, 74, 95); }
+.dot-frozen  { background-color: rgb(30, 58, 111); }
+
+/* ---- PDA ---- */
+.pda {
+    width: 300px;
+    background-color: rgb(17, 21, 28);
+    border-radius: 28px;
+    padding: 16px;
+    border-width: 8px;
+    border-color: rgb(10, 13, 18);
+}
+
+.pda-screen {
+    background-color: rgb(244, 246, 251);
+    border-radius: 14px;
+    padding: 16px;
+    min-height: 460px;
+}
+
+.step-bar {
+    flex-direction: row;
+    margin-bottom: 14px;
+}
+
+.step-seg {
+    flex-grow: 1;
+    height: 4px;
+    border-radius: 2px;
+    margin-right: 4px;
+    background-color: rgb(211, 217, 230);
+}
+
+.step-seg--on {
+    background-color: rgb(43, 111, 255);
+}
+
+.step-title {
+    font-size: 13px;
+    color: rgb(43, 111, 255);
+    -unity-font-style: bold;
+    margin-bottom: 4px;
+}
+
+.step-head {
+    font-size: 17px;
+    color: rgb(31, 36, 48);
+    -unity-font-style: bold;
+    margin-bottom: 12px;
+    white-space: normal;
+}
+
+.line-card {
+    background-color: rgb(255, 255, 255);
+    border-width: 1px;
+    border-color: rgb(227, 232, 242);
+    border-radius: 10px;
+    padding: 12px;
+    margin-bottom: 10px;
+}
+
+.line-card .name {
+    -unity-font-style: bold;
+    font-size: 14px;
+    color: rgb(31, 36, 48);
+    white-space: normal;
+}
+
+.line-card .meta {
+    font-size: 12px;
+    color: rgb(107, 114, 128);
+    margin-top: 2px;
+    white-space: normal;
+}
+
+.row {
+    flex-direction: row;
+    align-items: center;
+}
+
+.badge {
+    font-size: 10px;
+    padding-left: 6px;
+    padding-right: 6px;
+    padding-top: 2px;
+    padding-bottom: 2px;
+    border-radius: 6px;
+    margin-left: 6px;
+}
+
+.b-ambient { background-color: rgb(231, 236, 251); color: rgb(43, 78, 255); }
+.b-chilled { background-color: rgb(223, 241, 246); color: rgb(12, 116, 145); }
+.b-frozen  { background-color: rgb(223, 235, 255); color: rgb(30, 58, 111); }
+
+Button {
+    padding-top: 12px;
+    padding-bottom: 12px;
+    border-width: 0;
+    border-radius: 10px;
+    background-color: rgb(43, 111, 255);
+    color: rgb(255, 255, 255);
+    font-size: 14px;
+    -unity-font-style: bold;
+    margin-top: 6px;
+    margin-left: 0;
+    margin-right: 0;
+}
+
+Button.ghost {
+    background-color: rgb(238, 241, 248);
+    color: rgb(43, 111, 255);
+}
+
+TextField, IntegerField {
+    margin-top: 6px;
+    margin-bottom: 6px;
+}
+
+.feedback {
+    font-size: 12px;
+    padding: 8px 10px;
+    border-radius: 8px;
+    margin-top: 10px;
+    white-space: normal;
+}
+
+.fb-ok { background-color: rgb(227, 247, 234); color: rgb(26, 127, 67); }
+.fb-warn { background-color: rgb(253, 236, 236); color: rgb(192, 57, 43); }
+
+.result-score {
+    font-size: 42px;
+    -unity-font-style: bold;
+    -unity-text-align: middle-center;
+    color: rgb(43, 111, 255);
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+.err-item {
+    font-size: 12px;
+    color: rgb(192, 57, 43);
+    padding-top: 6px;
+    padding-bottom: 6px;
+    white-space: normal;
+}