Merge pull request #174 from Kernel360/page-login-kakao-ui

페이지 기능: 로그인 페이지 카카오 UI 제작

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/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/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/map/KakaoMap.tsx

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