vsCode-Game · hoheesu · Jan 16, 2025 · Dec 27, 2024 · Dec 27, 2024 · Dec 27, 2024
diff --git a/index.html b/index.html
@@ -1,13 +1,15 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>코드네임 다빈치 Codename Davinci</title>
   </head>
   <body>
     <div id="root"></div>
+    <div id="toast-root"></div>
+    <div id="modal-root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -10,19 +10,24 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@hookform/resolvers": "^3.9.1",
     "@tanstack/react-query": "4",
     "axios": "^1.7.9",
+    "jwt-decode": "^4.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-hook-form": "^7.54.2",
     "react-router-dom": "^7.0.2",
     "styled-components": "^6.1.13",
+    "zod": "^3.24.1",
     "zustand": "^5.0.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.15.0",
     "@types/node": "^22.10.2",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
+    "@types/socket.io-client": "^3.0.0",
     "@vitejs/plugin-react": "^4.3.4",
     "eslint": "^9.15.0",
     "eslint-plugin-react-hooks": "^5.0.0",

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,16 +1,13 @@
-import { Outlet } from "react-router-dom";
-import Header from "@components/layout/header/Header";
-import Footer from "@components/layout/footer/Footer";
-import GlobalStyles from "./styles/GlobalStyle";
 import "@styles/font.css";
+import GlobalStyles from "./styles/GlobalStyle";
+import { RouterProvider } from "react-router-dom";
+import { router } from "./routes/router";
 
 function App() {
   return (
     <>
       <GlobalStyles />
-      <Header />
-      <Outlet />
-      <Footer />
+      <RouterProvider router={router} />
     </>
   );
 }

