HMDesign/docs/guidelines/publisher-integration-2026-10-09.md

퍼블리셔 사전공유 통합 보고 — 2026-10-09

최신 실제 구현 결과는 후속 실제 구현 결과를 따른다. 아래 최초 기록의 보류·100% 유지·검증 수치는 21:57:22 이전 문서 통합 작업의 이력이며, 후속 요청 이후 현재 구현을 대신하지 않는다.

최초 문서 통합 결과 (이력)

RESULT: PARTIAL

REFERENCE: D:\디자인시스템\HMDesign-퍼블리셔-사전공유 (읽기 전용)

TARGET: D:\디자인시스템\hmdesign

범위: STORYBOOK_ONLY / React. 문서와 기존 Storybook Reference에 실무 조합 지식을 통합한다. Production Component·Pattern 구현, 공개 API, Theme·Token 값과 기존 대표 디자인은 유지한다. PARTIAL은 D-02의 공통 Theme 적용 및 외부 소비 화면 검증을 보류한 결과이며, 이번 문서·Usage 보강의 실패를 뜻하지 않는다.

분석 결과

참고 폴더 전체는 디자인변경-사전공유.md v0.2와 images/01-panel-before-after.png, images/02-gradient-before-after.png 3개 파일이다. 문서 전체와 두 이미지를 확인했다. 별도 Component·Pattern·Story 소스나 원본 예시 앱은 제공되지 않았다. 이미지의 탭 개수·배치·임시 간격을 새로운 규칙으로 추정하지 않는다.

현재 대상의 AGENTS·README·주요 guideline, Component/Pattern 인덱스, Foundation/Theme/Storybook 구조와 공개 export·CSS entry를 확인하고, 참고 문서가 지정한 Tabs·Card·Table·PageHeader의 실제 API/CSS/대표 Story를 집중 대조했다. 관련 없는 모든 Component의 전수 동작 검증을 수행했다는 의미는 아니다. 참고 자료가 없는 나머지 규격은 기존 공식 문서를 유지한다.

사전공유 항목	수정 전 분류	근거 / 처리
D-01: 불필요한 탭 패널 박스 제거	부분 반영됨	TabsContent 자체는 이미 무배경·무border. 기본 문서와 상태 specimen은 별도 박스를 사용. 문서·Usage에 평면 조합 추가
White Card 안은 surface, 페이지 content 면은 content	부분 반영됨	기존 panelSurface API와 CSS 존재. 상황별 선택·상위 표면 책임·content Card 예외 안내 보강
각 패널 padding 24px 0	미반영	기존 기본 예제 p-4 / bordered panel. 새 Usage와 권장 기본 예제 px-0 py-6; 전역 spacing 규칙으로 승격하지 않음
바깥 Card 유지 / Input·Table·Alert 고유 스타일 보존	부분 반영됨	기존 Component 스타일은 존재. 패널 제거 적용 범위와 Do / Don't를 명시
D-02: Primary 상단 White 80%	현재 구현과 충돌	공통 tabs.css는 100%. 원본은 방향 승인·국소 예시 적용·최종 요청서 대기. 공통 변경 보류 및 현재 값·목표 범위 구분
D-02의 방향·하단색·전체 opacity·Secondary·상태 보존	부분 반영됨	현재 CSS/동작 존재. alpha와 전체 opacity의 차이 및 향후 변경 제외 범위를 문서화
PageHeader 제목→설명 8px / 아래 콘텐츠 20px	이미 반영됨	page-header.css와 문서 일치. Tabs를 첫 콘텐츠로 배치하는 안내 보강
기본 Card padding·Header→Content 24px	이미 반영됨	card.css / Card TSX와 문서 일치. size="sm" 12px 호환 범위 유지
CardDescription ≠ PageHeaderDescription	이미 반영됨	CardDescription shadcn 호환 범위가 이미 문서화. 조합 안내에서 연결, 신규 규격 미추가
비교 예시의 48px·Card Token을 전역 gap으로 사용	현재 HMDesign 구조상 불필요	원본도 공통 변경에서 제외. Foundation의 전역 spacing scale 미정의와 일치
Radix 선택·키보드·focus·disabled·넘침 유지	이미 반영됨	기존 Tabs TSX / CSS / verification Story 유지. 새 Usage에도 접근 가능한 이름과 입력 Label 사용
utility 실적용 / desktop·mobile 넘침 확인	부분 반영됨	기존 검증 원칙 존재. 조합별 계산값과 확인 기준 연결
참고 예시의 모바일 넘침·제목·Token 이슈	추가 확인 필요	예시 소스 미제공. 공통 Component 결함으로 단정하거나 무관한 구현을 수정하지 않음
Dashboard·Form·Search·Filter·Navigation·Empty/Loading/Error 새 규격	현재 HMDesign 구조상 불필요	원본에 새로운 계약 없음. 기존 Component/Pattern 선택 경로와 소비자 데이터 상태 책임만 안내
원본 공통 Theme 및 모든 소비 화면 적용	추가 확인 필요	참고 문서도 미적용 / 전체 영향 미검증. 외부 화면의 파일·범위가 제공되지 않음

이미 반영된 내용은 기존 API·상태·Geometry·색상 연결·Typography·역할별 간격이다. 새로 반영한 내용은 상황별 조합, 패널 여백 소유권, 보존할 고유 스타일, 접근성·Responsive 실무 점검과 디자인 방향/출하 값의 구분이다.

