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;