Merge pull request #19 from moonhuicheol/feature/login

✨ feat: loginUser axios함수 구현

Author: moonhuicheol

src/api/axios.ts

@@ -1,7 +1,7 @@
 import axios from "axios";
 
 export const instance = axios.create({
-  baseURL: import.meta.env.VITE_BASE_URL,
+  baseURL: "https://api.davincicodegame.store",
 });
 
 export const authInstance = axios.create({

src/api/userAuthApi.ts

@@ -0,0 +1,56 @@
+import { authInstance, instance } from "./axios";
+import { AxiosError } from "axios";
+
+export interface ILoginResponse {
+  accessToken: string;
+}
+
+export interface IErrorResponse {
+  status: number;
+  message: string;
+}
+
+export const loginUser = async (logInfo: {
+  userEmail: string;
+  password: string;
+}): Promise<ILoginResponse> => {
+  try {
+    console.log(instance, "인스턴스확인");
+    const response = await instance.post<ILoginResponse>(
+      "/auth/login",
+      logInfo,
+      {
+        withCredentials: true,
+        headers: {
+          "Content-Type": "application/json",
+        },
+      },
+    );
+
+    console.log(response);
+    return response.data;
+  } catch (error) {
+    const axiosError = error as AxiosError<IErrorResponse>;
+    if (axiosError.response) {
+      console.log(axiosError.response.data.status);
+      throw new Error(axiosError.response.data.message); // 에러 메시지 던지기
+    } else {
+      throw new Error("로그인 중 예상치 못한 오류가 발생했습니다.");
+    }
+  }
+};
+
+export const refreshToken = async () => {
+  try {
+    const response = await authInstance.post("/auth/refresh", {
+      withCredentials: true,
+    });
+    console.log(response);
+    const accessToken = response?.headers.authorization;
+
+    localStorage.setItem("accessToken", accessToken);
+    return response.data.accessToken;
+  } catch (err) {
+    console.log(err);
+  }
+};

src/hooks/useMutation.tsx

@@ -6,6 +6,7 @@ import {
   joinGameRoom,
   outGameRoom,
 } from "../api/gameRoomApi";
+import { ILoginResponse, loginUser } from "../api/userAuthApi";
 
 export const useCreateRoomMutation = () => {
   const navigate = useNavigate();
@@ -14,7 +15,7 @@ export const useCreateRoomMutation = () => {
   return useMutation<ICreateGameRoomResponse, Error, { roomName: string }>({
     mutationFn: createGameRoom,
     onSuccess: (data) => {
-      navigate(`/gameRoom/${data.room.id}`);
+      navigate(`/game/room/${data.room.id}`);
       queryClient.invalidateQueries({
         queryKey: ["gameRoomList"],
       });
@@ -45,11 +46,16 @@ export const useJoinRoomMutation = () => {
 
 export const useOutRoomMutaion = () => {
   const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
   return useMutation({
     mutationFn: outGameRoom,
     onSuccess: (data) => {
       console.log("방나가기 성공", data);
       navigate("/game");
+      queryClient.invalidateQueries({
+        queryKey: ["gameRoomList"],
+      });
     },
 
     onError: (error: any) => {
@@ -63,3 +69,21 @@ export const useOutRoomMutaion = () => {
     },
   });
 };
+
+export const useLoginSubmitMutation = () => {
+  return useMutation<
+    ILoginResponse,
+    Error,
+    { userEmail: string; password: string }
+  >({
+    mutationFn: loginUser,
+    onSuccess: (data) => {
+      console.log(data);
+      const accessToken = data?.accessToken;
+      localStorage.setItem("accessToken", accessToken);
+    },
+    onError: (error) => {
+      alert(error.message);
+    },
+  });
+};

src/pages/user/login/Login.tsx

@@ -4,16 +4,21 @@ import Button from "../../../components/ui/button/Button";
 import { loginSchema, schema } from "./schema";
 import Input from "../../../components/ui/input/Input";
 import * as S from "./loginStyle2";
+import { useLoginSubmitMutation } from "../../../hooks/useMutation";
 
 export default function LoginPage() {
   const methods = useForm<loginSchema>({
     resolver: zodResolver(schema),
     mode: "onChange",
   });
 
+  const mutation = useLoginSubmitMutation();
+
   const onClickSubmit = async (data: loginSchema) => {
-    console.log(data);
+    const result = mutation.mutate(data);
+    console.log(result);
   };
+
   return (
     <>
       <S.container>
@@ -23,9 +28,9 @@ export default function LoginPage() {
             <S.form onSubmit={methods.handleSubmit(onClickSubmit)}>
               <S.inputBox>
                 <S.label>이메일</S.label>
-                <Input<loginSchema> type="text" keyname="email" />
+                <Input<loginSchema> type="text" keyname="userEmail" />
                 <S.errorMessage>
-                  {methods.formState.errors.email?.message}
+                  {methods.formState.errors.userEmail?.message}
                 </S.errorMessage>
               </S.inputBox>
               <S.inputBox>

src/pages/user/login/schema.ts

@@ -1,13 +1,13 @@
 import { z } from "zod";
 
 export const schema: z.ZodType<loginSchema> = z.object({
-  email: z.string().email("이메일 형식이 아닙니다."),
+  userEmail: z.string(),
   password: z
     .string()
     .min(4, { message: "비밀번호는 최소 4자리 이상 입력해주세요." }),
 });
 
 export interface loginSchema {
-  email: string;
+  userEmail: string;
   password: string;
 }

src/routes/router.tsx

@@ -35,7 +35,7 @@ export const router = createBrowserRouter([
             element: <GameRoomList />,
           },
           {
-            path: "/room/:id",
+            path: "room/:id",
             element: <GameRoom />,
           },
         ],