feat(sw): viewer follow-up — SVG icon outline, shared SW popup frame, story grid, green layer buttons
- 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:
1 parent
7f42923ccf
commit
68fbcf6e15
45 files changed
+1463
-377
No files matched your search
@@ -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"
|
||||
}
|
||||
]
|
||||
|
||||
Reference in new issue
Block a user