@egjs/flicking 4.14.2-beta.2 → 4.16.0-beta.0

package/src/event/types.ts

@@ -0,0 +1,355 @@
+/* eslint-disable @typescript-eslint/ban-types */
+/*
+ * Copyright (c) 2015 NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+import { OnChange, OnFinish, OnHold, OnRelease } from "@egjs/axes";
+import { ComponentEvent } from "@egjs/component";
+import { DIRECTION } from "../constants/values";
+import Panel from "../core/panel/Panel";
+import Flicking from "../Flicking";
+import { ValueOf } from "../types/internal";
+
+import { EVENTS } from "./names";
+
+/**
+ * Events of the Flicking component.
+ * @privateRemarks
+ * This interface is crucial as it maps event names to their actual event interfaces.
+ * It is also functionally important because it is registered as the event generic parameter of Component, which is Flicking's parent class.
+ */
+export interface FlickingEvents {
+  /**
+   * Event that fires when Flicking's {@link Flicking.init | init()} is called.
+   * @remarks
+   * See {@link ReadyEvent} for more details.
+   */
+  [EVENTS.READY]: ReadyEvent;
+  /**
+   * Event that fires when Flicking's {@link Flicking.resize} is called, before updating the sizes of panels and viewport.
+   * @remarks
+   * See {@link BeforeResizeEvent} for more details.
+   */
+  [EVENTS.BEFORE_RESIZE]: BeforeResizeEvent;
+  /**
+   * Event that fires when Flicking's {@link Flicking.resize} is called, after updating the sizes of panels and viewport.
+   * @remarks
+   * See {@link AfterResizeEvent} for more details.
+   */
+  [EVENTS.AFTER_RESIZE]: AfterResizeEvent;
+  /**
+   * Event that fires when user started dragging.
+   * @remarks
+   * See {@link HoldStartEvent} for more details.
+   */
+  [EVENTS.HOLD_START]: HoldStartEvent;
+  /**
+   * Event that fires when user stopped dragging.
+   * @remarks
+   * See {@link HoldEndEvent} for more details.
+   */
+  [EVENTS.HOLD_END]: HoldEndEvent;
+  /**
+   * Event that fires once before first {@link Flicking.event:move | move} event.
+   * @remarks
+   * See {@link MoveStartEvent} for more details.
+   */
+  [EVENTS.MOVE_START]: MoveStartEvent;
+  /**
+   * Event that fires for every movement.
+   * @remarks
+   * See {@link MoveEvent} for more details.
+   */
+  [EVENTS.MOVE]: MoveEvent;
+  /**
+   * Event that fires when the movement is finished by user input release or animation end.
+   * @remarks
+   * See {@link MoveEndEvent} for more details.
+   */
+  [EVENTS.MOVE_END]: MoveEndEvent;
+  /**
+   * Event that fires BEFORE the active panel changes.
+   * @remarks
+   * See {@link WillChangeEvent} for more details.
+   */
+  [EVENTS.WILL_CHANGE]: WillChangeEvent;
+  /**
+   * Event that fires AFTER the active panel change completes.
+   * @remarks
+   * See {@link ChangedEvent} for more details.
+   */
+  [EVENTS.CHANGED]: ChangedEvent;
+  /**
+   * Event fires BEFORE returning to the current panel when drag doesn't reach threshold.
+   * @remarks
+   * See {@link WillRestoreEvent} for more details.
+   */
+  [EVENTS.WILL_RESTORE]: WillRestoreEvent;
+  /**
+   * Event that fires AFTER Flicking has returned to {@link Flicking.currentPanel | currentPanel}.
+   * @remarks
+   * See {@link RestoredEvent} for more details.
+   */
+  [EVENTS.RESTORED]: RestoredEvent;
+  /**
+   * Event that fires when panel is statically click / touched.
+   * @remarks
+   * See {@link SelectEvent} for more details.
+   */
+  [EVENTS.SELECT]: SelectEvent;
+  /**
+   * Event that fires when an empty panel area is visible at the edge of viewport.
+   * @remarks
+   * See {@link NeedPanelEvent} for more details.
+   */
+  [EVENTS.NEED_PANEL]: NeedPanelEvent;
+  /**
+   * Event that fires when visible panel inside the viewport changes.
+   * @remarks
+   * See {@link VisibleChangeEvent} for more details.
+   */
+  [EVENTS.VISIBLE_CHANGE]: VisibleChangeEvent;
+  /**
+   * Event that fires when camera reaches the maximum/minimum range.
+   * @remarks
+   * See {@link ReachEdgeEvent} for more details.
+   */
+  [EVENTS.REACH_EDGE]: ReachEdgeEvent;
+  /**
+   * Event that fires when a panel is added or removed.
+   * @since 4.1.0
+   * @remarks
+   * See {@link PanelChangeEvent} for more details.
+   */
+  [EVENTS.PANEL_CHANGE]: PanelChangeEvent;
+}
+
+/**
+ * Event that fires when Flicking's {@link Flicking.init | init()} is called
+ */
+export type ReadyEvent<T extends Flicking = Flicking> = ComponentEvent<{}, (typeof EVENTS)["READY"], T>;
+
+/**
+ * Event that fires when Flicking's {@link Flicking.resize} is called, before updating the sizes of panels and viewport.
+ * @remarks
+ * You can update the sizes of panels and viewport with this event, and it'll be applied after {@link Flicking.resize} is finished.
+ */
+export interface BeforeResizeEvent<T extends Flicking = Flicking>
+  extends ComponentEvent<{}, (typeof EVENTS)["BEFORE_RESIZE"], T> {
+  /** Previous width of the viewport */
+  width: number;
+  /** Previous height of the viewport */
+  height: number;
+  /** The viewport element */
+  element: HTMLElement;
+}
+
+/**
+ * Event that fires when Flicking's {@link Flicking.resize} is called, after updating the sizes of panels and viewport.
+ */
+export interface AfterResizeEvent<T extends Flicking = Flicking>
+  extends ComponentEvent<{}, (typeof EVENTS)["AFTER_RESIZE"], T> {
+  /** New width of the viewport */
+  width: number;
+  /** New height of the viewport */
+  height: number;
+  /** Previous size of the viewport */
+  prev: {
+    /** Previous width of the viewport */
+    width: number;
+    /** Previous height of the viewport */
+    height: number;
+  };
+  /** A Boolean value indicating whether the width/height of the viewport element is changed */
+  sizeChanged: boolean;
+  /** The viewport element */
+  element: HTMLElement;
+}
+
+/**
+ * Event that fires when user started dragging.
+ */
+export interface HoldStartEvent<T extends Flicking = Flicking>
+  extends ComponentEvent<{}, (typeof EVENTS)["HOLD_START"], T> {
+  /** {@link https://naver.github.io/egjs-axes/docs/api/Axes#event-hold | hold} event of {@link https://naver.github.io/egjs-axes/ | Axes} */
+  axesEvent: OnHold;
+}
+
+/**
+ * Event that fires when user stopped dragging.
+ */
+export interface HoldEndEvent<T extends Flicking = Flicking>
+  extends ComponentEvent<{}, (typeof EVENTS)["HOLD_END"], T> {
+  /** {@link https://naver.github.io/egjs-axes/docs/api/Axes#event-release | release} event of {@link https://naver.github.io/egjs-axes/ | Axes} */
+  axesEvent: OnRelease;
+}
+
+/**
+ * Event that fires once before first {@link Flicking.event:move | move} event
+ */
+export interface MoveStartEvent<T extends Flicking = Flicking>
+  extends ComponentEvent<{}, (typeof EVENTS)["MOVE_START"], T> {
+  /** Boolean that indicates whether the event was generated by a user action */
+  isTrusted: boolean;
+  /** Boolean that indicates whether the user is dragging the viewport element */
+  holding: boolean;
+  /** Moving direction relative to previous position of the camera */
+  direction: ValueOf<typeof DIRECTION>;
+  /** {@link https://naver.github.io/egjs-axes/docs/api/Axes#event-change | change} event of {@link https://naver.github.io/egjs-axes/ | Axes} */
+  axesEvent: OnChange;
+}
+
+/**
+ * Event that fires for every movement
+ */
+export interface MoveEvent<T extends Flicking = Flicking> extends ComponentEvent<{}, (typeof EVENTS)["MOVE"], T> {
+  /** Boolean that indicates whether the event was generated by a user action */
+  isTrusted: boolean;
+  /** Boolean that indicates whether the user is dragging the viewport element */
+  holding: boolean;
+  /** Moving direction relative to previous position of the camera */
+  direction: ValueOf<typeof DIRECTION>;
+  /** {@link https://naver.github.io/egjs-axes/docs/api/Axes#event-change | change} event of {@link https://naver.github.io/egjs-axes/ | Axes} */
+  axesEvent: OnChange;
+}
+
+/**
+ * Event that fires when the movement is finished by user input release or animation end.
+ */
+export interface MoveEndEvent<T extends Flicking = Flicking>
+  extends ComponentEvent<{}, (typeof EVENTS)["MOVE_END"], T> {
+  /** Boolean that indicates whether the event was generated by a user action */
+  isTrusted: boolean;
+  /** Moving direction relative to previous position of the camera */
+  direction: ValueOf<typeof DIRECTION>;
+  /** {@link https://naver.github.io/egjs-axes/docs/api/Axes#event-finish | finish} event of {@link https://naver.github.io/egjs-axes/ | Axes} */
+  axesEvent: OnFinish;
+}
+
+/**
+ * Event that fires BEFORE the active panel changes.
+ * @remarks
+ * Index will be changed at the {@link ChangedEvent | changed} event.
+ * It can be triggered when user finished input, or flicking start to move by method.
+ * Calling `stop()` in event will prevent index change and camera movement.
+ * @see {@link ChangedEvent} - Fired AFTER the panel change completes
+ */
+export interface WillChangeEvent<T extends Flicking = Flicking>
+  extends ComponentEvent<{}, (typeof EVENTS)["WILL_CHANGE"], T> {
+  /** New active index */
+  index: number;
+  /** New active panel */
+  panel: Panel;
+  /** Boolean that indicates whether the event was generated by a user action */
+  isTrusted: boolean;
+  /** Moving direction from the active panel to the target panel */
+  direction: ValueOf<typeof DIRECTION>;
+}
+
+/**
+ * Event that fires AFTER the active panel change completes.
+ * @remarks
+ * This event fires after the panel movement animation finishes and the index is updated.
+ * @see {@link WillChangeEvent} - Fired BEFORE the panel change starts
+ */
+export interface ChangedEvent<T extends Flicking = Flicking> extends ComponentEvent<{}, (typeof EVENTS)["CHANGED"], T> {
+  /** New index */
+  index: number;
+  /** New active panel */
+  panel: Panel;
+  /** Previous index */
+  prevIndex: number;
+  /** Previous active panel */
+  prevPanel: Panel | null;
+  /** Boolean that indicates whether the event was generated by a user action */
+  isTrusted: boolean;
+  /** Moving direction from the active panel to the target panel */
+  direction: ValueOf<typeof DIRECTION>;
+}
+
+/**
+ * Event fires BEFORE returning to the current panel when drag doesn't reach threshold.
+ * @remarks
+ * Fired when user drag amount does not reach {@link Flicking.threshold | threshold} and the camera starts returning to {@link Flicking.currentPanel | currentPanel}.
+ * @see {@link RestoredEvent} - Fired AFTER restoration completes
+ */
+export interface WillRestoreEvent<T extends Flicking = Flicking>
+  extends ComponentEvent<{}, (typeof EVENTS)["WILL_RESTORE"], T> {
+  /** Index of the panel to restore */
+  index: number;
+  /** Panel to restore */
+  panel: Panel;
+  /** Boolean that indicates whether the event was generated by a user action */
+  isTrusted: boolean;
+  /** Moving direction relative to previous position of the camera */
+  direction: ValueOf<typeof DIRECTION>;
+}
+
+/**
+ * Event that fires AFTER Flicking has returned to {@link Flicking.currentPanel | currentPanel}.
+ * @remarks
+ * Fired after the restoration animation completes and the camera has returned to the current panel.
+ * @see {@link WillRestoreEvent} - Fired BEFORE restoration starts
+ */
+export interface RestoredEvent<T extends Flicking = Flicking>
+  extends ComponentEvent<{}, (typeof EVENTS)["RESTORED"], T> {
+  /** Boolean that indicates whether the event was generated by a user action */
+  isTrusted: boolean;
+}
+
+/**
+ * Event that fires when panel is statically click / touched
+ */
+export interface SelectEvent<T extends Flicking = Flicking> extends ComponentEvent<{}, (typeof EVENTS)["SELECT"], T> {
+  /** Selected panel's index */
+  index: number;
+  /** Selected panel */
+  panel: Panel;
+  /** Direction from current camera position to the selected panel's position */
+  direction: ValueOf<typeof DIRECTION> | null;
+}
+
+/**
+ * Event that fires when an empty panel area is visible at the edge of viewport
+ * @remarks
+ * You can set its threshold with {@link Flicking.needPanelThreshold | needPanelThreshold}
+ */
+export interface NeedPanelEvent<T extends Flicking = Flicking>
+  extends ComponentEvent<{}, (typeof EVENTS)["NEED_PANEL"], T> {
+  /** Direction where new panel is needed. `DIRECTION.PREV` means panels should be {@link Flicking.prepend | prepend}ed and `DIRECTION.NEXT` means panels should be {@link Flicking.append | append}ed */
+  direction: Exclude<ValueOf<typeof DIRECTION>, null>;
+}
+
+/**
+ * Event that fires when visible panel inside the viewport changes
+ */
+export interface VisibleChangeEvent<T extends Flicking = Flicking>
+  extends ComponentEvent<{}, (typeof EVENTS)["VISIBLE_CHANGE"], T> {
+  /** Panels that added from previous visible panels */
+  added: Panel[];
+  /** Panels that removed from previous visible panels */
+  removed: Panel[];
+  /** Current visible panels */
+  visiblePanels: Panel[];
+}
+
+/**
+ * Event that fires when camera reaches the maximum/minimum range
+ */
+export interface ReachEdgeEvent<T extends Flicking = Flicking>
+  extends ComponentEvent<{}, (typeof EVENTS)["REACH_EDGE"], T> {
+  /** Direction indicates whether the camera's position is at the maximum range({@link DIRECTION | DIRECTION.NEXT}) or minimum range({@link DIRECTION | DIRECTION.PREV}) */
+  direction: ValueOf<typeof DIRECTION>;
+}
+
+/**
+ * Event that fires when a panel is added or removed
+ * @since 4.1.0
+ */
+export interface PanelChangeEvent<T extends Flicking = Flicking>
+  extends ComponentEvent<{}, (typeof EVENTS)["PANEL_CHANGE"], T> {
+  /** An array of new panels added */
+  added: Panel[];
+  /** An array of panels removed */
+  removed: Panel[];
+}

