feat: 문서에서 바로 사용해볼 수 있는 Sandpack MDX 컴포넌트 구현

.changeset/silly-lamps-camp.md

@@ -0,0 +1,5 @@
+---
+'docs': patch
+---
+
+feat: 문서에서 바로 실행해볼 수 있는 Sandpack MDX 컴포넌트를 구현합니다.

docs/next.config.js

@@ -2,13 +2,16 @@ const withNextra = require('nextra')({
   theme: 'nextra-theme-docs',
   themeConfig: './theme.config.tsx',
   defaultShowCopyCode: true,
+  mdxOptions: {
+    remarkPlugins: [require('remark-sandpack').remarkSandpack],
+  },
 });
 
 /** @type {import('next').NextConfig} */
 module.exports = withNextra({
   reactStrictMode: true,
   i18n: {
     locales: ['en', 'ko'],
-    defaultLocale: 'ko'
-  }
+    defaultLocale: 'ko',
+  },
 });

docs/package.json

@@ -10,12 +10,15 @@
     "start": "next start"
   },
   "dependencies": {
+    "@codesandbox/sandpack-react": "^2.18.0",
+    "@codesandbox/sandpack-themes": "^2.0.21",
     "es-hangul": "workspace:*",
     "next": "14.1.4",
     "nextra": "^2.13.4",
     "nextra-theme-docs": "^2.13.4",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "remark-sandpack": "^0.0.3"
   },
   "devDependencies": {
     "@types/node": "^20",

docs/src/components/Sandpack/CustomPreset.tsx

@@ -0,0 +1,33 @@
+import {
+  SandpackCodeEditor,
+  SandpackConsole,
+  SandpackLayout,
+  useLoadingOverlayState,
+  useSandpackNavigation,
+} from '@codesandbox/sandpack-react';
+import { RefreshButton } from './RefreshButton';
+import { useRef } from 'react';
+import { Loading } from './Loading';
+
+export function CustomPreset() {
+  const ref = useRef<{ reset: () => void }>(null);
+  const { refresh } = useSandpackNavigation();
+  const state = useLoadingOverlayState();
+
+  const handleRefresh = () => {
+    refresh();
+    ref.current?.reset();
+  };
+
+  return (
+    <SandpackLayout>
+      <SandpackCodeEditor showRunButton={false} />
+      <SandpackConsole
+        ref={ref}
+        standalone
+        showResetConsoleButton={state !== 'LOADING'}
+        actionsChildren={state === 'LOADING' ? <Loading /> : <RefreshButton onRefresh={handleRefresh} />}
+      />
+    </SandpackLayout>
+  );
+}

docs/src/components/Sandpack/Loading.tsx

@@ -0,0 +1,37 @@
+export function Loading({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={`sp-cube-wrapper absolute right-2 bottom-2 z-50 w-8 h-8 rounded ${className}`} {...props}>
+      <div className="sp-cube flex transform -translate-x-1 translate-y-[9px] scale-[0.13]">
+        <div
+          className={`sp-sides absolute w-24 h-24 animate-[cube-rotate_1s_linear_infinite]`}
+          style={{ transform: 'rotateX(-25.5deg) rotateY(45deg)', transformStyle: 'preserve-3d' }}
+        >
+          <div
+            className="absolute w-24 h-24 border-[10px] border-solid border-[#808080] dark:border-[#a8b1c2] rounded-lg bg-white dark:bg-[#282c34] origin-center"
+            style={{ transform: 'rotateX(90deg) translateZ(44px)' }}
+          />
+          <div
+            className="absolute w-24 h-24 border-[10px] border-solid border-[#808080] dark:border-[#a8b1c2] rounded-lg bg-white dark:bg-[#282c34] origin-center"
+            style={{ transform: 'rotateY(90deg) translateZ(44px)' }}
+          />
+          <div
+            className="absolute w-24 h-24 border-[10px] border-solid border-[#808080] dark:border-[#a8b1c2] rounded-lg bg-white dark:bg-[#282c34] origin-center"
+            style={{ transform: 'rotateX(-90deg) translateZ(44px)' }}
+          />
+          <div
+            className="absolute w-24 h-24 border-[10px] border-solid border-[#808080] dark:border-[#a8b1c2] rounded-lg bg-white dark:bg-[#282c34] origin-center"
+            style={{ transform: 'rotateY(-90deg) translateZ(44px)' }}
+          />
+          <div
+            className="absolute w-24 h-24 border-[10px] border-solid border-[#808080] dark:border-[#a8b1c2] rounded-lg bg-white dark:bg-[#282c34] origin-center"
+            style={{ transform: 'rotateY(0deg) translateZ(44px)' }}
+          />
+          <div
+            className="absolute w-24 h-24 border-[10px] border-solid border-[#808080] dark:border-[#a8b1c2] rounded-lg bg-white dark:bg-[#282c34] origin-center"
+            style={{ transform: 'rotateY(-180deg) translateZ(44px)' }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

docs/src/components/Sandpack/RefreshButton.tsx

@@ -0,0 +1,9 @@
+import { RefreshIcon, RoundedButton } from '@codesandbox/sandpack-react';
+
+export function RefreshButton({ onRefresh }: { onRefresh: () => void }) {
+  return (
+    <RoundedButton onClick={onRefresh}>
+      <RefreshIcon />
+    </RoundedButton>
+  );
+}

docs/src/components/Sandpack/Sandpack.tsx

@@ -0,0 +1,34 @@
+import { SandpackProps, SandpackProvider } from '@codesandbox/sandpack-react';
+import { atomDark } from '@codesandbox/sandpack-themes';
+import { baseTemplate } from './baseTemplate';
+import { CustomPreset } from './CustomPreset';
+import { useIsDarkMode } from '@/hooks/use-is-dark-mode';
+import { SandpackLogLevel } from '@codesandbox/sandpack-client';
+
+export function Sandpack({ files }: SandpackProps) {
+  const isDarkMode = useIsDarkMode();
+
+  return (
+    <SandpackProvider
+      template="vanilla-ts"
+      theme={isDarkMode ? atomDark : undefined}
+      files={{
+        ...baseTemplate.files,
+        ...files,
+      }}
+      customSetup={{
+        dependencies: baseTemplate.dependencies,
+        devDependencies: baseTemplate.devDependencies,
+      }}
+      options={{
+        recompileDelay: 300,
+        initMode: 'user-visible',
+        initModeObserverOptions: { rootMargin: '1400px 0px' },
+        bundlerURL: 'https://sandpack-bundler.codesandbox.io/',
+        logLevel: SandpackLogLevel.None,
+      }}
+    >
+      <CustomPreset />
+    </SandpackProvider>
+  );
+}

docs/src/components/Sandpack/baseTemplate.ts

@@ -0,0 +1,9 @@
+export const baseTemplate = {
+  files: {
+    'index.ts': ``,
+  },
+  dependencies: {
+    'es-hangul': 'latest',
+  },
+  devDependencies: {},
+};

docs/src/components/Sandpack/index.ts

@@ -0,0 +1 @@
+export { Sandpack } from './Sandpack';

docs/src/pages/_document.tsx

@@ -1,3 +1,4 @@
+import { getSandpackCssText } from '@codesandbox/sandpack-react';
 import { Html, Head, Main, NextScript } from 'next/document';
 
 export default function Document() {
@@ -6,6 +7,7 @@ export default function Document() {
       <Head>
         <link rel="stylesheet" href="https://static.toss.im/tps/main.css" />
         <link rel="stylesheet" href="https://static.toss.im/tps/others.css" />
+        <style dangerouslySetInnerHTML={{ __html: getSandpackCssText() }} id="sandpack" key="sandpack-css" />
       </Head>
       <body>
         <Main />

docs/src/pages/docs/api/choseongIncludes.en.mdx

@@ -1,4 +1,4 @@
-import { ChoseongIncludesDemo } from '@/components/demo/choseong-includes-demo';
+import { Sandpack } from '@/components/Sandpack';
 
 # choseongIncludes
 
@@ -24,4 +24,12 @@ choseongIncludes('프론트엔드', '푸롴트'); // false
 
 <br />
 
-<ChoseongIncludesDemo />
+<Sandpack>
+
+```ts index.ts
+import { choseongIncludes } from 'es-hangul';
+
+console.log(choseongIncludes('프론트엔드', 'ㅍㄹㅌ'));
+```
+
+</Sandpack>

docs/src/pages/docs/api/choseongIncludes.ko.mdx

@@ -1,4 +1,4 @@
-import { ChoseongIncludesDemo } from '@/components/demo/choseong-includes-demo';
+import { Sandpack } from '@/components/Sandpack';
 
 # choseongIncludes
 
@@ -24,4 +24,12 @@ choseongIncludes('프론트엔드', '푸롴트'); // false
 
 <br />
 
-<ChoseongIncludesDemo />
+<Sandpack>
+
+```ts index.ts
+import { choseongIncludes } from 'es-hangul';
+
+console.log(choseongIncludes('프론트엔드', 'ㅍㄹㅌ'));
+```
+
+</Sandpack>

docs/src/pages/docs/api/chosungIncludes.en.mdx

@@ -1,4 +1,4 @@
-import { ChoseongIncludesDemo } from '@/components/demo/choseong-includes-demo';
+import { Sandpack } from '@/components/Sandpack';
 
 # chosungIncludes (deprecated, Please use choseongIncludes)
 
@@ -24,4 +24,12 @@ chosungIncludes('프론트엔드', '푸롴트'); // false
 
 <br />
 
-<ChoseongIncludesDemo />
+<Sandpack>
+
+```ts index.ts
+import { choseongIncludes } from 'es-hangul';
+
+console.log(choseongIncludes('프론트엔드', 'ㅍㄹㅌ'));
+```
+
+</Sandpack>

docs/src/pages/docs/api/chosungIncludes.ko.mdx

@@ -1,4 +1,4 @@
-import { ChoseongIncludesDemo } from '@/components/demo/choseong-includes-demo';
+import { Sandpack } from '@/components/Sandpack';
 
 # chosungIncludes (deprecated, choseongIncludes를 사용해주세요)
 
@@ -24,4 +24,12 @@ chosungIncludes('프론트엔드', '푸롴트'); // false
 
 <br />
 
-<ChoseongIncludesDemo />
+<Sandpack>
+
+```ts index.ts
+import { choseongIncludes } from 'es-hangul';
+
+console.log(choseongIncludes('프론트엔드', 'ㅍㄹㅌ'));
+```
+
+</Sandpack>

docs/tailwind.config.ts

@@ -13,6 +13,12 @@ const config: Config = {
         'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
         'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
       },
+      keyframes: {
+        'cube-rotate': {
+          '0%': { transform: 'rotateX(-25.5deg) rotateY(45deg)' },
+          '100%': { transform: 'rotateX(-25.5deg) rotateY(405deg)' },
+        },
+      },
     },
   },
   plugins: [],