HMDesign/docs/sw/sw-first-pass-cleanup-review-2026-10-19.md

SW 1차 Storybook·컴포넌트·문서 정리 보고 (2026-10-19)

이번 정리는 디자인·동작·공개 API·Story ID를 그대로 두고 관리 구조만 정리했습니다. 삭제, 이름 변경, 분류 이동, 통합은 하지 않았습니다. 그런 작업은 §8 2차 검토 목록에 사용자 결정 대상으로 남겼습니다.

• 시작: Branch feature/sw-package, HEAD 0029cef60c46d3b7e7ffb2795e31357958ab3b81, 작업 트리 clean
• 범위: packages/sw, src/sw, docs/sw (다른 패키지·루트 설정은 변경하지 않음)

1. 현재 SW 프로젝트 구조

경로	역할
packages/sw/src/index.ts	패키지 진입점(sw.css import, 공개 export)
packages/sw/src/components/sw-header/SWHeader.tsx	Header 조립·반응형·More·구성(controls/hiddenControls/menuOrder)·속성Bar/속성창 열림 (461줄)
packages/sw/src/components/sw-header/components/	하위 컴포넌트 19개 파일 (아래 §3)
packages/sw/src/components/sw-header/types.ts	SWHeaderProps와 데이터 타입
packages/sw/src/components/sw-theme/SWTheme.tsx	하위 컴포넌트 단독 사용 시 토큰 범위
packages/sw/src/theme/sw.css	전체 스타일·토큰 (1842줄)
packages/sw/src/assets/	Figma SVG/PNG 50개
packages/sw/tests/	브라우저 검증 스크립트 5개
src/sw/sw-header.stories.tsx	Storybook SW / Header 33개 Story (약 1860줄)
src/sw/sw-stories.css, src/sw/assets/	Story 전용 배치 CSS, 임시 로고, Figma 비교 PNG 3개
docs/sw/	사용 가이드, 디자인 명세, 검증 보고 15개, 증거 폴더 5개

2. Storybook 전체 목록 및 분류

모두 SW / Header 아래에 있습니다. 주소는 iframe.html?id=<ID>입니다. 분류 기준은 기본 화면 / 상태 / 기능 예제 / Figma 비교 / QA·검증 / 중복 검토입니다. "테스트 사용"은 packages/sw/tests가 그 ID를 직접 연다는 뜻입니다. 이 Story들은 이름을 바꾸면 테스트도 고쳐야 합니다. 추가로 detail-buttons 검증은 33개 ID 전체를 기준 목록과 비교합니다.

