feat: (#126) 로그아웃 버튼 클릭시 토큰 삭제 및 전역 로그인 정보 초기화

woowacourse-teams · Aug 5, 2023 · bc86135 · bc86135
1 parent fe1a8e5
commit bc86135
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 3 deletions.
diff --git a/frontend/src/components/common/Layout/index.tsx b/frontend/src/components/common/Layout/index.tsx
@@ -7,6 +7,8 @@ import { useCategoryList } from '@hooks/query/category/useCategoryList';
 import Dashboard from '@components/common/Dashboard';
 import WideHeader from '@components/common/WideHeader';
 
+import { clearCookieToken } from '@utils/cookie';
+
 import * as S from './style';
 
 interface LayoutProps extends PropsWithChildren {
@@ -16,11 +18,15 @@ interface LayoutProps extends PropsWithChildren {
 export default function Layout({ children, isSidebarVisible }: LayoutProps) {
  const navigate = useNavigate();
 
- const { loggedInfo } = useContext(AuthContext);
+ const { loggedInfo, clearLoggedInfo } = useContext(AuthContext);
 
  const { data: categoryList } = useCategoryList(loggedInfo.isLogged);
  const selectedCategory = undefined;
- const handleLogoutClick = () => {};
+
+ const handleLogoutClick = () => {
+ clearCookieToken('accessToken');
+ clearLoggedInfo();
+ };
 
  const movePostListPage = () => {
  navigate('/');

diff --git a/frontend/src/hooks/context/auth.tsx b/frontend/src/hooks/context/auth.tsx
@@ -9,6 +9,7 @@ import { getCookieToken } from '@utils/cookie';
 interface Auth {
  loggedInfo: LoggedInfo;
  setLoggedInfo: Dispatch<SetStateAction<LoggedInfo>>;
+ clearLoggedInfo: () => void;
 }
 
 const notLoggedInfo: LoggedInfo = {
@@ -22,6 +23,10 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
  const [loggedInfo, setLoggedInfo] = useState(notLoggedInfo);
  const { data: userInfo } = useUserInfo(loggedInfo.isLogged);
 
+ const clearLoggedInfo = () => {
+ setLoggedInfo(notLoggedInfo);
+ };
+
  useEffect(() => {
  if (userInfo) setLoggedInfo(origin => ({ ...origin, userInfo }));
  }, [userInfo]);
@@ -32,6 +37,8 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
  }, []);
 
  return (
- <AuthContext.Provider value={{ loggedInfo, setLoggedInfo }}>{children}</AuthContext.Provider>
+ <AuthContext.Provider value={{ loggedInfo, setLoggedInfo, clearLoggedInfo }}>
+ {children}
+ </AuthContext.Provider>
  );
 }
diff --git a/frontend/src/utils/cookie/index.ts b/frontend/src/utils/cookie/index.ts
@@ -13,6 +13,7 @@ export function getCookieToken() {
  const [key, value] = pair.split('=');
  cookieContent[key] = value;
  });
+
  return cookieContent as Record<CookieKey, any>;
 }
 
@@ -29,3 +30,7 @@ export function getMemberId(token: string): MemberPayload {
 
  return decodedData;
 }
+
+export const clearCookieToken = (key: CookieKey) => {
+ document.cookie = key + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;';
+};