@egjs/vue3-flicking 4.16.0-beta.1 → 4.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@egjs/vue3-flicking",
-  "version": "4.16.0-beta.1",
+  "version": "4.16.0",
   "description": "Everyday 30 million people experience. It's reliable, flexible and extendable carousel.",
   "main": "dist/flicking.cjs.js",
   "module": "dist/flicking.esm.js",
@@ -26,7 +26,7 @@
     "@egjs/component": "^3.0.2",
     "@egjs/list-differ": "^1.0.1",
     "vue-router": "^4.5.1",
-    "@egjs/flicking": "~4.16.0-beta.1"
+    "@egjs/flicking": "~4.16.0"
   },
   "peerDependencies": {
     "vue": "^3.0.0"
@@ -39,7 +39,7 @@
     "typescript": "4.8.4",
     "vite": "^7.2.6",
     "vue": "^3.2.22",
-    "@egjs/flicking-plugins": "~4.7.1"
+    "@egjs/flicking-plugins": "~4.8.0"
   },
   "scripts": {
     "dev": "vite --config vite.dev.config.ts",

package/dev/archive/App.vue

@@ -1,156 +0,0 @@
-<template>
-  <article class="demo-container">
-      <h1>Default Rendering</h1>
-      <Flicking>
-        <div class="panel">0</div>
-        <div class="panel">1</div>
-        <div class="panel">2</div>
-      </Flicking>
-      <h1>Bound</h1>
-      <Flicking :options="{ bound: true }">
-        <div class="panel">0</div>
-        <div class="panel">1</div>
-        <div class="panel">2</div>
-        <div class="panel">3</div>
-        <div class="panel">4</div>
-        <div class="panel">5</div>
-        <div class="panel">6</div>
-      </Flicking>
-      <h1>FreeScroll</h1>
-      <Flicking :options="{ moveType: 'freeScroll' }">
-        <div class="panel">0</div>
-        <div class="panel">1</div>
-        <div class="panel">2</div>
-      </Flicking>
-      <h1>List Rendering</h1>
-      <Flicking>
-        <Test v-for="item in list0" :key="item" />
-      </Flicking>
-      <h1>Adding panels</h1>
-      <Flicking :options="{ circular: true, renderOnlyVisible: true }">
-        <div class="panel" v-for="panel in panels" :key="panel">{{ panel }}</div>
-        <Test />
-      </Flicking>
-      <div>
-        <span class="button" @click="() => {
-          prepend();
-        }">Prepend</span>
-        <span class="button" @click="() => {
-          append();
-        }">Append</span>
-      </div>
-      <h1>Method call</h1>
-      <Flicking ref="flick" :options="{ circular: true }">
-        <div class="panel">0</div>
-        <div class="panel">1</div>
-        <div class="panel">2</div>
-        <div class="panel">3</div>
-        <div class="panel">4</div>
-        <div class="panel">5</div>
-        <div class="panel">6</div>
-        <div class="panel">7</div>
-        <div class="panel">8</div>
-      </Flicking>
-      <div>
-        <span class="button" @click="() => {
-          prev();
-        }">Prev</span>
-        <span class="button" @click="() => {
-          next();
-        }">Next</span>
-      </div>
-      <Flicking :plugins="arrow">
-        <div class="panel">0</div>
-        <div class="panel">1</div>
-        <div class="panel">2</div>
-        <div class="panel">3</div>
-        <div class="panel">4</div>
-        <template #viewport>
-          <span class="flicking-arrow-prev"></span>
-          <span class="flicking-arrow-next"></span>
-        </template>
-      </Flicking>
-      <Flicking :plugins="fade" :options="{ renderOnlyVisible: true }">
-        <div class="panel">0</div>
-        <div class="panel">1</div>
-        <div class="panel">2</div>
-        <div class="panel">3</div>
-        <div class="panel">4</div>
-      </Flicking>
-      <Flicking class="flicking flicking0" ref="vFlick" :options="{
-        panelsPerView: 5,
-        circular: true,
-        virtual: {
-          panelClass: 'panel',
-          renderPanel: (panel) => `Panel ${panel.index}`,
-          initialPanelCount: 100
-        }
-      }"></Flicking>
-      <button @click="this.vPrepend">Prepend</button>
-      <button @click="this.vAppend">Append</button>
-      <Flicking :options="{ panelsPerView: this.panelsPerView }">
-        <div class="panel">0</div>
-        <div class="panel">1</div>
-        <div class="panel">2</div>
-        <div class="panel">3</div>
-        <div class="panel">4</div>
-      </Flicking>
-      <button @click="this.changeProp">Change</button>
-  </article>
-</template>
-
-<script>
-import { Arrow, Fade } from "@dev/plugins";
-import Flicking from "@dev/vue3-flicking";
-import Test from "./components/Test.vue";
-import Test2 from "./components/Test2.vue";
-
-export default {
-  components: {
-    Flicking,
-    Test,
-    Test2
-  },
-  data() {
-    return {
-      panels: [0, 1, 2, 3, 4, 5, 6],
-      list0: [0, 1, 2],
-      arrow: [new Arrow()],
-      fade: [new Fade()],
-      panelsPerView: 5
-    };
-  },
-  methods: {
-    prepend() {
-      this.panels.splice(0, 0, this.panels[0] - 2, this.panels[0] - 1);
-    },
-    append() {
-      const lastEl = this.panels[this.panels.length - 1];
-      this.panels.push(lastEl + 1, lastEl + 2);
-    },
-    prev() {
-      this.$refs.flick.prev();
-    },
-    next() {
-      this.$refs.flick.next();
-    },
-    vPrepend() {
-      this.$refs.vFlick.virtual.prepend(100);
-    },
-    vAppend() {
-      this.$refs.vFlick.virtual.append(100);
-    },
-    changeProp() {
-      this.panelsPerView -= 1;
-    }
-  }
-};
-</script>
-
-<style>
-@import './demo-common.css';
-</style>
-
-<style scoped>
-/* App.vue 전용 스타일 (필요시 추가) */
-</style>