diff --git a/src/api/axios.ts b/src/api/axios.ts
@@ -0,0 +1,62 @@
+import axios from "axios";
+
+export const instance = axios.create({
+  baseURL: import.meta.env.VITE_BASE_URL,
+});
+
+export const authInstance = axios.create({
+  baseURL: import.meta.env.VITE_BASE_URL,
+  withCredentials: true,
+});
+
+authInstance.interceptors.request.use(
+  (config) => {
+    const token = localStorage.getItem("accessToken");
+    if (token) {
+      config.headers.Authorization = token; // "Bearer ..." 형태로 저장돼 있다면 그대로 사용
+    }
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  },
+);
+
+authInstance.interceptors.response.use(
+  (response) => {
+    // 성공 응답은 그대로 반환
+    return response;
+  },
+  async (error) => {
+    const originalRequest = error.config;
+
+    // 401 && 아직 재시도 안했을 경우
+    if (
+      error.response &&
+      error.response.status === 401 &&
+      !originalRequest._retry
+    ) {
+      originalRequest._retry = true;
+      try {
+        // Refresh Token으로 새 Access Token 발급
+        const refreshResponse = await authInstance.post("/auth/refresh");
+        const { accessToken } = refreshResponse.data;
+
+        // 로컬스토리지에 다시 저장
+        localStorage.setItem("accessToken", accessToken);
+
+        // 원래 요청 헤더에 갱신된 토큰 반영
+        originalRequest.headers.Authorization = accessToken;
+
+        // 원래 요청 재시도
+        return authInstance(originalRequest);
+      } catch (refreshError) {
+        // 재발급 실패: 로그인 페이지로 이동 등 처리
+        // localStorage.clear() 또는 특정 에러 처리
+        return Promise.reject(refreshError);
+      }
+    }
+
+    return Promise.reject(error);
+  },
+);
diff --git a/src/api/gameRoomApi.ts b/src/api/gameRoomApi.ts
@@ -0,0 +1,112 @@
+import { AxiosError } from "axios";
+import { authInstance, instance } from "./axios";
+
+export interface IGameRoom {
+  id: number;
+  roomName: string;
+  maxPlayers: number;
+  currentCount: number;
+  createdAt: string;
+}
+
+export interface IRoomUser {
+  id: number;
+  roomId: number;
+  userId: number;
+  joinedAt: string;
+}
+
+export interface ICreateGameRoomResponse {
+  room: IGameRoom;
+  user: IRoomUser;
+}
+
+export const getGameRoomsList = async () => {
+  try {
+    const { data } = await instance.get("/gameRoom");
+    return data;
+  } catch (error) {
+    const axiosError = error as AxiosError<unknown>;
+
+    if (axiosError.response) {
+      return axiosError.response.data;
+    }
+  }
+};
+
+export const getGameRoomInfo = async (roomId: number) => {
+  try {
+    const response = await authInstance.get(`/gameRoom/${roomId}`);
+
+    return response.data;
+  } catch (error) {
+    const axiosError = error as AxiosError<unknown>;
+
+    if (axiosError.response) {
+      return axiosError.response.data;
+    }
+  }
+};
+
+export const createGameRoom = async ({
+  roomName,
+}: {
+  roomName: string;
+}): Promise<ICreateGameRoomResponse> => {
+  try {
+    const response = await authInstance.post<ICreateGameRoomResponse>(
+      "gameRoom/create",
+      { roomName },
+      {
+        headers: { Authorization: localStorage.getItem("accessToken") },
+      },
+    );
+
+    return response.data;
+  } catch (error) {
+    const axiosError = error as AxiosError<{ message: string }>;
+
+    if (
+      axiosError.response &&
+      axiosError.response.data &&
+      axiosError.response.data.message
+    ) {
+      throw new Error(axiosError.response.data.message);
+    } else {
+      throw new Error("게임 방 생성 중 예상치 못한 오류가 발생했습니다.");
+    }
+  }
+};
+
+export const joinGameRoom = async (gameRoomId: number) => {
+  try {
+    const response = await authInstance.post(`/gameRoom/join/${gameRoomId}`);
+
+    if (response.status === 200) {
+      return response.data;
+    }
+    if (response.status === 400) {
+      console.log(response);
+      throw response;
+    }
+  } catch (error: any) {
+    throw error.response.data;
+  }
+};
+
+export const outGameRoom = async (gameRoomId: number) => {
+  try {
+    console.log(gameRoomId, "gameRoomId확인");
+    const response = await authInstance.delete(`gameRoom/leave/${gameRoomId}`);
+    console.log(response, "outresponse확인");
+    if (response.status === 200) {
+      return response.data;
+    }
+    if (response.status === 400) {
+      console.log(response);
+      throw response;
+    }
+  } catch (error: any) {
+    throw error.response.data;
+  }
+};
diff --git a/src/api/userAuthApi.ts b/src/api/userAuthApi.ts
@@ -0,0 +1,84 @@
+import { authInstance, instance } from "./axios";
+import { AxiosError } from "axios";
+
+export interface ILoginResponse {
+  accessToken: string;
+}
+
+export interface IErrorResponse {
+  status: number;
+  message: string;
+}
+
+export interface ISignUpVariables {
+  userEmail: string;
+  password: string;
+  userNickname: string;
+}
+
+export interface ISignUpResponse {
+  userEmail: string;
+  password: string;
+  userNickname: 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");
+    console.log(response);
+    const { accessToken } = response.data;
+
+    localStorage.setItem("accessToken", accessToken);
+    return response.data.accessToken;
+  } catch (error) {
+    console.log(error);
+  }
+};
+
+export const signUpUser = async (
+  variables: ISignUpVariables,
+): Promise<ISignUpResponse> => {
+  try {
+    const response = await instance.post("/user/signup", variables, {
+      withCredentials: false,
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+    console.log(response);
+    return response.data;
+  } catch (err) {
+    console.log(err);
+    throw new Error("회원가입에 실패했습니다.");
+  }
+};
diff --git a/src/assets/images/Vector 3.svg b/src/assets/images/Vector 3.svg
diff --git a/src/assets/images/icon_heart_blue.svg b/src/assets/images/icon_heart_blue.svg
diff --git a/src/assets/images/icon_heart_red.svg b/src/assets/images/icon_heart_red.svg
diff --git a/src/assets/images/icon_medal.svg b/src/assets/images/icon_medal.svg
diff --git a/src/assets/images/image_profile_01.svg b/src/assets/images/image_profile_01.svg