feat(view): collapsible 시점 menu, origin toggle, and remembered panel states on the 3D band

The title stays. The view buttons become a menu that shows the current view and closes on a choice, Esc or an outside
click. The origin note is an ⓘ toggle. 부재 표시 and 색 기준 are collapsed by default and show their state in the summary
(e.g. 부재 표시 7/7 ▾, 색 기준: 역할 ▾); their open state is remembered per viewer, with guarded storage access.

Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>
This commit is contained in:
ypshimandClaude Haiku 5.5 committed 2026-10-23 11:24:43 +09:00
1 parent 678215267c
commit e66c259d1e
3 files changed
+76 -7

No files matched your search

+10 -6
View File
@@ -74,16 +74,20 @@
<section class="panel viewer" id="viewer-block" aria-labelledby="viewer-title">
<div class="viewer-head">
<h2 id="viewer-title">교각 3D 뷰</h2>
<div id="views" class="views" role="group" aria-label="시점"></div>
<span id="origin" class="muted"></span>
<div class="views-menu" id="views-menu">
<button id="views-toggle" class="btn views-toggle" type="button" aria-haspopup="true" aria-expanded="false" aria-controls="views">시점</button>
<div id="views" class="views views-list" role="group" aria-label="시점" hidden></div>
</div>
<button id="origin-toggle" class="info-btn" type="button" aria-label="원점 표기" aria-expanded="false" aria-controls="origin">ⓘ</button>
<span id="origin" class="origin-pop muted" hidden></span>
</div>
<div id="canvas" class="canvas" aria-label="교각 3D 뷰"></div>
<details class="info-panel parts-info" open>
<summary>부재 표시</summary>
<details class="info-panel parts-info" id="parts-info">
<summary>부재 표시 <span id="parts-count" class="panel-state"></span></summary>
<div id="parts"></div>
</details>
<details class="info-panel color-info" id="color-info" open hidden>
<summary>색 기준</summary>
<details class="info-panel color-info" id="color-info" hidden>
<summary>색 기준 <span id="color-state" class="panel-state"></span></summary>
<div class="rebar-color" id="rebar-color" role="group" aria-label="철근 색 기준">
<button type="button" data-color="role" aria-pressed="true">역할</button>
<button type="button" data-color="diameter" aria-pressed="false">직경</button>