Merge pull request #211 from epigram5-9/refactor/FE-29

FE-29 🔧 로그인 페이지 수정

src/apis/auth.ts

@@ -1,4 +1,4 @@
-import type { PostSigninRequestType, PostSigninResponseType, PostSignUpRequestType, PostSignUpResponseType } from '@/schema/auth';
+import type { PostRefreshTokenRequestType, PostRefreshTokenResponseType, PostSigninRequestType, PostSigninResponseType, PostSignUpRequestType, PostSignUpResponseType } from '@/schema/auth';
 import httpClient from '.';
 
 export const postSignin = async (request: PostSigninRequestType): Promise<PostSigninResponseType> => {
@@ -10,3 +10,8 @@ export const postSignup = async (request: PostSignUpRequestType): Promise<PostSi
   const response = await httpClient.post('/auth/signUp', request);
   return response.data;
 };
+
+export const postRefreshToken = async (request: PostRefreshTokenRequestType): Promise<PostRefreshTokenResponseType> => {
+  const response = await httpClient.post('/auth/refresh-token', request);
+  return response.data;
+};

src/hooks/useRefreshToken.ts

@@ -0,0 +1,16 @@
+import { useMutation } from '@tanstack/react-query';
+import { postRefreshToken } from '@/apis/auth';
+import { PostRefreshTokenRequestType, PostRefreshTokenResponseType } from '@/schema/auth';
+
+const useRefreshToken = () =>
+  useMutation<PostRefreshTokenResponseType, Error, PostRefreshTokenRequestType>({
+    mutationFn: postRefreshToken,
+    onSuccess: (data) => {
+      localStorage.setItem('accessToken', data.accessToken);
+    },
+    onError: () => {
+      localStorage.removeItem('refreshToken');
+    },
+  });
+
+export default useRefreshToken;

src/pages/auth/SignIn.tsx

@@ -9,17 +9,21 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { Form, FormControl, FormField, FormItem, FormMessage } from '@/components/ui/form';
 import { PostSigninRequest, PostSigninRequestType } from '@/schema/auth';
 import useSigninMutation from '@/hooks/useSignInMutation';
+import useRefreshToken from '@/hooks/useRefreshToken';
 
 export default function SignIn() {
   const mutationSignin = useSigninMutation();
+  const { mutate: refreshAccessToken } = useRefreshToken();
   const router = useRouter();
 
   useEffect(() => {
-    const accessToken = localStorage.getItem('accessToken');
-    if (accessToken) {
+    const refreshToken = typeof window !== 'undefined' ? localStorage.getItem('refreshToken') : null;
+
+    if (refreshToken) {
+      refreshAccessToken({ refreshToken });
       router.push('/epigrams');
     }
-  }, [router]);
+  }, [refreshAccessToken]);
 
   // 폼 정의
   const form = useForm<PostSigninRequestType>({

src/pages/auth/SignUp.tsx

@@ -9,17 +9,21 @@ import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
 import useRegisterMutation from '@/hooks/useRegisterMutation';
+import useRefreshToken from '@/hooks/useRefreshToken';
 
 export default function SignUp() {
   const [focusedField, setFocusedField] = useState<string | null>(null);
+  const { mutate: refreshAccessToken } = useRefreshToken();
   const router = useRouter();
 
   useEffect(() => {
-    const accessToken = localStorage.getItem('accessToken');
-    if (accessToken) {
+    const refreshToken = typeof window !== 'undefined' ? localStorage.getItem('refreshToken') : null;
+
+    if (refreshToken) {
+      refreshAccessToken({ refreshToken });
       router.push('/epigrams');
     }
-  }, [router]);
+  }, [refreshAccessToken]);
 
   const form = useForm<PostSignUpRequestType>({
     resolver: zodResolver(PostSignUpRequest),

src/schema/auth.ts

@@ -41,9 +41,20 @@ export const PostAuthResponse = z.object({
   user: User,
 });
 
+export const PostRefreshTokenRequest = z.object({
+  refreshToken: z.string(),
+});
+
+export const PostRefreshTokenResponse = z.object({
+  accessToken: z.string(),
+});
+
 // NOTE: 회원가입 타입
 export type PostSignUpRequestType = z.infer<typeof PostSignUpRequest>;
 export type PostSignUpResponseType = z.infer<typeof PostAuthResponse>;
 // NOTE: 로그인 타입
 export type PostSigninRequestType = z.infer<typeof PostSigninRequest>;
 export type PostSigninResponseType = z.infer<typeof PostAuthResponse>;
+// NOTE: 리프레시 토큰
+export type PostRefreshTokenRequestType = z.infer<typeof PostRefreshTokenRequest>;
+export type PostRefreshTokenResponseType = z.infer<typeof PostRefreshTokenResponse>;