Container

반응형 레이아웃 컨테이너 컴포넌트입니다.

개요

Container는 콘텐츠를 중앙 정렬하고 최대 너비를 제한하는 레이아웃 컴포넌트입니다. 반응형 디자인에 최적화되어 있습니다.

주요 특징:

반응형 최대 너비
중앙 정렬
패딩 옵션
Breakpoint 기반 너비

사용 사례:

페이지 레이아웃
섹션 컨테이너
콘텐츠 영역 제한
반응형 레이아웃

알림: 이 컴포넌트는 현재 구현 중입니다. 임시로 다음 패턴을 사용할 수 있습니다.

설치


# Coming Soon
# npx @vortex/cli add container --package foundation

기본 사용법


import { Container } from "@vortex/ui-foundation";
 
export default function Example() {
  return (
    <Container>
      <h1>Page Title</h1>
      <p>Content goes here</p>
    </Container>
  );
}

Variants (변형)

최대 너비 옵션


<Container maxWidth="sm">Small Container</Container>
<Container maxWidth="md">Medium Container</Container>
<Container maxWidth="lg">Large Container</Container>
<Container maxWidth="xl">Extra Large Container</Container>

패딩 옵션


<Container padding="none">No Padding</Container>
<Container padding="sm">Small Padding</Container>
<Container padding="md">Medium Padding</Container>
<Container padding="lg">Large Padding</Container>

Props API

Prop	Type	Default	Description
maxWidth	’sm’ \| ‘md’ \| ‘lg’ \| ‘xl’ \| ‘full'	'xl’	최대 너비
padding	’none’ \| ‘sm’ \| ‘md’ \| ‘lg'	'md’	패딩 크기
className	string	-	추가 CSS 클래스
children	ReactNode	-	컨테이너 내용

접근성

Container 컴포넌트는 WCAG 2.1 AA 기준을 준수합니다.

예제

예제 1: 페이지 레이아웃


export default function Page() {
  return (
    <Container maxWidth="lg">
      <h1>페이지 제목</h1>
      <p>콘텐츠 영역</p>
    </Container>
  );
}

임시 구현

Container 컴포넌트가 구현될 때까지 다음 코드를 사용할 수 있습니다:


// components/Container.tsx
export function Container({
  maxWidth = "xl",
  padding = "md",
  className = "",
  children,
}) {
  const maxWidths = {
    sm: "max-w-screen-sm",
    md: "max-w-screen-md",
    lg: "max-w-screen-lg",
    xl: "max-w-screen-xl",
    full: "max-w-full",
  };
 
  const paddings = {
    none: "",
    sm: "px-sm",
    md: "px-md",
    lg: "px-lg",
  };
 
  return (
    <div
      className={`${maxWidths[maxWidth]} ${paddings[padding]} mx-auto ${className}`}
    >
      {children}
    </div>
  );
}