dd

src/shared/ui/masked-input/masked-name-input.tsx

@@ -24,7 +24,28 @@ export const MaskedNameInput = ({
       className={className}
       value={isComposing ? value : getMaskedName(value)}
       placeholder={placeholder}
-      
+      onKeyDown={(e) => {
+        // 스페이스바 입력 차단
+        if (e.key === ' ') {
+          e.preventDefault();
+        }
+        // 백스페이스 처리 (composition 중이 아닐 때만)
+        else if (e.key === 'Backspace' && !isComposing) {
+          e.preventDefault();
+          onChange(value.slice(0, -1));
+        }
+        // 영문자 입력 처리 (composition 중이 아닐 때만)
+        else if (!isComposing && e.key.length === 1 && !e.ctrlKey && !e.metaKey) {
+          if (/^[a-zA-Z]$/.test(e.key)) {
+            e.preventDefault();
+            onChange(value + e.key);
+          }
+          // 한글이 아닌 다른 문자는 차단
+          else if (!/^[ㄱ-ㅎㅏ-ㅣ가-힣]$/.test(e.key)) {
+            e.preventDefault();
+          }
+        }
+      }}
       onCompositionStart={() => setIsComposing(true)}
       onCompositionEnd={(e: any) => {
         setIsComposing(false);
@@ -33,6 +54,8 @@ export const MaskedNameInput = ({
         onChange(valueWithoutSpace);
       }}
       onChange={(e: ChangeEvent<HTMLInputElement>) => {
+        
+          // composition 중에는 스페이스 제거
           const valueWithoutSpace = e.target.value.replace(/\s/g, '');
           onChange(valueWithoutSpace);