퀵 가이드 WIP

src/content/config.ts

@@ -72,6 +72,7 @@ const DocsEntry = z.object({
   description: z.string(),
   targetVersions: z.array(SystemVersion).optional(),
   versionVariants: z.record(SystemVersion, z.string()).optional(),
+  rightSidebar: z.boolean().optional().default(true),
 });
 export type DocsEntry = z.infer<typeof DocsEntry>;
 

src/layouts/docs/index.tsx

@@ -62,14 +62,18 @@ export function Docs(props: { children: JSXElement }) {
                       </div>
                       {props.children}
                     </article>
+                    <div id="docs-right-sidebar">
+                      <Show when={frontmatter().rightSidebar}>
+                        <RightSidebar
+                          lang={params().lang}
+                          file={doc()?.file ?? ""}
+                          headings={doc()?.headings ?? []}
+                        />
+                      </Show>
+                    </div>
                   </>
                 )}
               </Show>
-              <RightSidebar
-                lang={params().lang}
-                file={doc()?.file ?? ""}
-                headings={doc()?.headings ?? []}
-              />
             </div>
           </>
         )}

src/layouts/sidebar/CodePreview.tsx

@@ -0,0 +1,17 @@
+import { type JSXElement } from "solid-js";
+import { Portal } from "solid-js/web";
+
+interface Props {
+  children?: JSXElement;
+}
+
+export default function CodePreview(props: Props) {
+  return (
+    <>
+      <div>{props.children}</div>
+      <Portal mount={document.getElementById("docs-right-sidebar")!}>
+        <div class="w-133">test</div>
+      </Portal>
+    </>
+  );
+}

src/routes/(root)/opi/ko/_nav.yaml

@@ -1,6 +1,7 @@
 - label: 결제 연동하기
   systemVersion: v2
   items:
+    - /ko/quick-guide/payment
     - /ko/integration/ready/readme
     - slug: /ko/integration/start/v2/readme
       items:

src/routes/(root)/opi/ko/quick-guide/payment.mdx

@@ -0,0 +1,11 @@
+---
+title: 퀵 가이드
+description: 결제연동 퀵 가이드
+rightSidebar: false
+---
+
+import CodePreview from '~/layouts/sidebar/CodePreview';
+
+<CodePreview>
+test
+</CodePreview>