퍼블리셔 추가 수정 반영 보고서 — 2026-10-10

작업 기준은 읽기 전용 D:\디자인시스템\HMDesign-퍼블리셔-사전공유\HMDesign-퍼블리셔-추가수정요청.md와 시작 HEAD 034e410efef0fdb5173d7a41aee65658b9068351이다. 범위 BOTH, Runtime React. 이번 확정 요청 → 충돌하지 않는 D-01/D-02 → 공식 Component/Pattern/Theme → 현재 Storybook → 과거 문서 순으로 적용한다.

RESULT: PARTIAL. 확정된 구현 요청은 반영했으며 아래 실제 실행 검증은 통과했다. 스크린리더·실기기 터치와 정적 Guard의 확인 불가능 항목은 NOT VERIFIED로 남긴다. 과거 날짜별 증거는 보존한다. 배포 실행 안내, 신규 실제 React 화면, Guard 정책.

추가 요청 반영

영역	반영 결과
1. 목록형 검색	업무 목록, 채용 목록, Data Table/Filter Bar 예제에 PageHeader 밖·흰 Card 하나·조건→검색어→조회→초기화·8px 간격을 적용. 기본 구성 중앙, 추가 조건 구성 왼쪽. 구성 기준 class로 결정하며 공통 FilterBar 기본 배치는 유지. 조회 Solid Green·초기화 Outline Gray, 모바일 줄바꿈·버튼 행 우측 정렬. 입력 초안과 조회 적용값 분리.
2. Button	Gray 기준 #767676, Outline의 ink/border/hover 통일. 기존 destructive Red token으로 Standard Solid Red 표시. Dialog/Alert Dialog 취소·삭제 Solid. Hover/Focus/Disabled와 기존 Variant/API 유지. 명시적 Runtime 취소색 override도 유지하고 Reset 검증.
3. Storybook 스타일	Typography의 기본·fallback·전체 stack 설명 분리. Color는 기존 Green/Brown/Orange 단계·HEX로 가로 배치, 기본색 강조. Label Input/Select 조합, Toggle 단독/단일·다중 그룹 비교. Tabs States 896px·20개 탭·이동 버튼. PageHeader 기본/Breadcrumb 비교. 기존 ID 유지.
4. Component 스타일	Table Hover/Selected/Selected+Hover만 #BDDFD4 20%, Checkbox 및 다른 공유 강조색 유지. Progress 내부 막대 우측 radius, consumer text가 막대를 밀지 않도록 내부 indicator 위치 고정. Accordion 제목 Hover Black 5%, 본문 유지. 제목+설명 뒤 Separator 하나, 공통 Separator API 유지.
5. Sheet/Drawer	네 방향 모두 안쪽 모서리만 기존 control radius token 재사용(현재 4px), 최종 수치로 확정하지 않음. 모바일 GNB/LNB는 기존 Sheet 사용. Drawer 데스크톱 우측 취소→실행, 모바일 전체 폭 실행 위·취소 아래. 기존 Vaul drag 계약 유지.
6. Navigation	Reference GNB+콘텐츠 LNB의 기본 icon 제외·선택 icon 허용, 같은 body 배경·세로선 하나·해당 Green/Brown 계열 선택/hover. 화살표 보존. 기존 Green LNB 펼친 그룹만 Black 8%, 전체 opacity 유지. 새 화면은 GNB_ONLY 및 GNBMobileMenu, Sidebar 없음.
7. Storybook 환경	Create a new story 액션만 숨김, 검색/필터/설정/도움말 유지. Designer Playground internal 태그로 일반 메뉴 제외, decorator를 해당 Story로 제한하여 임시 Theme 유출 방지. 메뉴 키보드 전환 문제는 실제 재현 후 outgoing Content exit animation만 최소 수정.
8. React 기능	C2~~C5, PT1~~PT2, R1~R3의 수정·재현·회귀 근거는 아래 표 참조.
9. 문서/배포	관련 계약·설명·링크·수량·실행 주소 정리. 독립 React GNB 사용자 목록 추가. 실제 CSS 진입점의 Tailwind source 연결 보완. 소스+compiled packages+Storybook+업무 화면+실행 안내를 ZIP으로 묶고 별도 압축 해제본에서 설치·열람·새 화면 제작/실행 확인.

기능 수정과 재현