package/dev/archive/BasicDemo.vue

@@ -1,171 +0,0 @@
-<template>
-  <div class="demo-container">
-    <h2>Vue3 Composition API Flicking Demo</h2>
-    
-    <!-- 기본 Flicking -->
-    <div class="section">
-      <h3>기본 Flicking</h3>
-      <Flicking ref="flickingRef" :options="flickingOptions">
-        <div 
-          v-for="item in panels" 
-          :key="item.id" 
-          class="panel"
-          :style="{ backgroundColor: item.color }"
-        >
-          {{ item.text }}
-        </div>
-      </Flicking>
-    </div>
-
-    <!-- 컨트롤 버튼들 -->
-    <div class="controls">
-      <button @click="addPanel" class="btn">패널 추가</button>
-      <button @click="removePanel" class="btn">패널 제거</button>
-      <button @click="prev" class="btn">이전</button>
-      <button @click="next" class="btn">다음</button>
-      <button @click="moveTo(2)" class="btn">3번 패널로 이동</button>
-    </div>
-
-    <!-- 현재 상태 표시 -->
-    <div class="status">
-      <p>총 패널 수: {{ panelCount }}</p>
-      <p>현재 인덱스: {{ currentIndex }}</p>
-    </div>
-
-    <!-- 동적 옵션 변경 -->
-    <div class="section">
-      <h3>옵션 변경</h3>
-      <label>
-        <input 
-          type="checkbox" 
-          v-model="isCircular" 
-          @change="updateOptions"
-        />
-        circular
-      </label>
-      <label>
-        <input 
-          type="checkbox" 
-          v-model="isBound" 
-          @change="updateOptions"
-        />
-        bound
-      </label>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import Flicking from "@dev/vue3-flicking";
-import { computed, onMounted, reactive, ref, watch } from "vue";
-
-// Flicking 인스턴스 참조
-const flickingRef = ref(null);
-
-// 반응형 데이터
-const panels = reactive([
-  { id: 1, text: "패널 1", color: "#ff6b6b" },
-  { id: 2, text: "패널 2", color: "#4ecdc4" },
-  { id: 3, text: "패널 3", color: "#45b7d1" },
-  { id: 4, text: "패널 4", color: "#96ceb4" },
-  { id: 5, text: "패널 5", color: "#feca57" }
-]);
-
-// Flicking 옵션
-const flickingOptions = reactive({
-  circular: false,
-  bound: false,
-  duration: 500,
-  defaultIndex: 0
-});
-
-// 상태 변수들
-const isCircular = ref(false);
-const isBound = ref(false);
-const currentIndex = ref(0);
-
-// 계산된 속성
-const panelCount = computed(() => panels.length);
-
-// 메서드들
-const addPanel = () => {
-  const newId = Math.max(...panels.map(p => p.id)) + 1;
-  const colors = ["#ff6b6b", "#4ecdc4", "#45b7d1", "#96ceb4", "#feca57", "#ff9ff3", "#54a0ff"];
-  const randomColor = colors[Math.floor(Math.random() * colors.length)];
-
-  panels.push({
-    id: newId,
-    text: `패널 ${newId}`,
-    color: randomColor
-  });
-};
-
-const removePanel = () => {
-  if (panels.length > 1) {
-    panels.pop();
-  }
-};
-
-const prev = () => {
-  if (flickingRef.value) {
-    flickingRef.value.prev();
-  }
-};
-
-const next = () => {
-  if (flickingRef.value) {
-    flickingRef.value.next();
-  }
-};
-
-const moveTo = index => {
-  if (flickingRef.value) {
-    flickingRef.value.moveTo(index);
-  }
-};
-
-const updateOptions = () => {
-  flickingOptions.circular = isCircular.value;
-  flickingOptions.bound = isBound.value;
-};
-
-// 이벤트 리스너
-const onChanged = e => {
-  currentIndex.value = flickingRef.value.index;
-};
-
-// 라이프사이클 훅
-onMounted(() => {
-  if (flickingRef.value) {
-    // 이벤트 리스너 등록
-    flickingRef.value.on("changed", onChanged);
-  }
-});
-
-// 감시자
-watch(
-  panels,
-  newPanels => {
-    console.log("패널이 변경되었습니다:", newPanels.length);
-  },
-  { deep: true }
-);
-</script>
-
-<style>
-@import './demo-common.css';
-</style>
-
-<style scoped>
-/* BasicDemo 전용 스타일 */
-.demo-container {
-  max-width: 800px;
-}
-
-.panel {
-  width: 200px;
-  height: 150px;
-  margin-right: 10px;
-  font-size: 18px;
-}
-</style>