수정 파일

파일	변경 이유 / 내용
README	실무 조합·보고서 진입 링크 추가. 존재하지 않는 AGENTS Quick Start anchor를 실제 필수 규칙 링크로 정정
개발 적용 가이드	Publisher/Developer 점검표, 역할별 간격·Theme·State·Responsive·Accessibility·AI 참조 연결. 현재 Story import 이름 명확화
Tabs	권장 기본 예제의 중첩 박스 제거, Card 조합·surface 선택·Do/Don't·입력 보존·D-02 보류 상태 추가
Card	Tabs 안쪽 좌우 중복 여백 방지, surface별 연결과 small/Description/Meta 예외 구분
PageHeader	제목 아래 Tabs 조합 시 8px·20px 유지, 24px·48px 오용 방지와 Typography 역할 구분
Tabs Story	기존 All 안에 Card/page Usage와 Do/Don't 추가. 공개 Component 조합·입력 상위 state·고유 Label ID·Table 내부 스크롤
이 보고서	참고 자료 전체의 비교 분류·보류·변경·검증 이력. 과거 2026-10-06 감사 기록을 덮어쓰지 않도록 날짜별 보고서 1개 추가

MD / Component / Pattern / Storybook 보강

• MD: 기존 Tabs·Card·PageHeader·개발 가이드로 통합하고 공통 내용은 링크로 연결했다. 기존 Foundation·Theme·Navigation 문서를 복제하지 않았다.
• Component: 새 Component/Variant/Props 불필요. 실제 Card, CardHeader, CardTitle, CardContent, Tabs, TabsList, TabsTrigger, TabsContent, Input, Label, Textarea, Table 계열을 공개 API에서 사용했다. Component 소스는 변경하지 않았다.
• Pattern: PageHeader의 기존 margin과 역할별 Typography를 Tabs 조합에 연결했다. Pattern Runtime·Navigation 정책·Dashboard 최소 폭/내부 스크롤은 변경하지 않았다. Usage는 컴포넌트 조합 Reference로 새 업무 페이지가 아니다.
• Storybook: 기존 components-navigation-tabs--all에 Usage / Do / Don't를 추가했다. 기존 Overview / Default API / Variants / States, 숨김 verification ID·대표 페이지 스타일·메뉴 구조는 유지했다. 원본 이미지를 복사하거나 새로운 독립 디자인을 만들지 않았다.

정합성 확인

• MD ↔ Component: TabsContent 무배경·무border, List 기본 fill/content와 실제 surface 선택, Card의 24px/default 및 12px/sm, PageHeader의 8px·20px을 코드와 대조했다.
• Component ↔ Storybook: 기존 API·대표/verification Story 유지. 새 예제는 모두 공개 export로 렌더하며 폼 상태는 소비 조합에서 관리한다.
• Component ↔ Theme/Token: 기본 Primary 상단 White 100%를 현재 값으로 안내한다. D-02 80%는 보류로 구분하며 Semantic·Mapping·Theme JSON·Token 값은 수정하지 않았다.
• Pattern ↔ Storybook: PageHeader/Navigation/Dashboard 기존 계약을 유지한다. PageHeader 대표 Story의 8px·20px과 Tabs Usage의 표면·padding, Table 고유 스타일·내부 스크롤 범위를 실제 렌더에서 확인했다.

검증

아래는 이번 최종 통합 확인 결과다. 과거 문서의 PASS를 이번 결과로 재사용하지 않았다.

항목	이번 결과
TYPECHECK	PASS — npm run typecheck의 사전 Theme/package 검증 후 workspace 연결 복구, npm run typecheck --ignore-scripts 통과. 최종 Story의 수축 클래스 보강 후 앱 TypeScript 검사 추가 확인
BUILD	PASS — npm run build --ignore-scripts (기존 사전 검증을 중복하지 않음). 최종 Production 소스는 이 빌드 이후 변경 없음
STORYBOOK_BUILD	PASS — npm run build-storybook --ignore-scripts. 모바일 Card 수축 수정 후 영향받는 Storybook 빌드만 다시 수행
TEST	PASS — node --test scripts/ai-generation-guard.test.mjs, 기존 14개 테스트 통과. 별도 일반 test script는 없음
LINT	NOT VERIFIED — 프로젝트에 lint script/config가 없음
DOC_LINKS	PASS — 수정 문서·신규 보고서의 로컬 경로/heading 링크 73개 확인 (외부 URL은 네트워크 검증 범위 밖)
EXPORTS	PASS — 새 예제의 공개 UI import 18개 실제 package export 확인. 기존 Story export/ID 유지
CSS / THEME	PASS — check:theme-defaults의 JSON 71색/계약 73개 기본값 일치. Theme/Token/CSS source SHA-256 유지, 실제 panel utility 계산값 확인
GUARD	NOT VERIFIED — node scripts/ai-generation-guard.mjs --target . --scope PARTIAL --files src/components/tabs.stories.tsx --json 1회 실행. SCOPE-001: Story가 Production graph 밖. 신규 Production 화면 검사가 아니므로 Storybook을 억지로 Production entry로 지정하지 않음
VISUAL_CHECK	PASS (관련 범위) — 빌드된 Tabs / Card / PageHeader의 실제 Edge React 렌더, Tabs 1280×900·390×844, PageHeader 두 폭 확인. 전체 Component·브라우저 전수 검증은 NOT VERIFIED
GIT_DIFF / 미커밋 상태	NOT VERIFIED — 대상 및 상위 경로에 Git 저장소가 없음