ID	재현 및 최소 수정	검증
C2	기존 Checkbox/Progress asChild의 소비자 content 소실 재현. 단일 consumer element에 content와 내부 indicator를 합성. 기본 모드와 form 사용 유지.	실제 TSX 렌더 테스트, hidden 회귀 Story, 브라우저 consumer text/indicator 확인 PASS
C3	소비자 style이 내부 gap 변수를 덮는 문제 재현. 내부 변수→consumer style 병합, consumer 우선 계약 유지.	소비자 색/style과 spacing 동시 유지 PASS
C4	CENTER railway existing 분기의 style/ID/ARIA 유실 재현. 최종 요소에 나머지 DOM props 한 번 전달.	실제 React 렌더 테스트·타입 검사 PASS
C5	반복 Combobox/Date Picker 이름 연결/ID 경계 확인. useId로 기본 trigger/popup ID, controls/label 연결, consumer label/id 우선 유지. cmdk list의 label prop 사용.	반복 인스턴스 중복 ID 0, 팝업 접근성 이름/검색 영역 연결 PASS. 실제 SR 발화 NOT VERIFIED
PT1	두 표의 페이지 크기 label ID 중복 재현. useId로 인스턴스별 label 연결.	다중 표 렌더 테스트 PASS
PT2	readOnly·disabled 검색 값이 clear로 변경되는 문제 재현. 해당 상태에서는 clear 미제공.	보호 상태/일반 editable clear 렌더 테스트와 브라우저 PASS
R1	필수 Theme/Tailwind/status CSS 누락 검출 보완. 실제 경로가 확정된 누락은 FAIL, 그래프 해석 불가는 NOT VERIFIED.	기존 36개 테스트 보존(정책 변경에 맞춘 누락 기대값 수정), 4개 추가 = 40/40 PASS
R2	배포 선언이 참조하는 table-core를 직접 의존성으로 제공. 소비자 설치에서 react-table/core 버전 차이로 발생한 타입 실패도 재현, 두 의존성을 같은 9.2.4로 고정.	재빌드·npm pack·독립 소비자 설치·skipLibCheck:false 엄격한 타입 검사 PASS
R3	포인터/자동 실행과 키보드 focus 조건 차이 재현. parity 검사 중 specimen의 inert를 적용하고 실제 키보드 focus 검사 때 해제. 시작 방법을 판별해 자동·포인터는 focus NOT VERIFIED.	자동 136개 검사 PASS + focus NOT VERIFIED, Tab/Enter 실행 138개 검사·58개 parts PASS

컴포넌트 테스트는 동일한 실제 TSX를 Vite로 변환한 뒤 React로 렌더한다. 수정 전 6개 실패를 보존하고 수정 후 8/8 통과를 확인했다. Menubar는 ArrowRight/ArrowLeft 전환에서 새 메뉴가 즉시 닫히는 문제를 브라우저에서 재현했다. 기존 공개 API를 유지하며 닫히는 popup의 exit animation만 제거했고 양방향 키보드·포인터 전환을 확인했다.

최종 통합 검증

항목	결과 및 범위
TYPECHECK	root/UI/CENTER 및 신규 예제 PASS
UI_BUILD	공개 UI/CENTER 패키지 빌드 PASS
PRODUCTION_BUILD	업무 앱, Dashboard export, 채용 export, 신규 사용자 목록 PASS
STORYBOOK_BUILD	최종 static Storybook PASS. 65개 PRIMARY 대표 Story 실제 React 렌더 확인.
GUARD_TEST	40/40 PASS, 기존 36개 케이스 보존
COMPONENT_TEST	8/8 PASS
ACCESSIBILITY	Label 연결, 반복 popup/페이지 label ID, 메뉴 키보드, 모바일 GNB Escape/focus 복귀, Theme 실제 키보드 Focus PASS. 실제 스크린리더·실기기 터치 NOT VERIFIED.
VISUAL_CHECK	업무 목록/채용/사용자 예제 390·768·1280·1440px, 변경 Story의 desktop/mobile, Tabs 내부 넘침, Sheet 4방향, Drawer 두 배치, Table/Accordion/Progress/Navigation 계산 스타일 확인 PASS. 모든 viewport·모든 Story 조합을 검사했다는 의미는 아님.
PACKAGE_CONSUMER_TEST	npm pack된 공개 패키지 독립 설치 및 엄격한 타입 검사 PASS
PORTABLE_STORYBOOK	ZIP 압축 해제본의 실제 start-preview.bat, Node 20.20.1, Component/Pattern/Theme 열람 PASS
AI_SCREEN_GENERATION	기존 공개 HM 컴포넌트로 새 GNB_ONLY React 화면 생성·실행·조회·초기화·390px 줄바꿈/표 내부 스크롤 PASS. ZIP에서 새 폴더에 복사 후 typecheck/build/run도 PASS.
생성 Guard	새 화면 FULL_SCREEN GNB_ONLY, 업무/Story 소비 조합 PARTIAL: FAIL 0, 일부 NOT VERIFIED. 상속 tsconfig 해석·승인된 slot 소비 스타일·React 렌더는 Guard 정적 판정 한계로 남김. 소스/브라우저 추가 확인을 PASS로 대체 기재하지 않음. 최종 실제 CSS 진입점 PARTIAL 검사도 FAIL 0·NOT VERIFIED.
정적 감사	내부 MD 링크/heading, CSS import, 공개 import/export artifact 확인. 누락 없음. 최신 수량은 최종 로컬 증거를 기준으로 함.

