naver · cjw783 · May 16, 2025 · Apr 22, 2025 · Apr 22, 2025 · Apr 23, 2025
diff --git a/core-packages-link.js b/core-packages-link.js
@@ -0,0 +1,38 @@
+/* eslint-disable */
+
+/**
+ * 프레임워크 컴포넌트를 디버깅할 때 코어 바닐라 로직을 수정하면서 확인할 필요가 있을 때,
+ * 이 스크립트를 이용하면 바닐라 로직 수정사항이 프레임워크 컴포넌트 로컬 데모환경에도 반영된다.
+ * 
+ * 인자로 프레임워크 컴포넌트 패키지의 루트 디렉토리를 제공하면 된다.
+ *
+ * 사용 예시: node core-package-link.js react-flicking
+ */
+
+const { execSync } = require("child_process");
+const path = require("path");
+const fs = require("fs");
+
+const args = process.argv.slice(2);
+const targetDir = args[0];
+
+if (!targetDir) {
+  console.error("❌ 디렉토리명을 인자로 입력하세요.");
+  process.exit(1);
+}
+
+const fullPath = path.resolve(process.cwd(), 'packages', targetDir);
+if (!fs.existsSync(fullPath)) {
+  console.error(`❌ 디렉토리 없음: ${fullPath}`);
+  process.exit(1);
+}
+
+function run(cmd, cwd = process.cwd()) {
+  console.log(`\n▶️ Running: ${cmd} (in ${cwd})`);
+  execSync(cmd, { stdio: "inherit", cwd });
+}
+
+run("npm run build");
+run("npm link");
+run(`npm link '@egjs/flicking'`, fullPath);
+run("npm run build", fullPath);
diff --git a/debug/example/index.html b/debug/example/index.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Flicking Basic Demo</title>
+    <link rel="stylesheet" href="../../dist/flicking.css" />
+    <style>
+      .flicking-viewport {
+        width: 500px;
+        height: 300px;
+        margin: 0 auto;
+      }
+      .panel {
+        width: 200px;
+        height: 300px;
+        margin-right: 10px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 24px;
+        color: white;
+      }
+      .navigation {
+        text-align: center;
+        margin-top: 20px;
+      }
+      .navigation button {
+        margin: 0 5px;
+        padding: 5px 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flicking-viewport">
+      <div class="flicking-camera">
+        <div class="panel" style="background-color: #f44336">Panel 1</div>
+        <div class="panel" style="background-color: #2196f3">Panel 2</div>
+        <div class="panel" style="background-color: #4caf50">Panel 3</div>
+        <div class="panel" style="background-color: #ffc107">Panel 4</div>
+        <div class="panel" style="background-color: #9c27b0">Panel 5</div>
+      </div>
+    </div>
+    <div class="navigation">
+      <button id="prev">Previous</button>
+      <button id="next">Next</button>
+    </div>
+
+    <script src="../../dist/flicking.pkgd.js"></script>
+    <script>
+      document.addEventListener("DOMContentLoaded", () => {
+        const flicking = new Flicking(".flicking-viewport", {
+          circular: false,
+          moveType: "snap",
+          align: "center",
+          defaultIndex: 0,
+        });
+
+        // Navigation buttons
+        const prevButton = document.getElementById("prev");
+        const nextButton = document.getElementById("next");
+
+        prevButton.addEventListener("click", () => {
+          flicking.prev();
+        });
+
+        nextButton.addEventListener("click", () => {
+          flicking.next();
+        });
+
+        // Update button states based on current index
+        flicking.on("moveEnd", () => {
+          prevButton.disabled = flicking.index === 0;
+          nextButton.disabled = flicking.index === flicking.panels.length - 1;
+        });
+
+        // Initial button state
+        prevButton.disabled = true;
+      });
+    </script>
+  </body>
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/react-flicking/src/demo/App.tsx b/packages/react-flicking/src/demo/App.tsx
@@ -1,10 +1,5 @@
-
 import React, { Component } from "react";
-import {
-  BrowserRouter as Router,
-  Routes,
-  Route
-} from "react-router-dom";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import "./css/common.css";
 import "./css/features.css";
 import "./css/highlight.css";
@@ -31,7 +26,7 @@ export default class App extends Component<{}> {
   public render() {
     return (
       <Router>
-        <Header/>
+        <Header />
         <Routes>
           <Route path="/infinite" element={<InfiniteFlicking />} />
           <Route path="/free-scroll" element={<FreeScroll />} />
@@ -48,7 +43,8 @@ export default class App extends Component<{}> {
           <Route path="/prop" element={<PropChange />} />
           <Route path="/cross" element={<CrossFlicking />} />
         </Routes>
-      </Router>);
+      </Router>
+    );
   }
   public componentDidMount() {
     hljs.initHighlighting();

diff --git a/packages/react-flicking/src/demo/DebugPage.css b/packages/react-flicking/src/demo/DebugPage.css
@@ -0,0 +1,21 @@
+.flicking-viewport {
+  background-color: aliceblue;
+}
+
+.item-list {
+  width: 100%;
+}
+
+.item {
+  height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 5px;
+  background-color: skyblue;
+}
+
+.dummy-container {
+  background-color: green;
+  height: 500px;
+}
diff --git a/packages/react-flicking/src/demo/DebugPage.tsx b/packages/react-flicking/src/demo/DebugPage.tsx
@@ -0,0 +1,98 @@
+import Flicking from "../react-flicking";
+
+import "@egjs/flicking/dist/flicking.css";
+import './DebugPage.css';
+import { useRef } from "react";
+
+
+// 연관 이슈 페이지
+// https://oss.navercorp.com/egjs/egjs-user-voice/issues/23
+// 이후에 AI에게 데모 페이지 구성의 퓨샷 예시로 제공하기.
+// (이슈 환경 페이지의 이미지도 같이 제공하기)
+// (위 이슈 페이지의 데모 환경 페이지를 극도로 단순화시킨 페이지라고 알려주고 데모 환경은 이런식으로 단순화시켜 표현하라고 지침)
+// - 특징
+//   - 바닐라 플리킹 css는 직접 임포트
+//   - 리액트 플리킹 컴포넌트는 로컬에서 임포트
+//   - 최대한 단순화한 페이지 레이아웃
+const DebugPage: React.FC = () => {
+  const flickingRef = useRef<Flicking>(null);
+  const onClickPrev = () => {
+    flickingRef.current?.prev();
+  }
+  const onClickNext = () => {
+    flickingRef.current?.next();
+  }
+
+  return (
+    <div className="debug-page">
+      <h2>Basic Flicking Demo</h2>
+      <Flicking
+        ref={flickingRef}
+        className="flicking"
+        circular={false}
+        moveType="strict"
+        renderOnlyVisible={true}
+        autoResize={true}
+        bounce={[10,10]}
+        duration={100}
+        optimizeSizeUpdate={true}
+      >
+        <div className="item-list">
+          <div className="item">1</div>
+          <div className="item">2</div>
+          <div className="item">3</div>
+          <div className="item">4</div>
+          <div className="item">5</div>
+        </div>
+        <div className="item-list">
+          <div className="item">6</div>
+          <div className="item">7</div>
+          <div className="item">8</div>
+          <div className="item">9</div>
+          <div className="item">10</div>
+        </div>
+        <div className="item-list">
+          <div className="item">11</div>
+          <div className="item">12</div>
+          <div className="item">13</div>
+          <div className="item">14</div>
+          <div className="item">15</div>
+        </div>
+        <div className="item-list">
+          <div className="item">16</div>
+          <div className="item">17</div>
+          <div className="item">18</div>
+          <div className="item">19</div>
+          <div className="item">20</div>
+        </div>
+        <div className="item-list">
+          <div className="item">21</div>
+          <div className="item">22</div>
+          <div className="item">23</div>
+          <div className="item">24</div>
+          <div className="item">25</div>
+        </div>
+        <div className="item-list">
+          <div className="item">26</div>
+          <div className="item">27</div>
+          <div className="item">28</div>
+          <div className="item">29</div>
+          <div className="item">30</div>
+        </div>
+        <div className="item-list">
+          <div className="item">31</div>
+          <div className="item">32</div>
+        </div>
+      </Flicking>
+      <div style={{display: 'flex', justifyContent: 'center' }}>
+        <button onClick={onClickPrev}>Prev</button>
+        <button onClick={onClickNext}>Next</button>
+      </div>
+      <div className="dummy-container">
+      </div>
+    </div>
+
+  );
+};
+
+export default DebugPage;
diff --git a/packages/react-flicking/src/index.tsx b/packages/react-flicking/src/index.tsx
@@ -2,13 +2,15 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import App from "./demo/App";
 import * as serviceWorker from "./demo/serviceWorker";
+// import DebugPage from "./demo/DebugPage";
 
 const container = document.getElementById("root");
 const root = createRoot(container as HTMLElement);
 
 root.render(
   <StrictMode>
     <App />
+    {/* <DebugPage /> */}
   </StrictMode>
 );