package/dev/archive/MainApp.vue

@@ -1,73 +0,0 @@
-<template>
-  <div class="main-app">
-    <header class="header">
-      <h1>Vue3 Flicking Demo</h1>
-      <nav class="navigation">
-        <router-link to="/" class="nav-link">Home</router-link>
-        <router-link to="/basic" class="nav-link">BasicDemo</router-link>
-        <router-link to="/reactive" class="nav-link">ReactiveDemo</router-link>
-      </nav>
-    </header>
-    
-    <main class="content">
-      <router-view></router-view>
-    </main>
-  </div>
-</template>
-
-<script setup>
-// Composition API setup
-</script>
-
-<style scoped>
-.main-app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  color: #2c3e50;
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 20px;
-}
-
-.header {
-  text-align: center;
-  margin-bottom: 40px;
-  padding-bottom: 20px;
-  border-bottom: 2px solid #eee;
-}
-
-.header h1 {
-  margin-bottom: 20px;
-  color: #333;
-}
-
-.navigation {
-  display: flex;
-  justify-content: center;
-  gap: 20px;
-  flex-wrap: wrap;
-}
-
-.nav-link {
-  padding: 10px 20px;
-  background-color: #007bff;
-  color: white;
-  text-decoration: none;
-  border-radius: 5px;
-  transition: background-color 0.3s;
-  font-weight: bold;
-}
-
-.nav-link:hover {
-  background-color: #0056b3;
-}
-
-.nav-link.router-link-active {
-  background-color: #28a745;
-}
-
-.content {
-  min-height: 500px;
-}
-</style> 

package/dev/archive/ReactiveDemo.vue

@@ -1,120 +0,0 @@
-<template>
-  <div class="demo-container">
-    <h2>Reactive API - Pagination Demo</h2>
-    
-    <div class="section">
-      <h3>Pagination with Reactive API</h3>
-      <Flicking ref="flickingRef" :options="flickingOptions">
-        <div 
-          v-for="item in panels" 
-          :key="item.id" 
-          class="panel"
-          :style="{ backgroundColor: item.color }"
-        >
-          {{ item.text }}
-        </div>
-      </Flicking>
-    </div>
-    
-    <div class="progress-container">
-      <div class="progress-bar" :style="{ width: progress + '%' }"></div>
-      <div class="progress-text">Progress: {{ progress.toFixed(1) }}%</div>
-    </div>
-
-    <div class="controls">
-      <button @click="handlePrev" :disabled="isReachStart" class="btn">
-        이전
-      </button>
-      <button @click="handleNext" :disabled="isReachEnd" class="btn">
-        다음
-      </button>
-    </div>
-
-    <div class="pagination">
-      <button 
-        v-for="page in totalPanelCount" 
-        :key="page"
-        :class="{ active: currentPanelIndex + 1 === page }"
-        @click="moveTo(page - 1)"
-        class="pagination-btn"
-      >
-        {{ page }}
-      </button>
-    </div>
-
-    <div class="status">
-      <p>총 패널 수: {{ totalPanelCount }}</p>
-      <p>현재 인덱스: {{ currentPanelIndex }}</p>
-      <p>진행률: {{ progress.toFixed(1) }}%</p>
-      <p>첫 번째 패널: {{ isReachStart ? '도달' : '미도달' }}</p>
-      <p>마지막 패널: {{ isReachEnd ? '도달' : '미도달' }}</p>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import Flicking, { useFlickingReactiveAPI } from "@dev/vue3-flicking";
-import { onMounted, reactive, ref } from "vue";
-
-// Flicking 인스턴스 참조
-const flickingRef = ref(null);
-
-// 반응형 데이터
-const panels = reactive([
-  { id: 1, text: "패널 1", color: "#ff6b6b" },
-  { id: 2, text: "패널 2", color: "#4ecdc4" },
-  { id: 3, text: "패널 3", color: "#45b7d1" },
-  { id: 4, text: "패널 4", color: "#96ceb4" },
-  { id: 5, text: "패널 5", color: "#feca57" }
-]);
-
-// Flicking 옵션
-const flickingOptions = reactive({
-  circular: false,
-  bound: false,
-  duration: 500,
-  defaultIndex: 0
-});
-
-// Reactive API 훅 사용
-const { currentPanelIndex, totalPanelCount, isReachStart, isReachEnd, progress, moveTo } =
-  useFlickingReactiveAPI(flickingRef);
-
-// 메서드들
-const handlePrev = () => {
-  if (!isReachStart.value) {
-    moveTo(currentPanelIndex.value - 1);
-  }
-};
-
-const handleNext = () => {
-  if (!isReachEnd.value) {
-    moveTo(currentPanelIndex.value + 1);
-  }
-};
-
-// 라이프사이클 훅
-onMounted(() => {
-  if (flickingRef.value) {
-    console.log("Flicking 인스턴스가 마운트되었습니다");
-  }
-});
-</script>
-
-<style>
-@import './demo-common.css';
-</style>
-
-<style scoped>
-/* ReactiveDemo 전용 스타일 */
-.demo-container {
-  max-width: 800px;
-}
-
-.panel {
-  width: 200px;
-  height: 150px;
-  margin-right: 10px;
-  font-size: 18px;
-}
-</style>

