02-reusable-page — 페이지 레벨 재사용 컴포넌트

프로젝트에 복사하여 사용하는 페이지 레벨 컴포넌트 라이브러리

개요

화면의 독립된 영역(Footer, Header, Hero, Sidebar 등)을 통째로 가져가는 완성된 섹션 컴포넌트를 관리합니다. 02-reusable-code/의 원자적 부품을 조합하고, 02-reusable-design/의 디자인 토큰을 적용한 결과물입니다.

3계층 모델에서의 위치

02-reusable-design  ← "재료" (색상, 폰트, 애니메이션 정의)
        │ 참조
02-reusable-code    ← "부품" (Button, hooks, utils)
        │ 조합
02-reusable-page    ← "완성품" ★ (Footer, Header, Hero)

page에 넣는 것

• 페이지의 독립된 영역 (Header, Footer, Hero, CTA, Pricing)
• code 컴포넌트를 조합한 완성된 섹션
• 여러 프로젝트에서 "통째로 가져가는" 단위

page에 넣지 않는 것

• 단독 UI 컴포넌트 (<Button>, <Card>) → 02-reusable-code
• 순수 스타일 정의 (CSS 변수, 키프레임) → 02-reusable-design
• 전체 페이지 (page.tsx) → 프로젝트 특화, 너무 큰 단위

호환성

폴더 구조

02-reusable-page/
├── README.md                    # 이 파일
└── footer/                      # Footer 컴포넌트 라이브러리
    ├── README.md                # 상세 문서
    ├── _shared/
    │   ├── types.ts             # 공통 타입/인터페이스
    │   └── i18n.ts              # EN/KO 라벨
    ├── footer-corporate.tsx     # 기업형 (다크 배경, 연락처, 사업자 정보)
    ├── footer-saas.tsx          # SaaS형 (shadcn 테마, 소셜 링크)
    ├── footer-i18n.tsx          # i18n 지원형 (t() 함수 주입, 상태 표시기)
    └── footer-minimal.tsx       # 미니멀형 (최소 구조, 경량)

카테고리별 인덱스

Footer (4개 변형)

공유 모듈 (2개)

의존성 매트릭스

O: 필수, △: 선택, -: 불필요

사용 방법

1. 필요한 변형의 .tsx 파일을 프로젝트에 복사
2. _shared/types.ts와 _shared/i18n.ts도 함께 복사
3. import 경로를 프로젝트에 맞게 수정
4. 상세 사용법은 각 변형의 JSDoc과 footer/README.md 참조

추출 이력

관련 문서

• 02-reusable-design — 디자인 자산 라이브러리 (재료 계층)
• 02-reusable-code — 원자적 UI 컴포넌트 라이브러리 (부품 계층)
• 코딩 컨벤션 — 재사용 코드 통일 규칙