Skip to Content
ComponentsIcignalLayoutContainer

Container

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

개요

Container는 콘텐츠를 중앙 정렬하고 최대 너비를 제한하는 레이아웃 컴포넌트입니다. iCignal Container는 iCignal 제품에 최적화된 반응형 디자인을 제공하며, Foundation Container의 모든 기능을 상속합니다.

주요 특징:

  • 반응형 최대 너비
  • 중앙 정렬
  • 패딩 옵션
  • Breakpoint 기반 너비
  • iCignal 대시보드 최적화

사용 사례:

  • iCignal Analytics 페이지 레이아웃
  • 리포트 뷰어 컨테이너
  • 대시보드 섹션 래퍼
  • 캠페인 관리 페이지

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

설치

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

기본 사용법

import "@vortex/ui-icignal/theme"; // iCignal 테마 적용
import { Container } from "@vortex/ui-icignal";
 
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>

iCignal 브랜딩

iCignal 특화 사용 가이드

Analytics 대시보드 레이아웃:

import { Container } from "@vortex/ui-icignal";
 
<Container maxWidth="xl" padding="lg">
  <div className="mb-lg">
    <h1 className="text-3xl font-bold">Analytics Dashboard</h1>
    <p className="text-gray-600">실시간 데이터 분석</p>
  </div>
 
  {/* KPI Cards */}
  <div className="grid grid-cols-4 gap-md mb-lg">{/* ... KPI cards ... */}</div>
 
  {/* Charts */}
  <div className="grid grid-cols-2 gap-lg">{/* ... chart cards ... */}</div>
</Container>;

리포트 뷰어 레이아웃:

<Container maxWidth="lg" padding="md">
  <div className="bg-white rounded-lg shadow-sm p-lg">
    <h2 className="text-2xl font-bold mb-md">월간 분석 리포트</h2>
    <div className="prose max-w-none">{/* Report content */}</div>
  </div>
</Container>

캠페인 관리 페이지:

<Container maxWidth="xl">
  <div className="flex justify-between items-center mb-lg">
    <div>
      <h1 className="text-2xl font-bold">캠페인 관리</h1>
      <p className="text-sm text-gray-600">진행 중인 마케팅 캠페인</p>
    </div>
    <Button variant="primary">새 캠페인</Button>
  </div>
 
  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-md">
    {/* Campaign cards */}
  </div>
</Container>

Foundation과의 차이점

속성FoundationiCignal
기본 maxWidthxlxl (대시보드 최적화)
브랜드 적용없음iCignal 페이지 헤더 스타일
사용 맥락범용Analytics/Dashboard 특화
여백 설정표준대시보드 여백 최적화
테마중립적 테마iCignal 테마 (@vortex/ui-icignal/theme)

import 경로 차이:

// Foundation
import { Container } from "@vortex/ui-foundation";
 
// iCignal
import "@vortex/ui-icignal/theme"; // 테마 import 필수
import { Container } from "@vortex/ui-icignal";

Props API

PropTypeDefaultDescription
maxWidth’sm’ | ‘md’ | ‘lg’ | ‘xl’ | ‘full''xl’최대 너비
padding’none’ | ‘sm’ | ‘md’ | ‘lg''md’패딩 크기
classNamestring-추가 CSS 클래스
childrenReactNode-컨테이너 내용

접근성

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

예제

예제 1: iCignal Analytics 대시보드

import "@vortex/ui-icignal/theme";
import { Container } from "@vortex/ui-icignal";
import { Card, CardHeader, CardContent } from "@vortex/ui-icignal";
import { BarChart, LineChart, PieChart, Activity } from "lucide-react";
 
export default function AnalyticsDashboard() {
  return (
    <Container maxWidth="xl" padding="lg">
      {/* Header */}
      <div className="mb-xl">
        <h1 className="text-3xl font-bold text-gray-900">
          Analytics Dashboard
        </h1>
        <p className="text-gray-600 mt-xs">실시간 데이터 모니터링 및 분석</p>
      </div>
 
      {/* KPI Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-md mb-xl">
        <Card>
          <CardContent className="pt-lg">
            <Activity size={20} className="text-icignal-blue mb-sm" />
            <p className="text-sm text-gray-600">실시간 방문자</p>
            <p className="text-2xl font-bold">1,234</p>
          </CardContent>
        </Card>
        {/* More KPI cards */}
      </div>
 
      {/* Charts */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-lg">
        <Card>
          <CardHeader>
            <h3 className="font-semibold">트래픽 추이</h3>
          </CardHeader>
          <CardContent>
            <LineChart size={200} />
          </CardContent>
        </Card>
        <Card>
          <CardHeader>
            <h3 className="font-semibold">방문 경로</h3>
          </CardHeader>
          <CardContent>
            <PieChart size={200} />
          </CardContent>
        </Card>
      </div>
    </Container>
  );
}

예제 2: iCignal 리포트 페이지

import "@vortex/ui-icignal/theme";
import { Container } from "@vortex/ui-icignal";
import { Button } from "@vortex/ui-icignal";
import { Download, Share2, Print } from "lucide-react";
 
export default function ReportPage() {
  return (
    <Container maxWidth="lg" padding="lg">
      {/* Report Header */}
      <div className="bg-white rounded-lg shadow-sm p-lg mb-lg">
        <div className="flex justify-between items-start mb-md">
          <div>
            <h1 className="text-2xl font-bold">월간 분석 리포트</h1>
            <p className="text-sm text-gray-600">2024년 1월 1일 - 1월 31일</p>
          </div>
          <div className="flex gap-sm">
            <Button variant="ghost" size="sm">
              <Print size={16} className="mr-xs" />
              인쇄
            </Button>
            <Button variant="outline" size="sm">
              <Share2 size={16} className="mr-xs" />
              공유
            </Button>
            <Button variant="primary" size="sm">
              <Download size={16} className="mr-xs" />
              다운로드
            </Button>
          </div>
        </div>
 
        {/* Report Content */}
        <div className="prose max-w-none">
          <h2>개요</h2>
          <p>이번 달 웹사이트 트래픽은 전월 대비 12.5% 증가했습니다...</p>
 
          <h2>주요 지표</h2>
          <ul>
            <li>총 방문자: 45,231 (+12.5%)</li>
            <li>페이지뷰: 123,456 (+8.9%)</li>
            <li>전환율: 3.24% (+0.8%)</li>
          </ul>
        </div>
      </div>
    </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>
  );
}

관련 컴포넌트

Last updated on
CardGrid