shkim4/HMDesign
Private
Public Access
1
0 Fork 0
Code Activity

feat(sw): viewer header logo menu and file list; simplify SW Storybook

Browse Source 
SW Viewer Header (approved optional props, public export names unchanged at 170):
- SWViewerHeader: logoMenu, documents, activeDocumentId, onDocumentSelect,
  onDocumentOpen, documentOpenLabel; measured responsive toggles (full ->
  icons -> More) with the SWHeader More / file-list styling.
- SW AI guides, ExampleH, viewer/text-weight/theme-inheritance tests and the
  logo-document-menu tests with their QA record.

SW Storybook cleanup (Story IDs and test fixtures kept):
- Sidebar: Overview -> "SW Header" (first), 전체 Footer -> "SW Footer",
  Footer/Viewer responsive pages -> "Responsive More", Viewer content-variants
  -> "Settings Popup" (merges the settings popup page).
- Hidden by the verification tag (direct URL kept): Header Dropdown,
  Document Open, Interactive States, Document Dropdown, Hidden Sub Controls,
  Home Menu standalone; Footer tool groups / custom content / parts;
  SW/Theme; Viewer menu groups / item states / variable size / settings
  panel / Header + Dropdown.
- Removed demo UI: Overview size and callback output (demo data and
  selection only with &verification), Home Menu Figma node table and width
  demo, Header Responsive More reduced to 1440 / 768 / 390, Popup reopen
  button, property-panel comparison captions, Viewer context-menu demo
  (&verification only).
- Tests: storybook-inventory records the hidden and renamed Stories;
  overview / range-cross-browser / viewer open the demo controls with
  &verification; integrated-popup reloads the Story instead of the reopen
  button; dropdown-consolidation asserts Dropdown is hidden from the sidebar
  and still opens by its direct URL.
