refactor: 서비스에서 사용되는 훅 정리 및 리팩토링 (#ATR-597)

packages/design-system/packages/hooks/.eslintrc.cjs

@@ -0,0 +1,14 @@
+module.exports = {
+  parserOptions: {
+    project: ['./tsconfig.json'],
+    tsconfigRootDir: __dirname,
+  },
+  rules: {
+    'import/no-unresolved': [2, { caseSensitive: false }],
+  },
+  settings: {
+    'import/resolver': {
+      typescript: {},
+    },
+  },
+}

packages/design-system/packages/hooks/src/index.ts

@@ -0,0 +1,5 @@
+export * from './use-outside-click'
+export * from './use-debounce'
+export * from './use-window-event'
+export * from './use-scroll-observer'
+export * from './use-scroll-progress'

packages/design-system/packages/hooks/src/use-debounce/index.ts

@@ -0,0 +1 @@
+export { default as useDebounce } from './useDebounce'

packages/design-system/packages/hooks/src/use-debounce/useDebounce.ts

@@ -0,0 +1,15 @@
+import React from 'react'
+
+export default function useDebounce<T>(value: T, delay: number) {
+  const [debouncedValue, setDebouncedValue] = React.useState<T>(value)
+
+  React.useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      setDebouncedValue(value)
+    }, delay)
+
+    return () => clearTimeout(timeoutId)
+  }, [value, delay])
+
+  return debouncedValue
+}

packages/design-system/packages/hooks/src/use-outside-click/index.ts

@@ -0,0 +1 @@
+export { default as useOutsideClick } from './useOutsideClick'

packages/design-system/packages/hooks/src/use-outside-click/useOutsideClick.ts

@@ -0,0 +1,21 @@
+import React from 'react'
+
+export default function useOutsideClick(callback: () => void) {
+  const targetAreaRef = React.useRef<HTMLElement | null>(null)
+
+  React.useEffect(() => {
+    const clickHandler = (e: MouseEvent) => {
+      if (!targetAreaRef.current) return
+      if (targetAreaRef.current.contains(e.target as Node | null)) {
+        return
+      }
+      callback()
+    }
+    document.addEventListener('click', clickHandler)
+    return () => {
+      document.removeEventListener('click', clickHandler)
+    }
+  }, [callback])
+
+  return targetAreaRef
+}

packages/design-system/packages/hooks/src/use-scroll-observer/index.ts

@@ -0,0 +1 @@
+export { default as useScrollObserver } from './useScrollObserver'

packages/design-system/packages/hooks/src/use-scroll-observer/useScrollObserver.ts

@@ -0,0 +1,31 @@
+import React from 'react'
+
+export default function useScrollObserver(
+  callback: () => void,
+  options?: IntersectionObserverInit,
+) {
+  const targetRef = React.useRef<HTMLElement | null>(null)
+  const observerRef = React.useRef<IntersectionObserver | null>(null)
+  const defaultOptions = { root: null, rootMargin: '0px', threshold: 1.0 }
+
+  React.useEffect(() => {
+    if (!observerRef.current) {
+      observerRef.current = new IntersectionObserver(([target]) => {
+        if (target.isIntersecting) {
+          callback()
+        }
+      }, options ?? defaultOptions)
+    }
+
+    if (targetRef.current) {
+      observerRef.current.observe(targetRef.current)
+    }
+
+    return () => {
+      observerRef.current?.disconnect()
+      observerRef.current = null
+    }
+  }, [targetRef, callback])
+
+  return targetRef
+}

packages/design-system/packages/hooks/src/use-scroll-progress/index.ts

@@ -0,0 +1 @@
+export { default as useScrollProgress } from './useScrollProgress'

packages/design-system/packages/hooks/src/use-scroll-progress/useScrollProgress.ts

@@ -0,0 +1,16 @@
+import React from 'react'
+import { useWindowEvent } from '../use-window-event'
+
+export default function useScrollProgress() {
+  const [scrollProgress, setScrollProgress] = React.useState(0)
+  const handleScroll = () => {
+    const currentScroll = window.scrollY
+    const totalHeight = document.body.scrollHeight - window.innerHeight
+    const progress = Math.round((currentScroll / totalHeight) * 100)
+    setScrollProgress(progress)
+  }
+
+  useWindowEvent('scroll', handleScroll)
+
+  return { scrollProgress }
+}

packages/design-system/packages/hooks/src/use-window-event/index.ts

@@ -0,0 +1 @@
+export { default as useWindowEvent } from './useWindowEvent'

packages/design-system/packages/hooks/src/use-window-event/useWindowEvent.ts

@@ -0,0 +1,14 @@
+import React from 'react'
+
+export default function useWindowEvent<K extends keyof DocumentEventMap>(
+  type: K,
+  listener: (this: Window, e: DocumentEventMap[K]) => void,
+  option?: boolean | AddEventListenerOptions,
+) {
+  React.useEffect(() => {
+    window.addEventListener(type as any, listener, option)
+    return () => {
+      window.removeEventListener(type as any, listener, option)
+    }
+  }, [type, listener, option])
+}

packages/design-system/packages/hooks/tsconfig.json

@@ -2,10 +2,7 @@
   "extends": "@attraction/config/tsconfig.base.json",
   "main": "index.ts",
   "compilerOptions": {
-    "jsx": "preserve",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
+    "jsx": "preserve"
   },
   "include": ["**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]