72 lines
11 KiB
Markdown
72 lines
11 KiB
Markdown
# 퍼블리셔 추가 수정 반영 보고서 — 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로 남긴다. 과거 날짜별 증거는 보존한다. [배포 실행 안내](publisher-distribution-guide.md), [신규 실제 React 화면](../../examples/publisher-list/main.tsx), [Guard 정책](ai-generation-guard.md).
|
|
|
|
## 추가 요청 반영
|
|
|
|
| 영역 | 반영 결과 |
|
|
|---|---|
|
|
| 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 공식 소스 검색 계약](https://tailwindcss.com/docs/detecting-classes-in-source-files).
|
|
|
|
## 보존 확인
|
|
|
|
- 시작 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로 보고한다.
|