Switch

ON/OFF 상태를 토글하는 스위치 컴포넌트입니다.

개요

Switch는 설정을 켜고 끄는 토글 컴포넌트입니다. iCignal 브랜드 컬러를 적용하여 분석 기능 활성화 설정에 최적화되어 있습니다.

주요 특징:

ON/OFF 토글
3가지 Size (sm, md, lg)
Label 위치 조절
Disabled 상태
iCignal Blue Active (#2196f3)

사용 사례:

리포트 자동 발송 설정
실시간 데이터 업데이트
알림 활성화/비활성화
기능 토글

설치


npx @vortex/cli add switch --package icignal

기본 사용법


import { Switch } from "@vortex/ui-icignal";
import "@vortex/ui-icignal/theme";
 
export default function Example() {
  return <Switch />;
}

Variants (변형)

기본 스위치


<Switch checked={enabled} onCheckedChange={setEnabled} />

Label 포함


<div className="flex items-center space-x-sm">
  <Switch id="auto-refresh" />
  <label htmlFor="auto-refresh">자동 새로고침</label>
</div>

Sizes (크기)


<Switch size="sm" />
<Switch size="md" />
<Switch size="lg" />

Label 위치

Left


<div className="flex items-center space-x-sm">
  <label>실시간 데이터</label>
  <Switch />
</div>

Right (기본)


<div className="flex items-center space-x-sm">
  <Switch />
  <label>실시간 데이터</label>
</div>

🆕 iCignal 브랜딩

브랜드 컬러

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

Active State: iCignal Blue #2196f3
Success Feedback: iCignal Green #4caf50
Hover State: Light Blue

iCignal 특화 사용 가이드

Dashboard Settings:


// 대시보드 자동 새로고침 설정
export default function DashboardSettings() {
  const [autoRefresh, setAutoRefresh] = useState(true);
  const [realtime, setRealtime] = useState(false);
  const [notifications, setNotifications] = useState(true);
 
  return (
    <div className="space-y-md">
      <div className="flex items-center justify-between">
        <div>
          <h4 className="font-medium">자동 새로고침</h4>
          <p className="text-sm text-gray-600">5분마다 데이터 갱신</p>
        </div>
        <Switch checked={autoRefresh} onCheckedChange={setAutoRefresh} />
      </div>
      <div className="flex items-center justify-between">
        <div>
          <h4 className="font-medium">실시간 데이터</h4>
          <p className="text-sm text-gray-600">실시간 스트리밍 활성화</p>
        </div>
        <Switch checked={realtime} onCheckedChange={setRealtime} />
      </div>
      <div className="flex items-center justify-between">
        <div>
          <h4 className="font-medium">알림</h4>
          <p className="text-sm text-gray-600">목표 달성 시 알림</p>
        </div>
        <Switch checked={notifications} onCheckedChange={setNotifications} />
      </div>
    </div>
  );
}

Report Automation:


// 리포트 자동화 설정
export default function ReportAutomation() {
  const [autoSend, setAutoSend] = useState(true);
  const [includeCharts, setIncludeCharts] = useState(true);
  const [emailNotify, setEmailNotify] = useState(false);
 
  return (
    <div className="space-y-md">
      <div className="flex items-center justify-between p-md border rounded-lg">
        <div>
          <h4 className="font-medium">자동 발송</h4>
          <p className="text-sm text-gray-600">일정에 따라 리포트 자동 전송</p>
        </div>
        <Switch checked={autoSend} onCheckedChange={setAutoSend} />
      </div>
      <div className="flex items-center justify-between p-md border rounded-lg">
        <div>
          <h4 className="font-medium">차트 포함</h4>
          <p className="text-sm text-gray-600">시각화 차트 첨부</p>
        </div>
        <Switch checked={includeCharts} onCheckedChange={setIncludeCharts} />
      </div>
      <div className="flex items-center justify-between p-md border rounded-lg">
        <div>
          <h4 className="font-medium">이메일 알림</h4>
          <p className="text-sm text-gray-600">발송 완료 시 알림</p>
        </div>
        <Switch checked={emailNotify} onCheckedChange={setEmailNotify} />
      </div>
    </div>
  );
}

Data Source Settings:


// 데이터 소스 활성화 관리
<div className="space-y-sm">
  <h4 className="font-medium">데이터 소스</h4>
  <div className="flex items-center justify-between">
    <span>Google Analytics</span>
    <Switch defaultChecked />
  </div>
  <div className="flex items-center justify-between">
    <span>Facebook Ads</span>
    <Switch defaultChecked />
  </div>
  <div className="flex items-center justify-between">
    <span>Google Ads</span>
    <Switch />
  </div>
  <div className="flex items-center justify-between">
    <span>Instagram</span>
    <Switch />
  </div>
</div>

🆕 Foundation과의 차이점

항목	Foundation	iCignal
Active Color	Neutral Blue	iCignal Blue (#2196f3)
사용 맥락	범용 설정 토글	Analytics Features & Automation
테마	기본 Vortex 테마	iCignal 브랜드 테마
Import	`@vortex/ui-foundation`	`@vortex/ui-icignal` + `theme`

Props API

Prop	Type	Default	Description
checked	boolean	false	스위치 상태
defaultChecked	boolean	false	기본 스위치 상태
disabled	boolean	false	비활성화 상태
size	’sm’ \| ‘md’ \| ‘lg'	'md’	크기
onCheckedChange	(checked) => void	-	상태 변경 핸들러
className	string	-	추가 CSS 클래스

접근성

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

ARIA 속성:

role="switch" (자동 적용)
aria-checked (스위치 상태)
aria-label (Label 없을 경우 필수)

키보드 네비게이션:

Space: 토글
Tab: 다음 요소로 이동

스크린 리더 지원:

ON/OFF 상태 안내
Label 텍스트 읽힘

예제

예제 1: 대시보드 기능 토글


import { Switch } from "@vortex/ui-icignal";
 
export default function DashboardFeatures() {
  const [features, setFeatures] = useState({
    autoRefresh: true,
    realtime: false,
    comparison: true,
    annotations: false,
    export: true,
  });
 
  const toggleFeature = (feature) => {
    setFeatures({ ...features, [feature]: !features[feature] });
  };
 
  return (
    <div className="space-y-md">
      <h3 className="text-lg font-semibold">대시보드 기능</h3>
      <div className="space-y-sm">
        <div className="flex items-center justify-between p-md border rounded-lg">
          <div>
            <h4 className="font-medium">자동 새로고침</h4>
            <p className="text-sm text-gray-600">
              5분마다 자동으로 데이터 갱신
            </p>
          </div>
          <Switch
            checked={features.autoRefresh}
            onCheckedChange={() => toggleFeature("autoRefresh")}
          />
        </div>
        <div className="flex items-center justify-between p-md border rounded-lg">
          <div>
            <h4 className="font-medium">실시간 데이터</h4>
            <p className="text-sm text-gray-600">
              실시간 스트리밍 (추가 비용 발생)
            </p>
          </div>
          <Switch
            checked={features.realtime}
            onCheckedChange={() => toggleFeature("realtime")}
          />
        </div>
        <div className="flex items-center justify-between p-md border rounded-lg">
          <div>
            <h4 className="font-medium">기간 비교</h4>
            <p className="text-sm text-gray-600">이전 기간 데이터 비교</p>
          </div>
          <Switch
            checked={features.comparison}
            onCheckedChange={() => toggleFeature("comparison")}
          />
        </div>
        <div className="flex items-center justify-between p-md border rounded-lg">
          <div>
            <h4 className="font-medium">주석</h4>
            <p className="text-sm text-gray-600">차트에 주석 표시</p>
          </div>
          <Switch
            checked={features.annotations}
            onCheckedChange={() => toggleFeature("annotations")}
          />
        </div>
        <div className="flex items-center justify-between p-md border rounded-lg">
          <div>
            <h4 className="font-medium">데이터 내보내기</h4>
            <p className="text-sm text-gray-600">CSV, Excel 내보내기 허용</p>
          </div>
          <Switch
            checked={features.export}
            onCheckedChange={() => toggleFeature("export")}
          />
        </div>
      </div>
    </div>
  );
}

예제 2: 알림 설정 패널


import { Switch } from "@vortex/ui-icignal";
 
export default function NotificationSettings() {
  const [notifications, setNotifications] = useState({
    email: true,
    push: false,
    sms: false,
    goalAchieved: true,
    dailyReport: true,
    anomaly: true,
  });
 
  return (
    <div className="space-y-lg">
      <div>
        <h4 className="font-medium mb-md">알림 채널</h4>
        <div className="space-y-sm">
          <div className="flex items-center justify-between">
            <span>이메일 알림</span>
            <Switch
              checked={notifications.email}
              onCheckedChange={(checked) =>
                setNotifications({ ...notifications, email: checked })
              }
            />
          </div>
          <div className="flex items-center justify-between">
            <span>푸시 알림</span>
            <Switch
              checked={notifications.push}
              onCheckedChange={(checked) =>
                setNotifications({ ...notifications, push: checked })
              }
            />
          </div>
          <div className="flex items-center justify-between">
            <span>SMS 알림</span>
            <Switch
              checked={notifications.sms}
              onCheckedChange={(checked) =>
                setNotifications({ ...notifications, sms: checked })
              }
            />
          </div>
        </div>
      </div>
      <div>
        <h4 className="font-medium mb-md">알림 이벤트</h4>
        <div className="space-y-sm">
          <div className="flex items-center justify-between">
            <span>목표 달성</span>
            <Switch
              checked={notifications.goalAchieved}
              onCheckedChange={(checked) =>
                setNotifications({ ...notifications, goalAchieved: checked })
              }
            />
          </div>
          <div className="flex items-center justify-between">
            <span>일일 리포트</span>
            <Switch
              checked={notifications.dailyReport}
              onCheckedChange={(checked) =>
                setNotifications({ ...notifications, dailyReport: checked })
              }
            />
          </div>
          <div className="flex items-center justify-between">
            <span>이상 징후 감지</span>
            <Switch
              checked={notifications.anomaly}
              onCheckedChange={(checked) =>
                setNotifications({ ...notifications, anomaly: checked })
              }
            />
          </div>
        </div>
      </div>
    </div>
  );
}

예제 3: 데이터 소스 연동 관리


import { Switch } from "@vortex/ui-icignal";
 
export default function DataSourceIntegrations() {
  const integrations = [
    { id: "ga4", name: "Google Analytics 4", active: true },
    { id: "google_ads", name: "Google Ads", active: true },
    { id: "facebook_ads", name: "Facebook Ads", active: false },
    { id: "instagram", name: "Instagram", active: false },
    { id: "linkedin", name: "LinkedIn Ads", active: false },
  ];
 
  const [sources, setSources] = useState(integrations);
 
  const toggleSource = (id) => {
    setSources(
      sources.map((source) =>
        source.id === id ? { ...source, active: !source.active } : source
      )
    );
  };
 
  return (
    <div className="space-y-sm">
      <h4 className="font-medium">연동된 데이터 소스</h4>
      {sources.map((source) => (
        <div
          key={source.id}
          className="flex items-center justify-between p-md border rounded-lg"
        >
          <span className="font-medium">{source.name}</span>
          <Switch
            checked={source.active}
            onCheckedChange={() => toggleSource(source.id)}
          />
        </div>
      ))}
    </div>
  );
}