Merge pull request #68 from KUIT-Space/feat#api

Feat#api - login api

.eslintrc.cjs

@@ -8,7 +8,7 @@ module.exports = {
     "plugin:react-hooks/recommended",
     "plugin:prettier/recommended", // eslint의 포매팅 기능을 prettier로 사용함. 항상 마지막에 세팅 되어야 함. (eslint-plugin-prettier)
   ],
-  ignorePatterns: ["dist", ".eslintrc.cjs"],
+  ignorePatterns: ["dist", ".eslintrc.cjs", "mock"],
   parser: "@typescript-eslint/parser",
   plugins: ["react-refresh", "simple-import-sort"],
   rules: {

.gitignore

@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+.env

.prettierignore

@@ -0,0 +1 @@
+mock

mock/mockMSG.json

@@ -0,0 +1,115 @@
+[
+  {
+    "id": 1,
+    "user": "박솔희",
+    "profileImg": "https://placehold.co/40x40",
+    "time": "2024-06-08T12:30:00",
+    "message": "해장 잘했냐"
+  },
+  {
+    "id": 2,
+    "user": "박솔희",
+    "profileImg": "https://placehold.co/40x40",
+    "time": "2024-06-08T16:16:00",
+    "message": "우리 고기 먹은거 정산해야제 알지?/ 다들 고개를 들라"
+  },
+  {
+    "id": 3,
+    "user": "김민지",
+    "profileImg": "https://placehold.co/40x40",
+    "time": "2024-06-08T16:17:00",
+    "message": "네네"
+  },
+  {
+    "id": 4,
+    "user": "박솔희",
+    "profileImg": "https://placehold.co/40x40",
+    "time": "2024-06-08T16:17:00",
+    "message": "김민지 님이 정산을 요청했어요! 8,750 / 35,000 원",
+    "is정산": true
+  },
+  {
+    "id": 5,
+    "user": "김민지",
+    "profileImg": "https://placehold.co/40x40",
+    "time": "2024-08-04T12:26:22.063Z",
+    "message": "ㅁㅁㅁ"
+  },
+  {
+    "id": 6,
+    "user": "김민지",
+    "profileImg": "https://placehold.co/40x40",
+    "time": "2024-08-04T12:26:24.283Z",
+    "message": "ㅎㅇㅎㅇ"
+  },
+  {
+    "id": 7,
+    "user": "김민지",
+    "profileImg": "https://placehold.co/40x40",
+    "time": "2024-08-04T12:26:32.648Z",
+    "message": "ㅎㅇㅎㅇ"
+  },
+  {
+    "id": 8,
+    "user": "김민지",
+    "profileImg": "https://placehold.co/40x40",
+    "time": "2024-08-04T12:26:37.301Z",
+    "message": "ㄱㄴㄷㄹ"
+  },
+  {
+    "id": 9,
+    "user": "익명(9061)",
+    "profileImg": "https://placehold.co/40x40",
+    "time": "2024-08-04T12:35:29.391Z",
+    "message": "123"
+  },
+  {
+    "id": 10,
+    "user": "익명(4554)",
+    "profileImg": "https://placehold.co/40x40",
+    "time": "2024-08-04T12:35:42.968Z",
+    "message": "123"
+  },
+  {
+    "id": 11,
+    "user": "익명(4554)",
+    "profileImg": "https://placehold.co/40x40",
+    "time": "2024-08-04T12:35:44.384Z",
+    "message": "1"
+  },
+  {
+    "id": 12,
+    "user": "익명(9061)",
+    "profileImg": "https://placehold.co/40x40",
+    "time": "2024-08-04T12:35:50.325Z",
+    "message": "123"
+  },
+  {
+    "id": 13,
+    "user": "익명(9061)",
+    "profileImg": "https://placehold.co/40x40",
+    "time": "2024-08-04T12:35:52.219Z",
+    "message": "123"
+  },
+  {
+    "id": 14,
+    "user": "익명(9061)",
+    "profileImg": "https://placehold.co/40x40",
+    "time": "2024-08-04T12:36:00.608Z",
+    "message": "ㅇㅁㄴㄹㅇㄴㄹ"
+  },
+  {
+    "id": 15,
+    "user": "익명(9061)",
+    "profileImg": "https://placehold.co/40x40",
+    "time": "2024-08-11T03:36:18.157Z",
+    "message": "김민지 님이 정산을 요청했어요! 8,750 / 35,000 원김민지 님이 정산을 요청했어요! 8,750 / 35,000 원김민지 님이 정산을 요청했어요! 8,750 / 35,000 원김민지 님이 정산을 요청했어요! 8,750 / 35,000 원김민지 님이 정산을 요청했어요! 8,750 / 35,000 원김민지 님이 정산을 요청했어요! 8,750 / 35,000 원김민지 님이 정산을 요청했어요! 8,750 / 35,000 원김민지 님이 정산을 요청했어요! 8,750 / 35,000 원김민지 님이 정산을 요청했어요! 8,750 / 35,000 원김민지 님이 정산을 요청했어요! 8,750 / 35,000 원김민지 님이 정산을 요청했어요! 8,750 / 35,000 원김민지 님이 정산을 요청했어요! 8,750 / 35,000 원김민지 님이 정산을 요청했어요! 8,750 / 35,000 원"
+  },
+  {
+    "id": 16,
+    "user": "익명(9061)",
+    "profileImg": "https://placehold.co/40x40",
+    "time": "2024-08-11T14:30:50.401Z",
+    "message": "dd"
+  }
+]

mock/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "chating_websocket_node",
+  "version": "1.0.0",
+  "main": "server.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "node server.js"
+  },
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "dependencies": {
+    "ws": "^8.18.0"
+  }
+}

