diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index c6647dbd..7f0dd7a6 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -44,6 +44,7 @@
 				"react-resizable-layout": "^0.7.2",
 				"react-router-dom": "^6.21.1",
 				"react-social-login-buttons": "^3.9.1",
+				"react-use": "^17.5.0",
 				"redux-persist": "^6.0.0",
 				"yorkie-js-sdk": "^0.4.13"
 			},
@@ -1302,8 +1303,7 @@
 		"node_modules/@jridgewell/sourcemap-codec": {
 			"version": "1.4.15",
 			"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-			"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
-			"dev": true
+			"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
 		},
 		"node_modules/@jridgewell/trace-mapping": {
 			"version": "0.3.22",
@@ -2111,6 +2111,11 @@
 				"@types/unist": "*"
 			}
 		},
+		"node_modules/@types/js-cookie": {
+			"version": "2.2.7",
+			"resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-2.2.7.tgz",
+			"integrity": "sha512-aLkWa0C0vO5b4Sr798E26QgOkss68Un0bLjs7u9qxzPT5CG+8DuNTffWES58YzJs3hrVAOs1wonycqEBqNJubA=="
+		},
 		"node_modules/@types/json-schema": {
 			"version": "7.0.15",
 			"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -2487,6 +2492,11 @@
 				"vite": "^4.2.0 || ^5.0.0"
 			}
 		},
+		"node_modules/@xobotyi/scrollbar-width": {
+			"version": "1.9.5",
+			"resolved": "https://registry.npmjs.org/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.5.tgz",
+			"integrity": "sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ=="
+		},
 		"node_modules/acorn": {
 			"version": "8.11.3",
 			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
@@ -2911,6 +2921,14 @@
 			"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
 			"integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
 		},
+		"node_modules/copy-to-clipboard": {
+			"version": "3.3.3",
+			"resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz",
+			"integrity": "sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==",
+			"dependencies": {
+				"toggle-selection": "^1.0.6"
+			}
+		},
 		"node_modules/cosmiconfig": {
 			"version": "7.1.0",
 			"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
@@ -2944,6 +2962,14 @@
 				"node": ">= 8"
 			}
 		},
+		"node_modules/css-in-js-utils": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-3.1.0.tgz",
+			"integrity": "sha512-fJAcud6B3rRu+KHYk+Bwf+WFL2MDCJJ1XG9x137tJQ0xYxor7XziQtuGFbWNdqrvF4Tk26O3H73nfVqXt/fW1A==",
+			"dependencies": {
+				"hyphenate-style-name": "^1.0.3"
+			}
+		},
 		"node_modules/css-selector-parser": {
 			"version": "3.0.4",
 			"resolved": "https://registry.npmjs.org/css-selector-parser/-/css-selector-parser-3.0.4.tgz",
@@ -2959,6 +2985,26 @@
 				}
 			]
 		},
+		"node_modules/css-tree": {
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
+			"integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
+			"dependencies": {
+				"mdn-data": "2.0.14",
+				"source-map": "^0.6.1"
+			},
+			"engines": {
+				"node": ">=8.0.0"
+			}
+		},
+		"node_modules/css-tree/node_modules/source-map": {
+			"version": "0.6.1",
+			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+			"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/csstype": {
 			"version": "3.1.3",
 			"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -3096,6 +3142,14 @@
 				"is-arrayish": "^0.2.1"
 			}
 		},
