feat: 채널톡 추가 및 헤더 로고 동작 추가

six-standard · six-standard · commit 8e8cea94d003 · 2025-02-16T17:16:51.000+09:00
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "test": "jest"
   },
   "dependencies": {
+    "@channel.io/channel-web-sdk-loader": "^2.0.0",
     "@sentry/nextjs": "^8.47.0",
     "@tanstack/react-query": "^5.61.3",
     "@tanstack/react-query-devtools": "^5.62.11",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -5,7 +5,7 @@ import * as sentry from '@sentry/nextjs';
 import type { Metadata } from 'next';
 import { ReactNode } from 'react';
 import './globals.css';
-import { QueryProvider } from '@/components';
+import { ChannelTalkProvider, QueryProvider } from '@/components';
 
 export const metadata: Metadata = {
   title: 'Velog Dashboard',
@@ -23,8 +23,10 @@ export default function RootLayout({
       <body className={`${NotoSansKr.className} w-full bg-BG-MAIN`}>
         <sentry.ErrorBoundary>
           <QueryProvider>
-            <ToastContainer autoClose={2000} />
-            {children}
+            <ChannelTalkProvider>
+              <ToastContainer autoClose={2000} />
+              {children}
+            </ChannelTalkProvider>
           </QueryProvider>
         </sentry.ErrorBoundary>
       </body>
diff --git a/src/components/auth-required/header/Section.tsx b/src/components/auth-required/header/Section.tsx
@@ -24,13 +24,13 @@ type PropType<T extends clickType> = T extends 'link'
     ? Partial<BaseType> & {
         clickType: 'function';
         action: () => void;
-        children: React.ReactNode | React.ReactNode[];
+        children: React.ReactNode;
       }
     : T extends 'none'
       ? Partial<BaseType> & {
           clickType: 'none';
           action?: undefined;
-          children: React.ReactNode | React.ReactNode[];
+          children: React.ReactNode;
         }
       : never;
 
diff --git a/src/components/auth-required/header/index.tsx b/src/components/auth-required/header/index.tsx
@@ -62,7 +62,10 @@ export const Header = () => {
   return (
     <nav className="w-full max-MBI:flex max-MBI:justify-center">
       <div className="flex w-fit">
-        <Section clickType="none">
+        <Section
+          clickType="function"
+          action={() => router.replace(`/main${PARAMS.MAIN}`)}
+        >
           <Image
             width={35}
             height={35}
diff --git a/src/components/common/ChannelTalkProvider.tsx b/src/components/common/ChannelTalkProvider.tsx
@@ -0,0 +1,24 @@
+'use client';
+
+import * as ChannelService from '@channel.io/channel-web-sdk-loader';
+import { useEffect } from 'react';
+
+const ChannelTalkServiceLoader = () => {
+  const CHANNELTALK_PLUGIN_KEY = process.env.NEXT_PUBLIC_CHANNELTALK_PLUGIN_KEY;
+  if (!CHANNELTALK_PLUGIN_KEY) {
+    throw new Error('ABORT_MS가 ENV에서 설정되지 않았습니다');
+  }
+  console.log(CHANNELTALK_PLUGIN_KEY);
+
+  ChannelService.loadScript();
+  ChannelService.boot({ pluginKey: CHANNELTALK_PLUGIN_KEY });
+};
+
+export const ChannelTalkProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  useEffect(() => ChannelTalkServiceLoader(), []);
+  return <>{children}</>;
+};
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
@@ -1,3 +1,4 @@
+export * from './ChannelTalkProvider';
 export * from './QueryProvider';
 export * from './ArriveSoon';
 export * from './Dropdown';

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+export * from './ChannelTalkProvider';`
`1`	`2`	`export * from './QueryProvider';`
`2`	`3`	`export * from './ArriveSoon';`
`3`	`4`	`export * from './Dropdown';`