From 8719c77fb0dc4f63455835c23834a2e34817fbfa Mon Sep 17 00:00:00 2001
From: "CirnoV (Sickle)" <cirnov59@gmail.com>
Date: Thu, 12 Dec 2024 17:05:31 +0900
Subject: [PATCH] =?UTF-8?q?=ED=80=B5=20=EA=B0=80=EC=9D=B4=EB=93=9C=20?=
 =?UTF-8?q?=ED=8C=8C=EB=9D=BC=EB=AF=B8=ED=84=B0=20=EC=B6=94=EC=A0=81=20?=
 =?UTF-8?q?=EA=B0=9C=EC=84=A0=20(#702)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/interactive-docs/index.tsx     | 47 +++++++++++--------
 .../quick-guide/payment/_preview/Preview.tsx  |  8 +---
 src/state/interactive-docs/index.tsx          |  5 +-
 3 files changed, 33 insertions(+), 27 deletions(-)

diff --git a/src/components/interactive-docs/index.tsx b/src/components/interactive-docs/index.tsx
index 31245bd7e..6e429622d 100644
--- a/src/components/interactive-docs/index.tsx
+++ b/src/components/interactive-docs/index.tsx
@@ -1,11 +1,13 @@
 export { code } from "./code";
 import { Switch } from "@kobalte/core/switch";
+import { trackStore } from "@solid-primitives/deep";
 import {
   batch,
   children,
   type Component,
   createEffect,
   createMemo,
+  on,
   onCleanup,
   type ParentComponent,
   type ParentProps,
@@ -153,25 +155,32 @@ export function createInteractiveDoc<
     }>,
   ) => {
     const { params, selectedLanguage } = useInteractiveDocs();
-    const show = createMemo(() => {
-      const whenResolver = (when: Required<typeof props>["when"]) =>
-        when(params as Params);
-      const languageResolver = (language: Required<typeof props>["language"]) =>
-        match(selectedLanguage())
-          .with(
-            [P.string, P.string],
-            ([frontend, backend]) =>
-              `frontend/${frontend}` === language ||
-              `backend/${backend}` === language,
-          )
-          .with(P.string, (hybrid) => `hybrid/${hybrid}` === language)
-          .with(P.nullish, () => false)
-          .exhaustive();
-      return (
-        (props.when ? whenResolver(props.when) : true) &&
-        (props.language ? languageResolver(props.language) : true)
-      );
-    });
+    const show = createMemo(
+      on(
+        [() => trackStore(params), selectedLanguage],
+        ([params, selectedLanguage]) => {
+          const whenResolver = (when: Required<typeof props>["when"]) =>
+            when(params as Params);
+          const languageResolver = (
+            language: Required<typeof props>["language"],
+          ) =>
+            match(selectedLanguage)
+              .with(
+                [P.string, P.string],
+                ([frontend, backend]) =>
+                  `frontend/${frontend}` === language ||
+                  `backend/${backend}` === language,
+              )
+              .with(P.string, (hybrid) => `hybrid/${hybrid}` === language)
+              .with(P.nullish, () => false)
+              .exhaustive();
+          return (
+            (props.when ? whenResolver(props.when) : true) &&
+            (props.language ? languageResolver(props.language) : true)
+          );
+        },
+      ),
+    );
     return <Show when={show()}>{props.children}</Show>;
   };
   const Toggle = (
diff --git a/src/routes/(root)/opi/ko/quick-guide/payment/_preview/Preview.tsx b/src/routes/(root)/opi/ko/quick-guide/payment/_preview/Preview.tsx
index c62fa2cd8..b9a05ef37 100644
--- a/src/routes/(root)/opi/ko/quick-guide/payment/_preview/Preview.tsx
+++ b/src/routes/(root)/opi/ko/quick-guide/payment/_preview/Preview.tsx
@@ -36,12 +36,8 @@ export function Preview() {
     });
   };
 
-  // 재시도를 누르거나 파라미터가 변경될 때마다 초기화
-  createEffect(() => {
-    void trackStore(params);
-
-    void reload();
-  });
+  // 파라미터가 변경될 때마다 초기화
+  createEffect(on(() => trackStore(params), reload));
 
   const requestPayment = async () => {
     if (paymentStatus().status === "PENDING") return undefined;
diff --git a/src/state/interactive-docs/index.tsx b/src/state/interactive-docs/index.tsx
index 3ff52098a..85b22de02 100644
--- a/src/state/interactive-docs/index.tsx
+++ b/src/state/interactive-docs/index.tsx
@@ -1,4 +1,5 @@
 import { createContextProvider } from "@solid-primitives/context";
+import { trackStore } from "@solid-primitives/deep";
 import { createHighlighterCore } from "shiki/core";
 import { createOnigurumaEngine } from "shiki/engine/oniguruma";
 import {
@@ -185,8 +186,8 @@ const [InteractiveDocsProvider, useInteractiveDocs] = createContextProvider(
     const [tabs, setTabs] = createSignal<Tab[]>([]);
     createEffect(
       on(
-        [selectedLanguage, codeExamples],
-        ([selectedLanguage, codeExamples]) => {
+        [() => trackStore(params), selectedLanguage, codeExamples],
+        ([params, selectedLanguage, codeExamples]) => {
           const resolveCode = (example: CodeExample<Params, string>): Tab => {
             const { code, sections } = example.code(params);
             return {