폰트 크기 조절

frontend/components/report/designer/SignatureGenerator.tsx

@@ -125,10 +125,21 @@ export function SignatureGenerator({ onSignatureSelect }: SignatureGeneratorProp
 
         // 텍스트 스타일
         ctx.fillStyle = "#000000";
-        ctx.font = `${font.weight} 124px ${font.style}`;
+        let fontSize = 124;
+        ctx.font = `${font.weight} ${fontSize}px ${font.style}`;
         ctx.textAlign = "center";
         ctx.textBaseline = "middle";
 
+        // 텍스트 너비 측정 및 크기 조정 (캔버스 너비의 90% 이내로)
+        let textWidth = ctx.measureText(name).width;
+        const maxWidth = canvas.width * 0.9;
+
+        while (textWidth > maxWidth && fontSize > 30) {
+          fontSize -= 2;
+          ctx.font = `${font.weight} ${fontSize}px ${font.style}`;
+          textWidth = ctx.measureText(name).width;
+        }
+
         // 텍스트 그리기
         ctx.fillText(name, canvas.width / 2, canvas.height / 2);
 
@@ -151,7 +162,14 @@ export function SignatureGenerator({ onSignatureSelect }: SignatureGeneratorProp
       {/* 언어 선택 */}
       <div className="space-y-2">
         <Label className="text-xs">맞춤 방식</Label>
-        <Select value={language} onValueChange={(value: "korean" | "english") => setLanguage(value)}>
+        <Select
+          value={language}
+          onValueChange={(value: "korean" | "english") => {
+            setLanguage(value);
+            setName(""); // 언어 변경 시 입력값 초기화
+            setGeneratedSignatures([]); // 생성된 서명도 초기화
+          }}
+        >
           <SelectTrigger className="h-8">
             <SelectValue />
           </SelectTrigger>
@@ -168,8 +186,21 @@ export function SignatureGenerator({ onSignatureSelect }: SignatureGeneratorProp
         <div className="flex gap-2">
           <Input
             value={name}
-            onChange={(e) => setName(e.target.value)}
+            onChange={(e) => {
+              const input = e.target.value;
+              // 국문일 때는 한글, 영문일 때는 영문+숫자+공백만 허용
+              if (language === "korean") {
+                // 한글만 허용 (자음, 모음, 완성된 글자)
+                const koreanOnly = input.replace(/[^\u3131-\u3163\uac00-\ud7a3\s]/g, "");
+                setName(koreanOnly);
+              } else {
+                // 영문, 숫자, 공백만 허용
+                const englishOnly = input.replace(/[^a-zA-Z\s]/g, "");
+                setName(englishOnly);
+              }
+            }}
             placeholder={language === "korean" ? "홍길동" : "John Doe"}
+            maxLength={14}
             className="h-8 flex-1"
             onKeyDown={(e) => {
               if (e.key === "Enter") {
@@ -206,7 +237,7 @@ export function SignatureGenerator({ onSignatureSelect }: SignatureGeneratorProp
                     <img
                       src={signature}
                       alt={`서명 ${index + 1}`}
-                      className="h-auto max-h-[60px] w-auto max-w-full object-contain"
+                      className="h-auto max-h-[45px] w-auto max-w-[280px] object-contain"
                     />
                     <p className="ml-2 text-xs text-gray-400 opacity-0 transition-opacity group-hover:opacity-100">
                       {fonts[index].name}