Merge branch 'feature/#74/display_user_connection_status' of https://…

…github.com/pknu-wap/miniwapp into feature/#74/display_user_connection_status
pknu-wap · Sep 7, 2024 · 3959452 · 3959452
2 parents 8bcde0c + 47573a4
commit 3959452
Show file tree

Hide file tree

Showing 34 changed files with 1,599 additions and 426 deletions.
diff --git a/client/netlify.toml b/client/netlify.toml
@@ -0,0 +1,4 @@
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -2,8 +2,9 @@
   "name": "client",
   "version": "0.1.0",
   "private": true,
-  "proxy": "https://wwappi.shop/",
+  "proxy": "https://miniwappi.shop",
   "dependencies": {
+    "@stomp/stompjs": "^7.0.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -12,6 +13,8 @@
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.23.0",
     "react-scripts": "5.0.1",
+    "react-youtube": "^10.1.0",
+    "sockjs-client": "^1.6.1",
     "styled-components": "^6.1.11",
     "web-vitals": "^2.1.4"
   },

diff --git a/client/public/KakaoTalk_20240607_172846385.jpg b/client/public/KakaoTalk_20240607_172846385.jpg
diff --git a/client/public/_redirects b/client/public/_redirects
@@ -0,0 +1 @@
+/* /index.html 200
diff --git a/client/public/favicon.ico b/client/public/favicon.ico
diff --git a/client/public/index.html b/client/public/index.html
@@ -9,6 +9,7 @@
       name="description"
       content="Web site created using create-react-app"
     />
+    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
@@ -25,6 +26,10 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>미니왑피</title>
+    <style>
+      @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
+      @import url('https://fonts.googleapis.com/css2?family=Gothic+A1:wght@100;200;300;400;500;600;700;800;900&display=swap');
+    </style>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/client/public/kakaoImage.png b/client/public/kakaoImage.png
diff --git a/client/public/loginBackground.png b/client/public/loginBackground.png
diff --git a/client/public/miniwappImage.png b/client/public/miniwappImage.png
diff --git a/client/src/app.js b/client/src/app.js
@@ -2,7 +2,9 @@ import Login from './component/login/login.js';
 import Signup from "./component/signup/signup.js";
 import Mainpage from './component/mainpage/mainpage.js';
 import Minihome from './component/minihome/minihome.js';
+import Redirection from './component/login/redirection.js';
 import Loginexception from './component/loginException/loginException.js';
+import Chat from './component/chat/chat.js';
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 
 const App = () => {
@@ -17,6 +19,9 @@ const App = () => {
         <Route path='/login' element={<Login />} />
         <Route path='/signup' element={<Signup />} />
         <Route path='/loginexception' element={<Loginexception />} />
+        <Route path='/chat' element={<Chat />} />
+        <Route path='/redirection/success' element={<Redirection />} />
+        <Route path='/redirection/fail' element={<Login />} />
         <Route path='/mypage/:minihomeNumber/:mode/:postNumber' element={<Minihome />} />
         <Route path='/mypage/:minihomeNumber/:mode' element={<Minihome />} />
       </Routes>

diff --git a/client/src/component/chat/chat.js b/client/src/component/chat/chat.js
@@ -0,0 +1,166 @@
+import axios from "axios";
+import React, { useEffect, useState, useRef } from "react";
+import { Stomp } from "@stomp/stompjs";
+import API from '../utils/API';
+import styled from "styled-components";
+
+const Component = styled.div``;
+
+const Input = styled.div``;
+
+const Messages = styled.div`
+  display: flex;
+  flex-direction: column-reverse;
+`;
+
+const Users = styled.div`
+
+`;
+
+axios.defaults.withCredentials = true;
+
+function Chat() {
+  const stompClient = useRef(null);
+  const [messages, setMessages] = useState([]);
+  const [users, setUsers] = useState([]);
+  const [inputValue, setInputValue] = useState('');
+  const [name, setName] = useState(null);
+  const [nickname, setNickname] = useState(null);
+
+  const getSession = () => {
+
+  }
+
+  const getUserInfo = async () => {
+    try {
+      const response = await API.get(`/mainpage/user`, { withCredentials: true });
+      if (response.data.name !== 'null') {
+        console.log(response.data);
+        setName(response.data.name);
+        sessionStorage.setItem('name', response.data.name); // sessionStorage에 저장
+      }
+      if (response.data.nickname !== 'null') {
+        setNickname(response.data.nickname);
+        sessionStorage.setItem('nickname', response.data.nickname); // sessionStorage에 저장
+      }
+    } catch (error) {
+      alert('ERROR');
+      console.log(error);
+    }
+  }
+
+  const getUserList = async () => {
+    return await API.get(`/friendlist`, { withCredentials: true })
+      .then((response) => {
+        setUsers(response.data.data);
+      });
+  }
+
+  const handleInputChange = (event) => {
+    setInputValue(event.target.value);
+  }
+
+  const connect = (userName, userNickname) => {
+    const socket = new WebSocket("wss://miniwappi.shop/ws");
+    stompClient.current = Stomp.over(socket);
+    stompClient.current.connect({}, frame => {
+      const body = {
+        name: userName,
+        nickname: userNickname,
+        message: '입장 메세지'
+      };
+      stompClient.current.send(`/pub/message`, {}, JSON.stringify(body));
+      stompClient.current.subscribe(`/sub/chatroom/1`, (message) => {
+        const newMessage = JSON.parse(message.body);
+        setMessages((prevMessages) => [...prevMessages, newMessage]);
+      });
+    });
+  }
+
+  const fetchMessages = () => {
+    return axios.get("https://miniwappi.shop/chat")
+      .then(response => {
+        setMessages(response.data);
+      });
+  }
+
+  const sendMessage = () => {
+    if (stompClient.current && inputValue) {
+      const body = {
+        name: name || sessionStorage.getItem('name'),
+        nickname: nickname || sessionStorage.getItem('nickname'),
+        message: inputValue,
+        state: null  // 일반 메시지 상태 설정
+      };
+      stompClient.current.send(`/pub/message`, {}, JSON.stringify(body));
+      setInputValue('');
+    }
+  }
+
+  // sessionStorage에서 값 로드
+  useEffect(() => {
+    const storedName = sessionStorage.getItem('name');
+    const storedNickname = sessionStorage.getItem('nickname');
+    if (storedName && storedNickname) { setName(storedName); setNickname(storedNickname); }
+    else getUserInfo();
+    getUserList();
+  }, []);
+
+  useEffect(() => {
+    if (name !== null && nickname !== null) {
+      getSession();
+
+      connect(name, nickname);
+      fetchMessages();
+
+      const handleBeforeUnload = (event) => {
+        if (stompClient.current) {
+          const body = {
+            name: name || sessionStorage.getItem('name'),
+            nickname: nickname || sessionStorage.getItem('nickname'),
+            message: '퇴장 메세지'
+          };
+          stompClient.current.send(`/pub/message`, {}, JSON.stringify(body));
+          stompClient.current.disconnect();
+          event.returnValue = '';
+          return '';
+        }
+      };
+
+      window.addEventListener('beforeunload', handleBeforeUnload);
+
+      return () => {
+        window.removeEventListener('beforeunload', handleBeforeUnload);
+        if (stompClient.current) {
+          stompClient.current.disconnect();
+        }
+      };
+    }
+  }, [name, nickname]);
+
+  console.log(users);
+  console.log(messages);
+
+  return (
+    <Component>
+      <Input>
+        <input type="text" value={inputValue} onChange={handleInputChange} />
+        <button onClick={sendMessage}>입력</button>
+      </Input>
+      <Messages>
+        {messages.map((item, index) => {
+          if (item.state === 0) return (<div key={index} className="list-item">{item.name}님이 입장하셨습니다.</div>);
+          else if (item.state === 1) return (<div key={index} className="list-item">{item.name}님이 퇴장하셨습니다.</div>);
+          else return (<div key={index} className="list-item">{item.name}({item.nickname}): {item.message}</div>)
+        })}
+      </Messages>
+      <Users>
+        {/* {users.map((item, index) => {
+          return (<div key={index}>{item.name}({item.nickname})</div>)
+        })} */}
+      </Users>
+    </Component>
+  );
+}
+
+export default Chat;