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