atomsystem 0.4.3 → 0.5.0

package/components/blocks/FileExplorerBlock.tsx

@@ -1,27 +1,18 @@
 'use client';
 
 import React, { useState } from 'react';
+import { Card, Button, Badge } from '@/components/ui';
 import {
   Folder,
   FolderOpen,
   FileCode,
   FileText,
   FileJson,
-  Image as ImageIcon,
   ChevronRight,
   ChevronDown,
-  Search,
-  LayoutGrid,
-  List as ListIcon,
-  Download,
   Copy,
   Check,
-  Plus,
-  Trash2,
-  HardDrive,
   File,
-  Eye,
-  ExternalLink,
 } from 'lucide-react';
 
 interface FileNode {
@@ -37,133 +28,68 @@ interface FileNode {
 
 const FILE_TREE: FileNode[] = [
   {
-    id: 'f-src',
-    name: 'src',
+    id: 'f-tokens',
+    name: 'tokens',
     type: 'folder',
-    updatedAt: '2026.11.10',
+    updatedAt: '2026.11.11',
     children: [
       {
-        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.10 14:20',
-            content: `import React from 'react';\n\nexport interface ButtonProps {\n  variant?: 'primary' | 'secondary';\n  children: React.ReactNode;\n}\n\nexport const Button = ({ variant = 'primary', children }: ButtonProps) => {\n  return <button className={\`atom-btn-\${variant}\`}>{children}</button>;\n};`,
-          },
-          {
-            id: 'f-card',
-            name: 'Card.tsx',
-            type: 'file',
-            extension: 'tsx',
-            size: '2.1 KB',
-            updatedAt: '2026.11.09 11:15',
-            content: `export const Card = ({ title, children }) => (\n  <div className="atom-card">\n    <h3>{title}</h3>\n    {children}\n  </div>\n);`,
-          },
-          {
-            id: 'f-input',
-            name: 'Input.tsx',
-            type: 'file',
-            extension: 'tsx',
-            size: '1.8 KB',
-            updatedAt: '2026.11.08 17:40',
-            content: `export const Input = (props) => <input className="atom-input" {...props} />;`,
-          },
-        ],
+        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-tokens',
-        name: 'tokens',
-        type: 'folder',
-        updatedAt: '2026.11.11',
-        children: [
-          {
-            id: 'f-tokens-json',
-            name: 'tokens.json',
-            type: 'file',
-            extension: 'json',
-            size: '18.6 KB',
-            updatedAt: '2026.11.11 09:30',
-            content: `{\n  "color": {\n    "primary": { "value": "#3182f6", "type": "color" },\n    "bg": { "value": "#ffffff", "type": "color" }\n  }\n}`,
-          },
-          {
-            id: 'f-token-types',
-            name: 'token.types.ts',
-            type: 'file',
-            extension: 'ts',
-            size: '4.2 KB',
-            updatedAt: '2026.11.10 16:55',
-            content: `export type ColorToken = 'primary' | 'secondary' | 'accent';`,
-          },
-        ],
+        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-public',
-    name: 'public',
+    id: 'f-components',
+    name: 'components',
     type: 'folder',
-    updatedAt: '2026.11.05',
+    updatedAt: '2026.11.11',
     children: [
       {
-        id: 'f-logo',
-        name: 'atom-logo.svg',
+        id: 'f-btn',
+        name: 'Button.tsx',
         type: 'file',
-        extension: 'svg',
-        size: '5.2 KB',
-        updatedAt: '2026.11.05 10:00',
-        content: `<svg viewBox="0 0 100 100" fill="none">\n  <circle cx="50" cy="50" r="40" stroke="#3182f6" strokeWidth="8"/>\n</svg>`,
+        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}`,
       },
     ],
   },
-  {
-    id: 'f-readme',
-    name: 'README.md',
-    type: 'file',
-    extension: 'md',
-    size: '6.8 KB',
-    updatedAt: '2026.11.10 18:00',
-    content: `# AtomDesignToken\n\nFramework-Agnostic W3C DTCG Token Architecture with 0KB Runtime.`,
-  },
-  {
-    id: 'f-package',
-    name: 'package.json',
-    type: 'file',
-    extension: 'json',
-    size: '2.5 KB',
-    updatedAt: '2026.11.11 08:45',
-    content: `{\n  "name": "atomsystem",\n  "version": "0.4.0",\n  "type": "module"\n}`,
-  },
 ];
 
 export function FileExplorerBlock() {
   const [openFolders, setOpenFolders] = useState<Record<string, boolean>>({
-    'f-src': true,
+    'f-tokens': true,
     'f-components': true,
-    'f-tokens': false,
-    'f-public': false,
-  });
-
-  const [currentFolder, setCurrentFolder] = useState<FileNode>({
-    id: 'f-components',
-    name: 'components',
-    type: 'folder',
-    updatedAt: '2026.11.11',
-    children: FILE_TREE[0].children![0].children,
   });
 
   const [selectedFile, setSelectedFile] = useState<FileNode>(
-    FILE_TREE[0].children![0].children![0]
+    FILE_TREE[0].children![0]
   );
-
-  const [viewMode, setViewMode] = useState<'grid' | 'table'>('grid');
-  const [searchQuery, setSearchQuery] = useState('');
   const [copied, setCopied] = useState(false);
 
   const toggleFolder = (folderId: string) => {
@@ -174,362 +100,104 @@ export function FileExplorerBlock() {
     switch (ext) {
       case 'tsx':
       case 'ts':
-        return <FileCode className="w-4 h-4 text-blue-500" />;
+        return <FileCode className="w-3.5 h-3.5 text-blue-500" />;
       case 'json':
-        return <FileJson className="w-4 h-4 text-amber-500" />;
-      case 'svg':
-        return <ImageIcon className="w-4 h-4 text-emerald-500" />;
+        return <FileJson className="w-3.5 h-3.5 text-amber-500" />;
       case 'md':
-        return <FileText className="w-4 h-4 text-purple-500" />;
+        return <FileText className="w-3.5 h-3.5 text-purple-500" />;
       default:
-        return <File className="w-4 h-4 text-(--text-muted)" />;
+        return <File className="w-3.5 h-3.5 text-(--text-secondary)" />;
     }
   };
 
-  const copyContent = (text?: string) => {
-    if (!text) return;
-    navigator.clipboard.writeText(text);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
+  const handleCopy = () => {
+    if (selectedFile.content) {
+      navigator.clipboard.writeText(selectedFile.content);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
   };
 
-  const currentFiles = (currentFolder.children || []).filter((item) =>
-    item.name.toLowerCase().includes(searchQuery.toLowerCase())
-  );
-
   return (
-    <div className="w-full bg-(--bg-primary) rounded-2xl border border-(--border-subtle) shadow-sm overflow-hidden flex flex-col h-[520px] transition-colors">
-      {/* Top Header & Breadcrumb & Action Toolbar */}
-      <div className="px-4 py-3 border-b border-(--border-subtle) bg-(--bg-secondary)/40 flex flex-wrap items-center justify-between gap-3">
-        {/* Breadcrumb Path */}
-        <div className="flex items-center gap-1.5 text-xs font-medium text-(--text-secondary)">
-          <HardDrive className="w-4 h-4 text-(--accent-primary)" />
-          <span>project-root</span>
-          <ChevronRight className="w-3.5 h-3.5 text-(--text-muted)" />
-          <span>src</span>
-          <ChevronRight className="w-3.5 h-3.5 text-(--text-muted)" />
-          <span className="font-bold text-(--text-primary) px-1.5 py-0.5 rounded bg-(--bg-secondary)">
-            {currentFolder.name}
-          </span>
+    <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>
 
-        {/* Search, View Mode & New File */}
-        <div className="flex items-center gap-2">
-          <div className="relative">
-            <Search className="w-3.5 h-3.5 absolute left-2.5 top-1/2 -translate-y-1/2 text-(--text-muted)" />
-            <input
-              type="text"
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              placeholder="파일 검색..."
-              className="text-xs pl-8 pr-3 py-1 rounded-lg bg-(--bg-primary) text-(--text-primary) border border-(--border-subtle) focus:outline-none focus:border-(--accent-primary) w-32 sm:w-44 transition-colors"
-            />
-          </div>
-
-          <div className="flex items-center p-0.5 rounded-lg bg-(--bg-primary) border border-(--border-subtle)">
-            <button
-              onClick={() => setViewMode('grid')}
-              aria-label="그리드 뷰"
-              className={`p-1 rounded ${
-                viewMode === 'grid'
-                  ? 'bg-(--bg-secondary) text-(--text-primary)'
-                  : 'text-(--text-muted) hover:text-(--text-primary)'
-              }`}
-            >
-              <LayoutGrid className="w-3.5 h-3.5" />
-            </button>
-            <button
-              onClick={() => setViewMode('table')}
-              aria-label="테이블 뷰"
-              className={`p-1 rounded ${
-                viewMode === 'table'
-                  ? 'bg-(--bg-secondary) text-(--text-primary)'
-                  : 'text-(--text-muted) hover:text-(--text-primary)'
-              }`}
-            >
-              <ListIcon className="w-3.5 h-3.5" />
-            </button>
-          </div>
-
-          <button className="hidden sm:flex items-center gap-1 px-2.5 py-1 rounded-lg text-xs font-semibold bg-(--accent-primary) text-white shadow-xs hover:bg-(--accent-hover) transition-colors">
-            <Plus className="w-3 h-3" />
-            <span>추가</span>
-          </button>
-        </div>
-      </div>
-
-      {/* Main 3-Column Body: Tree Sidebar | File List Viewport | File Inspector */}
-      <div className="flex-1 flex overflow-hidden">
-        {/* 1. Left Tree Sidebar */}
-        <aside className="w-48 sm:w-56 border-r border-(--border-subtle) bg-(--bg-secondary)/20 p-3 overflow-y-auto shrink-0 select-none">
-          <div className="text-[10px] font-bold text-(--text-muted) uppercase tracking-wider mb-2 px-1">
-            EXPLORER TREE
-          </div>
-
-          <div className="space-y-0.5 text-xs">
-            {FILE_TREE.map((node) => {
-              if (node.type === 'folder') {
-                const isOpen = openFolders[node.id];
-                return (
-                  <div key={node.id}>
-                    <button
-                      onClick={() => toggleFolder(node.id)}
-                      className="w-full flex items-center gap-1.5 px-2 py-1.5 rounded-lg text-(--text-secondary) hover:text-(--text-primary) hover:bg-(--bg-secondary) transition-colors text-left"
-                    >
-                      {isOpen ? (
-                        <ChevronDown className="w-3.5 h-3.5 text-(--text-muted)" />
-                      ) : (
-                        <ChevronRight className="w-3.5 h-3.5 text-(--text-muted)" />
-                      )}
-                      {isOpen ? (
-                        <FolderOpen className="w-4 h-4 text-amber-500 fill-amber-500/20" />
-                      ) : (
-                        <Folder className="w-4 h-4 text-amber-500 fill-amber-500/20" />
-                      )}
-                      <span className="font-semibold truncate">{node.name}</span>
-                    </button>
-
-                    {/* Subfolders & Subfiles */}
-                    {isOpen && node.children && (
-                      <div className="pl-4 space-y-0.5 border-l border-(--border-subtle) ml-3.5 my-0.5">
-                        {node.children.map((sub) => {
-                          if (sub.type === 'folder') {
-                            const isSubOpen = openFolders[sub.id];
-                            const isCurrent = currentFolder.id === sub.id;
-                            return (
-                              <button
-                                key={sub.id}
-                                onClick={() => {
-                                  toggleFolder(sub.id);
-                                  setCurrentFolder(sub);
-                                }}
-                                className={`w-full flex items-center gap-1.5 px-2 py-1 rounded-md text-left transition-colors ${
-                                  isCurrent
-                                    ? 'bg-(--accent-primary)/10 text-(--accent-primary) font-bold'
-                                    : 'text-(--text-secondary) hover:text-(--text-primary) hover:bg-(--bg-secondary)'
-                                }`}
-                              >
-                                {isSubOpen ? (
-                                  <FolderOpen className="w-3.5 h-3.5 text-amber-500" />
-                                ) : (
-                                  <Folder className="w-3.5 h-3.5 text-amber-500" />
-                                )}
-                                <span className="truncate">{sub.name}</span>
-                              </button>
-                            );
-                          } else {
-                            const isSelected = selectedFile?.id === sub.id;
-                            return (
-                              <button
-                                key={sub.id}
-                                onClick={() => setSelectedFile(sub)}
-                                className={`w-full flex items-center gap-1.5 px-2 py-1 rounded-md 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(sub.extension)}
-                                <span className="truncate">{sub.name}</span>
-                              </button>
-                            );
-                          }
-                        })}
-                      </div>
-                    )}
-                  </div>
-                );
-              } else {
-                return (
-                  <button
-                    key={node.id}
-                    onClick={() => setSelectedFile(node)}
-                    className="w-full flex items-center gap-1.5 px-2 py-1.5 rounded-lg text-(--text-secondary) hover:text-(--text-primary) hover:bg-(--bg-secondary) text-left"
-                  >
-                    {getFileIcon(node.extension)}
-                    <span className="truncate">{node.name}</span>
-                  </button>
-                );
-              }
-            })}
-          </div>
-        </aside>
-
-        {/* 2. Middle Files Viewport */}
-        <main className="flex-1 p-4 overflow-y-auto bg-(--bg-primary)">
-          <div className="flex items-center justify-between text-xs text-(--text-muted) mb-3 pb-2 border-b border-(--border-subtle)">
-            <span>{currentFiles.length}개 파일 항목</span>
-            <span>최종 갱신: {currentFolder.updatedAt}</span>
-          </div>
-
-          {currentFiles.length === 0 ? (
-            <div className="py-16 text-center text-xs text-(--text-muted)">
-              검색된 파일이 없습니다.
-            </div>
-          ) : viewMode === 'grid' ? (
-            /* Grid Mode */
-            <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
-              {currentFiles.map((file) => {
-                const isSelected = selectedFile?.id === file.id;
-                return (
-                  <div
-                    key={file.id}
-                    onClick={() => setSelectedFile(file)}
-                    className={`group p-3.5 rounded-xl border transition-all cursor-pointer flex flex-col justify-between ${
-                      isSelected
-                        ? 'border-(--accent-primary) bg-(--accent-primary)/5 shadow-xs ring-2 ring-(--accent-primary)/10'
-                        : 'border-(--border-subtle) hover:border-(--border-strong) bg-(--bg-secondary)/30 hover:bg-(--bg-secondary)'
-                    }`}
-                  >
-                    <div className="flex items-center justify-between mb-3">
-                      <div className="p-2 rounded-lg bg-(--bg-primary) border border-(--border-subtle)">
-                        {getFileIcon(file.extension)}
-                      </div>
-                      <span className="text-[10px] font-mono text-(--text-muted) uppercase">
-                        {file.extension}
-                      </span>
-                    </div>
-                    <div>
-                      <h4 className="text-xs font-bold text-(--text-primary) truncate mb-1">
-                        {file.name}
-                      </h4>
-                      <div className="flex items-center justify-between text-[10px] text-(--text-muted)">
-                        <span>{file.size}</span>
-                        <span>{file.updatedAt.split(' ')[0]}</span>
-                      </div>
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-          ) : (
-            /* Table Mode */
-            <div className="border border-(--border-subtle) rounded-xl overflow-hidden text-xs">
-              <table className="w-full text-left border-collapse">
-                <thead className="bg-(--bg-secondary)/60 text-(--text-muted) text-[11px] font-semibold border-b border-(--border-subtle)">
-                  <tr>
-                    <th className="p-2.5 pl-3">이름</th>
-                    <th className="p-2.5">유형</th>
-                    <th className="p-2.5">크기</th>
-                    <th className="p-2.5">수정 일시</th>
-                  </tr>
-                </thead>
-                <tbody className="divide-y divide-(--border-subtle)">
-                  {currentFiles.map((file) => {
+              {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 (
-                      <tr
+                      <button
                         key={file.id}
                         onClick={() => setSelectedFile(file)}
-                        className={`cursor-pointer transition-colors ${
+                        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 font-semibold text-(--accent-primary)'
-                            : 'hover:bg-(--bg-secondary)/50 text-(--text-primary)'
+                            ? 'bg-(--accent-primary)/10 text-(--accent-primary) font-semibold'
+                            : 'text-(--text-secondary) hover:text-(--text-primary) hover:bg-(--bg-secondary)'
                         }`}
                       >
-                        <td className="p-2.5 pl-3 flex items-center gap-2">
-                          {getFileIcon(file.extension)}
-                          <span>{file.name}</span>
-                        </td>
-                        <td className="p-2.5 text-(--text-muted) uppercase font-mono text-[10px]">
-                          {file.extension}
-                        </td>
-                        <td className="p-2.5 text-(--text-secondary)">{file.size}</td>
-                        <td className="p-2.5 text-(--text-muted)">{file.updatedAt}</td>
-                      </tr>
+                        {getFileIcon(file.extension)}
+                        <span className="truncate">{file.name}</span>
+                      </button>
                     );
                   })}
-                </tbody>
-              </table>
-            </div>
-          )}
-        </main>
-
-        {/* 3. Right File Preview & Inspector Panel */}
-        <aside className="w-60 sm:w-72 border-l border-(--border-subtle) bg-(--bg-secondary)/30 p-4 flex flex-col justify-between overflow-y-auto shrink-0">
-          <div>
-            <div className="flex items-center justify-between mb-3 pb-2 border-b border-(--border-subtle)">
-              <span className="text-[11px] font-bold text-(--text-muted) uppercase tracking-wider flex items-center gap-1">
-                <Eye className="w-3.5 h-3.5" />
-                파일 인스펙터
-              </span>
-              <button
-                onClick={() => copyContent(selectedFile?.content)}
-                className="text-[10px] text-(--accent-primary) font-semibold flex items-center gap-1 hover:underline"
-              >
-                {copied ? <Check className="w-3 h-3 text-emerald-500" /> : <Copy className="w-3 h-3" />}
-                <span>{copied ? '복사됨' : '내용 복사'}</span>
-              </button>
-            </div>
-
-            {selectedFile ? (
-              <div className="space-y-3">
-                <div className="flex items-center gap-2.5 p-2 rounded-xl bg-(--bg-primary) border border-(--border-subtle)">
-                  <div className="p-2 rounded-lg bg-(--bg-secondary)">
-                    {getFileIcon(selectedFile.extension)}
-                  </div>
-                  <div className="truncate">
-                    <h5 className="text-xs font-bold text-(--text-primary) truncate">
-                      {selectedFile.name}
-                    </h5>
-                    <span className="text-[10px] text-(--text-muted)">{selectedFile.size}</span>
-                  </div>
-                </div>
-
-                {/* Details Meta */}
-                <div className="text-[11px] space-y-1.5 p-2.5 rounded-lg bg-(--bg-primary)/60 border border-(--border-subtle)">
-                  <div className="flex justify-between text-(--text-secondary)">
-                    <span>확장자</span>
-                    <span className="font-mono uppercase font-bold text-(--text-primary)">
-                      {selectedFile.extension}
-                    </span>
-                  </div>
-                  <div className="flex justify-between text-(--text-secondary)">
-                    <span>수정 일시</span>
-                    <span className="text-(--text-primary)">{selectedFile.updatedAt}</span>
-                  </div>
-                  <div className="flex justify-between text-(--text-secondary)">
-                    <span>보안 검증</span>
-                    <span className="text-emerald-500 font-semibold">100% Verified</span>
-                  </div>
                 </div>
-
-                {/* File Preview Snippet */}
-                <div>
-                  <span className="text-[10px] font-bold text-(--text-muted) mb-1 block">
-                    코드/데이터 미리보기
-                  </span>
-                  <div className="rounded-lg bg-(--bg-primary) border border-(--border-subtle) p-2 text-[10px] font-mono text-(--text-secondary) overflow-x-auto max-h-36 leading-relaxed">
-                    <pre>
-                      <code>{selectedFile.content || '// 파일 내용이 없습니다.'}</code>
-                    </pre>
-                  </div>
-                </div>
-              </div>
-            ) : (
-              <div className="py-10 text-center text-xs text-(--text-muted)">
-                선택된 파일이 없습니다.
-              </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>
 
-          <div className="pt-3 border-t border-(--border-subtle) flex gap-2">
-            <button
-              onClick={() => copyContent(selectedFile?.content)}
-              className="flex-1 py-1.5 rounded-lg bg-(--accent-primary) hover:bg-(--accent-hover) text-white font-semibold text-xs flex items-center justify-center gap-1.5 shadow-xs transition-colors"
-            >
-              <Download className="w-3.5 h-3.5" />
-              <span>다운로드</span>
-            </button>
-            <button
-              className="p-1.5 rounded-lg bg-(--bg-primary) hover:bg-rose-500/10 hover:text-rose-500 text-(--text-muted) border border-(--border-subtle) transition-colors"
-              title="삭제"
-            >
-              <Trash2 className="w-3.5 h-3.5" />
-            </button>
-          </div>
-        </aside>
-      </div>
-    </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>
   );
 }