회원가입 시, 로딩 바 추가
This commit is contained in:
parent
82ab12632b
commit
08b2c36e4a
@ -1,6 +1,6 @@
|
||||
'use client'
|
||||
|
||||
import { useRef } from 'react'
|
||||
import { useRef, useState } from 'react'
|
||||
import { useAxios } from '@/hooks/useAxios'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
@ -8,7 +8,11 @@ import Cookies from 'js-cookie'
|
||||
|
||||
import { isObjectNotEmpty, inputTelNumberCheck, inputNumberCheck } from '@/util/common-utils'
|
||||
|
||||
import GlobalSpinner from '@/components/common/spinner/GlobalSpinner'
|
||||
|
||||
export default function Join() {
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
|
||||
const { getMessage } = useMessage()
|
||||
const { promisePost } = useAxios()
|
||||
const router = useRouter()
|
||||
@ -152,6 +156,8 @@ export default function Join() {
|
||||
},
|
||||
}
|
||||
|
||||
setIsLoading(true)
|
||||
|
||||
await promisePost({ url: '/api/login/v1.0/user/join', data: param })
|
||||
.then((res) => {
|
||||
if (res) {
|
||||
@ -162,8 +168,10 @@ export default function Join() {
|
||||
alert(res.data.result.resultMsg)
|
||||
}
|
||||
}
|
||||
setIsLoading(false)
|
||||
})
|
||||
.catch((error) => {
|
||||
setIsLoading(false)
|
||||
alert(error.response.data.message)
|
||||
})
|
||||
}
|
||||
@ -171,277 +179,280 @@ export default function Join() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="center-page-wrap">
|
||||
<div className="center-page-inner">
|
||||
<form onSubmit={joinProcess}>
|
||||
<div className="center-page-tit">{getMessage('join.title')}</div>
|
||||
<div className="sub-table-box signup">
|
||||
<div className="table-box-title-wrap">
|
||||
<div className="title-wrap">
|
||||
<h3>
|
||||
{getMessage('join.sub1.title')} <span className="important">(*{getMessage('common.require')})</span>
|
||||
</h3>
|
||||
<span className="option">{getMessage('join.sub1.comment')}</span>
|
||||
<>
|
||||
{isLoading && <GlobalSpinner />}
|
||||
<div className="center-page-wrap">
|
||||
<div className="center-page-inner">
|
||||
<form onSubmit={joinProcess}>
|
||||
<div className="center-page-tit">{getMessage('join.title')}</div>
|
||||
<div className="sub-table-box signup">
|
||||
<div className="table-box-title-wrap">
|
||||
<div className="title-wrap">
|
||||
<h3>
|
||||
{getMessage('join.sub1.title')} <span className="important">(*{getMessage('common.require')})</span>
|
||||
</h3>
|
||||
<span className="option">{getMessage('join.sub1.comment')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="common-table">
|
||||
<table>
|
||||
<colgroup>
|
||||
<col style={{ width: '180px' }} />
|
||||
<col />
|
||||
</colgroup>
|
||||
<tbody>
|
||||
{/* 판매대리점명 */}
|
||||
<tr>
|
||||
<th>
|
||||
{getMessage('join.sub1.storeQcastNm')} <span className="important">*</span>
|
||||
</th>
|
||||
<td>
|
||||
<div className="input-wrap" style={{ width: '700px' }}>
|
||||
<input
|
||||
type="text"
|
||||
id="storeQcastNm"
|
||||
name="storeQcastNm"
|
||||
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>
|
||||
</th>
|
||||
<td>
|
||||
<div className="input-wrap" style={{ width: '700px' }}>
|
||||
<input
|
||||
type="text"
|
||||
id="storeQcastNmKana"
|
||||
name="storeQcastNmKana"
|
||||
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>
|
||||
</th>
|
||||
<td>
|
||||
<div className="flx-box">
|
||||
<div className="input-wrap mr5" style={{ width: '200px' }}>
|
||||
<div className="common-table">
|
||||
<table>
|
||||
<colgroup>
|
||||
<col style={{ width: '180px' }} />
|
||||
<col />
|
||||
</colgroup>
|
||||
<tbody>
|
||||
{/* 판매대리점명 */}
|
||||
<tr>
|
||||
<th>
|
||||
{getMessage('join.sub1.storeQcastNm')} <span className="important">*</span>
|
||||
</th>
|
||||
<td>
|
||||
<div className="input-wrap" style={{ width: '700px' }}>
|
||||
<input
|
||||
type="text"
|
||||
id="postCd"
|
||||
name="postCd"
|
||||
id="storeQcastNm"
|
||||
name="storeQcastNm"
|
||||
alt={getMessage('join.sub1.storeQcastNm')}
|
||||
className="input-light"
|
||||
placeholder={getMessage('join.sub1.postCd_placeholder')}
|
||||
onChange={inputNumberCheck}
|
||||
maxLength={7}
|
||||
ref={postCdRef}
|
||||
placeholder={getMessage('join.sub1.storeQcastNm_placeholder')}
|
||||
maxLength={30}
|
||||
ref={storeQcastNmRef}
|
||||
/>
|
||||
</div>
|
||||
<div className="input-wrap" style={{ width: '495px' }}>
|
||||
</td>
|
||||
</tr>
|
||||
{/* 판매대리점명 후리가나 */}
|
||||
<tr>
|
||||
<th>
|
||||
{getMessage('join.sub1.storeQcastNmKana')} <span className="important">*</span>
|
||||
</th>
|
||||
<td>
|
||||
<div className="input-wrap" style={{ width: '700px' }}>
|
||||
<input
|
||||
type="text"
|
||||
id="addr"
|
||||
name="addr"
|
||||
id="storeQcastNmKana"
|
||||
name="storeQcastNmKana"
|
||||
className="input-light"
|
||||
placeholder={getMessage('join.sub1.addr_placeholder')}
|
||||
maxLength={50}
|
||||
ref={addrRef}
|
||||
placeholder={getMessage('join.sub1.storeQcastNmKana_placeholder')}
|
||||
maxLength={30}
|
||||
ref={storeQcastNmKanaRef}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/* 전화번호 */}
|
||||
<tr>
|
||||
<th>
|
||||
{getMessage('join.sub1.telNo')} <span className="important">*</span>
|
||||
</th>
|
||||
<td>
|
||||
<div className="input-wrap" style={{ width: '200px' }}>
|
||||
<input
|
||||
type="text"
|
||||
id="telNo"
|
||||
name="telNo"
|
||||
className="input-light"
|
||||
placeholder={getMessage('join.sub1.telNo_placeholder')}
|
||||
maxLength={15}
|
||||
onChange={inputTelNumberCheck}
|
||||
ref={telNoRef}
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/* FAX 번호 */}
|
||||
<tr>
|
||||
<th>
|
||||
{getMessage('join.sub1.fax')} <span className="important">*</span>
|
||||
</th>
|
||||
<td>
|
||||
<div className="input-wrap" style={{ width: '200px' }}>
|
||||
<input
|
||||
type="text"
|
||||
id="fax"
|
||||
name="fax"
|
||||
className="input-light"
|
||||
placeholder={getMessage('join.sub1.fax_placeholder')}
|
||||
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" maxLength={15} onChange={inputTelNumberCheck} />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div className="sub-table-box signup">
|
||||
<div className="table-box-title-wrap">
|
||||
<div className="title-wrap">
|
||||
<h3>
|
||||
{getMessage('join.sub2.title')} <span className="important">(*{getMessage('common.require')})</span>
|
||||
</h3>
|
||||
</td>
|
||||
</tr>
|
||||
{/* 우편번호/주소 */}
|
||||
<tr>
|
||||
<th>
|
||||
{getMessage('join.sub1.postCd')}/{getMessage('join.sub1.addr')} <span className="important">*</span>
|
||||
</th>
|
||||
<td>
|
||||
<div className="flx-box">
|
||||
<div className="input-wrap mr5" style={{ width: '200px' }}>
|
||||
<input
|
||||
type="text"
|
||||
id="postCd"
|
||||
name="postCd"
|
||||
className="input-light"
|
||||
placeholder={getMessage('join.sub1.postCd_placeholder')}
|
||||
onChange={inputNumberCheck}
|
||||
maxLength={7}
|
||||
ref={postCdRef}
|
||||
/>
|
||||
</div>
|
||||
<div className="input-wrap" style={{ width: '495px' }}>
|
||||
<input
|
||||
type="text"
|
||||
id="addr"
|
||||
name="addr"
|
||||
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>
|
||||
</th>
|
||||
<td>
|
||||
<div className="input-wrap" style={{ width: '200px' }}>
|
||||
<input
|
||||
type="text"
|
||||
id="telNo"
|
||||
name="telNo"
|
||||
className="input-light"
|
||||
placeholder={getMessage('join.sub1.telNo_placeholder')}
|
||||
maxLength={15}
|
||||
onChange={inputTelNumberCheck}
|
||||
ref={telNoRef}
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/* FAX 번호 */}
|
||||
<tr>
|
||||
<th>
|
||||
{getMessage('join.sub1.fax')} <span className="important">*</span>
|
||||
</th>
|
||||
<td>
|
||||
<div className="input-wrap" style={{ width: '200px' }}>
|
||||
<input
|
||||
type="text"
|
||||
id="fax"
|
||||
name="fax"
|
||||
className="input-light"
|
||||
placeholder={getMessage('join.sub1.fax_placeholder')}
|
||||
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" maxLength={15} onChange={inputTelNumberCheck} />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div className="common-table">
|
||||
<table>
|
||||
<colgroup>
|
||||
<col style={{ width: '180px' }} />
|
||||
<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" 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" 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" 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" maxLength={30} ref={emailRef} />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/* 전화번호 */}
|
||||
<tr>
|
||||
<th>
|
||||
{getMessage('join.sub2.telNo')} <span className="important">*</span>
|
||||
</th>
|
||||
<td>
|
||||
<div className="input-wrap" style={{ width: '200px' }}>
|
||||
<input
|
||||
type="text"
|
||||
id="userTelNo"
|
||||
name="userTelNo"
|
||||
className="input-light"
|
||||
placeholder={getMessage('join.sub2.telNo_placeholder')}
|
||||
maxLength={15}
|
||||
onChange={inputTelNumberCheck}
|
||||
ref={userTelNoRef}
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/* FAX 번호 */}
|
||||
<tr>
|
||||
<th>
|
||||
{getMessage('join.sub2.fax')} <span className="important">*</span>
|
||||
</th>
|
||||
<td>
|
||||
<div className="input-wrap" style={{ width: '200px' }}>
|
||||
<input
|
||||
type="text"
|
||||
id="userFax"
|
||||
name="userFax"
|
||||
className="input-light"
|
||||
placeholder={getMessage('join.sub1.fax_placeholder')}
|
||||
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" maxLength={20} />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div className="sub-table-box signup">
|
||||
<div className="table-box-title-wrap">
|
||||
<div className="title-wrap">
|
||||
<h3>
|
||||
{getMessage('join.sub2.title')} <span className="important">(*{getMessage('common.require')})</span>
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="common-table">
|
||||
<table>
|
||||
<colgroup>
|
||||
<col style={{ width: '180px' }} />
|
||||
<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" 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" 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" 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" maxLength={30} ref={emailRef} />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/* 전화번호 */}
|
||||
<tr>
|
||||
<th>
|
||||
{getMessage('join.sub2.telNo')} <span className="important">*</span>
|
||||
</th>
|
||||
<td>
|
||||
<div className="input-wrap" style={{ width: '200px' }}>
|
||||
<input
|
||||
type="text"
|
||||
id="userTelNo"
|
||||
name="userTelNo"
|
||||
className="input-light"
|
||||
placeholder={getMessage('join.sub2.telNo_placeholder')}
|
||||
maxLength={15}
|
||||
onChange={inputTelNumberCheck}
|
||||
ref={userTelNoRef}
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/* FAX 번호 */}
|
||||
<tr>
|
||||
<th>
|
||||
{getMessage('join.sub2.fax')} <span className="important">*</span>
|
||||
</th>
|
||||
<td>
|
||||
<div className="input-wrap" style={{ width: '200px' }}>
|
||||
<input
|
||||
type="text"
|
||||
id="userFax"
|
||||
name="userFax"
|
||||
className="input-light"
|
||||
placeholder={getMessage('join.sub1.fax_placeholder')}
|
||||
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" maxLength={20} />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="sign-up-btn-wrap">
|
||||
<button
|
||||
type="button"
|
||||
className="btn-origin grey mr5"
|
||||
onClick={() => {
|
||||
router.push('/login')
|
||||
}}
|
||||
>
|
||||
{getMessage('join.btn.login_page')}
|
||||
</button>
|
||||
<button type="submit" className="btn-origin navy">
|
||||
{getMessage('join.btn.approval_request')}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div className="sign-up-btn-wrap">
|
||||
<button
|
||||
type="button"
|
||||
className="btn-origin grey mr5"
|
||||
onClick={() => {
|
||||
router.push('/login')
|
||||
}}
|
||||
>
|
||||
{getMessage('join.btn.login_page')}
|
||||
</button>
|
||||
<button type="submit" className="btn-origin navy">
|
||||
{getMessage('join.btn.approval_request')}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user