✨ feat: ModalCommon

:%s

src/utils/types.utils.ts

@@ -18,4 +18,6 @@ export interface RecipeProps {
     title: string
     description:string
     imageSrc: string
-}
+}
+
+export type MouseAndTouchEvent = MouseEvent | TouchEvent

src/utils/useClickOutSide.ts

@@ -0,0 +1,30 @@
+import { RefObject, useEffect } from 'react'
+import { MouseAndTouchEvent } from './types.utils'
+
+export function useOnClickOutside<T extends HTMLElement = HTMLElement>(
+	ref: RefObject<T>,
+	callback: (event: MouseAndTouchEvent) => void
+) {
+	useEffect(() => {
+		const listener = (event: MouseAndTouchEvent) => {
+			const el = ref?.current
+
+			// Do nothing if clicking ref's element or descendent elements
+			if (!el || el.contains(event.target as Node)) {
+				return
+			}
+
+			callback(event)
+		}
+
+		document.addEventListener(`mousedown`, listener)
+		document.addEventListener(`touchstart`, listener)
+
+		return () => {
+			document.removeEventListener(`mousedown`, listener)
+			document.removeEventListener(`touchstart`, listener)
+		}
+
+		// Reload only if ref or handler changes
+	}, [ref, callback])
+}