실행 환경 복구와 경고

• 최초 타입 검사는 node_modules/@hm-design/{ui,center-graphic}의 Junction이 존재하지 않는 D:\디자인시스템\HMDesign-main\hmdesign\packages\...를 참조해 실패했다. 이전 링크를 각 *.publisher-original-junction 이름으로 보존하고 현재 대상의 packages로 연결했다. 로컬 소켓도 sandbox에서 차단되어 실제 검증 서버만 제한 밖의 127.0.0.1:6025로 실행했다. Source·Dependency 버전·lockfile은 변경하지 않았다.
• Build/Storybook Build에는 기존 문서에서도 기록된 Tailwind bg-[var(...)] 최적화 경고와 500kB 초과 chunk 경고가 있다. 빌드는 exit 0이며 이번 작업에서 전체 CSS/번들 구조를 재설계하지 않았다.
• Browser Console: Tabs 및 PageHeader 확인에서 error/warn 0건. 시각/계산값 확인은 정적 Guard와 별개로 수행했다.

실제 렌더 확인

• Tabs Usage의 두 패널: background: transparent, border: 0px, padding: 24px 0px, radius 0. Input 시작점은 패널 시작점과 일치하고 Input의 기존 1px border를 유지한다.
• White Card: Card border 1px, 위/아래 padding 24px, CardContent 좌우 24px. Secondary 선택 면 White. 페이지 직접 배치: 기존 content 면 위 Primary, 상단 White 100% → content, 전체 opacity 1. Tab 높이 34px·16/24/700 유지.
• 최초 새 Card Usage에서 Table 패널을 열었을 때 grid 자식 Card의 자동 최소 폭으로 모바일 문서 폭이 586px이 됐다. **새 조합의 Card 자체에 min-w-0**를 추가해 해결하고 문서에 같은 수축 조건을 안내했다. 공통 Card/Table을 수정하거나 Table 최소 폭을 낮추지 않았다.
• 최종 모바일: viewport 390px / 문서 client=scroll=375px(브라우저 세로 scrollbar 제외), Card width 343px / 패널 293px, 페이지 패널 343px. Table min-width 520px / 내부 overflow-x auto / scrollWidth 520px. 문서 전체 가로 넘침 없음. Table의 가로 스크롤 가능 범위는 계산값으로 확인했으며 수동 scrollbar 이동은 NOT VERIFIED.
• Desktop: viewport 1280px / 문서 client=scroll=1265px. 실제 클릭·ArrowRight·Home·End의 탭 전환, 상위 state의 입력 초안 보존, 3px focus-visible 링을 확인했다. 기존 넘침 버튼은 list 폭 192px / scrollWidth 605px에서 scrollLeft 0→36으로 이동하며 선택을 유지한다.
• Card 대표 Story: surface/content, padding·gap 24px, Title 20/28/600. PageHeader 대표 Story: 설명 margin-top 8px / Header margin-bottom 20px / Title 28/36/700, desktop/mobile 문서 가로 넘침 없음.
• 검증 화면: Desktop Usage: _local/publisher-integration/desktop-usage.jpg (당시 로컬 보관 증거, Git Clone 미포함), Mobile Table: _local/publisher-integration/mobile-table.jpg (당시 로컬 보관 증거, Git Clone 미포함). 로컬 스크린샷·baseline·검증 로그는 gitignore의 _local/에 둔다(소스 배포물에는 미포함).

기존 미커밋 파일 보존

시작 시 git status --short는 not a git repository로 실패했고 루트 .git이 없는 것을 확인했다. 커밋/미커밋 구분은 불가능하다. 기존 작업 삭제·reset·checkout·restore·clean은 실행하지 않았다.

수정 전 대상 파일 502개의 SHA-256 목록과 파일 사본을 _local/publisher-integration/에 보존했다. node_modules·빌드 결과·tsbuildinfo·기존 _local 등은 제외했다. 참고 원본 3개 파일은 별도 해시로 읽기 전용 보존을 확인한다. 새 빌드 산출물은 기존 gitignore 범위이며 Git 추가/커밋은 수행하지 않는다.

최종 해시 대조에서 기존 파일 중 변경은 위 6개 파일뿐이며 보고서 1개를 추가했다. 그 외 대상 기존 파일과 참고 원본 3개는 byte 단위로 동일하다. 기존 Tabs의 Overview / Default API / Variants / States 및 Compatibility 구역은 소스 비교로 동일함을 확인했다. Component·Pattern·Foundation·Theme·Storybook 설정·package/lockfile은 보존했다. 이는 Git diff를 실행했다는 의미가 아니다. 검증용 로컬 서버는 종료했다.

추가 검토 필요

• D-02 최종 적용 파일·범위·Theme 영향과 외부 소비 화면의 override/호환성. 요청서 확정 후 기존 content branch의 상단 stop만 검토한다.
• 참고 예시 앱 소스의 모바일 넘침·제목·Token 조합. 현재 자료만으로 결함 위치를 확정할 수 없다.
• 외부 프로젝트·전체 Component의 브라우저별 회귀·접근성/대비 전수 감사. 이번 관련 조합 확인 범위와 구분한다.

신규 Component / API가 필요하지만 보류한 항목

없음. D-01은 기존 Composition, D-02는 기존 CSS Mapping 범위로 해결 가능하다. 새 공개 opacity 입력·Theme Token·Responsive Variant를 만들 근거가 없다.