mock/server.js

@@ -0,0 +1,59 @@
+const WebSocket = require("ws");
+const fs = require("fs");
+const path = require("path");
+
+const wss = new WebSocket.Server({ port: 8080 });
+
+const filePath = path.join(__dirname, "mockMSG.json");
+
+// Read messages from file
+const readMessages = () => {
+  return new Promise((resolve, reject) => {
+    fs.readFile(filePath, (err, data) => {
+      if (err) return reject(err);
+      resolve(JSON.parse(data));
+    });
+  });
+};
+
+// Write messages to file
+const writeMessages = (messages) => {
+  return new Promise((resolve, reject) => {
+    fs.writeFile(filePath, JSON.stringify(messages, null, 2), (err) => {
+      if (err) return reject(err);
+      resolve();
+    });
+  });
+};
+
+// Broadcast messages to all clients
+const broadcast = (data) => {
+  wss.clients.forEach((client) => {
+    if (client.readyState === WebSocket.OPEN) {
+      client.send(data);
+    }
+  });
+};
+
+wss.on("connection", async (ws) => {
+  // Send existing messages to new client
+  const messages = await readMessages();
+  ws.send(JSON.stringify(messages));
+
+  ws.on("message", async (message) => {
+    const newMessage = JSON.parse(message);
+    messages.push(newMessage);
+
+    // Save the new message to the file
+    await writeMessages(messages);
+
+    // Broadcast the updated messages to all clients
+    broadcast(JSON.stringify(messages));
+  });
+
+  ws.on("error", (error) => {
+    console.error("WebSocket error:", error);
+  });
+});
+
+console.log("WebSocket server is listening on ws://localhost:8080");

package.json

@@ -8,7 +8,8 @@
     "build": "tsc -b && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "lint--fix": "eslint --fix . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "chat-mock" : "cd mock && npm i && npm run start"
   },
   "dependencies": {
     "es-hangul": "^1.4.5",

src/App.tsx

@@ -20,6 +20,7 @@ import VoiceRoomListPage from "@/pages/VoiceRoomPage/VoiceRoomListPage";
 import GlobalStyle from "@/styles/GlobalStyles";
 import { theme } from "@/styles/Theme";
 
+import ChatSettingPage from "./pages/ChatPage/ChatSettingPage/ChatSettingPage";
 import CompletePay from "./pages/PayPage/CompletePay";
 import CreateRequestPage from "./pages/PayPage/CreateRequestPage";
 import MyRequestPayPage from "./pages/PayPage/MyRequestPayPage";
@@ -88,6 +89,7 @@ function App() {
   const routes_children_chat = [
     { path: "/chat", element: <ChatPage />, hasBottomBar: true },
     { path: "/chat/:id", element: <ChattingPage /> },
+    { path: "/chat/:id/setting", element: <ChatSettingPage /> },
     { path: "/chat/create", element: <ChatCreatePage /> },
   ];
 

src/apis/LoginApi.ts

@@ -0,0 +1,30 @@
+import { createRequestOptionsJSON, RequestOptions } from "./_createRequestOptions";
+
+interface LoginApiResponseType {
+  code: number;
+  message: string;
+  status: string;
+  timestamp?: string;
+}
+
+const fetchLoginApi = async (url: string, options: RequestOptions) => {
+  const response: LoginApiResponseType = await fetch(url, options)
+    .then((res) => {
+      // Authorization token 응답에 포함되면 local storage에 저장
+      localStorage.setItem("Authorization", res.headers.get("Authorization") ?? "");
+      return res.json();
+    })
+    .catch((err) => console.error("[fetch error]", err));
+
+  return response;
+};
+
+export const loginApi = async (email: string, password: string) => {
+  const body = {
+    email: email,
+    password: password,
+  };
+  const requestOptions = createRequestOptionsJSON("POST", JSON.stringify(body));
+
+  return await fetchLoginApi("/api/user/login", requestOptions);
+};

src/apis/_createRequestOptions.ts

@@ -0,0 +1,50 @@
+export interface RequestOptions {
+  method: "GET" | "POST";
+  body?: BodyInit;
+  headers?: HeadersInit;
+  redirect?: RequestRedirect;
+}
+
+export const createRequestOptionsJSON = (
+  method: RequestOptions["method"],
+  body?: RequestOptions["body"],
+): RequestOptions => {
+  return {
+    method: method,
+    body: body,
+    redirect: "follow",
+    headers: {
+      "Content-Type": "application/json",
+    },
+  };
+};
+
+// export const createRequestOptionsFORM = (  method: RequestOptions["method"],
+//   body: RequestOptions["body"],
+// ): RequestOptions => ({
+//   method: method,
+//   body: body,
+//   redirect: "follow",
+//   headers: {
+//     "Content-Type": "application/json",
+//   },
+// });
+
+export const createRequestOptionsJSON_AUTH = (
+  method: RequestOptions["method"],
+  body?: RequestOptions["body"],
+): RequestOptions | null => {
+  const token = localStorage.getItem("Authorization");
+
+  return token
+    ? {
+        method: method,
+        body: body,
+        redirect: "follow",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: token,
+        },
+      }
+    : null;
+};

src/apis/index.ts

@@ -0,0 +1 @@
+export * from "@/apis/LoginApi";