refactor: 스크립트가 아닌 npm 모듈로 채널톡 SDK 연동 (#74)

2wndrhs · web-flow · commit 3696d9c539e4 · 2025-02-13T17:24:24.000+09:00
* feat: @channel.io/channel-web-sdk-loader 의존성 추가

* feat: ChannelTalk 스크립트 로드 기능 추가

* feat: Workflow에 채널톡 플러그인 키 환경 변수 추가
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -30,6 +30,7 @@ jobs:
         env:
           VITE_API_URL: ${{ secrets.VITE_API_URL }}
           VITE_MIXPANEL_TOKEN: ${{ secrets.VITE_MIXPANEL_TOKEN }}
+          VITE_CHANNEL_TALK_PLUGIN_KEY: ${{ secrets.VITE_CHANNEL_TALK_PLUGIN_KEY }}
 
       - name: Configure AWS credentials
         uses: aws-actions/configure-aws-credentials@v4
diff --git a/index.html b/index.html
@@ -42,12 +42,6 @@
     />
   </head>
   <body>
-    <script>
-      (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": "00974094-3eae-441f-91e4-7f3404f44380"
-      });
-    </script>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
     "prepare": "husky"
   },
   "dependencies": {
+    "@channel.io/channel-web-sdk-loader": "^2.0.0",
     "@radix-ui/react-popover": "^1.1.5",
     "@radix-ui/react-toast": "^1.2.6",
     "@stackflow/core": "^1.1.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,12 +1,15 @@
 import { useEffect } from 'react';
 import { StudentMachineContext } from './machines/studentMachine';
 import { Stack } from './stackflow';
+import { ChannelTalk } from './utils/channelTalk';
 import { Mixpanel } from './utils/mixpanel';
 
 const App = () => {
   useEffect(() => {
-    // MixPanel에 사용자 식별
+    // MixPanel 사용자 식별
     Mixpanel.identify();
+    // ChannelTalk 채팅 초기화
+    ChannelTalk.boot();
   }, []);
 
   return (
diff --git a/src/utils/channelTalk.ts b/src/utils/channelTalk.ts
@@ -0,0 +1,11 @@
+import * as ChannelService from '@channel.io/channel-web-sdk-loader';
+
+ChannelService.loadScript();
+
+export const ChannelTalk = {
+  boot: () => {
+    ChannelService.boot({
+      pluginKey: import.meta.env.VITE_CHANNEL_TALK_PLUGIN_KEY,
+    });
+  },
+};
