atomsystem 0.4.3 → 0.5.0

package/components/blocks/BlockViewerCard.tsx

@@ -9,10 +9,10 @@ import {
   Monitor,
   Tablet,
   Smartphone,
-  ExternalLink,
-  Tag,
+  Terminal,
 } from 'lucide-react';
 import { BlockItem } from '@/lib/data/blocks';
+import { CodeHighlight } from '@/components/common/CodeHighlight';
 
 interface BlockViewerCardProps {
   block: BlockItem;
@@ -22,12 +22,21 @@ interface BlockViewerCardProps {
 export function BlockViewerCard({ block, children }: BlockViewerCardProps) {
   const [activeTab, setActiveTab] = useState<'preview' | 'react' | 'html'>('preview');
   const [viewport, setViewport] = useState<'desktop' | 'tablet' | 'mobile'>('desktop');
-  const [copied, setCopied] = useState(false);
+  const [copiedCode, setCopiedCode] = useState(false);
+  const [copiedCli, setCopiedCli] = useState(false);
 
-  const handleCopy = (code: string) => {
+  const cliCommand = `npx atomsystem add ${block.id}`;
+
+  const handleCopyCode = (code: string) => {
     navigator.clipboard.writeText(code);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
+    setCopiedCode(true);
+    setTimeout(() => setCopiedCode(false), 2000);
+  };
+
+  const handleCopyCli = () => {
+    navigator.clipboard.writeText(cliCommand);
+    setCopiedCli(true);
+    setTimeout(() => setCopiedCli(false), 2000);
   };
 
   const getViewportMaxWidth = () => {
@@ -44,130 +53,54 @@ export function BlockViewerCard({ block, children }: BlockViewerCardProps) {
   return (
     <div
       id={block.id}
-      className="scroll-mt-20 rounded-2xl bg-(--bg-primary) border border-(--border-subtle) shadow-xs overflow-hidden transition-all duration-200"
+      className="scroll-mt-20 rounded-lg bg-(--bg-primary) border border-(--border-subtle) overflow-hidden"
     >
-      {/* Block Header Info */}
-      <div className="p-5 sm:p-6 border-b border-(--border-subtle)">
-        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-2">
-          <div className="flex items-center gap-2.5">
-            <span className="px-2.5 py-0.5 rounded-full text-[11px] font-bold bg-(--accent-primary)/10 text-(--accent-primary)">
-              {block.badge}
-            </span>
-            <span className="text-xs text-(--text-muted) font-medium">{block.englishTitle}</span>
-          </div>
-
-          {/* Tokens used tags */}
-          <div className="flex flex-wrap items-center gap-1.5">
-            <span className="text-[10px] text-(--text-muted) flex items-center gap-1 mr-1">
-              <Tag className="w-3 h-3" />
-              토큰 바인딩:
-            </span>
-            {block.tokensUsed.map((token) => (
-              <span
-                key={token}
-                className="font-mono text-[10px] px-1.5 py-0.2 rounded bg-(--bg-secondary) text-(--text-secondary) border border-(--border-subtle)"
-              >
-                {token}
-              </span>
-            ))}
-          </div>
-        </div>
-
-        <h3 className="text-xl font-bold text-(--text-primary) tracking-tight mb-1.5">
-          {block.title}
-        </h3>
-        <p className="text-xs sm:text-sm text-(--text-secondary) leading-relaxed">
-          {block.description}
-        </p>
-
-        {/* Feature Highlights Pill */}
-        <div className="flex flex-wrap gap-2 mt-4">
-          {block.features.map((feat, idx) => (
-            <span
-              key={idx}
-              className="text-[11px] text-(--text-secondary) bg-(--bg-secondary)/70 px-2.5 py-1 rounded-lg border border-(--border-subtle)"
-            >
-              ✓ {feat}
-            </span>
-          ))}
+      {/* 1. Shadcn Block Toolbar */}
+      <div className="px-5 py-3 border-b border-(--border-subtle) bg-(--bg-secondary)/40 flex flex-wrap items-center justify-between gap-3">
+        {/* Left: ID & Title */}
+        <div className="flex items-center gap-3">
+          <span className="font-mono text-xs font-semibold text-(--text-primary) px-2 py-0.5 rounded border border-(--border-subtle) bg-(--bg-primary)">
+            {block.id}
+          </span>
+          <h2 className="text-sm font-semibold text-(--text-primary)">
+            {block.title}
+          </h2>
         </div>
-      </div>
 
-      {/* Control Bar: Viewport selector & Code tabs */}
-      <div className="px-4 py-2.5 bg-(--bg-secondary)/60 border-b border-(--border-subtle) flex items-center justify-between gap-3 overflow-x-auto">
-        {/* Left: View Mode Tabs */}
-        <div className="flex items-center gap-1 bg-(--bg-primary) p-0.5 rounded-lg border border-(--border-subtle) shrink-0">
-          <button
-            onClick={() => setActiveTab('preview')}
-            data-tab="preview"
-            className={`flex items-center gap-1.5 px-3 py-1 rounded-md text-xs font-semibold transition-colors ${
-              activeTab === 'preview'
-                ? 'bg-(--accent-primary) text-white shadow-xs'
-                : 'text-(--text-secondary) hover:text-(--text-primary)'
-            }`}
-          >
-            <Eye className="w-3.5 h-3.5" />
-            <span>라이브 프리뷰</span>
-          </button>
-          <button
-            onClick={() => setActiveTab('react')}
-            data-tab="react"
-            className={`flex items-center gap-1.5 px-3 py-1 rounded-md text-xs font-semibold transition-colors ${
-              activeTab === 'react'
-                ? 'bg-(--accent-primary) text-white shadow-xs'
-                : 'text-(--text-secondary) hover:text-(--text-primary)'
-            }`}
-          >
-            <Code2 className="w-3.5 h-3.5" />
-            <span>React (TSX)</span>
-          </button>
-          <button
-            onClick={() => setActiveTab('html')}
-            data-tab="html"
-            className={`flex items-center gap-1.5 px-3 py-1 rounded-md text-xs font-semibold transition-colors ${
-              activeTab === 'html'
-                ? 'bg-(--accent-primary) text-white shadow-xs'
-                : 'text-(--text-secondary) hover:text-(--text-primary)'
-            }`}
-          >
-            <Code2 className="w-3.5 h-3.5" />
-            <span>HTML & CSS</span>
-          </button>
-        </div>
-
-        {/* Right: Viewport resizing (Only in preview mode) & Copy button */}
+        {/* Right Toolbar */}
         <div className="flex items-center gap-2">
+          {/* Viewport Resizer */}
           {activeTab === 'preview' && (
-            <div className="hidden sm:flex items-center gap-0.5 bg-(--bg-primary) p-0.5 rounded-lg border border-(--border-subtle)">
+            <div className="hidden sm:flex items-center gap-0.5 bg-(--bg-primary) p-0.5 rounded border border-(--border-subtle)">
               <button
                 onClick={() => setViewport('desktop')}
-                title="데스크톱 뷰 (100%)"
-                className={`p-1.5 rounded-md transition-colors ${
+                title="Desktop 100%"
+                className={`p-1.5 rounded transition-colors ${
                   viewport === 'desktop'
                     ? 'bg-(--bg-secondary) text-(--text-primary)'
-                    : 'text-(--text-muted) hover:text-(--text-primary)'
+                    : 'text-(--text-secondary) hover:text-(--text-primary)'
                 }`}
               >
                 <Monitor className="w-3.5 h-3.5" />
               </button>
               <button
                 onClick={() => setViewport('tablet')}
-                title="태블릿 뷰 (768px)"
-                className={`p-1.5 rounded-md transition-colors ${
+                title="Tablet 768px"
+                className={`p-1.5 rounded transition-colors ${
                   viewport === 'tablet'
                     ? 'bg-(--bg-secondary) text-(--text-primary)'
-                    : 'text-(--text-muted) hover:text-(--text-primary)'
+                    : 'text-(--text-secondary) hover:text-(--text-primary)'
                 }`}
               >
                 <Tablet className="w-3.5 h-3.5" />
               </button>
               <button
                 onClick={() => setViewport('mobile')}
-                title="모바일 뷰 (390px)"
-                className={`p-1.5 rounded-md transition-colors ${
+                title="Mobile 390px"
+                className={`p-1.5 rounded transition-colors ${
                   viewport === 'mobile'
                     ? 'bg-(--bg-secondary) text-(--text-primary)'
-                    : 'text-(--text-muted) hover:text-(--text-primary)'
+                    : 'text-(--text-secondary) hover:text-(--text-primary)'
                 }`}
               >
                 <Smartphone className="w-3.5 h-3.5" />
@@ -175,55 +108,122 @@ export function BlockViewerCard({ block, children }: BlockViewerCardProps) {
             </div>
           )}
 
+          {/* Preview / Code Tabs */}
+          <div className="flex items-center gap-1 bg-(--bg-primary) p-0.5 rounded border border-(--border-subtle)">
+            <button
+              onClick={() => setActiveTab('preview')}
+              data-tab="preview"
+              className={`flex items-center gap-1 px-2.5 py-1 rounded text-xs font-medium transition-colors ${
+                activeTab === 'preview'
+                  ? 'bg-(--bg-secondary) text-(--text-primary) font-semibold'
+                  : 'text-(--text-secondary) hover:text-(--text-primary)'
+              }`}
+            >
+              <Eye className="w-3.5 h-3.5" />
+              <span>Preview</span>
+            </button>
+            <button
+              onClick={() => setActiveTab('react')}
+              data-tab="react"
+              className={`flex items-center gap-1 px-2.5 py-1 rounded text-xs font-medium transition-colors ${
+                activeTab === 'react'
+                  ? 'bg-(--bg-secondary) text-(--text-primary) font-semibold'
+                  : 'text-(--text-secondary) hover:text-(--text-primary)'
+              }`}
+            >
+              <Code2 className="w-3.5 h-3.5" />
+              <span>React</span>
+            </button>
+            <button
+              onClick={() => setActiveTab('html')}
+              data-tab="html"
+              className={`flex items-center gap-1 px-2.5 py-1 rounded text-xs font-medium transition-colors ${
+                activeTab === 'html'
+                  ? 'bg-(--bg-secondary) text-(--text-primary) font-semibold'
+                  : 'text-(--text-secondary) hover:text-(--text-primary)'
+              }`}
+            >
+              <Code2 className="w-3.5 h-3.5" />
+              <span>HTML</span>
+            </button>
+          </div>
+
+          {/* CLI Add Button */}
+          <button
+            onClick={handleCopyCli}
+            title={cliCommand}
+            className="hidden lg:flex items-center gap-1 px-2.5 py-1 rounded text-xs font-mono bg-(--bg-primary) hover:bg-(--bg-secondary) text-(--text-secondary) border border-(--border-subtle) transition-colors"
+          >
+            <Terminal className="w-3 h-3 text-(--text-primary)" />
+            <span>{copiedCli ? 'Copied' : cliCommand}</span>
+          </button>
+
+          {/* Copy Code Button */}
           <button
             onClick={() =>
-              handleCopy(
+              handleCopyCode(
                 activeTab === 'html' ? block.codeSnippets.htmlCss : block.codeSnippets.react
               )
             }
-            className="flex items-center gap-1 px-3 py-1.5 rounded-lg text-xs font-medium bg-(--bg-primary) hover:bg-(--border-subtle) text-(--text-primary) border border-(--border-subtle) transition-colors"
+            className="flex items-center gap-1 px-3 py-1 rounded text-xs font-medium bg-(--bg-primary) hover:bg-(--bg-secondary) text-(--text-primary) border border-(--border-subtle) transition-colors"
           >
-            {copied ? (
+            {copiedCode ? (
               <>
-                <Check className="w-3.5 h-3.5 text-emerald-500" />
-                <span className="text-emerald-500">복사 완료!</span>
+                <Check className="w-3.5 h-3.5 text-emerald-600" />
+                <span className="text-emerald-600 font-semibold">Copied</span>
               </>
             ) : (
               <>
-                <Copy className="w-3.5 h-3.5 text-(--text-muted)" />
-                <span>코드 복사</span>
+                <Copy className="w-3.5 h-3.5 text-(--text-secondary)" />
+                <span>Copy Code</span>
               </>
             )}
           </button>
         </div>
       </div>
 
-      {/* Main Content Area */}
-      <div className="p-4 sm:p-8 bg-(--bg-secondary)/30 flex justify-center items-center min-h-[380px]">
+      {/* 2. Main Viewport */}
+      <div className="p-4 sm:p-6 bg-(--bg-secondary)/30 flex justify-center items-center">
         {activeTab === 'preview' ? (
           <div
             className={`w-full transition-all duration-300 mx-auto ${getViewportMaxWidth()} ${
               viewport !== 'desktop'
-                ? 'border-2 border-dashed border-(--border-strong) rounded-2xl p-2 bg-(--bg-primary) shadow-sm'
+                ? 'border border-(--border-strong) rounded-lg p-2 bg-(--bg-primary) shadow-sm'
                 : ''
             }`}
           >
             {children}
           </div>
         ) : (
-          <div className="w-full bg-(--bg-primary) rounded-xl border border-(--border-subtle) overflow-hidden">
-            <div className="px-4 py-2 border-b border-(--border-subtle) bg-(--bg-secondary)/50 text-[11px] font-mono text-(--text-muted) flex justify-between items-center">
+          <div className="w-full bg-(--bg-primary) rounded-md border border-(--border-subtle) overflow-hidden">
+            <div className="px-4 py-2 border-b border-(--border-subtle) bg-(--bg-secondary)/50 text-xs font-mono text-(--text-secondary) flex justify-between items-center">
               <span>{activeTab === 'react' ? `${block.id}.tsx` : `${block.id}.html`}</span>
-              <span>{activeTab === 'react' ? 'TypeScript React' : 'Vanilla HTML / Tailwind'}</span>
+              <span>{activeTab === 'react' ? 'React + Tailwind TSX' : 'HTML / Tailwind'}</span>
             </div>
-            <pre className="p-4 text-xs font-mono text-(--text-primary) overflow-x-auto leading-relaxed max-h-96">
-              <code>
-                {activeTab === 'react' ? block.codeSnippets.react : block.codeSnippets.htmlCss}
-              </code>
-            </pre>
+            <CodeHighlight
+              code={activeTab === 'react' ? block.codeSnippets.react : block.codeSnippets.htmlCss}
+              language={activeTab === 'react' ? 'tsx' : 'html'}
+              className="p-4 max-h-[480px]"
+            />
           </div>
         )}
       </div>
+
+      {/* 3. Block Meta Footer */}
+      <div className="px-5 py-2.5 bg-(--bg-primary) border-t border-(--border-subtle) flex flex-wrap items-center justify-between gap-2 text-xs text-(--text-secondary)">
+        <p className="line-clamp-1 max-w-xl">{block.description}</p>
+        <div className="flex items-center gap-1.5 shrink-0">
+          <span className="text-(--text-muted)">Tokens:</span>
+          {block.tokensUsed.map((token) => (
+            <span
+              key={token}
+              className="font-mono text-xs px-1.5 py-0.5 rounded bg-(--bg-secondary) text-(--text-primary) border border-(--border-subtle)"
+            >
+              {token}
+            </span>
+          ))}
+        </div>
+      </div>
     </div>
   );
 }

package/components/blocks/BlocksSidebar.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import React, { useState } from 'react';
+import Link from 'next/link';
+import { useThemeEditor } from '@/components/editor/ThemeEditorProvider';
+import { BLOCKS_COLLECTION, BLOCK_CATEGORIES, BlockItem } from '@/lib/data/blocks';
+import { Search, Layers, ChevronRight } from 'lucide-react';
+
+interface BlocksSidebarProps {
+  activeId: string;
+}
+
+export function BlocksSidebar({ activeId }: BlocksSidebarProps) {
+  const { theme } = useThemeEditor();
+  const brandColor = theme?.color?.primary || 'var(--accent-primary)';
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const filteredBlocks = BLOCKS_COLLECTION.filter((block) => {
+    if (!searchQuery.trim()) return true;
+    const q = searchQuery.toLowerCase();
+    return (
+      block.title.toLowerCase().includes(q) ||
+      block.englishTitle.toLowerCase().includes(q) ||
+      block.id.toLowerCase().includes(q)
+    );
+  });
+
+  return (
+    <aside className="w-64 border-r border-(--border-subtle) bg-(--bg-primary) p-4 flex flex-col shrink-0 h-full overflow-y-auto">
+      {/* 1. Header & Search */}
+      <div className="mb-4 space-y-2">
+        <div className="flex items-center justify-between">
+          <Link
+            href="/blocks"
+            className="flex items-center gap-1.5 text-xs font-semibold text-(--text-primary) hover:text-(--accent-primary) transition-colors"
+          >
+            <Layers className="w-3.5 h-3.5" />
+            <span>디자인 블록 카탈로그</span>
+          </Link>
+          <span className="font-mono text-[10px] px-1.5 py-0.5 rounded-(--radius-sm) bg-(--bg-secondary) text-(--text-secondary) border border-(--border-subtle)">
+            {BLOCKS_COLLECTION.length}
+          </span>
+        </div>
+
+        <div className="relative">
+          <Search className="w-3.5 h-3.5 absolute left-2.5 top-1/2 -translate-y-1/2 text-(--text-secondary)" />
+          <input
+            type="text"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            placeholder="블록 검색..."
+            className="w-full text-xs pl-7 pr-2.5 py-1.5 rounded-(--radius-sm) bg-(--bg-secondary) text-(--text-primary) border border-(--border-subtle) focus:outline-none focus:border-(--border-strong) transition-colors"
+          />
+        </div>
+      </div>
+
+      {/* 2. Block List by Category */}
+      <div className="space-y-4 text-xs">
+        {BLOCK_CATEGORIES.filter((cat) => cat.id !== 'all').map((cat) => {
+          const categoryBlocks = filteredBlocks.filter((b) => b.category === cat.id);
+          if (categoryBlocks.length === 0) return null;
+
+          return (
+            <div key={cat.id} className="space-y-1">
+              <div className="text-[11px] font-mono font-medium text-(--text-secondary) uppercase tracking-wider px-2 py-0.5">
+                {cat.name}
+              </div>
+              <div className="space-y-0.5">
+                {categoryBlocks.map((block) => {
+                  const isActive = activeId === block.id;
+                  return (
+                    <Link
+                      key={block.id}
+                      href={`/blocks/${block.id}`}
+                      className={`w-full flex items-center justify-between px-2.5 py-1.5 rounded-(--radius-sm) text-xs transition-colors ${
+                        isActive
+                          ? 'bg-(--text-primary) text-(--bg-primary) font-medium'
+                          : 'text-(--text-secondary) hover:text-(--text-primary) hover:bg-(--bg-secondary)'
+                      }`}
+                    >
+                      <span className="truncate">{block.title}</span>
+                      <ChevronRight className={`w-3 h-3 shrink-0 ${isActive ? 'text-(--bg-primary)' : 'opacity-30'}`} />
+                    </Link>
+                  );
+                })}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </aside>
+  );
+}