From c2e7f7b40d1f032b46d120ad1c0e7203763e8969 Mon Sep 17 00:00:00 2001
From: lydiacho <81505421+lydiacho@users.noreply.github.com>
Date: Wed, 27 Mar 2024 01:39:35 +0900
Subject: [PATCH] =?UTF-8?q?[SP0]=20=EB=A9=94=EC=9D=B4=EC=BB=A4=EC=8A=A4=20?=
 =?UTF-8?q?=EC=B1=84=EB=84=90=201:1=20=EC=B1=84=ED=8C=85=20=EC=97=B0?=
 =?UTF-8?q?=EA=B2=B0=20=20(#385)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Footer/MakersNForm/index.tsx | 10 ++++++++--
 src/components/Footer/MakersNForm/style.ts  | 13 +++++++++++++
 src/components/kakao/Script.tsx             | 16 ++++++++++++++++
 src/pages/_app.tsx                          | 16 ++++++++++++++++
 src/views/ErrorPage/ErrorPage.tsx           | 14 ++++++++------
 src/views/ErrorPage/styles.ts               |  3 +--
 6 files changed, 62 insertions(+), 10 deletions(-)
 create mode 100644 src/components/kakao/Script.tsx

diff --git a/src/components/Footer/MakersNForm/index.tsx b/src/components/Footer/MakersNForm/index.tsx
index 16c768b7..9efcc069 100644
--- a/src/components/Footer/MakersNForm/index.tsx
+++ b/src/components/Footer/MakersNForm/index.tsx
@@ -5,6 +5,12 @@ import St from './style';
 const MakersNForm: FC = () => {
   const { isScrollingDown, isScrollTop } = useScrollPosition();
 
+  const handleClickKakao = () => {
+    window.Kakao.Channel.chat({
+      channelPublicId: '_sxaIWG',
+    });
+  };
+
   return (
     <St.FooterForm hide={isScrollingDown && !isScrollTop}>
       <St.FooterLink
@@ -14,9 +20,9 @@ const MakersNForm: FC = () => {
       >
         만든 사람들
       </St.FooterLink>
-      <St.FooterLink href="https://pf.kakao.com/_sxaIWG" target="_blank" rel="noopener noreferrer">
+      <St.FooterButton type="button" onClick={handleClickKakao}>
         의견 제안하기
-      </St.FooterLink>
+      </St.FooterButton>
     </St.FooterForm>
   );
 };
diff --git a/src/components/Footer/MakersNForm/style.ts b/src/components/Footer/MakersNForm/style.ts
index df800d3f..7929661c 100644
--- a/src/components/Footer/MakersNForm/style.ts
+++ b/src/components/Footer/MakersNForm/style.ts
@@ -34,6 +34,18 @@ const FooterLink = styled(Link)`
   padding: 17px 10px;
 
   color: #c0c5c9;
+  line-height: normal;
+
+  &:hover {
+    cursor: pointer;
+    color: #ffffff;
+  }
+`;
+const FooterButton = styled.button`
+  padding: 17px 10px;
+
+  color: #c0c5c9;
+  font-size: 100%;
 
   &:hover {
     cursor: pointer;
@@ -44,6 +56,7 @@ const FooterLink = styled(Link)`
 const St = {
   FooterForm,
   FooterLink,
+  FooterButton,
 };
 
 export default St;
diff --git a/src/components/kakao/Script.tsx b/src/components/kakao/Script.tsx
new file mode 100644
index 00000000..4f2a6228
--- /dev/null
+++ b/src/components/kakao/Script.tsx
@@ -0,0 +1,16 @@
+import Script from 'next/script';
+
+export default function KakaoScript() {
+  const handleOnLoad = () => {
+    window.Kakao.init(process.env.NEXT_PUBLIC_KAKAO_KEY);
+  };
+
+  return (
+    <Script
+      src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.1/kakao.min.js"
+      integrity="sha384-kDljxUXHaJ9xAb2AzRd59KxjrFjzHa5TAoFQ6GbYTCAG0bjM55XohjjDT7tDDC01"
+      crossOrigin="anonymous"
+      onLoad={handleOnLoad}
+    ></Script>
+  );
+}
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index d852813a..48ca8892 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -12,10 +12,25 @@ import SEO from '@src/components/common/SEO';
 import GoogleTagManagerNoscript from '@src/components/googleTagManager/Noscript';
 import GoogleTagManagerScript from '@src/components/googleTagManager/Script';
 import * as gtm from '@src/components/googleTagManager/gtm';
+import KakaoScript from '@src/components/kakao/Script';
 import { AMPLITUDE_API_KEY } from '@src/lib/constants/client';
 import { global } from '@src/lib/styles/global';
 import { pageViewTrackingEnrichment } from '@src/lib/utils/pageViewTrackingEnrichment';
 
+declare global {
+  interface Window {
+    Kakao: Kakao;
+  }
+
+  interface Kakao {
+    init: (appKey?: string) => void;
+    initialized: () => boolean;
+    Channel: {
+      chat: (setting: { channelPublicId: string }) => void;
+    };
+  }
+}
+
 export const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
@@ -91,6 +106,7 @@ function MyApp({ Component, pageProps }: AppProps) {
       </Head>
       <SEO />
       <GoogleTagManagerScript />
+      <KakaoScript />
       <Global styles={global} />
       <QueryClientProvider client={queryClient}>
         <MotionConfig isValidProp={isValidProp}>
diff --git a/src/views/ErrorPage/ErrorPage.tsx b/src/views/ErrorPage/ErrorPage.tsx
index 14725438..bff5a0de 100644
--- a/src/views/ErrorPage/ErrorPage.tsx
+++ b/src/views/ErrorPage/ErrorPage.tsx
@@ -18,6 +18,12 @@ function ErrorPage({ code }: ErrorPageProps) {
     code === 404 ? router.push('/') : router.back();
   };
 
+  const handleClickKakao = () => {
+    window.Kakao.Channel.chat({
+      channelPublicId: '_sxaIWG',
+    });
+  };
+
   return (
     <>
       <Header />
@@ -28,13 +34,9 @@ function ErrorPage({ code }: ErrorPageProps) {
           <RoundButton onClick={handleButtonClick}>{ERROR_BUTTON[CODE_KEY]}</RoundButton>
         </S.TopSection>
         {code === 500 && (
-          <S.ContactLink
-            href="https://pf.kakao.com/_sxaIWG"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
+          <S.ContactButton type="button" onClick={handleClickKakao}>
             문의하기
-          </S.ContactLink>
+          </S.ContactButton>
         )}
       </S.Root>
     </>
diff --git a/src/views/ErrorPage/styles.ts b/src/views/ErrorPage/styles.ts
index 4a05c500..74790cff 100644
--- a/src/views/ErrorPage/styles.ts
+++ b/src/views/ErrorPage/styles.ts
@@ -1,5 +1,4 @@
 import styled from '@emotion/styled';
-import Link from 'next/link';
 
 export const Root = styled.main`
   display: flex;
@@ -36,7 +35,7 @@ export const ErrorText = styled.p`
     font-size: 24px;
   }
 `;
-export const ContactLink = styled(Link)`
+export const ContactButton = styled.button`
   position: absolute;
   bottom: 17dvh;