Merge pull request #6 from LeHiHo/feature/#5

로그인, 회원가입 구현
KDT1-FE · Nov 8, 2023 · 1c69fab · 1c69fab
2 parents a9500ec + 2b07143
commit 1c69fab
Show file tree

Hide file tree

Showing 7 changed files with 374 additions and 161 deletions.
diff --git a/index.html b/index.html
@@ -1,13 +1,16 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>FastMind</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>
diff --git a/src/api/index.ts b/src/api/index.ts
@@ -1,60 +1,36 @@
 import axios from 'axios';
-import { SERVER_URL, CONTENT_TYPE, SERVER_ID } from '../constant';
+import { CONTENT_TYPE, SERVER_ID, SERVER_URL } from '../constant';
+import { JoinData } from '../interfaces/interface';
 
-export const signup = async (
-  id: string,
-  password: string,
-  name: string,
-  picture?: string,
-) => {
-  const authData = {
-    id,
-    password,
-    name,
-    picture,
-  };
-  try {
-    return await axios.post(`${SERVER_URL}/signup`, authData, {
-      headers: {
-        'content-type': CONTENT_TYPE,
-        serverId: SERVER_ID,
-      },
-    });
-  } catch (error) {
-    console.log(error);
-  }
+
+const client = axios.create({
+  baseURL: SERVER_URL,
+  headers: {
+    'content-type': CONTENT_TYPE,
+    serverId: SERVER_ID,
+  },
+});
+
+export const postLogin = async (id: string, password: string) => {
+  const res = await client.post('/login', {
+    id: id,
+    password: password,
+  });
+  return res;
 };
 
-export const login = async (id: string, password: string) => {
-  const authData = {
-    id,
-    password,
-  };
-  try {
-    const response = await axios.post(`${SERVER_URL}/login`, authData, {
-      headers: {
-        'content-type': CONTENT_TYPE,
-        serverId: SERVER_ID,
-      },
-    });
-    const { accessToken } = response.data;
-    localStorage.setItem('jwt', accessToken);
-    return accessToken;
-  } catch (error) {
-    console.error('Login failed:', error);
-  }
+export const postJoin = async (joinData: JoinData) => {
+  const res = await client.post('/signup', joinData);
+  return res;
 };
 
 export const getAllUsers = async (accessToken: string) => {
-  const response = await axios.get(`${SERVER_URL}/users`, {
+  const res = await client.get('/users', {
     headers: {
-      'content-type': CONTENT_TYPE,
-      serverId: SERVER_ID,
       Authorization: `Bearer ${accessToken}`,
     },
   });
-  return response.data;
-};
+  return res;
 
 export const createGameRooms = async (
   accessToken: string,

diff --git a/src/constant.ts b/src/constant.ts
@@ -1,3 +1,3 @@
-export const SERVER_URL = 'https://fastcampus-chat.net';
+export const SERVER_URL = import.meta.env.VITE_SERVER_URL;
 export const CONTENT_TYPE = 'application/json';
 export const SERVER_ID = import.meta.env.VITE_SERVER_ID;
diff --git a/src/interfaces/interface.ts b/src/interfaces/interface.ts
@@ -0,0 +1,16 @@
+export interface JoinData {
+  id: string;
+  password: string;
+  name: string;
+  picture?: string; 
+}
+
+export interface FormData extends JoinData {
+  confirmPassword: string; // JoinData에서 confirmPassword만 추가
+}
+
+export interface ValidationInput {
+  fieldName: keyof FormData;
+  value: string;
+  formData: FormData;
+}
diff --git a/src/pages/lobby/gameLobby.tsx b/src/pages/lobby/gameLobby.tsx
@@ -3,6 +3,26 @@ import CheckGameRoom from '../../components/layout/checkGameRoom';
 // import OnlineUserList from '../../components/layout/onineUserList';
 // import UserList from '../../components/layout/userList';
 const GameLobby = () => {
+  const handleGetAllUsers = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    const token = localStorage.getItem('jwt');
+    if (!token) {
+      alert('인증 토큰이 없습니다. 로그인이 필요합니다.');
+      return;
+    }
+
+    try {
+      // 닉네임 중복 핸들링 로직 필요
+      const res = await getAllUsers(token);
+      console.log(res.data);
+      alert('성공');
+    } catch (e: any) {
+      console.error('에러:', e.response || e);
+      alert('에러 발생');
+    }
+  };
+
   // const [allUsers, setAllUsers] = useRecoilState(allUserState);
   // const [allRooms, setAllRooms] = useRecoilState(allRoomState);
   // const token: any = localStorage.getItem('jwt');
@@ -19,6 +39,7 @@ const GameLobby = () => {
   //     }
   //   }
 
+
   //   fetchData();
   // }, []);
   return (