fix: [esign] 시험 테스트 모달 캔버스 3배 확대 (높이 450px, 폰트 54px, 모달 900px)
This commit is contained in:
@@ -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);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user