package/src/index.ts

@@ -3,22 +3,20 @@
  * egjs projects are licensed under the MIT license
  */
 import Flicking from "./Flicking";
-import type { FlickingOptions, FlickingEvents } from "./Flicking";
-import type { CrossFlickingOptions } from "./CrossFlicking";
 
 export * from "./CrossFlicking";
-
-export * from "./core";
+export * from "./CrossFlicking";
 export * from "./camera";
+export * from "./cfc";
+export * from "./constants/values";
 export * from "./control";
+export * from "./core";
+export * from "./error";
+export * from "./event";
+export * from "./Flicking";
+export * from "./reactive";
 export * from "./renderer";
-export * from "./const/external";
-export * from "./cfc";
+export * from "./types/external";
 export * from "./utils";
-export * from "./reactive";
-
-export * from "./type/event";
-export * from "./type/external";
-export type { FlickingOptions, FlickingEvents, CrossFlickingOptions };
 
 export default Flicking;

package/src/index.umd.ts

@@ -2,13 +2,19 @@
  * Copyright (c) 2015 NAVER Corp.
  * egjs projects are licensed under the MIT license
  */
-import Flicking from "./Flicking";
+
 import * as CrossFlicking from "./CrossFlicking";
-import * as Core from "./core";
 import * as Camera from "./camera";
