WIP

portone-io · Jan 15, 2025 · 8d1ec81 · 8d1ec81
1 parent 78bf688
commit 8d1ec81
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 93 deletions.
diff --git a/packages/remark-param-tree/package.json b/packages/remark-param-tree/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "mdast-util-from-markdown": "^2.0.1",
+    "mdast-util-mdx": "^3.0.0",
     "mdast-util-to-string": "^4.0.0",
     "ts-pattern": "^5.1.1",
     "unified": "^11.0.5",

diff --git a/packages/remark-param-tree/src/index.ts b/packages/remark-param-tree/src/index.ts
@@ -5,6 +5,7 @@ import type {
   PhrasingContent,
   Root,
 } from "mdast";
+import { type MdxJsxTextElement } from "mdast-util-mdx";
 import { toString } from "mdast-util-to-string";
 import { match, P } from "ts-pattern";
 import { type BuildVisitor, SKIP, visit } from "unist-util-visit";
@@ -21,9 +22,7 @@ export default function remarkParamTreePlugin() {
       if (node.name === "ParamTree") {
         const generateTypeDefinition = (
           node: ListItem | Heading,
-        ):
-          | [node: Heading | Paragraph, typeDefinition: TypeDefinition]
-          | null => {
+        ): [node: MdxJsxTextElement, typeDefinition: TypeDefinition] | null => {
           const result = match(node)
             .with(
               {
@@ -40,7 +39,7 @@ export default function remarkParamTreePlugin() {
             )
             .otherwise(() => null);
           if (result === null) return null;
-          const [typeNode, typeStr] = result;
+          const [_, typeStr] = result;
 
           const exec =
             /^(?<name>[a-zA-Z_$][a-zA-Z0-9_$]*)(?<optional>\?)?:\s*(?<type>[a-zA-Z0-9_$<>[\]{}|&?()\s]+)$/.exec(
@@ -59,14 +58,22 @@ export default function remarkParamTreePlugin() {
               },
               ({ name, type, optional }) =>
                 [
-                  typeNode,
+                  {
+                    type: "mdxJsxTextElement",
+                    name: "ParamTree.Parameter",
+                    attributes: [
+                      { type: "mdxJsxAttribute", name: "ident", value: name },
+                      { type: "mdxJsxAttribute", name: "type", value: type },
+                    ],
+                    children: [],
+                  },
                   {
                     name,
                     type,
                     optional: Boolean(optional),
                   },
                 ] satisfies [
-                  node: Heading | Paragraph,
+                  node: MdxJsxTextElement,
                   typeDefinition: TypeDefinition,
                 ],
             )
@@ -82,52 +89,8 @@ export default function remarkParamTreePlugin() {
           if (parent === undefined) return;
           const _typeDefinition = generateTypeDefinition(node);
           if (_typeDefinition === null) return;
-          const [, typeDefinition] = _typeDefinition;
-          const typeMdast = [
-            {
-              type: "text",
-              value: `${typeDefinition.name}${typeDefinition.optional === true ? "?" : ""}: `,
-            },
-            {
-              type: "mdxJsxTextElement",
-              name: "mark",
-              attributes: [
-                {
-                  type: "mdxJsxAttribute",
-                  name: "style",
-                  value: "color:#1e293b;",
-                },
-              ],
-              children: [
-                {
-                  type: "strong",
-                  children: [{ type: "text", value: typeDefinition.type }],
-                },
-              ],
-            },
-          ];
-          match(node)
-            .with(
-              {
-                type: "heading",
-              },
-              (node) => {
-                node.children = typeMdast as PhrasingContent[];
-              },
-            )
-            .with(
-              {
-                type: "listItem",
-                children: [{ type: "paragraph" }, ...P.array()],
-              },
-              (node) => {
-                node.children[0] = {
-                  type: "paragraph",
-                  children: typeMdast as PhrasingContent[],
-                };
-              },
-            )
-            .otherwise(() => {});
+          const [_node, typeDefinition] = _typeDefinition;
+          parent.children.splice(index, 1, _node);
         };
         visit(node, "listItem", transformNode);
         visit(node, "heading", transformNode);

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/gitbook/ParamTree.tsx b/src/components/gitbook/ParamTree.tsx
@@ -3,10 +3,39 @@ import type { JSXElement } from "solid-js";
 
 import styles from "./ParamTree.module.css";
 
-interface Props {
+interface ParamTreeProps {
   children: JSXElement;
 }
 
-export default function ParamTree(props: Props) {
-  return <div class={clsx(styles.paramTree, "text-xs")}>{props.children}</div>;
+export default function ParamTree(props: ParamTreeProps) {
+  return <div class={clsx(styles.paramTree, "text-sm")}>{props.children}</div>;
 }
+
+interface ParameterProps {
+  ident: string;
+  type: string;
+  optional?: boolean;
+  children: JSXElement;
+}
+
+function Parameter(props: ParameterProps) {
+  return (
+    <div class="text-sm">
+      <div class="text-slate-7">
+        <span class="whitespace-normal font-medium font-mono">
+          {props.ident}
+        </span>
+        <span class="font-mono">
+          {props.optional ? "?" : ""}
+          {": "}
+        </span>
+        <span class="whitespace-normal text-green-5 font-mono">
+          {props.type}
+        </span>
+      </div>
+      <div class="text-slate-5">{props.children}</div>
+    </div>
+  );
+}
+
+ParamTree.Parameter = Parameter;
diff --git a/src/components/gitbook/Parameter.tsx b/src/components/gitbook/Parameter.tsx
diff --git a/src/routes/(root)/sdk/ko/v2-sdk/payment-request.mdx b/src/routes/(root)/sdk/ko/v2-sdk/payment-request.mdx
@@ -7,24 +7,17 @@ versionVariants:
 ---
 
 import Details from "~/components/gitbook/Details";
-import Parameter from "~/components/gitbook/Parameter";
 import ParamTree from "~/components/gitbook/ParamTree";
 
 ## 결제요청 파라미터 정의
 
 <ParamTree>
 
-<Parameter ident="storeId" type="string">
-  **스토어 아이디**
+### storeId: string
 
-  - 포트원 계정에 생성된 상점을 식별하는 고유한 값으로 관리자 콘솔에서 확인할 수 있습니다.
-</Parameter>
+**스토어 아이디**
 
-- storeId: string
-
-  **스토어 아이디**
-
-  - 포트원 계정에 생성된 상점을 식별하는 고유한 값으로 관리자 콘솔에서 확인할 수 있습니다.
+- 포트원 계정에 생성된 상점을 식별하는 고유한 값으로 관리자 콘솔에서 확인할 수 있습니다.
 
 ### paymentId: string