Skip to Content
ComponentsIcignalFormInput

Input

텍스트 입력을 받는 인풋 컴포넌트입니다.

개요

Input은 사용자로부터 텍스트 정보를 입력받는 기본 폼 요소입니다. iCignal 브랜드 컬러를 적용하여 데이터 분석 플랫폼에 최적화되어 있습니다.

주요 특징:

  • 다양한 Type (text, password, email, number, tel, url 등)
  • 4가지 State (default, focus, error, disabled)
  • 아이콘 지원 (prefix, suffix)
  • Clear 버튼
  • 비밀번호 표시/숨기기
  • iCignal Blue Focus (#2196f3)

사용 사례:

  • 데이터 소스 입력 폼
  • 분석 조건 설정
  • 리포트 이름 지정
  • 필터 값 입력

설치

npx @vortex/cli add input --package icignal

기본 사용법

import { Input } from "@vortex/ui-icignal";
import "@vortex/ui-icignal/theme";
 
export default function Example() {
  return <Input placeholder="데이터 소스 이름을 입력하세요..." />;
}

Types (타입)

Text (기본)

<Input type="text" placeholder="캠페인 이름을 입력하세요" />

Password

<Input type="password" placeholder="API 키를 입력하세요" />

Email

<Input type="email" placeholder="알림받을 이메일을 입력하세요" />

Number

<Input type="number" placeholder="목표 전환율을 입력하세요" />

Tel

<Input type="tel" placeholder="담당자 연락처를 입력하세요" />

URL

<Input type="url" placeholder="Webhook URL을 입력하세요" />

States (상태)

Default

<Input placeholder="기본 상태" />

Focus (iCignal Blue)

<Input placeholder="포커스 시 iCignal Blue 강조" autoFocus />

Error

<Input
  placeholder="에러 상태"
  error
  errorMessage="데이터 소스 이름은 필수 항목입니다"
/>

Disabled

<Input placeholder="비활성화 상태" disabled />

아이콘

Prefix Icon

import { Search, Database } from 'lucide-react'
 
<Input
  placeholder="데이터 소스 검색..."
  prefix={<Search size={16} />}
/>
 
<Input
  placeholder="데이터베이스 연결"
  prefix={<Database size={16} />}
/>

Suffix Icon

import { Calendar, Clock } from 'lucide-react'
 
<Input
  placeholder="분석 기간 선택"
  suffix={<Calendar size={16} />}
/>
 
<Input
  placeholder="예약 시간 설정"
  suffix={<Clock size={16} />}
/>

Clear 버튼

<Input
  placeholder="필터 검색어 입력"
  clearable
  onClear={() => console.log("cleared")}
/>

비밀번호 표시/숨기기

<Input type="password" placeholder="데이터베이스 비밀번호" showPasswordToggle />

🆕 iCignal 브랜딩

브랜드 컬러

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

  • Focus Border: iCignal Blue #2196f3
  • Success State: iCignal Green #4caf50
  • Error State: 기본 Red (Foundation 동일)

iCignal 특화 사용 가이드

Analytics Dashboard:

// 데이터 소스 연결 폼
<div className="space-y-md">
  <div>
    <label>데이터베이스 호스트</label>
    <Input
      type="text"
      placeholder="예: analytics.icignal.com"
      prefix={<Database size={16} />}
    />
  </div>
  <div>
    <label>포트 번호</label>
    <Input type="number" placeholder="3306" />
  </div>
</div>

Campaign Settings:

// 캠페인 설정 폼
<div className="space-y-md">
  <Input placeholder="캠페인 이름" prefix={<Tag size={16} />} />
  <Input type="url" placeholder="랜딩 페이지 URL" prefix={<Link size={16} />} />
  <Input
    type="number"
    placeholder="일일 예산 (원)"
    prefix={<DollarSign size={16} />}
  />
</div>

Report Filter:

// 리포트 필터 입력
<Input
  placeholder="고객 ID 또는 이름으로 검색"
  prefix={<Search size={16} />}
  clearable
  onClear={() => resetFilter()}
/>

🆕 Foundation과의 차이점

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

Props API

PropTypeDefaultDescription
type’text’ | ‘password’ | ‘email’ | ‘number’ | ‘tel’ | ‘url''text’인풋 타입
placeholderstring-플레이스홀더 텍스트
valuestring-입력 값
defaultValuestring-기본 입력 값
disabledbooleanfalse비활성화 상태
errorbooleanfalse에러 상태
errorMessagestring-에러 메시지
prefixReactNode-Prefix 아이콘
suffixReactNode-Suffix 아이콘
clearablebooleanfalseClear 버튼 표시
showPasswordTogglebooleanfalse비밀번호 토글 버튼
onChange(value: string) => void-값 변경 핸들러
onClear() => void-Clear 버튼 클릭 핸들러
classNamestring-추가 CSS 클래스

접근성

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

ARIA 속성:

  • aria-label 또는 <label> 연결 (필수)
  • aria-invalid="true" (에러 상태)
  • aria-describedby (에러 메시지 연결)

키보드 네비게이션:

  • Tab: 다음 요소로 포커스 이동
  • Shift + Tab: 이전 요소로 포커스 이동

스크린 리더 지원:

  • Label 텍스트 읽힘
  • Placeholder 안내
  • 에러 메시지 읽힘

예제

예제 1: 데이터 소스 연결 폼

import { Input } from "@vortex/ui-icignal";
import { Database, Key, Server } from "lucide-react";
 
export default function DataSourceForm() {
  const [host, setHost] = useState("");
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
 
  return (
    <form className="space-y-md">
      <div>
        <label htmlFor="host">데이터베이스 호스트</label>
        <Input
          id="host"
          type="text"
          placeholder="analytics.icignal.com"
          value={host}
          onChange={setHost}
          prefix={<Server size={16} />}
        />
      </div>
      <div>
        <label htmlFor="username">사용자 이름</label>
        <Input
          id="username"
          type="text"
          placeholder="admin"
          value={username}
          onChange={setUsername}
          prefix={<Database size={16} />}
        />
      </div>
      <div>
        <label htmlFor="password">비밀번호</label>
        <Input
          id="password"
          type="password"
          placeholder="데이터베이스 비밀번호"
          value={password}
          onChange={setPassword}
          prefix={<Key size={16} />}
          showPasswordToggle
        />
      </div>
      <Button>연결 테스트</Button>
    </form>
  );
}

예제 2: 캠페인 설정 입력

import { Input } from "@vortex/ui-icignal";
import { Tag, Link, DollarSign } from "lucide-react";
 
export default function CampaignSettings() {
  const [name, setName] = useState("");
  const [url, setUrl] = useState("");
  const [budget, setBudget] = useState("");
 
  return (
    <div className="space-y-lg">
      <div>
        <label htmlFor="campaign-name">캠페인 이름</label>
        <Input
          id="campaign-name"
          placeholder="2024 신규 고객 유치 캠페인"
          value={name}
          onChange={setName}
          prefix={<Tag size={16} />}
        />
      </div>
      <div>
        <label htmlFor="landing-url">랜딩 페이지 URL</label>
        <Input
          id="landing-url"
          type="url"
          placeholder="https://icignal.com/campaign/2024"
          value={url}
          onChange={setUrl}
          prefix={<Link size={16} />}
        />
      </div>
      <div>
        <label htmlFor="daily-budget">일일 예산 (원)</label>
        <Input
          id="daily-budget"
          type="number"
          placeholder="1000000"
          value={budget}
          onChange={setBudget}
          prefix={<DollarSign size={16} />}
        />
      </div>
    </div>
  );
}

예제 3: 리포트 필터 검색

import { Input } from "@vortex/ui-icignal";
import { Search } from "lucide-react";
 
export default function ReportFilter() {
  const [filter, setFilter] = useState("");
 
  const handleSearch = (value: string) => {
    setFilter(value);
    // API 호출 또는 필터 로직
    console.log("Filtering reports by:", value);
  };
 
  return (
    <div className="w-full max-w-md">
      <Input
        placeholder="고객 ID, 이름, 이메일로 검색"
        value={filter}
        onChange={handleSearch}
        prefix={<Search size={16} />}
        clearable
        onClear={() => setFilter("")}
      />
    </div>
  );
}

관련 컴포넌트

Last updated on
CheckboxRadio