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

feat(sw): viewer follow-up — SVG icon outline, shared SW popup frame, story grid, green layer buttons

Browse Source 
- A: SWViewerIcon draws the SWHeader black outline as SVG stroke on a copy behind the icon (no CSS filter)
- B: SWViewerPanel renders the common SWPopup frame (same DOM / CSS) and adds drag, corner resize,
  collapse, bounds and modal; SWPopup gains optional titleActions / footer; title art spans any width
- C: shared Story canvas grid (--sw-story-canvas) behind the SW Header work area and dropdown room
- D: SWViewerButton tone="green" for 전체 켜기 / 전체 끄기: default kept, hover = primary (확인) hover
  token, pressed = primary face
- AI guide, verification scripts (76 checks, element regression) and evidence updated
This commit is contained in:
shkim4 committed 2026-10-19 16:34:50 +09:00
1 parent 7f42923ccf
commit 68fbcf6e15
45 files changed
+1463 -377
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/sw/viewer-qa/regression/regression-neutral-canvas.json
+636
View File
@@ -0,0 +1,636 @@
{
"base": "http://127.0.0.1:6024",
"next": "http://127.0.0.1:6034",
"results": [
{
"id": "sw-header--overview",
"width": 1920,
"elements": "1 / 1",
"elementDiffPixels": [
0
],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "sw-header--overview",
"width": 1180,
"elements": "1 / 1",
"elementDiffPixels": [
0
],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "sw-header--overview",
"width": 768,
"elements": "1 / 1",
"elementDiffPixels": [
0
],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "sw-header--interactive-states",
"width": 1920,
"elements": "16 / 16",
"elementDiffPixels": [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "sw-header--interactive-states",
"width": 1180,
"elements": "16 / 16",
"elementDiffPixels": [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "sw-header--interactive-states",
"width": 768,
"elements": "16 / 16",
"elementDiffPixels": [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "sw-header--logo-slot",
"width": 1920,
"elements": "4 / 4",
"elementDiffPixels": [
0,
0,
0,
0
],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "sw-header--logo-slot",
"width": 1180,
"elements": "4 / 4",
"elementDiffPixels": [
0,
0,
0,
0
],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "sw-header--logo-slot",
"width": 768,
"elements": "4 / 4",
"elementDiffPixels": [
0,
0,
0,
0
],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "sw-header--document-dropdown",
"width": 1920,
"elements": "18 / 18",
"elementDiffPixels": [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "sw-header--document-dropdown",
"width": 1180,
"elements": "18 / 18",
"elementDiffPixels": [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "sw-header--document-dropdown",
"width": 768,
"elements": "18 / 18",
"elementDiffPixels": [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "sw-header--responsive-more",
"width": 1920,
"elements": "19 / 19",
"elementDiffPixels": [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "sw-header--responsive-more",
"width": 1180,
"elements": "19 / 19",
"elementDiffPixels": [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "sw-header--responsive-more",
"width": 768,
"elements": "19 / 19",
"elementDiffPixels": [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "sw-header--k-guide",
"width": 1920,
"elements": "1 / 1",
"elementDiffPixels": [
0
],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "sw-header--k-guide",
"width": 1180,
"elements": "1 / 1",
"elementDiffPixels": [
0
],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "sw-header--k-guide",
"width": 768,
"elements": "1 / 1",
"elementDiffPixels": [
0
],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "sw-header--property-panel-compare",
"width": 1920,
"elements": "4 / 4",
"elementDiffPixels": [
0,
0,
0,
0
],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "sw-header--property-panel-compare",
"width": 1180,
"elements": "4 / 4",
"elementDiffPixels": [
0,
0,
0,
0
],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "sw-header--property-panel-compare",
"width": 768,
"elements": "4 / 4",
"elementDiffPixels": [
0,
0,
0,
0
],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "sw-header--composed-controls",
"width": 1920,
"elements": "0 / 0",
"elementDiffPixels": [],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "sw-header--composed-controls",
"width": 1180,
"elements": "0 / 0",
"elementDiffPixels": [],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "sw-header--composed-controls",
"width": 768,
"elements": "0 / 0",
"elementDiffPixels": [],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "sw-header--document-open",
"width": 1920,
"elements": "23 / 23",
"elementDiffPixels": [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "sw-header--document-open",
"width": 1180,
"elements": "23 / 23",
"elementDiffPixels": [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "sw-header--document-open",
"width": 768,
"elements": "23 / 23",
"elementDiffPixels": [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "sw-header--hidden-sub-controls",
"width": 1920,
"elements": "3 / 3",
"elementDiffPixels": [
0,
0,
0
],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "sw-header--hidden-sub-controls",
"width": 1180,
"elements": "3 / 3",
"elementDiffPixels": [
0,
0,
0
],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "sw-header--hidden-sub-controls",
"width": 768,
"elements": "3 / 3",
"elementDiffPixels": [
0,
0,
0
],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "sw-header--detail-buttons",
"width": 1920,
"elements": "0 / 0",
"elementDiffPixels": [],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "sw-header--detail-buttons",
"width": 1180,
"elements": "0 / 0",
"elementDiffPixels": [],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "sw-header--detail-buttons",
"width": 768,
"elements": "0 / 0",
"elementDiffPixels": [],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "sw-popup--custom-content",
"width": 1920,
"elements": "3 / 3",
"elementDiffPixels": [
0,
0,
0
],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "sw-popup--custom-content",
"width": 1180,
"elements": "3 / 3",
"elementDiffPixels": [
0,
0,
0
],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "sw-popup--custom-content",
"width": 768,
"elements": "3 / 3",
"elementDiffPixels": [
0,
0,
0
],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "sw-popup--multiple-popups",
"width": 1920,
"elements": "3 / 3",
"elementDiffPixels": [
0,
0,
0
],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "sw-popup--multiple-popups",
"width": 1180,
"elements": "3 / 3",
"elementDiffPixels": [
0,
0,
0
],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "sw-popup--multiple-popups",
"width": 768,
"elements": "3 / 3",
"elementDiffPixels": [
0,
0,
0
],
"fullPageDiffPixels": 0,
"result": "PASS"
}
]
}
docs/sw/viewer-qa/regression/regression.json
+509 -110
View File
@@ -3,234 +3,633 @@
"next": "http://127.0.0.1:6034",
"results": [
{
"id": "overview",
"id": "sw-header--overview",
"width": 1920,
"size": "1920x1000 / 1920x1000",
"diffPixels": 0,
"result": "PASS"
"elements": "1 / 1",
"elementDiffPixels": [
667
],
"fullPageDiffPixels": 716941,
"result": "FAIL"
},
{
"id": "overview",
"id": "sw-header--overview",
"width": 1180,
"size": "1180x1000 / 1180x1000",
"diffPixels": 0,
"elements": "1 / 1",
"elementDiffPixels": [
0
],
"fullPageDiffPixels": 606746,
"result": "PASS"
},
{
"id": "overview",
"id": "sw-header--overview",
"width": 768,
"size": "768x1000 / 768x1000",
"diffPixels": 0,
"elements": "1 / 1",
"elementDiffPixels": [
0
],
"fullPageDiffPixels": 237853,
"result": "PASS"
},
{
"id": "interactive-states",
"id": "sw-header--interactive-states",
"width": 1920,
"size": "1920x2517 / 1920x2517",
"diffPixels": 0,
"elements": "16 / 16",
"elementDiffPixels": [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "interactive-states",
"id": "sw-header--interactive-states",
"width": 1180,
"size": "1180x2527 / 1180x2527",
"diffPixels": 0,
"elements": "16 / 16",
"elementDiffPixels": [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "interactive-states",
"id": "sw-header--interactive-states",
"width": 768,
"size": "768x2623 / 768x2623",
"diffPixels": 0,
"elements": "16 / 16",
"elementDiffPixels": [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "logo-slot",
"id": "sw-header--logo-slot",
"width": 1920,
"size": "1920x1000 / 1920x1000",
"diffPixels": 0,
"elements": "4 / 4",
"elementDiffPixels": [
0,
0,
0,
0
],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "logo-slot",
"id": "sw-header--logo-slot",
"width": 1180,
"size": "1180x1000 / 1180x1000",
"diffPixels": 0,
"elements": "4 / 4",
"elementDiffPixels": [
0,
0,
0,
0
],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "logo-slot",
"id": "sw-header--logo-slot",
"width": 768,
"size": "768x1000 / 768x1000",
"diffPixels": 0,
"elements": "4 / 4",
"elementDiffPixels": [
0,
0,
0,
0
],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "document-dropdown",
"id": "sw-header--document-dropdown",
"width": 1920,
"size": "1920x9112 / 1920x9112",
"diffPixels": 0,
"elements": "18 / 18",
"elementDiffPixels": [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
],
"fullPageDiffPixels": 6111124,
"result": "PASS"
},
{
"id": "document-dropdown",
"id": "sw-header--document-dropdown",
"width": 1180,
"size": "1180x9122 / 1180x9122",
"diffPixels": 0,
"result": "PASS"
"elements": "18 / 18",
"elementDiffPixels": [
793,
0,
0,
0,
0,
0,
1109,
793,
793,
793,
793,
793,
793,
0,
0,
0,
0,
48
],
"fullPageDiffPixels": 5602299,
"result": "FAIL"
},
{
"id": "document-dropdown",
"id": "sw-header--document-dropdown",
"width": 768,
"size": "768x9298 / 768x9298",
"diffPixels": 0,
"result": "PASS"
"elements": "18 / 18",
"elementDiffPixels": [
405,
0,
0,
0,
0,
0,
721,
405,
405,
405,
405,
405,
405,
0,
0,
0,
0,
48
],
"fullPageDiffPixels": 3410951,
"result": "FAIL"
},
{
"id": "responsive-more",
"id": "sw-header--responsive-more",
"width": 1920,
"size": "1920x10042 / 1920x10042",
"diffPixels": 0,
"elements": "19 / 19",
"elementDiffPixels": [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
],
"fullPageDiffPixels": 8338418,
"result": "PASS"
},
{
"id": "responsive-more",
"id": "sw-header--responsive-more",
"width": 1180,
"size": "1180x10052 / 1180x10052",
"diffPixels": 0,
"result": "PASS"
"elements": "19 / 19",
"elementDiffPixels": [
0,
818,
50,
0,
0,
0,
0,
0,
0,
47,
48,
48,
48,
48,
47,
48,
47,
48,
48
],
"fullPageDiffPixels": 7674707,
"result": "FAIL"
},
{
"id": "responsive-more",
"id": "sw-header--responsive-more",
"width": 768,
"size": "768x10048 / 768x10048",
"diffPixels": 0,
"result": "PASS"
"elements": "19 / 19",
"elementDiffPixels": [
0,
721,
50,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
47,
48,
47,
48,
48
],
"fullPageDiffPixels": 4880711,
"result": "FAIL"
},
{
"id": "k-guide",
"id": "sw-header--k-guide",
"width": 1920,
"size": "1920x1037 / 1920x1037",
"diffPixels": 0,
"elements": "1 / 1",
"elementDiffPixels": [
0
],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "k-guide",
"id": "sw-header--k-guide",
"width": 1180,
"size": "1180x1028 / 1180x1028",
"diffPixels": 0,
"elements": "1 / 1",
"elementDiffPixels": [
0
],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "k-guide",
"id": "sw-header--k-guide",
"width": 768,
"size": "768x1023 / 768x1023",
"diffPixels": 0,
"elements": "1 / 1",
"elementDiffPixels": [
0
],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "property-panel-compare",
"id": "sw-header--property-panel-compare",
"width": 1920,
"size": "1920x1000 / 1920x1000",
"diffPixels": 0,
"elements": "4 / 4",
"elementDiffPixels": [
0,
0,
0,
0
],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "property-panel-compare",
"id": "sw-header--property-panel-compare",
"width": 1180,
"size": "1180x1000 / 1180x1000",
"diffPixels": 0,
"elements": "4 / 4",
"elementDiffPixels": [
0,
0,
0,
0
],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "property-panel-compare",
"id": "sw-header--property-panel-compare",
"width": 768,
"size": "768x1000 / 768x1000",
"diffPixels": 0,
"elements": "4 / 4",
"elementDiffPixels": [
0,
0,
0,
0
],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "composed-controls",
"id": "sw-header--composed-controls",
"width": 1920,
"size": "1920x1000 / 1920x1000",
"diffPixels": 0,
"elements": "0 / 0",
"elementDiffPixels": [],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "composed-controls",
"id": "sw-header--composed-controls",
"width": 1180,
"size": "1180x1000 / 1180x1000",
"diffPixels": 0,
"elements": "0 / 0",
"elementDiffPixels": [],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "composed-controls",
"id": "sw-header--composed-controls",
"width": 768,
"size": "768x1000 / 768x1000",
"diffPixels": 0,
"elements": "0 / 0",
"elementDiffPixels": [],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "document-open",
"id": "sw-header--document-open",
"width": 1920,
"size": "1920x10771 / 1920x10771",
"diffPixels": 0,
"result": "PASS"
"elements": "23 / 23",
"elementDiffPixels": [
0,
0,
0,
0,
1199,
1198,
1180,
1078,
899,
768,
640,
520,
388,
0,
1200,
1200,
1180,
1080,
900,
766,
640,
520,
390
],
"fullPageDiffPixels": 10359147,
"result": "FAIL"
},
{
"id": "document-open",
"id": "sw-header--document-open",
"width": 1180,
"size": "1180x10761 / 1180x10761",
"diffPixels": 0,
"result": "PASS"
"elements": "23 / 23",
"elementDiffPixels": [
0,
0,
0,
0,
1108,
1108,
1110,
1127,
948,
817,
689,
569,
437,
0,
1110,
1110,
1110,
1129,
949,
815,
689,
569,
439
],
"fullPageDiffPixels": 9548042,
"result": "FAIL"
},
{
"id": "document-open",
"id": "sw-header--document-open",
"width": 768,
"size": "768x10797 / 768x10797",
"diffPixels": 0,
"result": "PASS"
"elements": "23 / 23",
"elementDiffPixels": [
0,
0,
0,
0,
721,
721,
722,
722,
721,
722,
689,
569,
437,
0,
722,
722,
722,
722,
722,
720,
689,
569,
439
],
"fullPageDiffPixels": 6118190,
"result": "FAIL"
},
{
"id": "hidden-sub-controls",
"id": "sw-header--hidden-sub-controls",
"width": 1920,
"size": "1920x1710 / 1920x1710",
"diffPixels": 0,
"result": "PASS"
"elements": "3 / 3",
"elementDiffPixels": [
0,
1199,
0
],
"fullPageDiffPixels": 1178934,
"result": "FAIL"
},
{
"id": "hidden-sub-controls",
"id": "sw-header--hidden-sub-controls",
"width": 1180,
"size": "1180x1700 / 1180x1700",
"diffPixels": 0,
"result": "PASS"
"elements": "3 / 3",
"elementDiffPixels": [
0,
1110,
0
],
"fullPageDiffPixels": 1084137,
"result": "FAIL"
},
{
"id": "hidden-sub-controls",
"id": "sw-header--hidden-sub-controls",
"width": 768,
"size": "768x1676 / 768x1676",
"diffPixels": 0,
"result": "PASS"
"elements": "3 / 3",
"elementDiffPixels": [
0,
722,
0
],
"fullPageDiffPixels": 676260,
"result": "FAIL"
},
{
"id": "detail-buttons",
"id": "sw-header--detail-buttons",
"width": 1920,
"size": "1920x1000 / 1920x1000",
"diffPixels": 0,
"elements": "0 / 0",
"elementDiffPixels": [],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "detail-buttons",
"id": "sw-header--detail-buttons",
"width": 1180,
"size": "1180x1000 / 1180x1000",
"diffPixels": 0,
"elements": "0 / 0",
"elementDiffPixels": [],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "detail-buttons",
"id": "sw-header--detail-buttons",
"width": 768,
"size": "768x1000 / 768x1000",
"diffPixels": 0,
"elements": "0 / 0",
"elementDiffPixels": [],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "sw-popup--custom-content",
"width": 1920,
"elements": "3 / 3",
"elementDiffPixels": [
0,
0,
0
],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "sw-popup--custom-content",
"width": 1180,
"elements": "3 / 3",
"elementDiffPixels": [
0,
0,
0
],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "sw-popup--custom-content",
"width": 768,
"elements": "3 / 3",
"elementDiffPixels": [
0,
0,
0
],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "sw-popup--multiple-popups",
"width": 1920,
"elements": "3 / 3",
"elementDiffPixels": [
0,
0,
0
],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "sw-popup--multiple-popups",
"width": 1180,
"elements": "3 / 3",
"elementDiffPixels": [
0,
0,
0
],
"fullPageDiffPixels": 0,
"result": "PASS"
},
{
"id": "sw-popup--multiple-popups",
"width": 768,
"elements": "3 / 3",
"elementDiffPixels": [
0,
0,
0
],
"fullPageDiffPixels": 0,
"result": "PASS"
}
]