Merge pull request #97 from EveryUniv/feat/96

feat: 회원가입, 아이디/비밀번호 찾기 리다이렉트 옵션 추가
EveryUniv · Apr 12, 2024 · d67d800 · d67d800
2 parents e67511f + b041987
commit d67d800
Show file tree

Hide file tree

Showing 10 changed files with 73 additions and 40 deletions.
diff --git a/src/components/login/form.tsx b/src/components/login/form.tsx
@@ -5,7 +5,7 @@ import { Label } from '@components/ui/label';
 import { ROUTES } from '@constants/route';
 import { usePostLogin } from '@hooks/api/auth/usePostLogin';
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useSearchParams } from 'react-router-dom';
 
 import { IdPassword } from '@/types/default-interfaces';
 
@@ -17,17 +17,15 @@ export default function LoginForm() {
    const [loginInfo, setLoginInfo] = React.useState<IdPassword>(initLoginInfo);
 
    const { mutate } = usePostLogin();
+   const [searchParams] = useSearchParams();
 
    const handleLogin = (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
       mutate(loginInfo);
    };
 
    return (
-      <form
-         className='w-[336px] flex flex-col mx-auto gap-3 mt-[76px]'
-         onSubmit={handleLogin}
-      >
+      <form className='w-[336px] flex flex-col mx-auto gap-3 mt-[76px]' onSubmit={handleLogin}>
          <Input
             value={loginInfo.studentId}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
@@ -59,9 +57,9 @@ export default function LoginForm() {
                </Label>
             </Checkbox>
             <div className='flex text-[12px] gap-2'>
-               <Link to={ROUTES.SIGNUP.TERMS}>회원가입</Link>
+               <Link to={`${ROUTES.SIGNUP.TERMS}?${searchParams.toString()}`}>회원가입</Link>
                <span> | </span>
-               <Link to={ROUTES.RESET.INDEX}>Forgot ID/PW?</Link>
+               <Link to={`${ROUTES.RESET.INDEX}?${searchParams.toString()}`}>Forgot ID/PW?</Link>
             </div>
          </div>
          <Button variant='default' type='submit' className='rounded-[15px]' size='default'>

diff --git a/src/components/reset/code.tsx b/src/components/reset/code.tsx
@@ -1,15 +1,19 @@
 import { Button } from '@components/ui/button';
 import { Input } from '@components/ui/input';
 import Message from '@components/ui/text/message';
+import { ROUTES } from '@constants/route';
 import { usePostPhoneConfirmCode } from '@hooks/api/reset/usePostPhoneConfirmCode';
 import { usePostPhoneVerify } from '@hooks/api/reset/usePostPhoneVerify';
 import { useAlert } from '@hooks/useAlert';
 import React from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 
 export default function PwVerifyForm() {
    const [pwVerifyInfo, setPwVerifyInfo] = React.useState({ phoneNumber: '', code: '' });
    const [token, setToken] = React.useState<string>('');
    const { alert } = useAlert();
+   const navigate = useNavigate();
+   const [searchParams] = useSearchParams();
 
    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
       const { name, value } = e.target;
@@ -24,7 +28,11 @@ export default function PwVerifyForm() {
          setToken(res.token);
       },
    });
-   const { mutate: confirmCode } = usePostPhoneConfirmCode();
+   const { mutate: confirmCode } = usePostPhoneConfirmCode({
+      onSuccess: () => {
+         navigate(`${ROUTES.RESET.PW}?${searchParams.toString()}`, { state: token });
+      },
+   });
 
    const handlePhoneVerify = () => {
       if (pwVerifyInfo.phoneNumber.length === 11) {
@@ -76,7 +84,13 @@ export default function PwVerifyForm() {
             onChange={handleChange}
             className='mb-4'
          />
-         <Button className='rounded-[30px]' onClick={handleConfirmCode} size='md' variant='default'>
+         <Button
+            className='rounded-[30px]'
+            onClick={handleConfirmCode}
+            size='md'
+            variant='default'
+            type='button'
+         >
             확인
          </Button>
       </form>

diff --git a/src/components/reset/id.tsx b/src/components/reset/id.tsx
@@ -4,19 +4,25 @@ import { usePostFindId } from '@hooks/api/reset/usePostFindId';
 import { useAlert } from '@hooks/useAlert';
 import { formatphoneNumber } from '@utils/tell';
 import React, { ChangeEvent } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 
 export default function IdForm() {
    const [phoneNumber, setPhoneNumber] = React.useState<string>('');
    //TODO) 인증번호 전송 여부 Toast 추가
    const navigate = useNavigate();
+   const [searchParams] = useSearchParams();
    const { alert } = useAlert();
 
    const handlePhoneChange = (e: ChangeEvent<HTMLInputElement>) => {
       setPhoneNumber(e.target.value);
    };
 
-   const { mutate } = usePostFindId();
+   const { mutate } = usePostFindId({
+      onSuccess: () => {
+         alert('휴대전화로 아이디가 전송되었습니다.');
+         redirectLogin();
+      },
+   });
 
    const handleFindId = (e: React.FormEvent) => {
       e.preventDefault();
@@ -29,8 +35,16 @@ export default function IdForm() {
       }
    };
 
+   const redirectLogin = () => {
+      if (searchParams.has('redirectUrl')) {
+         window.location.href = searchParams.get('redirectUrl') || '';
+         return;
+      }
+      navigate('/login');
+   };
+
    return (
-      <form onSubmit={handleFindId} className='flex flex-col items-center gap-16'>
+      <form className='flex flex-col items-center gap-16'>
          <div className='flex mx-auto'>
             <Input
                size='md'
@@ -39,12 +53,9 @@ export default function IdForm() {
                placeholder='가입시 입력한 휴대전화번호 입력'
                onChange={handlePhoneChange}
             />
-            <Button variant='ghost' className='ml-[-40px] z-10 text-[13px]'>
-               요청
-            </Button>
          </div>
-         <Button onClick={() => navigate('/login')} size='md' variant='default' className='rounded-[30px]'>
-            확인
+         <Button onClick={handleFindId} size='md' variant='default' className='rounded-[30px]' type='button'>
+            요청
          </Button>
       </form>
    );

diff --git a/src/components/reset/pw.tsx b/src/components/reset/pw.tsx
@@ -4,14 +4,15 @@ import Message from '@components/ui/text/message';
 import { usePostResetPw } from '@hooks/api/reset/usePostResetPw';
 import { useAlert } from '@hooks/useAlert';
 import React, { ChangeEvent } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 
 export default function ResetPwForm({ token }: { token: string }) {
    const [password, setPassword] = React.useState<string>('');
    const [passwordConfirm, setPasswordConfirm] = React.useState<string>('');
    const [passwordMismatch, setPasswordMismatch] = React.useState<boolean>(false);
    const navigate = useNavigate();
    const { alert } = useAlert();
+   const [searchParams] = useSearchParams();
 
    const { mutate, isSuccess: resetSuccess } = usePostResetPw();
 
@@ -42,7 +43,12 @@ export default function ResetPwForm({ token }: { token: string }) {
    React.useEffect(() => {
       if (resetSuccess) {
          alert('비밀번호가 변경되었습니다.');
-         navigate('/login');
+
+         if (searchParams.has('redirectUrl')) {
+            window.location.href = searchParams.get('redirectUrl') || '';
+         } else {
+            navigate('/login');
+         }
       }
    }, [resetSuccess]);
 
@@ -72,7 +78,7 @@ export default function ResetPwForm({ token }: { token: string }) {
          <p className="text-[13px] mb-8 whitespace-pre-wrap before:content-['●'] before:mr-1">
             {'비밀번호는 영문과 숫자 1자이상을 포함하는 \n8~16자리여야합니다.'}
          </p>
-         <Button className='rounded-[30px]' onClick={handleResetPw} size='md' variant='default'>
+         <Button className='rounded-[30px]' onClick={handleResetPw} size='md' variant='default' type='button'>
             변경
          </Button>
       </form>

diff --git a/src/components/signup/term.tsx b/src/components/signup/term.tsx
@@ -4,7 +4,7 @@ import Checkbox from '@components/ui/checkbox';
 import { Label } from '@components/ui/label';
 import { ROUTES } from '@constants/route';
 import React from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 
 export default function Term() {
    const allDisagree = Array(3).fill(false);
@@ -13,6 +13,7 @@ export default function Term() {
    const allChecked = agreeCheck.every(Boolean);
 
    const navigate = useNavigate();
+   const [searchParams] = useSearchParams();
 
    const handleCheckboxChange = (index: number) => {
       const newAgreeCheck = [...agreeCheck];
@@ -23,10 +24,9 @@ export default function Term() {
       const newAgreeCheck = allChecked ? allDisagree : allAgree;
       setAgreeCheck(newAgreeCheck);
    };
-
    const handleAgreeAll = () => {
       if (allChecked) {
-         navigate(ROUTES.SIGNUP.ROOT);
+         navigate(`${ROUTES.SIGNUP.ROOT}?${searchParams.toString()}`);
       } else {
          alert('약관에 동의해야 회원가입이 가능합니다.');
       }
@@ -75,7 +75,7 @@ export default function Term() {
                      <Label htmlFor={checkbox.id} className='text-xs'>
                         [필수]
                      </Label>
-                     <Label htmlFor={checkbox.id} className='text-xs -ml-1 text-gray02'>
+                     <Label htmlFor={checkbox.id} className='-ml-1 text-xs text-gray02'>
                         개인 정보 수집, 이용 동의
                      </Label>
                   </Checkbox>

diff --git a/src/hooks/api/reset/usePostFindId.ts b/src/hooks/api/reset/usePostFindId.ts
@@ -8,7 +8,7 @@ interface FindIdRequest {
 
 export const usePostFindId = (options?: UseMutationOptions<unknown, unknown, FindIdRequest>) => {
    return useMutation({
-      mutationFn: () => post(API_PATH.USER.RESET.FIND_ID),
+      mutationFn: (data) => post(API_PATH.USER.RESET.FIND_ID, data),
       ...options,
    });
 };
diff --git a/src/hooks/api/reset/usePostResetPw.ts b/src/hooks/api/reset/usePostResetPw.ts
@@ -1,5 +1,5 @@
 import { API_PATH } from '@constants/api';
-import { post } from '@libs/api';
+import { patch } from '@libs/api';
 import { useMutation } from '@tanstack/react-query';
 
 interface ResetPwRequest {
@@ -10,12 +10,9 @@ interface ResetPwRequest {
 export const usePostResetPw = () => {
    return useMutation({
       mutationFn: ({ token, password }: ResetPwRequest) =>
-         post(API_PATH.USER.RESET.RESET_PW, {
+         patch(API_PATH.USER.RESET.RESET_PW, {
             token,
             password,
          }),
-      onSuccess: () => {
-         console.log('성공');
-      },
    });
 };
diff --git a/src/hooks/api/signup/usePostSignup.ts b/src/hooks/api/signup/usePostSignup.ts
@@ -2,7 +2,7 @@ import { API_PATH } from '@constants/api';
 import { ROUTES } from '@constants/route';
 import { post } from '@libs/api';
 import { useMutation } from '@tanstack/react-query';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 
 export interface UserRegistrationInfo {
    nickname: string;
@@ -11,12 +11,19 @@ export interface UserRegistrationInfo {
 
 export const usePostSignup = (signupToken: string) => {
    const navigate = useNavigate();
+   const [searchParams] = useSearchParams();
    return useMutation({
       mutationFn: ({ nickname, password }: UserRegistrationInfo) =>
          post(API_PATH.USER.SIGNUP.INFO.ROOT(signupToken), {
             nickname,
             password,
          }),
-      onSuccess: () => navigate(ROUTES.LOGIN),
+      onSuccess: () => {
+         if (searchParams.has('redirectUrl')) {
+            window.location.href = searchParams.get('redirectUrl') || '';
+            return;
+         }
+         navigate(ROUTES.LOGIN);
+      },
    });
 };
diff --git a/src/hooks/api/signup/usePostStudentVerify.ts b/src/hooks/api/signup/usePostStudentVerify.ts
@@ -4,11 +4,10 @@ import { ROUTES } from '@constants/route';
 import { post } from '@libs/api';
 import { useMutation, type UseMutationOptions } from '@tanstack/react-query';
 import { AxiosResponse, AxiosError } from 'axios';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 
 import HTTPError from '@/types/statusError';
 
-
 export interface UserVerifyInfo {
    dkuStudentId: string;
    dkuPassword: string;
@@ -27,12 +26,12 @@ interface StudentInfo {
    major: string;
 }
 
-
 export const usePostStudentVerify = (
    options?: UseMutationOptions<AxiosResponse<UserVerifyResponse>, AxiosError, UserVerifyInfo>,
 ) => {
    const navigate = useNavigate();
    const { toast } = useToast();
+   const [searchParams] = useSearchParams();
    return useMutation<AxiosResponse<UserVerifyResponse>, AxiosError, UserVerifyInfo>({
       mutationFn: (verifyInfo: UserVerifyInfo) => post(API_PATH.USER.SIGNUP.VERIFY, verifyInfo),
       ...options,
@@ -41,7 +40,7 @@ export const usePostStudentVerify = (
          toast({
             title: '인증되었습니다',
          });
-         navigate(ROUTES.SIGNUP.INFO, {
+         navigate(`${ROUTES.SIGNUP.INFO}?${searchParams.toString()}`, {
             state: {
                data,
             },
@@ -53,6 +52,6 @@ export const usePostStudentVerify = (
          toast({
             title: errorMsg,
          });
-      }
+      },
    });
 };
diff --git a/src/pages/reset/resetIdPw.tsx b/src/pages/reset/resetIdPw.tsx
@@ -5,18 +5,19 @@ import { ROUTES } from '@constants/route';
 import { useEffectOnce } from '@hooks/useEffectOnce';
 import { useLayout } from '@hooks/useLayout';
 import React from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 
 export default function ResetIdPw() {
    const { setLayout } = useLayout();
    const navigate = useNavigate();
+   const [searchParams] = useSearchParams();
 
    const handleFindId = () => {
-      navigate(ROUTES.RESET.ID);
+      navigate(`${ROUTES.RESET.ID}?${searchParams.toString()}`);
    };
 
    const handleVerifyPw = () => {
-      navigate(ROUTES.RESET.PW_VERIFY);
+      navigate(`${ROUTES.RESET.PW_VERIFY}?${searchParams.toString()}`);
    };
 
    useEffectOnce(() => {