atomsystem 0.4.1 → 0.5.0

package/components/blocks/FileExplorerBlock.tsx

@@ -0,0 +1,203 @@
+'use client';
+
+import React, { useState } from 'react';
+import { Card, Button, Badge } from '@/components/ui';
+import {
+  Folder,
+  FolderOpen,
+  FileCode,
+  FileText,
+  FileJson,
+  ChevronRight,
+  ChevronDown,
+  Copy,
+  Check,
+  File,
+} from 'lucide-react';
+
+interface FileNode {
+  id: string;
+  name: string;
+  type: 'folder' | 'file';
+  extension?: 'tsx' | 'ts' | 'json' | 'css' | 'svg' | 'md';
+  size?: string;
+  updatedAt: string;
+  content?: string;
+  children?: FileNode[];
+}
+
+const FILE_TREE: FileNode[] = [
+  {
+    id: 'f-tokens',
+    name: 'tokens',
+    type: 'folder',
+    updatedAt: '2026.11.11',
+    children: [
+      {
+        id: 'f-color',
+        name: 'color.json',
+        type: 'file',
+        extension: 'json',
+        size: '1.8 KB',
+        updatedAt: '2026.11.11 10:20',
+        content: `{\n  "color": {\n    "primary": { "value": "var(--accent-primary)" },\n    "neutral": { "value": "var(--bg-primary)" }\n  }\n}`,
+      },
+      {
+        id: 'f-space',
+        name: 'spacing.json',
+        type: 'file',
+        extension: 'json',
+        size: '1.2 KB',
+        updatedAt: '2026.11.11 09:15',
+        content: `{\n  "spacing": {\n    "1": { "value": "4px" },\n    "2": { "value": "8px" },\n    "4": { "value": "16px" }\n  }\n}`,
+      },
+    ],
+  },
+  {
+    id: 'f-components',
+    name: 'components',
+    type: 'folder',
+    updatedAt: '2026.11.11',
+    children: [
+      {
+        id: 'f-btn',
+        name: 'Button.tsx',
+        type: 'file',
+        extension: 'tsx',
+        size: '3.4 KB',
+        updatedAt: '2026.11.11 09:30',
+        content: `export function Button({ children, variant = 'primary' }) {\n  return (\n    <button className="px-4 py-2 rounded-(--radius) bg-(--accent-primary) text-white font-medium">\n      {children}\n    </button>\n  );\n}`,
+      },
+      {
+        id: 'f-card',
+        name: 'Card.tsx',
+        type: 'file',
+        extension: 'tsx',
+        size: '4.2 KB',
+        updatedAt: '2026.11.10 16:20',
+        content: `export function Card({ title, children }) {\n  return (\n    <div className="p-4 rounded-(--radius) border border-(--border-subtle) bg-(--bg-primary)">\n      <h3>{title}</h3>\n      {children}\n    </div>\n  );\n}`,
+      },
+    ],
+  },
+];
+
+export function FileExplorerBlock() {
+  const [openFolders, setOpenFolders] = useState<Record<string, boolean>>({
+    'f-tokens': true,
+    'f-components': true,
+  });
+
+  const [selectedFile, setSelectedFile] = useState<FileNode>(
+    FILE_TREE[0].children![0]
+  );
+  const [copied, setCopied] = useState(false);
+
+  const toggleFolder = (folderId: string) => {
+    setOpenFolders((prev) => ({ ...prev, [folderId]: !prev[folderId] }));
+  };
+
+  const getFileIcon = (ext?: string) => {
+    switch (ext) {
+      case 'tsx':
+      case 'ts':
+        return <FileCode className="w-3.5 h-3.5 text-blue-500" />;
+      case 'json':
+        return <FileJson className="w-3.5 h-3.5 text-amber-500" />;
+      case 'md':
+        return <FileText className="w-3.5 h-3.5 text-purple-500" />;
+      default:
+        return <File className="w-3.5 h-3.5 text-(--text-secondary)" />;
+    }
+  };
+
+  const handleCopy = () => {
+    if (selectedFile.content) {
+      navigator.clipboard.writeText(selectedFile.content);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
+  return (
+    <Card className="flex flex-col md:flex-row h-[380px] overflow-hidden transition-colors">
+      {/* 1. Left Tree Nav */}
+      <aside className="w-full md:w-56 border-r border-(--border-subtle) bg-(--bg-secondary)/20 p-3 overflow-y-auto shrink-0 space-y-1 text-xs">
+        <div className="text-[11px] font-mono text-(--text-secondary) uppercase tracking-wider px-2 py-1 mb-1">
+          Project Files
+        </div>
+        {FILE_TREE.map((node) => {
+          const isOpen = openFolders[node.id];
+          return (
+            <div key={node.id} className="space-y-0.5">
+              <button
+                onClick={() => toggleFolder(node.id)}
+                className="w-full flex items-center gap-1.5 px-2 py-1 rounded-(--radius-sm) text-(--text-secondary) hover:text-(--text-primary) hover:bg-(--bg-secondary) text-left transition-colors"
+              >
+                {isOpen ? (
+                  <ChevronDown className="w-3 h-3 text-(--text-secondary)" />
+                ) : (
+                  <ChevronRight className="w-3 h-3 text-(--text-secondary)" />
+                )}
+                {isOpen ? (
+                  <FolderOpen className="w-3.5 h-3.5 text-(--accent-primary)" />
+                ) : (
+                  <Folder className="w-3.5 h-3.5 text-(--text-secondary)" />
+                )}
+                <span className="font-medium truncate">{node.name}</span>
+              </button>
+
+              {isOpen && node.children && (
+                <div className="pl-4 space-y-0.5 border-l border-(--border-subtle) ml-3">
+                  {node.children.map((file) => {
+                    const isSelected = selectedFile?.id === file.id;
+                    return (
+                      <button
+                        key={file.id}
+                        onClick={() => setSelectedFile(file)}
+                        className={`w-full flex items-center gap-1.5 px-2 py-1 rounded-(--radius-sm) text-left transition-colors ${
+                          isSelected
+                            ? 'bg-(--accent-primary)/10 text-(--accent-primary) font-semibold'
+                            : 'text-(--text-secondary) hover:text-(--text-primary) hover:bg-(--bg-secondary)'
+                        }`}
+                      >
+                        {getFileIcon(file.extension)}
+                        <span className="truncate">{file.name}</span>
+                      </button>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </aside>
+
+      {/* 2. File Preview & Code Area composed with Button & Card */}
+      <main className="flex-1 flex flex-col bg-(--bg-primary) overflow-hidden">
+        <div className="px-4 py-2.5 border-b border-(--border-subtle) bg-(--bg-secondary)/30 flex items-center justify-between text-xs">
+          <div className="flex items-center gap-2">
+            {getFileIcon(selectedFile.extension)}
+            <span className="font-mono font-medium text-(--text-primary)">{selectedFile.name}</span>
+            <Badge variant="neutral" className="text-xs">
+              {selectedFile.size}
+            </Badge>
+          </div>
+
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleCopy}
+            className="text-xs py-1 px-2.5 flex items-center gap-1"
+          >
+            {copied ? <Check className="w-3 h-3 text-emerald-600" /> : <Copy className="w-3 h-3" />}
+            <span>{copied ? '복사됨' : '코드 복사'}</span>
+          </Button>
+        </div>
+
+        <div className="flex-1 p-4 overflow-auto font-mono text-xs leading-relaxed bg-(--bg-secondary)/10">
+          <pre className="text-(--text-primary)">{selectedFile.content}</pre>
+        </div>
+      </main>
+    </Card>
+  );
+}

package/components/blocks/InteractiveChatBlock.tsx

@@ -0,0 +1,217 @@
+'use client';
+
+import React, { useState, useRef, useEffect } from 'react';
+import { Card, Button, Input, Badge } from '@/components/ui';
+import {
+  Send,
+  Bot,
+  User,
+  Paperclip,
+  Check,
+  Plus,
+} from 'lucide-react';
+
+interface ChatMessage {
+  id: string;
+  sender: 'user' | 'assistant';
+  text: string;
+  timestamp: string;
+}
+
+const QUICK_PROMPTS = [
+  '디자인 토큰 어떻게 설정하나요?',
+  '4pt 그리드 스페이싱 규칙',
+  '다크모드 컬러 전환',
+  '0KB 런타임 CSS 빌드',
+];
+
+export function InteractiveChatBlock() {
+  const [messages, setMessages] = useState<ChatMessage[]>([
+    {
+      id: 'm1',
+      sender: 'assistant',
+      text: '안녕하세요. 디자인 토큰 AI 어시스턴트입니다. 색상 시스템, 스페이싱 규격, 레이아웃에 관해 궁금한 점을 질문해보세요.',
+      timestamp: '10:00 AM',
+    },
+    {
+      id: 'm2',
+      sender: 'user',
+      text: '브랜드 primary 색상 토큰을 어떻게 바꾸나요?',
+      timestamp: '10:01 AM',
+    },
+    {
+      id: 'm3',
+      sender: 'assistant',
+      text: '우측 상단의 테마 에디터를 열거나, :root의 --atom-primary CSS 변수를 원하는 색상 코드로 지정하면 즉시 모든 컴포넌트에 반영됩니다.',
+      timestamp: '10:01 AM',
+    },
+  ]);
+
+  const [inputVal, setInputVal] = useState('');
+  const [isTyping, setIsTyping] = useState(false);
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [messages, isTyping]);
+
+  const handleSend = (textToSend?: string) => {
+    const text = textToSend || inputVal;
+    if (!text.trim()) return;
+
+    const now = new Date();
+    const timeStr = `${now.getHours()}:${String(now.getMinutes()).padStart(2, '0')}`;
+
+    const newMsg: ChatMessage = {
+      id: `user-${Date.now()}`,
+      sender: 'user',
+      text: text,
+      timestamp: timeStr,
+    };
+
+    setMessages((prev) => [...prev, newMsg]);
+    if (!textToSend) setInputVal('');
+    setIsTyping(true);
+
+    setTimeout(() => {
+      let replyText = `"${text}"에 대한 디자인 토큰 가이드입니다. AtomDesignToken의 W3C DTCG 표준 규격에 따라 모든 변수는 CSS 변수(--atom-*)로 안전하게 컴파일됩니다.`;
+      if (text.includes('primary') || text.includes('색상')) {
+        replyText = 'Primary 브랜드 토큰은 css/atom-ui.css의 --atom-primary 변수로 선언되어 있으며, Tailwind v4 및 런타임 없는 순수 CSS로 상속됩니다.';
+      } else if (text.includes('그리드') || text.includes('스페이싱')) {
+        replyText = '스페이싱 토큰은 4px 배수 규격(--atom-space-1: 4px, --atom-space-2: 8px, --atom-space-4: 16px)으로 엄격히 관리됩니다.';
+      } else if (text.includes('다크')) {
+        replyText = '최상위 html 태그의 data-theme="dark" 속성을 통해 라이트/다크 시맨틱 토큰 매트릭스가 즉시 스위칭됩니다.';
+      }
+
+      const newBotMsg: ChatMessage = {
+        id: `bot-${Date.now()}`,
+        sender: 'assistant',
+        text: replyText,
+        timestamp: timeStr,
+      };
+
+      setMessages((prev) => [...prev, newBotMsg]);
+      setIsTyping(false);
+    }, 800);
+  };
+
+  return (
+    <Card className="flex flex-col h-[480px] overflow-hidden bg-(--bg-primary) border border-(--border-subtle) transition-colors">
+      {/* 1. Chat Header */}
+      <div className="px-4 py-3 border-b border-(--border-subtle) flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <div className="w-7 h-7 rounded-(--radius-sm) bg-(--bg-secondary) border border-(--border-subtle) text-(--text-primary) flex items-center justify-center font-bold text-xs">
+            <Bot className="w-3.5 h-3.5" />
+          </div>
+          <div>
+            <div className="text-xs font-semibold text-(--text-primary)">
+              디자인 토큰 어시스턴트
+            </div>
+            <div className="text-[11px] text-(--text-muted)">온디맨드 응답</div>
+          </div>
+        </div>
+
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => setMessages(messages.slice(0, 1))}
+          className="text-xs py-1 px-2.5 h-auto"
+        >
+          대화 초기화
+        </Button>
+      </div>
+
+      {/* 2. Messages Scroll Area */}
+      <div ref={scrollRef} className="flex-1 p-4 overflow-y-auto space-y-3.5 bg-(--bg-primary)">
+        {messages.map((m) => {
+          const isUser = m.sender === 'user';
+          return (
+            <div
+              key={m.id}
+              className={`flex items-start gap-2.5 ${isUser ? 'flex-row-reverse' : 'flex-row'}`}
+            >
+              <div
+                className={`w-6 h-6 rounded-(--radius-sm) flex items-center justify-center text-xs shrink-0 ${
+                  isUser
+                    ? 'bg-(--text-primary) text-(--bg-primary)'
+                    : 'bg-(--bg-secondary) text-(--text-primary) border border-(--border-subtle)'
+                }`}
+              >
+                {isUser ? <User className="w-3 h-3" /> : <Bot className="w-3 h-3" />}
+              </div>
+
+              <div className={`max-w-[75%] space-y-1 ${isUser ? 'items-end' : 'items-start'}`}>
+                <div
+                  className={`p-3 rounded-(--radius) text-xs leading-relaxed ${
+                    isUser
+                      ? 'bg-(--text-primary) text-(--bg-primary) font-medium'
+                      : 'bg-(--bg-secondary) text-(--text-primary) border border-(--border-subtle)'
+                  }`}
+                >
+                  {m.text}
+                </div>
+                <div className={`text-[11px] text-(--text-muted) px-1 ${isUser ? 'text-right' : 'text-left'}`}>
+                  {m.timestamp}
+                </div>
+              </div>
+            </div>
+          );
+        })}
+
+        {isTyping && (
+          <div className="flex items-center gap-2 text-xs text-(--text-muted)">
+            <Bot className="w-3.5 h-3.5" />
+            <span>확인 중...</span>
+          </div>
+        )}
+      </div>
+
+      {/* 3. Quick Suggestion Pills */}
+      <div className="px-3 py-2 border-t border-(--border-subtle) flex items-center gap-1.5 overflow-x-auto scrollbar-none">
+        {QUICK_PROMPTS.map((q, idx) => (
+          <Button
+            key={idx}
+            variant="outline"
+            size="sm"
+            onClick={() => handleSend(q)}
+            className="shrink-0 text-xs py-1 px-2.5 h-auto whitespace-nowrap"
+          >
+            {q}
+          </Button>
+        ))}
+      </div>
+
+      {/* 4. Bottom Input Bar composed with Input & Button */}
+      <div className="p-3 border-t border-(--border-subtle) bg-(--bg-primary)">
+        <div className="flex items-center gap-2">
+          <input
+            type="text"
+            value={inputVal}
+            onChange={(e) => setInputVal(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                e.preventDefault();
+                handleSend();
+              }
+            }}
+            placeholder="디자인 시스템이나 토큰 규칙에 관해 질문하세요..."
+            className="flex-1 text-xs px-3 py-2 rounded-(--radius-sm) bg-(--bg-secondary) text-(--text-primary) border border-(--border-subtle) focus:outline-none focus:border-(--border-strong) transition-colors"
+          />
+          <Button
+            type="button"
+            variant="primary"
+            size="sm"
+            onClick={() => handleSend()}
+            aria-label="전송"
+            title="전송"
+            className="p-2 h-auto"
+          >
+            <Send className="w-3.5 h-3.5" />
+          </Button>
+        </div>
+      </div>
+    </Card>
+  );
+}

package/components/blocks/MetricStatsBlock.tsx

@@ -0,0 +1,150 @@
+'use client';
+
+import React from 'react';
+import { Card, Badge } from '@/components/ui';
+import {
+  TrendingUp,
+  TrendingDown,
+  DollarSign,
+  Users,
+  Target,
+  Server,
+} from 'lucide-react';
+
+interface MetricItem {
+  id: string;
+  label: string;
+  subLabel: string;
+  value: string;
+  change: string;
+  isPositive: boolean;
+  icon: 'dollar' | 'users' | 'target' | 'server';
+  sparkline: number[];
+}
+
+const METRICS: MetricItem[] = [
+  {
+    id: 'm-arr',
+    label: '월간 반복 매출 (MRR)',
+    subLabel: '구독 플랜 총액',
+    value: '₩48,250,000',
+    change: '+18.4%',
+    isPositive: true,
+    icon: 'dollar',
+    sparkline: [35, 42, 40, 55, 60, 58, 72, 85],
+  },
+  {
+    id: 'm-mau',
+    label: '활성 개발자 (MAU)',
+    subLabel: '토큰 CLI 활성 호출자',
+    value: '49,210명',
+    change: '+12.6%',
+    isPositive: true,
+    icon: 'users',
+    sparkline: [20, 25, 22, 38, 45, 48, 55, 64],
+  },
+  {
+    id: 'm-cvr',
+    label: '유료 플랜 전환율',
+    subLabel: '무료에서 Pro 업그레이드',
+    value: '4.92%',
+    change: '-0.3%',
+    isPositive: false,
+    icon: 'target',
+    sparkline: [60, 58, 62, 55, 50, 52, 48, 45],
+  },
+  {
+    id: 'm-uptime',
+    label: 'API 가동률 & SLA',
+    subLabel: '엣지 컴파일 노드 헬스',
+    value: '99.98%',
+    change: '+0.02%',
+    isPositive: true,
+    icon: 'server',
+    sparkline: [95, 96, 98, 97, 99, 99, 100, 100],
+  },
+];
+
+export function MetricStatsBlock() {
+  const getIcon = (type: MetricItem['icon']) => {
+    switch (type) {
+      case 'dollar':
+        return <DollarSign className="w-3.5 h-3.5 text-(--accent-primary)" />;
+      case 'users':
+        return <Users className="w-3.5 h-3.5 text-blue-500" />;
+      case 'target':
+        return <Target className="w-3.5 h-3.5 text-amber-500" />;
+      case 'server':
+        return <Server className="w-3.5 h-3.5 text-emerald-500" />;
+    }
+  };
+
+  return (
+    <Card className="overflow-hidden transition-colors">
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 divide-y sm:divide-y-0 sm:divide-x divide-(--border-subtle)">
+        {METRICS.map((m) => {
+          const maxVal = Math.max(...m.sparkline);
+          const minVal = Math.min(...m.sparkline);
+          const range = maxVal - minVal || 1;
+
+          const points = m.sparkline
+            .map((val, idx) => {
+              const x = (idx / (m.sparkline.length - 1)) * 70;
+              const y = 24 - ((val - minVal) / range) * 20;
+              return `${x},${y}`;
+            })
+            .join(' ');
+
+          return (
+            <div key={m.id} className="p-4 sm:p-5 flex flex-col justify-between space-y-3">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <div className="p-1.5 rounded-(--radius-sm) bg-(--bg-secondary) border border-(--border-subtle)">
+                    {getIcon(m.icon)}
+                  </div>
+                  <span className="text-xs text-(--text-secondary) font-medium">{m.label}</span>
+                </div>
+              </div>
+
+              <div className="flex items-baseline justify-between">
+                <div>
+                  <div className="text-xl font-bold tracking-tight text-(--text-primary)">
+                    {m.value}
+                  </div>
+                  <div className="text-[11px] text-(--text-secondary) mt-0.5">{m.subLabel}</div>
+                </div>
+
+                {/* Mini SVG Sparkline */}
+                <div className="w-18 h-7">
+                  <svg className="w-full h-full overflow-visible" viewBox="0 0 70 24">
+                    <polyline
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="1.5"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      points={points}
+                      className={m.isPositive ? 'text-emerald-500' : 'text-rose-500'}
+                    />
+                  </svg>
+                </div>
+              </div>
+
+              <div className="pt-2 border-t border-(--border-subtle) flex items-center justify-between text-[11px]">
+                <span className="text-(--text-secondary)">전월 동기 대비</span>
+                <span
+                  className={`font-semibold flex items-center gap-0.5 ${
+                    m.isPositive ? 'text-emerald-600 dark:text-emerald-400' : 'text-rose-600 dark:text-rose-400'
+                  }`}
+                >
+                  {m.isPositive ? <TrendingUp className="w-3 h-3" /> : <TrendingDown className="w-3 h-3" />}
+                  <span>{m.change}</span>
+                </span>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </Card>
+  );
+}