reopt designreopt design
DocsExploreToolsPricingBuilder
Login
Explore/
opt-ui205opt-charts40opt-datagrid9opt-editor5opt-calendar4opt-filemanager4opt-chat6opt-shell14brandapp-ui8Examples12Builder Blocks
Overview205Core74Shells99Blocks32
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • GitHub
  • About
  • Contact
  • Terms of Service
  • Privacy Policy

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

Explore/Core/ConditionBuilder

ConditionBuilder

Component

AND/OR 로직으로 조건 그룹을 구성하는 빌더. 속성, 연산자, 값을 조합합니다.

trigger
Related docs
bun add @reopt-ai/opt-ui
100%

Segment Conditions

User Segment
Matchof the following
and

1 group(s), 2 condition(s)

ConditionBuilder

PropTypeDefaultDescription
groups*ConditionGroup[]—조건 그룹 배열
onChange*(groups: ConditionGroup[]) => void—그룹 변경 핸들러
propertiesstring[]—선택 가능한 속성 목록 (기본 10개 제공)
labelstring—빌더 레이블
nestedbooleanfalse중첩 AND/OR 그룹 활성화
maxDepthnumber3최대 중첩 깊이
conditionTypesRecord<string, ConditionTypeRenderer>—이질적 조건 타입 렌더러 레지스트리
onPreview(groups: ConditionGroup[]) => void—조건 변경 시 미리보기 콜백
previewCountnumber—매치 카운트 표시 (toLocaleString 포맷)
labelsConditionBuilderLabels—미리보기 문구 오버라이드 (previewSuffix, formatPreview). 기본은 영어 "matches"
addNestedGroupLabelstring"Add nested group"중첩 그룹 추가 버튼 텍스트
View test results

테스트 커버리지

2026년 7월 9일8/8 통과
8성공
0실패
8전체
  • 조건 그룹을 렌더링한다
  • label을 렌더링한다
  • Add group 버튼이 동작한다
  • Add condition 버튼이 동작한다
  • 같은 tick과 중첩 빌더에서 그룹과 조건을 연속 추가해도 고유한 id를 만든다
  • nested 모드에서 Add nested group 버튼이 표시된다
  • previewCount를 표시한다
  • conditionTypes 커스텀 렌더러를 적용한다

Related components

StepBuilder

순서가 있는 단계를 추가, 제거, 재정렬할 수 있는 빌더 컴포넌트.

Trigger

Form

접근성 폼 시스템. opt-ui-primitives Form API 기반. 31 exports: FormRoot, FormProvider, FormGroup, FormGroupLabel, FormDescription, FormField, FormControl, FormInput, FormTextarea, FormSelect, FormSelectPopover, FormSelectItem, FormSwitch, FormLabel, FormError, FormSubmit, FormCheckbox, FormRadioGroup, FormRadio, FormPush, FormRemove, FormReset, FormNumberInput, FormSlider, FormStarRating, FormColorPicker, FormIconPicker, FormTagInput, FormDateRangePicker + useFormStore, useFormContext hooks.

FormTrigger

FieldToken

필드 타입을 일관된 글리프와 선택적 텍스트 레이블로 표현합니다. 문자열·숫자·날짜·IP·지오 등 분석 스키마 타입마다 같은 아이콘과 팔레트 슬롯을 씁니다.

Facet

필드 값 분포를 카운트와 점유율 막대로 보여주고 그 행 자체가 필터가 되는 패싯. 긴 꼬리는 접어 두고 상위 값부터 읽힌다.

Expression

조건을 폼이 아니라 문장으로 쓰고 그 자리에서 편집하는 표현식 절. 알림 규칙·세그먼트 필터처럼 읽어서 검증해야 하는 조건에 쓴다.

TextTruncate

실제 폰트로 실제 가용 폭을 측정해 문자열의 식별력이 가장 낮은 부분을 잘라내는 생략. CSS가 못 하는 앞·중간·양끝 생략을 지원하고 전체 문자열은 접근성 트리에 남는다.

PreviousStepBuilderNextPopover

Funnel Steps

Conversion Funnel
1
2
3

3 steps defined

기본 사용

회사 이메일을 입력해주세요.

FormGroup — 필드 시맨틱 그룹핑

개인 정보
직무 정보

FormField + FormControl + FormDescription

영문, 숫자, 하이픈만 사용 가능합니다.

최대 200자까지 입력할 수 있습니다.

FormCheckbox + FormRadioGroup — Form Store 바인딩

구독 설정
요금제 선택

FormPush + FormRemove — 동적 배열 필드

태그 목록

태그를 추가하거나 제거할 수 있습니다.

FormProvider — Context 기반 폼 공유

프로필 설정 — Textarea + Switch

마케팅 알림 수신

FormSelect — 드롭다운 선택

종합 — 회원가입 폼

계정 정보

영문, 숫자를 포함하여 8자 이상 입력해주세요.

역할
보유 기술

보유한 기술 스택을 입력해주세요.

스키마 컬럼 목록

  • event_nameVARCHAR
  • user_iduuid
  • occurred_atTIMESTAMP WITH TIME ZONE
  • revenueDECIMAL(12,2)
  • is_internalboolean
  • propertiesJSONB
  • referrerurl
  • client_ipinet
  • tagstext[]

전체 타입

StringNumberBooleanDateDate and timeDurationPercentCurrencyEnumArrayObjectJSONIP addressGeo pointURLEmailIdentifierBinaryAggregateNestedUnknown

크기와 채우기

결제 금액

값 분포로 필터하기

선택: safari

표본이 전체보다 작을 때

Chrome4.8만61%
Safari1.9만24%
Edge6.1천7.8%

로딩과 빈 상태

Counting…
No values in this range.

알림 규칙

열린 절: 없음

상태

grouped overall eventsnotifySlack #alerts

컬럼 배치

생략 위치

endhttps://app.example.com/dashboard/org_8f21/project_44c1/events?filter=checkout&from=now-7d&to=now&breakdown=country
starthttps://app.example.com/dashboard/org_8f21/project_44c1/events?filter=checkout&from=now-7d&to=now&breakdown=country
middlehttps://app.example.com/dashboard/org_8f21/project_44c1/events?filter=checkout&from=now-7d&to=now&breakdown=country
startEndhttps://app.example.com/dashboard/org_8f21/project_44c1/events?filter=checkout&from=now-7d&to=now&breakdown=country

테이블 셀

트레이스경로
trace-9f2c1ad0-77be-4b21-a0d9-4c2f1e88b310-segment-014https://app.example.com/dashboard/org_8f21/project_44c1/events?filter=checkout&from=now-7d&to=now&breakdown=country