#	Story ID	메뉴 이름	분류	목적 · 주요 컴포넌트	Figma	테스트 사용	1차 의견
S1	sw-header--detail-buttons	Detail Buttons (Shared States)	Figma 비교 · QA	상세 버튼 5종 공통 상태, SWHeaderMenuDetail	26:10789 / 26:10792	○	유지, QA 분류 검토
S2	sw-header--overview	Overview	기본 화면	1920 Header + 선택 상태	26:8944		유지(대표)
S3	sw-header--default	Default	기본 화면(Args)	SWHeader 1920 프레임	26:8944	○	중복 검토(S2·S4)
S4	sw-header--controls	Controls	기능 예제(Args)	프레임 없는 SWHeader + Controls 패널	—	○	중복 검토(S3)
S5	sw-header--interactive-states	Interactive States	상태	Default/Hover/Selected/Disabled, 창 버튼 Callback	26:10655		유지
S6	sw-header--responsive	Responsive	기능 예제	18개 폭 반응형	26:8944		유지, S15와 인접 배치 검토
S7	sw-header--window-move-motion	Window Move Motion	상태(Motion)	창 이동 GIF 모션 1400ms	26:10220		유지
S8	sw-header--composed-controls	Composed Controls	기능 예제	공개 하위 컴포넌트 재사용, 그룹 필드 Hover	—		유지
S9	sw-header--logo-slot	Logo Slot	기능 예제	logoSrc / logo / 미전달	26:8944		유지
S10	sw-header--document-dropdown	Document Dropdown	상태 + 기능	문서 목록 섹션 18개	26:10662		유지, 섹션 분할 검토
S11	sw-header--layer-dropdown	Layer Dropdown	상태 + 기능	레이어 목록 섹션 13개	26:10940		유지
S12	sw-header--color-dropdown	Color Dropdown	상태 + 기능	색상 목록·RGB 입력	26:10986 / 26:11036	○	유지
S13	sw-header--line-style-dropdown	Line Style Dropdown	상태 + 기능	3열 선스타일 목록	26:11104		유지
S14	sw-header--text-dimension-style-dropdown	Text · Dimension Style Dropdown	상태 + 기능	문자·치수스타일 목록	26:11181 / 26:11215	○	유지
S15	sw-header--responsive-more	Responsive More	기능 예제	More 대표 필드 전환	—		유지, S6과 통합 검토
S16	sw-header--text-stroke	Text Stroke	Figma 비교 · QA	검정 외곽선 확대 비교	26:8944		유지, QA 분류 검토
S17	sw-header--layer-detail-input	Layer Detail · Input	상태	레이어 상세 버튼, SWHeaderInput	26:10767 / 26:11656	○	이름 변경 검토(Input 중심)
S18	sw-header--dynamic-data	Dynamic Data	기능 예제	목록 추가·삭제·순서	—		유지
S19	sw-header--property-panel	Property Panel	기능 예제	Header 연결 속성창, 폭 전환	26:11822	○	유지(대표)
S20	sw-header--property-panel-variants	Property Panel Variants	중복 검토	단독 패널 + 같은 조작 버튼	26:11822		통합 검토(S27~S31)
S21	sw-header--k-guide	K Guide	상태(Motion)	K 버튼 가이드 반복	26:11698 / 26:11669		유지
S22	sw-header--additional-hover	Additional Hover	QA · 중복 검토	상세 Hover·Selected·색상 기준 필수 선택	—	○	통합 검토(S1·S12)
S23	sw-header--property-bar	Property Bar	기능 예제	속성Bar 동적 편집	26:10492	○	유지
S24	sw-header--dynamic-controls	Dynamic Controls	기능 예제 · 중복 검토	controls allowlist	—		통합 검토(S26)
S25	sw-header--colorize	Colorize	Figma 비교	btn_colorize Default/Hover	26:11302 / 26:11305	○	통합 검토(S12)
S26	sw-header--composition	Composition (Visibility · Order)	기능 예제	hiddenControls, menuOrder	26:8944		유지
S27	sw-header--property-panel-none	Property Panel · 선택 없음	상태	26:11886 314×256	26:11886	○	유지 또는 S31로 통합 검토
S28	sw-header--property-panel-all	Property Panel · 전체 선택	상태	26:11823 314×361	26:11823	○	위와 같음
S29	sw-header--property-panel-circle	Property Panel · 원 1개	상태	26:11932 314×658	26:11932	○	위와 같음
S30	sw-header--property-panel-expanded	Property Panel · 모두 펼침	상태	26:12035 314×754	26:12035	○	위와 같음
S31	sw-header--property-panel-compare	Property Panel · 4개 비교	Figma 비교	4상태 실측 비교	위 4개	○	유지
S32	sw-header--property-shape-slot	Property Panel · 형상 Slot	기능 예제	shapeContent	26:11932		유지
S33	sw-header--property-fields	Property Panel · 필드 13개	Figma 비교 + 기능	필드 Default/Hover 표본 + 실제 조작	26:12388 ~ 26:12649	○	유지

사용 편의성 조사 결과

• 한 메뉴에 모두 있음: 33개가 SW / Header 한 단계에 섞여 있습니다. 사용자용 예제(S2, S8, S9, S19, S23, S26)와 검증 화면(S1, S16, S22, S31)이 같은 목록에 나옵니다.
• 비슷한 Story가 흩어짐: 속성창 관련 Story가 9개(S19, S20, S27S33)이고 메뉴 순서상 S21S26 사이에 끊겨 있습니다. 반응형(S6, S15)과 구성(S24, S26)도 떨어져 있습니다.
• 같은 디자인이 반복됨: S3, S4는 S2와 같은 Header이고, S20은 S27~S30과 같은 4상태입니다. S22의 상세 Hover는 S1, 색상 기준은 S12에도 있습니다. S25 Colorize는 S12 안에서도 보입니다.
• 이름만으로 알기 어려움: Additional Hover, Dynamic Controls, Property Panel Variants, Layer Detail · Input.
• Default/Hover 확인: 대부분 "Hover (고정)" 섹션이 있어 편합니다. 다만 섹션이 많은 Story(S10 18개, S11 13개)는 스크롤이 깁니다.
• 실험용 후보: 명확한 실험 Story는 없습니다. S20, S22는 구현 시점의 검증 용도가 강합니다.
• 설명 형식: Story 설명은 대부분 "Figma 노드 → 동작 → 데이터 소유" 순서입니다. 다만 S3, S4, S27~S30은 Story 머리말 설명이 없습니다(Args·개별 상태 Story).

