'use client'; import { useState } from 'react'; interface FileItem { id: number; name: string; type: 'folder' | 'image' | 'document' | 'video'; size?: string; modified: string; } export default function FileManagerGridDemo() { const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid'); const [selectedItems, setSelectedItems] = useState([]); const files: FileItem[] = [ { id: 1, name: 'Documents', type: 'folder', modified: '2024-01-15' }, { id: 2, name: 'Images', type: 'folder', modified: '2024-01-14' }, { id: 3, name: 'Videos', type: 'folder', modified: '2024-01-13' }, { id: 4, name: 'report.pdf', type: 'document', size: '2.4 MB', modified: '2024-01-12' }, { id: 5, name: 'photo.jpg', type: 'image', size: '1.8 MB', modified: '2024-01-11' }, { id: 6, name: 'presentation.pptx', type: 'document', size: '5.2 MB', modified: '2024-01-10' }, ]; const icons = { folder: '📁', image: '🖼️', document: '📄', video: '🎬', }; const toggleSelect = (id: number) => { setSelectedItems(prev => prev.includes(id) ? prev.filter(i => i !== id) : [...prev, id] ); }; return (

{/* Header */}

내 파일

6개 항목

{/* Toolbar */}

{/* Files */} {viewMode === 'grid' ? (

{files.map((file) => (

toggleSelect(file.id)} className={`bg-white rounded-xl border-2 p-4 cursor-pointer transition-colors ${ selectedItems.includes(file.id) ? 'border-blue-500 bg-blue-50' : 'border-gray-200 hover:border-gray-300' }`} >

{icons[file.type]}

{file.name}

{file.size &&

{file.size}

}

))}

) : (

{files.map((file) => ( ))}

이름	크기	수정일
{icons[file.type]} {file.name}	{file.size \|\| '-'}	{file.modified}

)}

); }

File Manager Grid

내 파일