docs: clarify storybook server reuse and clean clone validation
This commit is contained in:
1 parent
e9144348e5
commit
26d78763cc
2 files changed
+67
-5
No files matched your search
@@ -4,13 +4,21 @@
|
||||
|
||||
## 설치 조건과 Storybook 열람
|
||||
|
||||
lockfile의 Node 조건은 `^20.19.0 || >=22.12.0`이며 Node 21은 제외합니다. 검증 환경은 Windows, Node 20.20.1 / npm 10.8.2입니다. Git, Node/npm의 PATH와 버전을 확인합니다. 최초 설치에는 공식 Gitea·npm 레지스트리 접속이 필요합니다. HM Registry 설치·publish는 필요하지 않습니다.
|
||||
Node.js를 별도로 설치하고 PATH에서 `node`와 `npm`을 사용할 수 있어야 합니다. 루트 `package.json`에는 `engines`/`packageManager` 버전 고정이 없으며, 현재 lockfile의 Vite Node 조건은 `^20.19.0 || >=22.12.0`입니다(Node 21 제외). BAT의 Node 검사도 이 조건에 맞습니다. 검증 환경은 Windows, **Node 20.20.1 / npm 10.8.2**이며 npm 10.8.2는 검증한 버전입니다. Git, Node/npm의 PATH와 버전을 확인합니다. 최초 Clone에는 의존성과 workspace 빌드 산출물이 없으므로 설치·빌드가 필요합니다. 설치에는 공식 Gitea·npm 레지스트리 접속이 필요합니다. HM Registry 설치·publish는 필요하지 않습니다.
|
||||
|
||||
일반 사용자는 아래처럼 Clone 후 Windows BAT를 실행하거나 `start-storybook.bat`를 더블 클릭합니다. 기존 서버 재사용 시에는 아래 [실행 분기](#storybook-bat-실행-분기)가 적용됩니다.
|
||||
|
||||
```powershell
|
||||
git clone https://gitea.hmac.kr/b25027/HMDesign.git
|
||||
cd HMDesign
|
||||
node --version
|
||||
npm --version
|
||||
.\start-storybook.bat
|
||||
```
|
||||
|
||||
수동 설치·실행이 필요하면 Clone한 루트에서 다음을 실행합니다. `npm ci`는 lockfile 기준으로 의존성과 로컬 workspace 연결을 준비하고, `build:packages`는 UI/CENTER package 산출물을 만듭니다. 기존 서버가 있는 환경의 독립 재현성 검사는 별도 [QA 절차](#신규-clone-독립-실행-qa)를 따릅니다.
|
||||
|
||||
```powershell
|
||||
npm ci
|
||||
npm run build:packages
|
||||
npm run storybook
|
||||
@@ -18,13 +26,67 @@ npm run storybook
|
||||
|
||||
브라우저에서 **http://localhost:6024/** 를 엽니다. Components에서 기존 UI, Patterns에서 업무/Layout 조합, Foundation에서 Color/Typography를 확인합니다. 내부 Theme 비교는 `?path=/story/theme-runtime-contract--comparison`, JSON Loader 검증은 `?path=/story/theme-runtime-contract-loader--cdn-verification`입니다. Runtime Focus는 `?path=/story/theme-runtime-contract--verification`의 Run verification 버튼에 Tab으로 이동한 뒤 Enter/Space로 검사합니다. 자동·포인터 실행의 Focus는 `NOT VERIFIED`입니다.
|
||||
|
||||
Windows에서는 Clone한 `HMDesign` 루트에서 `.\start-storybook.bat`를 실행하거나 파일을 더블 클릭할 수 있습니다. 이 소스 실행기는 PATH의 Node.js/npm을 사용하므로 별도 Node 설치가 필요합니다. 의존성·패키지 산출물이 없으면 기존 설치·빌드 명령을 실행하고 HM Story index/preview 준비 후 6024 주소를 엽니다. 포트 충돌 시 오류를 표시합니다. 종료는 실행 터미널의 Ctrl+C입니다. Git Clone에는 `node_modules`, 사전 빌드 Storybook, 포터블 Node, 로컬 증거가 포함되지 않습니다.
|
||||
Git Clone에는 `node_modules`, 사전 빌드 Storybook, 포터블 Node, 로컬 증거가 포함되지 않습니다.
|
||||
|
||||
과거 포터블 ZIP은 당시 포함된 Node·정적 Storybook·ZIP 전용 실행기를 사용한 별도 배포물입니다. 일반 Git Clone이나 소스 ZIP에는 그 런타임이 포함되지 않으므로 Node.js/npm 설치 조건을 생략할 수 없습니다. 과거 ZIP의 6007은 현재 개발 Storybook 기본 포트 6024와 다릅니다.
|
||||
|
||||
### Storybook BAT 실행 분기
|
||||
|
||||
[start-storybook.bat](../../start-storybook.bat)는 BAT가 있는 폴더를 작업 경로로 설정하고 [Node 실행기](../../scripts/start-storybook.mjs)를 호출합니다. 실행기는 루트 [package.json](../../package.json)의 `scripts.storybook`에서 포트를 읽습니다. 현재 기본 포트는 **6024**이며 BAT 인수나 환경변수로 포트를 변경하는 기능은 없습니다.
|
||||
|
||||
1. **기존 서버가 준비됨:** `http://localhost:6024/index.json`의 HTTP 성공 응답과 `entries` 안의 `components-form-button--all`, `theme-designer-playground--editor` 두 ID 존재, `iframe.html`의 HTTP 성공 응답을 모두 확인하면 기존 서버를 재사용합니다. 각 요청 제한은 1.5초입니다. PowerShell `Start-Process`로 기본 브라우저에 `http://localhost:6024/`를 열고 BAT는 종료합니다. npm 실행 가능 여부, 의존성 설치와 package 산출물 검사를 모두 건너뛰므로 `npm ci`, `build:packages`, 새 서버 시작이 생략됩니다. Node 버전 검사는 재사용 전에도 수행합니다.
|
||||
2. **준비 조건 불충족 + 포트 점유:** `127.0.0.1:6024` TCP 연결에 성공하거나 연결 확인이 시간 초과되면 점유로 판단하고 오류로 종료합니다. 다른 서버뿐 아니라 아직 준비되지 않은 HM Storybook도 이 분기에 해당할 수 있습니다. 기존 프로세스를 자동 종료하거나 다른 포트로 이동하지 않습니다.
|
||||
3. **준비 조건 불충족 + 빈 포트:** `npm.cmd --version` 성공을 확인합니다. `node_modules/.bin/storybook.cmd`가 없을 때만 `npm.cmd ci`를 실행합니다. UI/CENTER package의 `exports`에서 문자열 경로 또는 `import` 경로 중 하나라도 없을 때만 `npm.cmd run build:packages`를 실행합니다. 모든 의존성의 정상 상태, 타입 산출물이나 기존 산출물의 최신 여부까지 검사하는 것은 아닙니다. 이어서 `npm.cmd run storybook -- --exact-port --ci`로 현재 Clone의 새 서버를 시작합니다. Story index/preview 준비를 최대 3분 기다리고 기본 브라우저를 연 뒤 서버 종료까지 터미널을 유지합니다. 종료는 이 터미널의 Ctrl+C입니다.
|
||||
|
||||
**기존 서버 재사용은 신규 Clone의 독립 실행 성공 증거가 아닙니다.** 준비 확인은 Story ID와 HTTP 응답만 검사하며 서버의 실행 프로젝트 경로·Git SHA를 확인하지 않습니다. 브라우저에 표시된 화면이 기존 개발 폴더의 Storybook일 수 있습니다. 새 Clone의 Node/npm 설치 조건과 새 소스의 실행 여부를 확인하려면 아래 QA를 사용합니다.
|
||||
|
||||
실행 폴더 접근 실패는 BAT의 폴더 오류 안내, Node/npm·설치·빌드·서버·브라우저 열기 실패는 상세 오류와 BAT의 실행 실패 안내로 표시됩니다. 포트 점유, 서버의 비정상 종료(종료 코드가 0이 아닌 경우)와 준비 시간 초과도 오류입니다. BAT는 오류 시 창을 유지하기 위해 `pause`하고 종료 코드 1을 반환합니다. 포트 점유 오류가 나면 기존 서버의 담당자·실행 위치를 확인하거나 아래 격리 실행을 사용합니다.
|
||||
|
||||
### 신규 Clone 독립 실행 QA
|
||||
|
||||
이 절차는 일반 Storybook 열람과 별개입니다. 실행 터미널에서 새 Clone 루트의 `Get-Location`, `git remote get-url origin`, `git rev-parse HEAD`를 기록하고, 최초 설치 전 `Test-Path node_modules`로 기존 의존성 유무도 구분합니다. 새 Clone에서 `npm ci`와 `npm run build:packages`의 성공 로그를 확인하고 다음 workspace 연결을 확인합니다.
|
||||
|
||||
```powershell
|
||||
Get-Location
|
||||
git remote get-url origin
|
||||
git rev-parse HEAD
|
||||
Test-Path node_modules
|
||||
npm ci
|
||||
npm run build:packages
|
||||
npm ls @hm-design/ui @hm-design/center-graphic --depth=0
|
||||
```
|
||||
|
||||
`@hm-design/ui -> packages/ui`, `@hm-design/center-graphic -> packages/center-graphic`처럼 해당 Clone의 workspace를 가리키는지 확인합니다. 실행 방법은 환경에 따라 다음 중 하나를 선택합니다.
|
||||
|
||||
- **기존 6024 서버가 없는 환경:** 위 준비 후 `.\start-storybook.bat`를 실행합니다. 새 서버 시작 로그와 6024의 대표 Story 렌더를 확인합니다. 기존 서버를 열고 BAT가 즉시 종료한 경우는 독립 실행으로 판정하지 않습니다.
|
||||
- **기존 서버를 유지하는 환경:** 사용하지 않는 별도 포트에서 설치된 Storybook CLI를 직접 실행합니다. 아래 6124는 이전 Acceptance Test의 격리 포트 예시이며 현재 공식 기본 포트 6024를 바꾸지 않습니다. 6124가 점유됐으면 명령과 열람 URL의 숫자를 사용 가능한 포트로 함께 바꿉니다.
|
||||
|
||||
```powershell
|
||||
.\node_modules\.bin\storybook.cmd dev -p 6124 --host 127.0.0.1 --no-open --disable-telemetry --exact-port --ci
|
||||
```
|
||||
|
||||
이 명령은 BAT를 거치지 않으며 package.json이나 Storybook 설정을 수정하지 않습니다. 현재 설치된 Storybook CLI가 지원하는 `-p`, `--host`, `--exact-port`, `--ci`를 사용합니다. 포트 점유 시 다른 서버를 재사용하지 않고 실패합니다. 브라우저 자동 열기는 꺼져 있으므로 실행 성공 로그의 포트를 확인한 뒤 `http://127.0.0.1:6124/`를 직접 엽니다. index/iframe 응답뿐 아니라 Button·Input·DataTable·Dashboard·Theme Comparison 등 대표 Story를 렌더링하고, 실행 터미널의 프로젝트 경로·HEAD·포트와 연결해 기록합니다. 응답이나 화면만으로 Clone의 정체를 판정하지 않습니다. 종료할 때는 이 QA 서버의 터미널에서만 Ctrl+C를 사용합니다.
|
||||
|
||||
### 기존 Acceptance Test 근거와 판정 범위
|
||||
|
||||
2026-10-11 공식 소스 `e9144348e5f2f9be12130b707b1e2b389476880e`를 새 Clone하여 작성한 `acceptance-report.txt`, `guard.json`, `runtime.json`, `combined.json`, `browser-evidence.json`을 보존합니다. 증거는 테스트 Clone의 `_local/acceptance/`에 있으며 Git 배포에는 포함되지 않습니다. 이번 보완은 문서만 수정하므로 같은 소스·화면에 연결된 기존 PASS를 **REUSED PASS**로 재사용하며 Dashboard 테스트를 반복하지 않습니다.
|
||||
|
||||
| 기존 확인 항목 | 보존 결과 |
|
||||
| --- | --- |
|
||||
| 업무관리 Dashboard 생성·독립 React 렌더 | REUSED PASS |
|
||||
| 390·768·1280·1440px 반응형 | REUSED PASS |
|
||||
| 핵심 상호작용 12건·상태 컬러 측정 48건 | REUSED PASS |
|
||||
| AI Guard FAIL 0·해시 연결 Runtime | FAIL 0 유지 / 연결 Runtime REUSED PASS |
|
||||
| 새 Clone `npm ci`·workspace 연결·6124 Storybook 독립 실행 | REUSED PASS |
|
||||
| 기본 BAT의 준비된 6024 서버 재사용 | 확인됨 / 신규 Clone 독립 실행과 구분 |
|
||||
|
||||
6124 BAT 검증 당시에는 테스트 Clone의 포트를 일시 변경했고 package.json 원문을 복원했습니다. 이는 과거 검증 방법이며 BAT의 포트 옵션 지원을 뜻하지 않습니다. 위 QA는 설정 변경 없이 CLI로 격리 실행하는 방법입니다. 기존 보고서의 `DISTRIBUTION_READY`·`FINAL_ACCEPTANCE: PARTIAL`은 당시 BAT 설명 누락에 대한 기록으로 보존합니다. 이번 문서 정합성·링크·개인정보 검사와 공식 Gitea 반영이 통과하면 정의된 AI 화면 제작·Git Clone 내부 공유 Acceptance 범위의 `AI_SCREEN_READY`, `DISTRIBUTION_READY`, `FINAL_ACCEPTANCE`를 PASS로 판정합니다.
|
||||
|
||||
Guard 원본 `status`/`staticStatus`/`runtimeStatus`와 결합 `status`는 **NOT VERIFIED**로 보존합니다. STYLE의 STATIC은 PASS, RUNTIME·DESIGN_INTENT·FINAL은 NOT VERIFIED입니다. 48건의 computed 컬러 PASS를 CSS site 전수나 디자인 의도 승인으로 확대하지 않습니다. 실제 스크린리더·실기기 touch/drag·별도 대비 인증·신규 화면의 다른 외부 Theme·Node 미설치 PC·빈 6024 신규 서버 분기·BAT 자동 `npm ci` 분기는 NOT VERIFIED입니다. 문서 보완은 이 실행 분기들을 새로 검증한 결과가 아니며, 새 차단 오류가 없다면 이 제한을 유지한 채 내부 공유용 완료본으로 판정합니다.
|
||||
|
||||
## 새 React 화면 제작과 실행
|
||||
|
||||
위 설치·package build 후 별도 터미널에서 실행합니다.
|
||||
위 수동 설치·package build 절차를 완료한 뒤 별도 터미널에서 실행합니다.
|
||||
|
||||
```powershell
|
||||
npm run dev:publisher-example
|
||||
@@ -59,4 +121,4 @@ Designer는 일반 검수 메뉴에서 제외된 내부 환경입니다. `http:/
|
||||
- Sheet의 최종 radius 수치, 컬러 상세 의미, 설정·도움말 숨김 범위는 미확정입니다.
|
||||
- 스크린리더 발화·실기기 touch/drag·Node 미설치 PC 설치는 별도 검증 대상입니다.
|
||||
- 2026-10-10 npm 감사에서 개발 의존성 High 7건, 운영 의존성 0건을 확인했습니다. 직접 개발 의존성 shadcn의 간접 braces 경로이며 [공식 보안 권고](https://github.com/advisories/GHSA-vfj7-8cjw-p6xm)는 패치 버전이 없다고 명시합니다. 안전한 패치로 해결할 수 없어 package/lockfile을 유지했습니다. 강제 major 변경은 보류합니다.
|
||||
- 과거 로컬 증거는 `_local/`에 보관되고 Git Clone에 포함되지 않습니다. 당시 기록을 새 PASS 근거로 재사용하지 않습니다. [과거 포터블 안내](portable-test-distribution.md)는 역사적 자료입니다.
|
||||
- 과거 로컬 증거는 `_local/`에 보관되고 Git Clone에 포함되지 않습니다. 과거 ZIP·다른 소스의 기록을 현재 실행의 새 PASS로 간주하지 않습니다. 위 Acceptance Test의 동일 소스·화면 근거는 REUSED PASS로 구분합니다. [과거 포터블 안내](portable-test-distribution.md)는 역사적 자료입니다.
|
||||
Reference in new issue
Block a user