+		"node_modules/error-stack-parser": {
+			"version": "2.1.4",
+			"resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.1.4.tgz",
+			"integrity": "sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==",
+			"dependencies": {
+				"stackframe": "^1.3.4"
+			}
+		},
 		"node_modules/esbuild": {
 			"version": "0.19.11",
 			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.11.tgz",
@@ -3475,8 +3529,7 @@
 		"node_modules/fast-deep-equal": {
 			"version": "3.1.3",
 			"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-			"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-			"dev": true
+			"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
 		},
 		"node_modules/fast-glob": {
 			"version": "3.3.2",
@@ -3518,6 +3571,21 @@
 			"integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
 			"dev": true
 		},
+		"node_modules/fast-loops": {
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/fast-loops/-/fast-loops-1.1.3.tgz",
+			"integrity": "sha512-8EZzEP0eKkEEVX+drtd9mtuQ+/QrlfW/5MlwcwK5Nds6EkZ/tRzEexkzUY2mIssnAyVLT+TKHuRXmFNNXYUd6g=="
+		},
+		"node_modules/fast-shallow-equal": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/fast-shallow-equal/-/fast-shallow-equal-1.0.0.tgz",
+			"integrity": "sha512-HPtaa38cPgWvaCFmRNhlc6NG7pv6NUHqjPgVAkWGoB9mQMwYB27/K0CvOM5Czy+qpT3e8XJ6Q4aPAnzpNpzNaw=="
+		},
+		"node_modules/fastest-stable-stringify": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/fastest-stable-stringify/-/fastest-stable-stringify-2.0.2.tgz",
+			"integrity": "sha512-bijHueCGd0LqqNK9b5oCMHc0MluJAx0cwqASgbWMvkO01lCYgIhacVRLcaDz3QnyYIRNJRDwMb41VuT6pHJ91Q=="
+		},
 		"node_modules/fastq": {
 			"version": "1.16.0",
 			"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.16.0.tgz",
@@ -4107,6 +4175,11 @@
 				"node": ">=16.17.0"
 			}
 		},
+		"node_modules/hyphenate-style-name": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
+			"integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
+		},
 		"node_modules/ignore": {
 			"version": "5.3.0",
 			"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.0.tgz",
@@ -4170,6 +4243,15 @@
 			"resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.2.tgz",
 			"integrity": "sha512-EcKzdTHVe8wFVOGEYXiW9WmJXPjqi1T+234YpJr98RiFYKHV3cdy1+3mkTE+KHTHxFFLH51SfaGOoUdW+v7ViQ=="
 		},
+		"node_modules/inline-style-prefixer": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-7.0.0.tgz",
+			"integrity": "sha512-I7GEdScunP1dQ6IM2mQWh6v0mOYdYmH3Bp31UecKdrcUgcURTcctSe1IECdUznSHKSmsHtjrT3CwCPI1pyxfUQ==",
+			"dependencies": {
+				"css-in-js-utils": "^3.1.0",
+				"fast-loops": "^1.1.3"
+			}
+		},
 		"node_modules/is-alphabetical": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
@@ -4360,6 +4442,11 @@
 				"url": "https://github.com/sponsors/dmonad"
 			}
 		},
+		"node_modules/js-cookie": {
+			"version": "2.2.1",
+			"resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
+			"integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
+		},
 		"node_modules/js-tokens": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -4800,6 +4887,11 @@
 				"url": "https://opencollective.com/unified"
 			}
 		},
+		"node_modules/mdn-data": {
+			"version": "2.0.14",
+			"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+			"integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow=="
+		},
 		"node_modules/merge-stream": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -5420,6 +5512,30 @@
 			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
 			"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
 		},
+		"node_modules/nano-css": {
+			"version": "5.6.1",
+			"resolved": "https://registry.npmjs.org/nano-css/-/nano-css-5.6.1.tgz",
+			"integrity": "sha512-T2Mhc//CepkTa3X4pUhKgbEheJHYAxD0VptuqFhDbGMUWVV2m+lkNiW/Ieuj35wrfC8Zm0l7HvssQh7zcEttSw==",
+			"dependencies": {
+				"@jridgewell/sourcemap-codec": "^1.4.15",
+				"css-tree": "^1.1.2",
+				"csstype": "^3.1.2",
+				"fastest-stable-stringify": "^2.0.2",
+				"inline-style-prefixer": "^7.0.0",
+				"rtl-css-js": "^1.16.1",
+				"stacktrace-js": "^2.0.2",
+				"stylis": "^4.3.0"
+			},
+			"peerDependencies": {
+				"react": "*",
+				"react-dom": "*"
+			}
+		},
+		"node_modules/nano-css/node_modules/stylis": {
+			"version": "4.3.1",
+			"resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.1.tgz",
+			"integrity": "sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ=="
+		},
 		"node_modules/nanoid": {
 			"version": "3.3.7",
 			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
@@ -6045,6 +6161,40 @@
 				"react-dom": ">=16.6.0"
 			}
 		},
