Merge pull request #608 from boostcampwm2023/FE/feature/#602-카카오톡-로그아…

…웃-기능 Fe/feature/#602 카카오톡 로그아웃 기능
boostcampwm2023 · Mar 8, 2024 · 30d7b9a · 30d7b9a
2 parents a2f386a + eb9f059
commit 30d7b9a
Show file tree

Hide file tree

Showing 8 changed files with 50 additions and 16 deletions.
diff --git a/backend/was/src/auth/auth.controller.ts b/backend/was/src/auth/auth.controller.ts
@@ -30,7 +30,7 @@ export class AuthController {
     this.cookieOptions = {
       httpOnly: true,
       secure: process.env.ENV === 'PROD',
-      sameSite: 'none',
+      sameSite: process.env.ENV === 'PROD' ? 'none' : 'lax',
       maxAge: 3600000,
     };
   }

diff --git a/frontend/src/business/hooks/auth/useKakaoOAuth.ts b/frontend/src/business/hooks/auth/useKakaoOAuth.ts
@@ -1,9 +1,18 @@
-import { KAKAO_AUTH_URL } from '@constants/kakao';
+import axios from 'axios';
+
+import { KAKAO_AUTH_URL, KAKAO_LOGOUT_URL } from '@constants/kakao';
 
 export function useKakaoOAuth() {
   const requestAuthorization = () => {
     window.location.href = KAKAO_AUTH_URL;
   };
 
-  return { requestAuthorization };
+  const logout = async () => {
+    const res = await axios.get(KAKAO_LOGOUT_URL, { withCredentials: true });
+    if (res.status === 200) {
+      window.location.reload();
+    }
+  };
+
+  return { requestAuthorization, logout };
 }
diff --git a/frontend/src/business/hooks/auth/useKakaoOAuthRedirect.ts b/frontend/src/business/hooks/auth/useKakaoOAuthRedirect.ts
@@ -9,14 +9,13 @@ export function useKakaoOAuthRedirect() {
   const navigate = useNavigate();
   const code = new URLSearchParams(window.location.search).get('code');
 
+  const headerOptions = isProdctionMode() ? { SameSite: 'None', Secure: true } : {};
+
   const login = async () => {
     const res = await axios.get(KAKAO_LOGIN_URL, {
       params: { code },
       withCredentials: true,
-      headers: {
-        SameSite: 'None',
-        Secure: isProdctionMode(),
-      },
+      headers: headerOptions,
     });
 
     if (!res || res.status !== 200) {

diff --git a/frontend/src/components/aiChatPage/ChatLogContainer/ChatLogContainer.tsx b/frontend/src/components/aiChatPage/ChatLogContainer/ChatLogContainer.tsx
@@ -6,7 +6,7 @@ export function ChatLogContainer() {
   const { list } = useChatLogList();
 
   return (
-    <div className="w-h-full overflow-auto pt-64 flex-with-center flex-col gap-8 pl-30 pr-30">
+    <div className="w-h-full overflow-auto flex-with-center flex-col gap-8 p-30">
       <ContinueChatButton />
       <ChatLogList list={list} />
     </div>

diff --git a/frontend/src/components/common/Buttons/KakaoLoginoutButton.tsx b/frontend/src/components/common/Buttons/KakaoLoginoutButton.tsx
@@ -0,0 +1,26 @@
+import { Button } from '.';
+
+import { useKakaoOAuth } from '@business/hooks/auth';
+
+import { Icon } from '@iconify/react';
+
+interface KakaoLoginoutButtonProps {}
+
+export function KakaoLoginoutButton({}: KakaoLoginoutButtonProps) {
+  const { logout } = useKakaoOAuth();
+
+  return (
+    <Button
+      color="cancel"
+      size="s"
+      onClick={logout}
+    >
+      <div className="relative w-full h-full text-center">
+        <div className="absolute h-full flex-with-center">
+          <Icon icon="f7:chat-bubble-fill" />
+        </div>
+        <div className="pl-24">로그아웃</div>
+      </div>
+    </Button>
+  );
+}
diff --git a/frontend/src/components/common/Header/Header.tsx b/frontend/src/components/common/Header/Header.tsx
@@ -10,14 +10,11 @@ export function Header({ rightItems }: HeaderProps) {
   return (
     <header className="fixed top-0 w-full h-48 flex justify-between items-center surface-content text-default px-8 py-5 z-20">
       <LogoButton />
-      {rightItems?.map((item, index) => (
-        <div
-          className="flex gap-16"
-          key={index}
-        >
-          {item}
-        </div>
-      ))}
+      <div className="flex-with-center gap-16">
+        {rightItems?.map((item, index) => (
+          <div key={index}>{item}</div>
+        ))}
+      </div>
       <Toast />
     </header>
   );

diff --git a/frontend/src/constants/kakao.ts b/frontend/src/constants/kakao.ts
@@ -7,3 +7,4 @@ export const KAKAO_AUTH_URL =
   `&redirect_uri=${import.meta.env.VITE_KAKAO_REDIRECT_URI}`;
 
 export const KAKAO_LOGIN_URL = import.meta.env.VITE_WAS_URL + '/oauth/login/kakao';
+export const KAKAO_LOGOUT_URL = import.meta.env.VITE_WAS_URL + '/oauth/logout';
diff --git a/frontend/src/pages/AIChatPage/AIChatPage.tsx b/frontend/src/pages/AIChatPage/AIChatPage.tsx
@@ -1,5 +1,6 @@
 import { ChatLogContainer } from '@components/aiChatPage';
 import { Background, ChatContainer, Header } from '@components/common';
+import { KakaoLoginoutButton } from '@components/common/Buttons/KakaoLoginoutButton';
 import { SideBarButton } from '@components/common/SideBar';
 
 import { useAiChatMessage } from '@business/hooks/chatMessage';
@@ -26,6 +27,7 @@ export function AIChatPage({}: AIChatPageProps) {
           rightItems={
             data?.isAuthenticated
               ? [
+                  <KakaoLoginoutButton />,
                   <SideBarButton
                     onClick={toggleSidebar}
                     sideBarOpened={sidebarOpened}