diff --git a/public/assets/kakao_login_medium_wide.png b/public/assets/kakao_login_medium_wide.png new file mode 100644 index 00000000..c882acc7 Binary files /dev/null and b/public/assets/kakao_login_medium_wide.png differ 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() { 비밀번호 찾기 + + ); 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('/'); }; 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..d1d12122 --- /dev/null +++ b/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 ( + <> + + + + ); +} + +export default KakaoLoginButton; 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({ : }
  • - +
    • ); 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 ( +