diff --git a/src/common/InputView.tsx b/src/common/InputView.tsx index 9846b04..95b3274 100644 --- a/src/common/InputView.tsx +++ b/src/common/InputView.tsx @@ -13,6 +13,7 @@ interface InputViewProps extends InputBoxProps { info?: string; caption?: { none?: false | string; + default?: false | string; invalid?: false | string; }; } @@ -73,6 +74,9 @@ const InputView = ({ {value === '' && caption?.none && ( {caption.none} )} + {caption?.default && ( + {caption.default} + )} {caption?.invalid && ( {caption.invalid} )} diff --git a/src/components/Auth/BasicForm.tsx b/src/components/Auth/BasicForm.tsx index 4bd17f0..37e822d 100644 --- a/src/components/Auth/BasicForm.tsx +++ b/src/components/Auth/BasicForm.tsx @@ -97,11 +97,26 @@ export default function BasicForm({ navigation, route }: FormProps) { d: false, }); const [checkPw, setCheckPw] = useState(''); - const [domainOpen, setDomainOpen] = useState(false); + const [invalidPw, setInvalidPw] = useState(undefined); const [modalOpen, setModalOpen] = useState(false); const [splash, setSplash] = useState(false); const request = Request(); + const passwordRegExp = new RegExp( + '^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-])(?=.*[0-9]).{8,15}$', + ); + + const passwordValidation = (callback: () => void) => { + if (passwordRegExp.exec(form.password)) { + callback(); + } else { + Alert.alert('비밀번호가 올바르지 않습니다.'); + setForm(prev => { + return { ...prev, password: '' }; + }); + setCheckPw(''); + } + }; const handleSubmit = async () => { const params = { @@ -199,11 +214,8 @@ export default function BasicForm({ navigation, route }: FormProps) { style={{ height: 44, marginTop: 8 }} secure={true} caption={{ - none: '비밀번호 조건', - invalid: - form.password !== '' && - form.password.length < 7 && - '비밀번호가 올바르지 않습니다.', + default: + '숫자, 영문, 특수문자를 하나 이상 포함해 8자 이상 16자 이하로 설정해 주세요.', }} /> @@ -303,7 +315,7 @@ export default function BasicForm({ navigation, route }: FormProps) { } value="다음" pressed={false} - onPress={handleSubmit} + onPress={() => passwordValidation(handleSubmit)} style={{ width: '75%', alignSelf: 'center',