Add back button to DocumentHeader

frontend/src/components/headers/DocumentHeader.tsx

@@ -2,6 +2,7 @@ import {
 	AppBar,
 	Avatar,
 	AvatarGroup,
+	IconButton,
 	Paper,
 	Stack,
 	ToggleButton,
@@ -20,9 +21,12 @@ import { useEffect } from "react";
 import { useList } from "react-use";
 import { ActorID } from "yorkie-js-sdk";
 import { YorkieCodeMirrorPresenceType } from "../../utils/yorkie/yorkieSync";
+import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
+import { useNavigate } from "react-router-dom";
 
 function DocumentHeader() {
 	const dispatch = useDispatch();
+	const navigate = useNavigate();
 	const editorState = useSelector(selectEditor);
 	const [
 		presenceList,
@@ -76,11 +80,20 @@ function DocumentHeader() {
 		dispatch(setMode(newMode));
 	};
 
+	const handleToPrevious = () => {
+		navigate(-1);
+	};
+
 	return (
 		<AppBar position="static" sx={{ zIndex: 100 }}>
 			<Toolbar>
 				<Stack width="100%" direction="row" justifyContent="space-between">
 					<Stack direction="row" spacing={1} alignItems="center">
+						<Tooltip title="Back to Previous Page">
+							<IconButton color="inherit" onClick={handleToPrevious}>
+								<ArrowBackIosNewIcon />
+							</IconButton>
+						</Tooltip>
 						<Paper>
 							{editorState.shareRole !== "READ" && (
 								<ToggleButtonGroup