docs(react): add document for wrap (#342)

related with #294 

# Overview

I added document for wrap

<!--
    A clear and concise description of what this pr is about.
 -->

## PR Checklist

- [x] I did below actions if need

1. I read the [Contributing
Guide](https://github.com/suspensive/react/blob/main/CONTRIBUTING.md)
2. I added documents and tests.

docs/src/pages/docs/react/_meta.en.json

@@ -5,5 +5,6 @@
   "ErrorBoundaryGroup": { "title": "<ErrorBoundaryGroup/>" },
   "Delay": { "title": "<Delay/>" },
   "AsyncBoundary": { "title": "<AsyncBoundary/>" },
-  "SuspensiveProvider": { "title": "<SuspensiveProvider/>" }
+  "SuspensiveProvider": { "title": "<SuspensiveProvider/>" },
+  "wrap": { "title": "wrap" }
 }

docs/src/pages/docs/react/_meta.ko.json

@@ -5,5 +5,6 @@
   "ErrorBoundaryGroup": { "title": "<ErrorBoundaryGroup/>" },
   "Delay": { "title": "<Delay/>" },
   "AsyncBoundary": { "title": "<AsyncBoundary/>" },
-  "SuspensiveProvider": { "title": "<SuspensiveProvider/>" }
+  "SuspensiveProvider": { "title": "<SuspensiveProvider/>" },
+  "wrap": { "title": "wrap" }
 }

docs/src/pages/docs/react/wrap.en.mdx

@@ -0,0 +1,55 @@
+import { Callout } from 'nextra/components'
+
+# wrap
+
+<Callout type="warning">
+
+`wrap` is experimental feature, this interfaces could be changed
+
+</Callout>
+
+wrap was created to wrap components with Suspense, ErrorBoudnary, ErrorBoundaryGroup, etc. provided by @suspensive/react.
+
+```tsx /wrap/
+import { wrap } from '@suspensive/react'
+import { useSuspenseQuery } from '@suspensive/react-query'
+
+export const Page = wrap
+  .ErrorBoundaryGroup({ blockOutside: true })
+  .ErrorBoundary({ fallback: ({ error }) => <PageErrorFallback message={error.message} /> })
+  .Suspense({ fallback: <PageSkeleton /> })
+  .on(
+    // will make <Page/> component wrapped in <ErrorBoundaryGroup/>, <ErrorBoundary/> and <Suspense/>
+    () => {
+      const errorBoundaryGroup = useErrorBoundaryGroup()
+      const { data: postList } = useSuspenseQuery({
+        queryKey: ['posts'],
+        queryFn: () => fetch(`https://exmaple.com/posts`).then((res) => res.json()),
+      })
+
+      return (
+        <>
+          <button onClick={errorBoundaryGroup.reset}>Reset all posts</button>
+          {postList.map((post) => (
+            <PostItem id={post.id} />
+          ))}
+        </>
+      )
+    }
+  )
+
+const PostItem = wrap
+  .ErrorBoundary({ fallback: ({ error }) => <>{error.message}</> })
+  .Suspense({ fallback: <PostSkeleton /> })
+  .on<{ id: string }>(
+    // will make <Post/> component have PostProps wrapped in <ErrorBoundary/> and <Suspense/>
+    (props) => {
+      const { data: post } = useSuspenseQuery({
+        queryKey: ['posts', props.id],
+        queryFn: () => fetch(`https://exmaple.com/posts/${props.id}`).then((res) => res.json()),
+      })
+
+      return <>{post.title}</>
+    }
+  )
+```

docs/src/pages/docs/react/wrap.ko.mdx

@@ -0,0 +1,55 @@
+import { Callout } from 'nextra/components'
+
+# wrap
+
+<Callout type="warning">
+
+`wrap`은 실험 기능이므로 이 인터페이스는 변경될 수 있습니다.
+
+</Callout>
+
+wrap은 @suspensive/react에서 제공하는 Suspense, ErrorBoudnary, ErrorBoundaryGroup 등으로 컴포넌트를 감싸기 위해 만들어졌습니다.
+
+```tsx /wrap/
+import { wrap } from '@suspensive/react'
+import { useSuspenseQuery } from '@suspensive/react-query'
+
+export const Page = wrap
+  .ErrorBoundaryGroup({ blockOutside: true })
+  .ErrorBoundary({ fallback: ({ error }) => <PageErrorFallback message={error.message} /> })
+  .Suspense({ fallback: <PageSkeleton /> })
+  .on(
+    // <ErrorBoundaryGroup />, <ErrorBoundary />, <Suspense />에 감싸진 <Page/> 컴포넌트를 만듭니다.
+    () => {
+      const errorBoundaryGroup = useErrorBoundaryGroup()
+      const { data: postList } = useSuspenseQuery({
+        queryKey: ['posts'],
+        queryFn: () => fetch(`https://exmaple.com/posts`).then((res) => res.json()),
+      })
+
+      return (
+        <>
+          <button onClick={errorBoundaryGroup.reset}>Reset all posts</button>
+          {postList.map((post) => (
+            <PostItem id={post.id} />
+          ))}
+        </>
+      )
+    }
+  )
+
+const PostItem = wrap
+  .ErrorBoundary({ fallback: ({ error }) => <>{error.message}</> })
+  .Suspense({ fallback: <PostSkeleton /> })
+  .on<{ id: string }>(
+    // <ErrorBoundary/>, <Suspense/>에 감싸진 <PostItem/> 컴포넌트를 만듭니다.
+    (props) => {
+      const { data: post } = useSuspenseQuery({
+        queryKey: ['posts', props.id],
+        queryFn: () => fetch(`https://exmaple.com/posts/${props.id}`).then((res) => res.json()),
+      })
+
+      return <>{post.title}</>
+    }
+  )
+```