From e35a81d6c576943f338c5fe78f75def187a1d9bf Mon Sep 17 00:00:00 2001
From: hyesung oh <haesungoh414@gmail.com>
Date: Sun, 5 Nov 2023 14:02:54 +0900
Subject: [PATCH] =?UTF-8?q?=EC=B1=84=EB=84=90=ED=86=A1=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=20visibility=20path=20=EC=84=A4=EC=A0=95=20(#457)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* chore: remove log

* feat: 채널톡 버튼 visibility 적용
---
 src/features/review/steps/Intro.tsx           |  2 +-
 .../useChannelTalkButtonVisibility.ts         | 19 +++++++++++++++++++
 src/pages/_app.page.tsx                       |  3 +++
 3 files changed, 23 insertions(+), 1 deletion(-)
 create mode 100644 src/hooks/channelTalk/useChannelTalkButtonVisibility.ts

diff --git a/src/features/review/steps/Intro.tsx b/src/features/review/steps/Intro.tsx
index 34a20fce..86bf5137 100644
--- a/src/features/review/steps/Intro.tsx
+++ b/src/features/review/steps/Intro.tsx
@@ -22,7 +22,7 @@ interface Props extends StepProps {
 
 const Intro = ({ nickname, next }: Props) => {
   const { currentStep, paragraphStep: onSkip } = useParagraphStep();
-  console.log('currentStep: ', currentStep);
+
   const { isCTAButtonVisible, skip: onCTAButtonVisibleSkip } = useCTAButtonVisible();
 
   useDidMount(() => {
diff --git a/src/hooks/channelTalk/useChannelTalkButtonVisibility.ts b/src/hooks/channelTalk/useChannelTalkButtonVisibility.ts
new file mode 100644
index 00000000..a4e88a7a
--- /dev/null
+++ b/src/hooks/channelTalk/useChannelTalkButtonVisibility.ts
@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+import { useRouter } from 'next/router';
+import * as ChannelTalk from '@channel.io/channel-web-sdk-loader';
+
+const DIABLED_PATHS: RegExp[] = [/^\/review\/.*/];
+
+const useChannelTalkButtonVisibility = () => {
+  const router = useRouter();
+
+  useEffect(() => {
+    if (DIABLED_PATHS.some((path) => path.test(router.asPath))) {
+      ChannelTalk.hideChannelButton();
+    } else {
+      ChannelTalk.showChannelButton();
+    }
+  }, [router.asPath]);
+};
+
+export default useChannelTalkButtonVisibility;
diff --git a/src/pages/_app.page.tsx b/src/pages/_app.page.tsx
index 13bce2d6..78a95a2f 100644
--- a/src/pages/_app.page.tsx
+++ b/src/pages/_app.page.tsx
@@ -17,6 +17,7 @@ import NewFeedbackSnackBarListener from '~/components/snackBar/NewFeedbackSnackB
 import SnackBarWrapper from '~/components/snackBar/SnackBarWrapper';
 import ToastWrapper from '~/components/toast/ToastWrapper';
 import { MAIN_LAYOUT_ID } from '~/constants/name';
+import useChannelTalkButtonVisiblity from '~/hooks/channelTalk/useChannelTalkButtonVisibility';
 import usePageTrack from '~/hooks/event/usePageTrack';
 import GlobalStyles from '~/styles/GlobalStyle';
 import defaultTheme from '~/styles/theme';
@@ -49,6 +50,8 @@ export default function App({ Component, pageProps }: AppPropsWithLayout) {
   const router = useRouter();
   useOpenExternalBrowser({ where: 'all', onOpen: () => router.push('/') });
 
+  useChannelTalkButtonVisiblity();
+
   return (
     <SessionProvider session={pageProps.session}>
       <MonitoringInitializer />