Tailwind는 실제 src/index.css의 source("./") 및 공개 HM CSS의 자체 compiled 폴더 검색을 사용한다. Windows에서 source(none)+파일 glob 및 compiled index.js 단일 경로가 utility를 누락하는 상태를 재현했다. package build의 배포 source를 ./로 바꾼 뒤 display:flex, flex-wrap:wrap, 표 overflow:auto, 페이지 390px 폭과 실제 Focus ring을 확인했다. 이 소비 환경 수정은 공통 Component CSS로 넘침을 감춘 것이 아니다. Tailwind 공식 소스 검색 계약.

보존 확인

시작 HEAD와 비교해 D-01/D-02의 Tabs 소스/CSS, Carousel 소스, default.json, Primitive/default Theme CSS 및 생성 default 값은 변경 없음. 신규 semantic/primitive token 없음. 확정 요청에 필요한 Component mapping만 수정.
기존 공개 export 계약 유지. 실제 artifact export 수 UI 255 / Theme 8 / CENTER 25 / CENTER Reference 10.
기존 291개 Story ID 삭제 없음. 현행 292개 중 추가 1개는 internal verification 회귀 Story. 인벤토리 65 PRIMARY / 227 HIDE. 신규 업무 화면은 Story 등록 없이 독립 React 앱.
참고 원본에 쓰기 작업 없음. 참고 폴더 SHA256 감사 비교 변화 없음. 이전 D-01/D-02·과거 검증 로그와 증거는 당시 기록으로 보존.
공식 Gitea: NOT ACCESSED / NOT MODIFIED. GitHub main 일반 commit/push만 사용하며 결과 SHA와 로컬·원격 일치 정보는 최종 응답/로컬 보고서에 기록.

남은 문제와 배포 판단

확정 구현 요청은 완료. 미반영된 확정 사항 없음. 최종 Sheet radius 수치·Color의 상징적 의미·설정/도움말 숨김 범위는 요청대로 확정하지 않았다. 기존 drag 구현은 보존했으나 실제 손가락 drag 닫기와 SR 발화, Node가 없는 PC의 설치 절차는 NOT VERIFIED.

ZIP npm 설치에서 기존 shadcn 개발 도구 의존성에 High 7건이 보고됐다. 운영 의존성 npm audit --omit=dev는 0건이며 해당 개발 그래프 버전을 이번 변경에서 바꾸지 않았다. 강제 audit fix는 수행하지 않았다. 개발 도구 보안 정리는 별도 확인이 필요하다. 빌드의 500kB chunk/일부 bundler 성능 경고와 Storybook 내부 provider 안내는 남아 있다. 검증한 최종 화면에서 지속적인 앱 console error는 관찰하지 않았다.

정적 Storybook/예제 열람과 검증된 Node 환경의 소스 제작 배포는 가능하다. 기능·빌드·회귀 필수 검사 실패는 없으며 Guard/SR/실기기 미검증을 제품 인증이나 완전한 접근성 승인으로 해석하지 않는다. 이 제한을 포함해 RESULT는 PARTIAL로 보고한다.

11 KiB Raw Blame History