@egjs/react-flicking 4.15.0 → 4.16.0-beta.1

package/dev/plugin-check/App.tsx

@@ -0,0 +1,341 @@
+/**
+ * 플러그인 마이그레이션 검증용 (임시)
+ * docs 데모 추가 후 제거 예정
+ *
+ * 참고: https://naver.github.io/egjs-flicking/ko/Plugins
+ */
+
+import { Arrow, AutoPlay, Fade, Pagination, Parallax, Perspective, Sync } from "@dev/plugins";
+import Flicking, { ViewportSlot } from "@dev/react-flicking";
+import { useEffect, useRef, useState } from "react";
+
+const css: Record<string, React.CSSProperties> = {
+  section: {
+    marginBottom: 48
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: "bold",
+    marginBottom: 12,
+    borderBottom: "2px solid #333",
+    paddingBottom: 4
+  },
+  note: {
+    fontSize: 12,
+    color: "#666",
+    marginTop: 8
+  },
+  panel: {
+    minWidth: 200,
+    height: 160,
+    margin: "0 5px",
+    background: "#e0e7ff",
+    borderRadius: 8,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: 24,
+    fontWeight: "bold",
+    overflow: "hidden"
+  },
+  pluginsPanel: {
+    position: "relative",
+    width: "100%",
+    height: 200,
+    overflow: "hidden"
+  },
+  panelImage: {
+    width: "100%",
+    height: "100%",
+    objectFit: "cover"
+  },
+  thumbPanel: {
+    width: 100,
+    height: 70,
+    margin: "0 2px",
+    overflow: "hidden",
+    opacity: 0.5,
+    transition: "opacity 0.3s"
+  },
+  thumbImage: {
+    width: "100%",
+    height: "100%",
+    objectFit: "cover"
+  },
+  syncItem: {
+    display: "inline-block",
+    padding: "8px 16px",
+    margin: "0 4px",
+    background: "#f5f5f5",
+    borderRadius: 4,
+    whiteSpace: "nowrap"
+  }
+};
+
+const images = [
+  "https://picsum.photos/seed/a/600/300",
+  "https://picsum.photos/seed/b/600/300",
+  "https://picsum.photos/seed/c/600/300",
+  "https://picsum.photos/seed/d/600/300",
+  "https://picsum.photos/seed/e/600/300",
+  "https://picsum.photos/seed/f/600/300"
+];
+
+function Section({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <div style={css.section}>
+      <div style={css.title}>{title}</div>
+      {children}
+    </div>
+  );
+}
+
+/* ── Arrow ── */
+function ArrowCheck() {
+  const plugins = [new Arrow()];
+
+  return (
+    <Section title="Arrow">
+      <Flicking circular={true} plugins={plugins}>
+        {[1, 2, 3, 4, 5].map(n => (
+          <div key={n} style={css.panel}>
+            {n}
+          </div>
+        ))}
+        <ViewportSlot>
+          <span className="flicking-arrow-prev"></span>
+          <span className="flicking-arrow-next"></span>
+        </ViewportSlot>
+      </Flicking>
+    </Section>
+  );
+}
+
+/* ── AutoPlay ── */
+function AutoPlayCheck() {
+  const plugins = [new AutoPlay()];
+
+  return (
+    <Section title="AutoPlay">
+      <Flicking circular={true} preventDefaultOnDrag={true} plugins={plugins}>
+        {images.slice(0, 3).map((src, i) => (
+          <div key={i} style={css.pluginsPanel}>
+            <img style={css.panelImage} src={src} />
+          </div>
+        ))}
+      </Flicking>
+    </Section>
+  );
+}
+
+/* ── Pagination (bullet) ── */
+function PaginationCheck() {
+  const plugins = [new Pagination({ type: "bullet" })];
+
+  return (
+    <Section title="Pagination (bullet)">
+      <Flicking circular={true} plugins={plugins}>
+        {[1, 2, 3, 4, 5, 6, 7, 8].map(n => (
+          <div key={n} style={css.panel}>
+            {n}
+          </div>
+        ))}
+        <ViewportSlot>
+          <div className="flicking-pagination"></div>
+        </ViewportSlot>
+      </Flicking>
+    </Section>
+  );
+}
+
+/* ── Fade ── */
+function FadeCheck() {
+  const plugins = [new Fade()];
+
+  return (
+    <Section title="Fade">
+      <Flicking circular={true} preventDefaultOnDrag={true} plugins={plugins}>
+        {images.slice(0, 3).map((src, i) => (
+          <div key={i} style={css.pluginsPanel}>
+            <img style={css.panelImage} src={src} />
+          </div>
+        ))}
+      </Flicking>
+    </Section>
+  );
+}
+
+/* ── Parallax ── */
+function ParallaxCheck() {
+  const plugins = [new Parallax("img")];
+
+  return (
+    <Section title="Parallax">
+      <Flicking className="parallax" circular={true} preventDefaultOnDrag={true} plugins={plugins} gap={2}>
+        {images.slice(0, 3).map((src, i) => (
+          <div key={i} style={{ ...css.pluginsPanel, width: "100%" }}>
+            <img style={{ ...css.panelImage, width: "150%", maxWidth: "none" }} src={src} />
+          </div>
+        ))}
+      </Flicking>
+    </Section>
+  );
+}
+
+/* ── Perspective ── */
+function PerspectiveCheck() {
+  const plugins = [new Perspective({ rotate: 1, scale: 2, perspective: 600 })];
+
+  return (
+    <Section title="Perspective">
+      <Flicking circular={true} plugins={plugins}>
+        {[1, 2, 3, 4, 5].map(n => (
+          <div key={n} style={css.panel}>
+            {n}
+          </div>
+        ))}
+      </Flicking>
+    </Section>
+  );
+}
+
+/* ── Sync (camera) ── */
+function SyncCameraCheck() {
+  const flicking0 = useRef<Flicking>(null);
+  const flicking1 = useRef<Flicking>(null);
+  const flicking2 = useRef<Flicking>(null);
+  const [plugins, setPlugins] = useState<Sync[]>([]);
+
+  useEffect(() => {
+    setPlugins([
+      new Sync({
+        type: "camera",
+        synchronizedFlickingOptions: [
+          { flicking: flicking0.current!, isClickable: false },
+          { flicking: flicking1.current!, isClickable: false },
+          { flicking: flicking2.current!, isClickable: false }
+        ]
+      })
+    ]);
+  }, []);
+
+  return (
+    <Section title="Sync (camera)">
+      <Flicking ref={flicking0} align="prev" bound={true} bounce={30} plugins={plugins}>
+        {[
+          "🍎 Apple",
+          "🍉 Watermelon",
+          "🥝 Kiwi",
+          "🍊 Orange",
+          "🍇 Grape",
+          "🍓 Strawberry",
+          "🍑 Peach",
+          "🍋 Lemon",
+          "🫐 Blueberry",
+          "🍌 Banana"
+        ].map(item => (
+          <span key={item} style={css.syncItem}>
+            {item}
+          </span>
+        ))}
+      </Flicking>
+      <div style={{ marginTop: 4 }}>
+        <Flicking ref={flicking1} align="prev" bound={true} bounce={30}>
+          {[
+            "🍔 Hamburger",
+            "🍕 Pizza",
+            "🍞 Bread",
+            "🌮 Taco",
+            "🍜 Ramen",
+            "🍣 Sushi",
+            "🥗 Salad",
+            "🍝 Pasta",
+            "🥘 Stew",
+            "🍱 Bento"
+          ].map(item => (
+            <span key={item} style={css.syncItem}>
+              {item}
+            </span>
+          ))}
+        </Flicking>
+      </div>
+      <div style={{ marginTop: 4 }}>
+        <Flicking ref={flicking2} align="prev" bound={true} bounce={30}>
+          {[
+            "🥛 Milk",
+            "☕ Coffee",
+            "🍵 Green tea",
+            "🧃 Juice",
+            "🥤 Soda",
+            "🍺 Beer",
+            "🧋 Bubble tea",
+            "🍷 Wine",
+            "🥥 Coconut",
+            "🍶 Sake"
+          ].map(item => (
+            <span key={item} style={css.syncItem}>
+              {item}
+            </span>
+          ))}
+        </Flicking>
+      </div>
+    </Section>
+  );
+}
+
+/* ── Sync (index + thumbnail) ── */
+function SyncIndexCheck() {
+  const mainRef = useRef<Flicking>(null);
+  const thumbRef = useRef<Flicking>(null);
+  const [plugins, setPlugins] = useState<Sync[]>([]);
+
+  useEffect(() => {
+    setPlugins([
+      new Sync({
+        type: "index",
+        synchronizedFlickingOptions: [
+          { flicking: mainRef.current!, isSlidable: true },
+          { flicking: thumbRef.current!, isClickable: true, activeClass: "active" }
+        ]
+      })
+    ]);
+  }, []);
+
+  return (
+    <Section title="Sync (index + thumbnail)">
+      <Flicking ref={mainRef} bounce={30} preventDefaultOnDrag={true} plugins={plugins}>
+        {images.map((src, i) => (
+          <div key={i} style={css.pluginsPanel}>
+            <img style={css.panelImage} src={src} />
+          </div>
+        ))}
+      </Flicking>
+      <div style={{ marginTop: 8 }}>
+        <Flicking ref={thumbRef} moveType="freeScroll" bound={true} bounce={30} preventDefaultOnDrag={true}>
+          {images.map((src, i) => (
+            <div key={i} style={css.thumbPanel}>
+              <img style={css.thumbImage} src={src} />
+            </div>
+          ))}
+        </Flicking>
+      </div>
+    </Section>
+  );
+}
+
+export default function App() {
+  return (
+    <div style={{ maxWidth: 640, margin: "0 auto", padding: 20 }}>
+      <h1>Plugin Check</h1>
+      <p style={css.note}>마이그레이션 검증용 — docs 데모 추가 후 제거 예정</p>
+      <ArrowCheck />
+      <AutoPlayCheck />
+      <PaginationCheck />
+      <FadeCheck />
+      <ParallaxCheck />
+      <PerspectiveCheck />
+      <SyncCameraCheck />
+      <SyncIndexCheck />
+    </div>
+  );
+}

