Merge pull request #17 from local-mood/Hyeonmin

Feat:로그아웃 로직 생성
local-mood · Dec 24, 2023 · b5c3cb8 · b5c3cb8
2 parents ebe97db + 4ce6f93
commit b5c3cb8
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 18 deletions.
diff --git a/src/common/layout/Header/Header.tsx b/src/common/layout/Header/Header.tsx
@@ -3,34 +3,61 @@ import AuthButton from "../../ui/buttons/AuthButton/AuthButton";
 import theme from "@/styles/theme";
 import { useNavigate } from "react-router-dom";
 import useBlurWhenScroll from "@/common/hooks/useBlurWhenScroll";
+import { useGetMemberInfo } from "@/features/member/queries/useGetMemberInfo";
+import { useQueryClient } from "@tanstack/react-query";
 export default function Header() {
   const navigate = useNavigate();
+  const queryClient = useQueryClient();
   const { ref } = useBlurWhenScroll();
+  const { user } = useGetMemberInfo();
   const navigateLogin = () => {
     navigate("/login");
   };
   const navigateRegister = () => {
     navigate("/register");
   };
+  const logoutClicked = () => {
+    if (window.confirm("로그아웃 하시겠습니까?")) {
+      alert("로그아웃 되었습니다.");
+      localStorage.removeItem("token");
+      queryClient.invalidateQueries({
+        queryKey: ["getMemberInfo"],
+      });
+      queryClient.clear();
+      navigate("/");
+    }
+  };
   return (
     <HeaderLayout ref={ref}>
       <HeaderText />
       <HeaderBtn>
-        <AuthButton
-          width="9.6rem"
-          bgColor={theme.colors.white}
-          addClass="margin-right:2rem;"
-          onClick={navigateLogin}
-        >
-          로그인
-        </AuthButton>
-        <AuthButton
-          width="11.4rem"
-          bgColor={theme.colors.mainColor}
-          onClick={navigateRegister}
-        >
-          회원가입
-        </AuthButton>
+        {!user ? (
+          <>
+            <AuthButton
+              width="9.6rem"
+              bgColor={theme.colors.white}
+              addClass="margin-right:2rem;"
+              onClick={navigateLogin}
+            >
+              로그인
+            </AuthButton>
+            <AuthButton
+              width="11.4rem"
+              bgColor={theme.colors.mainColor}
+              onClick={navigateRegister}
+            >
+              회원가입
+            </AuthButton>
+          </>
+        ) : (
+          <AuthButton
+            width="11.4rem"
+            bgColor={theme.colors.mainColor}
+            onClick={logoutClicked}
+          >
+            로그아웃
+          </AuthButton>
+        )}
       </HeaderBtn>
     </HeaderLayout>
   );

diff --git a/src/features/auth/queries/usePostLogin.tsx b/src/features/auth/queries/usePostLogin.tsx
@@ -7,7 +7,6 @@ async function postLogin(data: AuthLoginRequest) {
     "/app/auth/login",
     data
   );
-  console.log(data);
   return res.data.data.accessToken;
 }
 

diff --git a/src/pages/auth/Login.tsx b/src/pages/auth/Login.tsx
@@ -7,11 +7,9 @@ import { usePostLogin } from "@/features/auth/queries/usePostLogin";
 import { LoginFormState } from "@/features/form/states/form-data-state";
 import { useEffect } from "react";
 import { useQueryClient } from "@tanstack/react-query";
-import { useNavigate } from "react-router-dom";
 
 export default function Login() {
   const queryClient = useQueryClient();
-  const navigate = useNavigate();
   const { mutate: postLogin, data: token } = usePostLogin();
   const { isMobile } = MediaQuery();
   const loginFormSubmit = (e: LoginFormState) => {