Sandpack 코드 블록 미리보기

2026.10.04

Sandpack 미리보기

캡션이 없는 평범한 코드 블록은 지금처럼 하이라이트만 됩니다.

typescript

const plain = true;

캡션에 sandbox 라고 적은 tsx 블록. 두 파일(App.tsx, Button.tsx)로 나뉘어 있습니다. 코드를 고쳐 보세요.

typescript

import { useState } from "react";
import { Button } from "./Button";

export default function App() {
  const [count, setCount] = useState(0);
  return (
    <main style={{ fontFamily: "sans-serif", padding: 16 }}>
      <h1>안녕, 샌드박스</h1>
      <p>눌린 횟수: {count}</p>
      <Button onClick={() => setCount((c) => c + 1)}>눌러 보세요</Button>
    </main>
  );
}
// @file /Button.tsx
export function Button({ onClick, children }: { onClick: () => void; children: React.ReactNode }) {
  return <button onClick={onClick} style={{ padding: "8px 12px" }}>{children}</button>;
}

html 언어는 static 템플릿으로 뜹니다.

html

<style>body{font-family:sans-serif;padding:16px} .box{width:80px;height:80px;background:#1d4ed8;border-radius:12px;animation:spin 2s linear infinite} @keyframes spin{to{transform:rotate(360deg)}}</style>
<h1>정적 HTML 템플릿</h1>
<div class="box"></div>

모르는 템플릿 이름을 적으면 안내문과 함께 코드만 보여 줍니다.

알 수 없는 샌드박스 템플릿 "angular". 쓸 수 있는 값: react, react-ts, vanilla, vanilla-ts, static

typescript

const x = 1;