원문: https://github.com/facebook/astryx/wiki/Contributing-Templates

template은 Astryx로 만든 재사용 가능한 UI 예제입니다. 두 종류가 있습니다:

• Page template — route를 scaffold하기 위해 복사하는 전체 페이지 애플리케이션 레이아웃. 전체 너비로 표시됩니다.
• Block template — 기존 페이지에 넣는 더 작은 UI 패턴(form 카드, stats 행, hero 섹션). contained preview 안에 중앙 정렬로 표시됩니다.

둘 다 packages/cli/assets/templates/에 있으며 sandbox와 CLI가 자동으로 발견합니다.

빠른 시작

Page template

1. packages/cli/assets/templates/pages/에 template 이름으로 폴더를 만드세요
2. page.tsx(template)와 template.doc.mjs(메타데이터)를 추가하세요
3. pnpm --filter @astryxdesign/sandbox dev를 실행하세요
4. http://localhost:3000/templates/<your-folder-name>/을 방문하세요

Block template

1. packages/cli/assets/templates/blocks/에 파일을 만드세요 — 컴포넌트별 block은 blocks/components/<Component>/를 사용하세요
2. <Name>.tsx 파일(block)과 짝이 되는 <Name>.doc.mjs 파일(메타데이터)을 추가하세요
3. pnpm --filter @astryxdesign/sandbox dev를 실행하세요
4. http://localhost:3000/templates/<Name>/을 방문하세요

파일 구조

packages/cli/templates/
  pages/                          # Full-page templates
    dashboard/
      page.tsx                    # The template (React component, default export)
      template.doc.mjs            # Metadata
    login/
      page.tsx
      template.doc.mjs
    ...

  blocks/                         # Block templates
    components/                   # Component-specific blocks
      Button/
        ButtonBasic.tsx           # Block component (default export)
        ButtonBasic.doc.mjs       # Block metadata
        ButtonWithIcon.tsx
        ButtonWithIcon.doc.mjs
      Table/
        TableSortable.tsx
        TableSortable.doc.mjs
        ...

발견(discovery)은 재귀적입니다 — CLI와 sandbox는 templates/pages/와 templates/blocks/를 임의 깊이까지 스캔하여 짝이 맞는 .tsx + .doc.mjs 파일을 찾습니다. 하위 폴더 구조(예: components/Button/)는 조직화용 메타데이터일 뿐 기능적으로 의미가 없습니다.

Page vs Block: 결정하는 방법