파일 뷰어 구성 요소
기업/전문가 스타일, 유사한 색 구성표 및 다크 모드를 지원하는 복잡하고 반응이 빠른 파일 뷰어 구성 요소로, 비즈니스 환경에 적합합니다.
HTML 코드
<div class="font-sans antialiased bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 p-4 sm:p-6 lg:p-8 flex items-center justify-center min-h-screen">
<div class="flex flex-col lg:flex-row w-full max-w-7xl bg-white dark:bg-gray-800 rounded-lg shadow-xl dark:shadow-2xl overflow-hidden">
<!-- Left Sidebar: File List/Navigation -->
<div class="w-full lg:w-1/4 p-4 sm:p-6 border-b lg:border-b-0 lg:border-r border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-850 flex flex-col">
<div class="text-lg sm:text-xl font-semibold mb-6 flex items-center">
<svg class="w-6 h-6 mr-2 text-teal-600 dark:text-teal-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"></path>
</svg>
Documents
</div>
<div class="relative mb-6">
<input type="text" placeholder="Search files..." class="w-full pl-10 pr-4 py-2 rounded-lg bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-teal-500 dark:focus:ring-teal-400 focus:border-transparent dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400">
<svg class="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</div>
<div class="overflow-y-auto flex-grow pr-2 -mr-2">
<a href="#" class="flex items-center p-3 rounded-lg bg-gray-200 dark:bg-gray-700 text-teal-700 dark:text-teal-300 font-medium mb-2 transition duration-200 ease-in-out hover:bg-gray-300 dark:hover:bg-gray-600">
<svg class="w-5 h-5 mr-3 text-teal-600 dark:text-teal-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
<span>2024 Lookbook.pdf</span>
</a>
<a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 mb-2 transition duration-200 ease-in-out">
<svg class="w-5 h-5 mr-3 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
<span>Campaign_Spring2025.jpg</span>
</a>
<a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 mb-2 transition duration-200 ease-in-out">
<svg class="w-5 h-5 mr-3 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-2.414-2.414A1 1 0 0015.586 6H7a2 2 0 00-2 2v11a2 2 0 002 2z"></path></svg>
<span>Marketing_Strategy.docx</span>
</a>
<a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 mb-2 transition duration-200 ease-in-out">
<svg class="w-5 h-5 mr-3 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
<span>Q4_Sales_Report.xlsx</span>
</a>
<a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 mb-2 transition duration-200 ease-in-out">
<svg class="w-5 h-5 mr-3 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>
<span>Brand_Video_Draft.mp4</span>
</a>
<a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 mb-2 transition duration-200 ease-in-out">
<svg class="w-5 h-5 mr-3 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
<span>Website_Content_Plan.pdf</span>
</a>
</div>
<div class="mt-auto pt-4 border-t border-gray-200 dark:border-gray-700">
<button class="w-full flex items-center justify-center px-4 py-2 bg-teal-600 hover:bg-teal-700 dark:bg-teal-500 dark:hover:bg-teal-600 text-white font-semibold rounded-lg shadow-md transition duration-200 ease-in-out">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path>
</svg>
Upload New File
</button>
</div>
</div>
<!-- Main Content: File Viewer -->
<div class="w-full lg:w-3/4 flex flex-col">
<!-- Viewer Header -->
<div class="p-4 sm:p-6 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
<h2 class="text-lg sm:text-xl font-bold flex items-center">
<svg class="w-6 h-6 mr-3 text-teal-600 dark:text-teal-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
2024 Lookbook.pdf
</h2>
<div class="flex space-x-2 sm:space-x-4">
<button class="p-2 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-200 focus:outline-none focus:ring-2 focus:ring-teal-500">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
<span class="sr-only">View</span>
</button>
<button class="p-2 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-200 focus:outline-none focus:ring-2 focus:ring-teal-500">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0L8 12m4 4V4"></path></svg>
<span class="sr-only">Download</span>
</button>
<button class="p-2 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-200 focus:outline-none focus:ring-2 focus:ring-teal-500">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
<span class="sr-only">More Options</span>
</button>
</div>
</div>
<!-- File Content Preview (Image/PDF Placeholder) -->
<div class="flex-grow p-4 sm:p-6 overflow-y-auto flex items-center justify-center bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700">
<img src="https://picsum.photos/800/600?random=1" alt="Document Preview" class="max-w-full max-h-[70vh] object-contain rounded-lg shadow-lg dark:shadow-xl">
</div>
<!-- File Details / Actions -->
<div class="p-4 sm:p-6 bg-white dark:bg-gray-800">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
<div>
<p class="text-xs sm:text-sm text-gray-500 dark:text-gray-400">File Type:</p>
<p class="font-medium text-base sm:text-lg">PDF Document</p>
</div>
<div>
<p class="text-xs sm:text-sm text-gray-500 dark:text-gray-400">Last Modified:</p>
<p class="font-medium text-base sm:text-lg">October 26, 2023, 10:30 AM</p>
</div>
<div>
<p class="text-xs sm:text-sm text-gray-500 dark:text-gray-400">File Size:</p>
<p class="font-medium text-base sm:text-lg">12.5 MB</p>
</div>
<div>
<p class="text-xs sm:text-sm text-gray-500 dark:text-gray-400">Uploaded By:</p>
<div class="flex items-center mt-1">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-7 h-7 rounded-full mr-2">
<span class="font-medium text-base sm:text-lg">Alex Johnson</span>
</div>
</div>
</div>
<div class="mt-4 flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-3">
<button class="flex-1 px-4 py-2 border border-teal-600 dark:border-teal-500 text-teal-600 dark:text-teal-400 rounded-lg hover:bg-teal-50 dark:hover:bg-gray-700 transition duration-200 focus:outline-none focus:ring-2 focus:ring-teal-500">
<svg class="w-5 h-5 inline-block mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h6a2 2 0 012 2v10a2 2 0 01-2 2h-6a2 2 0 00-2 2v-2m0-4h.01M12 15h.01"></path></svg>
Share File
</button>
<button class="flex-1 px-4 py-2 bg-teal-600 hover:bg-teal-700 dark:bg-teal-500 dark:hover:bg-teal-600 text-white rounded-lg shadow-md transition duration-200 focus:outline-none focus:ring-2 focus:ring-teal-500">
<svg class="w-5 h-5 inline-block mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
Edit Document
</button>
</div>
</div>
</div>
</div>
</div>관련 구성 요소
파일 뷰어 구성 요소
파스텔 색조의 스큐어모픽 파일 뷰어 구성 요소로, 전자 상거래를 위해 설계되었으며, 반응형 레이아웃과 다크 모드 지원을 특징으로 합니다. 탭과 콘텐츠 영역이 있는 실제 폴더를 모방합니다.
파일 뷰어 구성 요소
포트폴리오를 위해 설계된 복잡한 파일 뷰어 구성 요소로, 보색의 어두운 모드를 특징으로 하며 파일 트리, 콘텐츠 미리보기 및 자세한 정보를 표시합니다. 완벽하게 반응합니다.
파일 뷰어 구성 요소
Tailwind CSS를 사용하여 Material Design 스타일 및 다크 모드를 지원하는 반응형 파일 뷰어 구성 요소입니다. 구성 요소에는 아이콘, 이름, 크기 및 수정 날짜가 있는 파일 목록이 표시됩니다.