Update yorkie to v0.5.6 (#413)

* Update `yorkie` to `v0.5.6`

* Add comment for cleanup codes

Author: devleejb

backend/docker/docker-compose-full.yml

@@ -45,7 +45,7 @@ services:
             - "minio:minio"
 
     yorkie:
-        image: "yorkieteam/yorkie:0.5.5"
+        image: "yorkieteam/yorkie:0.5.6"
         command: ["server", "--enable-pprof"]
         restart: always
         ports:

backend/docker/docker-compose.yml

@@ -2,7 +2,7 @@ version: "3.8"
 
 services:
     yorkie:
-        image: "yorkieteam/yorkie:0.5.5"
+        image: "yorkieteam/yorkie:0.5.6"
         command: ["server", "--enable-pprof"]
         restart: always
         ports:

frontend/package.json

@@ -82,7 +82,7 @@
 		"refractor": "^4.8.1",
 		"validator": "^13.12.0",
 		"vite-plugin-package-version": "^1.1.0",
-		"yorkie-js-sdk": "0.5.5"
+		"yorkie-js-sdk": "0.5.6"
 	},
 	"devDependencies": {
 		"@sentry/vite-plugin": "^2.20.1",

frontend/src/hooks/useYorkieDocument.ts

@@ -2,7 +2,7 @@ import Color from "color";
 import randomColor from "randomcolor";
 import { useCallback, useEffect, useState } from "react";
 import { useSelector } from "react-redux";
-import { useSearchParams } from "react-router-dom";
+import { useBeforeUnload, useSearchParams } from "react-router-dom";
 import * as yorkie from "yorkie-js-sdk";
 import { selectAuth } from "../store/authSlice";
 import { CodePairDocType } from "../store/editorSlice";
@@ -80,8 +80,7 @@ export const useYorkieDocument = (
 		if (!client || !doc) return;
 
 		try {
-			await client.detach(doc);
-			await client.deactivate();
+			await client.deactivate({ keepalive: true });
 		} catch (error) {
 			console.error("Error during Yorkie cleanup:", error);
 		}
@@ -102,8 +101,7 @@ export const useYorkieDocument = (
 
 				// Clean up if the component is unmounted before the initialization is done
 				if (!mounted) {
-					await newClient.detach(newDoc);
-					await newClient.deactivate();
+					await newClient.deactivate({ keepalive: true });
 					return;
 				}
 
@@ -131,11 +129,17 @@ export const useYorkieDocument = (
 		createYorkieDocument,
 	]);
 
+	// Clean up yorkie document on unmount
+	// For example, when the user navigates to a different page
 	useEffect(() => {
 		return () => {
 			cleanUpYorkieDocument();
 		};
 	}, [cleanUpYorkieDocument]);
 
+	// Clean up yorkie document on beforeunload
+	// For example, when the user closes the tab or refreshes the page
+	useBeforeUnload(cleanUpYorkieDocument);
+
 	return { client, doc };
 };