dpot-frontend/app/studio/donation/alert/_components/AlertPreviewPanel.tsx

'use client';

import { useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPlay } from '@fortawesome/free-solid-svg-icons';
import {
	DONATION_AMOUNT_MIN, DONATION_AMOUNT_MAX, DONATION_AMOUNT_STEP, DONATION_AMOUNT_DEFAULT,
	ALERT_NAME_MAX_LENGTH, ALERT_MESSAGE_MAX_LENGTH,
	PREVIEW_DEFAULT_NAME, PREVIEW_DEFAULT_MESSAGE
} from '@/constants/donation';

type Props = {
	widgetToken: string|null;
	iframeRef: React.RefObject<HTMLIFrameElement|null>;
};

export default function AlertPreviewPanel({ widgetToken, iframeRef }: Props) {
	const [previewName, setPreviewName] = useState(PREVIEW_DEFAULT_NAME);
	const [previewAmount, setPreviewAmount] = useState(DONATION_AMOUNT_DEFAULT);
	const [previewMessage, setPreviewMessage] = useState(PREVIEW_DEFAULT_MESSAGE);

	const handlePreview = () => {
		if (!iframeRef.current?.contentWindow) {
			return;
		}

		iframeRef.current.contentWindow.postMessage({
			type: 'ALERT_TEST',
			sendName: previewName || PREVIEW_DEFAULT_NAME,
			amount: previewAmount || DONATION_AMOUNT_DEFAULT,
			message: previewMessage || '',
		}, window.location.origin);
	};

	return (
		<aside className="alert-config__preview-panel">
			{/* 미리보기 iframe */}
			<div className="alert-config__widget">
				<div className="alert-config__widget-label">미리보기</div>
				{widgetToken ? (
					<iframe
						ref={iframeRef}
						src={`/widget/alert/${widgetToken}?preview=1`}
						className="alert-config__widget-frame"
						title="알림 미리보기"
					/>
				) : (
					<div className="alert-config__widget-empty">채널 정보를 불러오는 중...</div>
				)}
			</div>

			{/* 미리보기 form */}
			<fieldset className="alert-config__fieldset">
				<legend className="alert-config__legend">미리보기</legend>
				<div className="alert-config__preview-form">
					<div className="alert-config__field">
						<label htmlFor="preview-amount" className="alert-config__field-label">후원 금액 (원)</label>
						<input
							id="preview-amount"
							type="number"
							className="alert-config__input"
							min={DONATION_AMOUNT_MIN}
							max={DONATION_AMOUNT_MAX}
							step={DONATION_AMOUNT_STEP}
							value={previewAmount}
							onChange={e => setPreviewAmount(parseInt(e.target.value) || DONATION_AMOUNT_DEFAULT)}
						/>
					</div>
					<div className="alert-config__field">
						<label htmlFor="preview-name" className="alert-config__field-label">이름</label>
						<input
							id="preview-name"
							type="text"
							className="alert-config__input"
							maxLength={ALERT_NAME_MAX_LENGTH}
							value={previewName}
							onChange={e => setPreviewName(e.target.value)}
							placeholder="후원자 이름"
						/>
					</div>
					<div className="alert-config__field">
						<label htmlFor="preview-message" className="alert-config__field-label">보낼 내용</label>
						<input
							id="preview-message"
							type="text"
							className="alert-config__input"
							maxLength={ALERT_MESSAGE_MAX_LENGTH}
							value={previewMessage}
							onChange={e => setPreviewMessage(e.target.value)}
							placeholder="후원 메시지"
						/>
					</div>
					<button
						type="button"
						className="alert-config__btn alert-config__btn--primary alert-config__preview-btn"
						onClick={handlePreview}
						disabled={!widgetToken}
					>
						<FontAwesomeIcon icon={faPlay} />
						미리보기
					</button>
				</div>
			</fieldset>
		</aside>
	);
}