[FE] 카카오톡 공유하기 기능 구현 및 약속 생성 완료 페이지 리팩터링 (#193)

* feat: 버튼 kakao 속성 추가

* chore: kakao 로고 이미지 삽입

* feat: 카카오톡 공유하기 기능 구현 및 버튼 컴포넌트 사용

* design: 페이지 height 조정

* refactor: 주석추가 및 로직 순서, 개행 수정

frontend/public/index.html

@@ -6,6 +6,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Hello momo</title>
   </head>
+  <script
+    src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.2/kakao.min.js"
+    integrity="sha384-TiCUE00h649CAMonG018J2ujOgDKW/kVWlChEuu4jK2vxfAAD0eZxzCKakxg55G4"
+    crossorigin="anonymous"
+  ></script>
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-1YJ857TLQC"></script>
   <script>
     window.dataLayer = window.dataLayer || [];

frontend/src/components/_common/Buttons/Button/Button.styles.ts

@@ -64,6 +64,10 @@ export const s_variant = {
       border: none;
     }
   `,
+  kakao: css`
+    background-color: #f9e000;
+    border: none;
+  `,
 };
 
 export const s_size = (size: ButtonSize) => css`

frontend/src/components/_common/Buttons/Button/index.tsx

@@ -3,7 +3,7 @@ import type { ButtonHTMLAttributes, ReactNode } from 'react';
 import { s_baseButton, s_size, s_variant } from './Button.styles';
 
 export type ButtonSize = 'xs' | 's' | 'm' | 'full';
-export type ButtonVariant = 'primary' | 'secondary';
+export type ButtonVariant = 'primary' | 'secondary' | 'kakao';
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   children: ReactNode;

frontend/src/pages/MeetingLinkSharePage/MeetingLinkSharePage.styles.ts

@@ -8,7 +8,7 @@ export const s_container = css`
   justify-content: center;
 
   width: 100%;
-  height: calc(100vh - 6rem);
+  height: 100%;
 `;
 
 export const s_meetingInfo = css`
@@ -17,7 +17,6 @@ export const s_meetingInfo = css`
   gap: 1rem;
 
   width: 90%;
-  height: 16rem;
   padding: 1.6rem;
 
   background-color: #f7dacb;
@@ -31,7 +30,7 @@ export const s_description = css`
 export const s_buttonContainer = css`
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.8rem;
 `;
 
 export const s_button = css`

frontend/src/pages/MeetingLinkSharePage/index.tsx

@@ -1,7 +1,11 @@
-import { useParams } from 'react-router-dom';
+import { useEffect } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+
+import { Button } from '@components/_common/Buttons/Button';
 
 import { copyToClipboard } from '@utils/clipboard';
 
+import KakaoIcon from '@assets/images/kakao.svg';
 import LogoSunglass from '@assets/images/logoSunglass.svg';
 
 import {
@@ -12,24 +16,58 @@ import {
   s_meetingInfo,
 } from './MeetingLinkSharePage.styles';
 
+declare global {
+  export interface Window {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    Kakao: any;
+  }
+}
+
 export default function MeetingLinkSharePage() {
+  const { Kakao } = window;
+  const navigate = useNavigate();
   const params = useParams<{ uuid: string }>();
   const uuid = params.uuid!;
-
   const LINK = `${window.location.host}/meeting/${uuid}`;
 
+  // TODO: 약속명이 있다면, ${userName}을 templateArgs에 같이 삽입(@낙타)
+  const handleShareButton = () => {
+    Kakao.Share.sendCustom({
+      templateId: Number(process.env.KAKAO_MESSAGE_TEMPLATE_ID),
+      templateArgs: {
+        uuid: uuid,
+      },
+    });
+  };
+
+  useEffect(() => {
+    if (!Kakao.isInitialized()) {
+      Kakao.init(process.env.KAKAO_KEY);
+    }
+  }, [Kakao]);
+
   return (
     <div css={s_container}>
       <LogoSunglass width="220" height="220" />
       <div css={s_meetingInfo}>
         {/* TODO: '${약속 명} 약속을 만들었어요 :)'로 변경 논의 후 적용 (@Yoonkyoungme) */}
         <div css={s_description}>약속을 만들었어요 :)</div>
         <div css={s_buttonContainer}>
-          <button css={s_button} onClick={() => copyToClipboard(LINK)}>
+          <Button size="full" variant="secondary" onClick={() => copyToClipboard(LINK)}>
             링크 복사
-          </button>
-          <button css={s_button}>시간 등록하러 가기</button>
-          <button css={s_button}>카카오톡으로 공유하기</button>
+          </Button>
+          <Button
+            size="full"
+            variant="primary"
+            css={s_button}
+            onClick={() => navigate(`/meeting/${uuid}`)}
+          >
+            시간 등록하러 가기
+          </Button>
+          <Button size="full" variant="kakao" css={s_button} onClick={handleShareButton}>
+            <KakaoIcon width="24" height="24" />
+            카카오톡으로 공유하기
+          </Button>
         </div>
       </div>
     </div>