diff --git a/.changeset/silly-lamps-camp.md b/.changeset/silly-lamps-camp.md new file mode 100644 index 00000000..e3f5e3d5 --- /dev/null +++ b/.changeset/silly-lamps-camp.md @@ -0,0 +1,5 @@ +--- +'docs': patch +--- + +feat: 문서에서 바로 실행해볼 수 있는 Sandpack MDX 컴포넌트를 구현합니다. diff --git a/cspell.json b/cspell.json index 576e697d..cf069aff 100644 --- a/cspell.json +++ b/cspell.json @@ -1,3 +1,3 @@ { - "words": ["choseong", "jongseong", "jungseong", "Nextra"] + "words": ["choseong", "jongseong", "jungseong", "josa", "nextra", "sandpack"] } diff --git a/docs/next.config.js b/docs/next.config.js index 24aeb7c5..a4922d5a 100644 --- a/docs/next.config.js +++ b/docs/next.config.js @@ -3,6 +3,10 @@ const withNextra = require('nextra')({ theme: 'nextra-theme-docs', themeConfig: './theme.config.tsx', defaultShowCopyCode: true, + mdxOptions: { + // eslint-disable-next-line @typescript-eslint/no-var-requires + remarkPlugins: [require('remark-sandpack').remarkSandpack], + }, }); /** @type {import('next').NextConfig} */ diff --git a/docs/package.json b/docs/package.json index b64b32fc..19ac1c09 100644 --- a/docs/package.json +++ b/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", diff --git a/docs/src/components/Sandpack/CustomPreset.tsx b/docs/src/components/Sandpack/CustomPreset.tsx new file mode 100644 index 00000000..d445027b --- /dev/null +++ b/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 ( + + + : } + /> + + ); +} diff --git a/docs/src/components/Sandpack/Loading.tsx b/docs/src/components/Sandpack/Loading.tsx new file mode 100644 index 00000000..8d535cb1 --- /dev/null +++ b/docs/src/components/Sandpack/Loading.tsx @@ -0,0 +1,37 @@ +export function Loading({ className, ...props }: React.HTMLAttributes) { + return ( +
+
+
+
+
+
+
+
+
+
+
+
+ ); +} diff --git a/docs/src/components/Sandpack/RefreshButton.tsx b/docs/src/components/Sandpack/RefreshButton.tsx new file mode 100644 index 00000000..8c5c03e4 --- /dev/null +++ b/docs/src/components/Sandpack/RefreshButton.tsx @@ -0,0 +1,9 @@ +import { RefreshIcon, RoundedButton } from '@codesandbox/sandpack-react'; + +export function RefreshButton({ onRefresh }: { onRefresh: () => void }) { + return ( + + + + ); +} diff --git a/docs/src/components/Sandpack/Sandpack.tsx b/docs/src/components/Sandpack/Sandpack.tsx new file mode 100644 index 00000000..55f20d77 --- /dev/null +++ b/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 ( + + + + ); +} diff --git a/docs/src/components/Sandpack/baseTemplate.ts b/docs/src/components/Sandpack/baseTemplate.ts new file mode 100644 index 00000000..a6a90461 --- /dev/null +++ b/docs/src/components/Sandpack/baseTemplate.ts @@ -0,0 +1,9 @@ +export const baseTemplate = { + files: { + 'index.ts': ``, + }, + dependencies: { + 'es-hangul': 'latest', + }, + devDependencies: {}, +}; diff --git a/docs/src/components/Sandpack/index.ts b/docs/src/components/Sandpack/index.ts new file mode 100644 index 00000000..506cdd17 --- /dev/null +++ b/docs/src/components/Sandpack/index.ts @@ -0,0 +1 @@ +export { Sandpack } from './Sandpack'; diff --git a/docs/src/pages/_document.tsx b/docs/src/pages/_document.tsx index 74aa36b4..f464e3e2 100644 --- a/docs/src/pages/_document.tsx +++ b/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() { +