@egjs/react-flicking 4.16.0-beta.1 → 4.17.0-beta.2

package/dev/plugin-check/App.tsx

@@ -1,341 +0,0 @@
-/**
- * 플러그인 마이그레이션 검증용 (임시)
- * 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

@@ -1,15 +0,0 @@
-<!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

@@ -1,6 +0,0 @@
-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

@@ -1,34 +0,0 @@
-/**
- * 이슈 재현 템플릿
- *
- * 이 파일을 덮어써서 이슈를 재현하세요.
- */
-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

@@ -1,15 +0,0 @@
-<!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

@@ -1,13 +0,0 @@
-/**
- * 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

@@ -1,12 +0,0 @@
-{
-  "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

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

package/tsconfig.json

@@ -1,23 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strictNullChecks": true,
-    "esModuleInterop": true,
-    "importHelpers": true,
-    "experimentalDecorators": true,
-    "allowSyntheticDefaultImports": true,
-    "forceConsistentCasingInFileNames": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "jsx": "react-jsx",
-    "strict": false,
-    "isolatedModules": true,
-    "noEmit": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": ["src"]
-}

package/vite.config.ts

@@ -1,38 +0,0 @@
-import { createViteConfig } from "../../config/vite-build-helper";
-// @ts-expect-error: resolveJsonModule issue in build environment
-import pkg from "./package.json";
-
-const name = "ReactFlicking";
-const external = {
-  react: "React",
-  "react-dom": "ReactDOM",
-  "@egjs/flicking": "Flicking",
-  "@egjs/component": "Component",
-  "@egjs/list-differ": "eg.ListDiffer"
-};
-
-// Determine build target based on environment variable
-// usage: VITE_BUILD_FORMAT=umd vite build
-const buildFormat = process.env.VITE_BUILD_FORMAT || "esm";
-
-let input = "src/react-flicking/index.ts";
-let formats: any[] = ["es"];
-
-if (buildFormat === "cjs") {
-  input = "src/react-flicking/index.umd.ts";
-  formats = ["cjs"];
-} else if (buildFormat === "umd") {
-  input = "src/react-flicking/index.umd.ts";
-  formats = ["umd"];
-}
-// Default (esm) uses index.ts
-
-export default createViteConfig({
-  input,
-  name,
-  packageJson: pkg,
-  external,
-  formats,
-  tsconfig: "tsconfig.build.json", // Use build specific tsconfig
-  output: "dist/flicking" // Base name for output files
-});

package/vite.dev.config.ts

@@ -1,58 +0,0 @@
-import path from "node:path";
-import react from "@vitejs/plugin-react";
-import { defineConfig } from "vite";
-
-export default defineConfig(({ mode }) => {
-  const useBuild = mode === "production";
-
-  return {
-    plugins: [
-      react({
-        babel: {
-          plugins: [
-            ["@babel/plugin-proposal-decorators", { legacy: true }],
-            ["@babel/plugin-proposal-class-properties", { loose: true }]
-          ]
-        }
-      })
-    ],
-    root: path.resolve(__dirname, "dev"),
-    server: {
-      port: 3001,
-      open: true,
-      fs: {
-        allow: [".."]
-      }
-    },
-    resolve: {
-      alias: useBuild
-        ? {
-            // 빌드 검증 모드 - 빌드 결과물 사용
-            "@dev/flicking": path.resolve(__dirname, "../flicking/dist/flicking.esm.js"),
-            "@dev/react-flicking": path.resolve(__dirname, "dist/flicking.esm.js"),
-            "@dev/plugins": path.resolve(__dirname, "../flicking-plugins/dist/plugins.esm.js"),
-            "@dev/flicking-css": path.resolve(__dirname, "../flicking/dist/flicking.css"),
-            "@dev/plugins-css": path.resolve(__dirname, "../flicking-plugins/dist/flicking-plugins.css"),
-            // 소스코드 내부의 @egjs/flicking 참조용
-            "@egjs/flicking": path.resolve(__dirname, "../flicking/dist/flicking.esm.js")
-          }
-        : {
-            // 개발 모드 - 모든 소스 직접 참조 (HMR!)
-            "@dev/flicking": path.resolve(__dirname, "../flicking/src/index.ts"),
-            "@dev/react-flicking": path.resolve(__dirname, "src/react-flicking/index.ts"),
-            "@dev/plugins": path.resolve(__dirname, "../flicking-plugins/src/index.ts"),
-            "@dev/flicking-css": path.resolve(__dirname, "../flicking/sass/flicking.sass"),
-            "@dev/plugins-css": path.resolve(__dirname, "../flicking-plugins/css/all.css"),
-            // 소스코드 내부의 @egjs/flicking 참조용
-            "@egjs/flicking": path.resolve(__dirname, "../flicking/src/index.ts")
-          },
-      extensions: [".ts", ".tsx", ".js", ".jsx"]
-    },
-    optimizeDeps: {
-      include: ["react", "react-dom", "@egjs/axes", "@egjs/component", "@egjs/imready", "@egjs/list-differ"]
-    },
-    define: {
-      __DEV__: JSON.stringify(!useBuild)
-    }
-  };
-});