Footer
먼저 보고, 그다음 계약을 읽습니다
페이지 하단 — 로고 + 링크 컬럼 + 소셜 + 하단 바.
Component intent의도와 경계 읽기
TopNav 의 페어 컴포넌트로, 미니멀(하단 바만)부터 풀(로고 + 링크 컬럼 + 소셜 + 하단 바)까지 같은 컴포넌트로 커버한다. logo·columns 가 상단 그리드(__top)를, bottom·social 이 하단 바(__bottom)를 이루며 둘 다 내용이 있을 때만 렌더된다. columns/social 은 데이터 배열(FooterColumn/FooterSocial)로 넘기고, top 과 bottom 사이 임의 슬롯은 children 으로 끼운다. AppShell 의 footer 슬롯에 하나 두는 것을 전제로 한 forwardRef `<footer>` 다.
예제
SSOT에 등록된 실제 API 기준 snippet입니다. standalone 배지만 독립 실행 단위이며, fragment는 주변 state·handler 문맥을 생략합니다.
import { Footer, Logo } from "@axe/ui";<Footer logo={<Logo />} columns={[ { title: "제품", items: [ { href: "/frame", label: "frame" }, { href: "/hive", label: "hive" }, ]}, { title: "회사", items: [ { href: "https://axelabs.ai", label: "axelabs.ai", external: true }, ]}, ]} social={[ { href: "https://github.com/axelabs-ai", label: "GitHub" }, ]} bottom={<span>© 2026 AXE Labs · v0.5.0</span>}/>import { Footer } from "@axe/ui";<Footer bottom={<span>© 2026 AXE Labs</span>} /><footer class="axe-footer"> <div class="axe-footer__top"> <div class="axe-footer__logo"> <a class="axe-logo" href="/">AXE Labs</a> </div> <div class="axe-footer__columns"> <div class="axe-footer__column"> <div class="axe-footer__column-title">제품</div> <ul class="axe-footer__column-items"> <li><a class="axe-footer__link" href="/frame">frame</a></li> <li><a class="axe-footer__link" href="/hive">hive</a></li> </ul> </div> </div> </div> <div class="axe-footer__bottom"> <div class="axe-footer__bottom-left">© 2026 AXE Labs</div> <div class="axe-footer__social"> <a class="axe-footer__social-link" href="https://github.com/axelabs-ai" aria-label="GitHub" target="_blank" rel="noopener noreferrer">GH</a> </div> </div></footer>Props
TSX 소스가 진실입니다. 주요 export 컴포넌트의 public API만 노출합니다.
| 이름 | 타입 | 필수 | 기본값 | 설명 |
|---|---|---|---|---|
logo | React.ReactNode | — | — | 좌상단 로고 슬롯(__logo). 보통 <Logo /> 를 넣는다. |
columns | FooterColumn[] | — | — | 링크 컬럼 배열. FooterColumn = { title: string; items: FooterLink[] }, FooterLink = { href; label; external? }. external:true 면 링크가 새 탭(target=_blank, rel=noopener noreferrer). |
bottom | React.ReactNode | — | — | 하단 바 좌측 슬롯. 저작권·version·build 등. (social 은 우측.) |
social | FooterSocial[] | — | — | 하단 우측 소셜 링크 배열. FooterSocial = { href; label; icon? }. icon 없으면 label 텍스트 표시, 링크는 항상 새 탭 + aria-label=label. |
children | React.ReactNode | — | — | __top 뒤·__bottom 앞에 렌더되는 임의 커스텀 슬롯. |
...rest | React.HTMLAttributes<HTMLElement> | — | — | className(axe-footer 뒤 병합) 등 나머지는 루트 <footer> 로 전파. |
.axe-* 클래스 계약
React 밖에서도 같은 표면을 그리는 공개 계약입니다. stable은 minor 버전 안에서 이름을 바꾸지 않습니다.
| 클래스 | 안정성 | 용도 |
|---|---|---|
.axe-footer | stable | 푸터 루트(<footer>). 세로 스택 + 상단 보더. |
.axe-footer__top | stable | 상단 영역 그리드(로고 | 컬럼). ≥768px 에서 2-트랙. |
.axe-footer__logo | stable | 좌상단 로고 슬롯 래퍼. |
.axe-footer__columns | stable | 링크 컬럼들의 auto-fit 그리드. |
.axe-footer__column | stable | 링크 컬럼 하나(제목 + 항목). |
.axe-footer__column-title | stable | 컬럼 제목(uppercase, 작은 라벨). |
.axe-footer__column-items | stable | 컬럼 링크 목록 <ul>(list-style 제거). |
.axe-footer__link | stable | 컬럼 링크 <a>(hover 시 text-primary). |
.axe-footer__bottom | stable | 하단 바(좌 bottom · 우 social, 상단 보더). |
.axe-footer__bottom-left | stable | 하단 바 좌측 슬롯(저작권 등). |
.axe-footer__social | stable | 소셜 링크들의 가로 배치. |
.axe-footer__social-link | stable | 소셜 아이콘 링크(28×28 정사각, hover 배경). |
접근성
키보드, ARIA, 구현 노트를 함께 검토합니다.
- Tab 으로 링크 순회
- Enter 로 이동(네이티브 앵커)
루트가 <footer> — 페이지 직계일 때 contentinfo 랜드마크가 된다. 소셜 링크는 아이콘일 수 있어 각 <a> 에 aria-label={label} 을 부여해 접근가능 이름을 보장한다.
external:true 컬럼 링크와 모든 소셜 링크는 target=_blank + rel=noopener noreferrer 로 새 탭에서 열린다. contentinfo 랜드마크는 페이지당 하나가 권장이므로 AppShell footer 슬롯에 Footer 하나만 둘 것.