From 9154fafbe4bb665e845f5195fb1c2312e6fd169c Mon Sep 17 00:00:00 2001
From: bottlewook <bwlimtony@gmail.com>
Date: Mon, 19 Feb 2024 00:56:54 +0900
Subject: [PATCH 1/8] =?UTF-8?q?feat:=20useKakaoShare=20=EC=BB=A4=EC=8A=A4?=
 =?UTF-8?q?=ED=85=80=ED=9B=85=20=EC=A0=9C=EC=9E=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../shared/header/headerItems/RightIcon.tsx   |  4 ++--
 .../kakao-share-button/KakaoShareButton.tsx   | 24 +++++++++++++++++++
 2 files changed, 26 insertions(+), 2 deletions(-)
 create mode 100644 src/components/shared/kakao-share-button/KakaoShareButton.tsx

diff --git a/src/components/shared/header/headerItems/RightIcon.tsx b/src/components/shared/header/headerItems/RightIcon.tsx
index 6297cf68..e2127058 100644
--- a/src/components/shared/header/headerItems/RightIcon.tsx
+++ b/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>
     );
diff --git a/src/components/shared/kakao-share-button/KakaoShareButton.tsx b/src/components/shared/kakao-share-button/KakaoShareButton.tsx
new file mode 100644
index 00000000..2726d759
--- /dev/null
+++ b/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;

From 0458477cfa10eb01c8999a6f9ee9fc8a9d534f8c Mon Sep 17 00:00:00 2001
From: bottlewook <bwlimtony@gmail.com>
Date: Mon, 19 Feb 2024 00:57:22 +0900
Subject: [PATCH 2/8] =?UTF-8?q?feat:=20=EC=B9=B4=EC=B9=B4=EC=98=A4=20?=
 =?UTF-8?q?=EA=B3=B5=EC=9C=A0=ED=95=98=EA=B8=B0=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EC=99=84=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useKakaoShare.ts | 73 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 73 insertions(+)
 create mode 100644 src/hooks/useKakaoShare.ts

diff --git a/src/hooks/useKakaoShare.ts b/src/hooks/useKakaoShare.ts
new file mode 100644
index 00000000..8caf4da5
--- /dev/null
+++ b/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;

From 5e3937410015aa203cff4e795fc0cd31ac4fa95f Mon Sep 17 00:00:00 2001
From: bottlewook <bwlimtony@gmail.com>
Date: Sun, 18 Feb 2024 23:04:16 +0900
Subject: [PATCH 3/8] =?UTF-8?q?assets:=20=EC=B9=B4=EC=B9=B4=EC=98=A4=20?=
 =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EC=82=AC=EC=A7=84=20=EB=93=B1?=
 =?UTF-8?q?=EB=A1=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/assets/kakao_login_medium_wide.png | Bin 0 -> 3307 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 public/assets/kakao_login_medium_wide.png

diff --git a/public/assets/kakao_login_medium_wide.png b/public/assets/kakao_login_medium_wide.png
new file mode 100644
index 0000000000000000000000000000000000000000..c882acc7311d61cc8eab3b316e0b90c64de18dfc
GIT binary patch
literal 3307
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

literal 0
HcmV?d00001


From 4ce73e2dc8b4c98dc1f55d48bda9b9e85c2ae841 Mon Sep 17 00:00:00 2001
From: bottlewook <bwlimtony@gmail.com>
Date: Sun, 18 Feb 2024 23:04:33 +0900
Subject: [PATCH 4/8] =?UTF-8?q?chore:=20useEffect=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/shared/map/KakaoMap.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/shared/map/KakaoMap.tsx b/src/components/shared/map/KakaoMap.tsx
index 40042d40..457b01a7 100644
--- a/src/components/shared/map/KakaoMap.tsx
+++ b/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';
 

From 790457ac66d23d201b9fc4e1966ccaec8ea13c5c Mon Sep 17 00:00:00 2001
From: bottlewook <bwlimtony@gmail.com>
Date: Sun, 18 Feb 2024 23:05:01 +0900
Subject: [PATCH 5/8] =?UTF-8?q?feat:=20KakaoLoginButton=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=A0=9C=EC=9E=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../KakaoLoginButton.module.scss              |  6 ++++
 .../kakao-login-button/KakaoLoginButton.tsx   | 29 +++++++++++++++++++
 2 files changed, 35 insertions(+)
 create mode 100644 src/components/home/kakao-login-button/KakaoLoginButton.module.scss
 create mode 100644 src/components/home/kakao-login-button/KakaoLoginButton.tsx