This commit is contained in:
shkim4 committed 2026-10-21 14:52:46 +09:00
1 parent 46119eacb5
commit 23d522c136
57 files changed
+2623 -333
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/sw/viewer-logo-document-menu-qa/viewer-logo-document-menu-results.json
+691
View File
@@ -0,0 +1,691 @@
{
"storybook": "http://127.0.0.1:6040",
"results": [
{
"name": "reference SWViewerMenu: 36px rows, 4px padding / radius, 14px 400, 4px under its trigger",
"result": "PASS",
"detail": {
"colors": {
"background": "rgb(14, 61, 47)",
"border": "rgb(19, 86, 67)",
"shadow": "rgba(0, 0, 0, 0.5) 0px 4px 12px 0px",
"item": "rgb(246, 244, 242)",
"label": "rgb(246, 244, 242)"
},
"metrics": {
"border": "1px solid",
"radius": "4px",
"padding": "4px",
"minWidth": "160px",
"font": "14px/20px 400",
"itemHeight": 36,
"itemInset": 5,
"itemPadding": "12px 12px",
"itemGap": "8px",
"itemRadius": "2px",
"itemFont": "\"Noto Sans KR\" 14px/20px 400",
"itemOutline": "none",
"label": "6px 12px 12px/18px 500",
"separator": "1px 4px -4px",
"icon": "16x16 @12",
"textLeft": 36
},
"place": {
"dy": 4,
"dx": 0
}
}
},
{
"name": "More (520px) colors = SWHeader ... menu (face, border, shadow, text); caption = text color",
"result": "PASS",
"detail": {
"more": {
"background": "rgb(14, 61, 47)",
"border": "rgb(19, 86, 67)",
"shadow": "rgba(0, 0, 0, 0.5) 0px 4px 12px 0px",
"item": "rgb(246, 244, 242)",
"label": "rgb(246, 244, 242)"
},
"hover": "rgba(255, 255, 255, 0.08) / rgb(246, 244, 242)",
"swHeader": {
"background": "rgb(14, 61, 47)",
"border": "rgb(19, 86, 67)",
"shadow": "rgba(0, 0, 0, 0.5) 0px 4px 12px 0px",
"item": "rgb(246, 244, 242)",
"label": null
}
}
},
{
"name": "header dropdown (상단 메뉴 + Dropdown) = More face and colors",
"result": "PASS",
"detail": {
"dropdown": {
"background": "rgb(14, 61, 47)",
"border": "rgb(19, 86, 67)",
"shadow": "rgba(0, 0, 0, 0.5) 0px 4px 12px 0px",
"item": "rgb(246, 244, 242)",
"label": "rgb(246, 244, 242)"
},
"more": {
"background": "rgb(14, 61, 47)",
"border": "rgb(19, 86, 67)",
"shadow": "rgba(0, 0, 0, 0.5) 0px 4px 12px 0px",
"item": "rgb(246, 244, 242)",
"label": "rgb(246, 244, 242)"
}
}
},
{
"name": "SWHeader ... menu still right-aligned under its trigger (no title, no divider)",
"result": "PASS",
"detail": ""
},
{
"name": "SWHeader ... menu Escape closes and refocuses ...",
"result": "PASS",
"detail": ""
},
{
"name": "logo opens no dropdown (no menu trigger)",
"result": "PASS",
"detail": ""
},
{
"name": "file open button after the logo: SWHeader document surface, icon + 파일 열기",
"result": "PASS",
"detail": {
"surface": true,
"afterLogo": true,
"beforeName": true,
"label": "파일 열기",
"icons": 1
}
},
{
"name": "file open icon: no border, transparent, no shadow; 34px slot",
"result": "PASS",
"detail": {
"style": "0px none rgb(240, 247, 245) | 0px | rgba(0, 0, 0, 0) | none",
"size": [
34,
34
]
}
},
{
"name": "file name area: no left padding, right after the file open button",
"result": "PASS",
"detail": [
"0px",
2
]
},
{
"name": "no 샘플 header button, no + New",
"result": "PASS",
"detail": ""
},
{
"name": "file open button runs the existing file open (onDocumentOpen + onCommand open/document)",
"result": "PASS",
"detail": "Command: 파일 선택창 (미연결) → document/open"
},
{
"name": "file name is the SWHeader document button",
"result": "PASS",
"detail": ""
},
{
"name": "open list never covers the logo cap (pixels identical)",
"result": "PASS",
"detail": ""
},
{
"name": "file name click opens the sample list",
"result": "PASS",
"detail": [
"BasicSample.dwg",
"C0060202-001-평면및종단면도.dwg",
"simple.dxf"
]
},
{
"name": "no Open and no + New below the samples",
"result": "PASS",
"detail": ""
},
{
"name": "current sample marked active",
"result": "PASS",
"detail": ""
},
{
"name": "SWHeader list face (32px rows, #103127, at least the SWHeader 312px)",
"result": "PASS",
"detail": {
"background": "rgb(16, 49, 39)",
"width": 362,
"row": 32
}
},
{
"name": "list opens directly below the file name",
"result": "PASS",
"detail": {
"list": {
"x": 202.90625,
"y": 368.5,
"width": 361.5,
"height": 98
},
"name": {
"x": 204.90625,
"y": 318.5,
"width": 359.5,
"height": 50
}
}
},
{
"name": "sample select loads it and renames the file",
"result": "PASS",
"detail": "Command: 파일 선택창 (미연결) → document/open → samples/sample-dxf"
},
{
"name": "list closes after select, focus on the file name",
"result": "PASS",
"detail": ""
},
{
"name": "ArrowDown opens the list on its first row",
"result": "PASS",
"detail": ""
},
{
"name": "Escape closes the list and refocuses the file name",
"result": "PASS",
"detail": ""
},
{
"name": "outside click closes the list",
"result": "PASS",
"detail": ""
},
{
"name": "1440: icon + 파일 열기; narrower: icon only (tooltip / name 파일 열기, 34px icon slot kept)",
"result": "PASS",
"detail": {
"first": {
"width": 1440,
"label": true,
"aria": null,
"title": "",
"icon": [
34,
34
],
"overflow": 0
},
"firstIcon": {
"width": 1080,
"label": false,
"aria": "파일 열기",
"title": "파일 열기",
"icon": [
34,
34
],
"overflow": 0
}
}
},
{
"name": "label comes back at the same widths when the header grows; no overflow",
"result": "PASS",
"detail": ""
},
{
"name": "file open never moves into More",
"result": "PASS",
"detail": [
"Model · 17,377개",
"Layout · 237개",
"전체 보기",
"2.5D",
"어두운 배경"
]
},
{
"name": "icon-only button runs the same file open",
"result": "PASS",
"detail": "Command: 파일 선택창 (미연결) → document/open → samples/sample-dxf → 파일 선택창 (미연결) → document/open"
},
{
"name": "document list above an open SWViewerPanel",
"result": "PASS",
"detail": "60"
},
{
"name": "closed list drops back (no raised layer at rest), cap over the open button and file name",
"result": "PASS",
"detail": ""
},
{
"name": "no horizontal overflow at 1440 / 1100 / 860 / 520",
"result": "PASS",
"detail": [
[
1440,
0,
0
],
[
1100,
0,
0
],
[
860,
0,
0
],
[
520,
0,
0
]
]
},
{
"name": "layer / settings / properties always in the header",
"result": "PASS",
"detail": [
[
"레이어",
"설정",
"속성"
],
[
"레이어",
"설정",
"속성"
],
[
"레이어",
"설정",
"속성"
],
[
"레이어",
"설정",
"속성"
]
]
},
{
"name": "1440: full items with labels (전체 보기 shown), no More; 1100: icons only, no More",
"result": "PASS",
"detail": [
[
1440,
true,
false
],
[
1100,
true,
false
],
[
860,
true,
true
],
[
520,
false,
true
]
]
},
{
"name": "860: icons only (tooltips kept) + More",
"result": "PASS",
"detail": {
"width": 860,
"overflow": 0,
"objectOverflow": 0,
"toggles": [
{
"name": "레이어",
"label": false,
"title": "레이어 패널 열기 / 닫기"
},
{
"name": "설정",
"label": false,
"title": "옵션 패널 열기 / 닫기"
},
{
"name": "속성",
"label": false,
"title": "속성 패널 열기 / 닫기"
}
],
"fitShown": true,
"more": true,
"logoRight": 65,
"docLeft": 138,
"docRight": 352.5,
"objectLeft": 354.5
}
},
{
"name": "520: icons only, then More for what still does not fit",
"result": "PASS",
"detail": {
"width": 520,
"overflow": 0,
"objectOverflow": 0,
"toggles": [
{
"name": "레이어",
"label": false,
"title": "레이어 패널 열기 / 닫기"
},
{
"name": "설정",
"label": false,
"title": "옵션 패널 열기 / 닫기"
},
{
"name": "속성",
"label": false,
"title": "속성 패널 열기 / 닫기"
}
],
"fitShown": false,
"more": true,
"logoRight": 65,
"docLeft": 138,
"docRight": 278,
"objectLeft": 280
}
},
{
"name": "logo, file name and toolbar never overlap",
"result": "PASS",
"detail": [
[
1440,
65,
204.90625,
564.40625,
566.40625
],
[
1100,
65,
138,
412.5,
414.5
],
[
860,
65,
138,
352.5,
354.5
],
[
520,
65,
138,
278,
280
]
]
},
{
"name": "520: header + More hold every item exactly once (panel toggles never in More)",
"result": "PASS",
"detail": {
"inHeader": [
"레이어",
"설정",
"속성",
"정보 및 라이선스"
],
"moreItems": [
"Model",
"Layout",
"전체 보기",
"2.5D",
"어두운 배경"
]
}
},
{
"name": "icon toggle pressed + command at 520",
"result": "PASS",
"detail": "Command: layers=true"
},
{
"name": "520: document list shown, inside the header width",
"result": "PASS",
"detail": {
"list": {
"x": 136,
"y": 1171.5,
"width": 312,
"height": 98
},
"header": {
"x": 40,
"y": 1120.5,
"width": 520,
"height": 52
}
}
},
{
"name": "narrow header (771px): icon toggles with tooltip, hover, pressed #FFC600, panel open / close",
"result": "PASS",
"detail": [
{
"name": "레이어",
"iconOnly": true,
"title": "레이어 패널 열기 / 닫기",
"hover": "rgb(38, 102, 81)",
"open": true,
"pressed": "true",
"color": "rgb(255, 198, 0)",
"closed": true
},
{
"name": "설정",
"iconOnly": true,
"title": "옵션 패널 열기 / 닫기",
"hover": "rgb(38, 102, 81)",
"open": true,
"pressed": "true",
"color": "rgb(255, 198, 0)",
"closed": true
},
{
"name": "속성",
"iconOnly": true,
"title": "속성 패널 열기 / 닫기",
"hover": "rgb(38, 102, 81)",
"open": true,
"pressed": "true",
"color": "rgb(255, 198, 0)",
"closed": true
}
]
},
{
"name": "document list >= file-name button (outer), covers it, >= 312px, no row cut — long / short name, 1440–400, resize while open",
"result": "PASS",
"detail": {
"bad": [],
"cases": [
{
"label": "long@1440",
"button": 359.5,
"list": 361.5,
"left": -2,
"right": 0,
"cut": []
},
{
"label": "long@1100",
"button": 274.5,
"list": 312,
"left": -2,
"right": 35.5,
"cut": []
},
{
"label": "long@860",
"button": 214.5,
"list": 312,
"left": -2,
"right": 95.5,
"cut": []
},
{
"label": "long@520",
"button": 140,
"list": 312,
"left": -2,
"right": 170,
"cut": []
},
{
"label": "long@400",
"button": 91,
"list": 312,
"left": -2,
"right": 219,
"cut": []
},
{
"label": "short@1440",
"button": 359.5,
"list": 361.5,
"left": -2,
"right": 0,
"cut": []
},
{
"label": "short@1100",
"button": 155.2,
"list": 312,
"left": -2,
"right": 154.8,
"cut": []
},
{
"label": "short@860",
"button": 171.8,
"list": 312,
"left": -2,
"right": 138.3,
"cut": []
},
{
"label": "short@520",
"button": 140,
"list": 312,
"left": -2,
"right": 170,
"cut": []
},
{
"label": "short@400",
"button": 91,
"list": 312,
"left": -2,
"right": 219,
"cut": []
},
{
"label": "open-resize@1200",
"button": 207.2,
"list": 312,
"left": -2,
"right": 102.8,
"cut": []
},
{
"label": "open-resize@900",
"button": 211.8,
"list": 312,
"left": -2,
"right": 98.3,
"cut": []
},
{
"label": "open-resize@600",
"button": 149.5,
"list": 312,
"left": -2,
"right": 160.5,
"cut": []
}
]
}
},
{
"name": "sweep: no overflow at any width (400–1440)",
"result": "PASS",
"detail": []
},
{
"name": "sweep: icons switch together and always before More",
"result": "PASS",
"detail": ""
},
{
"name": "sweep: narrower never shows more (monotonic: full → icons → More, fewer items)",
"result": "PASS",
"detail": ""
},
{
"name": "sweep: growing back gives the same state at every width (reverse order, no stuck item)",
"result": "PASS",
"detail": ""
},
{
"name": "sweep: 1440 full; each stage reached by measured room only",
"result": "PASS",
"detail": {
"icons": 1300,
"more": 910
}
},
{
"name": "sweep: shorter file name moves the steps to narrower widths",
"result": "PASS",
"detail": {
"long": {
"icons": 1300,
"more": 910
},
"short": {
"icons": 1080,
"more": 830
}
}
},
{
"name": "no page errors",
"result": "PASS",
"detail": ""
}
],
"errors": []
}