[회원] 가입신청 유효성 검사 추가 및 로그인 화면 수정

src/components/auth/Join.jsx

@@ -1,53 +1,171 @@
 'use client'
 
+import { useRef } from 'react'
 import { useAxios } from '@/hooks/useAxios'
 import { useRouter } from 'next/navigation'
 import { useMessage } from '@/hooks/useMessage'
 import Cookies from 'js-cookie'
 
+import { isObjectNotEmpty, inputTelNumberCheck, inputNumberCheck } from '@/util/common-utils'
+
 export default function Join() {
   const { getMessage } = useMessage()
   const { promisePost } = useAxios()
   const router = useRouter()
 
+  const storeQcastNmRef = useRef()
+  const storeQcastNmKanaRef = useRef()
+  const postCdRef = useRef()
+  const addrRef = useRef()
+  const telNoRef = useRef()
+  const faxRef = useRef()
+  const userNmRef = useRef()
+  const userIdRef = useRef()
+  const emailRef = useRef()
+  const userTelNoRef = useRef()
+  const userFaxRef = useRef()
+
+  // 가입 신청 유효성 검사
+  const joinValidation = (formData) => {
+    // 판매대리점 정보 - 판매대리점명
+    const storeQcastNm = formData.get('storeQcastNm')
+    if (!isObjectNotEmpty(storeQcastNm)) {
+      alert(getMessage('common.message.required.data', [getMessage('join.sub1.storeQcastNm')]))
+      storeQcastNmRef.current.focus()
+      return false
+    }
+
+    // 판매대리점 정보 - 판매대리점명 후리가나
+    const storeQcastNmKana = formData.get('storeQcastNmKana')
+    if (!isObjectNotEmpty(storeQcastNmKana)) {
+      alert(getMessage('common.message.required.data', [getMessage('join.sub1.storeQcastNmKana')]))
+      storeQcastNmKanaRef.current.focus()
+      return false
+    }
+
+    // 판매대리점 정보 - 우편번호
+    const postCd = formData.get('postCd')
+    if (!isObjectNotEmpty(postCd)) {
+      alert(getMessage('common.message.required.data', [getMessage('join.sub1.postCd')]))
+      postCdRef.current.focus()
+      return false
+    }
+
+    // 판매대리점 정보 - 주소
+    const addr = formData.get('addr')
+    if (!isObjectNotEmpty(addr)) {
+      alert(getMessage('common.message.required.data', [getMessage('join.sub1.addr')]))
+      addrRef.current.focus()
+      return false
+    }
+
+    // 판매대리점 정보 - 전화번호
+    const telNo = formData.get('telNo')
+    if (!isObjectNotEmpty(telNo)) {
+      alert(getMessage('common.message.required.data', [getMessage('join.sub1.telNo')]))
+      telNoRef.current.focus()
+      return false
+    }
+
+    // 판매대리점 정보 - FAX 번호
+    const fax = formData.get('fax')
+    if (!isObjectNotEmpty(fax)) {
+      alert(getMessage('common.message.required.data', [getMessage('join.sub1.fax')]))
+      faxRef.current.focus()
+      return false
+    }
+
+    // 담당자 정보 - 담당자명
+    const userNm = formData.get('userNm')
+    if (!isObjectNotEmpty(userNm)) {
+      alert(getMessage('common.message.required.data', [getMessage('join.sub2.userNm')]))
+      userNmRef.current.focus()
+      return false
+    }
+
+    // 담당자 정보 - 신청 ID
+    const userId = formData.get('userId')
+    if (!isObjectNotEmpty(userId)) {
+      alert(getMessage('common.message.required.data', [getMessage('join.sub2.userId')]))
+      userIdRef.current.focus()
+      return false
+    }
+
+    // 담당자 정보 - 이메일 주소
+    const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
+
+    const email = formData.get('email')
+    if (!isObjectNotEmpty(email)) {
+      alert(getMessage('common.message.required.data', [getMessage('join.sub2.email')]))
+      emailRef.current.focus()
+      return false
+    } else {
+      // 이메일 정규식 검사
+      if (!emailRegex.test(email)) {
+        alert(getMessage('join.validation.check1', [getMessage('join.sub2.email')]))
+        emailRef.current.focus()
+        return false
+      }
+    }
+
+    // 담당자 정보 - 전화번호
+    const userTelNo = formData.get('userTelNo')
+    if (!isObjectNotEmpty(userTelNo)) {
+      alert(getMessage('common.message.required.data', [getMessage('join.sub2.telNo')]))
+      userTelNoRef.current.focus()
+      return false
+    }
+
+    // 담당자 정보 - FAX 번호
+    const userFax = formData.get('userFax')
+    if (!isObjectNotEmpty(userFax)) {
+      alert(getMessage('common.message.required.data', [getMessage('join.sub2.fax')]))
+      userFaxRef.current.focus()
+      return false
+    }
+    return true
+  }
+
   // 가입 신청
   const joinProcess = async (e) => {
     e.preventDefault()
     const formData = new FormData(e.target)
 
-    const param = {
+    if (joinValidation(formData)) {
-      storeQcastNm: formData.get('storeQcastNm'),
+      const param = {
-      storeQcastNmKana: formData.get('storeQcastNmKana'),
+        storeQcastNm: formData.get('storeQcastNm'),
-      postCd: formData.get('postCd'),
+        storeQcastNmKana: formData.get('storeQcastNmKana'),
-      addr: formData.get('addr'),
+        postCd: formData.get('postCd'),
-      telNo: formData.get('telNo'),
+        addr: formData.get('addr'),
-      fax: formData.get('fax'),
+        telNo: formData.get('telNo'),
-      bizNo: formData.get('bizNo'),
+        fax: formData.get('fax'),
-      userInfo: {
+        bizNo: formData.get('bizNo'),
-        userId: formData.get('userId'),
+        userInfo: {
-        userNm: formData.get('userNm'),
+          userId: formData.get('userId'),
-        userNmKana: formData.get('userNmKana'),
+          userNm: formData.get('userNm'),
-        telNo: formData.get('userTelNo'),
+          userNmKana: formData.get('userNmKana'),
-        fax: formData.get('userFax'),
+          telNo: formData.get('userTelNo'),
-        email: formData.get('email'),
+          fax: formData.get('userFax'),
-        category: formData.get('category'),
+          email: formData.get('email'),
-      },
+          category: formData.get('category'),
-    }
+        },
+      }
 
-    await promisePost({ url: '/api/login/v1.0/user/join', data: param })
+      await promisePost({ url: '/api/login/v1.0/user/join', data: param })
-      .then((res) => {
+        .then((res) => {
-        if (res) {
+          if (res) {
-          if (res.data.result.resultCode == 'S') {
+            if (res.data.result.resultCode == 'S') {
-            Cookies.set('joinEmail', formData.get('email'), { expires: 1 })
+              Cookies.set('joinEmail', formData.get('email'), { expires: 1 })
-            router.push('/join/complete')
+              router.push('/join/complete')
-          } else {
+            } else {
-            alert(res.data.result.resultMsg)
+              alert(res.data.result.resultMsg)
+            }
           }
-        }
+        })
-      })
+        .catch((error) => {
-      .catch((error) => {
+          alert(error.response.data.message)
-        alert(error.response.data.message)
+        })
-      })
+    }
   }
 
   return (
@@ -71,6 +189,7 @@ export default function Join() {
                   <col />
                 </colgroup>
                 <tbody>
+                  {/* 판매대리점명 */}
                   <tr>
                     <th>
                       {getMessage('join.sub1.storeQcastNm')} <span className="important">*</span>
@@ -81,14 +200,16 @@ export default function Join() {
                           type="text"
                           id="storeQcastNm"
                           name="storeQcastNm"
-                          required
                           alt={getMessage('join.sub1.storeQcastNm')}
                           className="input-light"
                           placeholder={getMessage('join.sub1.storeQcastNm_placeholder')}
+                          maxLength={30}
+                          ref={storeQcastNmRef}
                         />
                       </div>
                     </td>
                   </tr>
+                  {/* 판매대리점명 후리가나 */}
                   <tr>
                     <th>
                       {getMessage('join.sub1.storeQcastNmKana')} <span className="important">*</span>
@@ -99,13 +220,15 @@ export default function Join() {
                           type="text"
                           id="storeQcastNmKana"
                           name="storeQcastNmKana"
-                          required
                           className="input-light"
                           placeholder={getMessage('join.sub1.storeQcastNmKana_placeholder')}
+                          maxLength={30}
+                          ref={storeQcastNmKanaRef}
                         />
                       </div>
                     </td>
                   </tr>
+                  {/* 우편번호/주소 */}
                   <tr>
                     <th>
                       {getMessage('join.sub1.postCd')}/{getMessage('join.sub1.addr')} <span className="important">*</span>
@@ -117,9 +240,11 @@ export default function Join() {
                             type="text"
                             id="postCd"
                             name="postCd"
-                            required
                             className="input-light"
                             placeholder={getMessage('join.sub1.postCd_placeholder')}
+                            onChange={inputNumberCheck}
+                            maxLength={7}
+                            ref={postCdRef}
                           />
                         </div>
                         <div className="input-wrap" style={{ width: '495px' }}>
@@ -127,14 +252,16 @@ export default function Join() {
                             type="text"
                             id="addr"
                             name="addr"
-                            required
                             className="input-light"
                             placeholder={getMessage('join.sub1.addr_placeholder')}
+                            maxLength={50}
+                            ref={addrRef}
                           />
                         </div>
                       </div>
                     </td>
                   </tr>
+                  {/* 전화번호 */}
                   <tr>
                     <th>
                       {getMessage('join.sub1.telNo')} <span className="important">*</span>
@@ -145,13 +272,16 @@ export default function Join() {
                           type="text"
                           id="telNo"
                           name="telNo"
-                          required
                           className="input-light"
                           placeholder={getMessage('join.sub1.telNo_placeholder')}
-                        ></input>
+                          maxLength={15}
+                          onChange={inputTelNumberCheck}
+                          ref={telNoRef}
+                        />
                       </div>
                     </td>
                   </tr>
+                  {/* FAX 번호 */}
                   <tr>
                     <th>
                       {getMessage('join.sub1.fax')} <span className="important">*</span>
@@ -162,18 +292,21 @@ export default function Join() {
                           type="text"
                           id="fax"
                           name="fax"
-                          required
                           className="input-light"
                           placeholder={getMessage('join.sub1.fax_placeholder')}
-                        ></input>
+                          maxLength={15}
+                          onChange={inputTelNumberCheck}
+                          ref={faxRef}
+                        />
                       </div>
                     </td>
                   </tr>
+                  {/* 법인번호 */}
                   <tr>
                     <th>{getMessage('join.sub1.bizNo')}</th>
                     <td>
                       <div className="input-wrap" style={{ width: '200px' }}>
-                        <input type="text" id="bizNo" name="bizNo" className="input-light" />
+                        <input type="text" id="bizNo" name="bizNo" className="input-light" maxLength={15} onChange={inputTelNumberCheck} />
                       </div>
                     </td>
                   </tr>
@@ -196,44 +329,49 @@ export default function Join() {
                   <col />
                 </colgroup>
                 <tbody>
+                  {/* 담당자명 */}
                   <tr>
                     <th>
                       {getMessage('join.sub2.userNm')} <span className="important">*</span>
                     </th>
                     <td>
                       <div className="input-wrap" style={{ width: '200px' }}>
-                        <input type="text" id="userNm" name="userNm" className="input-light" required />
+                        <input type="text" id="userNm" name="userNm" className="input-light" maxLength={20} ref={userNmRef} />
                       </div>
                     </td>
                   </tr>
+                  {/* 담당자명 후리가나 */}
                   <tr>
                     <th>{getMessage('join.sub2.userNmKana')}</th>
                     <td>
                       <div className="input-wrap" style={{ width: '200px' }}>
-                        <input type="text" id="userNmKana" name="userNmKana" className="input-light" />
+                        <input type="text" id="userNmKana" name="userNmKana" maxLength={20} className="input-light" />
                       </div>
                     </td>
                   </tr>
+                  {/* 신청 ID */}
                   <tr>
                     <th>
                       {getMessage('join.sub2.userId')} <span className="important">*</span>
                     </th>
                     <td>
                       <div className="input-wrap" style={{ width: '200px' }}>
-                        <input type="text" id="userId" name="userId" className="input-light" required />
+                        <input type="text" id="userId" name="userId" className="input-light" maxLength={20} ref={userIdRef} />
                       </div>
                     </td>
                   </tr>
+                  {/* 이메일 주소 */}
                   <tr>
                     <th>
                       {getMessage('join.sub2.email')} <span className="important">*</span>
                     </th>
                     <td>
                       <div className="input-wrap" style={{ width: '200px' }}>
-                        <input type="text" id="email" name="email" className="input-light" required />
+                        <input type="text" id="email" name="email" className="input-light" maxLength={30} ref={emailRef} />
                       </div>
                     </td>
                   </tr>
+                  {/* 전화번호 */}
                   <tr>
                     <th>
                       {getMessage('join.sub2.telNo')} <span className="important">*</span>
@@ -246,11 +384,14 @@ export default function Join() {
                           name="userTelNo"
                           className="input-light"
                           placeholder={getMessage('join.sub2.telNo_placeholder')}
-                          required
+                          maxLength={15}
+                          onChange={inputTelNumberCheck}
+                          ref={userTelNoRef}
                         />
                       </div>
                     </td>
                   </tr>
+                  {/* FAX 번호 */}
                   <tr>
                     <th>
                       {getMessage('join.sub2.fax')} <span className="important">*</span>
@@ -263,16 +404,19 @@ export default function Join() {
                           name="userFax"
                           className="input-light"
                           placeholder={getMessage('join.sub1.fax_placeholder')}
-                          required
+                          maxLength={15}
+                          onChange={inputTelNumberCheck}
+                          ref={userFaxRef}
                         />
                       </div>
                     </td>
                   </tr>
+                  {/* 부서명 */}
                   <tr>
                     <th>{getMessage('join.sub2.category')}</th>
                     <td>
                       <div className="input-wrap" style={{ width: '200px' }}>
-                        <input type="text" id="category" name="category" className="input-light" />
+                        <input type="text" id="category" name="category" className="input-light" maxLength={20} />
                       </div>
                     </td>
                   </tr>

src/components/auth/Login.jsx

@@ -331,7 +331,15 @@ export default function Login() {
                   ></button>
                 </div>
                 <div className="pwreset-btn-box">
-                  <button type="button" className="login-btn light mr5" onClick={() => setPasswordReset(1)}>
+                  <button
+                    type="button"
+                    className="login-btn light mr5"
+                    onClick={() => {
+                      setPasswordReset(1)
+                      setCheckEmail('')
+                      setCheckId('')
+                    }}
+                  >
                     {getMessage('login.init_password.btn.back')}
                   </button>
                   <button type="button" className="login-btn" onClick={initPasswordProcess}>

src/locales/ja.json

@@ -445,6 +445,7 @@
   "join.complete.title": "Q.CAST3 ログインID発行申請完了",
   "join.complete.contents": "※ 申請したIDが承認されると、担当者情報に入力されたメールアドレスにログイン案内メールが送信されます。",
   "join.complete.email_comment": "担当者メールアドレス",
+  "join.validation.check1": "{0} の形式を確認してください。",
   "stuff.gridHeader.lastEditDatetime": "更新日時",
   "stuff.gridHeader.objectNo": "品番",
   "stuff.gridHeader.planTotCnt": "プラン数",

src/locales/ko.json

@@ -450,6 +450,7 @@
   "join.complete.title": "Q.CAST3 로그인ID 발행신청 완료",
   "join.complete.contents": "※ 신청한 ID가 승인되면, 담당자 정보에 입력한 이메일 주소로 로그인 관련 안내 메일이 전송됩니다.",
   "join.complete.email_comment": "담당자 이메일 주소",
+  "join.validation.check1": "{0} 형식을 확인해주세요.",
   "stuff.gridHeader.lastEditDatetime": "갱신일시",
   "stuff.gridHeader.objectNo": "물건번호",
   "stuff.gridHeader.planTotCnt": "플랜 수",

src/util/common-utils.js

@@ -66,3 +66,23 @@ export const convertNumberToPriceDecimal = (value) => {
   else if (value === 0) return 0
   else return ''
 }
+
+// 전화번호, FAX 번호 숫자 or '-'만 입력 체크
+export const inputTelNumberCheck = (e) => {
+  const input = e.target
+  if (/^[\d-]*$/g.test(input.value)) {
+    input.value = input.value
+  } else {
+    input.value = input.value.replace(/[^\d-]/g, '')
+  }
+}
+
+// 숫자만 입력 체크
+export const inputNumberCheck = (e) => {
+  const input = e.target
+  if (/^[\d]*$/g.test(input.value)) {
+    input.value = input.value
+  } else {
+    input.value = input.value.replace(/[^\d]/g, '')
+  }
+}