Implement logout

@@ -8,16 +8,16 @@ import { Page } from "layout/Page";
 import { FileList } from "file/FileList";
 
 export function App() {
-  const { token, login } = useAuth();
-  const root = token?.user.rootFolder;
+  const token = useAuth();
+  const root = token?.token?.user.rootFolder;
 
   return (
     <Switch>
       <Route path="/login">
-        <Login login={login} />
+        <Login login={token.login} />
       </Route>
       <Route>
-        {token !== null ? (
+        {token.token !== null ? (
           <TokenContext.Provider value={token}>
             <Page>
               <Switch>

@@ -29,7 +29,9 @@ interface Token {
   };
 }
 
-export const TokenContext = React.createContext<Token>({} as Token);
+export const TokenContext = React.createContext<ReturnType<typeof useAuth>>(
+  {} as any
+);
 
 export function useAuth() {
   const [token, setToken] = useState<Token | null>(() => {
@@ -75,5 +77,7 @@ export function useAuth() {
     []
   );
 
-  return { token, login };
+  const logout = useCallback(() => setToken(null), []);
+
+  return { token, login, logout };
 }

@@ -21,8 +21,8 @@ export function FileList() {
   const [upload, setUpload] = useState<boolean>(false);
   const [createFolder, setCreateFolder] = useState<boolean>(false);
 
-  const token = useContext(TokenContext);
-  const userId = token.user.id;
+  const { token } = useContext(TokenContext);
+  const userId = token?.user.id || "";
 
   const api = useApi();
 

@@ -2,6 +2,12 @@
   height: 100%;
 }
 
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
 .content {
   background: #fff;
   padding: 25px 50px;
@@ -20,6 +26,23 @@
   font-weight: bold;
 }
 
+.user {
+  display: flex;
+  align-items: center;
+  color: white;
+
+  svg {
+    width: 28px;
+    height: 28px;
+  }
+
+  &:hover,
+  &:active,
+  &:focus {
+    color: rgba(255, 255, 255, 0.65);
+  }
+}
+
 .footer {
   text-align: center;
 }

-import React from "react";
-import { Layout } from "antd";
+import React, { useContext } from "react";
+import { Layout, Popover, Button } from "antd";
+import { UserOutlined } from "@ant-design/icons";
+import { TokenContext } from "auth/useAuth";
 
 import styles from "./Page.module.scss";
 
 export function Page({ children }: { children: React.ReactNode }) {
+  const { token, logout } = useContext(TokenContext);
   return (
     <Layout className={styles.layout}>
-      <Layout.Header>
+      <Layout.Header className={styles.header}>
         <div className={styles.logo}>KHUDrive</div>
+        <Popover
+          content={
+            <div>
+              {token?.user.name}
+              <Button type="link" onClick={logout}>
+                로그아웃
+              </Button>
+            </div>
+          }
+          trigger="click"
+        >
+          <Button type="text" className={styles.user}>
+            <UserOutlined />
+          </Button>
+        </Popover>
       </Layout.Header>
       <Layout.Content className={styles.content}>{children}</Layout.Content>
       <Layout.Footer className={styles.footer}>