Skip to content

Commit c3c3bb1

Browse files
CreatorDodoCreatorDodo
committed
feat: joinPage 유효성 검사 기능 추가
1 parent 3cab4e5 commit c3c3bb1

File tree

14 files changed

+2199
-3358
lines changed

14 files changed

+2199
-3358
lines changed

‎pnpm-lock.yaml‎

Lines changed: 2051 additions & 3333 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/Join/EmailInput.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import InputForm from '../common/InputForm.tsx';
22
import { useJoinState } from '../../stores/joinStore.ts';
3+
import { isValidEmail } from '../../utils/authUtils.ts';
34

45
const EmailInput = () => {
56
const { email, emailHandler } = useJoinState();
@@ -8,11 +9,15 @@ const EmailInput = () => {
89
<InputForm
910
defaultValue={email}
1011
title={'이메일'}
11-
placeholder={'이메일을 입력하세요'}
12-
hint={'Hint Text'}
12+
placeholder={'이메일 입력'}
13+
hint={''}
1314
onChange={(e) => emailHandler(e.target.value)}
1415
type={'email'}
1516
name={'email'}
17+
id={'email-input'}
18+
aria-label={'join-email-input'}
19+
error={!isValidEmail(email)}
20+
errorText={'※ 올바른 이메일을 입력해 주세요.'}
1621
/>
1722
);
1823
};

‎src/components/Join/JoinButton.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import { useJoinState } from '../../stores/joinStore';
22

