[SP0] 메이커스 채널 1:1 채팅 연결 (#385)

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>
   );
 };

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;

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>
+  );
+}

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}>

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>
     </>

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;