+import * as Values from "./constants/values";
 import * as Control from "./control";
+import * as Core from "./core";
+import * as Events from "./event/names";
+import Flicking from "./Flicking";
 import * as Renderer from "./renderer";
-import * as Constants from "./const/external";
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const Constants = { ...Events, ...Values };
+
 import * as CFC from "./cfc";
 import * as FlickingReactiveAPI from "./reactive";
 import * as Utils from "./utils";

package/src/reactive/index.ts

@@ -1,9 +1,4 @@
-import {
-  adaptReactive,
-  reactive,
-  ReactiveObject,
-  ReactiveSetupAdapter
-} from "@cfcs/core";
+import { adaptReactive, ReactiveObject, ReactiveSetupAdapter, reactive } from "@cfcs/core";
 
 import Flicking from "../Flicking";
 
@@ -42,7 +37,7 @@ const getIndexProgress = (flicking: Flicking) => {
   const { min, max } = cam.range;
   const firstAnchorPoint = anchorPoints[0];
   const lastAnchorPoint = anchorPoints[length - 1];
-  const distanceLastToFirst = (max - lastAnchorPoint.position) + (firstAnchorPoint.position - min);
+  const distanceLastToFirst = max - lastAnchorPoint.position + (firstAnchorPoint.position - min);
 
   anchorPoints.some((anchorPoint, index) => {
     const anchorPosition = anchorPoint.position;
@@ -60,7 +55,7 @@ const getIndexProgress = (flicking: Flicking) => {
       } else {
         indexProgress = index + (cameraPosition - anchorPosition) / anchorPoint.panel.size;
       }
-    } else if (nextAnchorPoint && anchorPosition <=  cameraPosition && cameraPosition <= nextAnchorPoint.position) {
+    } else if (nextAnchorPoint && anchorPosition <= cameraPosition && cameraPosition <= nextAnchorPoint.position) {
       indexProgress = index + (cameraPosition - anchorPosition) / (nextAnchorPoint.position - anchorPosition);
     } else {
       return false;
@@ -73,12 +68,9 @@ const getIndexProgress = (flicking: Flicking) => {
 
 /**
  * Reactive object type that combines state and methods for Flicking
+ * @remarks
  * This type provides reactive state properties and methods that automatically update
  * when the Flicking instance state changes.
- * @ko Flicking의 상태와 메서드를 결합한 반응형 객체 타입
- * 이 타입은 Flicking 인스턴스의 상태가 변경될 때 자동으로 업데이트되는
- * 반응형 상태 속성들과 메서드들을 제공합니다.
- * @typedef
  * @see {@link https://naver.github.io/egjs-flicking/Demos#reactive-api-demo}
  * @example
  * ```jsx
@@ -92,74 +84,49 @@ export type FlickingReactiveObject = ReactiveObject<FlickingReactiveState & Flic
 
 /**
  * Reactive state properties for Flicking
- * @ko Flicking의 반응형 상태 속성들
- * @typedef
  */
 export interface FlickingReactiveState {
-  /**
-   * Whether Flicking has reached the first panel<ko>첫 번째 패널에 도달했는지 여부</ko>
-   */
+  /** Whether Flicking has reached the first panel */
   isReachStart: boolean;
-  /**
-   * Whether Flicking has reached the last panel<ko>마지막 패널에 도달했는지 여부</ko>
-   */
+  /** Whether Flicking has reached the last panel */
   isReachEnd: boolean;
-  /**
-   * Total number of panels<ko>전체 패널 개수</ko>
-   */
+  /** Total number of panels */
   totalPanelCount: number;
-  /**
-   * Current active panel index<ko>현재 활성화된 패널의 인덱스</ko>
-   */
+  /** Current active panel index */
   currentPanelIndex: number;
-  /**
-   * Overall scroll progress percentage (0-100)<ko>전체 스크롤 진행률 (0-100)</ko>
-   */
+  /** Overall scroll progress percentage (0-100) */
   progress: number;
-  /**
-   * Panel progress with decimal values<ko>소수점을 포함한 패널 진행률</ko>
-   */
+  /** Panel progress with decimal values */
   indexProgress: number;
 }
 
 /**
  * Reactive methods for Flicking
- * @ko Flicking의 반응형 메서드들
- * @typedef
  */
 export interface FlickingReactiveMethod {
   /**
-   * Move to a specific panel index<ko>특정 패널 인덱스로 이동</ko>
-   * @param i - Target panel index<ko>목표 패널 인덱스</ko>
-   * @returns Promise that resolves when movement is complete<ko>이동이 완료되면 resolve되는 Promise</ko>
+   * Move to a specific panel index
+   * @param i - Target panel index
+   * @returns Promise that resolves when movement is complete
    */
   moveTo: (i: number) => Promise<void>;
 }
 
 /**
  * Data required for reactive API setup
- * @ko 반응형 API 설정에 필요한 데이터
- * @typedef
  */
 export interface FlickingReactiveData {
-  /**
-   * Flicking instance to connect<ko>연결할 Flicking 인스턴스</ko>
-   */
+  /** Flicking instance to connect */
   flicking?: Flicking;
-  /**
-   * Flicking options used for initialization<ko>초기화에 사용되는 Flicking 옵션</ko>
-   */
+  /** Flicking options used for initialization */
   options?: FlickingReactiveAPIOptions;
 }
 
 /**
  * Options for Flicking reactive API that help optimize initial rendering in SSR scenarios
+ * @remarks
  * These options allow you to set initial state values before the Flicking instance is fully initialized,
  * preventing unnecessary re-renders when the actual Flicking state is applied.
- * @ko SSR 상황 등에서 초기 렌더링을 최적화할 수 있게 하는 Flicking 반응형 API 옵션
- * 이 옵션들을 통해 Flicking 인스턴스가 완전히 초기화되기 전에 초기 상태 값을 설정할 수 있어,
- * 실제 Flicking 상태가 적용될 때 불필요한 리렌더링을 방지할 수 있습니다.
- * @typedef
  * @example
  * ```js
  * const options = {
@@ -172,40 +139,35 @@ export interface FlickingReactiveData {
 export interface FlickingReactiveAPIOptions {
   /**
    * Initial panel index to start with. This sets the currentPanelIndex and indexProgress initial values.
+   * @remarks
    * Also affects isReachStart and isReachEnd initial value setting.
-   * @ko 시작할 초기 패널 인덱스. currentPanelIndex와 indexProgress의 초기값을 설정합니다.
-   * 또한 isReachStart, isReachEnd 초기값 계산에도 영향을 줍니다.
-   * @default 0
+   * @defaultValue 0
    */
   defaultIndex?: number;
   /**
    * Total number of panels in the Flicking instance. This sets the totalPanelCount initial value
-   * and helps prevent layout shifts during SSR hydration.
-   * @ko Flicking 인스턴스의 전체 패널 개수. totalPanelCount의 초기값을 설정하며
-   * SSR 하이드레이션 과정에서 레이아웃 시프트를 방지하는 데 도움이 됩니다.
-   * @default 0
+   * @remarks
+   * Helps prevent layout shifts during SSR hydration.
+   * @defaultValue 0
    */
   totalPanelCount?: number;
 }
 
-
 /**
  * Internal reactive API adapter for Flicking that manages state and event listeners
+ * @remarks
  * This adapter is used internally by framework-specific packages (react-flicking, vue-flicking, etc.)
  * to provide reactive API support. Users rarely need to use this directly.
- * @ko Flicking의 상태와 이벤트 리스너를 관리하는 내부 반응형 API 어댑터
- * 이 어댑터는 react-flicking, vue-flicking 등의 프레임워크별 패키지에서 내부적으로 사용되어
- * 반응형 API 지원을 제공합니다. 사용자가 직접 사용할 일은 거의 없습니다.
- * @param onInit - Callback when reactive object is initialized<ko>반응형 객체가 초기화될 때 호출되는 콜백</ko>
- * @param onDestroy - Callback when reactive object is destroyed<ko>반응형 객체가 파괴될 때 호출되는 콜백</ko>
- * @param setMethods - Function to set available methods<ko>사용 가능한 메서드를 설정하는 함수</ko>
- * @returns Reactive object with Flicking state and methods<ko>Flicking 상태와 메서드를 포함한 반응형 객체</ko>
+ * @param onInit - Callback when reactive object is initialized
+ * @param onDestroy - Callback when reactive object is destroyed
+ * @param setMethods - Function to set available methods
+ * @returns Reactive object with Flicking state and methods
  */
 const flickingReactiveAPIAdapter: ReactiveSetupAdapter<
-FlickingReactiveObject,
-FlickingReactiveState,
-"moveTo",
-FlickingReactiveData
+  FlickingReactiveObject,
+  FlickingReactiveState,
+  "moveTo",
+  FlickingReactiveData
 > = ({ onInit, onDestroy, setMethods, getProps }) => {
   let flicking: Flicking | undefined;
 
@@ -227,7 +189,8 @@ FlickingReactiveData
   // 이렇게 미리 옵션을 통해서 예측할 수 있는 부분들은 맞춰둔다.
   const reactiveObj: FlickingReactiveObject = reactive({
     isReachStart: options?.defaultIndex ? options?.defaultIndex === 0 : true,
-    isReachEnd: (options?.totalPanelCount && options?.defaultIndex) ? (options.defaultIndex === options.totalPanelCount - 1) : false,
+    isReachEnd:
+      options?.totalPanelCount && options?.defaultIndex ? options.defaultIndex === options.totalPanelCount - 1 : false,
     totalPanelCount: options?.totalPanelCount ?? 0,
     currentPanelIndex: options?.defaultIndex ?? 0,
     progress: 0,
@@ -287,10 +250,9 @@ FlickingReactiveData
 
 /**
  * Connect Flicking instance to reactive API
- * @ko Flicking 인스턴스를 반응형 API에 연결합니다
- * @param {Flicking} flicking - Flicking instance to connect<ko>연결할 Flicking 인스턴스</ko>
- * @param {FlickingReactiveAPIOptions} [options] - Flicking options<ko>Flicking 옵션</ko>
- * @returns {FlickingReactiveObject} Reactive object with Flicking state and methods<ko>Flicking 상태와 메서드를 포함한 반응형 객체</ko>
+ * @param flicking - Flicking instance to connect
+ * @param options - Flicking options
+ * @returns Reactive object with Flicking state and methods
  * @example
  * ```js
  * import Flicking, { connectFlickingReactiveAPI } from "@egjs/flicking";
@@ -315,7 +277,10 @@ FlickingReactiveData
  * reactiveObj.moveTo(2); // Move to third panel
  * ```
  */
-const connectFlickingReactiveAPI = (flicking: Flicking, options?: FlickingReactiveAPIOptions) => {
+const connectFlickingReactiveAPI = (
+  flicking: Flicking,
+  options?: FlickingReactiveAPIOptions
+): FlickingReactiveObject => {
   const obj = adaptReactive(flickingReactiveAPIAdapter, () => ({ flicking, options }));
   obj.mounted();
   const instance = obj.instance();