33
const JoinButton = () => {
4-
const { name, phone, email, password, pwCheck, useTermsCheck, privacyTermsCheck } = useJoinState();
4+
const { nickName, name, phone, email, password, pwCheck, useTermsCheck, privacyTermsCheck } = useJoinState();
55

66
const onClick = () => {
7+
console.log('nickName: ', nickName);
78
console.log('name: ', name);
89
console.log('phone: ', phone);
910
console.log('email: ', email);

‎src/components/Join/NameInput.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import InputForm from '../common/InputForm.tsx';
22
import { useJoinState } from '../../stores/joinStore.ts';
3+
import { isValidName } from '../../utils/authUtils.ts';
34

45
const NameInput = () => {
56
const { name, nameHandler } = useJoinState();
@@ -8,11 +9,15 @@ const NameInput = () => {
89
<InputForm
910
defaultValue={name}
1011
title={'이름'}
11-
placeholder={'이름을 입력하세요'}
12-
hint={'Hint Text'}
12+
placeholder={'이름(필수)'}
13+
hint={''}
1314
onChange={(e) => nameHandler(e.target.value)}
1415
type={'name'}
1516
name={'name'}
17+
id={'name-input'}
18+
aria-label={'join-name-input'}
19+
error={!isValidName(name)}
20+
errorText={'※ 이름을 입력해 주세요.'}
1621
/>
1722
);
1823
};

‎src/components/Join/NickNameInput.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import InputForm from '../common/InputForm.tsx';
2+
import { useJoinState } from '../../stores/joinStore.ts';
3+
4+
const NickNameInput = () => {
5+
const { nickName, nickNameHandler } = useJoinState();
6+
7+
return (
8+
<InputForm
9+
defaultValue={nickName}
10+
title={'닉네임'}
11+
placeholder={'닉네임 입력'}
12+
hint={''}
13+
onChange={(e) => nickNameHandler(e.target.value)}
14+
type={'name'}
15+
name={'nickName'}
16+
id={'nickName-input'}
17+
aria-label={'join-nickName-input'}
18+
/>
19+
);
20+
};
21+
22+
export default NickNameInput;

‎src/components/Join/PasswordInput.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import InputForm from '../common/InputForm.tsx';
22
import { useJoinState } from '../../stores/joinStore.ts';
3+
import { isValidPassword } from '../../utils/authUtils.ts';
34

45
const PasswordInput = () => {
56
const { password, passwordHandler } = useJoinState();
@@ -8,11 +9,15 @@ const PasswordInput = () => {
89
<InputForm
910
defaultValue={password}
1011
title={'비밀번호'}
11-
placeholder={'Password'}
12-
hint={'Hint Text'}
12+
placeholder={'비밀번호 입력'}
13+
hint={''}
1314
onChange={(e) => passwordHandler(e.target.value)}
1415
name={'password'}
1516
type={'password'}
17+
id={'password-input'}
18+
aria-label={'join-password-input'}
19+
error={!isValidPassword(password)}
20+
errorText={'※ 비밀번호는 6자리 이상이어야 합니다.'}
1621
/>
1722
);
1823
};

‎src/components/Join/PhoneInput.tsx‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,24 @@
11
import InputForm from '../common/InputForm.tsx';
22
import { useJoinState } from '../../stores/joinStore.ts';
3+
import { isValidPhone, formatPhone } from '../../utils/authUtils.ts';
34

45
const PhoneInput = () => {
56
const { phone, phoneHandler } = useJoinState();
7+
const formattedPhone = isValidPhone(phone) ? formatPhone(phone) : phone;
68

79
return (
810
<InputForm
9-
defaultValue={phone}
10-
title={'핸드폰 번호'}
11-
placeholder={'핸드폰 번호를 입력하세요'}
12-
hint={'Hint Text'}
11+
title={'휴대폰 번호'}
12+
placeholder={"휴대폰 번호 입력 ('-' 제외 11자리 입력)"}
13+
hint={''}
1314
onChange={(e) => phoneHandler(e.target.value)}
1415
type={'phone'}
1516
name={'phone'}
17+
id={'phone-input'}
18+
aria-label={'join-phone-input'}
19+
error={!isValidPhone(phone)}
20+
value={formattedPhone}
21+
errorText={"※ '-' 제외 11자리를 입력해 주세요"}
1622
/>
1723
);
1824
};

‎src/components/Join/PwCheckInput.tsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,23 @@
11
import InputForm from '../common/InputForm.tsx';
22
import { useJoinState } from '../../stores/joinStore.ts';
3+
import { isValidPwCheck } from '../../utils/authUtils.ts';
34

45
const PwCheckInput = () => {
5-
const { pwCheck, pwCheckHandler } = useJoinState();
6+
const { pwCheck, password, pwCheckHandler } = useJoinState();
67

78
return (
89
<InputForm
910
defaultValue={pwCheck}
1011
title={'비밀번호 확인'}
11-
placeholder={'Password Check'}
12-
hint={'Hint Text'}
12+
placeholder={'비밀번호 확인'}
13+
hint={''}
1314
onChange={(e) => pwCheckHandler(e.target.value)}
14-
name={'pwCheck'}
1515
type={'password'}
16+
name={'pwCheck'}
17+
id={'pwCheck-input'}
18+
aria-label={'join-pwCheck-input'}
19+
error={!isValidPwCheck(pwCheck, password)}
20+
errorText={'※ 비밀번호가 일치하지 않습니다.'}
1621
/>
1722
);
1823
};

‎src/components/Join/TermsCheckInput.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,13 @@ const TermsCheckInput = () => {
1010
</div>
1111
<div className="mt-2 flex items-center justify-between">
1212
<label htmlFor="termsOne">이용약관 동의 (필수)</label>
13-
<input type="radio" className="radio-primary radio" checked={useTermsCheck} onClick={useTermsCheckHandler} />
13+
<input
14+
type="radio"
15+
className="radio-primary radio"
16+
checked={useTermsCheck}
17+
onClick={useTermsCheckHandler}
18+
readOnly
19+
/>
1420
</div>
1521
{!useTermsCheck ? <span className="text-red-500">이용약관에 동의해 주세요.</span> : <span className="h-6"></span>}
1622
<div className="mt-2 flex items-center justify-between">
@@ -20,6 +26,7 @@ const TermsCheckInput = () => {
2026
className="radio-primary radio"
2127
checked={privacyTermsCheck}
2228
onClick={privacyTermsCheckHandler}
29+
readOnly
2330
/>
2431
</div>
2532
{!privacyTermsCheck ? (

‎src/components/Join/index.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import EmailInput from './EmailInput.tsx';
2+
import JoinButton from './JoinButton.tsx';
3+
import JoinForm from './JoinForm.tsx';
4+
import JoinFormActions from './JoinFormActions.tsx';
5+
import NameInput from './NameInput.tsx';
6+
import NickNameInput from './NickNameInput.tsx';
7+
import PasswordInput from './PasswordInput.tsx';
8+
import PhoneInput from './PhoneInput.tsx';
9+
import PwCheckInput from './PwCheckInput.tsx';
10+
import TermsCheckInput from './TermsCheckInput.tsx';
11+
12+
export {
13+
EmailInput,
14+
JoinButton,
15+
JoinForm,
16+
JoinFormActions,
17+
NameInput,
18+
NickNameInput,
19+
PasswordInput,
20+
PhoneInput,
21+
PwCheckInput,
22+
TermsCheckInput,
23+
};

0 commit comments

Comments
 (0)