diff --git a/@types/custom-types/index.d.ts b/@types/custom-types/index.d.ts index 4dea3cc..74e16f8 100644 --- a/@types/custom-types/index.d.ts +++ b/@types/custom-types/index.d.ts @@ -1,3 +1,7 @@ +interface Window { + Kakao: Record; +} + declare module '*.svg' { const content: any; export default content; diff --git a/public/index.html b/public/index.html index 402deb5..1cc6f5f 100644 --- a/public/index.html +++ b/public/index.html @@ -6,6 +6,10 @@ + + GILJOB diff --git a/src/assets/images/login.png b/src/assets/images/login.png index bbcd248..6845510 100644 Binary files a/src/assets/images/login.png and b/src/assets/images/login.png differ diff --git a/src/pages/Login/Login.stories.tsx b/src/pages/Login/Login.stories.tsx index b7ac8c1..9bd7ab3 100644 --- a/src/pages/Login/Login.stories.tsx +++ b/src/pages/Login/Login.stories.tsx @@ -1,4 +1,3 @@ -import { BrowserRouter as Router } from 'react-router-dom'; import { Story, Meta } from '@storybook/react'; import Login, { LoginProps } from '@src/pages/Login'; @@ -17,13 +16,6 @@ export default { type: 'boolean', }, }, - decorators: [ - (Story) => ( - - - - ), - ], } as Meta; const Template: Story = (args) => ; diff --git a/src/pages/Login/LoginBox/index.tsx b/src/pages/Login/LoginBox/index.tsx index f05f7f7..5880177 100644 --- a/src/pages/Login/LoginBox/index.tsx +++ b/src/pages/Login/LoginBox/index.tsx @@ -1,12 +1,55 @@ -import React from 'react'; -import { Link } from 'react-router-dom'; +import React, { useCallback } from 'react'; +import { useHistory, Link } from 'react-router-dom'; +import { useDispatch } from 'react-redux'; import { Button, Text } from '@src/components/atoms'; +import { usePostLoginMutation } from '@src/services/giljob'; +import { setAuth, setKakaoToken, setAccessToken } from '@src/slices/authSlice'; import logo from '@src/assets/images/logo.svg'; import './style.scss'; const LoginBox: React.FC = () => { + const [login, { isLoading }] = usePostLoginMutation(); + const dispatch = useDispatch(); + const history = useHistory(); + + const handleLogin = useCallback( + (Kakao) => { + /* Kakao.Auth.login 으로 + 카카오 oauth 팝업창을 띄웁니다. */ + Kakao.Auth.login({ + success(authObj: Record) { + const kakaoAccessToken = authObj.access_token; + // mutation으로 생성된 login 함수 + login({ kakaoAccessToken }) + .unwrap() + .then(({ data }) => { + const { isSignedUp, accessToken } = data; + + if (isSignedUp) { + // 회원 + dispatch(setAccessToken(accessToken)); + dispatch(setAuth(true)); + + history.push('/quest'); + } else { + // 비회원 + dispatch(setKakaoToken(kakaoAccessToken)); + + history.push('/login/signup'); + } + }); + }, + fail(err: string) { + console.log(JSON.stringify(err)); + }, + }); + }, + [dispatch, history, login], + ); + return (
+ {isLoading &&
loading...
} logo { buttonColor="kakao" textColor="main" textSize="medium" + handleClick={() => handleLogin(window.Kakao)} /> { + const [register, { isLoading }] = usePostRegisterMutation(); + const { kakaoAccessToken } = useSelector(authSelector); + const registerState = useSelector(registerSelector); + const dispatch = useDispatch(); + const history = useHistory(); + + useEffect(() => { + /* Redux에 카카오 oauth 토큰을 통해 + 로그인을 안한 사람을 되돌립니다. */ + if (!kakaoAccessToken) history.push('/login'); + }, [kakaoAccessToken, history]); + + const handleRegister = useCallback(() => { + register({ + kakaoAccessToken, + ...registerState, + }) + .unwrap() + .then(({ data }) => { + const { accessToken } = data; + + dispatch(setAccessToken(accessToken)); + dispatch(setAuth(true)); + + dispatch(resetRegister()); + + history.push('/quest'); + }); + }, [register, kakaoAccessToken, registerState, dispatch, history]); + + const handleNickname = useCallback( + (value: string) => { + dispatch(setNickname(value)); + }, + [dispatch], + ); + + const handlePosition = useCallback( + (type: string, value: string | number) => { + dispatch(setPosition({ type, value })); + }, + [dispatch], + ); + + const handleIntro = useCallback( + (value: string) => { + dispatch(setIntro(value)); + }, + [dispatch], + ); + + return ( +
+ {isLoading &&
loading...
} + + 프로필 설정 + +
+
+ + 닉네임 * + + +
+
+ + 직군 * + + +
+
+
+ + 자기 소개 * + +