@makestory/event-manager

@makestory/event-manager

@makestory/event-manager는 웹뷰와 앱 간의 상태 정보 교환 및 이벤트 관리 기능을 제공하는 이벤트 버스 라이브러리입니다. 클라이언트 및 서버 환경 모두를 지원하며, CustomEvent 기반으로 작동합니다.

주요 기능

• 웹뷰와 앱 간의 양방향 통신 지원
• 이벤트 등록, 해제 및 디스패치 기능 제공
• Android 및 iOS 플랫폼 간의 유연한 연동 방식 지원
• Next.js와 같은 SSR 환경에서도 안전하게 사용 가능

설치

npm install @makestory/event-manager

사용법

이벤트 등록 및 디스패치

import {
  eventBusOn,
  eventBusOff,
  eventBusDispatch,
} from '@makestory/event-manager';

// 이벤트 리스너 등록
eventBusOn('testEvent', event => {
  console.log('Event received:', event.detail);
});

// 이벤트 디스패치
eventBusDispatch('testEvent', { message: 'Hello from event bus!' });

// 이벤트 리스너 제거
eventBusOff('testEvent', event => {
  console.log('Event listener removed');
});

웹뷰 <-> 앱 연동

앱에서 웹뷰로 이벤트 전달

import { appEventListener, APP_EVENT_TYPE } from '@makestory/event-manager';

// 앱 이벤트 리스너 등록
appEventListener(APP_EVENT_TYPE.TEST);

// 앱에서 웹뷰로 이벤트 디스패치
window[APP_EVENT_TYPE.TEST]('Message from app to webview!');

웹뷰에서 앱으로 이벤트 전달

import { webviewDispatch, APP_EVENT_TYPE } from '@makestory/event-manager';

const sendToApp = webviewDispatch('webkit'); // Android의 경우 bridge 이름 변경 가능
sendToApp(APP_EVENT_TYPE.TEST, { message: 'Hello from webview!' });

Custom Event Types 추가

export const APP_EVENT_TYPE = {
  TEST: 'test',
  NEW_EVENT: 'newEvent', // 새로운 이벤트 타입 추가
};

Next.js 환경에서 사용

SSR 환경에서는 typeof window를 확인하여 클라이언트 환경에서만 이벤트를 처리합니다.

import { appEventListener, APP_EVENT_TYPE } from '@makestory/event-manager';

if (typeof window !== 'undefined') {
  appEventListener(APP_EVENT_TYPE.TEST);
}

'use client';

import { useEffect, ComponentProps, useCallback } from 'react';
import {
  eventBusOn,
  eventBusOff,
  eventBusDispatch,
} from '@lotte/event-manager';

import { EVENT_BUS } from '@/common/constant/event';

export default function EventBus() {
  const eventTest = useCallback(({ detail }: any = {}) => {
    console.log('EventBus', '!!!!!!!!!', detail);
  }, []);

  useEffect(() => {
    eventBusOff(EVENT_BUS.TEST, eventTest);
    eventBusOn(EVENT_BUS.TEST, eventTest);
  }, [eventTest]);

  const onClick: ComponentProps<'button'>['onClick'] = event => {
    eventBusDispatch(EVENT_BUS.TEST, { data: 'TEST' });
  };

  return (
    <>
      <h2>EvnetBus Test</h2>
      <div>
        <button onClick={onClick}>onClick</button>
      </div>
    </>
  );
}

Android 및 iOS 연동 방식

• Android: window[bridge]type 방식 호출
• iOS (WKWebView): window.webkit.messageHandlers[type].postMessage(payload)
• iOS (스키마 방식): bridge://type 스키마를 iframe으로 호출

테스트 예제

setTimeout(() => {
  // 앱에서 웹뷰로 콜백 실행
  window[APP_EVENT_TYPE.TEST]?.('Test message from app!');
}, 3000);

API

eventBusOn(type: string, listener: EventListener, options?: EventOptions): void

특정 이벤트 타입에 대해 리스너를 등록합니다.

• type: 이벤트 타입을 나타내는 문자열
• listener: 이벤트가 발생했을 때 실행될 콜백 함수
• options: 이벤트 리스너 옵션 (선택 사항)

eventBusOff(type: string, listener: EventListener, options?: EventOptions): void

등록된 이벤트 리스너를 제거합니다.

• type: 이벤트 타입을 나타내는 문자열
• listener: 제거할 이벤트 리스너 콜백 함수
• options: 이벤트 리스너 옵션 (선택 사항)

eventBusDispatch(type: string, payload?: any): void

특정 이벤트를 실행합니다.

• type: 실행할 이벤트 타입을 나타내는 문자열
• payload: 이벤트와 함께 전달할 데이터 (선택 사항)

appEventListener(type: string): void

앱에서 호출할 이벤트 리스너를 등록합니다.

• type: 등록할 이벤트 타입

webviewDispatch(bridge: TypedBridge): (type: string, ...payload: any) => any

웹뷰에서 앱으로 데이터를 전송합니다.

• bridge: 웹뷰와 앱 간 통신에 사용할 브릿지 이름 (기본값: 'webkit')
• type: 전송할 이벤트 타입
• payload: 앱으로 전송할 데이터