# Stepper

Stepper 컴포넌트는 여러 단계로 구성된 프로세스를 시각적으로 보여주는 컴포넌트입니다. 사용자가 현재 어느 단계에 있는지 표시하고, 완료된 단계와 남은 단계를 쉽게 확인할 수 있습니다.

```text
// Unable to derive source for Default
```

| Field                        | Description | Default |
| ---------------------------- | ----------- | ------- |
| Controls resolved at runtime | —           | —       |

## 사용법

```tsx
import { Stepper } from '@ceed/ads';
```

## 기본형

Stepper의 기본 형태입니다. 필수 속성 값으로 `steps`와 `activeStep`을 받으며, 각 단계는 `indicatorContent`, `label`, `extraContent`를 포함할 수 있습니다.

```text
// Unable to derive source for Default
```

## 인디케이터만 사용

`label`과 `extraContent` 없이 인디케이터만 표시할 수도 있습니다.

```text
// Unable to derive source for OnlyIndicator
```

## 방향 설정

### 수평 방향 (Horizontal)

`orientation` 속성을 'horizontal'로 설정하면 Stepper가 수평 방향으로 표시됩니다.

```text
// Unable to derive source for HorizontalOrientation
```

### 수직 방향 (Vertical)

`orientation` 속성을 'vertical'로 설정하면 Stepper가 수직 방향으로 표시됩니다. 이것이 기본 설정입니다.

```text
// Unable to derive source for VerticalOrientation
```

## 단계 방향 설정

### 수평 단계 방향 (Horizontal Step Orientation)

`stepOrientation` 속성을 'horizontal'로 설정하면 각 단계의 내용이 인디케이터 옆에 수평으로 배치됩니다. 이것이 기본 설정입니다.

```text
// Unable to derive source for HorizontalStepOrientation
```

### 수직 단계 방향 (Vertical Step Orientation)

`stepOrientation` 속성을 'vertical'로 설정하면 각 단계의 내용이 인디케이터 아래에 수직으로 배치됩니다.
**주의**: `orientation`이 'vertical'로 설정된 경우, `stepOrientation`은 항상 'horizontal'로 강제 설정됩니다.

`orientation`이 'horizontal'이고 `stepOrientation`이 'vertical'인 경우, 단계 내용이 자동으로 중앙 정렬됩니다.

```text
// Unable to derive source for VerticalStepOrientation
```

## 색상 커스터마이징

### 활성 색상 설정

`activeColor`와 `activeLineColor` 속성을 사용하여 활성 상태와 완료된 상태의 색상을 변경할 수 있습니다.

```text
// Unable to derive source for WithActiveColor
```

### 비활성 색상 설정

`inactiveColor`와 `inactiveLineColor` 속성을 사용하여 비활성 상태의 색상을 변경할 수 있습니다.

```text
// Unable to derive source for WithInactiveColor
```

## 단계 상태

### 모든 단계 완료

`activeStep` 값이 단계 수보다 크면 모든 단계가 완료된 것으로 표시됩니다.

```text
// Unable to derive source for WithAllComplete
```

### 모든 단계 비활성

`activeStep` 값이 0이면 모든 단계가 비활성 상태로 표시됩니다.

```text
// Unable to derive source for WithAllInactive
```