최종 판단

사전공유의 실무 지식은 기존 문서와 대표 Tabs Usage에 선별 통합했다. 공통 Theme의 80% 전환이나 모든 외부 소비 화면 적용은 완료로 표시하지 않는다. 현재 공식 구현이 가진 API·Theme·상태 규칙을 유지하면서, 소비자가 중첩 박스와 중복 여백을 피할 수 있는 확인 가능한 조합을 제공한다.

작업 시간 (Asia/Seoul)

• Started At: 2026-10-09 21:36:48 KST
• Completed At: 2026-10-09 21:57:22 KST
• Actual Duration: 20분 34초
• Estimated Duration: 40–60분 (분석 15–20 / 보강 15–25 / 검증 10–15)
• Variance: 예상보다 19분 26초–39분 26초 단축

후속 실제 구현 결과

RESULT: PASS (현재 대상의 명시적 D-01/D-02 구현 범위)

적용 근거와 영향 분석

• 참고 원본은 여전히 v0.2 문서와 이미지 2개이며 별도 ‘최종 요청본’ 파일은 없다. 사용자의 후속 요청이 이전 보류를 해제하고 D-01/D-02의 실제 구현을 명시하므로, 원문의 방향 승인/국소 적용 표기를 이유로 구현을 제외하지 않았다. 참고 파일은 수정하지 않았다.
• 범위 BOTH / React: 공개 패키지의 Tabs CSS Mapping, 대표 Component/Pattern Story, 현행 문서. 새 Component·Pattern API·업무 페이지·Navigation을 만들지 않는다.
• D-02의 적용 대상은 [data-slot="tabs-frame"][data-fill="true"][data-panel-surface="content"]가 설정하는 --hm-tab-fill-face이며, 실제 사용 CSS 속성은 Fill active trigger의 background-image다. 상단 --hm-sem-palette-white만 alpha 0.8로 합성한다. Gradient 방향/stop 0%·100%, 하단 content, 경계·전경·아이콘·전체 opacity는 유지한다.
• 공통 흰색 Palette·Semantic·Theme JSON·다른 Component Mapping을 변경하지 않는다. Secondary(surface)는 불투명 White, Legacy non-fill은 기존 selected background·경계·조합을 유지한다. Hover·Focus·Disabled 상태 CSS와 Radix API/동작은 유지한다.
• 수정 전 실제 TabsList 소비처는 src/components/tabs.stories.tsx 하나다. 신규 연결은 기존 PageHeader 대표 Story 내부이다. Production App·Dashboard·GNB·LNB에는 Tabs 소비처가 없으므로 불필요하게 이 화면을 수정하지 않는다. 외부 패키지 소비자는 같은 content branch 사용 시 새 face를 받으며 외부 override·코드 전수 확인은 자료 부족으로 ‘확인 필요’다.

모든 요청 재분류

요청 / 이전 분류	최종 분류	실제 반영 / 확인 범위
D-01 중첩 박스 제거 / 부분 반영	반영 완료	모든 Fill 대표·verification panel의 border/background/radius 제거. Card Usage는 기존 바깥 Card 유지
상황별 panelSurface / 부분 반영	반영 완료	content 페이지는 Primary, White Card는 Secondary. 각 실제 부모 표면 연결
TabsContent 24px 0 / 미반영	반영 완료	Fill 예제와 PageHeader Pattern 실제 panel에 px-0 py-6. 전역 Token으로 승격하지 않음
바깥 Card·Input·Table·Alert 고유 스타일 / 부분 반영	반영 완료	Component 고유 CSS·바깥 Card 유지. Tabs 패널 box만 제거
D-02 Primary 상단 White 80% / 충돌·보류	반영 완료	해당 Tabs content branch의 gradient 상단 stop만 alpha 0.8. 현재 문서·Story 설명도 80%로 갱신
D-02 하단/전체 opacity/Secondary/상태 보존 / 부분 반영	반영 완료	하단 content 불투명·전체 opacity 1, Secondary/Legacy와 상태 규칙 유지
PageHeader 8px·20px / 이미 반영	반영 완료	기존 Pattern + Tabs를 직접 합성. 제목/설명·Header/Tabs 실제 간격 확인
Card 여백·Header/Content 24px / 이미 반영	반영 완료	Card Usage의 기존 기본 여백 유지, size=sm 호환 규격 미변경
CardDescription과 PageHeaderDescription 구분 / 이미 반영	반영 완료	Description API·Typography 유지, 동일 규격 강제 없음
비교용 48px·Card Token 전역 재사용 제외 / 불필요	반영 완료	원문의 제외 지침 준수. 새 전역 spacing 규칙 미추가
선택·키보드·focus·disabled·넘침 / 이미 반영	반영 완료	Component TSX·API·상태 CSS 보존 및 관련 브라우저 검증
utility 실적용·desktop/mobile 확인 / 부분 반영	반영 완료	최종 빌드의 1280px·390px 계산값·화면·동작 확인 완료
참고 예시 원본 모바일·제목·Token 이슈 / 추가 확인	확인 필요	예시 소스 미제공. 현재 대상의 관련 조합은 직접 검증하지만 외부 원본 앱 수정 완료로 표시하지 않음
Dashboard/Search/Filter/Navigation/Empty 등 신규 규격 / 불필요	반영 완료	원본에 변경 요청 없음. 기존 Component/Pattern 규칙을 유지하라는 범위 제한 준수
모든 외부 소비 화면 반영·전체 영향 / 추가 확인	확인 필요	외부 앱 소스/override/배포 범위 미제공. 현재 공개 패키지와 저장소 내 Tabs 소비처는 적용

