Skip to Content
ComponentsIcignalLayoutGrid

Grid

그리드 레이아웃 시스템 컴포넌트입니다.

개요

Grid는 CSS Grid를 활용한 반응형 그리드 레이아웃 컴포넌트입니다. iCignal Grid는 대시보드와 데이터 시각화에 최적화된 그리드 시스템을 제공하며, Foundation Grid의 모든 기능을 상속합니다.

주요 특징:

  • 반응형 그리드
  • Gap 옵션
  • Auto-fit / Auto-fill
  • 다양한 칼럼 옵션
  • iCignal 대시보드 레이아웃 최적화

사용 사례:

  • iCignal Analytics 대시보드 위젯 그리드
  • 리포트 카드 그리드
  • 데이터 차트 레이아웃
  • 캠페인 카드 그리드

알림: 이 컴포넌트는 현재 구현 중입니다. 임시로 Tailwind CSS Grid를 사용할 수 있습니다.

기본 사용법

import "@vortex/ui-icignal/theme"; // iCignal 테마 적용
 
<div className="grid grid-cols-3 gap-md">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>;

Variants (변형)

반응형 그리드

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-md">
  {items.map((item) => (
    <Card key={item.id}>{item.content}</Card>
  ))}
</div>

Auto-fit

<div className="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-md">
  <Card>Card 1</Card>
  <Card>Card 2</Card>
  <Card>Card 3</Card>
</div>

iCignal 브랜딩

iCignal 특화 사용 가이드

Analytics 대시보드 KPI 그리드:

import { Card, CardContent } from "@vortex/ui-icignal";
import { Users, Activity, TrendingUp, DollarSign } from "lucide-react";
 
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-md">
  <Card>
    <CardContent className="pt-lg">
      <Users size={24} className="text-icignal-blue mb-sm" />
      <p className="text-sm text-gray-600">총 방문자</p>
      <p className="text-2xl font-bold">45,231</p>
      <p className="text-sm text-green-600">+12.5%</p>
    </CardContent>
  </Card>
  <Card>
    <CardContent className="pt-lg">
      <Activity size={24} className="text-icignal-blue mb-sm" />
      <p className="text-sm text-gray-600">페이지뷰</p>
      <p className="text-2xl font-bold">123,456</p>
      <p className="text-sm text-green-600">+8.9%</p>
    </CardContent>
  </Card>
  <Card>
    <CardContent className="pt-lg">
      <TrendingUp size={24} className="text-green-600 mb-sm" />
      <p className="text-sm text-gray-600">전환율</p>
      <p className="text-2xl font-bold">3.24%</p>
      <p className="text-sm text-green-600">+0.8%</p>
    </CardContent>
  </Card>
  <Card>
    <CardContent className="pt-lg">
      <DollarSign size={24} className="text-orange-600 mb-sm" />
      <p className="text-sm text-gray-600">매출</p>
      <p className="text-2xl font-bold">₩12.4M</p>
      <p className="text-sm text-red-600">-2.1%</p>
    </CardContent>
  </Card>
</div>;

데이터 차트 레이아웃:

import { Card, CardHeader, CardContent } from "@vortex/ui-icignal";
 
<div className="grid grid-cols-1 lg:grid-cols-2 gap-lg">
  <Card>
    <CardHeader>
      <h3 className="font-semibold">트래픽 추이</h3>
    </CardHeader>
    <CardContent>{/* Line Chart */}</CardContent>
  </Card>
  <Card>
    <CardHeader>
      <h3 className="font-semibold">방문 경로</h3>
    </CardHeader>
    <CardContent>{/* Pie Chart */}</CardContent>
  </Card>
  <Card className="lg:col-span-2">
    <CardHeader>
      <h3 className="font-semibold">사용자 활동</h3>
    </CardHeader>
    <CardContent>{/* Bar Chart */}</CardContent>
  </Card>
</div>;

캠페인 카드 그리드:

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-lg">
  {campaigns.map((campaign) => (
    <Card key={campaign.id} className="hover:shadow-md transition-shadow">
      <CardHeader>
        <h3 className="font-semibold">{campaign.name}</h3>
        <Badge variant={campaign.status}>{campaign.statusText}</Badge>
      </CardHeader>
      <CardContent>
        <p className="text-sm text-gray-600">{campaign.description}</p>
        <div className="mt-md">
          <p className="text-xs text-gray-500">도달률</p>
          <p className="text-lg font-bold">{campaign.reach}</p>
        </div>
      </CardContent>
    </Card>
  ))}
