feat: 로그아웃 버튼 추가

UNLIMIT-PROBONO · Sep 21, 2023 · 77b839a · 77b839a
1 parent 9e40766
commit 77b839a
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 5 deletions.
diff --git a/frontend/src/components/molecules/layout/TgtHeader.js b/frontend/src/components/molecules/layout/TgtHeader.js
@@ -3,17 +3,24 @@ import { MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons";
 import { Button, theme } from "antd";
 import { Header } from "antd/es/layout/layout";
 import { Text } from "../../atoms/Text";
+import { useNavigate } from "react-router";
+import { sendLogout } from "../../../services/AuthService";
 
 export const TgtHeader = (props) => {
-  var collapsed = props.collapsed;
-  var setCollapsed = props.setCollapsed;
-  var handleCollapsing = () => {
+  const collapsed = props.collapsed;
+  const setCollapsed = props.setCollapsed;
+  const handleCollapsing = () => {
     setCollapsed(!collapsed);
   };
   const {
     token: { colorBgContainer },
   } = theme.useToken();
-  // 로그아웃 왜 안 뜸?
+
+  const router = useNavigate();
+  const onClickLogout = () => {
+    sendLogout();
+    router("../");
+  };
 
   return (
     <div>
@@ -30,7 +37,12 @@ export const TgtHeader = (props) => {
             height: 64,
           }}
         />
-        <Text label="로그아웃" />
+        <button
+          style={{ float: "right", marginRight: "40px" }}
+          onClick={onClickLogout}
+        >
+          <Text label="로그아웃" />
+        </button>
       </Header>
     </div>
   );

diff --git a/frontend/src/services/AuthService.js b/frontend/src/services/AuthService.js
@@ -43,3 +43,14 @@ export const sendSignUpForm = async (userData) => {
       return false;
     });
 };
+
+export const sendLogout = async () => {
+  return await RestAPI.post(URI.LOGOUT)
+    .then((res) => {
+      if (res.status === 200) return true;
+      return false;
+    })
+    .catch((error) => {
+      return false;
+    });
+};
diff --git a/frontend/src/utils/config.js b/frontend/src/utils/config.js
@@ -13,6 +13,7 @@ export const URI = {
 
   MANAGER: `${MANAGER}`,
   LOGIN: `${MANAGER}/login`,
+  LOGOUT: `${MANAGER}/logout`,
   SIGNUP: `${MANAGER}/signup`,
   CHECK_ID: `${MANAGER}/signup/`,