Select

옵션을 선택하는 셀렉트 컴포넌트입니다.

개요

Select는 여러 옵션 중 하나 또는 여러 개를 선택할 수 있는 드롭다운 컴포넌트입니다. iCignal 브랜드 컬러를 적용하여 데이터 분석 설정에 최적화되어 있습니다.

주요 특징:

Single / Multi select
Searchable select
그룹 옵션
커스텀 옵션 렌더링
키보드 네비게이션
iCignal Blue Focus (#2196f3)

사용 사례:

데이터 소스 선택
분석 지표 선택
리포트 템플릿 선택
필터 조건 설정

설치


npx @vortex/cli add select --package icignal

기본 사용법


import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
} from "@vortex/ui-icignal";
import "@vortex/ui-icignal/theme";
 
export default function Example() {
  return (
    <Select>
      <SelectTrigger>
        <SelectValue placeholder="데이터 소스를 선택하세요" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="mysql">MySQL</SelectItem>
        <SelectItem value="postgres">PostgreSQL</SelectItem>
        <SelectItem value="mongodb">MongoDB</SelectItem>
      </SelectContent>
    </Select>
  );
}

Variants (변형)

Single Select (기본)


<Select onValueChange={(value) => console.log(value)}>
  <SelectTrigger>
    <SelectValue placeholder="분석 지표 선택" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="conversion">전환율</SelectItem>
    <SelectItem value="revenue">매출</SelectItem>
    <SelectItem value="users">사용자 수</SelectItem>
  </SelectContent>
</Select>

Multi Select


<Select multiple onValueChange={(values) => console.log(values)}>
  <SelectTrigger>
    <SelectValue placeholder="여러 지표 선택" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="conversion">전환율</SelectItem>
    <SelectItem value="revenue">매출</SelectItem>
    <SelectItem value="users">사용자 수</SelectItem>
    <SelectItem value="sessions">세션 수</SelectItem>
  </SelectContent>
</Select>

Searchable Select


<Select searchable>
  <SelectTrigger>
    <SelectValue placeholder="캠페인 검색" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="campaign1">2024 신규 고객 유치</SelectItem>
    <SelectItem value="campaign2">여름 프로모션</SelectItem>
    <SelectItem value="campaign3">재구매 유도</SelectItem>
  </SelectContent>
</Select>

그룹 옵션


import { SelectGroup, SelectLabel } from "@vortex/ui-icignal";
 
<Select>
  <SelectTrigger>
    <SelectValue placeholder="데이터 소스 선택" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>데이터베이스</SelectLabel>
      <SelectItem value="mysql">MySQL</SelectItem>
      <SelectItem value="postgres">PostgreSQL</SelectItem>
      <SelectItem value="mongodb">MongoDB</SelectItem>
    </SelectGroup>
    <SelectGroup>
      <SelectLabel>클라우드</SelectLabel>
      <SelectItem value="bigquery">BigQuery</SelectItem>
      <SelectItem value="redshift">Redshift</SelectItem>
      <SelectItem value="snowflake">Snowflake</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>;

🆕 iCignal 브랜딩

브랜드 컬러

iCignal Select 컴포넌트는 다음 브랜드 컬러를 사용합니다:

Focus State: iCignal Blue #2196f3
Selected Item: iCignal Blue Background
Hover State: Light Blue

iCignal 특화 사용 가이드

Analytics Dashboard:


// 분석 기간 선택
<Select>
  <SelectTrigger>
    <SelectValue placeholder="분석 기간" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="today">오늘</SelectItem>
    <SelectItem value="yesterday">어제</SelectItem>
    <SelectItem value="week">최근 7일</SelectItem>
    <SelectItem value="month">최근 30일</SelectItem>
    <SelectItem value="custom">사용자 지정</SelectItem>
  </SelectContent>
</Select>

Report Builder:


// 리포트 템플릿 선택
<Select>
  <SelectTrigger>
    <SelectValue placeholder="리포트 템플릿" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>마케팅</SelectLabel>
      <SelectItem value="campaign">캠페인 성과</SelectItem>
      <SelectItem value="conversion">전환 분석</SelectItem>
      <SelectItem value="roi">ROI 리포트</SelectItem>
    </SelectGroup>
    <SelectGroup>
      <SelectLabel>세일즈</SelectLabel>
      <SelectItem value="sales">판매 현황</SelectItem>
      <SelectItem value="revenue">매출 분석</SelectItem>
      <SelectItem value="forecast">매출 예측</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

Dashboard Filters:


// 다중 필터 선택
<Select multiple>
  <SelectTrigger>
    <SelectValue placeholder="트래픽 소스" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="organic">자연 검색</SelectItem>
    <SelectItem value="paid">유료 광고</SelectItem>
    <SelectItem value="social">소셜 미디어</SelectItem>
    <SelectItem value="direct">직접 방문</SelectItem>
    <SelectItem value="referral">참조 사이트</SelectItem>
  </SelectContent>
