페이지 기능: 카카오 공유하기 기능 추가

src/app/login/page.tsx

@@ -8,6 +8,7 @@ import { useForm } from 'react-hook-form';
 import classNames from 'classnames/bind';
 import Link from 'next/link';
 
+import KakaoLoginButton from '@components/home/kakao-login-button/KakaoLoginButton';
 import VALIDATION_MESSAGE_MAP from '@constants/validationMessage';
 import { ISignIn } from '@remote/api/types/auth';
 import useLogin from '@remote/queries/auth/useLogin';
@@ -37,7 +38,7 @@ function LoginPage() {
 
   /* -- redux test -- */
   const userId = useAppSelector((state) => { return state.user.id; });
-  console.log(userId);
+  // console.log(userId);
 
   if (isSuccess) {
     console.log(userId);
@@ -82,6 +83,8 @@ function LoginPage() {
             <Link href="/find-password">비밀번호 찾기</Link>
           </li>
         </ul>
+        <Spacing size={24} />
+        <KakaoLoginButton />
       </main>
     </>
   );

src/app/my-page/page.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useState } from 'react';
 import { useCookies } from 'react-cookie';
 
+import { useQueryClient } from '@tanstack/react-query';
 import classNames from 'classnames/bind';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
@@ -24,6 +25,7 @@ const cx = classNames.bind(styles);
 function MyProfilePage() {
   const router = useRouter();
   const dispatch = useAppDispatch();
+  const query = useQueryClient();
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [cookies, removeCookie] = useCookies(['token']);
 
@@ -41,6 +43,7 @@ function MyProfilePage() {
     // TODO: 먼저 로그아웃 모달이 뜨도록 할지 논의필요
     dispatch(clearUserId());
     removeCookie('token', { path: '/' });
+    query.clear();
     router.push('/');
   };
 

src/components/home/kakao-login-button/KakaoLoginButton.module.scss

@@ -0,0 +1,6 @@
+.kakaoLoginWrapper {
+  display: block;
+  height: 45px;
+  margin: 0 auto;
+  cursor: pointer;
+}

src/components/home/kakao-login-button/KakaoLoginButton.tsx

@@ -0,0 +1,30 @@
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+import classNames from 'classnames/bind';
+import Image from 'next/image';
+
+import KakaoLoginScript from '@shared/kakao-script/KakaoLoginScript';
+
+import styles from './KakaoLoginButton.module.scss';
+
+const cx = classNames.bind(styles);
+
+function KakaoLoginButton() {
+  // TODO: 인가코드를 이용해서 백엔드에 api 요청하기
+  const handleLoginKakao = () => {
+    window.Kakao.Auth.authorize({
+      redirectUri: process.env.NEXT_PUBLIC_KAKAO_REDIRECT_URI,
+    });
+  };
+
+  return (
+    <>
+      <button className={cx('kakaoLoginWrapper')} type="button" onClick={handleLoginKakao}>
+        <Image src="/assets/kakao_login_medium_wide.png" alt="카카오 로그인 버튼" width={300} height={45} />
+      </button>
+      <KakaoLoginScript />
+    </>
+  );
+}
+
+export default KakaoLoginButton;

src/components/shared/header/headerItems/RightIcon.tsx

@@ -8,7 +8,7 @@ import FilledHeart from '@components/icons/FilledHeart';
 import Filter from '@components/icons/Filter';
 import Heart from '@components/icons/Heart';
 import Search from '@components/icons/Search';
-import Share from '@components/icons/Share';
+import KakaoShareButton from '@shared/kakao-share-button/KakaoShareButton';
 
 import { RightIconProps } from '../types/headerType';
 
@@ -50,7 +50,7 @@ function RightIcon({
             : <Heart onClick={handleHeartClick} />}
         </li>
         <li>
-          <Share />
+          <KakaoShareButton />
         </li>
       </ul>
     );

src/components/shared/kakao-script/KakaoLoginScript.tsx

@@ -0,0 +1,30 @@
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+'use client';
+
+import Script from 'next/script';
+
+declare global {
+  interface Window {
+    Kakao: any
+  }
+}
+
+function KakaoLoginScript() {
+  const onLoad = () => {
+    window.Kakao.init(process.env.NEXT_PUBLIC_KAKAO_APP_JS_KEY);
+  };
+
+  return (
+    <Script
+      strategy="afterInteractive"
+      type="text/javascript"
+      src={`https://t1.kakaocdn.net/kakao_js_sdk/${process.env.NEXT_PUBLIC_KAKAO_LOGIN_VERSION}/kakao.min.js`}
+      onReady={onLoad}
+    />
+  );
+}
+
+export default KakaoLoginScript;

src/components/shared/kakao-share-button/KakaoShareButton.tsx

@@ -0,0 +1,24 @@
+/* eslint-disable jsx-a11y/control-has-associated-label */
+
+import Script from 'next/script';
+
+import Share from '@components/icons/Share';
+import useKakaoShare from '@hooks/useKakaoShare';
+
+function KakaoShareButton() {
+  const containerId = useKakaoShare('#kakao-link-btn', process.env.NEXT_PUBLIC_KAKAO_APP_JS_KEY!);
+
+  return (
+    <>
+      <button id={containerId} style={{ cursor: 'pointer' }}>
+        <Share />
+      </button>
+      <Script
+        strategy="afterInteractive"
+        type="text/javascript"
+        src={`https://t1.kakaocdn.net/kakao_js_sdk/${process.env.NEXT_PUBLIC_KAKAO_LOGIN_VERSION}/kakao.min.js`}
+      />
+    </>
+  );
+}
+export default KakaoShareButton;

src/components/shared/map/KakaoMap.tsx

@@ -7,7 +7,7 @@
 
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import Script from 'next/script';
 

src/hooks/useKakaoShare.ts

@@ -0,0 +1,73 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+import { useCallback, useEffect } from 'react';
+
+declare global {
+  interface Window {
+    Kakao: any
+  }
+}
+
+function useKakaoShare(containerId: string, key: string) {
+  const createShareButton = useCallback(() => {
+    // kakao sdk script이 정상적으로 불러와졌으면 window.Kakao로 접근이 가능합니다
+    if (window.Kakao) {
+      const kakao = window.Kakao;
+      // 중복 initialization 방지
+      if (!kakao.isInitialized()) {
+        // 두번째 step 에서 가져온 javascript key 를 이용하여 initialize
+        kakao.init(key);
+      }
+      kakao.Share.createDefaultButton({
+        // Render 부분 id=kakao-link-btn 을 찾아 그부분에 렌더링을 합니다
+        container: containerId,
+        objectType: 'feed',
+        content: {
+          title: 'Washfit',
+          description: '안전한 세차용품 정보 제공 플랫폼',
+          imageUrl:
+            'https://tago.kr/images/sub/TG300-D02_img01.png',
+          link: {
+            webUrl: 'https://dev.washfit.site/',
+            mobileWebUrl: 'https://dev.washfit.site/',
+          },
+        },
+        social: {
+          likeCount: 77,
+          commentCount: 55,
+          sharedCount: 333,
+        },
+        buttons: [
+          // 카카오톡 웹에서 보기
+          {
+            title: '웹으로 보기',
+            link: {
+              mobileWebUrl: 'https://dev.washfit.site/',
+              webUrl: 'https://dev.washfit.site/',
+            },
+          },
+          // 카카오톡 모바일에서 보기
+          {
+            title: '앱으로 보기',
+            link: {
+              mobileWebUrl: 'https://dev.washfit.site/',
+              webUrl: 'https://dev.washfit.site/',
+            },
+          },
+        ],
+      });
+    }
+  }, [containerId, key]);
+
+  useEffect(() => {
+    createShareButton();
+  }, [createShareButton]);
+
+  // #kakao-link-btn과 같은 id에서 '#'제거 과정
+  const id = containerId.substring(1);
+  return id;
+}
+
+export default useKakaoShare;