S shadcn · 02

사이트 발

Site footer

바탕색 없이 윗선 하나예요. 글은 옅은 회색이고, 열 제목과 쿠팡과 관계없다는 고지 첫 줄만 검고 굵게 보여요.

쓰는 규칙디자인 출처 표기가 모든 페이지 발에 있어야 한다(KRDS 는 정해진 문장이 빠지면 검사가 막는다). 쿠팡과 관계없다는 고지는 굵게 쓴다.

다른 이름: SiteFooter
···
usage (Astro)
---
// src/layouts/Base.astro
import { SiteFooter } from '../components/registry';
---
<SiteFooter
  site={site}
  links={footerLinks(IS_HUB)}
  related={related}
  notice={FOOTER_TEXT.notice}
  medical={FOOTER_TEXT.medical}
  affiliate={FOOTER_TEXT.affiliate}
  credit={designCredit()}
  year={new Date().getFullYear()}
/>
site.json
// sites/<사이트>/site.json — 적지 않으면 사이트 이름으로 자동으로 고른다
{
  "variants": { "SiteFooter": "columns" }
}
props (TypeScript)
export interface SiteFooterProps {
  site: SiteConfig;
  /** 소개·면책·개인정보·RSS */
  links: Link[];
  related: SiteLink[];
  /** 쿠팡 비공식 고지 — 굵게 */
  notice: string;
  medical: string;
  affiliate: string;
  /** 디자인 시스템 출처 표기 — 감싸는 요소에 data-design-credit 필수(seo:audit 가 KRDS 문구를 찾는다) */
  credit: { text: string; href?: string; creditsHref: string };
  year: number;
  variant?: VariantOf<'SiteFooter'>;
}

columns 는 왼쪽에 표식·이름·소개, 오른쪽에 「사이트 정보」와 「함께 보는 육아 사이트」 두 칸이 세로 목록으로 서요. 그 아래 가는 선을 긋고 고지와 디자인 출처, 저작권이 이어져요. compact 는 이름과 링크를 한 줄에, 함께 보는 사이트를 다음 줄에 놓아 전체가 훨씬 짧아요. 고지 글은 두 변형이 똑같아요.

링크가 많고 자매 사이트도 여럿이면 columns, 링크가 몇 개 안 되면 compact 가 낫고, 실제로 일곱 곳이 compact 를 써요. 화면에서는 글자가 작고 옅어서, 열 제목과 고지 첫 줄의 굵은 검은 글씨가 강조의 전부예요.

푸터 바탕에 연회색을 깔면 옅은 글자가 읽기 어려워져(대비 4.32:1) 흰 바탕과 테두리로 나눴어요.

이럴 때 — 변형 2

  1. columns세 칸 함께 보는 사이트가 여럿이라 따로 한 칸이 필요할 때.쓰는 사이트 4곳: babyfood, babyplay, milestone, toddlerfood
  2. compact한 덩어리 발을 짧게 끝내고 싶을 때, 링크가 몇 개 안 될 때.쓰는 사이트 7곳: babysick, babysleep, birthprep, feeding, newborn, vaccination, 허브
페이지로 열기 ↗

항목 추가 요청

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