with logging example

WithLogging.ts

let amplitude: any;
let ga: any;

function WithLogging({
  action,
  eventName,
  children,
}: {
  action: 'view' | 'click' | 'focus';
  eventName: string;
  children: React.ReactElement<{
    onClick?: (e: React.MouseEvent<HTMLElement>) => void;
    onFocus?: (e: React.FocusEvent<HTMLElement>) => void;
  }>;
}) {
  const actionRef = React.useRef(action);
  actionRef.current = action;

  useEffect(() => {
    if (actionRef.current === 'view') {
      amplitude.pageView();
      ga.viewed();
    }
  }, []);

  if (action === 'view') {
    return children;
  }

  if (action === 'click') {
    return React.cloneElement(children, {
      onClick: (e: React.MouseEvent<HTMLElement>) => {
        amplitude.track(eventName);
        ga.track(eventName);
        children.props.onClick?.(e);
      },
    });
  }

  if (action === 'focus') {
    return React.cloneElement(children, {
      onFocus: (e: React.FocusEvent<HTMLElement>) => {
        amplitude.track(eventName);
        ga.track(eventName);
        children.props.onFocus?.(e);
      },
    });
  }

  throw Error(`지원하지 않는 action 타입입니다: ${action}`);
}