3. 컴포넌트 구조와 재사용 관계

파일	줄	역할	사용하는 내부 모듈
SWHeader.tsx	461	Header 조립	아래 대부분
SWHeaderField.tsx / SWHeaderFields.tsx	52 / 79	필드 버튼 공통 표면, 5개 필드	Field, LayerIcons
SWHeaderDropdown.tsx	156	useSWHeaderDropdown(열기·키보드·바깥 클릭), SWHeaderMenuDetail(상세 버튼 공통), SWHeaderColorChip	—
SWHeaderLayerMenu.tsx	264	레이어 필드 + 목록, SWHeaderLayerRows(공유)	Dropdown, Fields, LayerIcons
SWHeaderColorMenu.tsx	211	색상 필드 + 목록, SWHeaderColorPanelBody·useSWHeaderColorMode(공유)	Dropdown, Fields, Input
SWHeaderLineStyleMenu.tsx	192	선스타일 필드 + 목록, SWHeaderLineStyleColumns·SWHeaderLinePreview(공유)	Dropdown, Fields, Input
SWHeaderStyleListMenus.tsx	150	문자·치수스타일 목록	Dropdown, Fields
SWHeaderInput.tsx	163	편집 Input, parseSWHeaderColor, parseSWHeaderNumber	—
SWHeaderPropertyPanel.tsx	327	속성창, useSWHeaderOverlay(속성창·K 가이드 위치)	Input, LineStyleMenu, PropertyFields
SWHeaderPropertyFields.tsx	221	속성창 레이어·선스타일·색상 필드 Dropdown	Layer/Color/LineStyle 공유 본문, Dropdown, Input
SWHeaderPropertyBar.tsx	53	속성Bar	Input
SWHeaderMore.tsx, SWHeaderKGuide.tsx, SWHeaderActions.tsx	118 / 77 / 26	More, K 가이드, 인쇄·팝업 가이드	KGuide → PropertyPanel(overlay)
SWHeaderDocumentTitle.tsx, SWHeaderHome.tsx, SWHeaderWindowControls.tsx, SWHeaderProperties.tsx, SWHeaderLayerIcons.tsx	219 / 39 / 43 / 30 / 87	문서·홈·창 제어·상세보기 토글·레이어 아이콘	—

점검 결과:

• 사용하지 않는 Import/로컬: 없음. tsc --noUnusedLocals --noUnusedParameters를 패키지와 앱 양쪽에서 확인했습니다.
• 사용하지 않는 CSS class: 없음. sw.css의 174개 class가 모두 TSX에서 쓰이거나 --${variant} 형태로 동적으로 만들어집니다.
• 사용하지 않는 Token: 없음. 108개 모두 var()로 참조됩니다.
• 같은 Selector가 반복됨: 44건입니다. 대부분은 의도된 구조입니다. 같은 class를 @container 반응형, prefers-reduced-motion, keyframes 단계, 추가 수정 덮어쓰기에서 다시 선언합니다(예: .hm-sw-header__document 7회). 한곳으로 합치는 것은 광범위한 CSS 구조 변경이므로 R-C2로 남깁니다.
• 공통화가 덜 된 곳:
  • SWHeaderLayerMenu가 useSWHeaderDropdown과 거의 같은 열기·바깥 클릭·위치 계산을 따로 구현합니다. 2차원 화살표 키 이동 때문입니다.
  • 속성Bar와 속성창이 같은 parse 규칙을 각자 갖고 있습니다. 속성창에만 decimals와 선스타일 목록 검사가 있어 동작이 다르므로, 합치면 속성Bar 동작이 바뀝니다.
  • useSWHeaderOverlay는 폭 값 314/208로 사용처를 구분합니다.
• 공개 export 중 패키지 밖에서 쓰지 않는 Props 타입: SWHeaderMoreProps, SWHeaderMenuDetailProps 등은 같은 파일 안에서만 쓰입니다. 공개 API이므로 그대로 둡니다.

자산

