aidev
60 lines
1.9 KiB
TypeScript
60 lines
1.9 KiB
TypeScript
import React, { useState } from 'react';
|
|
|
|
interface AlertManagerProps {
|
|
alerts: Array<{ price: number; label: string }>;
|
|
onAdd: (price: number, label: string) => void;
|
|
onRemove: (price: number) => void;
|
|
onClose: () => void;
|
|
currentPrice: number;
|
|
}
|
|
|
|
const AlertManager: React.FC<AlertManagerProps> = ({ alerts, onAdd, onRemove, onClose, currentPrice }) => {
|
|
const [priceInput, setPriceInput] = useState(currentPrice.toFixed(2));
|
|
const [labelInput, setLabelInput] = useState('');
|
|
|
|
const handleAdd = () => {
|
|
const price = parseFloat(priceInput);
|
|
if (!isNaN(price) && price > 0) {
|
|
onAdd(price, labelInput.trim());
|
|
setLabelInput('');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="alert-panel">
|
|
<div className="alert-header">
|
|
<span className="alert-title">🔔 가격 알림</span>
|
|
<button className="alert-close" onClick={onClose}>✕</button>
|
|
</div>
|
|
<div className="alert-add">
|
|
<input
|
|
className="alert-input"
|
|
type="number"
|
|
value={priceInput}
|
|
onChange={e => setPriceInput(e.target.value)}
|
|
placeholder="가격"
|
|
/>
|
|
<input
|
|
className="alert-input"
|
|
value={labelInput}
|
|
onChange={e => setLabelInput(e.target.value)}
|
|
placeholder="메모 (선택)"
|
|
/>
|
|
<button className="alert-add-btn" onClick={handleAdd}>추가</button>
|
|
</div>
|
|
<div className="alert-body">
|
|
{alerts.length === 0 && <div className="alert-empty">설정된 알림 없음</div>}
|
|
{alerts.map((a, i) => (
|
|
<div key={i} className="alert-item">
|
|
<span className="alert-price">{a.price.toFixed(2)}</span>
|
|
{a.label && <span className="alert-label">{a.label}</span>}
|
|
<button className="alert-remove" onClick={() => onRemove(a.price)}>✕</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AlertManager;
|