Radio

단일 선택을 위한 라디오 버튼 컴포넌트입니다.

개요

Radio는 여러 옵션 중 하나만 선택할 수 있는 컴포넌트입니다. iCignal 브랜드 컬러를 적용하여 분석 설정 선택에 최적화되어 있습니다.

주요 특징:

라디오 그룹
카드 스타일 라디오
3가지 Size (sm, md, lg)
Disabled 상태
iCignal Blue Selected (#2196f3)

사용 사례:

리포트 형식 선택
분석 기간 타입 선택
차트 유형 선택
데이터 집계 방식 선택

설치


npx @vortex/cli add radio-group --package icignal

기본 사용법


import { RadioGroup, RadioGroupItem } from "@vortex/ui-icignal";
import "@vortex/ui-icignal/theme";
 
export default function Example() {
  return (
    <RadioGroup defaultValue="daily">
      <div className="flex items-center space-x-sm">
        <RadioGroupItem value="daily" id="daily" />
        <label htmlFor="daily">일별</label>
      </div>
      <div className="flex items-center space-x-sm">
        <RadioGroupItem value="weekly" id="weekly" />
        <label htmlFor="weekly">주별</label>
      </div>
      <div className="flex items-center space-x-sm">
        <RadioGroupItem value="monthly" id="monthly" />
        <label htmlFor="monthly">월별</label>
      </div>
    </RadioGroup>
  );
}

Variants (변형)

기본 라디오


<RadioGroup value={value} onValueChange={setValue}>
  <RadioGroupItem value="bar">막대 차트</RadioGroupItem>
  <RadioGroupItem value="line">선 차트</RadioGroupItem>
  <RadioGroupItem value="pie">원형 차트</RadioGroupItem>
</RadioGroup>

카드 스타일


<RadioGroup value={format} onValueChange={setFormat}>
  <div className="border rounded-lg p-md cursor-pointer hover:bg-gray-50 transition-colors">
    <div className="flex items-start space-x-sm">
      <RadioGroupItem value="csv" id="csv" />
      <div>
        <label htmlFor="csv" className="font-medium cursor-pointer">
          CSV
        </label>
        <p className="text-sm text-gray-600">쉼표로 구분된 텍스트 파일</p>
      </div>
    </div>
  </div>
  <div className="border rounded-lg p-md cursor-pointer hover:bg-gray-50 transition-colors">
    <div className="flex items-start space-x-sm">
      <RadioGroupItem value="excel" id="excel" />
      <div>
        <label htmlFor="excel" className="font-medium cursor-pointer">
          Excel
        </label>
        <p className="text-sm text-gray-600">Microsoft Excel 파일</p>
      </div>
    </div>
  </div>
  <div className="border rounded-lg p-md cursor-pointer hover:bg-gray-50 transition-colors">
    <div className="flex items-start space-x-sm">
      <RadioGroupItem value="json" id="json" />
      <div>
        <label htmlFor="json" className="font-medium cursor-pointer">
          JSON
        </label>
        <p className="text-sm text-gray-600">JavaScript Object Notation</p>
      </div>
    </div>
  </div>
</RadioGroup>

Sizes (크기)


<RadioGroupItem size="sm" value="1">Small</RadioGroupItem>
<RadioGroupItem size="md" value="2">Medium</RadioGroupItem>
<RadioGroupItem size="lg" value="3">Large</RadioGroupItem>

🆕 iCignal 브랜딩

브랜드 컬러

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

Selected State: iCignal Blue #2196f3
Hover State: Light Blue Border
Card Selected: iCignal Blue Border

iCignal 특화 사용 가이드

Report Format Selection:


// 리포트 내보내기 형식 선택
export default function ReportFormat() {
  const [format, setFormat] = useState("csv");
 
  return (
    <div className="space-y-sm">
      <h4 className="font-medium">내보내기 형식</h4>
      <RadioGroup value={format} onValueChange={setFormat}>
        <div className="space-y-sm">
          <div className="border rounded-lg p-md cursor-pointer hover:border-[#2196f3] transition-colors">
            <div className="flex items-start space-x-sm">
              <RadioGroupItem value="csv" id="csv" />
              <div>
                <label htmlFor="csv" className="font-medium cursor-pointer">
                  CSV
                </label>
                <p className="text-sm text-gray-600">데이터 분석에 최적화</p>
              </div>
            </div>
          </div>
          <div className="border rounded-lg p-md cursor-pointer hover:border-[#2196f3] transition-colors">
            <div className="flex items-start space-x-sm">
              <RadioGroupItem value="excel" id="excel" />
              <div>
                <label htmlFor="excel" className="font-medium cursor-pointer">
                  Excel
                </label>
                <p className="text-sm text-gray-600">스프레드시트 편집</p>
              </div>
            </div>
          </div>
          <div className="border rounded-lg p-md cursor-pointer hover:border-[#2196f3] transition-colors">
            <div className="flex items-start space-x-sm">
              <RadioGroupItem value="pdf" id="pdf" />
              <div>
                <label htmlFor="pdf" className="font-medium cursor-pointer">
                  PDF
                </label>
                <p className="text-sm text-gray-600">보고서 공유용</p>
              </div>
            </div>
          </div>
        </div>
      </RadioGroup>
    </div>
  );
}

Chart Type Selection:


// 차트 유형 선택
export default function ChartType() {
  const [chartType, setChartType] = useState("line");
 
  return (
    <div className="space-y-sm">
      <h4 className="font-medium">차트 유형</h4>
      <RadioGroup value={chartType} onValueChange={setChartType}>
        <RadioGroupItem value="line" id="line">
          선 차트 (추세 분석)
        </RadioGroupItem>
        <RadioGroupItem value="bar" id="bar">
          막대 차트 (비교 분석)
        </RadioGroupItem>
        <RadioGroupItem value="pie" id="pie">
          원형 차트 (비율 분석)
        </RadioGroupItem>
        <RadioGroupItem value="area" id="area">
          영역 차트 (누적 추세)
        </RadioGroupItem>
      </RadioGroup>
    </div>
  );
}

Time Range Aggregation:


// 데이터 집계 기간 선택
<RadioGroup defaultValue="daily">
  <RadioGroupItem value="hourly">시간별</RadioGroupItem>
  <RadioGroupItem value="daily">일별</RadioGroupItem>
  <RadioGroupItem value="weekly">주별</RadioGroupItem>
  <RadioGroupItem value="monthly">월별</RadioGroupItem>
  <RadioGroupItem value="yearly">연별</RadioGroupItem>
</RadioGroup>

🆕 Foundation과의 차이점

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

Props API

Prop	Type	Default	Description
value	string	-	선택된 값
defaultValue	string	-	기본 선택 값
disabled	boolean	false	비활성화 상태
size	’sm’ \| ‘md’ \| ‘lg'	'md’	크기
onValueChange	(value) => void	-	값 변경 핸들러
className	string	-	추가 CSS 클래스

접근성

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

ARIA 속성:

role="radio" (자동 적용)
aria-checked (선택 상태)

키보드 네비게이션:

↑ / ↓: 이전/다음 옵션 선택
Space: 현재 옵션 선택
Tab: 다음 그룹으로 이동

예제

예제 1: 리포트 일정 설정


import { RadioGroup, RadioGroupItem } from "@vortex/ui-icignal";
 
export default function ReportSchedule() {
  const [frequency, setFrequency] = useState("daily");
 
  return (
    <div className="space-y-md">
      <div>
        <h4 className="font-medium mb-sm">리포트 발송 주기</h4>
        <RadioGroup value={frequency} onValueChange={setFrequency}>
          <div className="space-y-sm">
            <div className="border rounded-lg p-md">
              <div className="flex items-start space-x-sm">
                <RadioGroupItem value="daily" id="daily" />
                <div>
                  <label htmlFor="daily" className="font-medium cursor-pointer">
                    매일
                  </label>
                  <p className="text-sm text-gray-600">매일 오전 9시에 발송</p>
                </div>
              </div>
            </div>
            <div className="border rounded-lg p-md">
              <div className="flex items-start space-x-sm">
                <RadioGroupItem value="weekly" id="weekly" />
                <div>
                  <label
                    htmlFor="weekly"
                    className="font-medium cursor-pointer"
                  >
                    주간
                  </label>
                  <p className="text-sm text-gray-600">
                    매주 월요일 오전 9시에 발송
                  </p>
                </div>
              </div>
            </div>
            <div className="border rounded-lg p-md">
              <div className="flex items-start space-x-sm">
                <RadioGroupItem value="monthly" id="monthly" />
                <div>
                  <label
                    htmlFor="monthly"
                    className="font-medium cursor-pointer"
                  >
                    월간
                  </label>
                  <p className="text-sm text-gray-600">
                    매월 1일 오전 9시에 발송
                  </p>
                </div>
              </div>
            </div>
          </div>
        </RadioGroup>
      </div>
    </div>
  );
}

예제 2: 데이터 시각화 옵션


import { RadioGroup, RadioGroupItem } from "@vortex/ui-icignal";
 
export default function VisualizationOptions() {
  const [visualType, setVisualType] = useState("chart");
 
  return (
    <div className="space-y-sm">
      <h4 className="font-medium">데이터 표시 방식</h4>
      <RadioGroup value={visualType} onValueChange={setVisualType}>
        <RadioGroupItem value="chart" id="chart">
          차트
        </RadioGroupItem>
        <RadioGroupItem value="table" id="table">
          테이블
        </RadioGroupItem>
        <RadioGroupItem value="pivot" id="pivot">
          피벗 테이블
        </RadioGroupItem>
        <RadioGroupItem value="map" id="map">
          지도
        </RadioGroupItem>
      </RadioGroup>
    </div>
  );
}

예제 3: 분석 비교 기준 선택


import { RadioGroup, RadioGroupItem } from "@vortex/ui-icignal";
 
export default function ComparisonPeriod() {
  const [comparison, setComparison] = useState("previous_period");
 
  return (
    <div className="space-y-sm">
      <h4 className="font-medium">비교 기준</h4>
      <RadioGroup value={comparison} onValueChange={setComparison}>
        <RadioGroupItem value="previous_period" id="previous_period">
          이전 기간
        </RadioGroupItem>
        <RadioGroupItem value="previous_year" id="previous_year">
          전년 동기
        </RadioGroupItem>
        <RadioGroupItem value="custom" id="custom">
          사용자 지정
        </RadioGroupItem>
        <RadioGroupItem value="none" id="none">
          비교 안함
        </RadioGroupItem>
      </RadioGroup>
    </div>
  );
}