명시적 수정 요청의 미반영 항목: 없음. 확인 필요는 제공되지 않은 외부 자료·전수 검증 범위이며 D-01/D-02의 구현을 보류한 것이 아니다. Legacy Compatibility는 원문이 보존하도록 한 기존 동작/예외이며 새 Fill 디자인 적용을 제외한 이유가 명시돼 있다.

실제 수정 파일

파일	수정 내용
Tabs CSS	content branch face 상단 alpha 1→0.8의 단일 CSS 선언 변경
Tabs Story	Fill 전체 panel 평면 조합·상위 표면 연결. Legacy만 기존 조합 유지, 기존 Usage/state/ID 보존
PageHeader Story	기존 PageHeader 바로 아래 Tabs / Table 실제 합성, 새로운 Story 메뉴/API 없음
Tabs 문서	현재 80% 구현·영향·예외·Fill 예제 안내, 보류 해제
PageHeader 문서	실제 Pattern 조합·80%·20px 연결 명시
개발 적용 가이드	현재 출하 값·대표/verification의 동일 기준·제한된 Theme 변경 범위 안내
이 보고서	기존 작업 이력 보존, 후속 구현 결과·전체 요청 재분류·검증 기록 추가

패키지 dist와 앱/Storybook 산출물은 기존 build로 재생성하며 source 변경 목록과 구분한다. Dependency·lockfile·공개 export·Component TSX·Card/PageHeader/Table CSS는 변경하지 않는다.

후속 검증

항목	결과
TYPECHECK	PASS — npm run typecheck의 Theme/package 사전 검사 후 Story 내부 Props 타입 오류 수정, npm run typecheck --ignore-scripts의 루트/workspace 검사 통과
BUILD	PASS — npm run build --ignore-scripts, 사전 package/Theme 검사는 중복하지 않음
STORYBOOK_BUILD	PASS — npm run build-storybook --ignore-scripts, 최종 실제 Storybook 빌드
TEST	PASS — node --test scripts/ai-generation-guard.test.mjs, 기존 14개 통과
DOC_LINKS / EXPORTS	PASS — 변경 문서의 로컬 path/heading 링크 56개. 두 Story 공개 import 각 18개/23개 확인, 기존 Story ID 유지
CSS 영향 / API 보존	PASS — PostCSS 선언 대조에서 target branch의 face 1개 선언만 변경. compiled package CSS도 source와 일치. Component TSX·export·Theme JSON·비대상 CSS는 hash 동일
VISUAL_CHECK 1280 / 390	PASS — 실제 Edge React 렌더, Tabs 대표 및 PageHeader Pattern 두 폭. Legacy·Disabled·Overflow·LongLabel 회귀와 실제 Table scrollbar 이동 확인
GUARD	NOT VERIFIED — PARTIAL 1회 실행. 수정 package CSS/Stories가 Production bootstrap graph 밖인 SCOPE-001 3건, FAIL 없음. 정적 Guard PASS로 오기하지 않음
LINT	NOT VERIFIED — 별도 lint script/config 없음
GIT_DIFF	NOT VERIFIED — .git 없는 폴더, 미커밋 상태 판정 불가

실제 브라우저 결과와 제한

• Primary: 실제 background-image = linear-gradient(color(srgb 1 1 1 / 0.8) 0%, rgb(245, 240, 229) 100%), 전체 opacity=1. Secondary는 기존 불투명 White gradient. 높이 34px·16/24/700·Green Light 3 경계를 유지한다.
• 대표 Tabs의 Fill 패널 7개는 background transparent / border 0 / radius 0 / padding 24px 0. Card Usage의 외곽 border·배경·24px 여백과 Input 1px border, Table White 행·520px 최소 폭은 유지한다.
• Tabs 문서 client=scroll: 1280px viewport에서 1265px, 390px viewport에서 375px(세로 scrollbar 제외). Card/Table 가용 폭 293px, 페이지 Table 가용 폭 343px, 둘 다 scrollWidth 520px이며 문서 전체 가로 넘침 없음. Card Table의 실제 scrollbar drag는 scrollLeft 0→227px으로 이동했다.
• PageHeader Pattern: 제목→설명 margin 8px, Header→Tabs 실제 거리 20px, panel 24px 0·무배경·무border, Primary alpha 0.8 / opacity 1. desktop 문서 폭 1280px, mobile 390px로 가로 넘침 없음. mobile Table container는 client 358px / scrollWidth 520px. ‘완료 업무’ 실제 클릭 시 완료 Table로 전환한다.
• 클릭·ArrowRight·Home·End 전환, 입력 초안 후속 구현 검증 보존, 3px focus-visible ring 유지. Disabled는 opacity 0.5·pointer-events none·tabIndex -1이며 메뉴 1에서 ArrowRight가 disabled 메뉴 2를 건너뛰어 메뉴 3을 선택한다.
• Legacy non-fill 두 예제는 선택 White / gradient none / panel border 1px·padding 16px로 기존과 동일. Compatibility의 surface-only Fill은 Secondary White / flat panel로 새 조합을 따른다.
• 기존 Overflow는 list client 192px / scrollWidth 605px에서 다음 버튼 scrollLeft 0→36px·선택 유지. 390px LongLabel 문서 폭 390px이며 frame 358px/260px 내 기존 넘침 버튼으로 수용한다.
• Tabs와 PageHeader Pattern Console error/warn 0건. Build/Storybook Build의 기존 Tailwind bg-[var(...)] 최적화 경고·500kB chunk 경고는 남아 있지만 두 명령 exit 0이다. 전체 브라우저/외부 소비 앱 회귀·외부 URL 링크·Hover 포인터 전수 감사는 NOT VERIFIED이며 상태 CSS 보존과 이번 관련 렌더 확인 범위를 구분한다.
• 화면 기록: Tabs 1280: _local/publisher-implementation/tabs-desktop.jpg (당시 로컬 보관 증거, Git Clone 미포함), Tabs 390: _local/publisher-implementation/tabs-mobile.jpg (당시 로컬 보관 증거, Git Clone 미포함), Pattern 1280: _local/publisher-implementation/pattern-desktop.jpg (당시 로컬 보관 증거, Git Clone 미포함), Pattern 390: _local/publisher-implementation/pattern-mobile.jpg (당시 로컬 보관 증거, Git Clone 미포함). _local/의 증거·사본·로그는 기존 gitignore 범위로 source 배포와 구분한다.

