버튼 클릭 시 커스텀한 이벤트를 만들어서 전파를 하고, 해당 이벤트를 감지하면 되지 않을까?

//커스텀한 이벤트를 만들고, 감지하자
//요런 느낌으로 구현하면 될 거 같았음.
const customEvent = new CustomEvent('custom-click', {
    bubbles: true,
    detail: 채팅상담중인사용자의정보
});

//버튼 클릭 시 핸들러
const handleButtonClick = () => {
   dispatchEvent(customeEvent);
}

//최상단에서 이벤트 감지

const 사용자의정보를_받아서_상담메인_탭에_추가하는_함수 = (data:사용자의정보) => {}

useEffect(() => {
   window.addEventListener("custom-click",사용자의정보를_받아서_상담메인_탭에_추가하는_함수))
},[])

// 채널 생성 (동일한 이름의 채널끼리 통신 가능)
const channel = new BroadcastChannel("tab_communication");

// 메시지 수신 이벤트 리스너 등록
channel.onmessage = (event) => {
  console.log("메시지 수신:", event.data);
  document.getElementById("received").textContent = event.data;
};

// 메시지 전송 함수
function sendMessage() {
  const message = document.getElementById("message").value;
  channel.postMessage(message);
}

// 채널 연결 종료 (페이지 언로드 시 권장)
function closeChannel() {
  channel.close();
}

import { CustomerTabInfo } from "@/app/(상담)/(상담메인)/c2001/hooks/use-consulting-tabs";

class CustomerInfoChannel {
  //싱글톤형태로 만들기
  static instance: CustomerInfoChannel | null = null;

  channel: BroadcastChannel | null = null;

  constructor() {
    if (CustomerInfoChannel.instance) {
      return CustomerInfoChannel.instance;
    }

    this.channel = new BroadcastChannel("customer-info-channel");
    CustomerInfoChannel.instance = this;
  }

  //고객정보를 브로드캐스트 채널을 통해 전송(내부적으로 채널의 postMessage사용)
  sendCustomerInfo(newTabInfo: CustomerTabInfo) {
    if (this.channel == null) {
      return;
    }

    this.channel.postMessage(newTabInfo);
  }

  //브로드캐스트 채널에서 메시지 수신 시 등록된 콜백 실행
  onReceiveCustomerInfo(callback: (newTabInfo: CustomerTabInfo) => void) {
    if (this.channel == null) {
      return;
    }
    this.channel.onmessage = (event) => {
      callback(event.data);
    };
  }

  static getInstance() {
    if (!CustomerInfoChannel.instance) {
      CustomerInfoChannel.instance = new CustomerInfoChannel();
    }

    return CustomerInfoChannel.instance;
  }
}

export { CustomerInfoChannel };

//버튼 클릭 시 브로드캐스트 채널에서 sendCustomerInfo호출
const handleConsultingMainButton = async (contact) => {
  const customerChannel = CustomerInfoChannel.getInstance();

  if (회원인가) {
    const customerInfo = await searchCustomerInfoByUserId(userId);

    customerChannel.sendCustomerInfo({
      userInfo: {
        phoneNumber: customerInfo?.phoneNumber ?? null,
        clientNo: customerInfo?.clientNo ?? null,
        type: "member",
        isAuthenticated:
          contact.getAttributes()?.["isAuthenticated"]?.value === "Y",
      },
    });

    return;
  }

  window.open("/contacts-main", "managerTab");
};

export function ReceiveAddCustomerEvent({
  children,
}: {
  children: React.ReactNode;
}) {
  const { addUserInConsultantTab } = useConnectHandler();
  const { addNewTabAndActivate } = useConsultingTabs();
  const channel = CustomerInfoChannel.getInstance();

  useEffect(() => {
    //채널에서 고객정보를 받을 때 새 탭으로 추가를 한다.
    channel.onReceiveCustomerInfo((customerData) => {
      addNewTabAndActivate(customerData);
    });
  }, [addNewTabAndActivate, channel]);

  return <>{children}</>;
}

웹뷰의 액티비티란?
-
웹뷰 액티비티는 안드로이드 앱 내에서 웹 콘텐츠를 표시하는 액티비티입니다.
액티비티는 안드로이드에서 사용자 인터페이스를 구성하는 기본 요소로, 하나의 화면을 의미합니다.

웹뷰(WebView)는 앱 내에서 웹 콘텐츠를 표시할 수 있는 컴포넌트이고,
이를 포함한 액티비티를 웹뷰 액티비티라고 합니다 .

import { useEffect, useMemo, useState } from "react";

export function useBroadcastChannel<T>(key: string) {
  const [message, setMessage] = useState<T>();

  const channel = useMemo(() => {
    return new BroadcastChannel(key);
  }, [key]);

  useEffect(() => {
    channel.addEventListener("message", (event) => {
      setMessage(event.data);
    });
  }, [channel]);

  return { message, channel };
}

import { broadcastQueryClient } from "@tanstack/query-broadcast-client-experimental";

const queryClient = new QueryClient();

broadcastQueryClient({
  queryClient,
  broadcastChannel: "my-app",
});

broadcastQueryClient({ queryClient, broadcastChannel });

interface BroadcastQueryClientOptions {
  /** 동기화할 QueryClient */
  queryClient: QueryClient;
  /** 탭과 창 사이에 통신하는 데 사용될
   * 고유한 채널 이름입니다 */
  broadcastChannel?: string;
  /** BroadcastChannel API에 대한 옵션 */
  options?: BroadcastChannelOptions;
}

{
  broadcastChannel = 'tanstack-query',
}