refactor(useRefEffect): Improve useRefEffect hook by adding generic types in docs and strict null check in implementation (toss#273)

Co-authored-by: 김윤호 yunho <kimyouknow@naver.com>

Author: wo-o29

.changeset/hip-shoes-show.md

@@ -0,0 +1,5 @@
+---
+'react-simplikit': patch
+---
+
+docs: Add generic type support to useRefEffect interface

packages/core/src/hooks/useRefEffect/ko/useRefEffect.md

@@ -5,18 +5,18 @@
 ## 인터페이스
 
 ```ts
-function useRefEffect(
-  callback: (element: Element) => CleanupCallback | void,
+function useRefEffect<RefElement extends HTMLElement>(
+  callback: (element: RefElement) => CleanupCallback | void,
   deps: DependencyList
-): (element: Element | null) => void;
+): (element: RefElement | null) => void;
 ```
 
 ### 파라미터
 
 <Interface
   required
   name="callback"
-  type="(element: Element) => CleanupCallback | void"
+  type="(element: RefElement) => CleanupCallback | void"
   description="요소가 설정될 때 실행되는 콜백 함수예요. 이 함수는 정리 함수를 반환할 수 있어요."
 />
 
@@ -31,7 +31,7 @@ function useRefEffect(
 
 <Interface
   name=""
-  type="(element: Element | null) => void"
+  type="(element: RefElement | null) => void"
   description="요소를 설정하는 함수예요. 이 함수를 <code>ref</code> 속성에 전달하면, 요소가 변경될 때마다 <code>callback</code>이 호출돼요."
 />
 

packages/core/src/hooks/useRefEffect/useRefEffect.md

@@ -5,18 +5,18 @@
 ## Interface
 
 ```ts
-function useRefEffect(
-  callback: (element: Element) => CleanupCallback | void,
+function useRefEffect<RefElement extends HTMLElement>(
+  callback: (element: RefElement) => CleanupCallback | void,
   deps: DependencyList
-): (element: Element | null) => void;
+): (element: RefElement | null) => void;
 ```
 
 ### Parameters
 
 <Interface
   required
   name="callback"
-  type="(element: Element) => CleanupCallback | void"
+  type="(element: RefElement) => CleanupCallback | void"
   description="A callback function that is executed when the element is set. This function can return a cleanup function."
 />
 
@@ -31,7 +31,7 @@ function useRefEffect(
 
 <Interface
   name=""
-  type="(element: Element | null) => void"
+  type="(element: RefElement | null) => void"
   description="function to set the element. Pass this function to the <code>ref</code> attribute, and the <code>callback</code> will be called whenever the element changes."
 />
 

packages/core/src/hooks/useRefEffect/useRefEffect.ts

@@ -9,10 +9,10 @@ export type CleanupCallback = () => void;
  * `useRefEffect` is a React hook that helps you set a reference to a specific DOM element and execute a callback whenever the element changes.
  * This hook calls a cleanup function whenever the element changes to prevent memory leaks.
  *
- * @param {(element: Element) => CleanupCallback | void} callback - A callback function that is executed when the element is set. This function can return a cleanup function.
+ * @param {(element: RefElement) => CleanupCallback | void} callback - A callback function that is executed when the element is set. This function can return a cleanup function.
  * @param {DependencyList} deps - An array of dependencies that define when the callback should be re-executed. The `callback` is re-executed whenever the `deps` change.
  *
- * @returns {(element: Element | null) => void} A function to set the element. Pass this function to the `ref` attribute, and the `callback` will be called whenever the element changes.
+ * @returns {(element: RefElement | null) => void} A function to set the element. Pass this function to the `ref` attribute, and the `callback` will be called whenever the element changes.
  *
  * @example
  * import { useRefEffect } from 'react-simplikit';
@@ -29,15 +29,15 @@ export type CleanupCallback = () => void;
  *   return <div ref={ref}>Basic Example</div>;
  * }
  */
-export function useRefEffect<Element extends HTMLElement = HTMLElement>(
-  callback: (element: Element) => CleanupCallback | void,
+export function useRefEffect<RefElement extends HTMLElement = HTMLElement>(
+  callback: (element: RefElement) => CleanupCallback | void,
   deps: DependencyList
-): (element: Element | null) => void {
+): (element: RefElement | null) => void {
   const preservedCallback = usePreservedCallback(callback);
   const cleanupCallbackRef = useRef<CleanupCallback>(() => {});
 
   const effect = useCallback(
-    (element: Element | null) => {
+    (element: RefElement | null) => {
       cleanupCallbackRef.current();
       cleanupCallbackRef.current = () => {};