</div>

Foundation과의 차이점

속성FoundationiCignal
기본 Gapmdmd (대시보드 최적화)
브랜드 적용없음iCignal 위젯 레이아웃 패턴
사용 맥락범용Analytics Dashboard 특화
반응형 설정표준대시보드 breakpoint 최적화
테마중립적 테마iCignal 테마 (@vortex/ui-icignal/theme)

사용 패턴 차이:

// Foundation - 범용 그리드
<div className="grid grid-cols-3 gap-md">
  {/* Generic content */}
</div>
 
// iCignal - Dashboard KPI Grid
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-md">
  {/* Analytics KPI cards */}
</div>

예제

예제 1: iCignal Analytics 대시보드

import "@vortex/ui-icignal/theme";
import { Card, CardHeader, CardContent } from "@vortex/ui-icignal";
import { BarChart, LineChart, PieChart, Activity } from "lucide-react";
 
export default function AnalyticsDashboard() {
  return (
    <div className="space-y-lg">
      {/* KPI Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-md">
        {kpis.map((kpi) => (
          <Card key={kpi.title}>
            <CardContent className="pt-lg">
              <kpi.Icon size={24} className="text-icignal-blue mb-sm" />
              <p className="text-sm text-gray-600">{kpi.title}</p>
              <p className="text-2xl font-bold">{kpi.value}</p>
              <p
                className={`text-sm ${
                  kpi.trend === "up" ? "text-green-600" : "text-red-600"
                }`}
              >
                {kpi.change}
              </p>
            </CardContent>
          </Card>
        ))}
      </div>
 
      {/* Chart Grid */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-lg">
        <Card>
          <CardHeader>
            <div className="flex items-center justify-between">
              <h3 className="font-semibold">트래픽 추이</h3>
              <LineChart size={20} className="text-gray-400" />
            </div>
          </CardHeader>
          <CardContent>{/* Chart component */}</CardContent>
        </Card>
        <Card>
          <CardHeader>
            <div className="flex items-center justify-between">
              <h3 className="font-semibold">방문 경로</h3>
              <PieChart size={20} className="text-gray-400" />
            </div>
          </CardHeader>
          <CardContent>{/* Chart component */}</CardContent>
        </Card>
      </div>
 
      {/* Full-width Chart */}
      <Card>
        <CardHeader>
          <div className="flex items-center justify-between">
            <h3 className="font-semibold">사용자 활동 상세</h3>
            <BarChart size={20} className="text-gray-400" />
          </div>
        </CardHeader>
        <CardContent>{/* Full-width chart */}</CardContent>
      </Card>
    </div>
  );
}

예제 2: iCignal 리포트 그리드

import "@vortex/ui-icignal/theme";
import { Card, CardHeader, CardContent, CardFooter } from "@vortex/ui-icignal";
import { Button } from "@vortex/ui-icignal";
import { FileText, Eye, Download } from "lucide-react";
 
export default function ReportGrid() {
  const reports = [
    { id: 1, title: "월간 트래픽 분석", date: "2024-01", views: "15.2K" },
    { id: 2, title: "사용자 행동 분석", date: "2024-01", views: "8.9K" },
    { id: 3, title: "전환율 최적화", date: "2024-01", views: "12.3K" },
    { id: 4, title: "캠페인 성과 분석", date: "2024-02", views: "6.1K" },
    { id: 5, title: "A/B 테스트 결과", date: "2024-02", views: "9.4K" },
    { id: 6, title: "SEO 분석 리포트", date: "2024-02", views: "7.8K" },
  ];
 
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-lg">
      {reports.map((report) => (
        <Card key={report.id} className="hover:shadow-md transition-shadow">
          <CardHeader>
            <FileText size={24} className="text-icignal-blue mb-sm" />
            <h3 className="font-semibold">{report.title}</h3>
            <p className="text-sm text-gray-600">{report.date}</p>
          </CardHeader>
          <CardContent>
            <div className="flex items-center gap-xs text-sm text-gray-600">
              <Eye size={16} />
              <span>{report.views} 조회</span>
            </div>
          </CardContent>
          <CardFooter className="flex gap-sm">
            <Button variant="outline" size="sm" className="flex-1">
              보기
            </Button>
            <Button variant="ghost" size="sm">
              <Download size={16} />
            </Button>
          </CardFooter>
        </Card>
      ))}
    </div>
  );
}

관련 컴포넌트

Last updated on
ContainerStack