[Feat] 문의용 채널톡 추가 (#144)

* feat: 채널톡 서비스 추가

* refactor: 채널톡 버튼 기본 설정 값 변경

* refactor: 말투 예시보기 버튼 width 삭제

* refactor: 홈 navbar 수정

* refactor: 공유 텍스트 스토어 링크 추가

Author: sikkzz

src/App.tsx

@@ -1,9 +1,11 @@
 import { Outlet } from "react-router-dom";
 
+import { useChannelTalk } from "@/hooks/common/useChannelTalk";
 import useHotjar from "@/hooks/common/useHotjar";
 
 const App = () => {
   useHotjar();
+  useChannelTalk();
 
   return (
     <main>

src/assets/svg/ic-logo.svg

@@ -0,0 +1,251 @@
+/* eslint-disable prefer-rest-params */
+/* 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 || w.ChannelIOInitialized) {
+        return;
+      }
+
+      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 new ChannelService();

src/assets/svg/ic-share.svg

@@ -27,9 +27,6 @@ export const HomeNavbar: Story = {
   name: "HomeNavbar",
   render: () => (
     <Navbar>
-      <Navbar.LeftButton>
-        <Icon name="logo" />
-      </Navbar.LeftButton>
       <Navbar.RightButton>
         <Text variant="bodySm" color="secondary">
           앱 공유하기

src/components/ChannelTalk/channelTalk.ts

@@ -4,9 +4,9 @@ import CloseIcon from "@/assets/svg/ic-close.svg?react";
 import EmptyCircleIcon from "@/assets/svg/ic-empty-circle.svg?react";
 import GalleryIcon from "@/assets/svg/ic-gallery.svg?react";
 import LeftArrowIcon from "@/assets/svg/ic-left-arrow.svg?react";
-import LogoIcon from "@/assets/svg/ic-logo.svg?react";
 import PasteIcon from "@/assets/svg/ic-paste.svg?react";
 import PlusIcon from "@/assets/svg/ic-plus.svg?react";
+import ShareIcon from "@/assets/svg/ic-share.svg?react";
 
 export type IconNameType =
   | "camera"
@@ -17,7 +17,7 @@ export type IconNameType =
   | "plus"
   | "checkCircle"
   | "emptyCircle"
-  | "logo";
+  | "share";
 
 export interface IconProps {
   name: IconNameType;
@@ -32,7 +32,7 @@ export const ICONS = {
   plus: PlusIcon,
   checkCircle: CheckCircleIcon,
   emptyCircle: EmptyCircleIcon,
-  logo: LogoIcon,
+  share: ShareIcon,
 };
 
 // 추후 사이즈, 컬러등 추가 가능

src/components/Navbar/Navbar.stories.tsx

@@ -0,0 +1,20 @@
+import { useEffect } from "react";
+
+import ChannelService from "@/components/ChannelTalk/channelTalk";
+
+export const useChannelTalk = () => {
+  const openChannelTalk = () => {
+    ChannelService.showMessenger();
+  };
+
+  useEffect(() => {
+    ChannelService.loadScript();
+
+    ChannelService.boot({
+      pluginKey: import.meta.env.VITE_CHANNEL_TALK_KEY || "",
+      hideChannelButtonOnBoot: true,
+    });
+  }, []);
+
+  return { openChannelTalk };
+};