+		"node_modules/react-universal-interface": {
+			"version": "0.6.2",
+			"resolved": "https://registry.npmjs.org/react-universal-interface/-/react-universal-interface-0.6.2.tgz",
+			"integrity": "sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw==",
+			"peerDependencies": {
+				"react": "*",
+				"tslib": "*"
+			}
+		},
+		"node_modules/react-use": {
+			"version": "17.5.0",
+			"resolved": "https://registry.npmjs.org/react-use/-/react-use-17.5.0.tgz",
+			"integrity": "sha512-PbfwSPMwp/hoL847rLnm/qkjg3sTRCvn6YhUZiHaUa3FA6/aNoFX79ul5Xt70O1rK+9GxSVqkY0eTwMdsR/bWg==",
+			"dependencies": {
+				"@types/js-cookie": "^2.2.6",
+				"@xobotyi/scrollbar-width": "^1.9.5",
+				"copy-to-clipboard": "^3.3.1",
+				"fast-deep-equal": "^3.1.3",
+				"fast-shallow-equal": "^1.0.0",
+				"js-cookie": "^2.2.1",
+				"nano-css": "^5.6.1",
+				"react-universal-interface": "^0.6.2",
+				"resize-observer-polyfill": "^1.5.1",
+				"screenfull": "^5.1.0",
+				"set-harmonic-interval": "^1.0.1",
+				"throttle-debounce": "^3.0.1",
+				"ts-easing": "^0.2.0",
+				"tslib": "^2.1.0"
+			},
+			"peerDependencies": {
+				"react": "*",
+				"react-dom": "*"
+			}
+		},
 		"node_modules/redux": {
 			"version": "5.0.1",
 			"resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
@@ -6287,6 +6437,11 @@
 			"resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.0.tgz",
 			"integrity": "sha512-aw7jcGLDpSgNDyWBQLv2cedml85qd95/iszJjN988zX1t7AVRJi19d9kto5+W7oCfQ94gyo40dVbT6g2k4/kXg=="
 		},
+		"node_modules/resize-observer-polyfill": {
+			"version": "1.5.1",
+			"resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+			"integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+		},
 		"node_modules/resolve": {
 			"version": "1.22.8",
 			"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@@ -6368,6 +6523,14 @@
 				"fsevents": "~2.3.2"
 			}
 		},
+		"node_modules/rtl-css-js": {
+			"version": "1.16.1",
+			"resolved": "https://registry.npmjs.org/rtl-css-js/-/rtl-css-js-1.16.1.tgz",
+			"integrity": "sha512-lRQgou1mu19e+Ya0LsTvKrVJ5TYUbqCVPAiImX3UfLTenarvPUl1QFdvu5Z3PYmHT9RCcwIfbjRQBntExyj3Zg==",
+			"dependencies": {
+				"@babel/runtime": "^7.1.2"
+			}
+		},
 		"node_modules/run-parallel": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -6399,6 +6562,17 @@
 				"loose-envify": "^1.1.0"
 			}
 		},
+		"node_modules/screenfull": {
+			"version": "5.2.0",
+			"resolved": "https://registry.npmjs.org/screenfull/-/screenfull-5.2.0.tgz",
+			"integrity": "sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==",
+			"engines": {
+				"node": ">=0.10.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
 		"node_modules/semver": {
 			"version": "7.5.4",
 			"resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
@@ -6432,6 +6606,14 @@
 			"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
 			"dev": true
 		},
+		"node_modules/set-harmonic-interval": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/set-harmonic-interval/-/set-harmonic-interval-1.0.1.tgz",
+			"integrity": "sha512-AhICkFV84tBP1aWqPwLZqFvAwqEoVA9kxNMniGEUvzOlm4vLmOFLiTT3UZ6bziJTy4bOVpzWGTfSCbmaayGx8g==",
+			"engines": {
+				"node": ">=6.9"
+			}
+		},
 		"node_modules/shebang-command": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -6510,6 +6692,46 @@
 				"url": "https://github.com/sponsors/wooorm"
 			}
 		},
