docs: Update overlay unmount with setTimeout

docs/src/pages/ko/docs/guides/introduction.mdx

@@ -323,8 +323,10 @@ export function ConfirmDialog({ isOpen, close }) {
 
 `close` 함수는 닫기 애니메이션을 보여준 뒤에도 메모리에 오버레이 정보가 남아있어요. 이런 이유로 많은 오버레이를 동시에 열고 닫는 경우 메모리 누수가 발생할 수 있어요.
 
-이를 방지하려면 닫기 애니메이션이 끝난 뒤 `unmount`를 호출해 오버레이를 메모리에서 해제하세요.
-`useEffect`의 `cleanup` 함수를 사용하면 손쉽게 오버레이가 닫힐 때 자동으로 메모리에서 해제할 수 있어요.
+이를 방지하려면 닫기 애니메이션이 끝난 뒤 `unmount`를 호출해 오버레이를 메모리에서 해제해야 해요.
+`onExit` prop과 같이 오버레이가 종료된 후 실행되는 콜백 함수가 있다면 `unmount` 함수를 전달해서 메모리를 해제할 수 있어요.
+
+MUI는 `onExit` prop을 제공하지 않지만, React의 `useEffect`의 `cleanup` 함수를 사용하면 손쉽게 오버레이가 닫힐 때 자동으로 메모리에서 해제할 수 있어요.
 
 ```tsx filename="confirm-dialog.tsx" {8-10}
 import { useEffect } from 'react';

docs/src/pages/ko/docs/more/basic.mdx

@@ -117,6 +117,10 @@ export const Example = () => {
 하지만 닫기 애니메이션이 있는 경우, `unmount`를 바로 호출하면 애니메이션이 보이지 않을 수 있어요.
 이럴 때는 `close`를 호출한 후, 애니메이션이 완료된 뒤 `unmount`를 실행하세요.
 
+### `onExit` prop 사용하기
+
+오버레이가 닫히는 애니메이션이 종료되었다는 `onExit` prop을 구현하면 애니메이션이 끝난 직후 오버레이를 제거할 수 있어요.
+
 <br />
 
 <Sandpack>
@@ -185,3 +189,85 @@ export function ConfirmDialog({ isOpen, close, onExit }) {
 ```
 
 </Sandpack>
+
+### `setTimeout` 사용하기
+
+`onExit` prop이 없다면, `setTimeout`을 사용해서 애니메이션이 종료된 후에 오버레이를 제거할 수 있어요.
+애니메이션 지속 시간에 맞춰 적절한 시간을 설정하세요.
+
+다음 코드에서 `close` 함수는 오버레이를 닫고, `setTimeout`을 사용해 600ms 후에 `unmount` 함수를 호출해요.
+
+<br />
+
+<Sandpack>
+
+```tsx Example.tsx active
+import { OverlayProvider, overlay } from 'overlay-kit';
+import Button from '@mui/material/Button';
+import { ConfirmDialog } from './confirm-dialog';
+
+function App() {
+  return (
+    <>
+      <Button
+        onClick={() => {
+          overlay.open(({ isOpen, close, unmount }) => {
+            return (
+              <ConfirmDialog
+                isOpen={isOpen}
+                close={() => {
+                  close();
+                  // `unmount`는 600ms 이후에 실행돼요.
+                  // 애니메이션 재생 시간에 맞춰서 적절하게 타이밍을 조정하세요.
+                  setTimeout(unmount, 600);
+                }}
+              />
+            );
+          });
+        }}
+      >
+        Confirm Dialog 열기
+      </Button>
+    </>
+  );
+}
+
+export const Example = () => {
+  return (
+    <OverlayProvider>
+      <App />
+    </OverlayProvider>
+  );
+};
+```
+
+```tsx confirm-dialog.tsx
+import { useState, useEffect } from 'react';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+
+export function ConfirmDialog({ isOpen, close }) {
+  const [count, setCount] = useState(0);
+
+  return (
+    <Dialog open={isOpen} onClose={close} transitionDuration={1000}>
+      <DialogTitle>정말로 계속하시겠어요?</DialogTitle>
+
+      <DialogContent>
+        <p>count: {count}</p>
+        <Button onClick={() => setCount(count + 1)}>카운트 증가</Button>
+      </DialogContent>
+
+      <DialogActions>
+        <Button onClick={close}>아니요</Button>
+        <Button onClick={close}>네</Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
+```
+
+</Sandpack>