From 8efda6cb5e70e66bca4d24df9da63c253f23b278 Mon Sep 17 00:00:00 2001
From: ysCha <yscha@interplug.co.kr>
Date: Tue, 3 Feb 2026 13:47:54 +0900
Subject: [PATCH] =?UTF-8?q?=EC=95=84=EC=9D=B4=EB=94=94=20=EC=8B=A0?=
 =?UTF-8?q?=EC=B2=AD=EC=8B=9C=20=EC=98=81=EB=AC=B8,=20=EC=88=AB=EC=9E=90,?=
 =?UTF-8?q?=20=ED=8A=B9=EC=88=98=EB=AC=B8=EC=9E=90=EB=A7=8C..=EC=9E=85?=
 =?UTF-8?q?=EB=A0=A5=EA=B0=80=EB=8A=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/auth/Join.jsx | 19 +++++++++++++++++--
 src/util/common-utils.js     | 11 +++++++++++
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/components/auth/Join.jsx b/src/components/auth/Join.jsx
index 4062d313..94f7fa3e 100644
--- a/src/components/auth/Join.jsx
+++ b/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>
diff --git a/src/util/common-utils.js b/src/util/common-utils.js
index 0a1265fe..2b3fe37d 100644
--- a/src/util/common-utils.js
+++ b/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)