ConditionalFormatting
조건부 서식 규칙을 목록으로 관리하고 편집하는 패널 컴포넌트
개요
ConditionalFormatting은 그리드의 조건부 서식 규칙을 추가·삭제·재정렬하고, 각 규칙의 조건·스타일·서식·기능을 편집하는 올인원 패널입니다. 규칙 데이터는 value/onChange로 제어하며, 저장 시 필수 항목 유효성 검사를 자동으로 수행합니다.
주요 특징
- ✅ 규칙 목록 관리: 규칙 추가, 삭제(확인 팝업 포함), 위/아래 순서 재정렬
- ✅ 대상별 편집: cell(셀)/row(행) 대상에 따라 편집 폼이 자동 전환
- ✅ 스타일 설정: 정렬, 굵게, 기울임, 밑줄/취소선(상호 배타), 글자색·배경색
- ✅ 서식 설정: cell 대상에서 접두사·접미사·천 단위 구분자·소수점 자리수 설정
- ✅ 기능 설정: row 대상에서 행 단위 기능 옵션 체크박스 제공
- ✅ 유효성 검사: 저장 시 필수 항목을 검사하고 항목명과 함께 오류 표시
- ✅ 룩업 연동: 커스텀 조건 입력 시 onOpenLookup으로 외부 팝업 호출
기본 사용
value와 onChange로 규칙 목록을 제어하고, targetFields·ruleTypes로 선택 옵션을 전달합니다.
Preview
조건부 서식
조건을 추가하세요.
저장·취소 및 유효성 검사
onSave를 전달하면 하단에 저장 버튼이 표시됩니다. 저장 시 모든 규칙의 필수 항목(이름, 대상 필드, 규칙 유형, 조건값)을 검사하고, 통과한 경우에만 onSave가 호출됩니다. 오류가 있으면 항목명과 함께 오류 메시지가 표시됩니다.
Preview
조건부 서식
금액 초과 강조
행(Row) 대상 기능 설정
functionOptions를 전달하면 대상이 row인 규칙에서 행 단위 기능 옵션을 체크박스로 설정할 수 있습니다. cell 대상에서는 서식(포맷) 설정이 대신 표시됩니다.
Preview
조건부 서식
휴가자 행 숨기기
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | ConditionalRule[] | [] | 조건부 서식 규칙 목록 |
targetFields | { field: string; label: string }[] | [] | 규칙 대상 필드 목록 |
ruleTypes | { value: string; label: string }[] | [] | 규칙 유형 목록 |
functionOptions | { key: string; label: string }[] | [] | 행(row) 기능 옵션 목록 |
visible | boolean | true | 표시 여부 (false → 렌더 안 함) |
className | string | - | 컨테이너 CSS 클래스 |
ConditionalRule
| Field | Type | Required | Description |
|---|---|---|---|
name | string | ✅ | 규칙 이름 |
target | "cell" | "row" | ✅ | 적용 대상 (cell 또는 row) |
field | string | - | 대상 필드 (cell 대상에서 필수) |
ruleType | string | - | 규칙 유형 (ruleTypes의 value) |
operator | string | - | 연산자 |
conditionValue | string | - | 조건 값 (custom 유형 외 필수) |
customExpression | string | - | 커스텀 표현식 (ruleType이 custom일 때) |
style | ConditionalRuleStyle | - | 스타일 설정 |
format | ConditionalRuleFormat | - | 서식 설정 (cell 대상만) |
functions | ConditionalRuleFunction | - | 기능 설정 (row 대상만) |
ConditionalRuleStyle
| Field | Type | Description |
|---|---|---|
textAlign | "left" | "center" | "right" | 텍스트 정렬 |
color | string | 글자색 |
backgroundColor | string | 배경색 |
fontWeight | "bold" | "normal" | 굵게 |
fontStyle | "italic" | "normal" | 기울임 |
textDecoration | "underline" | "line-through" | "none" | 밑줄/취소선 (상호 배타) |
ConditionalRuleFormat
| Field | Type | Description |
|---|---|---|
prefix | string | 접두사 |
suffix | string | 접미사 |
thousandSeparator | boolean | 천 단위 구분자 |
decimalDigits | number | 소수점 자리수 |
ConditionalRuleFunction
행 기능 옵션의 키-값 맵입니다. { [key: string]: boolean } 형태로 functionOptions의 key별 활성화 여부를 저장합니다.
Events
| Event | Type | Description |
|---|---|---|
onChange | (rules: ConditionalRule[]) => void | 규칙 목록 변경 콜백 |
onSave | (rules: ConditionalRule[]) => void | 저장 콜백 (유효성 검사 통과 후 호출) |
onCancel | () => void | 취소 콜백 |
onOpenLookup | (ruleIndex: number) => void | 룩업 팝업 열기 콜백 (커스텀 조건) |
접근성
권장 사항
- ✅ 목록 관리 버튼에
title툴팁 제공 (추가/삭제/위로/아래로) - ✅ 삭제 전 확인 팝업으로 실수 방지
- ✅ 유효성 오류를 텍스트 메시지로 명시적으로 안내
- ❌ 색상만으로 오류 상태를 전달하지 않기 (오류 메시지 텍스트 병행)
관련 컴포넌트
Last updated on