diff --git a/src/components/home/kakao-login-button/KakaoLoginButton.module.scss b/src/components/home/kakao-login-button/KakaoLoginButton.module.scss
new file mode 100644
index 00000000..d21003ed
--- /dev/null
+++ b/src/components/home/kakao-login-button/KakaoLoginButton.module.scss
@@ -0,0 +1,6 @@
+.kakaoLoginWrapper {
+  display: block;
+  height: 45px;
+  margin: 0 auto;
+  cursor: pointer;
+}
diff --git a/src/components/home/kakao-login-button/KakaoLoginButton.tsx b/src/components/home/kakao-login-button/KakaoLoginButton.tsx
new file mode 100644
index 00000000..320be6e5
--- /dev/null
+++ b/src/components/home/kakao-login-button/KakaoLoginButton.tsx
@@ -0,0 +1,29 @@
+/* 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 KakaoScript from '@shared/kakao-script/KakaoScript';
+
+import styles from './KakaoLoginButton.module.scss';
+
+const cx = classNames.bind(styles);
+
+function KakaoLoginButton() {
+  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>
+      <KakaoScript />
+    </>
+  );
+}
+
+export default KakaoLoginButton;

From df1e423e201c9653d212487c3e9e4511c55f9fc3 Mon Sep 17 00:00:00 2001
From: bottlewook <bwlimtony@gmail.com>
Date: Sun, 18 Feb 2024 23:07:29 +0900
Subject: [PATCH 6/8] =?UTF-8?q?feat:=20=EC=B9=B4=EC=B9=B4=EC=98=A4=20?=
 =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EC=9D=B8=EA=B0=80=EC=BD=94?=
 =?UTF-8?q?=EB=93=9C=20=EB=A1=9C=EC=A7=81=20=EC=A0=9C=EC=9E=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/login/page.tsx                        |  5 +++-
 .../kakao-login-button/KakaoLoginButton.tsx   |  5 ++--
 .../shared/kakao-script/KakaoLoginScript.tsx  | 30 +++++++++++++++++++
 3 files changed, 37 insertions(+), 3 deletions(-)
 create mode 100644 src/components/shared/kakao-script/KakaoLoginScript.tsx

diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index ce9fc44b..9dd842a0 100644
--- a/src/app/login/page.tsx
+++ b/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>
     </>
   );
diff --git a/src/components/home/kakao-login-button/KakaoLoginButton.tsx b/src/components/home/kakao-login-button/KakaoLoginButton.tsx
index 320be6e5..d1d12122 100644
--- a/src/components/home/kakao-login-button/KakaoLoginButton.tsx
+++ b/src/components/home/kakao-login-button/KakaoLoginButton.tsx
@@ -3,13 +3,14 @@
 import classNames from 'classnames/bind';
 import Image from 'next/image';
 
-import KakaoScript from '@shared/kakao-script/KakaoScript';
+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,
@@ -21,7 +22,7 @@ function KakaoLoginButton() {
       <button className={cx('kakaoLoginWrapper')} type="button" onClick={handleLoginKakao}>
         <Image src="/assets/kakao_login_medium_wide.png" alt="카카오 로그인 버튼" width={300} height={45} />
       </button>
-      <KakaoScript />
+      <KakaoLoginScript />
     </>
   );
 }
diff --git a/src/components/shared/kakao-script/KakaoLoginScript.tsx b/src/components/shared/kakao-script/KakaoLoginScript.tsx
new file mode 100644
index 00000000..15159d89
--- /dev/null
+++ b/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;

From e5c793b7598bc0bfb0a7f51f1eb68812c3cf9347 Mon Sep 17 00:00:00 2001
From: bottlewook <bwlimtony@gmail.com>
Date: Sun, 18 Feb 2024 23:31:59 +0900
Subject: [PATCH 7/8] =?UTF-8?q?feat:=20query=20clear=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/my-page/page.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/app/my-page/page.tsx b/src/app/my-page/page.tsx
index 6b0c9a7a..87efc03d 100644
--- a/src/app/my-page/page.tsx
+++ b/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('/');
   };
 

From 0f93897f98c82d32b43191e5566854335dbfd43a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9E=84=EB=B3=91=EC=9A=B1?=
 <imbyeong-wook@imbyeong-ug-ui-MacBookPro.local>
Date: Mon, 19 Feb 2024 15:36:32 +0900
Subject: [PATCH 8/8] =?UTF-8?q?chore:=20=EA=B2=BD=EB=A1=9C=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/shared/kakao-share-button/KakaoShareButton.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/shared/kakao-share-button/KakaoShareButton.tsx b/src/components/shared/kakao-share-button/KakaoShareButton.tsx
index 2726d759..22fe9cbe 100644
--- a/src/components/shared/kakao-share-button/KakaoShareButton.tsx
+++ b/src/components/shared/kakao-share-button/KakaoShareButton.tsx
@@ -2,7 +2,7 @@
 
 import Script from 'next/script';
 
-import Share from '@/components/icons/Share';
+import Share from '@components/icons/Share';
 import useKakaoShare from '@hooks/useKakaoShare';
 
 function KakaoShareButton() {