내정보 페이지 채널톡 연동

apps/web/src/layout/GlobalLayout.tsx

@@ -1,22 +1,33 @@
 import { css } from "@emotion/react";
 import Hotjar from "@hotjar/browser";
+import { PATHS } from "@layer/shared";
 import { useEffect } from "react";
-import { Outlet } from "react-router-dom";
+import { Outlet, useLocation } from "react-router-dom";
 
 import { Modal } from "@/component/common/Modal";
 import { PreventExternalBrowser } from "@/helper/preventExternalBrowser.ts";
+import ChannelService from "@/lib/channel-talk/service";
 import { useBridge } from "@/lib/provider/bridge-provider";
 
 const siteId = import.meta.env.VITE_HOTJAR_KEY as number;
 const hotjarVersion = import.meta.env.VITE_HOTJAR_VERSION as number;
 
 export default function GlobalLayout() {
   const { safeAreaHeight } = useBridge();
+  const location = useLocation();
 
   useEffect(() => {
     Hotjar.init(siteId, hotjarVersion);
   }, []);
 
+  useEffect(() => {
+    if (location.pathname.startsWith(PATHS.myInfo())) {
+      ChannelService.showChannelButton();
+    } else {
+      ChannelService.hideChannelButton();
+    }
+  }, [location]);
+
   return (
     <div
       css={css`

apps/web/src/lib/channel-talk/service.ts

@@ -0,0 +1,200 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+declare global {
+  interface Window {
+    ChannelIO?: IChannelIO;
+    ChannelIOInitialized?: boolean;
+  }
+}
+
+interface IChannelIO {
+  c?: (...args: any) => void;
+  q?: [methodName: string, ...args: any[]][];
+  (...args: any): void;
+}
+
+interface BootOption {
+  appearance?: string;
+  customLauncherSelector?: string;
+  hideChannelButtonOnBoot?: boolean;
+  hidePopup?: boolean;
+  language?: string;
+  memberHash?: string;
+  memberId?: string;
+  pluginKey: string;
+  profile?: Profile;
+  trackDefaultEvent?: boolean;
+  trackUtmSource?: boolean;
+  unsubscribe?: boolean;
+  unsubscribeEmail?: boolean;
+  unsubscribeTexting?: boolean;
+  zIndex?: number;
+}
+
+interface Callback {
+  (error: Error | null, user: CallbackUser | null): void;
+}
+
+interface CallbackUser {
+  alert: number;
+  avatarUrl: string;
+  id: string;
+  language: string;
+  memberId: string;
+  name?: string;
+  profile?: Profile | null;
+  tags?: string[] | null;
+  unsubscribeEmail: boolean;
+  unsubscribeTexting: boolean;
+}
+
+interface UpdateUserInfo {
+  language?: string;
+  profile?: Profile | null;
+  profileOnce?: Profile;
+  tags?: string[] | null;
+  unsubscribeEmail?: boolean;
+  unsubscribeTexting?: boolean;
+}
+
+interface Profile {
+  [key: string]: string | number | boolean | null | undefined;
+}
+
+interface FollowUpProfile {
+  name?: string | null;
+  mobileNumber?: string | null;
+  email?: string | null;
+}
+
+interface EventProperty {
+  [key: string]: string | number | boolean | null | undefined;
+}
+
+type Appearance = "light" | "dark" | "system" | null;
+
+class ChannelService {
+  loadScript() {
+    (function () {
+      const w = window;
+      if (w.ChannelIO) {
+        return w.console.error("ChannelIO script included twice.");
+      }
+      const ch: IChannelIO = function () {
+        // eslint-disable-next-line prefer-rest-params
+        ch.c?.(arguments);
+      };
+      ch.q = [];
+      ch.c = function (args) {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        ch.q?.push(args);
+      };
+      w.ChannelIO = ch;
+      function l() {
+        if (w.ChannelIOInitialized) {
+          return;
+        }
+        w.ChannelIOInitialized = true;
+        const s = document.createElement("script");
+        s.type = "text/javascript";
+        s.async = true;
+        s.src = "https://cdn.channel.io/plugin/ch-plugin-web.js";
+        const x = document.getElementsByTagName("script")[0];
+        if (x.parentNode) {
+          x.parentNode.insertBefore(s, x);
+        }
+      }
+      if (document.readyState === "complete") {
+        l();
+      } else {
+        w.addEventListener("DOMContentLoaded", l);
+        w.addEventListener("load", l);
+      }
+    })();
+  }
+
+  boot(option: BootOption, callback?: Callback) {
+    window.ChannelIO?.("boot", option, callback);
+  }
+
+  shutdown() {
+    window.ChannelIO?.("shutdown");
+  }
+
+  showMessenger() {
+    window.ChannelIO?.("showMessenger");
+  }
+
+  hideMessenger() {
+    window.ChannelIO?.("hideMessenger");
+  }
+
+  openChat(chatId?: string | number, message?: string) {
+    window.ChannelIO?.("openChat", chatId, message);
+  }
+
+  track(eventName: string, eventProperty?: EventProperty) {
+    window.ChannelIO?.("track", eventName, eventProperty);
+  }
+
+  onShowMessenger(callback: () => void) {
+    window.ChannelIO?.("onShowMessenger", callback);
+  }
+
+  onHideMessenger(callback: () => void) {
+    window.ChannelIO?.("onHideMessenger", callback);
+  }
+
+  onBadgeChanged(callback: (unread: number, alert: number) => void) {
+    window.ChannelIO?.("onBadgeChanged", callback);
+  }
+
+  onChatCreated(callback: () => void) {
+    window.ChannelIO?.("onChatCreated", callback);
+  }
+
+  onFollowUpChanged(callback: (profile: FollowUpProfile) => void) {
+    window.ChannelIO?.("onFollowUpChanged", callback);
+  }
+
+  onUrlClicked(callback: (url: string) => void) {
+    window.ChannelIO?.("onUrlClicked", callback);
+  }
+
+  clearCallbacks() {
+    window.ChannelIO?.("clearCallbacks");
+  }
+
+  updateUser(userInfo: UpdateUserInfo, callback?: Callback) {
+    window.ChannelIO?.("updateUser", userInfo, callback);
+  }
+
+  addTags(tags: string[], callback?: Callback) {
+    window.ChannelIO?.("addTags", tags, callback);
+  }
+
+  removeTags(tags: string[], callback?: Callback) {
+    window.ChannelIO?.("removeTags", tags, callback);
+  }
+
+  setPage(page: string) {
+    window.ChannelIO?.("setPage", page);
+  }
+
+  resetPage() {
+    window.ChannelIO?.("resetPage");
+  }
+
+  showChannelButton() {
+    window.ChannelIO?.("showChannelButton");
+  }
+
+  hideChannelButton() {
+    window.ChannelIO?.("hideChannelButton");
+  }
+
+  setAppearance(appearance: Appearance) {
+    window.ChannelIO?.("setAppearance", appearance);
+  }
+}
+
+export default new ChannelService();

apps/web/src/router/index.tsx

@@ -22,6 +22,7 @@ import { SetNickNamePage } from "@/app/login/SetNicknamePage";
 import { RetrospectAnalysisPage } from "@/app/retrospect/analysis/RetrospectAnalysisPage";
 import { TemplateListPage } from "@/app/retrospect/template/list/TemplateListPage";
 import { RecommendDonePage } from "@/app/retrospect/template/recommend/RecommendDonePage";
+import { RecommendSearch } from "@/app/retrospect/template/recommend/RecommendSearch";
 import { RecommendTemplatePage } from "@/app/retrospect/template/recommend/RecommendTemplatePage";
 import { RetrospectCreate } from "@/app/retrospectCreate/RetrospectCreate";
 import { RetrospectCreateComplete } from "@/app/retrospectCreate/RetrospectCreateComplete";
@@ -40,7 +41,7 @@ import { RetrospectWritePage } from "@/app/write/RetrospectWritePage.tsx";
 import GlobalLayout from "@/layout/GlobalLayout.tsx";
 import { HomeLayout } from "@/layout/HomeLayout";
 import { RequireLoginLayout } from "@/layout/RequireLoginLayout";
-import { RecommendSearch } from "@/app/retrospect/template/recommend/RecommendSearch";
+import ChannelService from "@/lib/channel-talk/service";
 
 type RouteChildren = {
   auth: boolean;
@@ -256,5 +257,9 @@ const router = createBrowserRouter([
 ]);
 
 export const Routers = () => {
+  ChannelService.loadScript();
+  ChannelService.boot({
+    pluginKey: import.meta.env.VITE_CHANNELTALK_PLUGIN_KEY,
+  });
   return <RouterProvider router={router} />;
 };