atomsystem 0.4.3 → 0.5.0

package/README.md

@@ -1,7 +1,7 @@
 # AtomSystem (`atomsystem`)
 
 > **Universal Design Token & Agent-Driven UI System**  
-> React, Vue, Svelte, Pure HTML 어디서든 즉시 동작하는 W3C DTCG 호환 디자인 시스템
+> React, Vue, Svelte, Pure HTML 어디서든 즉시 동작하는 W3C DTCG 호환 디자인 시스템 & 로컬 토큰 스튜디오
 
 [![npm version](https://img.shields.io/npm/v/atomsystem.svg)](https://www.npmjs.com/package/atomsystem)
 [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
@@ -20,21 +20,70 @@ npm install atomsystem
 
 ### 2. 프로젝트 초기화 (CLI)
 
-프로젝트 루트에서 `init` 명령을 실행하면 AI Agent 전용 스킬, 디자인 가이드, UX 패턴, 토큰 규격 파일이 한 번에 자동 세팅됩니다.
+프로젝트 루트에서 `init` 명령을 실행하면 AI Agent 전용 가이드라인, 4단계 레고 조립 규격, W3C DTCG 토큰 파일이 한 번에 자동 세팅됩니다.
 
 ```bash
 npx atomsystem init
 ```
 
 생성되는 파일:
-- `.agents/skills/atomsystem/SKILL.md`: AI Coding Agent(Antigravity, Cursor, Claude 등) 연동 스킬
-- `atom.design.md`: 브랜드 및 타이포그래피, 컬러, 컴포넌트 디자인 가이드
-- `atom.uxPattern.md`: 폼 검증, 모달 인터랙션, 로딩 상태 등 표준 UX 패턴 가이드
-- `tokens/token.json`: W3C DTCG 표준 규격 디자인 토큰
+- `AGENTS.md` / `CLAUDE.md` / `.cursorrules`: 범용 AI 어시스턴트(Antigravity, Cursor, Claude Code, Copilot 등) 공통 지침
+- `.agents/skills/atomsystem/SKILL.md`: AI Agent 자동 분석 및 토큰 구축 스킬
+- `atom.design.md` & `tokens/token.json`: 브랜드, 타이포그래피, 컬러, 여백, 곡률 W3C DTCG 표준 명세
+- `atom.components.md`: 원자/분자 UI 컴포넌트 명세
+- `atom.blocks.md`: 실시간 차트, AI 챗 등 완성형 블록 명세
+- `atom.uxPattern.md`: 폼 검증, 결제 플로우, 로딩 상태 등 표준 UX 패턴 가이드
+- `css/atom-ui.css`: 0KB 제로 런타임 시맨틱 순수 CSS
 
 ---
 
-## 🎨 사용 방법 (Usage)
+## 🎨 로컬 토큰 스튜디오 (Local Token Studio GUI)
+
+설치 후 별도의 설정 없이 **로컬에서 직접 디자인 토큰을 변경하고 스타일을 실시간 재컴파일**할 수 있는 내장 웹 GUI 도구를 제공합니다.
+
+```bash
+# 로컬 토큰 스튜디오 GUI 실행 (기본 포트: 4000)
+npx atomsystem studio
+
+# 또는 다른 포트로 실행
+npx atomsystem studio --port=5000
+```
+
+1. **브라우저 접속**: `http://localhost:4000`에 접속합니다.
+2. **시각적 편집**: 컬러 피커 및 셀렉터를 통해 브랜드 색상, 서피스 배경, 모서리 곡률(Radius)을 직접 변경합니다.
+3. **원클릭 저장 & 0ms 자동 컴파일**:
+   - `tokens/token.json`에 최신 W3C 토큰이 저장됩니다.
+   - 동시에 `css/atom-ui.css`가 제로 런타임 CSS 변수로 자동 재컴파일됩니다.
+
+```bash
+# 터미널에서 CLI로 직접 CSS 재컴파일 시
+npx atomsystem build:tokens
+```
+
+---
+
+## 📦 컴포넌트 & 블록 추가 (CLI Add)
+
+원하는 컴포넌트나 블록을 프로젝트에 소스 코드로 직접 내려받아 커스텀할 수 있습니다 (Component-First 원칙 보장).
+
+```bash
+# 지원 항목 목록 확인
+npx atomsystem list
+
+# 개별 컴포넌트 추가
+npx atomsystem add button
+npx atomsystem add container
+npx atomsystem add layout
+
+# 완성형 디자인 블록 추가 (필요 컴포넌트 자동 의존성 복사)
+npx atomsystem add realtime-chart
+npx atomsystem add interactive-chat
+npx atomsystem add pricing-table
+```
+
+---
+
+## 💻 사용 방법 (Usage)
 
 ### 1) CSS 스타일 불러오기
 
@@ -52,11 +101,28 @@ import 'atomsystem/css/atom-ui.css';
 
 ---
 
-### 2) UI 컴포넌트 & 시멘틱 클래스 사용
+### 2) UI 컴포넌트 & 레이아웃 사용
 
-AtomSystem의 모든 컴포넌트는 프레임워크에 구애받지 않고 클래스명만으로 즉시 동작합니다.
+프레임워크에 구애받지 않고 클래스명만으로 즉시 동작하거나, React 컴포넌트를 import하여 사용할 수 있습니다.
 
-#### 시멘틱 클래스 (HTML / JSX / Vue 공통)
+#### React 컴포넌트 Import
+```tsx
+import { Button, Card, Badge, Container, Layout, Stack, Grid } from 'atomsystem';
+
+export function Example() {
+  return (
+    <Container size="xl">
+      <Card variant="interactive">
+        <Badge variant="primary">New</Badge>
+        <h3>대시보드</h3>
+        <Button variant="primary" size="md">시작하기</Button>
+      </Card>
+    </Container>
+  );
+}
+```
+
+#### 순수 시맨틱 CSS 클래스 (HTML / Vue / Vanilla JS)
 ```html
 <!-- 버튼 -->
 <button class="atom-btn atom-btn-primary">확인</button>
@@ -67,64 +133,57 @@ AtomSystem의 모든 컴포넌트는 프레임워크에 구애받지 않고 클
   <h2 class="atom-title-2">계좌 송금</h2>
   <p class="atom-body-2">수수료 없는 간편 송금 서비스</p>
 </div>
-
-<!-- 인풋 -->
-<div class="atom-input-group">
-  <label class="atom-label">이메일</label>
-  <input class="atom-input" type="email" placeholder="user@example.com" />
-</div>
 ```
 
-#### React 컴포넌트 직접 Import
+---
+
+### 3) 3,800+ 무료 오픈소스 아이콘 시스템 연동
+
+Lucide 아이콘 풀세트(3,875개)를 지원하며, 시스템 및 테마 에디터와 완벽하게 연동됩니다.
+
 ```tsx
-import { Button } from 'atomsystem/components/Button';
-import { Card } from 'atomsystem/components/Card';
-import { Badge } from 'atomsystem/components/Badge';
+import { Sparkles, Heart, Search } from 'lucide-react';
 
-export function Example() {
+export function IconWidget() {
   return (
-    <Card variant="interactive">
-      <Badge variant="primary">New</Badge>
-      <h3>대시보드</h3>
-      <Button variant="primary" size="md">시작하기</Button>
-    </Card>
+    <button className="inline-flex items-center gap-2 px-3 py-1.5 rounded-(--radius) bg-(--bg-secondary) text-(--text-primary)">
+      <Sparkles className="w-4 h-4 text-(--accent-primary)" />
+      <span>AI 추천</span>
+    </button>
   );
 }
 ```
 
 ---
 
-### 3) 디자인 토큰 & 테마 엔진 활용 (JS / TS)
-
-W3C DTCG 규격 JSON 및 토큰 메타데이터를 직접 import하여 사용할 수 있습니다.
-
-```typescript
-import { 
-  BASE_COLOR_TOKENS, 
-  TYPOGRAPHY_TOKENS, 
-  RADIUS_TOKENS,
-  generateCssVariables 
-} from 'atomsystem';
+### 4) 다국어(i18n) 지원
 
-// W3C 표준 JSON 직접 가져오기
-import tokenJson from 'atomsystem/token.json';
-
-// 동적 CSS Custom Properties 생성
-const cssVars = generateCssVariables();
-```
+한국어(`ko`), 영어(`en`), 일본어(`ja`) 3개 국어를 기본 지원하며 헤더 스위처를 통해 즉시 전환할 수 있습니다.
 
 ---
 
-### 4) AI Agent 연동 (Agent-Driven UI)
+### 5) AI Agent 연동 (Agent-Driven UI)
 
-`npx atomsystem init`으로 초기화된 프로젝트에서는 AI 코딩 어시스턴트(Antigravity, Cursor, GitHub Copilot 등)에게 마크다운 가이드 기반으로 작업 지시를 내릴 수 있습니다:
+`npx atomsystem init`으로 초기화된 프로젝트에서는 AI 코딩 어시스턴트(Antigravity, Cursor, Claude Code 등)에게 말로만 작업 지시를 내릴 수 있습니다:
 
 ```text
-"atom.design.md 가이드의 컬러와 atom.uxPattern.md의 모달 패턴을 준수해서 
-회원가입 완료 모달 컴포넌트를 만들어줘."
+"atom.design.md의 색상 토큰과 atom.blocks.md의 realtime-chart 구조를 참고해서 
+주식 시세 대시보드 화면을 만들어줘."
 ```
 
-AI Agent는 자동으로 디자인 토큰과 UX 표준을 적용하여 일관된 고품질 UI 코드를 생성합니다.
+AI Agent는 자동으로 디자인 토큰과 컴포넌트 우선(Component-First) 레고 조립 파이프라인을 준수하여 일관된 고품질 UI 코드를 생성합니다.
+
+---
+
+## 🛠️ CLI 명령어 요약
+
+| 명령어 | 설명 |
+| :--- | :--- |
+| `npx atomsystem init` | AI 지침서, 4단계 규격서, W3C 토큰, CSS 초기화 |
+| `npx atomsystem studio` | 로컬 웹 토큰 스튜디오(GUI) 실행 (`http://localhost:4000`) |
+| `npx atomsystem build:tokens` | `tokens/token.json`을 `css/atom-ui.css`로 일괄 재컴파일 |
+| `npx atomsystem add <name>` | 컴포넌트(`button`, `container`, `layout` 등) 또는 블록 다운로드 |
+| `npx atomsystem list` | 추가 가능한 모든 컴포넌트 및 디자인 블록 목록 출력 |
 
 ---
 
@@ -132,10 +191,11 @@ AI Agent는 자동으로 디자인 토큰과 UX 표준을 적용하여 일관된
 
 | 경로 | 설명 |
 | :--- | :--- |
-| `atomsystem` | 토큰 데이터 모델, 테마 엔진, 색상/타이포 유틸리티 |
-| `atomsystem/css/atom-ui.css` | 전역 스타일 및 시멘틱 UI 클래스 (`.atom-btn`, `.atom-card` 등) |
-| `atomsystem/components/*` | React UI 컴포넌트 풀세트 (`Button`, `Input`, `Card`, `Badge`, `Modal`, `Calendar`, `Select`, `Accordion`, `Radio`, `Slider`, `Avatar`, `Progress`, `Skeleton`, `Breadcrumb`, `Separator`, `Textarea`, `Pagination`, `Tooltip`) |
-| `atomsystem/token.json` | W3C DTCG 포맷 단일 진실 공급원 토큰 파일 |
+| `atomsystem` | 토큰 데이터 모델, 컴포넌트 스펙, 테마 엔진 |
+| `atomsystem/css/atom-ui.css` | 전역 스타일 및 제로 런타임 시맨틱 UI 클래스 |
+| `atomsystem/components/*` | React UI 컴포넌트 (`Button`, `Card`, `Input`, `Container`, `Layout` 등) |
+| `atomsystem/blocks/*` | 레고 조합 완성형 블록 (`RealtimeChart`, `InteractiveChat` 등) |
+| `atomsystem/token.json` | W3C DTCG 포맷 단일 진실 공급원(SSOT) 토큰 파일 |
 | `atomsystem/design.md` | 마크다운 기반 디자인 시스템 가이드 규격 |
 | `atomsystem/uxPattern.md` | 마크다운 기반 UX 인터랙션 패턴 가이드 |
 | `atomsystem/skill` | AI Coding Agent 자동화 스킬 정의서 |

package/components/blocks/BlockDetailPageContent.tsx

@@ -0,0 +1,337 @@
+'use client';
+
+import React, { useState } from 'react';
+import Link from 'next/link';
+import { Header } from '@/components/Header';
+import { BlocksSidebar } from '@/components/blocks/BlocksSidebar';
+import { BlockItem } from '@/lib/data/blocks';
+import {
+  RealtimeChartBlock,
+  InteractiveChatBlock,
+  CardListBlock,
+  SliderShowcaseBlock,
+  PricingPlanBlock,
+  MetricStatsBlock,
+  FileExplorerBlock,
+} from '@/components/blocks';
+import { Button } from '@/components/ui';
+import { CodeHighlight } from '@/components/common/CodeHighlight';
+import {
+  Terminal,
+  Copy,
+  Check,
+  Monitor,
+  Tablet,
+  Smartphone,
+  Code2,
+  Sparkles,
+  Layers,
+  ArrowLeft,
+  ChevronRight,
+  Sliders,
+  ExternalLink,
+} from 'lucide-react';
+
+interface BlockDetailPageContentProps {
+  block: BlockItem;
+}
+
+export function BlockDetailPageContent({ block }: BlockDetailPageContentProps) {
+  const [viewport, setViewport] = useState<'desktop' | 'tablet' | 'mobile'>('desktop');
+  const [codeTab, setCodeTab] = useState<'react' | 'html'>('react');
+  const [copiedCode, setCopiedCode] = useState(false);
+  const [copiedCli, setCopiedCli] = useState(false);
+
+  const cliCommand = `npx atomsystem add ${block.id}`;
+
+  const handleCopyCode = () => {
+    const code = codeTab === 'react' ? block.codeSnippets.react : block.codeSnippets.htmlCss;
+    navigator.clipboard.writeText(code);
+    setCopiedCode(true);
+    setTimeout(() => setCopiedCode(false), 2000);
+  };
+
+  const handleCopyCli = () => {
+    navigator.clipboard.writeText(cliCommand);
+    setCopiedCli(true);
+    setTimeout(() => setCopiedCli(false), 2000);
+  };
+
+  const getViewportMaxWidth = () => {
+    switch (viewport) {
+      case 'mobile':
+        return 'max-w-[390px]';
+      case 'tablet':
+        return 'max-w-[768px]';
+      default:
+        return 'max-w-full';
+    }
+  };
+
+  const renderBlock = () => {
+    switch (block.id) {
+      case 'realtime-chart':
+        return <RealtimeChartBlock />;
+      case 'interactive-chat':
+        return <InteractiveChatBlock />;
+      case 'card-list':
+        return <CardListBlock />;
+      case 'interactive-slider':
+        return <SliderShowcaseBlock />;
+      case 'pricing-table':
+        return <PricingPlanBlock />;
+      case 'metric-stats':
+        return <MetricStatsBlock />;
+      case 'file-explorer':
+        return <FileExplorerBlock />;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-(--bg-primary) text-(--text-primary) flex flex-col font-sans transition-colors">
+      <Header />
+
+      <div className="flex-1 flex max-w-[1600px] w-full mx-auto overflow-hidden">
+        {/* 1. Left Docs Sidebar */}
+        <div className="hidden lg:block h-[calc(100vh-45px)] sticky top-11">
+          <BlocksSidebar activeId={block.id} />
+        </div>
+
+        {/* 2. Main Content Area */}
+        <main className="flex-1 p-5 sm:p-8 lg:p-10 overflow-y-auto max-w-5xl">
+          {/* Breadcrumb */}
+          <div className="flex items-center gap-1.5 text-xs text-(--text-secondary) mb-4">
+            <Link href="/blocks" className="hover:text-(--text-primary) transition-colors">
+              Blocks
+            </Link>
+            <ChevronRight className="w-3 h-3 opacity-40" />
+            <span className="capitalize">{block.category}</span>
+            <ChevronRight className="w-3 h-3 opacity-40" />
+            <span className="text-(--text-primary) font-semibold">{block.id}</span>
+          </div>
+
+          {/* Header & Meta */}
+          <div className="space-y-3 mb-8">
+            <div className="flex flex-wrap items-center gap-2">
+              <h1 className="text-2xl sm:text-3xl font-bold tracking-tight text-(--text-primary)">
+                {block.title}
+              </h1>
+              <span className="font-mono text-xs px-2 py-0.5 rounded-(--radius-sm) bg-(--bg-secondary) text-(--text-secondary) border border-(--border-subtle)">
+                {block.badge}
+              </span>
+            </div>
+            <p className="text-sm sm:text-base text-(--text-secondary) leading-relaxed">
+              {block.summary}
+            </p>
+
+            {/* CLI Install Box */}
+            <div className="flex items-center gap-2 pt-2">
+              <div className="flex items-center gap-2 px-3 py-1.5 rounded-(--radius-sm) border border-(--border-subtle) bg-(--bg-secondary)/40 font-mono text-xs text-(--text-primary)">
+                <Terminal className="w-3.5 h-3.5 text-(--accent-primary)" />
+                <span>{cliCommand}</span>
+              </div>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handleCopyCli}
+                className="text-xs flex items-center gap-1"
+              >
+                {copiedCli ? <Check className="w-3.5 h-3.5 text-emerald-600" /> : <Copy className="w-3.5 h-3.5" />}
+                <span>{copiedCli ? '복사됨' : '복사'}</span>
+              </Button>
+            </div>
+          </div>
+
+          {/* Live Interactive Preview Container */}
+          <section className="space-y-3 mb-10">
+            <div className="flex items-center justify-between">
+              <h2 className="text-xs font-semibold uppercase tracking-wider text-(--text-secondary)">
+                라이브 인터랙티브 프리뷰
+              </h2>
+
+              {/* Viewport Resizer Controls */}
+              <div className="hidden sm:flex items-center gap-0.5 bg-(--bg-secondary) p-0.5 rounded-(--radius-sm) border border-(--border-subtle)">
+                <button
+                  onClick={() => setViewport('desktop')}
+                  className={`p-1 rounded-(--radius-sm) transition-colors ${
+                    viewport === 'desktop'
+                      ? 'bg-(--bg-primary) text-(--text-primary)'
+                      : 'text-(--text-secondary) hover:text-(--text-primary)'
+                  }`}
+                  title="Desktop 100%"
+                >
+                  <Monitor className="w-3.5 h-3.5" />
+                </button>
+                <button
+                  onClick={() => setViewport('tablet')}
+                  className={`p-1 rounded-(--radius-sm) transition-colors ${
+                    viewport === 'tablet'
+                      ? 'bg-(--bg-primary) text-(--text-primary)'
+                      : 'text-(--text-secondary) hover:text-(--text-primary)'
+                  }`}
+                  title="Tablet 768px"
+                >
+                  <Tablet className="w-3.5 h-3.5" />
+                </button>
+                <button
+                  onClick={() => setViewport('mobile')}
+                  className={`p-1 rounded-(--radius-sm) transition-colors ${
+                    viewport === 'mobile'
+                      ? 'bg-(--bg-primary) text-(--text-primary)'
+                      : 'text-(--text-secondary) hover:text-(--text-primary)'
+                  }`}
+                  title="Mobile 390px"
+                >
+                  <Smartphone className="w-3.5 h-3.5" />
+                </button>
+              </div>
+            </div>
+
+            {/* Clean White Preview Box */}
+            <div className="p-4 sm:p-6 rounded-(--radius) bg-(--bg-primary) border border-(--border-subtle) flex justify-center items-center">
+              <div className={`w-full transition-all duration-300 mx-auto ${getViewportMaxWidth()}`}>
+                {renderBlock()}
+              </div>
+            </div>
+          </section>
+
+          {/* Lego Assembly Pipeline: Components & Tokens & Template */}
+          <section className="space-y-3 mb-10">
+            <h2 className="text-xs font-semibold uppercase tracking-wider text-(--text-secondary)">
+              레고 조립 구조 (Token → Component → Block → Template)
+            </h2>
+
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-3 text-xs">
+              {/* 1. Tokens Used */}
+              <div className="p-4 rounded-(--radius) border border-(--border-subtle) bg-(--bg-primary) flex flex-col justify-between">
+                <div>
+                  <div className="font-semibold text-(--text-primary) mb-0.5">
+                    주입된 토큰 (Tokens)
+                  </div>
+                  <p className="text-[11px] text-(--text-secondary) mb-2.5">블록의 곡률, 간격, 컬러의 원천</p>
+                  <div className="flex flex-wrap gap-1">
+                    {block.tokensUsed.map((token) => (
+                      <span key={token} className="font-mono text-[11px] px-1.5 py-0.5 rounded-(--radius-sm) bg-(--bg-secondary) text-(--text-secondary)">
+                        {token}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              </div>
+
+              {/* 2. Components Used */}
+              <div className="p-4 rounded-(--radius) border border-(--border-subtle) bg-(--bg-primary) flex flex-col justify-between">
+                <div>
+                  <div className="font-semibold text-(--text-primary) mb-0.5">
+                    조합된 컴포넌트 (Components)
+                  </div>
+                  <p className="text-[11px] text-(--text-secondary) mb-2.5">블록을 구성하는 기초 레고 피스</p>
+                  <div className="flex flex-wrap gap-1.5">
+                    {block.componentsUsed.map((comp) => (
+                      <Link
+                        key={comp}
+                        href={`/components/${comp.toLowerCase()}`}
+                        className="font-mono text-xs font-medium text-(--text-primary) hover:underline"
+                      >
+                        .{comp}
+                      </Link>
+                    ))}
+                  </div>
+                </div>
+              </div>
+
+              {/* 3. Template Usage */}
+              <div className="p-4 rounded-(--radius) border border-(--border-subtle) bg-(--bg-primary) flex flex-col justify-between">
+                <div>
+                  <div className="font-semibold text-(--text-primary) mb-0.5">
+                    결합 템플릿 (Template)
+                  </div>
+                  <p className="text-[11px] text-(--text-secondary) mb-2.5">이 블록이 꽂히는 실제 화면</p>
+                  <div className="text-xs text-(--text-secondary) leading-relaxed">
+                    {block.templateUsage}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          {/* Features & Key Specs Section */}
+          <section className="space-y-3 mb-10">
+            <h2 className="text-xs font-semibold uppercase tracking-wider text-(--text-secondary)">
+              핵심 설계 기능 및 접근성 (Features & A11y)
+            </h2>
+            <ul className="space-y-1.5 p-4 rounded-(--radius) border border-(--border-subtle) bg-(--bg-primary) text-xs text-(--text-secondary)">
+              {block.features.map((f, i) => (
+                <li key={i} className="flex items-start gap-2">
+                  <span className="text-(--text-muted) select-none">•</span>
+                  <span className="leading-relaxed">{f}</span>
+                </li>
+              ))}
+            </ul>
+          </section>
+
+          {/* Code Snippets Section */}
+          <section className="space-y-3 mb-12">
+            <div className="flex items-center justify-between">
+              <h2 className="text-xs font-semibold uppercase tracking-wider text-(--text-secondary)">
+                소스 코드 (Installation & Usage)
+              </h2>
+
+              <div className="flex items-center gap-2">
+                <div className="flex rounded-(--radius-sm) border border-(--border-subtle) p-0.5 bg-(--bg-secondary) text-xs">
+                <Button
+                  variant={codeTab === 'react' ? 'primary' : 'ghost'}
+                  size="sm"
+                  onClick={() => setCodeTab('react')}
+                  className="px-2.5 py-1 text-xs"
+                >
+                  React / Next.js
+                </Button>
+                <Button
+                  variant={codeTab === 'html' ? 'primary' : 'ghost'}
+                  size="sm"
+                  onClick={() => setCodeTab('html')}
+                  className="px-2.5 py-1 text-xs"
+                >
+                  HTML & CSS
+                </Button>
+                </div>
+
+                <button
+                  onClick={handleCopyCode}
+                  className="flex items-center gap-1 px-2.5 py-1 rounded-(--radius-sm) text-xs font-medium bg-(--bg-primary) hover:bg-(--bg-secondary) text-(--text-primary) border border-(--border-subtle) transition-colors"
+                >
+                  {copiedCode ? (
+                    <>
+                      <Check className="w-3.5 h-3.5 text-emerald-600" />
+                      <span className="text-emerald-600 font-semibold">복사됨</span>
+                    </>
+                  ) : (
+                    <>
+                      <Copy className="w-3.5 h-3.5 text-(--text-secondary)" />
+                      <span>코드 복사</span>
+                    </>
+                  )}
+                </button>
+              </div>
+            </div>
+
+            <div className="rounded-(--radius) border border-(--border-subtle) bg-(--bg-primary) overflow-hidden">
+              <div className="px-4 py-2 border-b border-(--border-subtle) bg-(--bg-secondary)/40 text-xs font-mono text-(--text-secondary) flex justify-between items-center">
+                <span>{codeTab === 'react' ? `${block.id}.tsx` : `${block.id}.html`}</span>
+                <span>Zero-Runtime CSS Tokens</span>
+              </div>
+              <CodeHighlight
+                code={codeTab === 'react' ? block.codeSnippets.react : block.codeSnippets.htmlCss}
+                language={codeTab === 'react' ? 'tsx' : 'html'}
+                className="p-4 max-h-[460px]"
+              />
+            </div>
+          </section>
+        </main>
+      </div>
+    </div>
+  );
+}