package/dev/archive/components/Test.vue

@@ -1,3 +0,0 @@
-<template>
-  <div class="panel">TEST Component</div>
-</template>

package/dev/archive/components/Test2.vue

@@ -1,3 +0,0 @@
-<template>
-  <div class="panel">TEST-2</div>
-</template>

package/dev/archive/demo-common.css

@@ -1,208 +0,0 @@
-/* 공통 데모 스타일 */
-
-/* 기본 레이아웃 */
-.demo-container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 40px 20px;
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-/* 타이포그래피 */
-h1 {
-  color: #333;
-  margin: 40px 0 20px;
-  font-size: 24px;
-  font-weight: 600;
-}
-
-h1:first-child {
-  margin-top: 0;
-}
-
-h2 {
-  color: #333;
-  text-align: center;
-  margin-bottom: 30px;
-  font-size: 28px;
-}
-
-h3 {
-  color: #666;
-  margin-bottom: 15px;
-  font-size: 20px;
-}
-
-/* 섹션 */
-.section {
-  margin-bottom: 30px;
-}
-
-/* 패널 스타일 */
-.panel {
-  width: 200px;
-  height: 200px;
-  margin-right: 20px;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 48px;
-  font-weight: bold;
-  color: white;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-}
-
-.panel:nth-child(2) {
-  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
-}
-
-.panel:nth-child(3) {
-  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
-}
-
-.panel:nth-child(4) {
-  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
-}
-
-.panel:nth-child(5) {
-  background: linear-gradient(135deg, #feca57 0%, #ff9f43 100%);
-}
-
-.panel:nth-child(6) {
-  background: linear-gradient(135deg, #fa8bff 0%, #2bd2ff 100%);
-}
-
-.panel:nth-child(7) {
-  background: linear-gradient(135deg, #ff6b6b 0%, #ffa502 100%);
-}
-
-.panel:nth-child(n + 8) {
-  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
-}
-
-/* 컨트롤 버튼 */
-.controls {
-  display: flex;
-  gap: 10px;
-  justify-content: center;
-  margin: 20px 0;
-  flex-wrap: wrap;
-}
-
-.button,
-.btn,
-button {
-  padding: 10px 20px;
-  background-color: #007bff;
-  color: white;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  font-size: 14px;
-  transition: background-color 0.3s;
-}
-
-.button:hover,
-.btn:hover:not(:disabled),
-button:hover:not(:disabled) {
-  background-color: #0056b3;
-}
-
-.button:active,
-.btn:active:not(:disabled),
-button:active:not(:disabled) {
-  transform: translateY(1px);
-}
-
-.btn:disabled,
-button:disabled {
-  background-color: #ccc;
-  cursor: not-allowed;
-}
-
-/* 상태 표시 */
-.status {
-  background-color: #f8f9fa;
-  padding: 15px;
-  border-radius: 5px;
-  margin: 20px 0;
-  text-align: center;
-}
-
-.status p {
-  margin: 5px 0;
-  color: #666;
-}
-
-/* 폼 요소 */
-label {
-  display: inline-block;
-  margin: 10px 20px 10px 0;
-  cursor: pointer;
-}
-
-input[type="checkbox"] {
-  margin-right: 5px;
-}
-
-/* 페이지네이션 */
-.pagination {
-  display: flex;
-  gap: 10px;
-  justify-content: center;
-  margin: 20px 0;
-  flex-wrap: wrap;
-}
-
-.pagination-btn {
-  padding: 10px 20px;
-  background-color: #007bff;
-  color: white;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  font-size: 14px;
-  transition: background-color 0.3s;
-}
-
-.pagination-btn:hover {
-  background-color: #0056b3;
-}
-
-.pagination-btn:active {
-  transform: translateY(1px);
-}
-
-.pagination-btn.active {
-  background-color: #28a745;
-}
-
-/* 프로그레스 바 */
-.progress-container {
-  position: relative;
-  width: 100%;
-  height: 20px;
-  background: #f0f0f0;
-  border-radius: 10px;
-  overflow: hidden;
-  margin: 20px 0;
-}
-
-.progress-bar {
-  height: 100%;
-  background: linear-gradient(90deg, #007bff, #28a745);
-  transition: width 0.3s ease;
-  border-radius: 10px;
-}
-
-.progress-text {
-  text-align: center;
-  margin-top: 10px;
-  font-size: 14px;
-  color: #666;
-  font-weight: bold;
-}

package/dev/archive/main.ts

@@ -1,15 +0,0 @@
-import { createApp } from "vue";
-import MainApp from "./MainApp.vue";
-import router from "./router";
-
-// CSS imports
-import "@dev/flicking-css";
-import "@dev/plugins-css";
-
-// @ts-expect-error - injected by vite
-const buildMode = __DEV__ ? "source" : "build";
-console.log(`🔧 Vue3 Flicking Dev - ${buildMode} 모드`);
-
-const app = createApp(MainApp);
-app.use(router);
-app.mount("#app");

package/dev/archive/router.ts

@@ -1,29 +0,0 @@
-import { createRouter, createWebHistory } from "vue-router";
-import App from "./App.vue";
-import BasicDemo from "./BasicDemo.vue";
-import ReactiveDemo from "./ReactiveDemo.vue";
-
-const routes = [
-  {
-    path: "/",
-    name: "Home",
-    component: App
-  },
-  {
-    path: "/basic",
-    name: "BasicDemo",
-    component: BasicDemo
-  },
-  {
-    path: "/reactive",
-    name: "ReactiveDemo",
-    component: ReactiveDemo
-  }
-];
-
-const router = createRouter({
-  history: createWebHistory(),
-  routes
-});
-
-export default router;

package/dev/basic-sample/App.vue

@@ -1,32 +0,0 @@
-<template>
-  <div :style="css.container">
-    <h1>Basic Sample</h1>
-    <Flicking :options="{ align: 'prev', circular: true }">
-      <div v-for="n in 5" :key="n" :style="css.panel">{{ n }}</div>
-    </Flicking>
-  </div>
-</template>
-
-<script setup lang="ts">
-import Flicking from "@dev/vue3-flicking";
-
-const css = {
-  container: {
-    maxWidth: "800px",
-    margin: "0 auto",
-    padding: "20px"
-  },
-  panel: {
-    minWidth: "200px",
-    height: "200px",
-    margin: "0 5px",
-    background: "#e0e7ff",
-    borderRadius: "8px",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    fontSize: "24px",
-    fontWeight: "bold"
-  }
-};
-</script>

package/dev/basic-sample/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>Basic Sample - Vue3 Flicking</title>
-    <style>
-      body { margin: 0; padding: 20px; font-family: sans-serif; }
-    </style>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="./main.ts"></script>
-  </body>
-</html>

package/dev/basic-sample/main.ts

@@ -1,13 +0,0 @@
-/**
- * Basic Sample - 기본 동작 확인용
- *
- * http://localhost:3002/basic-sample/
- *
- * 이 파일은 수정하지 마세요.
- * 샘플 코드는 App.vue에 작성합니다.
- */
-import { createApp } from "vue";
-import "@dev/flicking-css";
-import App from "./App.vue";
-
-createApp(App).mount("#app");

package/dev/index.html

@@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Vue3 Flicking - Dev</title>
-    <style>
-      body { margin: 0; padding: 40px; font-family: sans-serif; }
-      a { display: block; margin: 8px 0; font-size: 18px; }
-    </style>
-  </head>
-  <body>
-    <h1>Vue3 Flicking Dev</h1>
-    <a href="/basic-sample/">Basic Sample</a>
-    <a href="/plugin-check/">Plugin Check (마이그레이션 검증용)</a>
-    <a href="/scratch/">Scratch (이슈 재현)</a>
-  </body>
-</html>

package/dev/plugin-check/App.vue

@@ -1,245 +0,0 @@
-<!--
-  플러그인 마이그레이션 검증용 (임시)
-  docs 데모 추가 후 제거 예정
-
-  참고: https://naver.github.io/egjs-flicking/ko/Plugins
--->
-<template>
-  <div :style="{ maxWidth: '640px', margin: '0 auto', padding: '20px' }">
-    <h1>Plugin Check</h1>
-    <p :style="css.note">마이그레이션 검증용 — docs 데모 추가 후 제거 예정</p>
-
-    <!-- Arrow -->
-    <section :style="css.section">
-      <div :style="css.title">Arrow</div>
-      <Flicking :options="{ circular: true }" :plugins="arrowPlugins">
-        <div v-for="n in 5" :key="n" :style="css.panel">{{ n }}</div>
-        <template #viewport>
-          <span class="flicking-arrow-prev"></span>
-          <span class="flicking-arrow-next"></span>
-        </template>
-      </Flicking>
-    </section>
-
-    <!-- AutoPlay -->
-    <section :style="css.section">
-      <div :style="css.title">AutoPlay</div>
-      <Flicking :options="{ circular: true, preventDefaultOnDrag: true }" :plugins="autoPlayPlugins">
-        <div v-for="(src, i) in images.slice(0, 3)" :key="i" :style="css.pluginsPanel">
-          <img :style="css.panelImage" :src="src" />
-        </div>
-      </Flicking>
-    </section>
-
-    <!-- Pagination -->
-    <section :style="css.section">
-      <div :style="css.title">Pagination (bullet)</div>
-      <Flicking :options="{ circular: true }" :plugins="paginationPlugins">
-        <div v-for="n in 8" :key="n" :style="css.panel">{{ n }}</div>
-        <template #viewport>
-          <div class="flicking-pagination"></div>
-        </template>
-      </Flicking>
-    </section>
-
-    <!-- Fade -->
-    <section :style="css.section">
-      <div :style="css.title">Fade</div>
-      <Flicking :options="{ circular: true, preventDefaultOnDrag: true }" :plugins="fadePlugins">
-        <div v-for="(src, i) in images.slice(0, 3)" :key="i" :style="css.pluginsPanel">
-          <img :style="css.panelImage" :src="src" />
-        </div>
-      </Flicking>
-    </section>
-
-    <!-- Parallax -->
-    <section :style="css.section">
-      <div :style="css.title">Parallax</div>
-      <Flicking :options="{ circular: true, preventDefaultOnDrag: true, gap: 2 }" :plugins="parallaxPlugins">
-        <div v-for="(src, i) in images.slice(0, 3)" :key="i" :style="{ ...css.pluginsPanel, width: '100%' }">
-          <img :style="{ ...css.panelImage, width: '150%', maxWidth: 'none' }" :src="src" />
-        </div>
-      </Flicking>
-    </section>
-
-    <!-- Perspective -->
-    <section :style="css.section">
-      <div :style="css.title">Perspective</div>
-      <Flicking :options="{ circular: true }" :plugins="perspectivePlugins">
-        <div v-for="n in 5" :key="n" :style="css.panel">{{ n }}</div>
-      </Flicking>
-    </section>
-
-    <!-- Sync (camera) -->
-    <section :style="css.section">
-      <div :style="css.title">Sync (camera)</div>
-      <Flicking ref="syncCam0" :options="{ align: 'prev', bound: true, bounce: 30 }" :plugins="syncCameraPlugins">
-        <span v-for="item in fruits" :key="item" :style="css.syncItem">{{ item }}</span>
-      </Flicking>
-      <div style="margin-top: 4px;">
-        <Flicking ref="syncCam1" :options="{ align: 'prev', bound: true, bounce: 30 }">
-          <span v-for="item in foods" :key="item" :style="css.syncItem">{{ item }}</span>
-        </Flicking>
-      </div>
-      <div style="margin-top: 4px;">
-        <Flicking ref="syncCam2" :options="{ align: 'prev', bound: true, bounce: 30 }">
-          <span v-for="item in drinks" :key="item" :style="css.syncItem">{{ item }}</span>
-        </Flicking>
-      </div>
-    </section>
-
-    <!-- Sync (index + thumbnail) -->
-    <section :style="css.section">
-      <div :style="css.title">Sync (index + thumbnail)</div>
-      <Flicking ref="syncMain" :options="{ bounce: 30, preventDefaultOnDrag: true }" :plugins="syncIndexPlugins">
-        <div v-for="(src, i) in images" :key="i" :style="css.pluginsPanel">
-          <img :style="css.panelImage" :src="src" />
-        </div>
-      </Flicking>
-      <div style="margin-top: 8px;">
-        <Flicking ref="syncThumb" :options="{ moveType: 'freeScroll', bound: true, bounce: 30, preventDefaultOnDrag: true }">
-          <div v-for="(src, i) in images" :key="i" :style="css.thumbPanel">
-            <img :style="css.thumbImage" :src="src" />
-          </div>
-        </Flicking>
-      </div>
-    </section>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { Arrow, AutoPlay, Fade, Pagination, Parallax, Perspective, Sync } from "@dev/plugins";
-import Flicking from "@dev/vue3-flicking";
-import { onMounted, ref } from "vue";
-
-const css = {
-  section: { marginBottom: "48px" },
-  title: {
-    fontSize: "18px",
-    fontWeight: "bold",
-    marginBottom: "12px",
-    borderBottom: "2px solid #333",
-    paddingBottom: "4px"
-  },
-  note: { fontSize: "12px", color: "#666", marginTop: "8px" },
-  panel: {
-    minWidth: "200px",
-    height: "160px",
-    margin: "0 5px",
-    background: "#e0e7ff",
-    borderRadius: "8px",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    fontSize: "24px",
-    fontWeight: "bold",
-    overflow: "hidden"
-  },
-  pluginsPanel: { position: "relative" as const, width: "100%", height: "200px", overflow: "hidden" },
-  panelImage: { width: "100%", height: "100%", objectFit: "cover" as const },
-  thumbPanel: {
-    width: "100px",
-    height: "70px",
-    margin: "0 2px",
-    overflow: "hidden",
-    opacity: "0.5",
-    transition: "opacity 0.3s"
-  },
-  thumbImage: { width: "100%", height: "100%", objectFit: "cover" as const },
-  syncItem: {
-    display: "inline-block",
-    padding: "8px 16px",
-    margin: "0 4px",
-    background: "#f5f5f5",
-    borderRadius: "4px",
-    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"
-];
-
-const fruits = [
-  "🍎 Apple",
-  "🍉 Watermelon",
-  "🥝 Kiwi",
-  "🍊 Orange",
-  "🍇 Grape",
-  "🍓 Strawberry",
-  "🍑 Peach",
-  "🍋 Lemon",
-  "🫐 Blueberry",
-  "🍌 Banana"
-];
-const foods = [
-  "🍔 Hamburger",
-  "🍕 Pizza",
-  "🍞 Bread",
-  "🌮 Taco",
-  "🍜 Ramen",
-  "🍣 Sushi",
-  "🥗 Salad",
-  "🍝 Pasta",
-  "🥘 Stew",
-  "🍱 Bento"
-];
-const drinks = [
-  "🥛 Milk",
-  "☕ Coffee",
-  "🍵 Green tea",
-  "🧃 Juice",
-  "🥤 Soda",
-  "🍺 Beer",
-  "🧋 Bubble tea",
-  "🍷 Wine",
-  "🥥 Coconut",
-  "🍶 Sake"
-];
-
-// Simple plugins (no ref dependency)
-const arrowPlugins = [new Arrow()];
-const autoPlayPlugins = [new AutoPlay()];
-const paginationPlugins = [new Pagination({ type: "bullet" })];
-const fadePlugins = [new Fade()];
-const parallaxPlugins = [new Parallax("img")];
-const perspectivePlugins = [new Perspective({ rotate: 1, scale: 2, perspective: 600 })];
-
-// Sync plugins (need refs)
-const syncCam0 = ref<InstanceType<typeof Flicking> | null>(null);
-const syncCam1 = ref<InstanceType<typeof Flicking> | null>(null);
-const syncCam2 = ref<InstanceType<typeof Flicking> | null>(null);
-const syncCameraPlugins = ref<Sync[]>([]);
-
-const syncMain = ref<InstanceType<typeof Flicking> | null>(null);
-const syncThumb = ref<InstanceType<typeof Flicking> | null>(null);
-const syncIndexPlugins = ref<Sync[]>([]);
-
-onMounted(() => {
-  syncCameraPlugins.value = [
-    new Sync({
-      type: "camera",
-      synchronizedFlickingOptions: [
-        { flicking: syncCam0.value!, isClickable: false },
-        { flicking: syncCam1.value!, isClickable: false },
-        { flicking: syncCam2.value!, isClickable: false }
-      ]
-    })
-  ];
-
-  syncIndexPlugins.value = [
-    new Sync({
-      type: "index",
-      synchronizedFlickingOptions: [
-        { flicking: syncMain.value!, isSlidable: true },
-        { flicking: syncThumb.value!, isClickable: true, activeClass: "active" }
-      ]
-    })
-  ];
-});
-</script>

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 - Vue3 Flicking</title>
-    <style>
-      body { margin: 0; padding: 20px; font-family: sans-serif; }
-    </style>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="./main.ts"></script>
-  </body>
-</html>

package/dev/plugin-check/main.ts

@@ -1,13 +0,0 @@
-/**
- * Plugin Check - 플러그인 마이그레이션 검증용 (임시)
- *
- * http://localhost:3002/plugin-check/
- *
- * 이 파일은 수정하지 마세요.
- */
-import { createApp } from "vue";
-import "@dev/flicking-css";
-import "@dev/plugins-css";
-import App from "./App.vue";
-
-createApp(App).mount("#app");

package/dev/scratch/App.vue

@@ -1,32 +0,0 @@
-<!--
-  이슈 재현 템플릿
-
-  이 파일을 덮어써서 이슈를 재현하세요.
--->
-<template>
-  <div>
-    <h2>Scratch</h2>
-    <Flicking :options="{ align: 'prev', circular: true }">
-      <div v-for="n in 3" :key="n" :style="css.panel">{{ n }}</div>
-    </Flicking>
-  </div>
-</template>
-
-<script setup lang="ts">
-import Flicking from "@dev/vue3-flicking";
-
-const css = {
-  panel: {
-    minWidth: "200px",
-    height: "200px",
-    margin: "0 5px",
-    background: "#f0f0f0",
-    borderRadius: "8px",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    fontSize: "24px",
-    fontWeight: "bold"
-  }
-};
-</script>

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 - Vue3 Flicking</title>
-    <style>
-      body { margin: 0; padding: 20px; font-family: sans-serif; }
-    </style>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="./main.ts"></script>
-  </body>
-</html>

package/dev/scratch/main.ts

@@ -1,13 +0,0 @@
-/**
- * Scratch - 이슈 재현용 독립 페이지
- *
- * http://localhost:3002/scratch/
- *
- * 이 파일은 수정하지 마세요.
- * 재현 코드는 App.vue에 작성합니다.
- */
-import { createApp } from "vue";
-import "@dev/flicking-css";
-import App from "./App.vue";
-
-createApp(App).mount("#app");

package/dev/vite-env.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="vite/client" />
-
-declare const __DEV__: boolean;
-
-declare module "*.vue" {
-  import type { DefineComponent } from "vue";
-  const component: DefineComponent<{}, {}, any>;
-  export default component;
-}

package/vite.config.ts

@@ -1,34 +0,0 @@
-import { createViteConfig } from "../../config/vite-build-helper";
-// @ts-expect-error: resolveJsonModule issue in build environment
-import pkg from "./package.json";
-
-const name = "VueFlicking";
-const external = {
-  vue: "Vue",
-  "vue-class-component": "VueClassComponent",
-  "@egjs/flicking": "Flicking",
-  "@egjs/list-differ": "eg.ListDiffer",
-  "@egjs/axes": "eg.Axes",
-  "@egjs/component": "eg.Component"
-};
-
-// Determine build target based on environment variable
-// usage: VITE_BUILD_FORMAT=cjs vite build
-const buildFormat = process.env.VITE_BUILD_FORMAT || "esm";
-
-let input = "src/index.ts";
-let formats: any[] = ["es"];
-
-if (buildFormat === "cjs") {
-  input = "src/index.umd.ts";
-  formats = ["cjs"];
-}
-
-export default createViteConfig({
-  input,
-  name,
-  packageJson: pkg,
-  external,
-  formats,
-  output: "dist/flicking"
-});

package/vite.dev.config.ts

@@ -1,49 +0,0 @@
-import path from "node:path";
-import vue from "@vitejs/plugin-vue";
-import { defineConfig } from "vite";
-
-export default defineConfig(({ mode }) => {
-  const useBuild = mode === "production";
-
-  return {
-    plugins: [vue()],
-    root: path.resolve(__dirname, "dev"),
-    server: {
-      port: 3002,
-      open: true,
-      fs: {
-        allow: [".."]
-      }
-    },
-    resolve: {
-      alias: useBuild
-        ? {
-            // 빌드 검증 모드 - 빌드 결과물 사용
-            "@dev/flicking": path.resolve(__dirname, "../flicking/dist/flicking.esm.js"),
-            "@dev/vue3-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/vue3-flicking": path.resolve(__dirname, "src/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", ".js", ".vue", ".json"]
-    },
-    optimizeDeps: {
-      include: ["vue", "@egjs/axes", "@egjs/component", "@egjs/imready", "@egjs/list-differ"]
-    },
-    define: {
-      __DEV__: JSON.stringify(!useBuild)
-    }
-  };
-});