# React · Edge.Surface
DOM 요소에 조명 효과를 적용합니다.
Package: @bolerish/edge 0.4.0
Source: https://edge.bolerish.com/ko/docs/react/surface/
## Edge.Surface
가장 가까운 Edge.Provider에 연결된 HTML 요소 하나를 렌더링합니다. `as`로 태그를 선택하면 해당 요소의 HTML 속성, 이벤트, ref를 사용할 수 있습니다.
```tsx
Your content
```
| Prop / 옵션 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `pseudoElement` | `'after' \| 'before'` | `'after'` | 하이라이트를 그릴 가상 요소입니다. 기존 ::after를 유지하려면 before를 선택하세요. 두 가상 요소를 모두 사용 중이거나 input 요소라면 바깥에 래퍼를 두세요. 잘못된 값은 RangeError를 발생시킵니다. |
| `edgeStyle` | `'raised' \| 'recessed' \| 'matte'` | `'raised'` | 테두리가 조명에 반응하는 방식입니다. 어떤 값을 선택해도 컴포넌트의 기존 스타일은 유지됩니다. |
| `color` | `string` | `currentColor` | 하이라이트 색상입니다. 기본값은 연결된 DOM 요소의 글자색입니다. CSS 변수를 포함한 모든 CSS 색상 문자열을 사용할 수 있습니다. |
| `shadowColor` | `string` | `#0008` | 조명 반대쪽 테두리의 색상입니다. CSS 색상 문자열을 사용할 수 있습니다. 밝은 서피스에서 이 그림자를 없애려면 transparent를 지정하세요. |
| `borderWidth` | `number` | `1` | 하이라이트의 두께를 픽셀 단위로 지정합니다. 실제 DOM 요소의 테두리는 바꾸지 않습니다. 음수는 0으로 제한하고, 유한하지 않은 값에는 기본값을 사용합니다. |
| `intensity` | `number` | `1` | 공유 조명의 강도에 곱할 값입니다. 유한한 값은 0~1로 제한하고, 유한하지 않은 값에는 기본값을 사용합니다. |
| `as` | `HTML tag name` | `'div'` | 렌더링할 HTML 태그입니다. 해당 요소의 HTML 속성과 ref를 사용할 수 있습니다. 커스텀 React 컴포넌트는 지정할 수 없습니다. |
| `children` | `ReactNode` | `Unset` | 렌더링하는 요소 안에 표시할 콘텐츠입니다. input처럼 가상 요소를 직접 표시할 수 없는 요소에는 래퍼를 사용하세요. |
| `ref` | `Ref` | `Unset` | Edge의 등록용 ref와 함께 렌더링된 DOM 요소에 전달됩니다. React 19의 콜백 ref 클린업도 유지됩니다. |
| `className` | `string` | `Unset` | Edge의 하이라이트 클래스와 함께 적용할 클래스입니다. |
| `style` | `CSSProperties` | `Unset` | Edge의 스타일 뒤에 병합할 인라인 스타일입니다. 의도적으로 덮어쓰는 경우가 아니라면 Edge가 관리하는 CSS 변수는 유지하세요. |
`Edge.Surface`는 반드시 `Edge.Provider` 안에서 사용하세요. 밖에서 렌더링하면 오류가 발생합니다. input 요소에 적용하거나 기존 가상 요소와 충돌하는 경우에는 [적용 시 고려사항](https://edge.bolerish.com/ko/docs/integration/)을 참고하세요.
하이라이트는 DOM 요소의 테두리 바깥쪽에 맞춰 표시됩니다. 기존 컴포넌트가 렌더링하는 DOM 요소에 연결하려면 [useSurface](https://edge.bolerish.com/ko/docs/react/use-surface/#use-surface)를 사용하세요.