diff --git a/src/api/signUpApi.ts b/src/api/signUpApi.ts index bfdd9516..510109d3 100644 --- a/src/api/signUpApi.ts +++ b/src/api/signUpApi.ts @@ -3,9 +3,11 @@ import axios from 'axios'; import { SignUpDuplication, SignUpInfo } from './dto'; export const signUpKeys = { - idDuplication: (loginId: string) => ['sighUp', 'duplication', 'loginId', loginId] as const, - emailDuplication: (email: string) => ['sighUp', 'duplication', 'email', email] as const, - studentIdDuplication: (studentId: string) => ['sighUp', 'duplication', 'studentId', studentId] as const, + base: ['sighUp'] as const, + duplication: () => [...signUpKeys.base, 'exists'] as const, + loginIdDuplication: (params: { loginId: string }) => [...signUpKeys.duplication(), 'loginId', params] as const, + emailDuplication: (params: { email: string }) => [...signUpKeys.duplication(), 'email', params] as const, + studentIdDuplication: (params: { studentId: string }) => [...signUpKeys.duplication(), 'studentId', params] as const, }; const useSignUpMutation = () => { @@ -21,21 +23,24 @@ const useEmailAuthMutation = () => { }; const useCheckLoginIdDuplicationQuery = ({ loginId, enabled }: { loginId: string; enabled: boolean }) => { - const fetcher = () => axios.get('/sign-up/exists/login-id', { params: { loginId } }).then(({ data }) => data); + const params = { loginId }; + const fetcher = () => axios.get('/sign-up/exists/login-id', { params }).then(({ data }) => data); - return useQuery(signUpKeys.idDuplication(loginId), fetcher, { enabled }); + return useQuery(signUpKeys.loginIdDuplication(params), fetcher, { enabled }); }; const useCheckEmailDuplicationQuery = ({ email, enabled }: { email: string; enabled: boolean }) => { - const fetcher = () => axios.get('/sign-up/exists/email', { params: { email } }).then(({ data }) => data); + const params = { email }; + const fetcher = () => axios.get('/sign-up/exists/email', { params }).then(({ data }) => data); - return useQuery(signUpKeys.emailDuplication(email), fetcher, { enabled }); + return useQuery(signUpKeys.emailDuplication(params), fetcher, { enabled }); }; const useCheckStudentIdDuplicationQuery = ({ studentId, enabled }: { studentId: string; enabled: boolean }) => { - const fetcher = () => axios.get('/sign-up/exists/student-id', { params: { studentId } }).then(({ data }) => data); + const params = { studentId }; + const fetcher = () => axios.get('/sign-up/exists/student-id', { params }).then(({ data }) => data); - return useQuery(signUpKeys.studentIdDuplication(studentId), fetcher, { enabled }); + return useQuery(signUpKeys.studentIdDuplication(params), fetcher, { enabled }); }; export { diff --git a/src/pages/Profile/Modal/EditAccountModal.tsx b/src/pages/Profile/Modal/EditAccountModal.tsx index 2cde6ec3..1a783f09 100644 --- a/src/pages/Profile/Modal/EditAccountModal.tsx +++ b/src/pages/Profile/Modal/EditAccountModal.tsx @@ -257,7 +257,7 @@ const EditPasswordSection = () => { rules={{ required: COMMON.error.required, validate: { - confirmMatchPassward: (value) => { + confirmMatchPassword: (value) => { if (getValues('newPassword') !== value) return CONFIRM_PASSWORD_MSG.error.mismatch; setPasswordConfirmSuccessMsg(CONFIRM_PASSWORD_MSG.success.match); return undefined; diff --git a/src/pages/SignUp/Section/SignUpFirstInputSection.tsx b/src/pages/SignUp/Section/SignUpFirstInputSection.tsx index ec1aeb68..875ce3f8 100644 --- a/src/pages/SignUp/Section/SignUpFirstInputSection.tsx +++ b/src/pages/SignUp/Section/SignUpFirstInputSection.tsx @@ -18,6 +18,7 @@ interface SignUpFirstInputSectionProps { } const SignUpFirstInputSection = ({ setCurrentStep }: SignUpFirstInputSectionProps) => { + // REVIEW useForm 사용하는데 별도의 state가 필요한 지 점검 필요 const [loginIdState, setLoginIdState] = useState(''); const [checkLoginIdDuplicateEnabled, setCheckLoginIdDuplicateEnabled] = useState(false); const [passwordConfirmSuccessMsg, setPasswordConfirmSuccessMsg] = useState(''); @@ -62,7 +63,7 @@ const SignUpFirstInputSection = ({ setCurrentStep }: SignUpFirstInputSectionProp if (isLoginIdDuplicate.duplicate === false) { setCheckLoginIdDuplicateEnabled(false); - queryClient.setQueryData(signUpKeys.idDuplication(loginIdState), undefined); + queryClient.setQueryData(signUpKeys.loginIdDuplication({ loginId: loginIdState }), undefined); } }, [watch('loginId')]); @@ -139,7 +140,7 @@ const SignUpFirstInputSection = ({ setCurrentStep }: SignUpFirstInputSectionProp rules={{ required: COMMON.error.required, validate: { - confirmMatchPassward: (value) => { + confirmMatchPassword: (value) => { if (getValues('password') !== value) return CONFIRM_PASSWORD_MSG.error.mismatch; setPasswordConfirmSuccessMsg(CONFIRM_PASSWORD_MSG.success.match); return undefined; diff --git a/src/pages/SignUp/Section/SignUpSecondInputSection.tsx b/src/pages/SignUp/Section/SignUpSecondInputSection.tsx index b9b08f42..35afb77a 100644 --- a/src/pages/SignUp/Section/SignUpSecondInputSection.tsx +++ b/src/pages/SignUp/Section/SignUpSecondInputSection.tsx @@ -20,6 +20,7 @@ interface SignUpFirstInputSectionProps { } const SignUpSecondInputSection = ({ setCurrentStep }: SignUpFirstInputSectionProps) => { + // REVIEW useForm 사용하는데 별도의 state가 필요한 지 점검 필요 const [studentIdState, setStudentIdState] = useState(''); const [checkStudentIdDuplicateEnabled, setCheckStudentIdDuplicateEnabled] = useState(false); const setSignUpPageState = useSetRecoilState(signUpPageState); @@ -68,7 +69,7 @@ const SignUpSecondInputSection = ({ setCurrentStep }: SignUpFirstInputSectionPro if (isStudentIdDuplicate.duplicate === false) { setCheckStudentIdDuplicateEnabled(false); - queryClient.setQueryData(signUpKeys.studentIdDuplication(studentIdState), undefined); + queryClient.setQueryData(signUpKeys.studentIdDuplication({ studentId: studentIdState }), undefined); } }, [watch('studentId')]);