Skip to Content
ComponentsIcignalLayoutCard

Card

콘텐츠를 담는 카드 컨테이너 컴포넌트입니다.

개요

Card는 관련된 정보를 시각적으로 그룹화하는 컨테이너 컴포넌트입니다. iCignal Card는 iCignal 브랜드 컬러와 스타일이 적용되어 있으며, Foundation Card의 모든 기능을 상속합니다.

주요 특징:

  • 헤더/본문/푸터 구조
  • 이미지 카드
  • 호버 효과
  • 그림자 스타일
  • iCignal 브랜드 스타일 적용

사용 사례:

  • iCignal 대시보드 위젯
  • 분석 결과 카드
  • 리포트 요약 카드
  • 캠페인 카드

설치

npx @vortex/cli add card --package icignal

기본 사용법

import "@vortex/ui-icignal/theme"; // iCignal 테마 적용
import { Card, CardHeader, CardContent, CardFooter } from "@vortex/ui-icignal";
 
export default function Example() {
  return (
    <Card>
      <CardHeader>
        <h3>Card Title</h3>
      </CardHeader>
      <CardContent>
        <p>Card content goes here</p>
      </CardContent>
      <CardFooter>
        <Button>Action</Button>
      </CardFooter>
    </Card>
  );
}

Variants (변형)

기본 카드

<Card>
  <CardContent>
    <p>기본 카드</p>
  </CardContent>
</Card>

헤더가 있는 카드

<Card>
  <CardHeader>
    <h3>제목</h3>
    <p className="text-sm text-gray-600">부제목</p>
  </CardHeader>
  <CardContent>
    <p>내용</p>
  </CardContent>
</Card>

이미지 카드

<Card>
  <img src="/image.jpg" alt="Image" className="w-full rounded-t-lg" />
  <CardContent>
    <h3>이미지 카드</h3>
    <p>설명 텍스트</p>
  </CardContent>
</Card>

호버 효과

<Card className="hover:shadow-lg transition-shadow cursor-pointer">
  <CardContent>
    <p>호버 시 그림자 효과</p>
  </CardContent>
</Card>

iCignal 브랜딩

브랜드 컬러

iCignal Card는 다음 브랜드 컬러를 사용합니다:

  • Primary (Blue): #2196f3 - 주요 카드 강조
  • Success (Green): #4caf50 - 성공 지표 카드
  • Warning (Orange): #ff9800 - 주의 필요 카드

iCignal 특화 사용 가이드

Analytics 대시보드 위젯:

import { BarChart, TrendingUp } from "lucide-react";
 
<Card>
  <CardHeader>
    <div className="flex items-center justify-between">
      <h3 className="text-lg font-semibold">일일 방문자</h3>
      <BarChart size={20} className="text-icignal-blue" />
    </div>
  </CardHeader>
  <CardContent>
    <p className="text-3xl font-bold">15,234</p>
    <p className="text-sm text-green-600 flex items-center gap-xs">
      <TrendingUp size={16} />
      +12.5% 전일 대비
    </p>
  </CardContent>
</Card>;

분석 리포트 카드:

<Card className="hover:shadow-md transition-shadow">
  <CardHeader>
    <h3 className="font-semibold">월간 분석 리포트</h3>
    <p className="text-sm text-gray-600">2024년 1월</p>
  </CardHeader>
  <CardContent>
    <ul className="space-y-sm">
      <li>전환율: 3.2%</li>
      <li>이탈률: 42.1%</li>
      <li>평균 세션: 4분 23초</li>
    </ul>
  </CardContent>
  <CardFooter>
    <Button variant="outline" size="sm">
      리포트 보기
    </Button>
  </CardFooter>
</Card>

캠페인 관리 카드:

import { Mail, Users, Target } from "lucide-react";
 