package/dev/plugin-check/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Plugin Check - React Flicking</title>
+    <style>
+      body { margin: 0; padding: 20px; font-family: sans-serif; }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

package/dev/plugin-check/main.tsx

@@ -0,0 +1,6 @@
+import { createRoot } from "react-dom/client";
+import "@dev/flicking-css";
+import "@dev/plugins-css";
+import App from "./App";
+
+createRoot(document.getElementById("root")!).render(<App />);

package/dev/scratch/App.tsx

@@ -0,0 +1,34 @@
+/**
+ * 이슈 재현 템플릿
+ *
+ * 이 파일을 덮어써서 이슈를 재현하세요.
+ */
+import Flicking from "@dev/react-flicking";
+
+const css: Record<string, React.CSSProperties> = {
+  panel: {
+    minWidth: 200,
+    height: 200,
+    margin: "0 5px",
+    background: "#f0f0f0",
+    borderRadius: 8,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: 24,
+    fontWeight: "bold"
+  }
+};
+
+export default function App() {
+  return (
+    <div>
+      <h2>Scratch</h2>
+      <Flicking align="prev" circular={true}>
+        <div style={css.panel}>1</div>
+        <div style={css.panel}>2</div>
+        <div style={css.panel}>3</div>
+      </Flicking>
+    </div>
+  );
+}

