# React · Edge.Provider

하위 서피스가 공유할 조명 영역을 만듭니다.

Package: @bolerish/edge 0.4.0
Source: https://edge.bolerish.com/ko/docs/react/provider/

<a id="styles"></a>

## Edge.Styles

SSR 문서마다 애플리케이션 스타일 앞에 한 번 렌더링하세요. React는 서피스를 연결할 때 이 스타일을 재사용합니다. Edge를 사용하는 동안 이 컴포넌트를 유지하고, CSP에서 요구하면 nonce를 전달하세요. 이 컴포넌트나 명시적인 CSS 불러오기가 없으면 서피스를 연결할 때 클라이언트에서 기본 CSS를 추가합니다.

```tsx
<Edge.Styles nonce={nonce} />
```

| Prop / 옵션 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `nonce` | `string` | `undefined` | 스타일 요소에 전달할 요청별 nonce입니다. 서버와 하이드레이션에서 같은 값을 사용하세요. CSP가 nonce를 가진 인라인 스타일 요소만 허용한다면 필요합니다. |

<a id="lighting"></a>

## Edge.Provider

추가 DOM 요소 없이 하위 Edge.Surface가 같은 조명을 공유하도록 합니다. 중첩된 Edge.Provider는 독립적인 조명을 만듭니다.

```tsx
<Edge.Provider motion="system" range={480} intensity={0.75}>
  {/* Your surfaces */}
</Edge.Provider>
```

| Prop / 옵션 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `motion` | `'system' \| 'dynamic' \| 'static'` | `'system'` | system은 동작 줄이기와 입력 장치 설정을 따릅니다. dynamic은 동작 줄이기가 켜져 있어도 마우스나 펜을 따라갑니다. static은 고정 방향을 유지합니다. 터치하면 화면 기준 조명 위치를 갱신합니다. 스크롤하거나 손가락을 떼도 마지막 위치를 유지하고, 그 아래로 이동하는 서피스가 반응합니다. 다시 터치하면 위치를 갱신합니다. 터치 추적도 선택한 모션 모드를 따릅니다. static은 고정되고 system은 동작 줄이기가 켜져 있으면 고정됩니다. |
| `staticDirection` | `number \| 'random'` | `315` | 고정 조명의 방향을 도 단위로 지정합니다. random은 마운트할 때 공유 방향 하나를 선택하고 재렌더링 시에는 유지합니다. 숫자는 유한한 값이어야 합니다. |
| `direction` | `'toward' \| 'away'` | `'toward'` | toward는 하이라이트가 포인터를 향하게 하고, away는 방향을 180도 반전합니다. 모든 서피스 스타일이 이 선택을 유지합니다. 포인터를 따르는 조명에만 적용되며, 고정 조명은 staticDirection으로 방향을 정합니다. |
| `range` | `number` | `480` | 서피스 바깥에서 조명이 희미해지는 거리입니다. 동적 조명에만 적용되며, 뷰포트 기준 CSS 픽셀 단위의 유한한 양수를 지정하세요. |
| `intensity` | `number` | `0.75` | 공유 조명의 강도입니다. 0~1 사이의 유한한 값을 지정하세요. 범위를 벗어나거나 유한하지 않은 값은 RangeError를 발생시킵니다. |
| `children` | `ReactNode` | `Required` | 조명을 공유할 영역입니다. 일반 자식 요소는 그대로 유지되며, 명시적으로 연결한 서피스만 반응합니다. |
| `ref` | `Ref<Light>` | `Unset` | 조명 핸들을 받을 ref입니다. 핸들의 참조는 유지됩니다. 요소의 위치만 바뀐 경우 refresh()를 호출할 수 있습니다. |

포인터 입력은 문서 전체에서 받습니다. Edge.Provider는 입력 범위를 제한하는 대신 어떤 서피스가 반응할지 정합니다. 고정 조명에는 `staticDirection`이 적용되며, `motion="system"`이 동작 줄이기 설정을 따르는 경우에도 마찬가지입니다.