• 50개 중 48개가 코드나 CSS에서 쓰입니다.
• 미참조 2개: color-pick.svg는 colorize-default.svg와 바이트가 같은 중복이고, dropdown-arrow.svg도 쓰이지 않습니다. 둘 다 삭제하지 않았습니다(R-A1, R-A2).
• src/sw/assets/figma-reference/header-26-8944.png는 Text Stroke Story에서 이미지 블록을 뺀 뒤 참조가 없습니다. 원본 보존 지시에 따라 남겼습니다(R-A3).
• Text Stroke 상태: sw.css에 -webkit-text-stroke 선언이 없고 검정 text-shadow만 남아 있습니다.
• SVG 캔버스 배경 제거: 2026-10-19 후속 수정 상태 그대로이며, 이번에 변경하지 않았습니다.

4. 문서 목록 및 분류

문서	구분	상태
packages/sw/README.md	개요 + API 요약	날짜별 절이 쌓여 있음 → 상단에 현재 기준 색인 추가
docs/sw/sw-header-usage.md (629줄)	사용 가이드 + API + Storybook 안내	날짜별 절이 누적됨 → 색인 추가, 사실 오류 수정
docs/sw/sw-header-design-spec.md (690줄대)	디자인 명세	Text Stroke 표 오류 수정, §18 속성 필드 추가, 색인 추가
sw-header-*-verification-2026-10-16.md 11개	검증 보고(과거 기록)	변경 없음
sw-header-firefox-range-close-…-2026-10-19.md, sw-header-followup-four-…-2026-10-19.md, sw-property-fields-verification-2026-10-19.md	검증 보고(현재)	변경 없음
docs/sw/{detail-button,firefox-range,followup-four,property-close,property-fields}-qa/	증거 자료(PNG·JSON·log)	변경 없음, 삭제 없음
이 문서	정리 보고 · 2차 검토표	신규

• 링크 검사: SW 문서 17개의 상대 링크와 앵커를 모두 확인했습니다. 이번 수정 전후 모두 깨진 링크가 없습니다.
• 문서가 겹치는 구조: README·사용 가이드·디자인 명세에 같은 주제(속성창, Text Stroke, 상세 버튼)가 날짜별로 여러 번 나옵니다. "최신 기준" 안내가 각 문서 상단에 46개 쌓여 있어, 어느 설명이 현재인지 찾기 어렵습니다. 1차에서는 색인만 추가했고, 재구성은 R-D1R-D3입니다.

5. 1차에서 실제 수정한 내용

파일	수정	영향
src/sw/sw-header.stories.tsx	Text Stroke Story 설명: 이미 제거된 자기 색 Stroke(0.3/0.4px)를 표시한다는 오래된 문구 수정	문구만
〃	Color Dropdown 섹션 제목·설명의 "최신 예외 정책"을 날짜 기준으로 바꿈. "추출 버튼은 기존 정책 유지"를 실제 상태(btn_colorize Hover 26:11305)로 수정	문구만
〃	Line Style Dropdown 섹션 설명의 "최신 요청"을 날짜 기준으로 바꿈	문구만
〃	Story 전용 hexToRgbText를 지우고 공개 parseSWHeaderColor를 재사용	같은 결과(6자리 hex)
〃	FIELD_FIXTURE가 PROPERTY_FIXTURE를 다시 쓰던 것을 파생 방식으로 변경(다양함 행 + Figma 색상 예시만 덮어씀)	표시 동일, 필드 테스트 77/77 재확인
packages/sw/src/theme/sw.css	"Latest request" 주석 3개를 날짜 기준 주석으로 바꿈	주석만
packages/sw/src/components/sw-header/components/SWHeaderColorMenu.tsx	같은 주석 1개를 날짜 기준으로 바꾸고 칩·추출 버튼 Hover 상태를 정확히 적음	주석만
docs/sw/sw-header-design-spec.md	§6.1 표·토큰 표에서 제거된 -webkit-text-stroke-width·--hm-sw-header-text-stroke-width·--hm-sw-header-solid-stroke-width를 현재 상태로 수정. §18 속성 필드 13개 추가. 상단 색인 추가	문서
docs/sw/sw-header-usage.md	Text Stroke 문단의 자기 색 Stroke·제거된 변수 설명 수정. §12에 현재 33개 안내 추가. 상단 색인 추가	문서
packages/sw/README.md	Text Stroke·독립 버튼 Hover의 오래된 문구에 현재 상태 보충. 2026-10-19 속성 필드·게이지 절 추가. 상단 색인 추가	문서
docs/sw/sw-first-pass-cleanup-review-2026-10-19.md	이 보고서	신규

