## 참조 조건

- `/gen-html` 명령으로 Figma 분석, 코드 생성, 최종 비교 절차를 실제 수행해야 할 때 이 문서를 읽는다.
- Figma `nodeId` 사용 방식, screenshot 재비교, 마지막 보정 1회 규칙을 확인해야 할 때 이 문서를 읽는다.
- 여러 Figma 주소와 설명을 하나의 동작 컴포넌트로 통합해야 할 때 이 문서를 읽는다.

## 수행 계약

- 아래 수행 절차는 선택사항이 아니다. Figma 분석, 코드 생성, 최종 비교, 마지막 보정 1회까지 실제로 수행한 뒤 응답한다.
- rules 섹션에서 참조한 md 파일들은 모두 직접 읽고, 각 문서의 수행 계약을 결과 코드에 반영한다.
- 입력받은 컴포넌트명과 Figma 참조 목록을 분석하여, 출력 디렉터리에 결과물을 rules에 맞게 생성하라.
- Figma 참조가 여러 개인 경우, 각 주소의 설명을 함께 읽고 서로 충돌하지 않도록 종합 판단하라.
- 1개 컴포넌트를 위해 주입된 1개 이상의 Figma 주소와 설명은 서로 다른 산출물이 아니라, 동일 컴포넌트의 화면 상태, 사용자 입력 조건, 검증 조건, 인터랙션 조건 후보로 해석하라.
- 각 참조 설명이 `기본상태`, `에러상태`, `미입력시 오류메시지노출`, `disabled`, `readonly`, `선택됨`, `확장됨` 같은 상태나 동작을 뜻하면 하나의 `ComponentPreview` 안에 필요한 상태값, 이벤트 핸들러, validation state, 메시지 노출 로직을 구성하라.
- 예를 들어 Figma 주소 1번 설명이 `기본상태`이고 Figma 주소 2번 설명이 `미입력시 오류메시지노출`이면, 기본 모습을 가진 단일 컴포넌트를 만든 뒤 사용자의 미입력 제출, blur, 확인 클릭 등 자연스러운 트리거를 감지해 오류 메시지를 노출하는 로직을 추가하라.
- 위 예시처럼 여러 참조가 같은 컴포넌트의 상태 변화를 설명하는 경우, 참조별 컴포넌트나 참조별 story를 여러 개 생성하는 방식으로 해결하지 말라.
- 출력 디렉터리는 프롬프트에 주어진 기본 경로를 사용하고, 별도 경로를 임의로 새로 제안하지 말라.
- 프롬프트에 `Figma 조회 힌트`가 있으면 그 절차를 우선 따르고, Figma MCP의 `nodeId` 인자에는 URL 전체가 아니라 거기에 적힌 node id만 사용하라.
- 최종 응답을 확정하기 전에, 작성하려는 마지막 결과물을 원본 screenshot 기준으로 한 번 더 스스로 비교 검토하라.
- 차이가 보이면 그것이 실제 생성 누락인지, 아니면 hover / focus / active / pressed / selected / checked / expanded / 현재 탭 같은 상태성 UI가 screenshot에 반영된 것인지 먼저 판단하라.
- 상태성 UI가 원인이라면 그 상태를 무시한 채 단순 누락으로 처리하지 말고, screenshot이 어떤 상태를 보여주는지 기준을 세운 뒤 그 상태가 자연스럽게 재현되도록 마크업/스타일/기본 상태를 정리하라.
- 상태로 설명되지 않는 차이라면 누락된 구조, 스타일, 간격, 정렬, 텍스트, 아이콘, 배경, 보더, 그림자 등을 보정하라.
- 위 최종 비교와 마지막 보정 1회를 끝낸 뒤에만 응답을 마무리하라.
- 'IconSubUiArrowLeftWhite' 는 존재하지 않습니다. 'IconSubUiArrowLeft' 를 대신 사용하세요.
