Feature/sign up api 쿼리키 포맷 통일 #863

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<SignUpDuplication>(signUpKeys.idDuplication(loginId), fetcher, { enabled });
+  return useQuery<SignUpDuplication>(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<SignUpDuplication>(signUpKeys.emailDuplication(email), fetcher, { enabled });
+  return useQuery<SignUpDuplication>(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<SignUpDuplication>(signUpKeys.studentIdDuplication(studentId), fetcher, { enabled });
+  return useQuery<SignUpDuplication>(signUpKeys.studentIdDuplication(params), fetcher, { enabled });
 };
 
 export {

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;

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<string>('');
@@ -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;

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')]);