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

src/pages/music/components/PipelineStartModal.jsx

@@ -0,0 +1,33 @@
+import { useState } from 'react';
+import { createPipeline, startPipeline } from '../../../api';
+
+export default function PipelineStartModal({ library, onClose, onCreated }) {
+    const [tid, setTid] = useState(library?.[0]?.id || '');
+    const [error, setError] = useState('');
+
+    const submit = async () => {
+        try {
+            const p = await createPipeline(parseInt(tid));
+            await startPipeline(p.id);
+            onCreated(p);
+        } catch (e) { setError(String(e)); }
+    };
+
+    return (
+        <div className="modal-overlay" onClick={onClose}>
+            <div className="modal-body" onClick={e => e.stopPropagation()}>
+                <h3>새 파이프라인 시작</h3>
+                <select value={tid} onChange={e => setTid(e.target.value)}>
+                    {(library || []).map(t => (
+                        <option key={t.id} value={t.id}>{t.title} ({t.genre})</option>
+                    ))}
+                </select>
+                {error && <div className="ms-error">{error}</div>}
+                <div className="modal-actions">
+                    <button onClick={onClose}>취소</button>
+                    <button className="button primary" onClick={submit}>시작</button>
+                </div>
+            </div>
+        </div>
+    );
+}