diff --git a/docs/ko/advanced/promise.md b/docs/ko/advanced/promise.md index bb414b6..430f10e 100644 --- a/docs/ko/advanced/promise.md +++ b/docs/ko/advanced/promise.md @@ -2,7 +2,7 @@ overlay-kit은 Promise와 함께 사용하기도 쉬운데요. 복잡한 유즈케이스가 오버레이와 연결되어 있을 때도 오버레이로부터 결과값을 받아 처리할 수 있어요. 여러 상태를 정의한 뒤, 복잡한 콜백 구조를 가진 코드를 만들 필요가 없죠. -오버레이를 Promise와 함께 사용하는 두 가지 방법이 있어요. 기본적으로 `new Promise`를 사용하는 방법, 그리고 overlay-kit이 제공하는 [`overlay.openAsync()`](../reference/overlay.md#overlayopenasync)를 사용하는 방법이 있어요. +오버레이를 Promise와 함께 사용하는 두 가지 방법이 있어요. 기본적으로 `new Promise`를 사용하는 방법, 그리고 overlay-kit이 제공하는 [`overlay.openAsync()`](../reference/overlay.md#overlay-openasync)를 사용하는 방법이 있어요. 사용자가 전달한 결과를 받아 처리하는 ``를 렌더링하는 예제 코드로 두 가지 방법 모두 살펴볼게요. @@ -42,9 +42,9 @@ if (result) { ## 2. `overlay.openAsync()` 사용하기 -더 간단하게 Promise와 함께 오버레이를 사용하고 싶다면 [`overlay.openAsync()`](../reference/overlay.md#overlayopenasync)를 사용할 수 있어요. +더 간단하게 Promise와 함께 오버레이를 사용하고 싶다면 [`overlay.openAsync()`](../reference/overlay.md#overlay-openasync)를 사용할 수 있어요. -[`overlay.openAsync()`](../reference/overlay.md#overlayopenasync)는 [`overlay.open()`](../reference/overlay.md#overlayopen)과 비슷하게 동작하지만, Promise를 반환해서 [`overlay.close()`](../reference/overlay.md#overlayclose)에서 resolve 값을 전달할 수 있어요. +[`overlay.openAsync()`](../reference/overlay.md#overlay-openasync)는 [`overlay.open()`](../reference/overlay.md#overlay-open)과 비슷하게 동작하지만, Promise를 반환해서 [`overlay.close()`](../reference/overlay.md#overlay-close)에서 resolve 값을 전달할 수 있어요. ```tsx const result = await overlay.openAsync(({ isOpen, close }) => { @@ -69,4 +69,4 @@ if (result) { } else { // 사용자가 "아니요"를 눌렀을 때의 처리 } -``` \ No newline at end of file +``` diff --git a/docs/ko/advanced/unmount-with-animation.md b/docs/ko/advanced/unmount-with-animation.md index ce19704..0f08dcc 100644 --- a/docs/ko/advanced/unmount-with-animation.md +++ b/docs/ko/advanced/unmount-with-animation.md @@ -1,6 +1,6 @@ # 오버레이 애니메이션과 Unmount 처리 -대부분의 오버레이는 닫힐 때 애니메이션 효과가 있어요. overlay-kit에서는 오버레이를 닫아도 애니메이션이 계속 실행되도록 Mount 상태를 유지해요. **하지만 메모리 누구를 피하려면 닫히는 애니메이션이 끝난 다음에 잊지 않고 오버레이를 Unmount 해야 해요.** +대부분의 오버레이는 닫힐 때 애니메이션 효과가 있어요. overlay-kit에서는 오버레이를 닫아도 애니메이션이 계속 실행되도록 Mount 상태를 유지해요. **하지만 메모리 누수를 피하려면 닫히는 애니메이션이 끝난 다음에 잊지 않고 오버레이를 Unmount 해야 해요.** 자연스러운 동작을 구현하기 위해 오버레이를 닫을 때 애니메이션이 끝난 후에 컴포넌트를 완전히 Unmount 할 수 있어요. diff --git a/docs/ko/quickstart.md b/docs/ko/quickstart.md index 00d2b12..25cf5d8 100644 --- a/docs/ko/quickstart.md +++ b/docs/ko/quickstart.md @@ -42,7 +42,7 @@ export default function App(props) { ## 2. 오버레이 열기 -이제 버튼을 클릭했을 때 오버레이를 여는 기능을 추가해볼게요. [``](./reference/overlay-provider.md) 안에서 오버레이를 열려면 [overlay.open()](./reference/overlay.md#overlayopen)을 호출하면 돼요. +이제 버튼을 클릭했을 때 오버레이를 여는 기능을 추가해볼게요. [``](./reference/overlay-provider.md) 안에서 오버레이를 열려면 [overlay.open()](./reference/overlay.md#overlay-open)을 호출하면 돼요. 우리는 Material UI의 ``를 열고 싶으니, 다음과 같이 코드를 작성할 수 있어요. @@ -85,9 +85,9 @@ function Example() { } ``` -overlay-kit을 사용하면 이렇게 직관적으로 오버레이를 열 수 있어요. 위 예시처럼 `overlay` 객체를 import하고, [`overlay.open()`](./reference/overlay.md#overlayopen)을 호출하면 돼요. +overlay-kit을 사용하면 이렇게 직관적으로 오버레이를 열 수 있어요. 위 예시처럼 `overlay` 객체를 import하고, [`overlay.open()`](./reference/overlay.md#overlay-open)을 호출하면 돼요. -[`overlay.open()`](./reference/overlay.md#overlayopen) API는 오버레이를 열고 닫기 위한 모든 프로퍼티를 제공해요. [레퍼런스](./reference/overlay.md)를 확인해 보세요. +[`overlay.open()`](./reference/overlay.md#overlay-open) API는 오버레이를 열고 닫기 위한 모든 프로퍼티를 제공해요. [레퍼런스](./reference/overlay.md)를 확인해 보세요. ## 3. 사용자가 클릭한 버튼 결과 처리하기 diff --git a/docs/ko/reference/overlay.md b/docs/ko/reference/overlay.md index 51f4bbe..898b705 100644 --- a/docs/ko/reference/overlay.md +++ b/docs/ko/reference/overlay.md @@ -2,12 +2,12 @@ `overlay` 객체는 React에서 오버레이를 관리하기 위한 API를 제공해요. 오버레이를 관리하는 다양한 케이스를 모두 대응할 수 있어요. -- [overlay.open()](#overlayopen) -- [overlay.openAsync()](#overlayopenasync) -- [overlay.close()](#overlayclose) -- [overlay.closeAll()](#overlaycloseall) -- [overlay.unmount()](#overlayunmount) -- [overlay.unmountAll()](#overlayunmountall) +- [overlay.open()](#overlay-open) +- [overlay.openAsync()](#overlay-openasync) +- [overlay.close()](#overlay-close) +- [overlay.closeAll()](#overlay-closeall) +- [overlay.unmount()](#overlay-unmount) +- [overlay.unmountAll()](#overlay-unmountall) ## overlay.open() @@ -61,7 +61,7 @@ overlay.unmount(overlayId); 오버레이를 엽니다. Promise와 함께 사용할 수 있어요. -이 메서드는 [`overlay.open()`](#overlayopen)과 비슷하게 작동하지만, Promise를 반환해서 `overlay.close()`에서 resolve 값을 전달할 수 있습니다. 자세한 사용법은 [Promise와 함께 사용하기](../advanced/promise.md)를 참고하세요. +이 메서드는 [`overlay.open()`](#overlay-open)과 비슷하게 작동하지만, Promise를 반환해서 `overlay.close()`에서 resolve 값을 전달할 수 있습니다. 자세한 사용법은 [Promise와 함께 사용하기](../advanced/promise.md)를 참고하세요. ### 인터페이스 @@ -127,7 +127,7 @@ function Example() { 특정 오버레이를 닫습니다. -이 메서드를 호출하면 화면에서 오버레이가 사라지지만, 오버레이는 여전히 메모리와 React 요소 트리에 남아 있습니다. 오버레이를 완전히 제거하려면 애니메이션이 끝난 후에 [`overlay.unmount()`](#overlayunmount)를 호출하세요. +이 메서드를 호출하면 화면에서 오버레이가 사라지지만, 오버레이는 여전히 메모리와 React 요소 트리에 남아 있습니다. 오버레이를 완전히 제거하려면 애니메이션이 끝난 후에 [`overlay.unmount()`](#overlay-unmount)를 호출하세요. ### 인터페이스 @@ -158,7 +158,7 @@ overlay.close(overlayId); 열려 있는 모든 오버레이를 닫습니다. -이 메서드를 호출하면 화면에서 오버레이가 사라지지만, 오버레이는 여전히 메모리와 React 요소 트리에 남아 있습니다. 오버레이를 완전히 제거하려면 애니메이션이 끝난 후에 [`overlay.unmount()`](#overlayunmount)를 호출하세요. +이 메서드를 호출하면 화면에서 오버레이가 사라지지만, 오버레이는 여전히 메모리와 React 요소 트리에 남아 있습니다. 오버레이를 완전히 제거하려면 애니메이션이 끝난 후에 [`overlay.unmount()`](#overlay-unmount)를 호출하세요. ### 인터페이스