Add yorkie token when initializing client

frontend/src/hooks/useYorkieDocument.ts

@@ -3,11 +3,16 @@ import * as yorkie from "yorkie-js-sdk";
 import { YorkieCodeMirrorDocType, YorkieCodeMirrorPresenceType } from "../utils/yorkie/yorkieSync";
 import Color from "color";
 import randomColor from "randomcolor";
+import { useSearchParams } from "react-router-dom";
+import { useSelector } from "react-redux";
+import { selectAuth } from "../store/authSlice";
 
 export const useYorkieDocument = (
 	yorkieDocuentId?: string | null,
 	presenceName?: string | null
 ) => {
+	const [searchParams] = useSearchParams();
+	const authStore = useSelector(selectAuth);
 	const [client, setClient] = useState<yorkie.Client | null>(null);
 	const [doc, setDoc] = useState<yorkie.Document<
 		YorkieCodeMirrorDocType,
@@ -23,10 +28,16 @@ export const useYorkieDocument = (
 	useEffect(() => {
 		if (!yorkieDocuentId || !presenceName || doc || client) return;
 
+		let yorkieToken = `default:${authStore.accessToken}`;
+
+		if (searchParams.get("token")) {
+			yorkieToken = `share:${searchParams.get("token")}`;
+		}
+
 		const initializeYorkie = async () => {
 			const newClient = new yorkie.Client(import.meta.env.VITE_YORKIE_API_ADDR, {
 				apiKey: import.meta.env.VITE_YORKIE_API_KEY,
-				token: "1231231",
+				token: yorkieToken,
 			});
 			await newClient.activate();
 
@@ -46,7 +57,7 @@ export const useYorkieDocument = (
 			);
 		};
 		initializeYorkie();
-	}, [presenceName, yorkieDocuentId, doc, client]);
+	}, [presenceName, yorkieDocuentId, doc, client, authStore.accessToken, searchParams]);
 
 	return { client, doc, cleanUpYorkieDocument };
 };