From 05dd986727498437656ad13e3d3b3deefa1ec10e Mon Sep 17 00:00:00 2001
From: Kim Jeong-won <threedalpeng@gmail.com>
Date: Wed, 21 Feb 2024 21:23:35 +0900
Subject: [PATCH] feat: use click outside action

---
 src/routes/practice/(practice)/+layout.svelte |  7 +++++-
 src/utils/hooks/click-outside.ts              | 25 +++++++++++++++++++
 2 files changed, 31 insertions(+), 1 deletion(-)
 create mode 100644 src/utils/hooks/click-outside.ts

diff --git a/src/routes/practice/(practice)/+layout.svelte b/src/routes/practice/(practice)/+layout.svelte
index 2eb8150..677a8c2 100644
--- a/src/routes/practice/(practice)/+layout.svelte
+++ b/src/routes/practice/(practice)/+layout.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { clickoutside } from '$/utils/hooks/click-outside';
 	import { base } from '$app/paths';
 	import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from '@steeze-ui/heroicons';
 	import { Icon } from '@steeze-ui/svelte-icon';
@@ -59,7 +60,11 @@
 			class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
 			on:click={() => (practiceListOpen = !practiceListOpen)}
 		>
-			<div class="absolute -top-[30px] left-[50%] h-[40px] w-auto -translate-x-[50%]">
+			<div
+				use:clickoutside
+				on:clickoutside={() => (practiceListOpen = false)}
+				class="absolute -top-[30px] left-[50%] h-[40px] w-auto -translate-x-[50%]"
+			>
 				<Icon
 					class="opacity-25% hover:opacity-100% h-[20px] w-auto cursor-pointer transition-opacity"
 					src={practiceListOpen ? ChevronDown : ChevronUp}
diff --git a/src/utils/hooks/click-outside.ts b/src/utils/hooks/click-outside.ts
new file mode 100644
index 0000000..dea3527
--- /dev/null
+++ b/src/utils/hooks/click-outside.ts
@@ -0,0 +1,25 @@
+import type { Action, ActionReturn } from 'svelte/action';
+
+export const clickoutside: Action<
+	Element,
+	unknown,
+	{ 'on:clickoutside'?: (event: CustomEvent<MouseEvent>) => any }
+> = (node) => {
+	const handleClick = (event: MouseEvent) => {
+		const target = event.target as HTMLElement;
+		if (!event.target) {
+			return;
+		}
+		if (node && !node.contains(target) && !event.defaultPrevented) {
+			node.dispatchEvent(new CustomEvent('clickoutside', { detail: CustomEvent<MouseEvent> }));
+		}
+	};
+
+	document.addEventListener('click', handleClick, true);
+
+	return {
+		destroy() {
+			document.removeEventListener('click', handleClick, true);
+		}
+	};
+};