기존 작업 보존

이번 시작 상태의 기존 source 503개와 참고 원본 3개의 SHA-256 목록·수정 전 사본을 _local/publisher-implementation/에 별도로 확보했다. 최초 _local/publisher-integration/ 기록은 덮어쓰지 않는다. 초기화·삭제 명령이나 Git 추가/커밋을 수행하지 않는다.

최종 대조에서 수정은 위 7개 파일로 한정됐고, 나머지 기존 파일 496개와 참고 원본 3개는 byte 동일하다. 기존 첫 단계 문서·Usage는 필요한 부분만 이어서 수정했고, 그 외 이전 작업 파일·이력·백업은 보존했다. 브라우저 viewport를 복원하고 검증용 로컬 서버를 종료했다.

후속 작업 시간 (Asia/Seoul)

• Started At: 2026-10-09 22:00:35 KST
• Completed At: 2026-10-09 22:17:11 KST
• Actual Duration: 16분 36초
• Estimated Duration: 25–40분
• Variance: 예상보다 8분 24초–23분 24초 단축

프로젝트 전체 회귀 검증 및 로컬 커밋 판단

후속 회귀 검증은 현재 저장소 전체의 Component / Pattern / Foundation / Theme / Storybook / 문서를 대상으로 수행했다. Runtime은 REACT_VITE이며 실제 운영 앱과 기존 Storybook을 함께 검사했다. 앞 절의 구현 이력은 보존하며, 이 절이 전체 회귀 범위의 최신 판정이다.

RESULT: PARTIAL
TARGET: D:\디자인시스템\hmdesign

[전체 영향 검증]
Component: PASS — 전체 Story 렌더링, 공개 import/export, 대표 크기·상태 조합 확인
Pattern: PASS — PageHeader, Dashboard, Data Table, Filter Bar, GNB/LNB와 기존 업무·채용 화면 확인
Foundation: PASS — Color/Typography/Layout 대표 화면 및 기존 source hash 대조
Theme: PASS — Theme JSON·계약·기존 CSS 값 보존, 기존 Runtime verification 결과 확인
Storybook: PASS — 62개 source의 291개 Story 렌더 오류·Console error/warn 없음, 기존 ID 제거 없음
MD: PASS — 전체 85개 MD의 내부 경로·heading 링크 검사, 기존 오류 2곳 수정
Responsive: PASS — 대표 66개 Story와 React 화면 3개, 각각 390/768/1280/1440px
Interactions: PARTIAL — 명시된 Tabs 동작 및 대표 폼·표·Navigation 동작 확인, 전 Component의 모든 포인터/Props 조합은 NOT VERIFIED

[D-01/D-02 검증]
D-01: PASS — Fill panel 24px 0, 배경/border/radius 0, 바깥 Card 보존, PageHeader/Tabs/Table 합성 및 간격 유지
D-02: PASS — Primary 선택 탭 상단 gradient stop alpha 0.8, 하단 content 불투명, 전체 opacity 1, Secondary/Legacy/API 보존

[검증 결과]
TYPECHECK: PASS
UI_BUILD: PASS
PRODUCTION_BUILD: PASS
STORYBOOK_BUILD: PASS
TEST: PASS — 기존 Guard 테스트 14/14
GUARD: PARTIAL — Dashboard FAIL, 운영/Recruit/수정 CSS 및 Publisher Story는 NOT VERIFIED 사유를 아래에 기록
DOC_LINKS: PASS — 저장소 내부 링크; 외부 URL의 응답 상태는 NOT VERIFIED
EXPORTS: PASS — runtime import 688건, 공개 export artifact 16개
CSS_IMPORTS: PASS — source CSS 78개, import 63건, utility 생성 및 실제 적용 확인
VISUAL_CHECK: PASS — 검사한 대표 화면/너비의 실제 React 렌더와 viewport 캡처; 전 화면 역사적 pixel diff는 NOT VERIFIED
GIT_DIFF: NOT VERIFIED — Git 메타데이터 없음. 파일 hash·CSS 생성 결과·변경 파일 whitespace로 보존 범위 확인

