# 가이드 · 적용 시 고려사항

기존 가상 요소, input 요소, 레이아웃 변경과 함께 사용하는 방법을 확인하세요.

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

<a id="choose-an-input-mode"></a>

## 움직임 방식 선택하기

system은 동작 줄이기와 입력 장치 설정을 따릅니다. dynamic은 동작 줄이기가 켜져 있어도 마우스나 펜을 따라갑니다. static은 고정 방향을 유지합니다. 터치하면 화면 기준 조명 위치를 갱신합니다. 스크롤하거나 손가락을 떼도 마지막 위치를 유지하고, 그 아래로 이동하는 서피스가 반응합니다. 다시 터치하면 위치를 갱신합니다. 터치 추적도 선택한 모션 모드를 따릅니다. static은 고정되고 system은 동작 줄이기가 켜져 있으면 고정됩니다.

<a id="understand-rendering-cost"></a>

## 렌더링 비용 이해하기

각 조명은 한 번에 프레임 하나만 예약합니다. 스타일을 쓰기 전에 위치와 크기를 읽고, 결과가 같으면 다시 쓰지 않습니다. 다만 그라데이션 변경에는 브라우저의 렌더링 작업이 필요하므로 특정 프레임 속도나 배터리 사용량을 보장하지는 않습니다.

<a id="preserve-native-interactions"></a>

## 기존 상호작용 유지하기

레이블, 텍스트 대비, 기본 테두리와 키보드 포커스 표시를 유지하세요. 하이라이트는 포인터 이벤트를 가로채지 않습니다. 입력값, 선택 상태, 키보드 처리와 포털은 기존 방식대로 관리할 수 있습니다.

강제 색상 모드에서는 하이라이트가 숨겨집니다. 선택 상태, 유효성 검사 결과, 사용 가능 여부는 하이라이트 없이도 알아볼 수 있어야 합니다.

<a id="existing-decorations"></a>

## 기존 가상 요소와 함께 사용하기

Edge는 기본적으로 `::after`에 하이라이트를 그립니다. 이미 사용 중인 `::after`를 유지하려면 `pseudoElement: 'before'`를 설정하세요. 두 가상 요소를 모두 사용하고 있다면 바깥에 래퍼를 두고 적용하세요.

기존 가상 요소 유지하기

```tsx
import { Edge } from '@bolerish/edge';

<Edge.Provider>
  <Edge.Surface as="article" pseudoElement="before" className="existing-after">
    Your existing ::after stays intact.
  </Edge.Surface>
</Edge.Provider>
```

<a id="wrap-inputs-you-own"></a>

## input 요소 감싸기

input 요소에서는 가상 요소를 안정적으로 표시할 수 없습니다. 대신 바깥의 `label`이나 `div`에 연결하고 border-radius를 맞추세요. input의 레이블, 포커스, 유효성 검사와 키보드 동작은 유지하세요. 안쪽으로 들어간 느낌을 주려면 `recessed`를 사용하면 됩니다.

<a id="refresh-after-layout-changes"></a>

## 레이아웃 변경 후 갱신하기

크기 변경, 중첩 스크롤, 뷰포트 크기 변경, 폰트와 리소스 로딩은 자동으로 감지해 위치와 크기 정보를 갱신합니다. 크기 변경 알림 없이 요소의 위치나 테두리 두께만 바뀐 경우에는 새 레이아웃이 반영된 뒤 `light.refresh()`를 호출하세요. 포인터가 멈춰 있어도 갱신됩니다.

React에서 호출하는 방법은 [light.refresh()](https://edge.bolerish.com/ko/docs/react/use-light/#refresh)를 참고하세요.

<a id="geometry-limits"></a>

## 지원하는 도형과 문서 범위

Edge는 좌표축에 정렬된 직사각형을 기준으로 동작합니다. 회전, 원근 변환과 다른 문서로 연결되는 포털은 지원하지 않습니다. 같은 문서 안의 포털은 조명을 공유할 수 있습니다. 포커스, 선택 상태, 유효성 검사는 [접근성](https://edge.bolerish.com/ko/docs/integration/#preserve-native-interactions)을 참고하세요.