From 8e5d9e6289e7cad578ac0768532413b14052ffb1 Mon Sep 17 00:00:00 2001
From: devleejb <devleejb@gmail.com>
Date: Tue, 23 Jan 2024 16:42:49 +0900
Subject: [PATCH 1/2] Add presence to header

---
 frontend/src/components/headers/EditorHeader.tsx | 13 +++++++++++++
 frontend/src/pages/document/Index.tsx            | 14 +++++++++++---
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/headers/EditorHeader.tsx b/frontend/src/components/headers/EditorHeader.tsx
index cf73698f..e1e80f72 100644
--- a/frontend/src/components/headers/EditorHeader.tsx
+++ b/frontend/src/components/headers/EditorHeader.tsx
@@ -1,5 +1,7 @@
 import {
 	AppBar,
+	Avatar,
+	AvatarGroup,
 	Paper,
 	Stack,
 	ToggleButton,
@@ -63,6 +65,17 @@ function EditorHeader() {
 						</Paper>
 					</Stack>
 					<Stack direction="row" alignItems="center" gap={1}>
+						<AvatarGroup max={4}>
+							{editorState.doc?.getPresences()?.map((presence) => (
+								<Avatar
+									key={presence.clientID}
+									alt={presence.presence.name}
+									sx={{ bgcolor: presence.presence.color }}
+								>
+									{presence.presence.name[0]}
+								</Avatar>
+							))}
+						</AvatarGroup>
 						{!editorState.shareRole && <ShareButton />}
 						<ThemeButton />
 					</Stack>
diff --git a/frontend/src/pages/document/Index.tsx b/frontend/src/pages/document/Index.tsx
index 517043a2..49fe210d 100644
--- a/frontend/src/pages/document/Index.tsx
+++ b/frontend/src/pages/document/Index.tsx
@@ -16,10 +16,12 @@ import Preview from "../../components/editor/Preview";
 import { Navigate, useParams, useSearchParams } from "react-router-dom";
 import { useGetDocumentBySharingTokenQuery, useGetDocumentQuery } from "../../hooks/api/document";
 import { AuthContext } from "../../contexts/AuthContext";
+import { selectUser } from "../../store/userSlice";
 
 function EditorIndex() {
 	const dispatch = useDispatch();
 	const params = useParams();
+	const userStore = useSelector(selectUser);
 	const { isLoggedIn } = useContext(AuthContext);
 	const [searchParams] = useSearchParams();
 	const windowWidth = useWindowWidth();
@@ -34,8 +36,9 @@ function EditorIndex() {
 		let client: yorkie.Client;
 		let doc: yorkie.Document<YorkieCodeMirrorDocType, YorkieCodeMirrorPresenceType>;
 		const yorkieDocuentId = document?.yorkieDocumentId || sharedDocument?.yorkieDocumentId;
+		const name = searchParams.get("token") ? "Anonymous" : userStore.data?.nickname;
 
-		if (!yorkieDocuentId) return;
+		if (!yorkieDocuentId || !name) return;
 
 		const initializeYorkie = async () => {
 			client = new yorkie.Client(import.meta.env.VITE_YORKIE_API_ADDR, {
@@ -47,7 +50,7 @@ function EditorIndex() {
 
 			await client.attach(doc, {
 				initialPresence: {
-					name: "Yorkie",
+					name,
 					color: Color(randomColor()).fade(0.15).toString(),
 					selection: null,
 				},
@@ -66,7 +69,12 @@ function EditorIndex() {
 
 			cleanUp();
 		};
-	}, [dispatch, document?.yorkieDocumentId, sharedDocument?.yorkieDocumentId]);
+	}, [
+		dispatch,
+		document?.yorkieDocumentId,
+		sharedDocument?.yorkieDocumentId,
+		userStore.data?.nickname,
+	]);
 
 	useEffect(() => {
 		if (!sharedDocument) return;

From a89b7d9d014cbcd6a092f51bbe3a4d6567d56809 Mon Sep 17 00:00:00 2001
From: devleejb <devleejb@gmail.com>
Date: Tue, 23 Jan 2024 16:47:15 +0900
Subject: [PATCH 2/2] Fix lint

---
 frontend/src/pages/document/Index.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/pages/document/Index.tsx b/frontend/src/pages/document/Index.tsx
index 49fe210d..a35b57cc 100644
--- a/frontend/src/pages/document/Index.tsx
+++ b/frontend/src/pages/document/Index.tsx
@@ -74,6 +74,7 @@ function EditorIndex() {
 		document?.yorkieDocumentId,
 		sharedDocument?.yorkieDocumentId,
 		userStore.data?.nickname,
+		searchParams,
 	]);
 
 	useEffect(() => {