advise(react/errorboundary): add & change example case

packages/react/src/ErrorBoundary.en.mdx

@@ -50,27 +50,57 @@ const ErrorAfter4s = () => {
 
 :::tip
 
+## Define component as `<ErrorBoundary/>`'s fallback
+
+### ErrorBoundaryFallbackProps
+
+If you want to deliver a declared component as `<ErrorBoundary/>`'s fallback, you can use the `ErrorBoundaryFallbackProps` type to declare the component easily.
+
+```tsx
+import type { ErrorBoundaryFallbackProps } from '@suspensive/react'
+
+const ErrorBoundaryFallback = ({ reset, error }: ErrorBoundaryFallbackProps) => (
+  <>
+    <button onClick={reset}>reset</button>
+    {error.message}
+  </>
+)
+
+const Example = () => (
+  <ErrorBoundary fallback={ErrorBoundaryFallback}>
+    <ErrorAfter4s />
+  </ErrorBoundary>
+)
+```
+
+:::
+
+:::tip
+
 ## Use `<ErrorBoundary/>` fallback props without prop drilling
 
 ### useErrorBoundaryFallbackProps
 
-In fallback of `<ErrorBoundary/>`, by calling useErrorBoundaryFallbackProps().reset/error, we can use error of `<ErrorBoundary/>` and reset it without using prop directly
+If the depth of the fallback component deepens, prop drilling will not be avoided to access `error` objects and `reset` methods.
+The `useErrorBoundaryFallbackProps` allows you to access the `reset` method and `error` objects without prop drilling.
 
 ```tsx
 import { ErrorBoundary, useErrorBoundaryFallbackProps } from '@suspensive/react'
 
 const Nested = () => {
-  const props = useErrorBoundaryFallbackProps()
+  const { reset, error } = useErrorBoundaryFallbackProps()
 
   return (
     <>
-      <button onClick={props.reset}>Try again</button>
-      {props.error.message}
+      <button onClick={reset}>Try again</button>
+      {error.message}
     </>
   )
 }
 
+// There's no need to pass fallback Prop here!
 const ErrorBoundaryFallback = () => <Nested />
+
 const Example = () => (
   <ErrorBoundary fallback={ErrorBoundaryFallback}>
     <Error />

packages/react/src/ErrorBoundary.ko.mdx

@@ -50,27 +50,57 @@ const ErrorAfter4s = () => {
 
 :::tip
 
+## `<ErrorBoundary/>`'의 fallback로 전달할 컴포넌트 정의하기
+
+### ErrorBoundaryFallbackProps
+
+`<ErrorBoundary/>`'의 fallback으로 컴포넌트를 전달하고 싶다면 `ErrorBoundaryFallbackProps` 타입을 활용해 쉽게 컴포넌트를 선언 할 수 있습니다.
+
+```tsx
+import type { ErrorBoundaryFallbackProps } from '@suspensive/react'
+
+const ErrorBoundaryFallback = ({ reset, error }: ErrorBoundaryFallbackProps) => (
+  <>
+    <button onClick={reset}>reset</button>
+    {error.message}
+  </>
+)
+
+const Example = () => (
+  <ErrorBoundary fallback={ErrorBoundaryFallback}>
+    <ErrorAfter4s />
+  </ErrorBoundary>
+)
+```
+
+:::
+
+:::tip
+
 ## `<ErrorBoundary/>` fallback props을 prop drilling 없이 사용하기
 
 ### useErrorBoundaryFallbackProps
 
-ErrorBoundaryFallback에서 useErrorBoundaryFallbackProps().reset/error을 사용해 prop을 직접 사용하지 않고도 `<ErrorBoundary/>`을 reset하고 error를 사용할 수 있습니다.
+만약, fallback 컴포넌트의 depth가 깊어진다면, `error` 객체와 `reset` 메소드에 접근하기 위해 prop drilling을 피할 수 없을 것 입니다.
+이 때, `useErrorBoundaryFallbackProps`을 통해, prop drilling 없이 `reset` 메소드와 `error` 객체에 접근할 수 있습니다.
 
 ```tsx
 import { ErrorBoundary, useErrorBoundaryFallbackProps } from '@suspensive/react'
 
 const Nested = () => {
-  const props = useErrorBoundaryFallbackProps()
+  const { reset, error } = useErrorBoundaryFallbackProps()
 
   return (
     <>
-      <button onClick={props.reset}>Try again</button>
-      {props.error.message}
+      <button onClick={reset}>Try again</button>
+      {error.message}
     </>
   )
 }
 
+// 여기서 fallbackProp 을 전달할 필요가 없어집니다!
 const ErrorBoundaryFallback = () => <Nested />
+
 const Example = () => (
   <ErrorBoundary fallback={ErrorBoundaryFallback}>
     <Error />