페이지 기능: 로그인 페이지 쿼리훅 제작

src/app/login/page.tsx

@@ -12,19 +12,28 @@ import Header from '@components/shared/header/Header';
 import Spacing from '@components/shared/spacing/Spacing';
 import TextField from '@components/shared/text-field/TextField';
 import Title from '@components/shared/title/Title';
+import VALIDATION_MESSAGE_MAP from '@constants/validationMessage';
 import { ISignIn } from '@remote/api/types/auth';
+import useLogin from '@remote/queries/auth/useLogin';
 
 import styles from './page.module.scss';
 
 const cx = classNames.bind(styles);
 
 function LoginPage() {
-  const { register, handleSubmit } = useForm<ISignIn>();
+  const { register, handleSubmit, formState: { isValid } } = useForm<ISignIn>();
+  const { mutate } = useLogin();
 
-  // eslint-disable-next-line @typescript-eslint/require-await
-  const onSubmit = async () => {
-    // console.log(data);
+  const onSubmit = (data: ISignIn) => {
+    const {
+      id, password,
+    } = data;
+    mutate({
+      id, password,
+    });
   };
+
+  // TODO: api return 값에 따라 error처리
   return (
     <main>
       <Header displayLogo={false} />
@@ -35,16 +44,17 @@ function LoginPage() {
           label="아이디"
           required
           placeholder="아이디"
-          {...register('id')}
+          {...register('id', { required: true })}
         />
         <TextField
           label="비밀번호"
           required
           placeholder="비밀번호"
-          {...register('password')}
+          {...register('password', { required: true })}
+          helpMessage={VALIDATION_MESSAGE_MAP.failedLogin.message}
         />
         <Spacing size={30} />
-        <Button type="submit" size="medium" full>
+        <Button type="submit" disabled={!isValid} size="medium" full>
           로그인
         </Button>
         <Spacing size={20} />

src/constants/validationMessage.ts

@@ -19,6 +19,7 @@ const VALIDATION_MESSAGE_MAP: {
   confirmPassword: {
     message: '비밀번호를 확인해주세요.',
   },
+  failedLogin: { message: '아이디 또는 비밀번호를 확인해주세요.' },
 } as const;
 
 export default VALIDATION_MESSAGE_MAP;

src/mocks/authHandler/index.ts

@@ -6,4 +6,9 @@ export const authHandlers = [
   http.post(`${process.env.NEXT_PUBLIC_BASE_URL}/member/join`, () => {
     return HttpResponse.json('회원가입 성공!!');
   }),
+
+  /* ----- 로그인 api ----- */
+  http.post(`${process.env.NEXT_PUBLIC_BASE_URL}/member/login`, () => {
+    return HttpResponse.json('로그인 성공!!');
+  }),
 ];

src/remote/api/requests/auth/auth.post.api.ts

@@ -1,4 +1,4 @@
-import { ISignUp } from '../../types/auth';
+import { ISignIn, ISignUp } from '../../types/auth';
 import { postRequest } from '../requests.api';
 
 export const signup = async ({
@@ -10,3 +10,13 @@ export const signup = async ({
 
   return response;
 };
+
+export const login = async ({
+  id, password,
+}: ISignIn) => {
+  const response = await postRequest<null, ISignIn>('/member/login', {
+    id, password,
+  });
+
+  return response;
+};

src/remote/queries/auth/useLogin.ts

@@ -0,0 +1,16 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { login } from '@remote/api/requests/auth/auth.post.api';
+
+function useLogin() {
+  return useMutation({
+    mutationFn: login,
+    // eslint-disable-next-line no-console
+    onSuccess: () => { console.log('요청 성공'); },
+    onError: () => { console.error('에러 발생'); },
+    // eslint-disable-next-line no-console
+    onSettled: () => { console.log('결과에 관계 없이 무언가 실행됨'); },
+  });
+}
+
+export default useLogin;