docs: update reactive api docs

Author: cjw783

docs/src/demo/reactive/Pagination.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import Flicking, { useFlickingReactiveAPI } from "@egjs/react-flicking";
+import Pagination from "@mui/material/Pagination";
+import Panel from "@site/src/component/Panel";
+
+export default () => {
+  const flickingRef = React.createRef<Flicking>();
+  const {
+    currentPanelIndex,
+    totalPanelCount,
+    moveTo
+  } = useFlickingReactiveAPI(flickingRef);
+
+  const handlePageChange = (event: React.ChangeEvent<unknown>, page: number) => {
+    // MUI Pagination은 1부터 시작하므로 0부터 시작하는 인덱스로 변환
+    moveTo(page - 1);
+  };
+
+  return (
+    <>
+      <Flicking ref={flickingRef}>
+        {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((index) => (
+          <Panel key={index} index={index} />
+        ))}
+      </Flicking>
+      <Pagination
+        page={currentPanelIndex + 1}
+        count={totalPanelCount}
+        onChange={handlePageChange}
+        color="primary"
+        size="large"
+      />
+    </>
+  );
+}; 

docs/src/demo/reactive/PrevNext.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import Flicking, { useFlickingReactiveAPI } from "@egjs/react-flicking";
+import Button from "@mui/material/Button";
+import Panel from "@site/src/component/Panel";
+
+export default () => {
+  const flickingRef = React.createRef<Flicking>();
+  const {
+    isReachStart,
+    isReachEnd,
+    moveTo
+  } = useFlickingReactiveAPI(flickingRef);
+
+  const handlePrev = () => {
+    if (!isReachStart) {
+      moveTo(flickingRef.current.index - 1);
+    }
+  };
+
+  const handleNext = () => {
+    if (!isReachEnd) {
+      moveTo(flickingRef.current.index + 1);
+    }
+  };
+
+  return (
+    <>
+      <Flicking ref={flickingRef}>
+        {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((index) => (
+          <Panel key={index} index={index} />
+        ))}
+      </Flicking>
+      <div style={{ display: "flex", gap: "10px", justifyContent: "center", marginTop: "20px" }}>
+        <Button
+          variant="contained"
+          onClick={handlePrev}
+          disabled={isReachStart}
+        >
+          Prev
+        </Button>
+        <Button
+          variant="contained"
+          onClick={handleNext}
+          disabled={isReachEnd}
+        >
+          Next
+        </Button>
+      </div>
+    </>
+  );
+}; 

docs/src/demo/reactive/ProgressBar.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import Flicking, { useFlickingReactiveAPI } from "@egjs/react-flicking";
+import LinearProgress from "@mui/material/LinearProgress";
+import Panel from "@site/src/component/Panel";
+
+export default () => {
+  const flickingRef = React.createRef<Flicking>();
+  const {
+    progress
+  } = useFlickingReactiveAPI(flickingRef);
+
+  return (
+    <div style={{ width: "100%" }}>
+      <Flicking
+        ref={flickingRef}
+        moveType="freeScroll"
+      >
+        {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((index) => (
+          <Panel key={index} index={index} />
+        ))}
+      </Flicking>
+
+      <div style={{ marginTop: "20px" }}>
+        <LinearProgress
+          variant="determinate"
+          value={progress}
+          style={{ width: "100%" }}
+        />
+        <div style={{ textAlign: "center", marginTop: "10px", fontSize: "14px" }}>
+          Progress: {progress.toFixed(1)}%
+        </div>
+      </div>
+    </div>
+  );
+};