Files
HMDesign/examples/publisher-list

공개 HM Component로 새 React 화면 제작·실행

GNB_ONLY를 선택했다. 단일 서비스 목록은 전역 Header와 모바일 메뉴를 사용하며 Sidebar를 추가하지 않는다. 실제 @hm-design/ui의 GNB·PageHeader·Card·FilterBar·Select·Button·DataTable을 렌더링한다. Storybook helper는 사용하지 않는다.

Git Clone 저장소 루트에서 AGENTS.md를 먼저 읽고 Node.js 20.x의 20.19 이상 또는 22.12 이상과 npm을 준비한다. 검증 버전은 Node 20.20.1 / npm 10.8.2다. 다음 순서로 실행한다.

npm ci
npm run build:packages
npm run dev:publisher-example

콘솔의 실제 주소를 연다. 기본 포트는 5173이며 사용 중이면 Vite가 다른 포트를 안내한다. 기존 프로세스를 종료하지 않는다. 이름 입력은 초안이며 조회 또는 Enter로 적용하고 초기화로 복원한다. 390px에서는 표의 내부 가로 스크롤을 사용한다.

새 화면을 만들려면 이 폴더를 복사한 뒤 제목·data·columns와 필요한 HM Component 조합을 변경한다. CSS entry와 공개 package import를 유지한다. 검증은 루트에서 다음과 같이 한 번 실행하고 실제 브라우저 결과를 확인한다.

npm run build:publisher-example
node scripts/ai-generation-guard.mjs --target examples/publisher-list --scope FULL_SCREEN --mode GNB_ONLY --result index.html

Guard의 RENDER-002는 실제 렌더링이 정적 검사만으로 확인되지 않았다는 NOT VERIFIED 표시다. 브라우저에서 검색·초기화·모바일 메뉴·utility 적용을 별도로 검증한다. npm ci에는 npm registry 접근이 필요하다. 현재 Git Clone에는 사전 빌드 화면이 포함되지 않는다. 위 개발 서버에서 실제 React 화면을 확인하며 Storybook은 별도 npm run storybook으로 6024에서 열람한다.