</Select>

🆕 Foundation과의 차이점

항목	Foundation	iCignal
Primary Focus Color	Neutral Gray	iCignal Blue (#2196f3)
사용 맥락	범용 웹 애플리케이션	Analytics & Marketing Dashboard
테마	기본 Vortex 테마	iCignal 브랜드 테마
Import	`@vortex/ui-foundation`	`@vortex/ui-icignal` + `theme`

Props API

Prop	Type	Default	Description
value	string	-	선택된 값
defaultValue	string	-	기본 선택 값
multiple	boolean	false	다중 선택 허용
searchable	boolean	false	검색 기능
disabled	boolean	false	비활성화 상태
onValueChange	(value) => void	-	값 변경 핸들러
className	string	-	추가 CSS 클래스

접근성

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

ARIA 속성:

role="combobox" (자동 적용)
aria-expanded (드롭다운 열림/닫힘)
aria-activedescendant (현재 포커스된 옵션)

키보드 네비게이션:

Space / Enter: 드롭다운 열기
↑ / ↓: 옵션 탐색
Enter: 옵션 선택
Esc: 드롭다운 닫기

예제

예제 1: 데이터 소스 선택


import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
  SelectGroup,
  SelectLabel,
} from "@vortex/ui-icignal";
 
export default function DataSourceSelector() {
  const [source, setSource] = useState("");
 
  return (
    <div className="space-y-sm">
      <label>데이터 소스</label>
      <Select value={source} onValueChange={setSource}>
        <SelectTrigger>
          <SelectValue placeholder="데이터 소스를 선택하세요" />
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            <SelectLabel>관계형 데이터베이스</SelectLabel>
            <SelectItem value="mysql">MySQL</SelectItem>
            <SelectItem value="postgres">PostgreSQL</SelectItem>
            <SelectItem value="oracle">Oracle</SelectItem>
          </SelectGroup>
          <SelectGroup>
            <SelectLabel>NoSQL</SelectLabel>
            <SelectItem value="mongodb">MongoDB</SelectItem>
            <SelectItem value="redis">Redis</SelectItem>
            <SelectItem value="cassandra">Cassandra</SelectItem>
          </SelectGroup>
          <SelectGroup>
            <SelectLabel>클라우드</SelectLabel>
            <SelectItem value="bigquery">Google BigQuery</SelectItem>
            <SelectItem value="redshift">AWS Redshift</SelectItem>
            <SelectItem value="snowflake">Snowflake</SelectItem>
          </SelectGroup>
        </SelectContent>
      </Select>
    </div>
  );
}

예제 2: 분석 지표 다중 선택


import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
} from "@vortex/ui-icignal";
 
export default function MetricsSelector() {
  const [metrics, setMetrics] = useState([]);
 
  return (
    <div className="space-y-sm">
      <label>분석 지표 (최대 5개)</label>
      <Select
        multiple
        value={metrics}
        onValueChange={(values) => {
          if (values.length <= 5) {
            setMetrics(values);
          }
        }}
      >
        <SelectTrigger>
          <SelectValue placeholder="지표를 선택하세요" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="users">활성 사용자</SelectItem>
          <SelectItem value="sessions">세션 수</SelectItem>
          <SelectItem value="pageviews">페이지뷰</SelectItem>
          <SelectItem value="conversion">전환율</SelectItem>
          <SelectItem value="revenue">매출</SelectItem>
          <SelectItem value="avg_session">평균 세션 시간</SelectItem>
          <SelectItem value="bounce_rate">이탈률</SelectItem>
        </SelectContent>
      </Select>
      <p className="text-sm text-gray-600">
        {metrics.length}개 선택됨 (최대 5개)
      </p>
    </div>
  );
}

예제 3: 캠페인 검색 및 선택


import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
} from "@vortex/ui-icignal";
 
export default function CampaignSelector() {
  const campaigns = [
    { id: "1", name: "2024 신규 고객 유치 캠페인" },
    { id: "2", name: "여름 시즌 프로모션" },
    { id: "3", name: "재구매 고객 리타게팅" },
    { id: "4", name: "VIP 고객 특별 혜택" },
    { id: "5", name: "신제품 런칭 캠페인" },
  ];
 
  const [selectedCampaign, setSelectedCampaign] = useState("");
 
  return (
    <div className="space-y-sm">
      <label>캠페인 선택</label>
      <Select
        searchable
        value={selectedCampaign}
        onValueChange={setSelectedCampaign}
      >
        <SelectTrigger>
          <SelectValue placeholder="캠페인을 검색하거나 선택하세요" />
        </SelectTrigger>
        <SelectContent>
          {campaigns.map((campaign) => (
            <SelectItem key={campaign.id} value={campaign.id}>
              {campaign.name}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    </div>
  );
}