(FE) Add Logout

frontend/src/components/common/ProfilePopover.tsx

@@ -0,0 +1,46 @@
+import {
+	ListItemIcon,
+	ListItemText,
+	MenuItem,
+	MenuList,
+	Popover,
+	PopoverProps,
+} from "@mui/material";
+import LogoutIcon from "@mui/icons-material/Logout";
+import { useDispatch } from "react-redux";
+import { setAccessToken } from "../../store/authSlice";
+import { setUserData } from "../../store/userSlice";
+
+function ProfilePopover(props: PopoverProps) {
+	const dispatch = useDispatch();
+
+	const handleLogout = () => {
+		dispatch(setAccessToken(null));
+		dispatch(setUserData(null));
+	};
+
+	return (
+		<Popover
+			anchorOrigin={{
+				vertical: "top",
+				horizontal: "right",
+			}}
+			transformOrigin={{
+				vertical: "bottom",
+				horizontal: "right",
+			}}
+			{...props}
+		>
+			<MenuList>
+				<MenuItem onClick={handleLogout}>
+					<ListItemIcon>
+						<LogoutIcon fontSize="small" />
+					</ListItemIcon>
+					<ListItemText>Logout</ListItemText>
+				</MenuItem>
+			</MenuList>
+		</Popover>
+	);
+}
+
+export default ProfilePopover;

frontend/src/components/drawers/WorkspaceDrawer.tsx

@@ -6,15 +6,28 @@ import {
 	ListItem,
 	ListItemAvatar,
 	ListItemButton,
+	ListItemSecondaryAction,
 	ListItemText,
 } from "@mui/material";
+import MoreVertIcon from "@mui/icons-material/MoreVert";
 import { useSelector } from "react-redux";
 import { selectUser } from "../../store/userSlice";
+import { MouseEventHandler, useState } from "react";
+import ProfilePopover from "../common/ProfilePopover";
 
 const DRAWER_WIDTH = 240;
 
 function WorkspaceDrawer() {
 	const userStore = useSelector(selectUser);
+	const [profileAnchorEl, setProfileAnchorEl] = useState<(EventTarget & Element) | null>(null);
+
+	const handleOpenProfilePopover: MouseEventHandler = (event) => {
+		setProfileAnchorEl(event.currentTarget);
+	};
+
+	const handleCloseProfilePopover = () => {
+		setProfileAnchorEl(null);
+	};
 
 	return (
 		<Drawer
@@ -33,12 +46,20 @@ function WorkspaceDrawer() {
 			<Box sx={{ mt: "auto" }}>
 				<Divider />
 				<ListItem disablePadding>
-					<ListItemButton>
+					<ListItemButton onClick={handleOpenProfilePopover}>
 						<ListItemAvatar>
 							<Avatar>{userStore.data?.nickname.charAt(0)}</Avatar>
 						</ListItemAvatar>
 						<ListItemText primary={userStore.data?.nickname} />
+						<ListItemSecondaryAction>
+							<MoreVertIcon />
+						</ListItemSecondaryAction>
 					</ListItemButton>
+					<ProfilePopover
+						open={Boolean(profileAnchorEl)}
+						anchorEl={profileAnchorEl}
+						onClose={handleCloseProfilePopover}
+					/>
 				</ListItem>
 			</Box>
 		</Drawer>