Edge.Surface

DOM 요소에 조명 효과를 적용합니다.

Edge.Surface

가장 가까운 Edge.Provider에 연결된 HTML 요소 하나를 렌더링합니다. as로 태그를 선택하면 해당 요소의 HTML 속성, 이벤트, ref를 사용할 수 있습니다.

Edge.Surface 시그니처

<Edge.Surface as="article" edgeStyle="raised">
  Your content
</Edge.Surface>

Edge.Surface props
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<HTMLElement for the chosen tag>`	`Unset`	Edge의 등록용 ref와 함께 렌더링된 DOM 요소에 전달됩니다. React 19의 콜백 ref 클린업도 유지됩니다.
`className`	`string`	`Unset`	Edge의 하이라이트 클래스와 함께 적용할 클래스입니다.
`style`	`CSSProperties`	`Unset`	Edge의 스타일 뒤에 병합할 인라인 스타일입니다. 의도적으로 덮어쓰는 경우가 아니라면 Edge가 관리하는 CSS 변수는 유지하세요.

Edge.Surface는 반드시 Edge.Provider 안에서 사용하세요. 밖에서 렌더링하면 오류가 발생합니다. input 요소에 적용하거나 기존 가상 요소와 충돌하는 경우에는 적용 시 고려사항을 참고하세요.

하이라이트는 DOM 요소의 테두리 바깥쪽에 맞춰 표시됩니다. 기존 컴포넌트가 렌더링하는 DOM 요소에 연결하려면 useSurface를 사용하세요.