K KRDS · 09

허브 사이트 목록

Hub directory

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

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

다른 이름: HubDirectoryStep indicator
···
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'>;
}

stages 는 왼쪽에 「01 출산 전」 같은 시기 이름, 오른쪽에 사이트 상자(표식·이름·소개·글 수)를 두고 시기마다 선으로 나눠요. table 은 시기 | 사이트 | 이런 내용 | 글을 한 장의 표로 보여 주고, 머리 줄이 회색이에요. timeline 은 번호가 든 네모와 세로선으로 시기를 잇고 그 아래에 사이트 줄을 달아요.

table 이 가장 촘촘해서 한 화면에 많이 들어가요. stages 는 상자마다 소개가 읽히지만 길어지고, timeline 은 순서를 따라가는 느낌이 가장 강해요.

timeline 은 KRDS 의 단계 표시(step indicator) 를 세로로 옮긴 것이에요.

이럴 때 — 변형 3

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

항목 추가 요청

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