Skip to Content
ComponentsIcignalData DisplayList

List

리스트 아이템을 표시하는 컴포넌트입니다.

개요

List는 항목을 수직으로 나열하는 컴포넌트입니다. iCignal List는 iCignal 브랜드 스타일이 적용되어 있으며, 분석 인사이트와 리포트 항목을 효과적으로 표시합니다. Foundation List의 모든 기능을 상속합니다.

사용 사례:

  • iCignal 인사이트 목록
  • 리포트 항목 나열
  • 알림 리스트
  • 작업 목록

알림: 이 컴포넌트는 현재 구현 중입니다.

기본 사용법

import "@vortex/ui-icignal/theme"; // iCignal 테마 적용
 
<ul className="space-y-sm">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>;

iCignal 브랜딩

iCignal 특화 사용 가이드

인사이트 목록:

import { Lightbulb, TrendingUp, AlertTriangle } from "lucide-react";
 
<ul className="space-y-md">
  <li className="flex items-start gap-sm p-md border rounded-lg">
    <Lightbulb size={20} className="text-icignal-blue mt-xs" />
    <div>
      <p className="font-medium">모바일 트래픽 증가</p>
      <p className="text-sm text-gray-600">
        모바일 방문자가 전월 대비 25% 증가했습니다.
      </p>
    </div>
  </li>
  <li className="flex items-start gap-sm p-md border rounded-lg">
    <TrendingUp size={20} className="text-green-600 mt-xs" />
    <div>
      <p className="font-medium">전환율 개선</p>
      <p className="text-sm text-gray-600">
        랜딩 페이지 최적화로 전환율이 15% 향상되었습니다.
      </p>
    </div>
  </li>
</ul>;

Foundation과의 차이점

속성FoundationiCignal
스타일중립적iCignal Analytics 맥락
테마중립적 테마iCignal 테마 (@vortex/ui-icignal/theme)

관련 컴포넌트

Last updated on
SpinnerProgress