+		"node_modules/stack-generator": {
+			"version": "2.0.10",
+			"resolved": "https://registry.npmjs.org/stack-generator/-/stack-generator-2.0.10.tgz",
+			"integrity": "sha512-mwnua/hkqM6pF4k8SnmZ2zfETsRUpWXREfA/goT8SLCV4iOFa4bzOX2nDipWAZFPTjLvQB82f5yaodMVhK0yJQ==",
+			"dependencies": {
+				"stackframe": "^1.3.4"
+			}
+		},
+		"node_modules/stackframe": {
+			"version": "1.3.4",
+			"resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.3.4.tgz",
+			"integrity": "sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw=="
+		},
+		"node_modules/stacktrace-gps": {
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/stacktrace-gps/-/stacktrace-gps-3.1.2.tgz",
+			"integrity": "sha512-GcUgbO4Jsqqg6RxfyTHFiPxdPqF+3LFmQhm7MgCuYQOYuWyqxo5pwRPz5d/u6/WYJdEnWfK4r+jGbyD8TSggXQ==",
+			"dependencies": {
+				"source-map": "0.5.6",
+				"stackframe": "^1.3.4"
+			}
+		},
+		"node_modules/stacktrace-gps/node_modules/source-map": {
+			"version": "0.5.6",
+			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz",
+			"integrity": "sha512-MjZkVp0NHr5+TPihLcadqnlVoGIoWo4IBHptutGh9wI3ttUYvCG26HkSuDi+K6lsZ25syXJXcctwgyVCt//xqA==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/stacktrace-js": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/stacktrace-js/-/stacktrace-js-2.0.2.tgz",
+			"integrity": "sha512-Je5vBeY4S1r/RnLydLl0TBTi3F2qdfWmYsGvtfZgEI+SCprPppaIhQf5nGcal4gI4cGpCV/duLcAzT1np6sQqg==",
+			"dependencies": {
+				"error-stack-parser": "^2.0.6",
+				"stack-generator": "^2.0.5",
+				"stacktrace-gps": "^3.0.4"
+			}
+		},
 		"node_modules/stringify-entities": {
 			"version": "4.0.3",
 			"resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.3.tgz",
@@ -6615,6 +6837,14 @@
 			"integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
 			"dev": true
 		},
+		"node_modules/throttle-debounce": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz",
+			"integrity": "sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==",
+			"engines": {
+				"node": ">=10"
+			}
+		},
 		"node_modules/to-fast-properties": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@@ -6635,6 +6865,11 @@
 				"node": ">=8.0"
 			}
 		},
+		"node_modules/toggle-selection": {
+			"version": "1.0.6",
+			"resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+			"integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ=="
+		},
 		"node_modules/trim-lines": {
 			"version": "3.0.1",
 			"resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
@@ -6665,6 +6900,11 @@
 				"typescript": ">=4.2.0"
 			}
 		},
+		"node_modules/ts-easing": {
+			"version": "0.2.0",
+			"resolved": "https://registry.npmjs.org/ts-easing/-/ts-easing-0.2.0.tgz",
+			"integrity": "sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ=="
+		},
 		"node_modules/tslib": {
 			"version": "2.6.2",
 			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 2adb15dd..c7a9668b 100755
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -48,6 +48,7 @@
 		"react-resizable-layout": "^0.7.2",
 		"react-router-dom": "^6.21.1",
 		"react-social-login-buttons": "^3.9.1",
+		"react-use": "^17.5.0",
 		"redux-persist": "^6.0.0",
 		"yorkie-js-sdk": "^0.4.13"
 	},
diff --git a/frontend/src/components/headers/EditorHeader.tsx b/frontend/src/components/headers/EditorHeader.tsx
index e1e80f72..7827ade9 100644
--- a/frontend/src/components/headers/EditorHeader.tsx
+++ b/frontend/src/components/headers/EditorHeader.tsx
@@ -17,10 +17,26 @@ import { EditorModeType, selectEditor, setMode } from "../../store/editorSlice";
 import ThemeButton from "../common/ThemeButton";
 import ShareButton from "../common/ShareButton";
 import { useEffect } from "react";
