로그아웃 구현 (#261)

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

* fix: (#126) 로그아웃시 기존userInfo가 로그인정보에 다시 저장되는 문제 해결

* refactor: (#126) 로그인 정보 필드명 수정.

* fix: 토큰 만료시키는 방법 수정하여 로그인 후 로그아웃 안되는 오류 수정

- 로그인 후 페이지 새로고침 없이 로그아웃시 로그아웃되지 않음
- 마감시간을 기존 1970으로 설정한 것에서 현재시간 기준 -1초로 변경

frontend/src/components/PostForm/index.tsx

@@ -55,7 +55,7 @@ export default function PostForm({ data, mutate, isError, error }: PostFormProps
  const navigate = useNavigate();
  const writingOptionHook = useWritingOption(voteInfo?.options);
  const contentImageHook = useContentImage(imageUrl);
- const { isLogged } = useContext(AuthContext).loggedInfo;
+ const { isLoggedIn: isLogged } = useContext(AuthContext).loggedInfo;
  const { data: categoryList } = useCategoryList(isLogged);
 
  const { isOpen, openComponent, closeComponent } = useToggle();

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 { data: categoryList } = useCategoryList(loggedInfo.isLoggedIn);
  const selectedCategory = undefined;
- const handleLogoutClick = () => {};
+
+ const handleLogoutClick = () => {
+ clearCookieToken('accessToken');
+ clearLoggedInfo();
+ };
 
  const movePostListPage = () => {
  navigate('/');

frontend/src/components/post/PostListPage/index.tsx

@@ -21,7 +21,7 @@ import * as S from './style';
 export default function PostListPage() {
  const { drawerRef, closeDrawer, openDrawer } = useDrawer('left');
 
- const { isLogged, userInfo } = useContext(AuthContext).loggedInfo;
+ const { isLoggedIn: isLogged, userInfo } = useContext(AuthContext).loggedInfo;
  const { data: categoryList } = useCategoryList(isLogged);
 
  const handleLogoutClick = () => {};

frontend/src/hooks/context/auth.tsx

@@ -9,29 +9,38 @@ import { getCookieToken } from '@utils/cookie';
 interface Auth {
  loggedInfo: LoggedInfo;
  setLoggedInfo: Dispatch<SetStateAction<LoggedInfo>>;
+ clearLoggedInfo: () => void;
 }
 
 const notLoggedInfo: LoggedInfo = {
- isLogged: false,
+ isLoggedIn: false,
  accessToken: '',
 };
 
 export const AuthContext = createContext({} as Auth);
 
 export function AuthProvider({ children }: { children: React.ReactNode }) {
  const [loggedInfo, setLoggedInfo] = useState(notLoggedInfo);
- const { data: userInfo } = useUserInfo(loggedInfo.isLogged);
+ const { data: userInfo } = useUserInfo(loggedInfo.isLoggedIn);
+
+ const clearLoggedInfo = () => {
+ setLoggedInfo(notLoggedInfo);
+ };
 
  useEffect(() => {
- if (userInfo) setLoggedInfo(origin => ({ ...origin, userInfo }));
+ if (userInfo && loggedInfo.isLoggedIn) {
+ setLoggedInfo(origin => ({ ...origin, userInfo }));
+ }
  }, [userInfo]);
 
  useEffect(() => {
  const accessToken = getCookieToken().accessToken;
- if (accessToken) setLoggedInfo(origin => ({ ...origin, accessToken, isLogged: true }));
+ if (accessToken) setLoggedInfo(origin => ({ ...origin, accessToken, isLoggedIn: true }));
  }, []);
 
  return (
- <AuthContext.Provider value={{ loggedInfo, setLoggedInfo }}>{children}</AuthContext.Provider>
+ <AuthContext.Provider value={{ loggedInfo, setLoggedInfo, clearLoggedInfo }}>
+ {children}
+ </AuthContext.Provider>
  );
 }

frontend/src/pages/auth/Redirection.tsx

@@ -44,7 +44,7 @@ export default function Redirection() {
  setLoggedInfo({
  ...loggedInfo,
  accessToken: getCookieToken().accessToken,
- isLogged: true,
+ isLoggedIn: true,
  });
 
  navigate('/');

frontend/src/types/user.ts

@@ -20,6 +20,6 @@ export interface ModifyNicknameRequest {
 
 export interface LoggedInfo {
  accessToken: string;
- isLogged: boolean;
+ isLoggedIn: boolean;
  userInfo?: User;
 }

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,8 @@ export function getMemberId(token: string): MemberPayload {
 
  return decodedData;
 }
+
+export const clearCookieToken = (key: CookieKey) => {
+ const expirationTime = new Date(Date.now() - 1);
+ document.cookie = `${encodeURIComponent(key)}=; expires=${expirationTime.toUTCString()}; path=/;`;
+};