Merge branch 'main' into feat/tax-invoice-release

eslint.config.js

@@ -40,7 +40,15 @@ const tsTypeCheckedRules = {
 
 /** @type {import("eslint").Linter.FlatConfig[]} */
 export default [
-  { ignores: ["dist", ".vercel", "**/routes/(root)/docs/**/*"] },
+  {
+    ignores: [
+      "dist",
+      ".vercel",
+      "**/routes/(root)/docs/**/*",
+      ".vinxi",
+      ".output",
+    ],
+  },
   {
     ...eslint.configs.recommended,
     ignores: ["scripts/**/*.ts", "**/*.mdx/*"],

src/components/Hint.tsx

@@ -38,7 +38,7 @@ export default function Hint(props: Props) {
   return (
     <div class={cls()}>
       <i class={iconCls()}></i>
-      <div>{props.children}</div>
+      <div class="grid">{props.children}</div>
     </div>
   );
 }

src/components/gitbook/Tabs.tsx

@@ -65,7 +65,8 @@ export default function Tabs(
         {(title) => (
           <TabsImpl.Content
             value={title}
-            class="border rounded-md rounded-tl-none px-6 py-4"
+            class="border rounded-md rounded-tl-none px-6 py-4 [&:not([data-selected])]:hidden"
+            forceMount
           >
             {children.get(title)?.()}
           </TabsImpl.Content>

src/components/interactive-docs/CodeIcon.tsx

@@ -25,6 +25,10 @@ export function CodeIcon(props: CodeIconProps) {
         return "i-vscode-icons-file-type-css";
       case "html":
         return "i-vscode-icons-file-type-html";
+      case "py":
+        return "i-vscode-icons-file-type-python";
+      case "kt":
+        return "i-vscode-icons-file-type-kotlin";
       default:
         return "i-vscode-icons-default-file";
     }

src/components/interactive-docs/CodePreview.tsx

@@ -1,12 +1,24 @@
+import { Collapsible } from "@kobalte/core/collapsible";
 import { Dynamic } from "solid-js/web";
 
 import { useInteractiveDocs } from "~/state/interactive-docs";
 
 export function CodePreview() {
   const { preview } = useInteractiveDocs();
+
   return (
-    <div class="grid bg-slate-8 pt-2">
-      <Dynamic component={preview()} />
-    </div>
+    <Collapsible
+      class="grid grid-rows-[auto_auto] bg-slate-8 pt-2"
+      forceMount
+      defaultOpen
+    >
+      <Collapsible.Trigger class="flex gap-2 rounded-t-lg bg-slate-5 px-4 py-2 [&[data-expanded]>i]:transform-rotate-180">
+        <i class="i-ic-baseline-keyboard-arrow-down text-xl text-slate-3 font-medium" />
+        <span class="text-sm text-slate-3 font-medium">미리보기</span>
+      </Collapsible.Trigger>
+      <Collapsible.Content class="data-[closed]:hidden">
+        <Dynamic component={preview()} />
+      </Collapsible.Content>
+    </Collapsible>
   );
 }

src/components/interactive-docs/CodeRenderer.tsx

@@ -31,7 +31,7 @@ export function CodeRenderer() {
       if (!code) return;
       return highlighter()?.codeToHtml(code, {
         theme: "one-dark-pro",
-        lang: "javascript",
+        lang: currentTab()?.language ?? "javascript",
         colorReplacements: {
           "one-dark-pro": {
             "#282c34": "#1e293b",

src/components/interactive-docs/LanguageSelect.tsx

@@ -1,6 +1,5 @@
 import { ToggleGroup } from "@kobalte/core/toggle-group";
-import { createMemo, untrack } from "solid-js";
-import { For } from "solid-js";
+import { createMemo, For, untrack } from "solid-js";
 import { match, P } from "ts-pattern";
 
 import { useInteractiveDocs } from "~/state/interactive-docs";
@@ -16,6 +15,7 @@ export default function LanguageSelect(props: LanguageSelectProps) {
   const value = createMemo(() => {
     const selected = selectedLanguage();
     return match([props.languages, selected])
+      .with([P._, P.nullish], () => undefined)
       .with(
         [
           ["frontend", "hybrid"],
@@ -47,13 +47,20 @@ export default function LanguageSelect(props: LanguageSelectProps) {
     }
     setSelectedLanguage((prev) => {
       return match([props.languages, prev])
-        .with([["frontend", "hybrid"], P.array()], () => {
-          return [language, prev[1]] satisfies [string, string];
-        })
+        .with([P._, P.nullish], () => null)
+        .with(
+          [
+            ["frontend", "hybrid"],
+            [P.string, P.nonNullable],
+          ],
+          ([, prev]) => {
+            return [language, prev[1]] satisfies [string, string];
+          },
+        )
         .with([["frontend", "hybrid"], P.string], () => {
           return [language, backend[0]] satisfies [string, string];
         })
-        .with(["backend", P.array()], () => {
+        .with(["backend", P.nonNullable], ([, prev]) => {
           return [prev[0], language] satisfies [string, string];
         })
         .with(["backend", P.string], () => {
@@ -77,7 +84,7 @@ export default function LanguageSelect(props: LanguageSelectProps) {
             value={language}
             class="cursor-pointer border border-slate-3 rounded-md px-2.5 py-.75 text-xs text-slate-9 font-medium data-[pressed]:border-portone data-[pressed]:text-portone [&:not([data-pressed])]:hover:border-slate-4 [&:not([data-pressed])]:hover:bg-slate-4"
           >
-            {language}
+            {language.replaceAll("_", " ")}
           </ToggleGroup.Item>
         )}
       </For>

src/components/interactive-docs/PgSelect.tsx

@@ -10,7 +10,7 @@ import kpnLogo from "~/assets/pg-circle/kpn.png";
 import ksnetLogo from "~/assets/pg-circle/ksnet.png";
 import naverLogo from "~/assets/pg-circle/naver.png";
 import niceLogo from "~/assets/pg-circle/nice.png";
-import smatroLogo from "~/assets/pg-circle/smartro.png";
+import smartroLogo from "~/assets/pg-circle/smartro.png";
 import tossLogo from "~/assets/pg-circle/toss.png";
 import { type Pg, useInteractiveDocs } from "~/state/interactive-docs";
 
@@ -21,7 +21,7 @@ export type PgSelectOption = {
 
 const PgOptions = {
   nice: { label: "나이스페이먼츠", icon: niceLogo },
-  smatro: { label: "스마트로", icon: smatroLogo },
+  smartro: { label: "스마트로", icon: smartroLogo },
   toss: { label: "토스페이먼츠", icon: tossLogo },
   kpn: { label: "한국결제네트웍스", icon: kpnLogo },
   inicis: { label: "이니시스", icon: inicisLogo },

src/components/interactive-docs/code.ts

@@ -46,6 +46,7 @@ type CodeHelpers<Params extends DefaultParams, Sections extends string> = {
   when: (
     predicate: (params: Params) => boolean,
   ) => CodeTemplateFunction<Params, Sections>;
+  params: Params;
 };
 
 type GenerateCode<Params extends DefaultParams, Sections extends string> = (
@@ -116,6 +117,7 @@ class CodeGenerator<Params extends DefaultParams, Sections extends string> {
     return {
       section: this.sectionResolver(),
       when: this.whenResolver(),
+      params: this.params,
     };
   }
 

src/components/interactive-docs/index.tsx

@@ -1,16 +1,14 @@
 export { code } from "./code";
 import { Switch } from "@kobalte/core/switch";
-import { trackStore } from "@solid-primitives/deep";
-import { createIntersectionObserver } from "@solid-primitives/intersection-observer";
 import {
+  batch,
+  children,
   type Component,
   createEffect,
   createMemo,
-  createSignal,
-  getOwner,
+  onCleanup,
   type ParentComponent,
   type ParentProps,
-  runWithOwner,
   Show,
   startTransition,
   untrack,
@@ -20,6 +18,7 @@ import { match, P } from "ts-pattern";
 
 import {
   type CodeExample,
+  type InteractiveDocsInit,
   type PgOptions,
   useInteractiveDocs,
 } from "~/state/interactive-docs";
@@ -74,38 +73,16 @@ export function createInteractiveDoc<
     }[keyof Params];
     label: string;
   }>;
+  preload: InteractiveDocsInit;
 } {
   const InteractiveDoc: ParentComponent = (props) => {
-    const {
-      setPgOptions,
-      setLanguages,
-      setParams,
-      setCodeExamples,
-      setSelectedLanguage,
-      setPreview,
-      setCurrentSection,
-      params,
-      selectedLanguage,
-    } = useInteractiveDocs();
+    const { setCodeExamples, setSelectedLanguage, setPreview, setParams } =
+      useInteractiveDocs();
     void startTransition(() => {
-      setPgOptions(pgOptions);
-      setLanguages({
-        frontend: Object.keys(codeExamples.frontend) as [
-          FrontendLanguage,
-          ...FrontendLanguage[],
-        ],
-        backend: Object.keys(codeExamples.backend) as [
-          BackendLanguage,
-          ...BackendLanguage[],
-        ],
-        hybrid: codeExamples.hybrid
-          ? (Object.keys(codeExamples.hybrid) as [
-              HybridLanguage,
-              ...HybridLanguage[],
-            ])
-          : [],
-      });
-      setParams(initialParams);
+      setPreview(() => preview);
+    });
+    batch(() => {
+      setParams(() => initialParams);
       setCodeExamples(
         codeExamples as unknown as {
           frontend: Record<
@@ -123,70 +100,25 @@ export function createInteractiveDoc<
         },
       );
       setSelectedLanguage(initialSelectedExample as [string, string] | string);
-      setPreview(() => preview);
     });
-    const [sections, setSections] = createSignal<Element[]>([]);
-    const intersectingEntriesMap = new Map<
-      HTMLElement,
-      IntersectionObserverEntry
-    >();
 
-    createIntersectionObserver(
-      sections,
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            intersectingEntriesMap.set(entry.target as HTMLElement, entry);
-          } else {
-            intersectingEntriesMap.delete(entry.target as HTMLElement);
-          }
+    onCleanup(() => {
+      batch(() => {
+        setCodeExamples({
+          frontend: {},
+          backend: {},
         });
-
-        if (intersectingEntriesMap.size === 0) return;
-
-        const intersectingSections = [...intersectingEntriesMap.entries()]
-          .filter(([, data]) => data.isIntersecting)
-          .sort(([, a], [, b]) => {
-            const aRatio = a.intersectionRatio;
-            const bRatio = b.intersectionRatio;
-            if (aRatio !== bRatio) return bRatio - aRatio;
-            const aTop = (a.target as HTMLElement).offsetTop;
-            const bTop = (b.target as HTMLElement).offsetTop;
-            return aTop - bTop;
-          });
-
-        const newSection = intersectingSections[0]?.[0].dataset.section;
-        if (newSection) {
-          setCurrentSection(() => newSection);
-        }
-      },
-      {
-        rootMargin: "-120px 0px 0px 0px",
-        threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1],
-      },
-    );
-
-    createEffect(() => {
-      void trackStore(params);
-      void selectedLanguage;
-      const owner = getOwner();
-      setTimeout(() => {
-        runWithOwner(owner, () => {
-          setSections(() =>
-            Array.from(document.querySelectorAll("[data-section]")),
-          );
-        });
-      }, 0);
+        setSelectedLanguage(null);
+        setPreview(undefined);
+      });
     });
 
-    return <>{props.children}</>;
+    const childrenMemo = children(() => props.children);
+    return <>{childrenMemo()}</>;
   };
   const Section = (props: ParentProps<{ section?: Sections }>) => {
     const { setCurrentSection, currentSection } = useInteractiveDocs();
     let ref: HTMLDivElement;
-    createEffect(() => {
-      ref.dataset.section = props.section;
-    });
     createEffect(() => {
       if (props.section === currentSection()) {
         ref.dataset.active = "";
@@ -204,6 +136,7 @@ export function createInteractiveDoc<
         id={props.section}
         ref={ref!}
         onClick={handleClick}
+        data-section={props.section}
         class="cursor-pointer border-l-5 border-white rounded px-[19px] py-4 data-[active]:border-[#FC7D46] data-[active]:bg-[#FFF2EC] [&:not([data-active])]:hover:border-slate-2"
       >
         {props.children}
@@ -232,17 +165,14 @@ export function createInteractiveDoc<
               `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()}>
-        <div>{props.children}</div>{" "}
-      </Show>
-    );
+    return <Show when={show()}>{props.children}</Show>;
   };
   const Toggle = (
     props: ParentProps<{
@@ -274,7 +204,7 @@ export function createInteractiveDoc<
             {props.label}
           </Switch.Label>
         </Switch>
-        <div class="">{props.children}</div>
+        {props.children}
       </div>
     );
   };
@@ -283,5 +213,20 @@ export function createInteractiveDoc<
     Section,
     Condition,
     Toggle,
+    preload: {
+      pgOptions,
+      languages: {
+        frontend: Object.keys(codeExamples.frontend) as [
+          FrontendLanguage,
+          ...FrontendLanguage[],
+        ],
+        backend: Object.keys(codeExamples.backend) as [
+          BackendLanguage,
+          ...BackendLanguage[],
+        ],
+        hybrid: codeExamples.hybrid ? Object.keys(codeExamples.hybrid) : [],
+      },
+      params: initialParams,
+    },
   };
 }