2023-SejongCreative · judahhh · Mar 15, 2023 · Mar 15, 2023 · Mar 19, 2023 · Mar 19, 2023
diff --git a/db.json b/db.json
@@ -0,0 +1,16 @@
+{
+  "groups": [
+    { "manager": 1, "group_name": "창의학기제", "group_id": 6 },
+    { "manager": 1, "group_name": "캡스톤", "group_id": 10 },
+    { "manager": 1, "group_name": "동아리", "group_id": 13 },
+    { "manager": 1, "group_name": "회사", "group_id": 15 },
+    { "manager": 1, "group_name": "그룹5", "group_id": 17 }
+  ],
+  "rooms": [
+    { "group_id": 6, "room_id": 1, "room_name": "룸1" },
+    { "group_id": 6, "room_id": 2, "room_name": "룸2" },
+    { "group_id": 10, "room_id": 3, "room_name": "룸3" },
+    { "group_id": 10, "room_id": 4, "room_name": "룸4" },
+    { "group_id": 10, "room_id": 5, "room_name": "룸5" }
+  ]
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,12 +3,27 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "@mui/icons-material": "^5.11.11",
+    "@mui/material": "^5.11.12",
+    "@reduxjs/toolkit": "^1.9.3",
+    "@stomp/stompjs": "^7.0.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.3.4",
+    "http-proxy-middleware": "^2.0.6",
+    "openvidu-browser": "^2.26.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.8.0",
+    "react-redux": "^8.0.5",
+    "react-router-dom": "^6.9.0",
     "react-scripts": "5.0.1",
+    "sockjs-client": "^1.6.1",
+    "styled-components": "^5.3.9",
+    "swr": "^2.1.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -34,5 +49,6 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "proxy": "http://172.16.95.104:8080"
 }
diff --git a/public/index.html b/public/index.html
@@ -24,6 +24,28 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <!-- Bootstrap -->
+    <!-- <script
+      src="https://code.jquery.com/jquery-3.3.1.min.js"
+      integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
+      crossorigin="anonymous"
+    ></script>
+    <link
+      rel="stylesheet"
+      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
+      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
+      crossorigin="anonymous"
+    />
+    <script
+      src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
+      integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
+      crossorigin="anonymous"
+    ></script> -->
+    <!-- <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    /> -->
+    <!-- Bootstrap -->
     <title>React App</title>
   </head>
   <body>

