Feat/118/auth api

src/_apis/auth/logout-apis.ts

@@ -0,0 +1,10 @@
+import { fetchApi } from '@/src/utils/api';
+
+export function logout(): Promise<void> {
+  return fetchApi('/auths/logout', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+}

src/_apis/auth/reissue-apis.ts

@@ -0,0 +1,18 @@
+import { fetchApi } from '@/src/utils/api';
+
+export async function reissue(): Promise<{ token: string | null }> {
+  return fetchApi<{ headers: Headers }>(
+    '/auths/reissue',
+    {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    },
+    5000,
+    true,
+  ).then((response) => {
+    const token = response.headers.get('Authorization');
+    return { token };
+  });
+}

src/_queries/auth/login-queries.ts

@@ -1,8 +1,8 @@
 import { useMutation } from '@tanstack/react-query';
 import { login } from '@/src/_apis/auth/login-apis';
+import { useHandleAuthSuccess } from '@/src/hooks/use-handle-auth-success';
 import { ApiError } from '@/src/utils/api';
 import { LoginRequest, LoginResponse } from '@/src/types/auth';
-import { useHandleAuthSuccess } from './use-handle-auth-success';
 
 export function usePostLoginQuery() {
   const handleAuthSuccess = useHandleAuthSuccess();

src/_queries/auth/logout-queries.ts

@@ -0,0 +1,9 @@
+import { useMutation } from '@tanstack/react-query';
+import { logout } from '@/src/_apis/auth/logout-apis';
+import { ApiError } from '@/src/utils/api';
+
+export function usePostLogoutQuery() {
+  return useMutation<void, ApiError>({
+    mutationFn: logout,
+  });
+}

src/_queries/auth/reissue-queries.ts

@@ -0,0 +1,15 @@
+import { useMutation } from '@tanstack/react-query';
+import { reissue } from '@/src/_apis/auth/reissue-apis';
+import { useHandleAuthSuccess } from '@/src/hooks/use-handle-auth-success';
+import { ApiError } from '@/src/utils/api';
+
+export function usePostReissueQuery() {
+  const handleAuthSuccess = useHandleAuthSuccess();
+
+  return useMutation<{ token: string | null }, ApiError>({
+    mutationFn: reissue,
+    onSuccess: async (response) => {
+      await handleAuthSuccess(response.token);
+    },
+  });
+}

src/_queries/auth/signup-queries.ts

@@ -1,8 +1,8 @@
 import { useMutation } from '@tanstack/react-query';
 import { signup } from '@/src/_apis/auth/signup-apis';
+import { useHandleAuthSuccess } from '@/src/hooks/use-handle-auth-success';
 import { ApiError } from '@/src/utils/api';
 import { SignupRequest, SignupResponse } from '@/src/types/auth';
-import { useHandleAuthSuccess } from './use-handle-auth-success';
 
 export function usePostSignupQuery() {
   const handleAuthSuccess = useHandleAuthSuccess();

src/_queries/auth/user-queries.ts

@@ -0,0 +1,12 @@
+import { useQuery } from '@tanstack/react-query';
+import { getUser } from '@/src/_apis/auth/user-apis';
+import { authStore } from '@/src/store/use-auth-store';
+
+export function useUser() {
+  const { token } = authStore.getState();
+  return useQuery({
+    queryKey: ['user'],
+    queryFn: getUser,
+    enabled: !!token,
+  });
+}

src/app/(auth)/layout.tsx

@@ -1,3 +1,4 @@
+import { Suspense } from 'react';
 import type { Metadata } from 'next';
 import Image from 'next/image';
 import '@mantine/core/styles.css';
@@ -30,7 +31,9 @@ export default function AuthLayout({
           <div className="mt-4 text-center text-sm font-semibold lg:text-base">
             함께할 사람이없나요? 지금 크루에 참여해보세요
           </div>
-          <div className="mt-6 w-full md:mt-12 md:w-2/3 lg:w-1/2">{children}</div>
+          <div className="mt-6 w-full md:mt-12 md:w-2/3 lg:w-1/2">
+            <Suspense>{children}</Suspense>
+          </div>
         </div>
       </div>
     </div>

src/app/(auth)/login/_component/login-form.tsx

@@ -1,6 +1,7 @@
-import { UseFormReturn } from 'react-hook-form';
-import { Button } from '@mantine/core';
-import { useDebouncedCallback } from '@mantine/hooks';
+import { useEffect } from 'react';
+import { UseFormReturn, useWatch } from 'react-hook-form';
+import { useDebouncedValue } from '@mantine/hooks';
+import Button from '@/src/components/common/input/button';
 import PasswordInput from '@/src/components/common/input/password-input';
 import TextInput from '@/src/components/common/input/text-input';
 
@@ -18,15 +19,29 @@ export default function LoginForm({ onSubmit, formMethods }: LoginFormProps) {
     register,
     handleSubmit,
     trigger,
+    control,
     formState: { errors, isValid },
   } = formMethods;
 
-  const debouncedTrigger = useDebouncedCallback(async (field: keyof LoginFormValues) => {
-    await trigger(field);
-  }, 1000);
+  const email = useWatch({ control, name: 'email' });
+  const password = useWatch({ control, name: 'password' });
+
+  const [debouncedEmail, cancelDebouncedEmail] = useDebouncedValue(email, 1000);
+  const [debouncedPassword, cancelDebouncedPassword] = useDebouncedValue(password, 1000);
+
+  useEffect(() => {
+    if (debouncedEmail) trigger('email');
+    if (debouncedPassword) trigger('password');
+  }, [debouncedEmail, debouncedPassword, trigger]);
+
+  const handleFormSubmit = handleSubmit(async (data) => {
+    onSubmit(data);
+    cancelDebouncedEmail();
+    cancelDebouncedPassword();
+  });
 
   return (
-    <form onSubmit={handleSubmit(onSubmit)}>
+    <form onSubmit={handleFormSubmit}>
       <TextInput
         label="아이디"
         placeholder="이메일을 입력해주세요"
@@ -38,7 +53,6 @@ export default function LoginForm({ onSubmit, formMethods }: LoginFormProps) {
               message: '이메일 형식으로 입력해주세요',
             },
             onBlur: () => trigger('email'),
-            onChange: async () => debouncedTrigger('email'),
           }),
         }}
         error={errors.email?.message}
@@ -56,7 +70,6 @@ export default function LoginForm({ onSubmit, formMethods }: LoginFormProps) {
               message: '비밀번호가 8자 이상이 되도록 해주세요.',
             },
             onBlur: () => trigger('password'),
-            onChange: async () => debouncedTrigger('password'),
           }),
         }}
         error={errors.password?.message}