[Git]
Repository: ABSENT — 대상 및 D:\디자인시스템, D:\의 .git 확인, rev-parse 실패
Branch: UNAVAILABLE
Previous HEAD: UNAVAILABLE
New HEAD: UNAVAILABLE
Commit SHA: UNAVAILABLE
Commit Message: NOT EXECUTED
Commit Files: []
Local Commit: NOT EXECUTED — 정상 저장소 없음 및 필수 Guard PASS 조건 미충족
Remote Push: NOT EXECUTED

[보존 확인]
기존 미커밋 변경: Git 기준 판정 불가; 회귀 시작 파일 hash와 이전 통합 baseline으로 이번 수정 범위 구분
참고 원본: 읽기 전용 유지, 원본 3개 SHA-256 동일
기존 Component/API: source TSX·공개 export·package.json·lockfile 미변경
Theme/Token: Theme JSON·Runtime 계약·비대상 CSS 값 미변경

[최종 판단]
- 검사한 전체 Story 및 대표 반응형 화면에서 D-01/D-02로 인한 회귀 문제 없음
- 기존 export utility 누락과 문서 링크 오류를 최소 수정
- Guard 잔여 실패/미검증을 PASS로 처리하지 않음
- 로컬 커밋 보류, Git 초기화·Clone·원격 연결·Stage·Push 없음

발견된 문제와 이번 실제 수정 파일

파일	원인 / 영향 범위	수정 및 검증
src/index.css, tailwind.css	기존 하위 Vite export root에서 앱·UI utility 검색 누락. Dashboard/Recruit의 .flex/.grid가 block으로 렌더됨. 상대 prefix source 검색도 이 환경에서 UI 클래스를 누락시킴	루트 Tailwind 입력 2줄과 기존 index의 상대 import 1줄로 검색 base를 명시. Component/API/Token 변경 없음. 기존 루트 방식과 최종 방식의 생성 CSS SHA-256이 동일하며, export의 실제 flex/grid와 3px Focus 링 복구
shadcn 구현 원칙	기존 AGENTS Quick Start heading 삭제로 링크가 끊어짐	현재 필수 규칙 heading으로 링크 교정, 전체 MD 링크 재검사
Runtime Theme 과거 보고서	과거 캡처 파일을 참조하지만 현재 폴더에 해당 이미지 없음	없는 이미지를 증거로 제시하지 않고 NOT VERIFIED 표시. 현재 Runtime 계약 링크로 연결
이 보고서	전체 검증과 기존 구현 검증 범위 구분 필요	이전 이력 보존, 최신 결과·수정 범위·커밋 보류 사유 추가

회귀 검증에서 수정한 기존 source는 위 index와 MD 3개, 신규 source는 루트 tailwind.css 1개다. 회귀 시작 baseline의 기존 503개 중 나머지 499개는 byte 동일하다. _local/의 보조 검사 코드·로그·캡처와 dist는 커밋 대상이 아니다.

이전 퍼블리셔 구현 변경은 README, Card/Tabs 문서, 개발 적용 가이드, PageHeader 문서, Tabs CSS, Tabs Story, PageHeader Story 및 이 통합 보고서다. 이번 회귀 단계에서 이전 Component·Pattern 구현을 덮어쓰거나 다시 설계하지 않았다.

실제 검증 명령과 영향 추적

• npm run typecheck: Theme 기본값 검사, UI/Center Graphic package build 및 전체 workspace TypeScript 검사 통과.
• npm run build --ignore-scripts: 실제 운영 앱 production build 통과. 사전 package 검사는 앞 명령에 포함됐다.
• npm run build-storybook --ignore-scripts: 최종 Storybook build 통과.
• npm run build:dashboard-export: 지원되는 기존 export build/finalize 명령 통과. 최종 CSS 입력 변경 후 해당 Vite build와 finalize를 다시 수행했다.
• node node_modules/vite/bin/vite.js build --config vite.recruit-export.config.ts: 기존 Recruit config로 production export build 통과. 별도 npm script 없음.
• node --test scripts/ai-generation-guard.test.mjs: 14개 통과. 별도 Component unit runner / lint script는 없으므로 존재하지 않는 검증을 통과로 표기하지 않는다.
• 기존 Tailwind bg-[var(...)] 최적화 및 root bundle 500kB 경고는 exit 0의 경고이며 미수정했다.

tabs.css는 공개 UI theme.css → theme/tabs.css로 연결되고 package build에서 dist로 복사된다. 앱과 Storybook은 index.css → tailwind.css 및 hm-theme.css → @hm-design/ui/theme.css를 소비하므로 공통 CSS 자체는 전체 화면에 로드된다. 그러나 D-02 선언은 [data-slot="tabs-frame"][data-fill="true"][data-panel-surface="content"]의 --hm-tab-fill-face 한 곳으로 한정된다. active trigger의 background-image에만 사용되며 전역 opacity / white token / background token을 변경하지 않는다. 현재 실제 Tabs 소비처는 Tabs Story와 PageHeader Story이며, 기존 업무·Dashboard·Recruit 화면에는 Tabs DOM이 없다. 향후 동일 Primary 조합도 같은 요청된 gradient를 소비한다.

브라우저 증거와 확인 범위

전체 Story 291개의 실제 root 콘텐츠·오류 화면·Console을 검사했고 대표 66개 화면을 각 너비에서 재확인했다. 대표 범위는 Foundation 3개, 기존 Component/Pattern Overview·All, Center Graphic 및 Theme Designer다. 현재 Storybook index의 기존 288개 ID는 모두 유지되며 추가 3개 ID는 회귀 시작 전에 이미 존재했다. 이번 단계의 Story ID 변경은 없다.

