feat(music-lab): Phase 1 UI — 보컬 성별, 제외 스타일, weight 슬라이더, 더보기 메뉴, CoverArtModal

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/pages/music/components/CoverArtModal.jsx

@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+
+const CoverArtModal = ({ images, onSelect, onClose }) => {
+    const [selected, setSelected] = useState(null);
+
+    if (!images || images.length === 0) return null;
+
+    return (
+        <div className="ms-modal-overlay" onClick={onClose}>
+            <div className="ms-modal" onClick={(e) => e.stopPropagation()}>
+                <div className="ms-modal__header">
+                    <h3 className="ms-modal__title">Cover Art 선택</h3>
+                    <button type="button" className="ms-modal__close" onClick={onClose}>✕</button>
+                </div>
+                <div className="ms-cover-grid">
+                    {images.map((url, idx) => (
+                        <button
+                            key={idx}
+                            type="button"
+                            className={`ms-cover-option ${selected === idx ? 'is-selected' : ''}`}
+                            onClick={() => setSelected(idx)}
+                        >
+                            <img src={url} alt={`Cover option ${idx + 1}`} className="ms-cover-option__img" />
+                            <span className="ms-cover-option__label">Option {idx + 1}</span>
+                        </button>
+                    ))}
+                </div>
+                <div className="ms-modal__actions">
+                    <button type="button" className="ms-btn ms-btn--accent" disabled={selected === null}
+                        onClick={() => { if (selected !== null) onSelect(images[selected]); }}>
+                        이 이미지 사용
+                    </button>
+                    <button type="button" className="ms-btn ms-btn--ghost" onClick={onClose}>취소</button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CoverArtModal;