feat : onAfterLoad

flamecommit · flamecommit · commit 1e10fe3f822a · 2023-08-31T23:09:27.000+09:00
diff --git a/package/CHANGE.md b/package/CHANGE.md
@@ -1,3 +1,6 @@
 ## 1.3.0
 
-- FullpageContainer Props 추가 : ransitionDuration, 섹션간 이동 속도, type : number, default : 700
+### What's New?
+
+- add Props in FullpageContainer : ransitionDuration, 섹션간 이동 속도, type : number, default : 700
+- add Props in FullpageContainer : onAfterLoad, 로딩 후 실행 이벤트, arguments : container
diff --git a/package/src/components/FullpageContainer.tsx b/package/src/components/FullpageContainer.tsx
@@ -12,6 +12,7 @@ interface IProps {
   transitionDuration?: number; // Section 전환 속도
   onBeforeChange?: (beforeIndex: number, afterIndex: number) => void;
   onAfterChange?: (beforeIndex: number, afterIndex: number) => void;
+  onAfterLoad?: (container: React.RefObject<HTMLDivElement>) => void;
 }
 
 function FullpageContainer({
@@ -21,6 +22,7 @@ function FullpageContainer({
   setActiveIndex,
   onBeforeChange,
   onAfterChange,
+  onAfterLoad,
 }: IProps) {
   const [transformY, setTransformY] = useState<number>(0);
   const container = useRef<HTMLDivElement>(null);
@@ -85,6 +87,12 @@ function FullpageContainer({
     }
   }, [container, isLoaded]);
 
+  useEffect(() => {
+    if (isLoaded && onAfterLoad) {
+      onAfterLoad(container);
+    }
+  }, [isLoaded, onAfterLoad]);
+
   /**
    * Container 마운트에 <html> 태그에 Class를 추가하고, 언마운트에 제거합니다.
    */
diff --git a/test/src/App.tsx b/test/src/App.tsx
@@ -23,6 +23,9 @@ function App() {
         onAfterChange={(beforeIndex, afterIndex) => {
           console.log("after", beforeIndex, afterIndex);
         }}
+        onAfterLoad={(container) => {
+          console.log("afterLoad", container);
+        }}
       >
         <FullpageSection name="first">
           <FirstSection />
