Wickedness/MBN_STOCK_WEBVIEW
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: refine branded operator experience

Browse Source 
Add the MBN-branded startup intro, semantic sidebar icons, and refined card-based operator visuals. Strengthen packaged UI and input smoke coverage for the updated experience.
This commit is contained in:
Wickedness
2026-07-24 01:26:13 +09:00
parent f43483533a
commit b050f2f06c
25 changed files with 2316 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
src/MBN_STOCK_WEBVIEW.LegacyParityApp/Web/index.html
View File

@@ -9,6 +9,62 @@
</head>
<body data-color-theme="system" data-view-mode="automatic"
data-start-workspace="stockCut">
<svg class="workspace-icon-sprite" aria-hidden="true" focusable="false">
<symbol id="workspace-icon-menu" viewBox="0 0 24 24">
<path d="M4 6.5h16M4 12h16M4 17.5h16"></path>
</symbol>
<symbol id="workspace-icon-stock-cut" viewBox="0 0 24 24">
<rect x="3.5" y="4.5" width="17" height="15" rx="3"></rect>
<path d="M8 7.5v9M6.5 10h3v4h-3M15.5 7v10M14 9h3v5h-3"></path>
</symbol>
<symbol id="workspace-icon-overseas" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="8.5"></circle>
<path d="M3.5 12h17M12 3.5c2.3 2.4 3.5 5.2 3.5 8.5s-1.2 6.1-3.5 8.5c-2.3-2.4-3.5-5.2-3.5-8.5S9.7 5.9 12 3.5Z"></path>
</symbol>
<symbol id="workspace-icon-exchange" viewBox="0 0 24 24">
<path d="M5 7.5h13M18 7.5l-3-3M18 7.5l-3 3M19 16.5H6M6 16.5l3-3M6 16.5l3 3"></path>
</symbol>
<symbol id="workspace-icon-index" viewBox="0 0 24 24">
<path d="M4.5 4.5v15h15M7 16l4-4.5 3 2 4.5-6M15.5 7.5h3v3"></path>
</symbol>
<symbol id="workspace-icon-kospi" viewBox="0 0 24 24">
<path d="M4.5 18V6h4a4 4 0 0 1 0 8h-4M15 6h4M17 6v12M15 18h4"></path>
</symbol>
<symbol id="workspace-icon-kosdaq" viewBox="0 0 24 24">
<path stroke-width="1.65" d="M2.3 18V6h1.6c2.8 0 4.3 2.2 4.3 6s-1.5 6-4.3 6H2.3M9 18l2.5-12H13l2.5 12M10 14h4.5"></path>
<ellipse cx="19.2" cy="12" rx="3.1" ry="6" stroke-width="1.65"></ellipse>
<path stroke-width="1.65" d="m19.5 14.5 3.2 4"></path>
</symbol>
<symbol id="workspace-icon-comparison" viewBox="0 0 24 24">
<rect x="3.5" y="5" width="7.5" height="14" rx="2"></rect>
<rect x="13" y="5" width="7.5" height="14" rx="2"></rect>
<path d="m5.5 15 1.5-2 1.5 1.5M15 10.5l1.5 2 2-3"></path>
</symbol>
<symbol id="workspace-icon-theme" viewBox="0 0 24 24">
<path d="M4 5h7l9 9-6 6-9-9V5Z"></path>
<circle cx="8.5" cy="8.5" r="1.5"></circle>
</symbol>
<symbol id="workspace-icon-overseas-stocks" viewBox="0 0 24 24">
<circle cx="9" cy="10" r="5.5"></circle>
<path d="M3.5 10h11M9 4.5c1.5 1.6 2.2 3.4 2.2 5.5S10.5 13.9 9 15.5c-1.5-1.6-2.2-3.4-2.2-5.5S7.5 6.1 9 4.5ZM12.5 19l3-3.5 2 1.5 3.5-4.5M19 12.5h2v2"></path>
</symbol>
<symbol id="workspace-icon-expert" viewBox="0 0 24 24">
<circle cx="9.5" cy="8" r="3.5"></circle>
<path d="M3.5 19c.8-3.5 2.8-5.5 6-5.5 1.5 0 2.7.4 3.7 1.2"></path>
<circle cx="17" cy="16.5" r="3.5"></circle>
<path d="m15.5 16.5 1 1 2-2.3"></path>
</symbol>
<symbol id="workspace-icon-trading-halt" viewBox="0 0 24 24">
<path d="M9 3.5h6L20.5 9v6L15 20.5H9L3.5 15V9L9 3.5Z"></path>
<path d="M9.5 8.5v7M14.5 8.5v7"></path>
</symbol>
<symbol id="workspace-icon-settings" viewBox="0 0 24 24">
<path d="M4 6.5h7M15 6.5h5M4 12h2M10 12h10M4 17.5h9M17 17.5h3"></path>
<circle cx="13" cy="6.5" r="2"></circle>
<circle cx="8" cy="12" r="2"></circle>
<circle cx="15" cy="17.5" r="2"></circle>
</symbol>
</svg>
<main class="operator-shell" aria-label="V-Stock 증권정보송출시스템">
<section id="workspace-region" class="workspace-region" aria-label="작업 영역">
<aside id="workspace-navigation" class="workspace-navigation" role="navigation"
@@ -17,8 +73,9 @@
<button id="workspace-nav-toggle" class="workspace-nav-toggle" type="button"
aria-expanded="true"
aria-controls="workspace-nav-items workspace-nav-footer" title="메뉴 접기">
<svg aria-hidden="true" viewBox="0 0 24 24" focusable="false">
<path d="M4 6h16M4 12h16M4 18h16"></path>
<svg class="workspace-nav-icon" data-icon="menu" aria-hidden="true"
viewBox="0 0 24 24" focusable="false">
<use href="#workspace-icon-menu"></use>
</svg>
<span class="workspace-nav-toggle-label">메뉴 접기</span>
</button>
@@ -28,9 +85,9 @@
<button id="workspace-stock-tab" class="workspace-nav-item workspace-current"
type="button" aria-label="종목·컷" title="종목·컷"
aria-current="page" aria-controls="stock-workspace">
<svg aria-hidden="true" viewBox="0 0 24 24" focusable="false">
<circle cx="10" cy="10" r="5"></circle>
<path d="m14 14 5 5M4 20h16M6 17l3-3 3 2 5-6"></path>
<svg class="workspace-nav-icon" data-icon="stock-cut" aria-hidden="true"
viewBox="0 0 24 24" focusable="false">
<use href="#workspace-icon-stock-cut"></use>
</svg>
<span class="workspace-nav-label">종목·컷</span>
</button>
@@ -40,80 +97,90 @@
<button class="workspace-nav-item workspace-market-item active" type="button"
draggable="true" data-tab-id="overseas" aria-label="해외" title="해외"
aria-current="false" aria-controls="catalog-workspace">
<svg aria-hidden="true" viewBox="0 0 24 24" focusable="false">
<circle cx="12" cy="12" r="8"></circle><path d="M4 12h16M12 4c2.5 2.2 3.8 4.9 3.8 8s-1.3 5.8-3.8 8c-2.5-2.2-3.8-4.9-3.8-8S9.5 6.2 12 4Z"></path>
<svg class="workspace-nav-icon" data-icon="overseas" aria-hidden="true"
viewBox="0 0 24 24" focusable="false">
<use href="#workspace-icon-overseas"></use>
</svg>
<span class="workspace-nav-label">해외</span>
</button>
<button class="workspace-nav-item workspace-market-item" type="button"
draggable="true" data-tab-id="exchange" aria-label="환율" title="환율"
aria-current="false" aria-controls="catalog-workspace">
<svg aria-hidden="true" viewBox="0 0 24 24" focusable="false">
<path d="M5 8h13l-3-3M19 16H6l3 3"></path>
<svg class="workspace-nav-icon" data-icon="exchange" aria-hidden="true"
viewBox="0 0 24 24" focusable="false">
<use href="#workspace-icon-exchange"></use>
</svg>
<span class="workspace-nav-label">환율</span>
</button>
<button class="workspace-nav-item workspace-market-item" type="button"
draggable="true" data-tab-id="index" aria-label="지수" title="지수"
aria-current="false" aria-controls="catalog-workspace">
<svg aria-hidden="true" viewBox="0 0 24 24" focusable="false">
<path d="M4 19h16M5 16l4-5 3 2 6-8"></path><path d="m14 5 4 0 0 4"></path>
<svg class="workspace-nav-icon" data-icon="index" aria-hidden="true"
viewBox="0 0 24 24" focusable="false">
<use href="#workspace-icon-index"></use>
</svg>
<span class="workspace-nav-label">지수</span>
</button>
<button class="workspace-nav-item workspace-market-item" type="button"
draggable="true" data-tab-id="kospiIndustry" aria-label="코스피" title="코스피"
aria-current="false" aria-controls="catalog-workspace">
<svg aria-hidden="true" viewBox="0 0 24 24" focusable="false">
<path d="M5 19V9h3v10M11 19V5h3v14M17 19v-7h3v7M4 19h17"></path>
<svg class="workspace-nav-icon" data-icon="kospi" aria-hidden="true"
viewBox="0 0 24 24" focusable="false">
<use href="#workspace-icon-kospi"></use>
</svg>
<span class="workspace-nav-label">코스피</span>
</button>
<button class="workspace-nav-item workspace-market-item" type="button"
draggable="true" data-tab-id="kosdaqIndustry" aria-label="코스닥" title="코스닥"
aria-current="false" aria-controls="catalog-workspace">
<svg aria-hidden="true" viewBox="0 0 24 24" focusable="false">
<path d="M6 5v14M4 9h4M12 4v16M10 14h4M18 6v13M16 10h4"></path>
<svg class="workspace-nav-icon" data-icon="kosdaq" aria-hidden="true"
viewBox="0 0 24 24" focusable="false">
<use href="#workspace-icon-kosdaq"></use>
</svg>
<span class="workspace-nav-label">코스닥</span>
</button>
<button class="workspace-nav-item workspace-market-item" type="button"
draggable="true" data-tab-id="comparison" aria-label="비교" title="비교"
aria-current="false" aria-controls="catalog-workspace">
<svg aria-hidden="true" viewBox="0 0 24 24" focusable="false">
<path d="M5 7h14M5 17h14M8 4 5 7l3 3M16 14l3 3-3 3"></path>
<svg class="workspace-nav-icon" data-icon="comparison" aria-hidden="true"
viewBox="0 0 24 24" focusable="false">
<use href="#workspace-icon-comparison"></use>
</svg>
<span class="workspace-nav-label">비교</span>
</button>
<button class="workspace-nav-item workspace-market-item" type="button"
draggable="true" data-tab-id="theme" aria-label="테마" title="테마"
aria-current="false" aria-controls="catalog-workspace">
<svg aria-hidden="true" viewBox="0 0 24 24" focusable="false">
<path d="m12 4 2.2 4.5 5 .7-3.6 3.5.9 5-4.5-2.4-4.5 2.4.9-5-3.6-3.5 5-.7L12 4Z"></path>
<svg class="workspace-nav-icon" data-icon="theme" aria-hidden="true"
viewBox="0 0 24 24" focusable="false">
<use href="#workspace-icon-theme"></use>
</svg>
<span class="workspace-nav-label">테마</span>
</button>
<button class="workspace-nav-item workspace-market-item" type="button"
draggable="true" data-tab-id="overseasStocks" aria-label="해외시장" title="해외시장"
aria-current="false" aria-controls="catalog-workspace">
<svg aria-hidden="true" viewBox="0 0 24 24" focusable="false">
<circle cx="8" cy="9" r="4"></circle><path d="M3 19c.7-3 2.3-5 5-5s4.3 2 5 5M15 7h6M18 4v6M15 14h6M18 11v6"></path>
<svg class="workspace-nav-icon" data-icon="overseas-stocks" aria-hidden="true"
viewBox="0 0 24 24" focusable="false">
<use href="#workspace-icon-overseas-stocks"></use>
</svg>
<span class="workspace-nav-label">해외시장</span>
</button>
<button class="workspace-nav-item workspace-market-item" type="button"
draggable="true" data-tab-id="expert" aria-label="전문가" title="전문가"
aria-current="false" aria-controls="catalog-workspace">
<svg aria-hidden="true" viewBox="0 0 24 24" focusable="false">
<circle cx="12" cy="8" r="4"></circle><path d="M5 20c.8-4 3.1-6 7-6s6.2 2 7 6M17 5l2-2M7 5 5-2"></path>
<svg class="workspace-nav-icon" data-icon="expert" aria-hidden="true"
viewBox="0 0 24 24" focusable="false">
<use href="#workspace-icon-expert"></use>
</svg>
<span class="workspace-nav-label">전문가</span>
</button>
<button class="workspace-nav-item workspace-market-item" type="button"
draggable="true" data-tab-id="tradingHalt" aria-label="거래정지" title="거래정지"
aria-current="false" aria-controls="catalog-workspace">
<svg aria-hidden="true" viewBox="0 0 24 24" focusable="false">
<circle cx="12" cy="12" r="8"></circle><path d="M9.5 8v8M14.5 8v8"></path>
<svg class="workspace-nav-icon" data-icon="trading-halt" aria-hidden="true"
viewBox="0 0 24 24" focusable="false">
<use href="#workspace-icon-trading-halt"></use>
</svg>
<span class="workspace-nav-label">거래정지</span>
</button>
@@ -123,9 +190,9 @@
<button id="workspace-settings-tab" class="workspace-nav-item" type="button"
aria-label="설정" title="설정" aria-current="false"
aria-controls="settings-workspace">
<svg aria-hidden="true" viewBox="0 0 24 24" focusable="false">
<circle cx="12" cy="12" r="3"></circle>
<path d="M19 12a7 7 0 0 0-.1-1l2-1.5-2-3.4-2.4 1A8 8 0 0 0 15 6.2L14.7 4h-4l-.3 2.2a8 8 0 0 0-1.5.9l-2.4-1-2 3.4 2 1.5a7 7 0 0 0 0 2l-2 1.5 2 3.4 2.4-1a8 8 0 0 0 1.5.9l.3 2.2h4l.3-2.2a8 8 0 0 0 1.5-.9l2.4 1 2-3.4-2-1.5a7 7 0 0 0 .1-1Z"></path>
<svg class="workspace-nav-icon" data-icon="settings" aria-hidden="true"
viewBox="0 0 24 24" focusable="false">
<use href="#workspace-icon-settings"></use>
</svg>
<span class="workspace-nav-label">설정</span>
</button>
@@ -134,23 +201,19 @@
<section class="workspace-surface" aria-labelledby="workspace-title">
<header class="workspace-header">
<div class="brand" role="img" aria-label="매일경제TV VRi">
<span class="brand-symbol" aria-hidden="true">
<svg viewBox="0 0 24 24" focusable="false">
<path d="M5 17V9M10 17V6M15 17v-4M20 17V8"></path>
<path d="M4 19h17"></path>
</svg>
</span>
<span class="brand-lockup">
<span>매일경제TV</span>
<strong>VRi</strong>
<div class="brand">
<span class="brand-wordmark-plate">
<img class="brand-wordmark" src="Brand/logo.png" width="176" height="43"
alt="매일경제TV" draggable="false">
</span>
<span class="brand-divider" aria-hidden="true"></span>
<span class="brand-product">V-STOCK</span>
</div>
<div class="workspace-heading">
<span class="workspace-heading-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" focusable="false">
<rect x="3.5" y="4" width="17" height="16" rx="3"></rect>
<path d="M8.5 4v16M12 9h5M12 13h5"></path>
<svg class="workspace-nav-icon" data-icon="stock-cut"
viewBox="0 0 24 24" focusable="false">
<use href="#workspace-icon-stock-cut"></use>
</svg>
</span>
<div class="workspace-heading-copy">
@@ -322,11 +385,11 @@
</select>
</label>
<label class="settings-choice-row" for="operator-view-mode">
<strong>보기</strong>
<strong>그래픽 목록</strong>
<select id="operator-view-mode">
<option value="automatic">자동</option>
<option value="compact">컴팩트</option>
<option value="cards">카드</option>
<option value="compact">간결한 목록</option>
<option value="cards">비주얼 카드</option>
</select>
</label>
<label class="settings-choice-row" for="operator-start-workspace">