package/dev/scratch/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Scratch - React Flicking</title>
+    <style>
+      body { margin: 0; padding: 20px; font-family: sans-serif; }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

package/dev/scratch/main.tsx

@@ -0,0 +1,13 @@
+/**
+ * Scratch - 이슈 재현용 독립 페이지
+ *
+ * http://localhost:3001/scratch/
+ *
+ * 이 파일은 수정하지 마세요.
+ * 재현 코드는 App.tsx에 작성합니다.
+ */
+import { createRoot } from "react-dom/client";
+import "@dev/flicking-css";
+import App from "./App";
+
+createRoot(document.getElementById("root")!).render(<App />);

package/dev/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@dev/react-flicking": ["../src/react-flicking/index.ts"],
+      "@dev/flicking": ["../../flicking/src/index.ts"],
+      "@dev/plugins": ["../../flicking-plugins/src/index.ts"]
+    }
+  },
+  "include": ["./**/*.ts", "./**/*.tsx"]
+}

package/dev/vite-env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="vite/client" />
+
+declare const __DEV__: boolean;

package/{declaration → dist}/CrossFlicking.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
-import { CrossFlickingEvent, HoldStartEvent, HoldEndEvent, MoveStartEvent, MoveEvent, MoveEndEvent, WillChangeEvent, ChangedEvent, CrossFlickingOptions, FlickingOptions } from "@egjs/flicking";
-import { FlickingProps } from "./types";
+import { ChangedEvent, CrossFlickingEvent, HoldEndEvent, HoldStartEvent, MoveEndEvent, MoveEvent, MoveStartEvent, WillChangeEvent } from "@egjs/flicking";
 import Flicking from "./Flicking";
