44. 파일 매니저 Design a file manager interface: **Layout**: - Sidebar: folder tree - Main: file list/grid - Header: breadcrumb + actions **Sidebar Folder Tree**: - Hierarchical expandable list - Folder icons - Active folder highlighted - Right-click: context menu - Drag to move files **Header Bar**: - Breadcrumb navigation - Search input - View toggle: list/grid/details - Sort dropdown - Actions: upload, new folder **List View**: - Columns: name, size, modified, owner - File icon based on type - Row selection with checkbox - Sortable columns **Grid View**: - Large thumbnails for images - Icon for other file types - File name below (truncated) - Hover: checkbox appears **File Item**: - Icon/thumbnail - Name (editable on rename) - File type indicator - Size formatted (KB, MB) - Modified date **Selection**: - Click to select - Ctrl+click multi-select - Shift+click range select - Select all checkbox **Context Menu** (right-click): - Open, Download - Cut, Copy, Paste - Rename, Delete - Share, Get link - Properties **Drag and Drop**: - Drag files to move - Drag to folders in tree - Multi-select drag - Drop zone highlighting **Upload**: - Drag files onto window - Upload progress modal - Queue for multiple files **Empty State**: - Illustration - "This folder is empty" - Upload or create folder CTA Tech: React + @tanstack/react-table + @dnd-kit + Tailwind