Footer

KRDS 표준에 따라 구조화된 정부 서비스 푸터 컴포넌트입니다. CSS Modules 방식으로 구현되어 복잡한 레이아웃과 반응형 디자인을 효과적으로 관리하며, WCAG 2.1 / KWCAG 2.2 접근성 표준을 완전히 준수합니다.

개요

설치

설치 시 다음 파일이 추가됩니다:

  • components/hanui/footer.tsx - Footer 컴포넌트
  • components/hanui/footer.module.scss - CSS Modules 스타일

사용법

예제

레이아웃 구조

Footer는 KRDS 표준 레이아웃 구조를 따릅니다:

  • Quick Links (footQuick): 상단 관련 사이트 영역
  • Logo (fLogo): 조직 로고 영역
  • Content (fCnt): 메인 콘텐츠 (주소, 연락처, 링크)
  • Bottom (fBtm): 하단 메뉴 및 저작권 정보

커스터마이징

조직 정보를 수정하려면 components/hanui/footer.tsx 파일을 직접 편집합니다:

반응형 동작

Footer는 4단계 브레이크포인트에서 자동으로 레이아웃을 조정합니다:

  • Desktop (1280px+): 전체 레이아웃, 최대 간격 적용
  • Large (1024px~1279px): 좌우 패딩 추가
  • Tablet (768px~1023px): 세로 방향 레이아웃
  • Mobile (~767px): 축소된 폰트 및 간격

스타일 커스터마이징

footer.module.scss에서 KRDS 디자인 토큰을 활용하여 스타일을 수정할 수 있습니다:

접근성

  • 시맨틱 HTML: footer 요소를 사용하여 페이지 구조를 명확히 합니다
  • 필수 ID: #krds-footer ID로 직접 접근 가능합니다
  • ARIA 속성: 관련 사이트 버튼에 aria-expanded를 자동 관리합니다
  • 키보드 네비게이션: 모든 링크와 버튼에 키보드로 접근할 수 있습니다
  • 명도 대비: 모든 텍스트가 WCAG AA 기준 4.5:1 이상을 충족합니다
  • 외부 링크 보안: rel="noopener noreferrer" 자동 설정으로 보안을 강화합니다