initial commit

components/TransferQueue.tsx

@@ -0,0 +1,76 @@
+import React, { useEffect, useRef } from 'react';
+import { TransferItem } from '../types';
+import { ArrowUp, ArrowDown, CheckCircle, XCircle, Clock } from 'lucide-react';
+
+interface TransferQueueProps {
+  queue: TransferItem[];
+}
+
+const TransferQueue: React.FC<TransferQueueProps> = ({ queue }) => {
+  return (
+    <div className="flex flex-col h-full bg-white border border-slate-300 rounded-lg overflow-hidden shadow-sm">
+      <div className="bg-slate-50 px-3 py-2 border-b border-slate-200 flex justify-between items-center">
+        <span className="text-slate-600 text-xs font-semibold uppercase tracking-wider">전송 대기열 (Queue)</span>
+        <div className="text-xs text-slate-500">
+          {queue.filter(i => i.status === 'transferring').length} 개 진행 중
+        </div>
+      </div>
+      
+      <div className="flex-1 overflow-y-auto bg-white">
+        <table className="w-full text-xs text-left border-collapse">
+          <thead className="bg-slate-50 text-slate-500 sticky top-0 border-b border-slate-200">
+            <tr>
+              <th className="p-2 w-8"></th>
+              <th className="p-2">파일명</th>
+              <th className="p-2 w-24">구분</th>
+              <th className="p-2 w-48">진행률</th>
+              <th className="p-2 w-24 text-right">속도</th>
+            </tr>
+          </thead>
+          <tbody>
+            {queue.map((item) => (
+              <tr key={item.id} className="border-b border-slate-100 hover:bg-slate-50 text-slate-700">
+                <td className="p-2 text-center">
+                  {item.status === 'completed' && <CheckCircle size={14} className="text-emerald-500" />}
+                  {item.status === 'failed' && <XCircle size={14} className="text-red-500" />}
+                  {item.status === 'queued' && <Clock size={14} className="text-slate-400" />}
+                  {item.status === 'transferring' && (
+                    <div className="w-3 h-3 rounded-full border-2 border-blue-500 border-t-transparent animate-spin mx-auto"></div>
+                  )}
+                </td>
+                <td className="p-2 truncate max-w-[200px] font-medium">{item.filename}</td>
+                <td className="p-2">
+                  <span className={`flex items-center gap-1 ${item.direction === 'upload' ? 'text-blue-600' : 'text-green-600'}`}>
+                    {item.direction === 'upload' ? <ArrowUp size={12} /> : <ArrowDown size={12} />}
+                    {item.direction === 'upload' ? '업로드' : '다운로드'}
+                  </span>
+                </td>
+                <td className="p-2">
+                  <div className="w-full bg-slate-100 rounded-full h-2 overflow-hidden border border-slate-200">
+                    <div 
+                      className={`h-full transition-all duration-200 ${
+                        item.status === 'completed' ? 'bg-emerald-500' : 
+                        item.status === 'failed' ? 'bg-red-500' : 'bg-blue-500'
+                      }`}
+                      style={{ width: `${item.progress}%` }}
+                    />
+                  </div>
+                </td>
+                <td className="p-2 text-right font-mono text-slate-500">{item.speed}</td>
+              </tr>
+            ))}
+            {queue.length === 0 && (
+              <tr>
+                <td colSpan={5} className="p-8 text-center text-slate-400 italic">
+                  전송 대기열이 비어있습니다.
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default TransferQueue;