디자인 팩 아틀라스
EN
P Primer · 09

허브 사이트 목록

Hub directory

아기 시기마다 소제목이 서고, 그 아래 사이트가 상자 줄로 나와요. 표와 세로 단계 표시 같은 변형도 있어요.

쓰는 규칙시기마다 이름표가 있어서 홈 머리의 시기 링크를 누르면 그 자리로 바로 내려간다.

다른 이름: HubDirectoryTimeline
···
usage (Astro)
---
// src/pages/index.astro
import { HubDirectory } from '../components/registry';
---
<HubDirectory stages={stageGroups} empty="첫 사이트를 준비하고 있어요. 곧 이곳에서 주제별 사이트를 고를 수 있어요." />
site.json
// sites/<사이트>/site.json — 적지 않으면 사이트 이름으로 자동으로 고른다
{
  "variants": { "HubDirectory": "stages" }
}
props (TypeScript)
export interface HubDirectoryProps {
  stages: HubStage[];
  /** 사이트가 하나도 없을 때 문장 */
  empty: string;
  variant?: VariantOf<'HubDirectory'>;
}

네 팩 나란히 보기 →

···

KRDS

09허브 사이트 목록Hub directory

사이트를 아기 시기 순서(출산 전 → 100일 → …)로 늘어놓은 목록이에요. 시기마다 번호가 붙고, 목록·표에서는 파란 글자, 세로 단계에서는 네모 안 글자예요.

···

Carbon

09허브 사이트 목록Hub directory

사이트를 아기 시기 순서(출산 전, 태어나서 100일 …)로 늘어놓아요. 큰 번호가 붙은 칸, 회색 머리 줄의 표, 가로 단계선 중에서 골라요.

···

shadcn/ui

09허브 사이트 목록Hub directory

사이트를 아기 시기 순서로 묶어요. 시기마다 작은 순번과 큰 이름, 사이트는 카드·표·세로선 중 하나로 보여요.

stages는 「01 출산 전」처럼 순번·이름·설명이 소제목으로 서고, 아래 선과 함께 사이트 줄 상자(표식, 파란 이름·소개, 글 수 칸)가 따라와요. table은 시기 | 사이트 | 이런 내용 | 글 4칸 표 한 장이고, 칸마다 선이 있고 짝수 줄이 연한 회색이에요. timeline은 왼쪽 세로선 위에 숫자 동그라미를 두고, 그 오른쪽에 표식 없이 파란 이름·소개와 글 수 칸만 있는 사이트 줄을 놓아요.

허브 사이트가 흐름을 안내해야 하면 stages나 timeline이, 전체를 한 화면에서 비교하게 하려면 table이 맞아요. table은 폰에서 칸이 좁아질 수 있어요. 홈 머리의 시기 링크를 누르면 이 목록의 해당 시기로 내려와요.

Primer의 Timeline 모양을 쓴 것은 timeline 변형이에요.

이럴 때 — 변형 3

  1. stages시기 칸 시기마다 사이트가 두 곳 넘게 있을 때 — 시기 | 사이트 상자.쓰는 사이트 4곳: babyfood, birthprep, milestone, newborn
  2. table표 한눈에 비교하는 게 가장 중요할 때 — 시기 | 사이트 | 이런 내용 | 글 수.쓰는 사이트 3곳: babyplay, babysick, toddlerfood
  3. timeline세로 단계 순서(임신 → 신생아 → 돌)가 가장 중요한 정보일 때.쓰는 사이트 4곳: babysleep, feeding, vaccination, 허브
페이지로 열기 ↗

항목 추가 요청

빠진 컴포넌트·변형이나 팩에서 고칠 점을 알려 주세요. 하나씩 보고 원본 팩에 반영합니다.