+import { FlickingProps } from "./types";
 export interface CrossFlickingProps extends FlickingProps {
     onSideHoldStart: (e: CrossFlickingEvent<HoldStartEvent<Flicking>>) => any;
     onSideHoldEnd: (e: CrossFlickingEvent<HoldEndEvent<Flicking>>) => any;
@@ -16,9 +15,8 @@ export interface CrossFlickingProps extends FlickingProps {
 export declare const CROSSFLICKING_DEFAULT_PROPS: CrossFlickingProps;
 declare class CrossFlicking extends Flicking {
     static defaultProps: CrossFlickingProps;
-    constructor(props: Partial<FlickingProps & FlickingOptions & CrossFlickingOptions & CrossFlickingProps>);
     componentDidMount(): void;
-    render(): JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
     protected _bindEvents(): void;
 }
 interface CrossFlicking extends Flicking {

package/{declaration → dist}/CrossGroup.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode, HTMLAttributes } from "react";
+import React, { HTMLAttributes, ReactNode } from "react";
 interface CrossGroupProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
 }

package/{declaration → dist}/Flicking.d.ts

@@ -1,10 +1,10 @@
-import * as React from "react";
 import Component from "@egjs/component";
+import VanillaFlicking, { FlickingEvents, FlickingOptions } from "@egjs/flicking";
 import ListDiffer from "@egjs/list-differ";
-import VanillaFlicking, { FlickingOptions, FlickingEvents } from "@egjs/flicking";
-import { FlickingProps } from "./types";
-import StrictPanel from "./StrictPanel";
+import * as React from "react";
 import NonStrictPanel from "./NonStrictPanel";
+import StrictPanel from "./StrictPanel";
+import { FlickingProps } from "./types";
 declare class Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>> {
     static defaultProps: FlickingProps;
     protected _vanillaFlicking: VanillaFlicking;
@@ -15,9 +15,9 @@ declare class Flicking extends React.Component<Partial<FlickingProps & FlickingO
     private _diffResult;
     private _renderEmitter;
     protected _prevChildren: React.ReactElement[];
-    get reactPanels(): (StrictPanel | NonStrictPanel | HTMLDivElement)[];
+    get reactPanels(): (NonStrictPanel | StrictPanel | HTMLDivElement)[];
     get renderEmitter(): Component<{
-        render: void;
+        render: undefined;
     }>;
     constructor(props: Partial<FlickingProps & FlickingOptions>);
     componentDidMount(): void;
@@ -25,7 +25,7 @@ declare class Flicking extends React.Component<Partial<FlickingProps & FlickingO
     shouldComponentUpdate(nextProps: Readonly<Partial<FlickingProps & FlickingOptions>>): boolean;
     beforeRender(): void;
     componentDidUpdate(): void;
-    render(): JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
     private _createPanelRefs;
     protected _bindEvents(): void;
     protected _bindEvent(eventName: keyof FlickingEvents): void;
@@ -48,7 +48,7 @@ declare class Flicking extends React.Component<Partial<FlickingProps & FlickingO
     protected _getViewportSlot(): React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
     private _unpackFragment;
     private _getVirtualPanels;
-    protected _getPanels(): JSX.Element[];
+    protected _getPanels(): import("react/jsx-runtime").JSX.Element[];
     private _isFragment;
 }
 interface Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>>, VanillaFlicking {

package/{declaration → dist}/NonStrictPanel.d.ts

@@ -7,7 +7,7 @@ declare class NonStrictPanel extends React.Component<{
     get nativeElement(): HTMLElement;
     get rendered(): boolean;
     get elRef(): React.RefObject<HTMLElement>;
-    render(): JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
     show(): void;
     hide(): void;
 }

package/{declaration → dist}/ReactRenderer.d.ts

@@ -11,6 +11,6 @@ declare class ReactRenderer extends ExternalRenderer {
     forceRenderAllPanels(): Promise<void>;
     destroy(): void;
     protected _collectPanels(): void;
-    protected _createPanel(externalComponent: StrictPanel, options: PanelOptions): import("@egjs/flicking/declaration/core/panel/Panel").default;
+    protected _createPanel(externalComponent: StrictPanel, options: PanelOptions): import("@egjs/flicking/dist/core/panel/Panel").default;
 }
 export default ReactRenderer;

package/{declaration → dist}/StrictPanel.d.ts

@@ -7,7 +7,7 @@ declare class StrictPanel extends React.Component<{
     get nativeElement(): HTMLElement;
     get rendered(): boolean;
     get elRef(): React.RefObject<HTMLElement>;
-    render(): JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
     show(): void;
     hide(): void;
     private _getElement;

package/{declaration → dist}/ViewportSlot.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode } from "react";
 declare const ViewportSlot: React.MemoExoticComponent<(props: {
     children?: ReactNode;
-}) => JSX.Element>;
+}) => import("react/jsx-runtime").JSX.Element>;
 export default ViewportSlot;