41 lines
1.8 KiB
JavaScript
41 lines
1.8 KiB
JavaScript
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;
|