Merge pull request Next-Room#46 from Next-Room/fix/hide_channeltalk

fix: 다른 페이지에서 회원가입으로 이동 시 채널톡이 남아 있음

Author: b41-41

app/apis/ChannelTalk.tsx

@@ -1,34 +1,198 @@
-"use client";
-
-import { isDevMode } from "@/consts/env";
-import { usePathname } from "next/navigation"
-import Script from "next/script";
-
-function ChannelTalk() {
-  const pathname = usePathname();
-  
-  if (isDevMode) return null;
-  if (pathname==="/signup") return null;
-console.log(pathname);
-
-  const channelIoScript = `
-    (function(){var w=window;if(w.ChannelIO){return w.console.error("ChannelIO script included twice.");}var ch=function(){ch.c(arguments);};ch.q=[];ch.c=function(args){ch.q.push(args);};w.ChannelIO=ch;function l(){if(w.ChannelIOInitialized){return;}w.ChannelIOInitialized=true;var s=document.createElement("script");s.type="text/javascript";s.async=true;s.src="https://cdn.channel.io/plugin/ch-plugin-web.js";var 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);}})();
-  
-    ChannelIO('boot', {
-      "pluginKey": "acb0febb-fe4a-45ac-aca1-e7d8c5ed746f"
-    });
-    `;
-  // You can show in the console the GA_TRACKING_ID to confirm
-
-  return (
-    <Script
-      id="channel-talk-init"
-      strategy="afterInteractive"
-      dangerouslySetInnerHTML={{
-        __html: channelIoScript,
-      }}
-    />
-  );
-}
-
-export default ChannelTalk;
+/* eslint-disable */
+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 () {
+        ch.c?.(arguments);
+      };
+      ch.q = [];
+      ch.c = function (args) {
+        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 ChannelService;

app/components/MakeThemePage/MakeThemePage.tsx

@@ -8,6 +8,7 @@ import { useSelectedTheme } from "@/components/atoms/selectedTheme.atom";
 import { useModalState } from "@/components/atoms/modals.atom";
 import { useRouter } from "next/navigation";
 import { useGetThemeList } from "@/queries/getThemeList";
+import useChannelTalk from "@/hooks/useChannelTalk";
 import MakeThemeModalView from "./MakeThemePageView";
 import Dialog from "../common/Dialog/Dialog";
 
@@ -22,6 +23,7 @@ function MakeThemePage() {
   const [modalState, setModalState] = useModalState();
   const { data: categories = [] } = useGetThemeList();
   const [open, setOpen] = useState<boolean>(false);
+  useChannelTalk();
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [selectedTheme, setSelectedTheme] = useSelectedTheme();

app/home/Home.tsx

@@ -6,19 +6,20 @@ import useCheckSignIn from "@/hooks/useCheckSignIn";
 import { useSnackBarInfo } from "@/components/atoms/snackBar.atom";
 import SnackBar from "@/components/SnackBar/SnackBar";
 import Loader from "@/components/Loader/Loader";
+import useChannelTalk from "@/hooks/useChannelTalk";
 import HomeView from "./HomeView";
 
 function Home() {
   const { data: categories = [] } = useGetThemeList();
   const [open, setOpen] = useState<boolean>(false);
   const [snackInfo, setSnackBarInfo] = useSnackBarInfo();
+  useChannelTalk();
 
   const handleDialog = () => {
     setOpen(!open);
   };
 
   const isSignIn = useCheckSignIn();
-  
 
   useEffect(() => {
     if (snackInfo.isOpen) {

app/hooks/useChannelTalk.ts

@@ -0,0 +1,23 @@
+"use client";
+
+import ChannelTalk from "@/apis/ChannelTalk";
+import { isDevMode } from "@/consts/env";
+import { useEffect } from "react";
+
+const useChannelTalk = () => {
+  useEffect(() => {
+    if (isDevMode) return () => null;
+    const channelTalkInstance = new ChannelTalk();
+
+    channelTalkInstance.loadScript();
+    channelTalkInstance.boot({
+      pluginKey: "acb0febb-fe4a-45ac-aca1-e7d8c5ed746f",
+    });
+
+    return () => {
+      channelTalkInstance.shutdown();
+    };
+  }, []);
+};
+
+export default useChannelTalk;

app/landing/Landing.tsx

@@ -6,6 +6,7 @@ import { useIsLoggedInWrite } from "@/components/atoms/account.atom";
 import { useAsPathStateWrite } from "@/components/atoms/signup.atom";
 import { removeAccessToken } from "@/utils/localStorage";
 import useCheckSignIn from "@/hooks/useCheckSignIn";
+import useChannelTalk from "@/hooks/useChannelTalk";
 import LandingView from "./LandingView";
 
 function Landing() {
@@ -21,10 +22,10 @@ function Landing() {
   setAsPathState(pathName);
   // document.cookie = `pathName =${pathName}`;
 
+  useChannelTalk();
+
   const handleSignUpBtn = () => {
-    const url = isSignIn
-      ? "/admin"
-      : "/signup";
+    const url = isSignIn ? "/admin" : "/signup";
 
     router.push(url);
   };

app/layout.tsx

@@ -10,7 +10,6 @@ import ReactQueryProvider from "@/lib/reactQueryProvider";
 import RequireAuth from "@/components/RequireAuth/RequireAuth";
 
 import Analytics from "./apis/Analytics";
-import ChannelTalk from "./apis/ChannelTalk";
 import Clarity from "./apis/Clarity";
 
 export const metadata: Metadata = {
@@ -35,7 +34,6 @@ export default function RootLayout({
       <body>
         <Suspense>
           <Analytics />
-          <ChannelTalk />
           <Clarity />
         </Suspense>
         <Recoil>

app/login/Login.tsx

@@ -8,6 +8,7 @@ import { useIsLoggedInValue } from "@/components/atoms/account.atom";
 import { usePostLogin } from "@/mutations/postLogin";
 import useCheckSignIn from "@/hooks/useCheckSignIn";
 import Loader from "@/components/Loader/Loader";
+import useChannelTalk from "@/hooks/useChannelTalk";
 import LoginView from "./LoginView";
 
 interface FormValues {
@@ -34,6 +35,7 @@ function Login() {
     },
   });
   useCheckSignIn();
+  useChannelTalk();
 
   const onSubmit: SubmitHandler<FormValues> = (data) => {
     postLogin(data);