퀵 가이드 파라미터 추적 개선

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 = (

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;

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 {