feat(react): useCombinedRefs, useScrollEvent 훅 추가

packages/react/src/hooks/useCombinedRef.ts

@@ -0,0 +1,29 @@
+import { Ref, useCallback, MutableRefObject, RefCallback } from 'react';
+
+/**
+ * 여러 개의 ref를 합칠 수 있는 훅입니다.
+ * @example
+ * const Foo = forwardRef((props, fowardedRef) => {
+ *   const ref = useRef();
+ *   const combinedRef = useCombinedRefs(fowardedRef, ref);
+ *
+ *   // div가 업데이트되면 ref, fowardedRef 둘 다 업데이트 됨
+ *   return <div ref={combinedRef} />
+ * });
+ */
+export default function useCombinedRefs<T>(...refs: Array<Ref<T>>): RefCallback<T> {
+  const combinedRef = useCallback(
+    (value: T) => {
+      refs.forEach((ref) => {
+        if (typeof ref === 'function') {
+          ref(value);
+        } else if (ref != null) {
+          (ref as MutableRefObject<T>).current = value;
+        }
+      });
+    },
+    [refs]
+  );
+
+  return combinedRef;
+}

packages/react/src/hooks/useScrollEvent.ts

@@ -0,0 +1,20 @@
+import { RefObject, useEffect } from 'react';
+
+/**
+ * 컴포넌트에 스크롤 이벤트를 추가하는 hook입니다.
+ * useEffect dependency로 hook의 인자인 ref, scrollCallback을 포함하고 있어
+ * ref, scrollCallback의 레퍼런스가 변경 될 때마다 스크롤 이벤트가 바인딩됩니다.
+ * 이 부분을 참고하셔서 성능이슈가 발생하지 않도록 잘 관리해주세요.
+ */
+const useScrollEvent = (ref: RefObject<HTMLElement>, scrollCallback: () => void) => {
+  useEffect(() => {
+    if (ref.current === null) {
+      return;
+    }
+
+    ref.current.addEventListener('scroll', scrollCallback, { passive: true });
+    return () => ref.current?.removeEventListener('scroll', scrollCallback);
+  }, [ref, scrollCallback]);
+};
+
+export default useScrollEvent;