> For the complete documentation index, see [llms.txt](https://developers-apps-in-toss.toss.im/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developers-apps-in-toss.toss.im/documentation/react-native/interaction.md).
# 반응 처리
이 문서에서는 **사용자 인터렉션과 직접적으로 연결되는 UI/UX 기능**을 다뤄요. 스크롤, 키보드, 오디오 포커스, 햅틱 진동처럼 **사용자의 행동에 즉각 반응해야 하는 기능**들을 한 곳에 모아 설명해요.
***
### 스크롤 바운스 영역 배경 처리
**SDK 컴포넌트:** `ScrollViewInertialBackground`
iOS `ScrollView`에서 스크롤이 끝에 도달했을 때 발생하는 \*\*바운스 효과 영역(위/아래)\*\*에 배경색을 채워 보다 자연스러운 시각 효과를 제공하는 컴포넌트예요.
**시그니처**
```ts
function ScrollViewInertialBackground({
topColor,
bottomColor,
spacer: _spacer,
}: ScrollViewInertialBackgroundProps): JSX.Element;
```
**파라미터**
* propsobject
컴포넌트에 전달되는 `props` 객체예요.
* **props.topColor** · `string`
스크롤 위쪽 영역에 적용할 배경색이에요. 기본값은 시스템 테마에 맞춰 자동으로 적용되는 `adaptive.background`에요.
* **props.bottomColor** · `string`
스크롤 아래쪽 영역에 적용할 배경색이에요. 기본값은 시스템 테마에 맞춰 자동으로 적용되는 `adaptive.background`에요.
* **props.spacer** · `number`
배경색이 적용될 콘텐츠 위, 아래 공간 사이의 공간 크기를 지정해요. 기본값은 [`useWindowDimensions`](https://reactnative.dev/docs/next/usewindowdimensions)로 가져온 화면 높이를 사용해요.
**예제 : 스크롤 뷰 위, 아래에 배경색을 추가하기**
스크롤 뷰 위에 빨간색, 아래에 파란색 배경색을 추가해요. 스크롤을 벗어난 영역에 배경색이 적용돼요.
```tsx
import { ScrollView, View, Text } from 'react-native';
import { ScrollViewInertialBackground } from '@granite-js/react-native';
const dummies = Array.from({ length: 20 }, (_, i) => i);
function InertialBackgroundExample() {
return (
{dummies.map((i) => (
스크롤을 해보세요.
))}
);
}
```
***
### 색상 모드 타입
**SDK API:** `ColorPreference`
현재 기기의 **색상 모드(라이트 / 다크)** 를 나타내는 타입이에요. 테마 분기나 스타일 조건 처리에 사용해요.
**시그니처**
```typescript
type ColorPreference = 'light' | 'dark';
```
***
### 키보드 위로 요소 올리기
**SDK 컴포넌트:** `KeyboardAboveView`
키보드가 나타날 때 **자식 컴포넌트를 자동으로 키보드 위로 올려주는 레이아웃 컴포넌트**예요. 입력 중에도 버튼이나 액션 영역을 항상 노출하고 싶을 때 유용해요.
**시그니처**
```typescript
function KeyboardAboveView({ style, children, ...props }: ComponentProps): ReactElement;
```
**파라미터**
* props.styleStyleProp\
추가적인 스타일을 적용할 수 있어요. 예를 들어, 배경색이나 크기 등을 설정할 수 있어요.
* props.childrenReactNode
키보드가 나타날 때 키보드 위로 표시할 컴포넌트예요. 예를 들어, 버튼, 텍스트 입력창 등을 넣을 수 있어요.
**반환 값**
* ReactElement
키보드가 나타났을 때 키보드 위로 조정된 [`Animated.View`](https://reactnative.dev/docs/animated#createanimatedcomponent)를 반환해요.
**예제 : 키보드 위로 요소를 올리기**
```tsx
import { ScrollView, TextInput, View, Text } from 'react-native';
import { KeyboardAboveView } from '@granite-js/react-native';
function KeyboardAboveViewExample() {
return (
<>
Keyboard 위에 있어요.
);
}
```
***
### 오디오 포커스 변경 콜백
**SDK API:** `OnAudioFocusChanged`
비디오나 오디오 컴포넌트의 **오디오 포커스가 변경될 때 호출되는 콜백 타입**이에요. 다른 앱이나 시스템 이벤트로 소리가 중단될 때의 처리를 제어할 수 있어요.
**시그니처**
```typescript
type OnAudioFocusChanged = NonNullable;
```
**파라미터**
* **event** · 필수 · `Object`
오디오 포커스 정보를 담고 있는 이벤트 객체예요.
* **event.hasAudioFocus** · 필수 · `boolean`
비디오 컴포넌트가 오디오 포커스를 가지고 있는지 여부를 나타내요.
***
### 햅틱 진동 실행하기
**SDK 함수:** `generateHapticFeedback`
디바이스에서 **햅틱 진동을 발생시키는 함수**예요. 버튼 클릭, 완료 알림, 성공/실패 피드백 등 촉각 반응이 필요한 순간에 사용해요.
**시그니처**
```typescript
function generateHapticFeedback(options: HapticFeedbackOptions): Promise;
```
**반환 값**
* void
**예제 : 버튼을 눌러 햅틱 일으키기**
{% tabs %}
{% tab title="js" %}
```js
import { generateHapticFeedback } from '@apps-in-toss/web-framework';
generateHapticFeedback({ type: 'tickWeak' });
```
{% endtab %}
{% tab title="React" %}
```tsx
import React from 'react';
import { generateHapticFeedback } from '@apps-in-toss/web-framework';
function GenerateHapticFeedbackWeb() {
return (
);
}
export default GenerateHapticFeedbackWeb;
```
{% endtab %}
{% tab title="React Native" %}
```tsx
import { Button } from 'react-native';
import { generateHapticFeedback } from '@apps-in-toss/framework';
function GenerateHapticFeedback() {
return (