Fill panel은 padding 24px 0 / transparent / border 0 / radius 0이다. PageHeader 설명 간격 8px, Header→Tabs 간격 20px와 Table 조합을 유지한다. 네 너비의 Primary 선택 gradient는 color(srgb 1 1 1 / 0.8) → rgb(245, 240, 229)이며 opacity 1이다. Secondary White gradient와 Legacy non-fill White 면·1px panel border·16px panel padding을 유지한다.

Tabs의 ArrowRight/Home/End, Disabled 건너뛰기, 다음 보기 내부 스크롤, 선택 유지, Card/페이지 초안 보존을 확인했다. Focus-visible은 기존 3px 링을 유지한다. Input 크기 28/34/42와 disabled/readonly, Select 키보드 선택, Checkbox/Switch Space, Accordion Enter, Dialog 입력·Escape·Focus 복원, LNB 펼침/접힘/하위 선택, GNB 모바일 메뉴·Escape도 대표 화면에서 확인했다. 기존 업무 화면의 검색·폼 취소(기존 12건 보존), Recruit 검색·상태 필터·정렬·전체 행 선택을 확인했다. 저장/삭제/원격 전송은 수행하지 않았다.

운영 앱은 GNB 56px(390/768), 70px(1280/1440)을 유지한다. Dashboard/Recruit는 네 너비 모두 48px Header, Sidebar 0개, 960px 최소 콘텐츠 및 390/768px의 내부 스크롤을 유지한다. 대표 264개 + 운영 화면 12개에서 문서 자체의 가로 넘침과 렌더 오류는 없었다. Table·Dashboard 내부 스크롤, ComboBox·Center Graphic의 명시적 ellipsis, Avatar Don't 예시의 의도적 잘림은 기존 계약으로 구분했다. 모든 페이지의 아래쪽까지 역사적 기준 이미지와 자동 pixel 비교한 것은 아니다.

최종 기록은 _local/publisher-regression/의 static-audit.json, utility-parity.json, story-render-final.json, responsive-final.json, production-final.json, interactions.json, tabs-interactions-final.json, theme-results.json 및 각 build/Guard log다. 최종 화면은 screenshots/final-*.jpg와 contacts/에 보관한다. 초기 spinner·표시 배율이 맞지 않은 캡처는 최종 증거로 사용하지 않는다. 캡처는 실제 viewport를 직접 지정한 최종 이미지 기준이다.

Guard 원본 판정 및 미검증

검사	원본 결과 / 원인	실제 화면 증거와 잔여
운영 GNB_ONLY FULL_SCREEN	NOT VERIFIED — 정적 4개 그룹 PASS, RENDER-002와 기존 CSS intent REUSE-003	실제 앱 네 너비 확인 완료. 정적 도구의 원본 결과는 그대로 보존
Dashboard DASHBOARD_ONLY FULL_SCREEN	FAIL — NAV-001: 공통 composition의 기존 legacy Sidebar branch. NAV-005: 조건부 sidebar prop 정적 입증 불가	export는 compact mode로 실제 Sidebar 0개. 도구가 실행되지 않는 분기까지 검사하며 control-flow를 구분하지 못함. 기존 legacy 화면 제거/Guard 완화로 우회하지 않음
Recruit DASHBOARD_ONLY FULL_SCREEN	NOT VERIFIED — 정적 4개 그룹 PASS, RENDER-002 및 기존 CSS intent	실제 네 너비의 48px/960px 계약·utility·동작 확인
변경 CSS PARTIAL	NOT VERIFIED — RENDER-002	실제 bootstrap·utility·레이아웃을 별도로 확인. 자동 결과를 PASS로 덮어쓰지 않음
기존 Publisher CSS/Story PARTIAL	NOT VERIFIED — SCOPE-001 3건, Production Graph 밖	전체 Story build·CSF/public export/ID 대조·291개 실제 React 렌더로 별도 검사. Production Guard의 Story 검사 PASS로 대체하지 않음

남은 미검증은 Git status/diff/staging/HEAD, 외부 소비 앱·배포, 외부 URL 응답 상태, 전 Component의 모든 Props·포인터 조합/다른 브라우저, 모든 화면의 과거 pixel 비교, standalone file:// 실행이다. Dashboard Guard의 분기 분석 한계와 기존 CSS intent 판정도 잔여 항목이다. 필수 검증 전체 PASS를 주장하지 않으며 커밋하지 않는다. 공식 Gitea는 확인용 요청 URL만 알고 있고 현재 폴더의 remote 설정은 Git 메타데이터가 없어 확인 불가다. 이 작업에서 원격 쓰기는 없다.

회귀 작업 시간 및 종료 확인 (Asia/Seoul)

• Started At: 2026-10-09 22:31:29 KST
• Completed At: 2026-10-10 00:09:52 KST
• Actual Duration: 98분 23초
• Estimated Duration: 60–90분
• Variance: 예상보다 8분 23초–38분 23초 초과
• 기존 baseline source 503개 중 수정 4개, 나머지 499개 동일. 신규 root Tailwind CSS 1개, 참고 원본 3개 동일.
• 최종 viewport 복원, 검증용 브라우저 탭 종료, 로컬 서버 6025/6026/6027/6028 종료 및 Listen 없음 확인.