# Story Bundle 계약

## 참조 조건

- story export 이름, checklist story 구성, meta title 계약을 확인해야 할 때 이 문서를 읽는다.
- `/gen-html` 결과를 `ComponentPreview`, `AccessibilityChecklist`, `WebStandardsChecklist` 3개 스토리 구조로 맞춰야 할 때 이 문서를 읽는다.

## 수행 계약

- story 파일은 named export를 정확히 `ComponentPreview`, `AccessibilityChecklist`, `WebStandardsChecklist` 3개로만 제공한다.
- `AccessibilityChecklist`, `WebStandardsChecklist` 는 이름만 선언하지 말고 실제 체크리스트 UI와 항목 데이터를 가진 story로 작성한다.
- Story meta의 `title` 은 정적 문자열로 유지하고, local-server가 prefix를 붙일 수 있게 문자열 리터럴 형태를 유지한다.

- SCSS에서 `padding(xlarge)`, `spacing(6)` 같은 토큰 함수나 CSS 변수 기반 값을 Sass 산술식으로 직접 계산하지 않는다. 배수 계산이 필요하면 `calc(#{$token} * 12)` 형태의 CSS calc로 옮긴다.
- Story 파일은 정확히 3개의 named export만 제공하며 이름은 `ComponentPreview`, `AccessibilityChecklist` , `WebStandardsChecklist` 로 고정한다.
- Story meta의 `title` 은 정적 문자열이어야 하며 작업 입력값에 명시된 Storybook title prefix로 시작한다.
- `ComponentPreview` 스토리는 실제 화면/컴포넌트 미리보기다.
- `AccessibilityChecklist` 스토리는 접근성 점검 항목과 `통과` 또는 `보완 필요` 상태를 함께 보여준다.
- `WebStandardsChecklist` 스토리는 웹표준 점검 항목과 `통과` 또는 `보완 필요` 상태를 함께 보여준다.

  - 웹표준 관련 자료 : https://www.w3.org/standards/about/

- `AccessibilityChecklist` , `WebStandardsChecklist` 샘플양식, 아래 형태로 작성

```tsx
const CHECKLIST_ITEMS: ChecklistItemData[] = [{ label: '체크한 항목내용', isPass: true }];

/** @description 웹표준 또는 접근성 체크리스트 컴포넌트 */
const ChecklistView = () => {
  return (
    <div className={cx('checklist')}>
      <h3 className={cx('checklist-title')}>점검 항목</h3>
      {CHECKLIST_ITEMS.map((item) => (
        <div key={item.label} className={cx('checklist-item')}>
          <span className={cx('checklist-label')}>{item.label}</span>
          <span className={cx(item.isPass ? 'status-pass' : 'status-need')}>{item.isPass ? '통과' : '보완 필요'}</span>
        </div>
      ))}
    </div>
  );
};
```
