Merge pull request #281 from Team-Ampersand/revert-273-fix/channel-talk

Revert 🔀: 로그인 화면에 채널톡 아이콘 문제 해결
Team-Ampersand · Aug 22, 2024 · a94a1d5 · a94a1d5
2 parents 33f5b0f + b9e3c6d
commit a94a1d5
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 103 deletions.
diff --git a/src/components/Home/atoms/Script/SomeScript.tsx b/src/components/Home/atoms/Script/SomeScript.tsx
@@ -1,81 +1,53 @@
+/* eslint-disable @next/next/inline-script-id */
 import Script from 'next/script';
-import { useEffect } from 'react';
 
-const ChannelIOScript = ({
-  stunumName,
-  theme,
-}: {
-  stunumName: string;
-  theme: string;
-}) => {
-  useEffect(() => {
-    if (!stunumName) {
-      if (window.ChannelIO) {
-        window.ChannelIO('shutdown');
-        delete window.ChannelIO;
-        delete window.ChannelIOInitialized;
-      }
-      return;
-    }
+const ChannelIOScript = ({stunumName,theme}:{stunumName:string,theme:string}) => (
+      <Script
+        dangerouslySetInnerHTML={{
+            __html: `(function() {
+            var w = window;
+            if (w.ChannelIO) {
+            return (window.console.error || window.console.log || function(){})('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';
+            s.charset = 'UTF-8';
+            var x = document.getElementsByTagName('script')[0];
+            x.parentNode.insertBefore(s, x);
+            }
+            if (document.readyState === 'complete') {
+            l();
+            } else if (window.attachEvent) {
+            window.attachEvent('onload', l);
+            } else {
+            window.addEventListener('DOMContentLoaded', l, false);
+            window.addEventListener('load', l, false);
+            }
+        })();
+        ChannelIO('boot', {
+            "pluginKey": "${process.env.NEXT_PUBLIC_CHANNEL_IO_KEY}",
+            "profile": {
+              "name": "${stunumName}",
+            }
+        });
+        ChannelIO('setAppearance', '${theme}')
+        `}}
+      />
+);
 
-    const initScript = document.createElement('script');
-    initScript.innerHTML = `
-            (function() {
-                var w = window;
-                if (w.ChannelIO) {
-                    return (window.console.error || window.console.log || function() {})('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';
-                    s.charset = 'UTF-8';
-                    var x = document.getElementsByTagName('script')[0];
-                    x.parentNode.insertBefore(s, x);
-                }
-                if (document.readyState === 'complete') {
-                    l();
-                } else if (window.attachEvent) {
-                    window.attachEvent('onload', l);
-                } else {
-                    window.addEventListener('DOMContentLoaded', l, false);
-                    window.addEventListener('load', l, false);
-                }
-            })();
-            ChannelIO('boot', {
-                "pluginKey": "${process.env.NEXT_PUBLIC_CHANNEL_IO_KEY}",
-                "profile": {
-                    "name": "${stunumName}",
-                }
-            });
-            ChannelIO('setAppearance', '${theme}');
-        `;
-    document.body.appendChild(initScript);
-
-    return () => {
-      if (window.ChannelIO) {
-        window.ChannelIO('shutdown');
-        delete window.ChannelIO;
-        delete window.ChannelIOInitialized;
-      }
-      document.body.removeChild(initScript);
-    };
-  }, [stunumName, theme]);
-
-  return null;
-};
-
-export default ChannelIOScript;
+export default ChannelIOScript;
diff --git a/src/components/Home/molecules/ChannelBtn/index.tsx b/src/components/Home/molecules/ChannelBtn/index.tsx
@@ -1,22 +1,15 @@
-import ChannelIOScript from 'components/Home/atoms/Script/SomeScript';
-import UseToggleTheme from 'hooks/useToggleTheme';
-import { myProfileType } from 'types';
-import { MemberController } from 'utils/Libs/requestUrls';
+import ChannelIOScript from "components/Home/atoms/Script/SomeScript"
+import UseToggleTheme from "hooks/useToggleTheme";
+import { myProfileType } from "types";
+import { MemberController } from "utils/Libs/requestUrls";
 import useSWR from 'swr';
 
 const ChannelBtn = () => {
-  const [theme] = UseToggleTheme();
-  const { data } = useSWR<myProfileType>(MemberController.myProfile);
-  return (
-    <>
-      {data ? (
-        <ChannelIOScript
-          stunumName={`${data?.stuNum}${data?.name}`}
-          theme={theme}
-        />
-      ) : null}
-    </>
-  );
-};
+    const [theme,] = UseToggleTheme();
+    const { data } = useSWR<myProfileType>(MemberController.myProfile);
+    return (
+        <ChannelIOScript stunumName={`${data?.stuNum}${data?.name}`} theme={theme} />
+    )
+}
 
-export default ChannelBtn;
+export default ChannelBtn;
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -8,7 +8,6 @@ import { RecoilRoot } from 'recoil';
 import { SWRConfig } from 'swr';
 import { apiClient } from 'utils/Libs/apiClient';
 import InitMocks from '../mocks';
-import ChannelBtn from 'components/Home/molecules/ChannelBtn';
 
 if (process.env.NEXT_PUBLIC_API_MOCKING === 'enabled') {
   InitMocks();
@@ -28,8 +27,6 @@ export default function App({ Component, pageProps }: AppProps) {
       <RecoilRoot>
         <GlobalStyle />
         <Component {...pageProps} />
-        <ChannelBtn />
-
         <ToastContainer
           toastStyle={{
             backgroundColor: Palette.BACKGROUND_CARD,

diff --git a/src/pages/home.tsx b/src/pages/home.tsx
@@ -21,6 +21,7 @@ import {
   SelfstudyController,
 } from 'utils/Libs/requestUrls';
 import { applyPageProps, myProfileType, noticePageProps } from 'types';
+import ChannelBtn from 'components/Home/molecules/ChannelBtn';
 import SEOHead from 'components/Common/atoms/SEOHead';
 import dynamic from 'next/dynamic';
 
@@ -51,6 +52,7 @@ const HomePage: NextPage<{
             <MassageBoard />
           </HomeTemplates>
         </MainTemplates>
+        <ChannelBtn />
       </SWRConfig>
     </>
   );

diff --git a/src/types/common/window.d.ts b/src/types/common/window.d.ts