+import { useList } from "react-use";
+import { ActorID } from "yorkie-js-sdk";
+import { YorkieCodeMirrorPresenceType } from "../../utils/yorkie/yorkieSync";
 
 function EditorHeader() {
 	const dispatch = useDispatch();
 	const editorState = useSelector(selectEditor);
+	const [
+		presenceList,
+		{
+			set: setPresenceList,
+			push: pushToPresenceList,
+			removeAt: removePresenceAt,
+			clear: clearPresenceList,
+			filter: filterPresenceList,
+		},
+	] = useList<{
+		clientID: ActorID;
+		presence: YorkieCodeMirrorPresenceType;
+	}>([]);
 
 	useEffect(() => {
 		if (editorState.shareRole === "READ") {
@@ -28,6 +44,34 @@ function EditorHeader() {
 		}
 	}, [dispatch, editorState.shareRole]);
 
+	useEffect(() => {
+		if (!editorState.doc) return;
+
+		setPresenceList(editorState.doc.getPresences());
+
+		const unsubscribe = editorState.doc.subscribe("others", (event) => {
+			if (event.type === "watched") {
+				pushToPresenceList(event.value);
+			}
+
+			if (event.type === "unwatched") {
+				filterPresenceList((presence) => presence.clientID !== event.value.clientID);
+			}
+		});
+
+		return () => {
+			unsubscribe();
+			clearPresenceList();
+		};
+	}, [
+		editorState.doc,
+		clearPresenceList,
+		pushToPresenceList,
+		removePresenceAt,
+		setPresenceList,
+		filterPresenceList,
+	]);
+
 	const handleChangeMode = (newMode: EditorModeType) => {
 		dispatch(setMode(newMode));
 	};
@@ -66,7 +110,7 @@ function EditorHeader() {
 					</Stack>
 					<Stack direction="row" alignItems="center" gap={1}>
 						<AvatarGroup max={4}>
-							{editorState.doc?.getPresences()?.map((presence) => (
+							{presenceList?.map((presence) => (
 								<Avatar
 									key={presence.clientID}
 									alt={presence.presence.name}
diff --git a/frontend/src/pages/document/Index.tsx b/frontend/src/pages/document/Index.tsx
index a35b57cc..7d7d11bc 100644
--- a/frontend/src/pages/document/Index.tsx
+++ b/frontend/src/pages/document/Index.tsx
@@ -62,6 +62,7 @@ function EditorIndex() {
 
 		return () => {
 			const cleanUp = async () => {
+				await client?.detach(doc);
 				await client?.deactivate();
 				dispatch(setDoc(null));
 				dispatch(setClient(null));
diff --git a/frontend/src/utils/yorkie/remoteSelection.ts b/frontend/src/utils/yorkie/remoteSelection.ts
index 074965e8..aded4de8 100644
--- a/frontend/src/utils/yorkie/remoteSelection.ts
+++ b/frontend/src/utils/yorkie/remoteSelection.ts
@@ -131,7 +131,7 @@ export class YorkieRemoteSelectionsPluginValue {
 
 		this.unsubscribe = this.conf.doc.subscribe("others", (event) => {
 			const decorations: Array<cmState.Range<cmView.Decoration>> = [];
-			if (event.type === "presence-changed") {
+			if (["presence-changed", "unwatched"].includes(event.type)) {
 				this.conf.doc.getPresences().forEach((presence) => {
 					if (presence.clientID === this.conf.client.getID()) {
 						return;
@@ -205,9 +205,7 @@ export class YorkieRemoteSelectionsPluginValue {
 				});
 				this.decorations = cmView.Decoration.set(decorations, true);
 
-				if (decorations.length > 0) {
-					view.dispatch({ annotations: [yorkieRemoteSelectionsAnnotation.of([])] });
-				}
+				view.dispatch({ annotations: [yorkieRemoteSelectionsAnnotation.of([])] });
 			}
 		});
 		this.decorations = cmState.RangeSet.of([]);