web-page/src/pages/portfolio/PasswordModal.jsx

import { useState } from 'react';

export default function PasswordModal({ open, onAuth, onClose, error }) {
    const [pw, setPw] = useState('');
    const [loading, setLoading] = useState(false);

    if (!open) return null;

    const handleSubmit = async (e) => {
        e.preventDefault();
        if (!pw.trim()) return;
        setLoading(true);
        await onAuth(pw);
        setLoading(false);
        setPw('');
    };

    return (
        <div className="pf-modal-backdrop" onClick={onClose}>
            <div className="pf-modal" onClick={(e) => e.stopPropagation()}>
                <h3 className="pf-modal__title">편집 모드</h3>
                <p className="pf-modal__desc">편집하려면 비밀번호를 입력하세요.</p>
                <form onSubmit={handleSubmit}>
                    <input
                        type="password"
                        className="pf-modal__input"
                        placeholder="비밀번호"
                        value={pw}
                        onChange={(e) => setPw(e.target.value)}
                        autoFocus
                    />
                    {error && <p className="pf-modal__error">{error}</p>}
                    <div className="pf-modal__actions">
                        <button type="button" className="button ghost" onClick={onClose}>취소</button>
                        <button type="submit" className="button primary" disabled={loading || !pw.trim()}>
                            {loading ? '확인 중...' : '확인'}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    );
}