@@ -65,8 +78,11 @@ export default function LoginForm({ onSubmit, formMethods }: LoginFormProps) {
       />
 
       <div className="mt-10">
-        {/* TODO: Button 바꾸기 */}
-        <Button disabled={!isValid} type="submit" fullWidth>
+        <Button
+          disabled={!isValid}
+          type="submit"
+          className={`w-full font-semibold ${isValid ? 'bg-blue-500 text-white' : 'bg-gray-100 text-gray-300'}`}
+        >
           로그인
         </Button>
       </div>

src/app/(auth)/login/page.tsx

@@ -1,22 +1,29 @@
 'use client';
 
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import Link from 'next/link';
-import { useRouter } from 'next/navigation';
+import { useRouter, useSearchParams } from 'next/navigation';
 import { usePostLoginQuery } from '@/src/_queries/auth/login-queries';
 import LoginForm, { LoginFormValues } from './_component/login-form';
 
 export default function LoginPage() {
+  const [redirect, setRedirect] = useState('/');
+  const searchParams = useSearchParams();
   const router = useRouter();
   const formMethods = useForm<LoginFormValues>();
   const { setError } = formMethods;
   const { mutate: postLogin } = usePostLoginQuery();
 
+  useEffect(() => {
+    const redirectParam = searchParams.get('redirect');
+    if (redirectParam) setRedirect(redirectParam);
+  }, [searchParams]);
+
   const handleSubmit = async (data: LoginFormValues) => {
     postLogin(data, {
       onSuccess: () => {
-        router.push('/');
+        router.push(redirect);
       },
       onError: (error) => {
         if (error.status === 401) {
@@ -38,7 +45,10 @@ export default function LoginPage() {
       <LoginForm formMethods={formMethods} onSubmit={handleSubmit} />
       <div className="mt-6 flex justify-center space-x-1 text-sm font-medium">
         <div>크루가 처음이신가요?</div>
-        <Link href="/signup" className="text-blue-500 underline">
+        <Link
+          href={redirect !== '/' ? `/signup?redirect=${redirect}` : '/signup'}
+          className="text-blue-500 underline"
+        >
           회원가입
         </Link>
       </div>

src/app/(auth)/signup/_component/signup-form.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
-import { UseFormReturn } from 'react-hook-form';
-import { Button } from '@mantine/core';
-import { useDebouncedCallback } from '@mantine/hooks';
+import { UseFormReturn, useWatch } from 'react-hook-form';
+import { useDebouncedValue } from '@mantine/hooks';
+import Button from '@/src/components/common/input/button';
 import PasswordInput from '@/src/components/common/input/password-input';
 import TextInput from '@/src/components/common/input/text-input';
 
@@ -22,32 +22,59 @@ export default function SignupForm({ formMethods, onSubmit }: SignupFormProps) {
     register,
     handleSubmit,
     trigger,
+    control,
     formState: { errors, isValid },
-    watch,
   } = formMethods;
 
-  const debouncedTrigger = useDebouncedCallback(async (field: keyof SignupFormValues) => {
-    await trigger(field);
-  }, 1000);
+  const [nickname, email, password, confirmPassword] = useWatch({
+    control,
+    name: ['nickname', 'email', 'password', 'confirmPassword'],
+  });
 
-  const password = watch('password');
+  const [debouncedNickname, cancelDebouncedNickname] = useDebouncedValue(nickname, 1000);
+  const [debouncedEmail, cancelDebouncedEmail] = useDebouncedValue(email, 1000);
+  const [debouncedPassword, cancelDebouncedPassword] = useDebouncedValue(password, 1000);
+  const [debouncedConfirmPassword, cancelDebouncedConfirmPassword] = useDebouncedValue(
+    confirmPassword,
+    1000,
+  );
+
+  useEffect(() => {
+    if (debouncedNickname) trigger('nickname');
+  }, [nickname, trigger]);
+
+  useEffect(() => {
+    if (debouncedEmail) trigger('email');
+  }, [email, trigger]);
 
   useEffect(() => {
-    if (password) {
+    if (debouncedPassword) {
+      trigger('password');
       trigger('confirmPassword');
     }
   }, [password, trigger]);
 
+  useEffect(() => {
+    if (debouncedConfirmPassword) trigger('confirmPassword');
+  }, [confirmPassword, trigger]);
+
+  const handleFormSubmit = handleSubmit(async (data) => {
+    onSubmit(data);
+    cancelDebouncedNickname();
+    cancelDebouncedEmail();
+    cancelDebouncedPassword();
+    cancelDebouncedConfirmPassword();
+  });
+
   return (
-    <form onSubmit={handleSubmit(onSubmit)}>
+    <form onSubmit={handleFormSubmit}>
       <TextInput
         label="닉네임"
         placeholder="닉네임을 입력해주세요"
         register={{
           ...register('nickname', {
             required: '닉네임을 입력해주세요',
             onBlur: () => trigger('nickname'),
-            onChange: async () => debouncedTrigger('nickname'),
           }),
         }}
         error={errors.nickname?.message}
@@ -65,7 +92,6 @@ export default function SignupForm({ formMethods, onSubmit }: SignupFormProps) {
               message: '이메일 형식으로 입력해주세요',
             },
             onBlur: () => trigger('email'),
-            onChange: async () => debouncedTrigger('email'),
           }),
         }}
         error={errors.email?.message}
@@ -84,7 +110,6 @@ export default function SignupForm({ formMethods, onSubmit }: SignupFormProps) {
               message: '비밀번호가 8자 이상이 되도록 해주세요.',
             },
             onBlur: () => trigger('password'),
-            onChange: async () => debouncedTrigger('password'),
           }),
         }}
         error={errors.password?.message}
@@ -100,7 +125,6 @@ export default function SignupForm({ formMethods, onSubmit }: SignupFormProps) {
             required: '비밀번호를 다시 입력해주세요',
             validate: (value) => value === password || '비밀번호가 일치하지 않습니다.',
             onBlur: () => trigger('confirmPassword'),
-            onChange: async () => debouncedTrigger('confirmPassword'),
           }),
         }}
         error={errors.confirmPassword?.message}
@@ -109,8 +133,11 @@ export default function SignupForm({ formMethods, onSubmit }: SignupFormProps) {
       />
 
       <div className="mt-10">
-        {/* TODO: button 바꾸기 */}
-        <Button disabled={!isValid} type="submit" fullWidth>
+        <Button
+          disabled={!isValid}
+          type="submit"
+          className={`w-full font-semibold ${isValid ? 'bg-blue-500 text-white' : 'bg-gray-100 text-gray-300'}`}
+        >
           회원가입
         </Button>
       </div>