Story ID, 메뉴 이름, Story 수(33), 공개 export, Props, 컴포넌트 렌더링, CSS 규칙, 자산은 바꾸지 않았습니다.

6. 변경하지 않고 보류한 내용

• Story 삭제·이름 변경·분류(SW/Header/... 하위 그룹) 이동·통합
• 과거 검증 보고서 본문(당시 기록이므로 오래된 Stroke 설명이 있어도 그대로 둠)
• 사용 가이드·명세의 날짜별 절 재구성
• 미참조 자산 2개와 비교 PNG 1개의 삭제·이동
• CSS 중복 Selector 합치기, Dropdown 위치 계산 공통화, parse 공통화
• 섹션이 없는 Story(S3, S4, S27~S30)의 머리말 형식 통일(내용 추가가 필요해 2차로 넘김)

7. SAFE / REVIEW REQUIRED

KEEP: 위 컴포넌트 전부, 사용 중인 자산 48개, 33개 Story, 검증 보고 14개, 증거 폴더 5개, 테스트 스크립트 5개.

SAFE (이번에 적용함): §5 표의 항목. 모두 문구·주석·Story 내부 데이터 정의만 바꿨고, 실제 참조를 확인했습니다.

REVIEW REQUIRED (손대지 않음): 아래 §8의 R 번호 항목.

8. 2차 검토 목록

번호나 파일명을 지정해 주시면 2차에서 그 항목만 진행합니다. "판단"은 사용자 결정이 필요한 종류입니다.

