[회원] 가입신청 유효성 검사 추가 및 로그인 화면 수정
This commit is contained in:
parent
c4861f95a3
commit
5f9e3a15b9
@ -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 = {
|
||||
storeQcastNm: formData.get('storeQcastNm'),
|
||||
storeQcastNmKana: formData.get('storeQcastNmKana'),
|
||||
postCd: formData.get('postCd'),
|
||||
addr: formData.get('addr'),
|
||||
telNo: formData.get('telNo'),
|
||||
fax: formData.get('fax'),
|
||||
bizNo: formData.get('bizNo'),
|
||||
userInfo: {
|
||||
userId: formData.get('userId'),
|
||||
userNm: formData.get('userNm'),
|
||||
userNmKana: formData.get('userNmKana'),
|
||||
telNo: formData.get('userTelNo'),
|
||||
fax: formData.get('userFax'),
|
||||
email: formData.get('email'),
|
||||
category: formData.get('category'),
|
||||
},
|
||||
}
|
||||
if (joinValidation(formData)) {
|
||||
const param = {
|
||||
storeQcastNm: formData.get('storeQcastNm'),
|
||||
storeQcastNmKana: formData.get('storeQcastNmKana'),
|
||||
postCd: formData.get('postCd'),
|
||||
addr: formData.get('addr'),
|
||||
telNo: formData.get('telNo'),
|
||||
fax: formData.get('fax'),
|
||||
bizNo: formData.get('bizNo'),
|
||||
userInfo: {
|
||||
userId: formData.get('userId'),
|
||||
userNm: formData.get('userNm'),
|
||||
userNmKana: formData.get('userNmKana'),
|
||||
telNo: formData.get('userTelNo'),
|
||||
fax: formData.get('userFax'),
|
||||
email: formData.get('email'),
|
||||
category: formData.get('category'),
|
||||
},
|
||||
}
|
||||
|
||||
await promisePost({ url: '/api/login/v1.0/user/join', data: param })
|
||||
.then((res) => {
|
||||
if (res) {
|
||||
if (res.data.result.resultCode == 'S') {
|
||||
Cookies.set('joinEmail', formData.get('email'), { expires: 1 })
|
||||
router.push('/join/complete')
|
||||
} else {
|
||||
alert(res.data.result.resultMsg)
|
||||
await promisePost({ url: '/api/login/v1.0/user/join', data: param })
|
||||
.then((res) => {
|
||||
if (res) {
|
||||
if (res.data.result.resultCode == 'S') {
|
||||
Cookies.set('joinEmail', formData.get('email'), { expires: 1 })
|
||||
router.push('/join/complete')
|
||||
} else {
|
||||
alert(res.data.result.resultMsg)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
alert(error.response.data.message)
|
||||
})
|
||||
})
|
||||
.catch((error) => {
|
||||
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>
|
||||
|
||||
@ -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}>
|
||||
|
||||
@ -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": "プラン数",
|
||||
|
||||
@ -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": "플랜 수",
|
||||
|
||||
@ -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, '')
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user