Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

카카오 로그인 고도화 + 로그인 로그아웃 시 콜백 url 적용 #486

Merged
merged 2 commits into from
Mar 18, 2024
+7 −21
Merged

카카오 로그인 고도화 + 로그인 로그아웃 시 콜백 url 적용 #486

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
676eb6a
feat: kakao login callback with options
hyesungoh Mar 16, 2024
28f4f42
feat: apply callbackUrl
hyesungoh Mar 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/sideMenu/MenuSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ function MenuSection() {
label: '로그아웃',
action: () => {
// 실 환경에서 되는지 체크
logOutHandler();
logOutHandler({ callbackUrl: '/' });
router.replace('/');
},
},
Expand Down
6 changes: 2 additions & 4 deletions src/features/home/KakaoLoginButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const KakaoLoginButton = () => {
if (status === 'authenticated') {
return (
<div css={KakaoLoginWrapper}>
<button type="button" onClick={logOutHandler}>
<button type="button" onClick={() => logOutHandler()}>
로그아웃
</button>
</div>
Expand All @@ -23,7 +23,7 @@ const KakaoLoginButton = () => {
return (
<div css={KakaoLoginWrapper}>
이미 질문폼이 있다면?
<button type="button" css={KakaoLoginButtonCss} onClick={loginHandler}>
<button type="button" css={KakaoLoginButtonCss} onClick={() => loginHandler({ callbackUrl: '/gallery' })}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

로그인하고 결과 보기
</button>
</div>
Expand All @@ -32,13 +32,11 @@ const KakaoLoginButton = () => {

const KakaoLoginWrapper = css`
${BODY_1};
line-height: 24px;
color: ${colors.gray_400};
& * {
${BODY_1};
color: ${colors.gray_400};
}
Expand Down
10 changes: 4 additions & 6 deletions src/hooks/auth/useKakaoLogin.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,16 @@
import { signIn, signOut, useSession } from 'next-auth/react';
import { signIn, type SignInOptions, signOut, type SignOutParams, useSession } from 'next-auth/react';

import { LOCAL_STORAGE_KEY } from '~/constants/storage';

const useKakaoLogin = () => {
const { status } = useSession();

const logOutHandler = () => {
signOut();
const logOutHandler = (options?: SignOutParams) => {
localStorage.removeItem(LOCAL_STORAGE_KEY.accessToken);
signOut(options);
};

const loginHandler = () => {
signIn('kakao');
};
const loginHandler = (options?: SignInOptions) => signIn('kakao', options);

return {
logOutHandler,
Expand Down
10 changes: 0 additions & 10 deletions src/pages/index.page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,15 @@
import { type ReactElement } from 'react';
import Image from 'next/image';
import { useRouter } from 'next/router';
import { css, type Theme } from '@emotion/react';

import Logo from '~/assets/Logo';
import LayoutPaddingTo23 from '~/components/layout/LayoutPaddingTo23';
import SEO from '~/components/SEO/SEO';
import ConditionalCtaLink from '~/features/home/ConditionalCtaLink';
import KakaoLoginButton from '~/features/home/KakaoLoginButton';
import useKakaoLogin from '~/hooks/auth/useKakaoLogin';
import useDidUpdate from '~/hooks/lifeCycle/useDidUpdate';
import { HEAD_2_BOLD } from '~/styles/typo';

export default function Home() {
const router = useRouter();
const { status } = useKakaoLogin();

useDidUpdate(() => {
status === 'authenticated' && router.push('/gallery');
}, [status]);

return (
<>
<SEO />
Expand Down
Loading