From 5d0d5e1c5436d36f1f83bb7193cf2c8cc667e881 Mon Sep 17 00:00:00 2001
From: seungro <seungro@toss.im>
Date: Sun, 1 Jun 2025 18:20:36 +0900
Subject: [PATCH 1/4] feat(ImpressionArea). connect ref's type with it's
 generic

---
 src/components/ImpressionArea/ImpressionArea.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/ImpressionArea/ImpressionArea.tsx b/src/components/ImpressionArea/ImpressionArea.tsx
index 92a0e6fe..c57e6bd8 100644
--- a/src/components/ImpressionArea/ImpressionArea.tsx
+++ b/src/components/ImpressionArea/ImpressionArea.tsx
@@ -1,12 +1,17 @@
-import { ElementType, ReactNode, Ref } from 'react';
+import { ElementType, ReactNode, Ref, RefCallback } from 'react';
 
 import { useImpressionRef, UseImpressionRefOptions } from '../../hooks/useImpressionRef/index.ts';
 import { mergeRefs } from '../../utils/mergeRefs/mergeRefs.ts';
 
+type Element<
+  T extends ElementType,
+  InstrinsicElements = T extends keyof React.JSX.IntrinsicElements ? React.JSX.IntrinsicElements[T] : HTMLElement,
+> = InstrinsicElements extends React.ClassAttributes<infer E extends HTMLElement> ? E : HTMLElement;
+
 type Props<Tag extends ElementType> = React.ComponentPropsWithoutRef<Tag> &
   UseImpressionRefOptions & {
     as?: Tag;
-    ref?: Ref<HTMLElement>;
+    ref?: Ref<Element<Tag>>;
     children?: ReactNode;
     className?: string;
   };
@@ -54,7 +59,7 @@ export function ImpressionArea<T extends ElementType = 'div'>({
   ...props
 }: Props<T>) {
   const Component = as ?? 'div';
-  const impressionRef = useImpressionRef<HTMLElement>({
+  const impressionRef = useImpressionRef<Element<T>>({
     onImpressionStart,
     onImpressionEnd,
     areaThreshold,
@@ -62,5 +67,5 @@ export function ImpressionArea<T extends ElementType = 'div'>({
     rootMargin,
   });
 
-  return <Component ref={mergeRefs(ref, impressionRef)} {...props} />;
+  return <Component ref={mergeRefs(ref, impressionRef) as RefCallback<HTMLElement>} {...props} />;
 }

From 6976af5071706b6073f1581c2d60d4fa36b494e3 Mon Sep 17 00:00:00 2001
From: seungro <seungro@toss.im>
Date: Sun, 1 Jun 2025 18:22:26 +0900
Subject: [PATCH 2/4] update docs

---
 src/components/ImpressionArea/ImpressionArea.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/ImpressionArea/ImpressionArea.tsx b/src/components/ImpressionArea/ImpressionArea.tsx
index c57e6bd8..f20b7082 100644
--- a/src/components/ImpressionArea/ImpressionArea.tsx
+++ b/src/components/ImpressionArea/ImpressionArea.tsx
@@ -22,13 +22,14 @@ type Props<Tag extends ElementType> = React.ComponentPropsWithoutRef<Tag> &
  * and executes callbacks when the element enters or exits the viewport. This component uses the `useImpressionRef`
  * hook to track the element's visibility.
  *
- * @param {ElementType} [as='div'] - The HTML tag to render. Defaults to `div`.
+ * @template {ElementType} T - The HTML tag to render. Defaults to `div`.
+ * @param {T} [as='div'] - The HTML tag to render. Defaults to `div`.
  * @param {string} [rootMargin] - Margin to adjust the detection area.
  * @param {number} [areaThreshold] - Minimum ratio of the element that must be visible (0 to 1).
  * @param {number} [timeThreshold] - Minimum time the element must be visible (in milliseconds).
  * @param {() => void} [onImpressionStart] - Callback function executed when the element enters the view.
  * @param {() => void} [onImpressionEnd] - Callback function executed when the element exits the view.
- * @param {Ref<HTMLElement>} [ref] - Reference to the element.
+ * @param {Ref<Element<T>>} [ref] - Reference to the element.
  * @param {React.ReactNode} [children] - Child elements to be rendered inside the component.
  * @param {string} [className] - Additional class names for styling.
  *

From 23cd543a6f043d6e0228ea7c20f9b61a6c0ae469 Mon Sep 17 00:00:00 2001
From: seungro <seungro@toss.im>
Date: Mon, 2 Jun 2025 02:20:59 +0900
Subject: [PATCH 3/4] remove comment

---
 .../ImpressionArea/ImpressionArea.tsx         | 21 -------------------
 1 file changed, 21 deletions(-)

diff --git a/src/components/ImpressionArea/ImpressionArea.tsx b/src/components/ImpressionArea/ImpressionArea.tsx
index 15838e7e..be674b18 100644
--- a/src/components/ImpressionArea/ImpressionArea.tsx
+++ b/src/components/ImpressionArea/ImpressionArea.tsx
@@ -48,27 +48,6 @@ type Props<Tag extends ElementType> = React.ComponentPropsWithoutRef<Tag> &
  *   );
  * }
  */
-// export function ImpressionArea<T extends ElementType = 'div'>({
-//   as,
-//   rootMargin,
-//   areaThreshold,
-//   timeThreshold,
-//   onImpressionStart,
-//   onImpressionEnd,
-//   ref,
-//   ...props
-// }: Props<T>) {
-//   const Component = as ?? 'div';
-//   const impressionRef = useImpressionRef<Element<T>>({
-//     onImpressionStart,
-//     onImpressionEnd,
-//     areaThreshold,
-//     timeThreshold,
-//     rootMargin,
-//   });
-
-//   return <Component ref={mergeRefs(ref, impressionRef) as RefCallback<HTMLElement>} {...props} />;
-// }
 export const ImpressionArea = forwardRef(ImpressionAreaImpl) as <T extends ElementType = 'div'>(
   props: Props<T>
 ) => React.ReactNode;

From 39f4375098874dd05105411bf94abf9e390d62b5 Mon Sep 17 00:00:00 2001
From: seungro <seungro@toss.im>
Date: Mon, 2 Jun 2025 02:23:25 +0900
Subject: [PATCH 4/4] update types

---
 src/components/ImpressionArea/ImpressionArea.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ImpressionArea/ImpressionArea.tsx b/src/components/ImpressionArea/ImpressionArea.tsx
index be674b18..7486ac0d 100644
--- a/src/components/ImpressionArea/ImpressionArea.tsx
+++ b/src/components/ImpressionArea/ImpressionArea.tsx
@@ -49,7 +49,7 @@ type Props<Tag extends ElementType> = React.ComponentPropsWithoutRef<Tag> &
  * }
  */
 export const ImpressionArea = forwardRef(ImpressionAreaImpl) as <T extends ElementType = 'div'>(
-  props: Props<T>
+  props: Props<T> & { ref?: Ref<Element<T>> }
 ) => React.ReactNode;
 
 function ImpressionAreaImpl<T extends ElementType = 'div'>(