feat: implement user auth

src/assets/icons/index.ts

@@ -1,4 +1,3 @@
-export { default as Close } from './close.svg';
 export { default as Edit } from './edit.svg';
 export { default as Info } from './info.svg';
 export { default as Menu } from './menu.svg';

src/pages/api/auth.ts

@@ -3,7 +3,10 @@ import { HttpMethod } from '@/constants/httpMethods';
 import { AxiosError } from 'axios';
 import { instance } from '@/utils/axiosInstance';
 
-export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse,
+) {
   if (req.method === HttpMethod.POST) {
     // Process a POST request
     try {

src/pages/signin/index.tsx

@@ -1,32 +1,65 @@
 import Image from 'next/image';
 import { useRouter } from 'next/router';
-import { useForm } from 'react-hook-form';
+import { FieldValues, useForm } from 'react-hook-form';
+import { useMutation } from '@tanstack/react-query';
+import { useSignInUser } from '@/query-hooks/useUsers';
+import { isString } from '@/utils';
+import axios, { AxiosError } from 'axios';
 import { Button, Input } from '@/components/shared';
 
 export default function SignInPage() {
   const router = useRouter();
+  const { mutate } = useSignInUser();
+  // const {mutate} = useMutation()
+
   const {
-    formState: { isValid },
+    formState: { isValid, errors },
     register,
     handleSubmit,
+    setError,
   } = 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}`);
+        },
+        onError: (e: any) => {
+          const err = e as AxiosError;
+          setError(
+            'password',
+            {
+              message: err.response?.data as string,
+            },
+            { 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'
@@ -43,6 +76,9 @@ export default function SignInPage() {
             label='비밀번호'
             caption='숫자만 입력 가능'
             placeholder='비밀번호 4자리를 입력해주세요'
+            feedback={
+              isString(errors.password?.message) ? errors.password?.message : ''
+            }
             maxLength={4}
             ref={pwRef}
             handleChange={onPwChange}

src/pages/signup/index.tsx

@@ -1,6 +1,8 @@
 import Image from 'next/image';
 import { useRouter } from 'next/router';
-import { useForm } from 'react-hook-form';
+import { FieldValues, useForm } from 'react-hook-form';
+import { useMutation } from '@tanstack/react-query';
+import { useCreateUser } from '@/query-hooks/useUsers';
 import { isString } from '@/utils';
 import { Button, Input } from '@/components/shared';
 
@@ -12,33 +14,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, password: req.password },
+      {
+        onSuccess: (data) => {
+          router.push(`/user/${data.user_id}`);
+          return;
+        },
+        onError: (error) => {
+          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/providers/QueryProvider.tsx

@@ -33,7 +33,7 @@ export function QueryProvider({
             suspense: true,
           },
           mutations: {
-            useErrorBoundary: true,
+            useErrorBoundary: false,
           },
           ...queryOptions?.defaultOptions,
         },

src/query-hooks/useFilms/api.ts

@@ -1,25 +1,25 @@
 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`, {
-    filmId,
-    title,
-  });
+  const { data } = await axios.put(
+    `${process.env.NEXT_PUBLIC_GRAFI_MAIN_HOST}/api/films`,
+    {
+      filmId,
+      title,
+    },
+  );
 
   return data;
 };
 
 const createFilms = async (title: string, userId: string) => {
   const { data } = await axios.post(
-    `${process.env.GRAFi_MAIN_HOST}/api/films`,
+    `${process.env.NEXT_PUBLIC_GRAFI_MAIN_HOST}/api/films`,
     {
       title,
       userId,
@@ -31,14 +31,14 @@ const createFilms = async (title: string, userId: string) => {
 
 const getFilm = async (filmId: number) => {
   const { data } = await axios.get(
-    `${process.env.GRAFi_MAIN_HOST}/api/films/${filmId}`,
+    `${process.env.NEXT_PUBLIC_GRAFI_MAIN_HOST}/api/films/${filmId}`,
   );
   return data;
 };
 
 const deleteFilm = async (filmId: number) => {
   const { data } = await axios.delete(
-    `${process.env.GRAFi_MAIN_HOST}/api/films/${filmId}`,
+    `${process.env.NEXT_PUBLIC_GRAFI_MAIN_HOST}/api/films/${filmId}`,
   );
   return data;
 };

src/query-hooks/useImages/apis.ts

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

src/query-hooks/usePhotoCuts/apis.ts

@@ -3,30 +3,30 @@ import axios from 'axios';
 
 const editPhotoCut = async (body: EditCuts) => {
   const { data } = await axios.put(
-    `${process.env.GRAFi_MAIN_HOST}/api/photo-cuts`,
+    `${process.env.NEXT_PUBLIC_GRAFI_MAIN_HOST}/api/photo-cuts`,
     body,
   );
   return data;
 };
 
 const createPhotoCut = async (body: CreateCuts) => {
   const { data } = await axios.post(
-    `${process.env.GRAFi_MAIN_HOST}/api/photo-cuts`,
+    `${process.env.NEXT_PUBLIC_GRAFI_MAIN_HOST}/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}`,
+    `${process.env.NEXT_PUBLIC_GRAFI_MAIN_HOST}/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}`,
+    `${process.env.NEXT_PUBLIC_GRAFI_MAIN_HOST}/api/photo-cuts/${cutId}`,
   );
   return data;
 };

src/query-hooks/useUsers/apis.ts

@@ -2,17 +2,19 @@ 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`, {
-    user_id: userId,
-    password,
-  });
-
+  const { data } = await axios.post(
+    `${process.env.NEXT_PUBLIC_GRAFI_MAIN_HOST}/api/auth`,
+    {
+      user_id: userId,
+      password,
+    },
+  );
   return data;
 };
 
 const editUser = async (body: EditUser) => {
   const { data } = await axios.put(
-    `${process.env.GRAFi_MAIN_HOST}/api/users`,
+    `${process.env.NEXT_PUBLIC_GRAFI_MAIN_HOST}/api/users`,
     body,
   );
 
@@ -21,38 +23,37 @@ const editUser = async (body: EditUser) => {
 
 const createUser = async (body: CreateUser) => {
   const { data } = await axios.post(
-    `${process.env.GRAFi_MAIN_HOST}/api/users`,
+    `${process.env.NEXT_PUBLIC_GRAFI_MAIN_HOST}/api/users`,
     body,
   );
-
   return data;
 };
 
 const getUser = async (userId: string) => {
   const { data } = await axios.get(
-    `${process.env.GRAFi_MAIN_HOST}/api/users/${userId}`,
+    `${process.env.NEXT_PUBLIC_GRAFI_MAIN_HOST}/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`,
+    `${process.env.NEXT_PUBLIC_GRAFI_MAIN_HOST}/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`,
+    `${process.env.NEXT_PUBLIC_GRAFI_MAIN_HOST}/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}`,
+    `${process.env.NEXT_PUBLIC_GRAFI_MAIN_HOST}/api/users/${userId}/visit-logs/${logId}`,
   );
   return data;
 };

src/query-hooks/useUsers/type.ts

@@ -6,7 +6,6 @@ export interface EditUser {
 
 export interface CreateUser {
   user_id: string;
-  name: string;
   password: string;
 }