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 ( { > 만든 사람들 - + 의견 제안하기 - + ); }; 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 ( + + ); +} 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) { + 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 ( <>
@@ -28,13 +34,9 @@ function ErrorPage({ code }: ErrorPageProps) { {ERROR_BUTTON[CODE_KEY]} {code === 500 && ( - + 문의하기 - + )} 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;