<div className="grid grid-cols-3 gap-md">
  <Card>
    <CardContent className="pt-lg">
      <Mail size={24} className="text-icignal-blue mb-sm" />
      <h4 className="font-semibold">이메일 캠페인</h4>
      <p className="text-2xl font-bold mt-md">1,245</p>
      <p className="text-sm text-gray-600">발송됨</p>
    </CardContent>
  </Card>
  <Card>
    <CardContent className="pt-lg">
      <Users size={24} className="text-green-600 mb-sm" />
      <h4 className="font-semibold">도달률</h4>
      <p className="text-2xl font-bold mt-md">89.2%</p>
      <p className="text-sm text-gray-600">평균 대비 +5%</p>
    </CardContent>
  </Card>
  <Card>
    <CardContent className="pt-lg">
      <Target size={24} className="text-orange-600 mb-sm" />
      <h4 className="font-semibold">전환율</h4>
      <p className="text-2xl font-bold mt-md">3.8%</p>
      <p className="text-sm text-gray-600">목표: 4.0%</p>
    </CardContent>
  </Card>
</div>;

Foundation과의 차이점

속성FoundationiCignal
Border Color중립 회색iCignal Blue 강조 가능
브랜드 적용없음iCignal 아이콘 사용 가능
사용 맥락범용iCignal Analytics/Reports 특화
호버 효과기본 그림자iCignal Blue 강조 가능
테마중립적 테마iCignal 테마 (@vortex/ui-icignal/theme)

import 경로 차이:

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

Props API

PropTypeDefaultDescription
classNamestring-추가 CSS 클래스
childrenReactNode-카드 내용

접근성

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

ARIA 속성:

  • role="article" (독립적인 콘텐츠일 경우)

예제

예제 1: iCignal 대시보드 KPI 카드

import "@vortex/ui-icignal/theme";
import { Card, CardHeader, CardContent } from "@vortex/ui-icignal";
import { Activity, Users, DollarSign, ShoppingCart } from "lucide-react";
 
export default function DashboardKPIs() {
  const kpis = [
    {
      title: "총 방문자",
      value: "45,231",
      icon: Users,
      change: "+12.5%",
      trend: "up",
    },
    {
      title: "전환율",
      value: "3.24%",
      icon: Target,
      change: "+0.8%",
      trend: "up",
    },
    {
      title: "매출",
      value: "₩12.4M",
      icon: DollarSign,
      change: "-2.1%",
      trend: "down",
    },
    {
      title: "주문 수",
      value: "1,234",
      icon: ShoppingCart,
      change: "+5.2%",
      trend: "up",
    },
  ];
 
  return (
    <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">
            <div className="flex items-center justify-between mb-sm">
              <p className="text-sm text-gray-600">{kpi.title}</p>
              <kpi.icon size={20} className="text-icignal-blue" />
            </div>
            <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>
  );
}

예제 2: iCignal 분석 리포트 목록

import "@vortex/ui-icignal/theme";
import { Card, CardHeader, CardContent, CardFooter } from "@vortex/ui-icignal";
import { Button } from "@vortex/ui-icignal";
import { FileText, Download, Eye } from "lucide-react";
 
export default function ReportCards() {
  const reports = [
    {
      title: "월간 트래픽 분석",
      date: "2024년 1월",
      views: "15.2K",
      status: "complete",
    },
    {
      title: "사용자 행동 분석",
      date: "2024년 1월",
      views: "8.9K",
      status: "complete",
    },
    {
      title: "전환율 최적화",
      date: "2024년 2월",
      views: "-",
      status: "processing",
    },
  ];
 
  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-lg">
      {reports.map((report) => (
        <Card key={report.title} 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">
            {report.status === "complete" ? (
              <>
                <Button variant="outline" size="sm" className="flex-1">
                  <Eye size={16} className="mr-xs" />
                  보기
                </Button>
                <Button variant="ghost" size="sm">
                  <Download size={16} />
                </Button>
              </>
            ) : (
              <Button variant="outline" size="sm" className="flex-1" disabled>
                처리 중...
              </Button>
            )}
          </CardFooter>
        </Card>
      ))}
    </div>
  );
}

관련 컴포넌트

Last updated on
SwitchContainer