src/components/auth/Join.jsx

@@ -6,7 +6,7 @@ import { useRouter } from 'next/navigation'
 import { useMessage } from '@/hooks/useMessage'
 import Cookies from 'js-cookie'
 
-import { isObjectNotEmpty, inputTelNumberCheck, inputNumberCheck } from '@/util/common-utils'
+import { isObjectNotEmpty, inputTelNumberCheck, inputNumberCheck, inputUserIdCheck } from '@/util/common-utils'
 
 import GlobalSpinner from '@/components/common/spinner/GlobalSpinner'
 
@@ -133,6 +133,13 @@ export default function Join() {
       alert(getMessage('common.message.required.data', [getMessage('join.sub2.userId')]))
       userIdRef.current.focus()
       return false
+    } else {
+      const userIdRegex = /^[A-Za-z0-9!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?`~]+$/
+      if (!userIdRegex.test(userId)) {
+        alert(getMessage('join.validation.check1', [getMessage('join.sub2.userId')]))
+        userIdRef.current.focus()
+        return false
+      }
     }
 
     // 담당자 정보 - 이메일 주소
@@ -436,7 +443,15 @@ export default function Join() {
                       </th>
                       <td>
                         <div className="input-wrap" style={{ width: '200px' }}>
-                          <input type="text" id="userId" name="userId" className="input-light" maxLength={20} ref={userIdRef} />
+                          <input
+                            type="text"
+                            id="userId"
+                            name="userId"
+                            className="input-light"
+                            maxLength={20}
+                            onChange={inputUserIdCheck}
+                            ref={userIdRef}
+                          />
                         </div>
                       </td>
                     </tr>

src/util/common-utils.js

@@ -94,6 +94,17 @@ export const inputNumberCheck = (e) => {
   }
 }
 
+// 영문, 숫자, 특수문자(ASCII)만 입력 체크
+export const inputUserIdCheck = (e) => {
+  const input = e.target
+  const allowedRegex = /^[A-Za-z0-9!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?`~]*$/g
+  if (allowedRegex.test(input.value)) {
+    input.value = input.value
+  } else {
+    input.value = input.value.replace(/[^A-Za-z0-9!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?`~]/g, '')
+  }
+}
+
 // 값이 숫자인지 확인
 export const numberCheck = (value) => {
   return !isNaN(value)