feat: implement user auth

src/pages/signin/index.tsx

@@ -1,32 +1,49 @@
 import Image from 'next/image';
 import { useRouter } from 'next/router';
-import { useForm } from 'react-hook-form';
+import { FieldValues, useForm } from 'react-hook-form';
+import { useSignInUser } from '@/query-hooks/useUsers';
 import { Button, Input } from '@/components/shared';
 
 export default function SignInPage() {
   const router = useRouter();
+  const { mutate } = useSignInUser();
   const {
     formState: { isValid },
     register,
     handleSubmit,
   } = useForm();
 
-  const onSubmit = (data: object) => {
-    // NOTE: 로그인 API 연결
-    const uuid = 1111;
-    router.push(`/user/${uuid}`);
+  const onSubmit = (data: FieldValues) => {
+    mutate(
+      { userId: data.id, password: data.password },
+      {
+        onSuccess: (data) => {
+          const userId = data.user_id;
+          localStorage.setItem('userId', userId);
+          router.push(`/user/${data.user_id}`);
+        },
+      },
+    );
   };
 
-  const { ref: idRef, onChange: onIdChange } = register('id', { required: true });
-  const { ref: pwRef, onChange: onPwChange } = register('password', { required: true, minLength: 4 });
+  const { ref: idRef, onChange: onIdChange } = register('id', {
+    required: true,
+  });
+  const { ref: pwRef, onChange: onPwChange } = register('password', {
+    required: true,
+    minLength: 4,
+  });
 
   return (
     <div className='tw-relative tw-flex tw-h-[100vh] tw-w-full tw-flex-col tw-bg-white tw-px-5 tw-py-8'>
       <div className='mb-10 tw-mb-11 tw-flex tw-items-center tw-gap-2'>
         <Image alt='logo' src='/logo.svg' width={32} height={32} />
         <h1 className='tw-text-logo'>Grafi</h1>
       </div>
-      <form onSubmit={handleSubmit(onSubmit)} className='tw-flex tw-flex-1 tw-flex-col tw-justify-between'>
+      <form
+        onSubmit={handleSubmit(onSubmit)}
+        className='tw-flex tw-flex-1 tw-flex-col tw-justify-between'
+      >
         <div className='tw-flex tw-flex-col tw-gap-10'>
           <Input
             inputKey='id'

src/pages/signup/index.tsx

@@ -1,6 +1,7 @@
 import Image from 'next/image';
 import { useRouter } from 'next/router';
-import { useForm } from 'react-hook-form';
+import { FieldValues, useForm } from 'react-hook-form';
+import { useCreateUser } from '@/query-hooks/useUsers';
 import { isString } from '@/utils';
 import { Button, Input } from '@/components/shared';
 
@@ -12,33 +13,46 @@ export default function SignUpPage() {
     handleSubmit,
     setError,
   } = useForm();
+  const { mutate } = useCreateUser();
 
-  // NOTE: ID 체크 API 연결 예정
-  const checkValidID = () => {
-    return false;
+  const onSubmit = (req: FieldValues) => {
+    mutate(
+      { user_id: req.id, name: '고양이발바닥뀩', password: req.password },
+      {
+        onSuccess: (data) => {
+          router.push(`/user/${data.user_id}`);
+          return;
+        },
+        onError: () => {
+          setError(
+            'id',
+            { message: '이미 사용 중인 아이디입니다' },
+            { shouldFocus: true },
+          );
+          return;
+        },
+      },
+    );
   };
 
-  const onSubmit = (data: object) => {
-    const isValidID = checkValidID();
-    if (isValidID) {
-      // NOTE : 회원가입 요청 API 후 uuid값 리턴받음
-      const uuid = '1111';
-      router.push(`/user/${uuid}`);
-      return;
-    }
-    setError('id', { message: '이미 사용 중인 아이디입니다' }, { shouldFocus: true });
-  };
-
-  const { ref: idRef, onChange: onIdChange } = register('id', { required: true });
-  const { ref: pwRef, onChange: onPwChange } = register('password', { required: true, minLength: 4 });
+  const { ref: idRef, onChange: onIdChange } = register('id', {
+    required: true,
+  });
+  const { ref: pwRef, onChange: onPwChange } = register('password', {
+    required: true,
+    minLength: 4,
+  });
 
   return (
     <div className='tw-relative tw-flex tw-h-[100vh] tw-w-full tw-flex-col tw-bg-white tw-px-5 tw-py-8'>
       <div className='mb-10 tw-mb-11 tw-flex tw-items-center tw-gap-2'>
         <Image alt='logo' src='/logo.svg' width={32} height={32} />
         <h1 className='tw-text-logo'>Grafi</h1>
       </div>
-      <form onSubmit={handleSubmit(onSubmit)} className='tw-flex tw-flex-1 tw-flex-col tw-justify-between'>
+      <form
+        onSubmit={handleSubmit(onSubmit)}
+        className='tw-flex tw-flex-1 tw-flex-col tw-justify-between'
+      >
         <div className='tw-flex tw-flex-col tw-gap-10'>
           <Input
             inputKey='id'

src/query-hooks/useFilms/api.ts

@@ -1,15 +1,13 @@
 import axios from 'axios';
 
 const getFilms = async (userId: string) => {
-  const { data } = await axios.get(
-    `${process.env.GRAFi_MAIN_HOST}/api/films?userId=${userId}`,
-  );
+  const { data } = await axios.get(`/api/films?userId=${userId}`);
 
   return data;
 };
 
 const editFilms = async (filmId: number, title: string) => {
-  const { data } = await axios.put(`${process.env.GRAFi_MAIN_HOST}/api/films`, {
+  const { data } = await axios.put(`/api/films`, {
     filmId,
     title,
   });
@@ -18,28 +16,21 @@ const editFilms = async (filmId: number, title: string) => {
 };
 
 const createFilms = async (title: string, userId: string) => {
-  const { data } = await axios.post(
-    `${process.env.GRAFi_MAIN_HOST}/api/films`,
-    {
-      title,
-      userId,
-    },
-  );
+  const { data } = await axios.post(`/api/films`, {
+    title,
+    userId,
+  });
 
   return data;
 };
 
 const getFilm = async (filmId: number) => {
-  const { data } = await axios.get(
-    `${process.env.GRAFi_MAIN_HOST}/api/films/${filmId}`,
-  );
+  const { data } = await axios.get(`/api/films/${filmId}`);
   return data;
 };
 
 const deleteFilm = async (filmId: number) => {
-  const { data } = await axios.delete(
-    `${process.env.GRAFi_MAIN_HOST}/api/films/${filmId}`,
-  );
+  const { data } = await axios.delete(`/api/films/${filmId}`);
   return data;
 };
 

src/query-hooks/useImages/apis.ts

@@ -1,9 +1,7 @@
 import axios from 'axios';
 
 const getPresignedUrl = async (filename: string) => {
-  const { data } = await axios.get(
-    `${process.env.GRAFi_MAIN_HOST}/api/images?filename=${filename}`,
-  );
+  const { data } = await axios.get(`/api/images?filename=${filename}`);
 
   return data;
 };

src/query-hooks/usePhotoCuts/apis.ts

@@ -2,32 +2,22 @@ import { CreateCuts, EditCuts } from './type';
 import axios from 'axios';
 
 const editPhotoCut = async (body: EditCuts) => {
-  const { data } = await axios.put(
-    `${process.env.GRAFi_MAIN_HOST}/api/photo-cuts`,
-    body,
-  );
+  const { data } = await axios.put(`/api/photo-cuts`, body);
   return data;
 };
 
 const createPhotoCut = async (body: CreateCuts) => {
-  const { data } = await axios.post(
-    `${process.env.GRAFi_MAIN_HOST}/api/photo-cuts`,
-    body,
-  );
+  const { data } = await axios.post(`/api/photo-cuts`, body);
   return data;
 };
 
 const getPhotoCut = async (cutId: number) => {
-  const { data } = await axios.get(
-    `${process.env.GRAFi_MAIN_HOST}/api/photo-cuts/${cutId}`,
-  );
+  const { data } = await axios.get(`/api/photo-cuts/${cutId}`);
   return data;
 };
 
 const deletePhotoCut = async (cutId: number) => {
-  const { data } = await axios.delete(
-    `${process.env.GRAFi_MAIN_HOST}/api/photo-cuts/${cutId}`,
-  );
+  const { data } = await axios.delete(`/api/photo-cuts/${cutId}`);
   return data;
 };
 

src/query-hooks/useUsers/apis.ts

@@ -2,7 +2,7 @@ import { CreateUser, CreateVisitLog, EditUser } from './type';
 import axios from 'axios';
 
 const signInUser = async (userId: string, password: string) => {
-  const { data } = await axios.post(`${process.env.GRAFi_MAIN_HOST}/api/auth`, {
+  const { data } = await axios.post(`/api/auth`, {
     user_id: userId,
     password,
   });
@@ -11,49 +11,38 @@ const signInUser = async (userId: string, password: string) => {
 };
 
 const editUser = async (body: EditUser) => {
-  const { data } = await axios.put(
-    `${process.env.GRAFi_MAIN_HOST}/api/users`,
-    body,
-  );
+  const { data } = await axios.put(`/api/users`, body);
 
   return data;
 };
 
 const createUser = async (body: CreateUser) => {
-  const { data } = await axios.post(
-    `${process.env.GRAFi_MAIN_HOST}/api/users`,
-    body,
-  );
-
-  return data;
+  console.log(body);
+  try {
+    const { data } = await axios.post(`/api/users`, body);
+    return data;
+  } catch (e) {
+    return e;
+  }
 };
 
 const getUser = async (userId: string) => {
-  const { data } = await axios.get(
-    `${process.env.GRAFi_MAIN_HOST}/api/users/${userId}`,
-  );
+  const { data } = await axios.get(`/api/users/${userId}`);
   return data;
 };
 
 const getUserVisitLogs = async (userId: string) => {
-  const { data } = await axios.get(
-    `${process.env.GRAFi_MAIN_HOST}/api/users/${userId}/visit-logs`,
-  );
+  const { data } = await axios.get(`/api/users/${userId}/visit-logs`);
   return data;
 };
 
 const createUserVisitLog = async (userId: string, body: CreateVisitLog) => {
-  const { data } = await axios.post(
-    `${process.env.GRAFi_MAIN_HOST}/api/users/${userId}/visit-logs`,
-    body,
-  );
+  const { data } = await axios.post(`/api/users/${userId}/visit-logs`, body);
   return data;
 };
 
 const deleteUserVisitLog = async (userId: string, logId: string) => {
-  const { data } = await axios.post(
-    `${process.env.GRAFi_MAIN_HOST}/api/users/${userId}/visit-logs/${logId}`,
-  );
+  const { data } = await axios.post(`/api/users/${userId}/visit-logs/${logId}`);
   return data;
 };