Footer 컴포넌트 라이브러리

4가지 변형을 제공하는 범용 Footer 컴포넌트 라이브러리

변형 비교표

파일 구조

footer/
├── _shared/
│   ├── types.ts             # 공통 타입/인터페이스
│   └── i18n.ts              # EN/KO 라벨
├── footer-corporate.tsx     # 기업형
├── footer-saas.tsx          # SaaS형
├── footer-i18n.tsx          # i18n 지원형
└── footer-minimal.tsx       # 미니멀형

의존성

non-Next.js 프로젝트: next/link → <a> 태그, next/image → <img> 태그로 대체하세요.

사용 예시

Corporate (기업형)

import { FooterCorporate } from '@/components/layout/footer-corporate';
import { KO_FOOTER_LABELS } from '@/components/layout/_shared/i18n';

export function Layout({ children }) {
  return (
    <>
      {children}
      <FooterCorporate
        brand={{
          name: '실버케어',
          description: '믿을 수 있는 노인 돌봄 서비스를 연결합니다.',
          logoSrc: '/images/icons/logo-icon.png',
        }}
        contact={{
          phone: '1588-0000',
          businessHours: '평일 09:00 - 18:00 (주말/공휴일 휴무)',
          email: 'help@silvercare.kr',
          inquiryHref: '/inquiry',
        }}
        linkGroups={[
          {
            title: '서비스',
            links: [
              { label: '서비스 소개', href: '/about' },
              { label: '시설 찾기', href: '/facilities' },
            ],
          },
          {
            title: '고객지원',
            links: [
              { label: 'FAQ', href: '/faq' },
              { label: '공지사항', href: '/notice' },
            ],
          },
          {
            title: '이용안내',
            links: [
              { label: '이용약관', href: '/terms' },
              { label: '개인정보처리방침', href: '/privacy', highlight: true },
            ],
          },
        ]}
        business={{
          companyName: '주식회사 실버케어',
          representative: '홍길동',
          businessNumber: '000-00-00000',
          address: '서울특별시 강남구 테헤란로 123',
        }}
        labels={KO_FOOTER_LABELS.corporate}
      />
    </>
  );
}

SaaS (SaaS형)

import { FooterSaaS } from '@/components/layout/footer-saas';
import { Github, Twitter } from 'lucide-react';

<FooterSaaS
  brand={{
    name: 'Monet',
    description: 'Premium React UI components for developers.',
    icon: (
      <div className="flex size-7 items-center justify-center rounded-lg bg-gradient-to-br from-violet-600 to-indigo-600 text-white">
        <span className="text-sm font-bold">M</span>
      </div>
    ),
  }}
  socialLinks={[
    { platform: 'twitter', href: 'https://twitter.com/example', icon: <Twitter className="size-5" /> },
    { platform: 'github', href: 'https://github.com/example', icon: <Github className="size-5" /> },
  ]}
  linkGroups={[
    { title: 'Product', links: [{ label: 'Components', href: '/components' }, { label: 'Pricing', href: '/pricing' }] },
    { title: 'Resources', links: [{ label: 'Documentation', href: '/docs' }, { label: 'Blog', href: '/blog' }] },
    { title: 'Company', links: [{ label: 'About', href: '/about' }, { label: 'Terms', href: '/terms' }] },
  ]}
  bottomBar={{ creditText: 'Built with Next.js, Tailwind CSS & shadcn/ui' }}
/>

I18n (국제화 지원형)

'use client';
import { useTranslations } from 'next-intl';
import { FooterI18n } from '@/components/layout/footer-i18n';
import { Lock } from 'lucide-react';

export function Footer() {
  const t = useTranslations('footer');

  return (
    <FooterI18n
      t={t}
      brand={{
        name: 'SecureVault',
        icon: <Lock className="h-6 w-6 text-primary" />,
      }}
      descriptionKey="description"
      linkSections={{
        product: {
          titleKey: 'product',
          links: [
            { labelKey: 'features', href: '/#features' },
            { labelKey: 'pricing', href: '/pricing' },
          ],
        },
        legal: {
          titleKey: 'legal',
          links: [
            { labelKey: 'privacyPolicy', href: '/privacy' },
            { labelKey: 'termsOfService', href: '/terms' },
          ],
        },
      }}
      bottomBar={{
        copyrightKey: 'copyright',
        bottomLinks: [
          { labelKey: 'privacy', href: '/privacy' },
          { labelKey: 'terms', href: '/terms' },
        ],
        status: { label: 'allSystemsOperational', operational: true },
      }}
    />
  );
}

Minimal (미니멀형)

import { FooterMinimal } from '@/components/layout/footer-minimal';
import { Rocket } from 'lucide-react';

<FooterMinimal
  brand={{
    name: 'Galaxy Con',
    icon: <Rocket className="h-5 w-5" />,
    description: '알고리즘 시각화로 탐험하는 공모전 정보 플랫폼.',
  }}
  linkGroups={[
    { title: '탐색', links: [{ label: '공모전 탐색', href: '/contests' }, { label: '카테고리', href: '/categories' }] },
    { title: '지원', links: [{ label: 'FAQ', href: '/faq' }, { label: '소개', href: '/about' }] },
    { title: '법적고지', links: [{ label: '이용약관', href: '/terms' }, { label: '개인정보처리방침', href: '/privacy' }] },
  ]}
/>

커스터마이징 가이드

색상 변경

Corporate: 기본 호버 색상은 teal-400. 변경하려면 컴포넌트 복사 후 hover:text-teal-400를 원하는 색상으로 일괄 치환하세요.

hover:text-teal-400 → hover:text-blue-400

SaaS / I18n / Minimal: shadcn CSS 변수(--foreground, --muted-foreground, --border 등)를 사용하므로 globals.css의 CSS 변수만 변경하면 됩니다.

로고 교체

// 이미지 로고 (Corporate)
brand={{ name: 'MyApp', logoSrc: '/images/logo.png' }}

// 아이콘 로고 (모든 변형)
brand={{ name: 'MyApp', icon: <MyIcon className="h-6 w-6" /> }}

// 그래디언트 배지 (SaaS)
brand={{
  name: 'MyApp',
  icon: (
    <div className="flex size-7 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-purple-600 text-white">
      <span className="text-sm font-bold">M</span>
    </div>
  ),
}}

링크 추가

linkGroups={[
  ...existingGroups,
  {
    title: '새 그룹',
    links: [
      { label: '새 링크', href: '/new' },
      { label: '외부 링크', href: 'https://example.com', external: true },
      { label: '강조 링크', href: '/important', highlight: true },
    ],
  },
]}

공통 타입 (_shared/types.ts)