fix: [esign] 시험 테스트 모달 캔버스 3배 확대 (높이 450px, 폰트 54px, 모달 900px)

This commit is contained in:
김보곤
2026-03-23 08:05:43 +09:00
parent 815e3f362d
commit baf9a54bd7

View File

@@ -57,7 +57,7 @@
input: { width: '100%', padding: '8px 12px', border: '1px solid #d1d5db', borderRadius: '8px', fontSize: '14px', boxSizing: 'border-box' },
label: { display: 'block', fontSize: '13px', fontWeight: '600', color: '#374151', marginBottom: '4px' },
overlay: { position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.5)', zIndex: 9999, display: 'flex', alignItems: 'center', justifyContent: 'center' },
modal: { background: '#fff', borderRadius: '16px', padding: '24px', width: '90%', maxWidth: '560px', maxHeight: '90vh', overflowY: 'auto', position: 'relative' },
modal: { background: '#fff', borderRadius: '16px', padding: '24px', width: '94%', maxWidth: '900px', maxHeight: '92vh', overflowY: 'auto', position: 'relative' },
};
// ─── Handwriting Canvas ───
@@ -69,15 +69,15 @@
const init = useCallback(() => {
const c = canvasRef.current; if (!c || !containerRef.current) return;
c.width = containerRef.current.offsetWidth; c.height = 150;
c.width = containerRef.current.offsetWidth; c.height = 450;
const ctx = c.getContext('2d'); ctx.fillStyle = '#fff'; ctx.fillRect(0, 0, c.width, c.height);
if (guideText) { ctx.save(); ctx.font = '18px "Pretendard","Malgun Gothic",sans-serif'; ctx.fillStyle = 'rgba(156,163,175,0.2)'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(guideText, c.width/2, c.height/2); ctx.restore(); }
if (guideText) { ctx.save(); ctx.font = '54px "Pretendard","Malgun Gothic",sans-serif'; ctx.fillStyle = 'rgba(156,163,175,0.2)'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(guideText, c.width/2, c.height/2); ctx.restore(); }
ctx.save(); ctx.strokeStyle = 'rgba(229,231,235,0.4)'; ctx.lineWidth = 1; ctx.setLineDash([4,4]); ctx.beginPath(); ctx.moveTo(16, c.height/2+14); ctx.lineTo(c.width-16, c.height/2+14); ctx.stroke(); ctx.setLineDash([]); ctx.restore();
onDataChange(null);
}, [guideText, onDataChange]);
const start = (e) => { e.preventDefault(); drawingRef.current = true; lastRef.current = getP(e); };
const move = (e) => { e.preventDefault(); if (!drawingRef.current) return; const ctx = canvasRef.current.getContext('2d'); const p = getP(e); ctx.beginPath(); ctx.moveTo(lastRef.current.x, lastRef.current.y); ctx.lineTo(p.x, p.y); ctx.strokeStyle = '#1f2937'; ctx.lineWidth = 2.5; ctx.lineCap = 'round'; ctx.stroke(); lastRef.current = p; };
const move = (e) => { e.preventDefault(); if (!drawingRef.current) return; const ctx = canvasRef.current.getContext('2d'); const p = getP(e); ctx.beginPath(); ctx.moveTo(lastRef.current.x, lastRef.current.y); ctx.lineTo(p.x, p.y); ctx.strokeStyle = '#1f2937'; ctx.lineWidth = 4; ctx.lineCap = 'round'; ctx.stroke(); lastRef.current = p; };
const end = () => { if (drawingRef.current) { drawingRef.current = false; onDataChange(canvasRef.current.toDataURL('image/png')); } };
useEffect(() => { init(); }, [init]);
@@ -105,7 +105,7 @@
const handleClear = () => {
const c = canvasRef.current; if (!c) return;
const ctx = c.getContext('2d'); ctx.fillStyle = '#fff'; ctx.fillRect(0, 0, c.width, c.height);
if (currentStep?.text) { ctx.save(); ctx.font = '18px "Pretendard","Malgun Gothic",sans-serif'; ctx.fillStyle = 'rgba(156,163,175,0.2)'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(currentStep.text, c.width/2, c.height/2); ctx.restore(); }
if (currentStep?.text) { ctx.save(); ctx.font = '54px "Pretendard","Malgun Gothic",sans-serif'; ctx.fillStyle = 'rgba(156,163,175,0.2)'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(currentStep.text, c.width/2, c.height/2); ctx.restore(); }
setImageData(null); setResult(null);
};