feat(web-ui): PipelineTab — 진행 중 파이프라인 카드 보드

src/pages/music/components/PipelineTab.jsx

@@ -0,0 +1,54 @@
+import { useEffect, useState, useRef } from 'react';
+import { listPipelines } from '../../../api';
+import PipelineCard from './PipelineCard';
+import PipelineStartModal from './PipelineStartModal';
+
+export default function PipelineTab({ library, initialTrackId }) {
+    const [pipelines, setPipelines] = useState([]);
+    const [filter, setFilter] = useState('active');
+    const [modalOpen, setModalOpen] = useState(false);
+    const timer = useRef(null);
+
+    const load = async () => {
+        try {
+            const r = await listPipelines(filter);
+            setPipelines(r.pipelines || []);
+        } catch { /* swallow */ }
+    };
+
+    useEffect(() => {
+        load();
+        timer.current = setInterval(load, 5000);
+        return () => clearInterval(timer.current);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [filter]);
+
+    useEffect(() => {
+        if (initialTrackId) setModalOpen(true);
+    }, [initialTrackId]);
+
+    return (
+        <div className="pipeline-container">
+            <div className="pipeline-toolbar">
+                <button className="button primary" onClick={() => setModalOpen(true)}>+ 새 파이프라인</button>
+                <select value={filter} onChange={e => setFilter(e.target.value)}>
+                    <option value="active">진행 중</option>
+                    <option value="all">전체</option>
+                </select>
+            </div>
+            <div className="pipeline-grid">
+                {pipelines.map(p => (
+                    <PipelineCard key={p.id} pipeline={p} onChanged={load} />
+                ))}
+                {pipelines.length === 0 && <p className="ms-empty">진행 중인 파이프라인이 없습니다</p>}
+            </div>
+            {modalOpen && (
+                <PipelineStartModal
+                    library={library}
+                    onClose={() => setModalOpen(false)}
+                    onCreated={() => { setModalOpen(false); load(); }}
+                />
+            )}
+        </div>
+    );
+}