# 조건부 서식

조건부 서식은 값의 의미에 따라 배경·글자 등 표시를 바꿉니다. 재고 부족이나 목표 초과를 빠르게 찾는 데 쓰며 원본 값이나 검증 결과를 바꾸지는 않습니다.

Canonical: https://grid.syidax.com/ko/docs/features/conditional-formats/

<a id="understand"></a>

## 동작 원리와 선택 기준

규칙에는 대상 field, 비교 condition, 적용 style을 지정합니다. 여러 규칙이 같은 셀에 걸리는 경우 적용 순서와 stopIfTrue를 함께 검토합니다.

코드의 grid는 설치와 연결 장에서 준비한 Grid 요소입니다. 예제마다 필요한 데이터·설정을 확인하고, 코드에서 소개하는 앱 함수와 서버 주소는 프로젝트에 맞게 구현하세요.

- [설치와 연결 · 공통 예제 데이터](https://grid.syidax.com/ko/docs/guides/getting-started.md)

<a id="example-1"></a>

## 예제 1. 기준을 초과한 수량 강조

수량이 100보다 큰 셀을 구분합니다.

```javascript
grid.conditionalFormats = [{
  field: 'quantity', condition: { type: 'greaterThan', value: 100 },
  style: { backgroundColor: '#fff1cc' },
}];
```

결과 확인: 100은 포함되지 않고 101부터 강조됩니다. 경계값을 포함하려면 greaterThanOrEqual을 선택합니다.

<a id="example-2"></a>

## 예제 2. 여러 상태를 구분

상태가 완료인 경우와 수량이 비어 있는 경우를 별도 규칙으로 만듭니다. blank와 숫자 0은 업무상 같은 뜻인지 먼저 결정합니다.

결과 확인: 완료 색과 누락 경고 색이 충돌하지 않도록 대상 열을 나누거나 우선순위를 정합니다. 텍스트 라벨도 함께 유지하세요.

<a id="example-3"></a>

## 예제 3. 사용자가 규칙 조정

서식 설정 UI를 열고 변경 이벤트를 앱의 저장 기능과 연결합니다.

```javascript
grid.conditionalFormatUi = true;
grid.addEventListener('conditionalFormatsChanged', event => {
  console.log(event.detail.rules);
});
```

결과 확인: 수정된 규칙 배열을 읽어 사용자별 설정으로 저장할 수 있습니다. 다음 화면 진입 시 새 배열로 다시 지정합니다.

<a id="pitfalls"></a>

## 조합할 때와 문제를 해결할 때

색만으로 오류·완료를 구분하지 마세요. 상태 문구와 검증 메시지를 함께 제공하고 밝은 테마·어두운 테마 모두 읽을 수 있는 대비를 선택합니다.

서식은 입력 차단 기능이 아닙니다. 잘못된 값의 저장을 막으려면 validationRules와 invalidEditMode를 사용합니다.

<a id="related-api"></a>

## 이 기능에 사용하는 API

- [conditionalFormats](https://grid.syidax.com/ko/docs/options/conditionalFormats.md) — 조건에 맞는 셀의 배경·글자 등의 표현을 바꾸는 규칙 배열입니다. 원본 값은 수정하지 않습니다.
- [conditionalFormatUi](https://grid.syidax.com/ko/docs/options/conditionalFormatUi.md) — 사용자가 조건부 서식 규칙을 조정하는 UI를 제공합니다.
- [conditionalFormatsChanged](https://grid.syidax.com/ko/docs/events/conditionalFormatsChanged.md) — 조건부 서식 규칙 목록이 바뀌었을 때 발생합니다. rules를 사용자 설정으로 저장합니다.

<a id="next"></a>

## 함께 읽기

- [행·열·ID의 관계](https://grid.syidax.com/ko/docs/guides/concepts.md)
- [결과와 이벤트 연결](https://grid.syidax.com/ko/docs/guides/data-event-access.md)
- [Features에서 살펴보기](https://grid.syidax.com/grid/conditional-formats) — 직접 체험 가능한 범위는 해당 가이드에 안내되어 있습니다.