번호	구분	현재 이름/경로	현재 역할	권장 정리	판단	영향도
R-S1	Storybook	33개 전체 (SW / Header)	한 단계 메뉴	SW/Header/기본, /Dropdown, /속성창, /구성·반응형, /QA 하위 그룹. Story ID가 바뀌므로 테스트 스크립트·baseline 갱신이 필요	분류 변경 검토	중간
R-S2	Storybook	S3 sw-header--default, S4 sw-header--controls	Args 예제	하나로 통합(Controls 패널이 있는 1920 프레임). 테스트가 두 ID를 사용	통합 검토	낮음
R-S3	Storybook	S20 sw-header--property-panel-variants	단독 4상태 + 조작 버튼	S27~S31과 겹침. 삭제하거나 S31에 조작 버튼 합치기	통합 / 삭제 검토	낮음
R-S4	Storybook	S22 sw-header--additional-hover	추가 수정 검증	상세 Hover는 S1, 색상 기준 필수 선택은 S12로 옮기기. 테스트 사용	통합 검토	낮음
R-S5	Storybook	S25 sw-header--colorize	btn_colorize 비교	S12 Color Dropdown의 섹션으로 합치기. 테스트 사용	통합 검토	낮음
R-S6	Storybook	S24 sw-header--dynamic-controls, S26 sw-header--composition	구성 API 2종	한 Story에 controls / hiddenControls·menuOrder 섹션으로 정리	통합 검토	낮음
R-S7	Storybook	S6 sw-header--responsive, S15 sw-header--responsive-more	반응형	이웃 배치 또는 통합	분류 변경 검토	낮음
R-S8	Storybook	S17 Layer Detail · Input	상세 버튼 + Input	Editable Input 등 이름 변경. 상세 버튼 부분은 S1과 겹침. 테스트 사용	이름 변경 검토	낮음
R-S9	Storybook	S1 Detail Buttons, S16 Text Stroke, S31 4개 비교	검증 화면	QA 그룹으로 이동(R-S1과 함께)	분류 변경 검토	낮음
R-S10	Storybook	S10 Document Dropdown(18개 섹션), S11 Layer Dropdown(13개 섹션)	상태 전체	상태 섹션과 Callback·예외 섹션으로 나누기	통합 / 분할 검토	낮음
R-S11	Storybook	S3, S4, S27~S30	머리말 없음	다른 Story와 같은 "Figma 노드 · 동작 · 데이터" 머리말 추가	이름·설명 검토	낮음
R-C1	Component	packages/sw/src/components/sw-header/components/SWHeaderLayerMenu.tsx	레이어 Dropdown 동작	열기·바깥 클릭·위치 계산을 useSWHeaderDropdown으로 합치고 2차원 키 이동만 남기기	통합 검토	중간
R-C2	Component(CSS)	packages/sw/src/theme/sw.css	전체 스타일	같은 Selector가 여러 곳에서 덮어쓰는 영역(문서·창·More·Motion) 정리, 날짜별 추가 절을 컴포넌트 절로 재배치	구조 변경 검토	중간
R-C3	Component	SWHeaderPropertyBar.tsx / SWHeaderPropertyPanel.tsx	같은 parse 규칙 2벌	공통 parse로 합치기. 속성Bar도 decimals를 따르게 되는 동작 변경	통합 검토	낮음
R-C4	Component	SWHeaderPropertyPanel.tsx useSWHeaderOverlay	속성창·K 위치	폭 314/208로 사용처를 판별하던 방식을 명시적 옵션으로 바꾸기	구조 변경 검토	낮음
R-C5	Component	SWHeader.tsx (461줄)	Header 조립	구성·반응형 계산 분리 검토(렌더링 구조 변경)	구조 변경 검토	중간
R-A1	Asset	packages/sw/src/assets/color-pick.svg	미참조, colorize-default.svg와 같은 파일	삭제	삭제 검토	낮음
R-A2	Asset	packages/sw/src/assets/dropdown-arrow.svg	미참조	삭제 또는 사용처 확인	삭제 검토	낮음
R-A3	Asset	src/sw/assets/figma-reference/header-26-8944.png	미참조 Figma 원본	보존 위치를 docs/sw 증거로 옮기거나 유지	유지 권장 / 이동 검토	낮음
R-D1	Document	docs/sw/sw-header-usage.md	사용 가이드	날짜별 절을 기능별 장(설치·Props·Dropdown·속성창·구성·Storybook)으로 재구성, 날짜 기록은 변경 이력 절로	통합 검토	낮음
R-D2	Document	docs/sw/sw-header-design-spec.md	디자인 명세	같은 방식으로 재구성, 상단 안내 6개를 색인 하나로	통합 검토	낮음
R-D3	Document	packages/sw/README.md	개요	날짜별 절을 요약 한 페이지 + 문서 링크로 줄이기	통합 검토	낮음
R-D4	Document	docs/sw/sw-header-*-verification-2026-10-16.md 11개	과거 검증	docs/sw/verification/ 하위로 이동(링크 갱신 필요)	분류 변경 검토	낮음
R-D5	Document	docs/sw/*-qa/ 5개	증거	docs/sw/evidence/ 하위로 이동(테스트 기본 출력 경로 갱신 필요)	분류 변경 검토	낮음

2차 우선순위 제안

1. R-S1 메뉴 분류. 사용자가 가장 자주 보는 부분이며, R-S9도 같이 해결됩니다.
2. R-S2 ~ R-S6 중복 Story 통합. 테스트 ID 갱신이 함께 필요합니다.
3. R-D1 ~ R-D3 문서 재구성.
4. R-A1, R-A2 미참조 자산 삭제.
5. R-C1 ~ R-C5 코드 구조. 디자인 회귀 검증을 다시 해야 하므로 마지막에 둡니다.

9. 기존 PASS 결과 영향 여부

기존 결과	이번 영향	처리
구성 시나리오 77/77, 기본 Header 10개 폭 비교	코드·CSS 규칙 변경 없음	기존 PASS 재사용(재실행 안 함)
Header 브라우저 검증 271건	같은 이유	기존 PASS 재사용
Chrome/Firefox 게이지바	같은 이유	기존 PASS 재사용
속성 필드 77/77	Story fixture를 바꿨으므로 영향 있음	이번에 재실행
detail-buttons verify(33개 Story ID·상세 버튼 상태)	Story 파일을 수정함	이번에 재실행
Typecheck / Build / Storybook Build	주석·Story 수정	이번에 재실행

이번 실행 결과는 커밋 메시지와 최종 보고에 적습니다.

10. 미검증 사항

• Firefox에서 Storybook을 다시 보지 않았습니다(CSS 규칙 변경 없음).
• 구성 시나리오 77개, 10개 폭 비교, Header 271건은 다시 실행하지 않았고 기존 PASS를 재사용합니다.
• 문서 재구성 후의 가독성은 2차 결정 사항이라 평가하지 않았습니다.