✨ feat: 매개변수 visibleOnce, initialView 추가

src/App.tsx

@@ -6,17 +6,15 @@ import useIntersectionObserver from './hooks/useIntersectionObserver';
 
 function App() {
   const [count, setCount] = useState(0);
+
   const { setRef, isView, entry } = useIntersectionObserver({
-    // root: document.getElementById('root'),
-    // rootMargin: '20px',
-    // threshold:
+    visibleOnce: true,
   });
-  console.log('ENTRY : ', isView);
-  console.log('ENTRY : ', entry);
+  console.log(isView, entry?.target);
 
   return (
     <>
-      <div>
+      <div ref={setRef}>
         <a href="https://vitejs.dev" target="_blank">
           <img src={viteLogo} className="logo" alt="Vite logo" />
         </a>

src/hooks/useIntersectionObserver.ts

@@ -4,6 +4,8 @@ interface IntersectionObserverOptions {
   root?: Element | null;
   rootMargin?: string;
   threshold?: number | number[];
+  visibleOnce?: boolean;
+  initialView?: boolean;
 }
 
 interface IntersectionObserverResult {
@@ -12,27 +14,30 @@ interface IntersectionObserverResult {
   entry?: IntersectionObserverEntry;
 }
 
-function useIntersectionObserver({
+const useIntersectionObserver = ({
   root,
   rootMargin,
   threshold,
-}: IntersectionObserverOptions = {}): IntersectionObserverResult {
+  visibleOnce = false,
+  initialView = false,
+}: IntersectionObserverOptions = {}): IntersectionObserverResult => {
   const [ref, setRef] = useState<Element | null>(null);
   const [entryState, setEntryState] = useState<{
     isView: boolean;
     entry?: IntersectionObserverEntry | null;
-  }>({ isView: false, entry: null });
+  }>({ isView: initialView, entry: null });
 
   useEffect(() => {
     if (!ref) return;
 
     const handleIntersection: IntersectionObserverCallback = (entries) => {
       entries.forEach((entry) => {
-        setEntryState((prev) => ({
-          ...prev,
-          isView: entry.isIntersecting,
-          entry: entry,
-        }));
+        const isIntersecting = entry.isIntersecting;
+        setEntryState({ isView: isIntersecting, entry: entry });
+
+        if (visibleOnce && isIntersecting) {
+          observer.unobserve(ref);
+        }
       });
     };
 
@@ -54,6 +59,6 @@ function useIntersectionObserver({
     isView: entryState.isView,
     entry: entryState.entry,
   } as IntersectionObserverResult;
-}
+};
 
 export default useIntersectionObserver;