diff --git a/src/App.js b/src/App.js
@@ -1,7 +1,69 @@
-import "./App.css";
+import { api } from "./api/Interceptors";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import Home from "./pages/home/Index";
+import Login from "./pages/login/Index";
+import Register from "./pages/register/Index";
+import Group from "./pages/group/Group";
+import Room from "./pages/room/Room";
+import ChatPage from "./pages/chat/ChatPage";
+import ChatDetail from "./pages/chat/ChatDetail";
+import VideoPage from "./pages/videochat/VideoPage";
+// import { useSelector } from "react-redux";
 
 function App() {
-  return <div></div>;
+  // let isAuth = useSelector((state) => state.user.isAuth);
+  // let isAuth = localStorage.getItem("isAuth");
+
+  const onSlientRefresh = () => {
+    api
+      .post(
+        "/reissue",
+        {},
+        {
+          headers: {
+            access_token: localStorage.getItem("jwt_accessToken"),
+            refresh_token: localStorage.getItem("jwt_refreshToken"),
+          },
+        }
+      )
+      .then((response) => {
+        localStorage.setItem("jwt_accessToken", response.headers.access_token);
+        localStorage.setItem(
+          "jwt_refreshToken",
+          response.headers.refresh_token
+        );
+        localStorage.setItem("isLogined", true);
+        setInterval(onSlientRefresh, 1500000); //25분마다 리이슈 요청
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+  // onSlientRefresh();
+  //performance.navigation.type===1
+  if (PerformanceNavigationTiming.type === "reload") {
+    onSlientRefresh();
+  }
+
+  return (
+    <div>
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<Home></Home>}></Route>
+          <Route path="/login" element={<Login></Login>}></Route>
+          <Route path="/register" element={<Register></Register>}></Route>
+          <Route path="/group/:group_id" element={<Group></Group>}></Route>
+          <Route path="/room/:room_id" element={<Room></Room>}></Route>
+          <Route path="/chat" element={<ChatPage></ChatPage>}></Route>
+          <Route
+            path="/chat/:dm_id"
+            element={<ChatDetail></ChatDetail>}
+          ></Route>
+          <Route path="/openvidu" element={<VideoPage></VideoPage>}></Route>
+        </Routes>
+      </BrowserRouter>
+    </div>
+  );
 }
 
 export default App;
diff --git a/src/api/Interceptors.js b/src/api/Interceptors.js
@@ -0,0 +1,91 @@
+import axios from "axios";
+import { useNavigate } from "react-router-dom";
+// axios.defaults.baseURL = "http://192.168.0.63:8080";
+// axios.defaults.headers.common["access_token"] =
+//   localStorage.getItem("jwt_accessToken");
+export const api = axios.create({
+  proxy: {
+    baseURL: `http://172.16.95.104:8080`,
+  },
+
+  headers: {
+    access_token:
+      localStorage.getItem("jwt_accessToken") &&
+      localStorage.getItem("jwt_accessToken"),
+    refresh_token:
+      localStorage.getItem("jwt_accessToken") &&
+      localStorage.getItem("jwt_refreshToken"),
+  },
+});
+
+// Add a request interceptor
+api.interceptors.request.use(
+  function (config) {
+    // 요청 바로 직전
+    // axios 설정값에 대해 작성합니다.
+    // console.log(config);
+    config.headers["access_token"] = localStorage.getItem("jwt_accessToken");
+    return config;
+  },
+  function (error) {
+    // 요청 에러 처리를 작성합니다.
+    return Promise.reject(error);
+  }
+);
+
+// Add a response interceptor
+api.interceptors.response.use(
+  function (response) {
+    /*
+        http status가 200인 경우
+        응답 바로 직전에 대해 작성합니다. 
+        .then() 으로 이어집니다.
+    */
+    return response;
+  },
+
+  function (error) {
+    /*
+        http status가 200이 아닌 경우
+        응답 에러 처리를 작성합니다.
+        .catch() 으로 이어집니다.    
+    */
+    if (error.response && error.response.status === 401) {
+      Logout();
+      return new Promise(() => {}); //이행되지 않은 Promise를 반환하여 Promise Chaining 끊어주기
+    }
+    // console.log("rtk 만료되었습니다. 자동 로그아웃 됩니다.", error);
+    // const navigate = useNavigate();
+    // localStorage.removeItem("jwt_accessToken");
+    // localStorage.removeItem("jwt_refreshToken");
+    // localStorage.setItem("isAuthorized", false);
+    // navigate("/login");
+
+    return Promise.reject(error);
+  }
+);
+
+const Logout = () => {
+  const navigate = useNavigate();
+  api
+    .post(
+      "/",
+      {},
+      {
+        headers: {
+          access_token: localStorage.getItem("jwt_accessToken"),
+          refresh_token: localStorage.getItem("jwt_refreshToken"),
+        },
+      }
+    )
+    .then((response) => {
+      console.log(response);
+      localStorage.removeItem("jwt_accessToken");
+      localStorage.removeItem("jwt_refreshToken");
+      localStorage.setItem("isLogined", false);
+      alert("로그아웃 성공! 다음에 또 만나요❤️");
+      navigate("/login");
+    })
+    .catch((err) => console.log(err));
+};
+//  export default api;
diff --git a/src/components/ModalGroup.js b/src/components/ModalGroup.js
@@ -0,0 +1,104 @@
+import React from "react";
+import { useState } from "react";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import Modal from "@mui/material/Modal";
+import AddIcon from "@mui/icons-material/Add";
+import { api } from "../api/Interceptors";
+import styled from "styled-components";
+import { useNavigate } from "react-router-dom";
+import { useSelector } from "react-redux";
+
+const style = {
+  position: "absolute",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  width: 400,
+  height: 300,
+  bgcolor: "background.paper",
+  boxShadow: 24,
+  borderRadius: 3,
+  p: 4,
+};
+
+const Wrapper = styled.div`
+  text-align: center;
+`;
+const Button = styled.button`
+  width: 200px;
+  height: 50px;
+  border: none;
+  border-radius: 10px;
+  background-color: #f5b66c;
+  font-size: 20px;
+  font-weight: bold;
+  margin: auto;
+  :hover {
+    cursor: pointer;
+  }
+`;
+
+const ModalGroup = (props) => {
+  const navigate = useNavigate();
+  const [open, setOpen] = useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+  const [group_name, setGroup_name] = useState("");
+  const email = useSelector((state) => state.user.email);
+
+  const createGroupRoom = async (e) => {
+    e.preventDefault();
+    let body = {
+      group_name: group_name,
+      email: email,
+    };
+    await api
+      .post("/creategroup", body)
+      .then((response) => {
+        console.log(response);
+        let group_id = response.data;
+        navigate(`/group/${group_id}`);
+        handleClose();
+        window.location.reload();
+      })
+      .catch((err) => console.log(err));
+  };
+
+  return (
+    <div>
+      <Wrapper>
+        <Button onClick={handleOpen}>
+          + &nbsp;Group Create
+          {/* <AddIcon /> */}
+        </Button>
+      </Wrapper>
+
+      <Modal
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="modal-modal-title"
+        aria-describedby="modal-modal-description"
+      >
+        <Box sx={style} onSubmit={createGroupRoom}>
+          <Typography id="modal-modal-title" variant="h6" component="h2">
+            그룹 생성
+          </Typography>
+          <form>
+            그룹 이름 :{" "}
+            <input
+              type="text"
+              label="그룹 이름"
+              value={group_name}
+              onChange={(e) => setGroup_name(e.target.value)}
+            />
+            <p>
+              <input type="submit" value="생성" />
+            </p>
+          </form>
+        </Box>
+      </Modal>
+    </div>
+  );
+};
+export default ModalGroup;