From 624b772cf65d52319aa3b76b0b97c2cef2ceb8ba Mon Sep 17 00:00:00 2001 From: Hyoin-Kim Date: Sun, 16 Jan 2022 15:09:13 +0900 Subject: [PATCH 01/16] =?UTF-8?q?=F0=9F=94=A8refactor:=20=EB=A1=9C?= =?UTF-8?q?=EA=B7=B8=EC=9D=B8=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EA=B8=B0?= =?UTF-8?q?=EB=B0=98=20=EB=A6=AC=ED=8E=99=ED=86=A0=EB=A7=81=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/infrastructure/api/auth.ts | 1 + src/presentation/components/LoginForm/index.tsx | 6 +++--- src/presentation/components/LoginForm/style.ts | 13 ++++++------- 3 files changed, 10 insertions(+), 10 deletions(-) create mode 100644 src/infrastructure/api/auth.ts diff --git a/src/infrastructure/api/auth.ts b/src/infrastructure/api/auth.ts new file mode 100644 index 00000000..1b295953 --- /dev/null +++ b/src/infrastructure/api/auth.ts @@ -0,0 +1 @@ +//s \ No newline at end of file diff --git a/src/presentation/components/LoginForm/index.tsx b/src/presentation/components/LoginForm/index.tsx index 26bbccf1..3faa1ccc 100644 --- a/src/presentation/components/LoginForm/index.tsx +++ b/src/presentation/components/LoginForm/index.tsx @@ -10,10 +10,10 @@ function LoginForm() { return ( - 로그인 + 너를 통해 발견하는 나 - 환영합니다! 너가소개서에 가입하고
- 다양한 서비스를 이용해보세요 + 나와 함께한 사람들이 써주는
+ 나의 소개서, 너가소개서 diff --git a/src/presentation/components/LoginForm/style.ts b/src/presentation/components/LoginForm/style.ts index 58b4a202..f737c788 100644 --- a/src/presentation/components/LoginForm/style.ts +++ b/src/presentation/components/LoginForm/style.ts @@ -8,18 +8,17 @@ export const StLogin = styled.div` font-weight: 600; font-size: 24px; line-height: 100%; + margin-top:12px; `; export const StNoticeWrapper = styled.div` display: flex; - font-weight: 600; - font-size: 20px; - line-height: 140%; + font-weight: 500; + font-size: 16px; + line-height: 143.99%; + letter-spacing: -0.01em; margin-top: 32px; margin-bottom: 102px; - & > p { - display: flex; - color: ${COLOR.CORAL_MAIN}; - } + color: ${COLOR.GRAY_5}; `; export const StLoginButton = styled.button` display: flex; From 48fbf6875932007668d1d2e4ee11415f836db391 Mon Sep 17 00:00:00 2001 From: Hyoin-Kim Date: Tue, 18 Jan 2022 02:39:40 +0900 Subject: [PATCH 02/16] =?UTF-8?q?=E2=9C=A8feat:=20=EB=A0=88=EC=BD=94?= =?UTF-8?q?=EC=9D=BC=20=EC=82=AC=EC=9A=A9=ED=95=98=EC=97=AC=20=EC=B9=B4?= =?UTF-8?q?=EC=B9=B4=EC=98=A4=20auth?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/application/stores/kakao-auth.ts | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 src/application/stores/kakao-auth.ts diff --git a/src/application/stores/kakao-auth.ts b/src/application/stores/kakao-auth.ts new file mode 100644 index 00000000..d2ebb58e --- /dev/null +++ b/src/application/stores/kakao-auth.ts @@ -0,0 +1,7 @@ +import { atom } from 'recoil'; + +export const kakaoAuthTokenState = atom({ + key: 'kakaoAuthTokenState', + default: '', + }); + \ No newline at end of file From 8fcebdb7b6f6ffdc3ed3350082ee5582a99dd32d Mon Sep 17 00:00:00 2001 From: Hyoin-Kim Date: Tue, 18 Jan 2022 02:40:11 +0900 Subject: [PATCH 03/16] =?UTF-8?q?=E2=9C=A8feat:=20=EC=B9=B4=EC=B9=B4?= =?UTF-8?q?=EC=98=A4=ED=86=A1=20=EC=97=B0=EA=B2=B0=ED=95=98=EC=97=AC=20?= =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EA=B5=AC=ED=98=84=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/infrastructure/api/auth.ts | 1 - .../components/LoginForm/OAuth.ts | 6 ++--- .../pages/OAuthRedirectHandler/index.tsx | 25 +++++++++++++++++++ src/presentation/routes/UserRouter.tsx | 3 +++ 4 files changed, 31 insertions(+), 4 deletions(-) delete mode 100644 src/infrastructure/api/auth.ts create mode 100644 src/presentation/pages/OAuthRedirectHandler/index.tsx diff --git a/src/infrastructure/api/auth.ts b/src/infrastructure/api/auth.ts deleted file mode 100644 index 1b295953..00000000 --- a/src/infrastructure/api/auth.ts +++ /dev/null @@ -1 +0,0 @@ -//s \ No newline at end of file diff --git a/src/presentation/components/LoginForm/OAuth.ts b/src/presentation/components/LoginForm/OAuth.ts index c9e275dc..d27a4029 100644 --- a/src/presentation/components/LoginForm/OAuth.ts +++ b/src/presentation/components/LoginForm/OAuth.ts @@ -1,4 +1,4 @@ -const CLIENT_ID = `${process.env.REACT_APP_CLIENT_ID}`; -const REDIRECT_URI = 'http://localhost:3000/oauth'; +export const CLIENT_ID = `${process.env.REACT_APP_CLIENT_ID}`; +const REDIRECT_URI = 'http://localhost:3000/auth/kakao/callback'; -export const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code`; +export const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code`; \ No newline at end of file diff --git a/src/presentation/pages/OAuthRedirectHandler/index.tsx b/src/presentation/pages/OAuthRedirectHandler/index.tsx new file mode 100644 index 00000000..87baf3f9 --- /dev/null +++ b/src/presentation/pages/OAuthRedirectHandler/index.tsx @@ -0,0 +1,25 @@ +/* eslint-disable @typescript-eslint/no-unused-vars */ +import { kakaoAuthTokenState } from "@stores/kakao-auth"; +import { useEffect } from "react"; +import { useNavigate } from "react-router-dom"; +import { useSetRecoilState } from "recoil"; + +const OAuthRedirectHandler = () => { + const navigate = useNavigate(); + const setKakaoToken = useSetRecoilState(kakaoAuthTokenState); + useEffect(()=>{ + const code = new URL(window.location.href).searchParams.get('code'); + setKakaoToken(code??''); + console.log(code); + navigate('/join'); + },[]); + console.log("들어옴"); + + return ( +
+ +
+ ); +}; + +export default OAuthRedirectHandler; \ No newline at end of file diff --git a/src/presentation/routes/UserRouter.tsx b/src/presentation/routes/UserRouter.tsx index 5318e1aa..3d5ef3ea 100644 --- a/src/presentation/routes/UserRouter.tsx +++ b/src/presentation/routes/UserRouter.tsx @@ -1,6 +1,7 @@ import { Route, Routes } from 'react-router-dom'; import Login from '@pages/Login'; import Join from '@pages/Join'; +import OAuthRedirectHandler from '@pages/OAuthRedirectHandler'; import Home from '@pages/Home'; import JoinComplete from '@pages/JoinComplete'; @@ -10,6 +11,8 @@ const LoginRouter = () => ( } /> } /> } /> + + } /> ); From ca949551a9d2ca4733db7d56c4bf69edc50f8a87 Mon Sep 17 00:00:00 2001 From: Hyoin-Kim Date: Tue, 18 Jan 2022 19:44:34 +0900 Subject: [PATCH 04/16] =?UTF-8?q?=F0=9F=93=9D=20chore:=20=ED=9A=8C?= =?UTF-8?q?=EC=9B=90=EA=B0=80=EC=9E=85=20=ED=83=80=EC=9E=85=20=EC=A7=80?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/infrastructure/api/types/user.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/infrastructure/api/types/user.ts b/src/infrastructure/api/types/user.ts index 6839a73f..398fa5a1 100644 --- a/src/infrastructure/api/types/user.ts +++ b/src/infrastructure/api/types/user.ts @@ -10,3 +10,12 @@ export interface LoginUser { userID: string; profileImage: string; } + +export interface IJoin { + profileId: string; + name: string; + image: string; + provider: string; + accesstoken: string; + refreshtoken: string; +} From 19627feec730c3b2e379fb60d5a3bae3444dee1e Mon Sep 17 00:00:00 2001 From: Hyoin-Kim Date: Tue, 18 Jan 2022 19:45:22 +0900 Subject: [PATCH 05/16] =?UTF-8?q?=E2=9C=A8feat:=20=EB=A1=9C=EA=B7=B8?= =?UTF-8?q?=EC=9D=B8/=ED=9A=8C=EC=9B=90=EA=B0=80=EC=9E=85=20api=EC=97=B0?= =?UTF-8?q?=EA=B2=B0=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/JoinForm/index.tsx | 33 +++++++++++-- .../pages/OAuthRedirectHandler/index.tsx | 46 +++++++++++++++---- 2 files changed, 67 insertions(+), 12 deletions(-) diff --git a/src/presentation/components/JoinForm/index.tsx b/src/presentation/components/JoinForm/index.tsx index e9f339f7..d8358acb 100644 --- a/src/presentation/components/JoinForm/index.tsx +++ b/src/presentation/components/JoinForm/index.tsx @@ -11,10 +11,18 @@ import { } from './style'; import CommonInput from '@components/common/CommonInput'; import FileUpload from '@components/common/FileUpload'; -import { icProfile } from '@assets/icons'; -import { icEmail } from '@assets/icons'; +import { icProfile,icEmail } from '@assets/icons'; +import { useRecoilValue } from 'recoil'; +import {kakaoAccessToken,kakaoRefreshToken} from "@stores/kakao-auth"; +import {postJoin} from '@api/login-user'; +import { Navigate } from 'react-router-dom'; + function JoinForm() { + const accessToken = useRecoilValue(kakaoAccessToken); + const refreshToken = useRecoilValue(kakaoRefreshToken); + console.log("조인페이지코드",accessToken); + console.log("조인페이지코드2",refreshToken); const [isConditionMet, setIsConditionMet] = useState({ id: false, name: false, @@ -22,6 +30,14 @@ function JoinForm() { const [image, setImage] = useState(null); const [inputId, setInputId] = useState(''); const [inputName, setInputName] = useState(''); + const [userData, setUserData] = useState({ + id: inputId, + name: inputName, + image: '', + provider:'카카오톡', + accesstoken: accessToken, + refreshtoken: refreshToken, + }) useEffect(() => { const idCheck = /^[a-z|0-9|.|_]+$/; @@ -39,8 +55,17 @@ function JoinForm() { const onChangeName = (value: string) => { setInputName(value); }; - const onClickSubmitUserInfo = (e: React.MouseEvent) => { - e.preventDefault(); + const onClickSubmitUserInfo = async()=> { + const postData = { + profileId: userData.id, + name: userData.name, + image: userData.image, + provider: userData.provider, + accesstoken: userData.accesstoken, + refreshtoken: userData.refreshtoken, + }; + const getData = await postJoin(postData); + getData; }; return ( diff --git a/src/presentation/pages/OAuthRedirectHandler/index.tsx b/src/presentation/pages/OAuthRedirectHandler/index.tsx index 87baf3f9..04e89af9 100644 --- a/src/presentation/pages/OAuthRedirectHandler/index.tsx +++ b/src/presentation/pages/OAuthRedirectHandler/index.tsx @@ -1,24 +1,54 @@ -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { kakaoAuthTokenState } from "@stores/kakao-auth"; +import { kakaoAuthTokenState ,kakaoAccessToken, kakaoRefreshToken } from "@stores/kakao-auth"; +import axios from "axios"; import { useEffect } from "react"; import { useNavigate } from "react-router-dom"; import { useSetRecoilState } from "recoil"; +import {CLIENT_ID,REDIRECT_URI} from '@components/LoginForm/OAuth'; const OAuthRedirectHandler = () => { const navigate = useNavigate(); const setKakaoToken = useSetRecoilState(kakaoAuthTokenState); + const setKakaoAccessToken = useSetRecoilState(kakaoAccessToken); + const setKakaoRefreshToken = useSetRecoilState(kakaoRefreshToken); + useEffect(()=>{ const code = new URL(window.location.href).searchParams.get('code'); - setKakaoToken(code??''); - console.log(code); + setKakaoToken(code??''); //인가코드 navigate('/join'); + if(code){ + getKakaoTokenHandler(code.toString()); + } },[]); - console.log("들어옴"); + + //토큰 발급 REST API + const getKakaoTokenHandler = async(code:string) => { + const data:any = { + grant_type: "authorization_code", + client_id: CLIENT_ID, + redirect_uri: REDIRECT_URI, + code: code + } + const queryString = Object.keys(data) + .map((k:any)=> encodeURIComponent(k) + '=' + encodeURIComponent(data[k])) + .join('&'); + + console.log("쿼리스트링",queryString); + + axios.post('https://kauth.kakao.com/oauth/token',queryString,{ + headers: { + 'Content-type': 'application/x-www-form-urlencoded;charset=utf-8' + } + }) .then((res)=>{ + //서버에 토큰 전송 + console.log("Res",res); + setKakaoAccessToken(res.data.access_token); + setKakaoRefreshToken(res.data.refresh_token); + }) + } return ( -
- -
+ <> + ); }; From 74cc85018093bedfa7dc46d33875f1faf717df8e Mon Sep 17 00:00:00 2001 From: Hyoin-Kim Date: Tue, 18 Jan 2022 19:46:39 +0900 Subject: [PATCH 06/16] =?UTF-8?q?=E2=9C=A8feat:=20recoil=20=EC=82=AC?= =?UTF-8?q?=EC=9A=A9=ED=95=98=EC=97=AC=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=ED=86=A0=ED=81=B0=20=EA=B0=92=20=EA=B4=80=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/application/stores/kakao-auth.ts | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/application/stores/kakao-auth.ts b/src/application/stores/kakao-auth.ts index d2ebb58e..8307ccda 100644 --- a/src/application/stores/kakao-auth.ts +++ b/src/application/stores/kakao-auth.ts @@ -4,4 +4,13 @@ export const kakaoAuthTokenState = atom({ key: 'kakaoAuthTokenState', default: '', }); - \ No newline at end of file + +export const kakaoAccessToken = atom({ + key: 'kakaoAccessToken', + default: '', +}); + +export const kakaoRefreshToken = atom({ + key: 'kakaoRefreshToken', + default: '', +}); \ No newline at end of file From 8f4e2bd2897aa26cfcd0d12e4ee8bdf3463c54d9 Mon Sep 17 00:00:00 2001 From: Hyoin-Kim Date: Tue, 18 Jan 2022 19:47:05 +0900 Subject: [PATCH 07/16] =?UTF-8?q?=E2=9C=A8feat:=20=EC=84=9C=EB=B2=84=20?= =?UTF-8?q?=EC=97=B0=EA=B2=B0=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/infrastructure/api/login-user.ts | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/src/infrastructure/api/login-user.ts b/src/infrastructure/api/login-user.ts index 8aff17eb..a04d1dd4 100644 --- a/src/infrastructure/api/login-user.ts +++ b/src/infrastructure/api/login-user.ts @@ -1,5 +1,20 @@ -import { LoginUser } from './types/user'; +import { LoginUser, IJoin } from './types/user'; +import { publicAPI } from '../remote/base'; export interface LoginUserService { getUserInfo(token: string): Promise; } + +export const postJoin = async (joinData: IJoin) => { + try { + const response = await publicAPI.post({url:`/auth/register`,data: joinData}); + console.log("대답말해라",response); + if(response.status === 200){ + console.log(response.data); + } + }catch (e){ + console.log("잘못됨",e); + + } + +} From 8950a4a4f2c5ff49b4879e778b8464a0c356ff59 Mon Sep 17 00:00:00 2001 From: Hyoin-Kim Date: Tue, 18 Jan 2022 19:47:55 +0900 Subject: [PATCH 08/16] =?UTF-8?q?=F0=9F=93=9Dchore:=20=EB=A6=AC=EB=8B=A4?= =?UTF-8?q?=EC=9D=B4=EB=A0=89=ED=8A=B8=20uri=20export=20=ED=95=B4=EC=98=A4?= =?UTF-8?q?=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/presentation/components/LoginForm/OAuth.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/presentation/components/LoginForm/OAuth.ts b/src/presentation/components/LoginForm/OAuth.ts index d27a4029..330eb0a7 100644 --- a/src/presentation/components/LoginForm/OAuth.ts +++ b/src/presentation/components/LoginForm/OAuth.ts @@ -1,4 +1,4 @@ export const CLIENT_ID = `${process.env.REACT_APP_CLIENT_ID}`; -const REDIRECT_URI = 'http://localhost:3000/auth/kakao/callback'; +export const REDIRECT_URI = 'http://localhost:3000/auth/kakao/callback'; export const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code`; \ No newline at end of file From 5ddf234c671f616d7a619bb061dd536c6f95a701 Mon Sep 17 00:00:00 2001 From: Hyoin-Kim Date: Wed, 19 Jan 2022 01:56:44 +0900 Subject: [PATCH 09/16] =?UTF-8?q?=E2=9C=A8feat:=20=EC=B9=B4=EC=B9=B4?= =?UTF-8?q?=EC=98=A4=20=EC=86=8C=EC=85=9C=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/application/stores/kakao-auth.ts | 13 +-- src/infrastructure/api/login-user.ts | 26 +++-- .../components/JoinForm/index.tsx | 51 +++++----- .../pages/OAuthRedirectHandler/index.tsx | 99 ++++++++++++------- 4 files changed, 114 insertions(+), 75 deletions(-) diff --git a/src/application/stores/kakao-auth.ts b/src/application/stores/kakao-auth.ts index 8307ccda..264eb035 100644 --- a/src/application/stores/kakao-auth.ts +++ b/src/application/stores/kakao-auth.ts @@ -1,16 +1,11 @@ import { atom } from 'recoil'; -export const kakaoAuthTokenState = atom({ - key: 'kakaoAuthTokenState', - default: '', - }); - -export const kakaoAccessToken = atom({ - key: 'kakaoAccessToken', +export const kakaoAccessTokenState = atom({ + key: 'kakaoAccessTokenState', default: '', }); -export const kakaoRefreshToken = atom({ - key: 'kakaoRefreshToken', +export const kakaoRefreshTokenState = atom({ + key: 'kakaoRefreshTokenState', default: '', }); \ No newline at end of file diff --git a/src/infrastructure/api/login-user.ts b/src/infrastructure/api/login-user.ts index a04d1dd4..4f8cbf2e 100644 --- a/src/infrastructure/api/login-user.ts +++ b/src/infrastructure/api/login-user.ts @@ -1,20 +1,32 @@ -import { LoginUser, IJoin } from './types/user'; +import { LoginUser } from './types/user'; import { publicAPI } from '../remote/base'; export interface LoginUserService { getUserInfo(token: string): Promise; } -export const postJoin = async (joinData: IJoin) => { +export const postLogin = async (kakaoToken:string) : Promise<{authUser?:object;accesstoken:string;refreshtoken:string}> => { + try{ + const response = await publicAPI.post({url:`/auth/login`,data:{authenticationCode:kakaoToken, provider:'kakao'} }) + console.log(response); + if(response.status===200) return response.data + else throw '로그인 실패' + }catch (e){ + console.error(e) + throw '로그인 실패' //후에 처리할거 + } +} + +export const postJoin = async (joinData: FormData) => { try { - const response = await publicAPI.post({url:`/auth/register`,data: joinData}); - console.log("대답말해라",response); + const response = await publicAPI.post({url:`/auth/register`,data: joinData, type:'multipart'}); if(response.status === 200){ - console.log(response.data); + return response.data } + throw '회원가입 실패' }catch (e){ - console.log("잘못됨",e); - + console.error(e) + throw '회원가입 실패' } } diff --git a/src/presentation/components/JoinForm/index.tsx b/src/presentation/components/JoinForm/index.tsx index d8358acb..0b508b90 100644 --- a/src/presentation/components/JoinForm/index.tsx +++ b/src/presentation/components/JoinForm/index.tsx @@ -13,14 +13,16 @@ import CommonInput from '@components/common/CommonInput'; import FileUpload from '@components/common/FileUpload'; import { icProfile,icEmail } from '@assets/icons'; import { useRecoilValue } from 'recoil'; -import {kakaoAccessToken,kakaoRefreshToken} from "@stores/kakao-auth"; +import {kakaoAccessTokenState,kakaoRefreshTokenState} from "@stores/kakao-auth"; import {postJoin} from '@api/login-user'; -import { Navigate } from 'react-router-dom'; +import { useLoginUser } from '@hooks/useLoginUser'; +import { createWatchProgram } from 'typescript'; +import { useNavigate } from 'react-router-dom'; function JoinForm() { - const accessToken = useRecoilValue(kakaoAccessToken); - const refreshToken = useRecoilValue(kakaoRefreshToken); + const accessToken = useRecoilValue(kakaoAccessTokenState); + const refreshToken = useRecoilValue(kakaoRefreshTokenState); console.log("조인페이지코드",accessToken); console.log("조인페이지코드2",refreshToken); const [isConditionMet, setIsConditionMet] = useState({ @@ -30,14 +32,8 @@ function JoinForm() { const [image, setImage] = useState(null); const [inputId, setInputId] = useState(''); const [inputName, setInputName] = useState(''); - const [userData, setUserData] = useState({ - id: inputId, - name: inputName, - image: '', - provider:'카카오톡', - accesstoken: accessToken, - refreshtoken: refreshToken, - }) + const { setAccessToken} = useLoginUser(); + const navigate = useNavigate(); useEffect(() => { const idCheck = /^[a-z|0-9|.|_]+$/; @@ -55,18 +51,27 @@ function JoinForm() { const onChangeName = (value: string) => { setInputName(value); }; - const onClickSubmitUserInfo = async()=> { - const postData = { - profileId: userData.id, - name: userData.name, - image: userData.image, - provider: userData.provider, - accesstoken: userData.accesstoken, - refreshtoken: userData.refreshtoken, - }; - const getData = await postJoin(postData); - getData; + + const onClickSubmitUserInfo = async(e: React.MouseEvent)=> { + e.preventDefault(); + try { + const form = new FormData(); + form.append('profileId', inputId); + form.append('name',inputName); + image && form.append('image',image); + form.append('provider','kakao'); + form.append('accesstoken',accessToken); + form.append('refreshtoken',refreshToken); + + const getData = await postJoin(form); + setAccessToken(getData.accesstoken); + navigate('/home') + } catch(error) { + console.error(error); //나중에 또 처리합시다. + } + }; + return ( diff --git a/src/presentation/pages/OAuthRedirectHandler/index.tsx b/src/presentation/pages/OAuthRedirectHandler/index.tsx index 04e89af9..2445e9f1 100644 --- a/src/presentation/pages/OAuthRedirectHandler/index.tsx +++ b/src/presentation/pages/OAuthRedirectHandler/index.tsx @@ -1,50 +1,77 @@ -import { kakaoAuthTokenState ,kakaoAccessToken, kakaoRefreshToken } from "@stores/kakao-auth"; -import axios from "axios"; +/* eslint-disable @typescript-eslint/no-unused-vars */ +import { kakaoAccessTokenState,kakaoRefreshTokenState } from "@stores/kakao-auth"; import { useEffect } from "react"; import { useNavigate } from "react-router-dom"; import { useSetRecoilState } from "recoil"; -import {CLIENT_ID,REDIRECT_URI} from '@components/LoginForm/OAuth'; +import { postLogin } from '@api/login-user'; +import { useLoginUser } from '@hooks/useLoginUser'; const OAuthRedirectHandler = () => { const navigate = useNavigate(); - const setKakaoToken = useSetRecoilState(kakaoAuthTokenState); - const setKakaoAccessToken = useSetRecoilState(kakaoAccessToken); - const setKakaoRefreshToken = useSetRecoilState(kakaoRefreshToken); + const {setAccessToken} = useLoginUser(); + const setKakaoAccessToken = useSetRecoilState(kakaoAccessTokenState); + const setKakaoRefreshToken = useSetRecoilState(kakaoRefreshTokenState); useEffect(()=>{ - const code = new URL(window.location.href).searchParams.get('code'); - setKakaoToken(code??''); //인가코드 - navigate('/join'); - if(code){ - getKakaoTokenHandler(code.toString()); - } + const code = new URL(window.location.href).searchParams.get('code') ?? ''; //인가코드 + //if(code) getKakaoTokenHandler(code.toString()) + console.log(code); + postLogin(code).then(response => { + if(response.authUser) { + setAccessToken(response.accesstoken); + navigate("/home"); + } else { + setKakaoAccessToken(response.accesstoken); + setKakaoRefreshToken(response.refreshtoken); + navigate('/join'); + } + }) + + + /* + 1. postLogin에서 내가 회원가입한 적이 있는지 검사 + 2-1. 회워낙입한 적이 있따면 SETaCEESSToken해주고 메인페이지로 navigate + 2-2. 회원가입한 적이 없다면 밑에꺼 그대로 + */ },[]); - //토큰 발급 REST API - const getKakaoTokenHandler = async(code:string) => { - const data:any = { - grant_type: "authorization_code", - client_id: CLIENT_ID, - redirect_uri: REDIRECT_URI, - code: code - } - const queryString = Object.keys(data) - .map((k:any)=> encodeURIComponent(k) + '=' + encodeURIComponent(data[k])) - .join('&'); - - console.log("쿼리스트링",queryString); - - axios.post('https://kauth.kakao.com/oauth/token',queryString,{ - headers: { - 'Content-type': 'application/x-www-form-urlencoded;charset=utf-8' - } - }) .then((res)=>{ - //서버에 토큰 전송 - console.log("Res",res); - setKakaoAccessToken(res.data.access_token); - setKakaoRefreshToken(res.data.refresh_token); + /* + useEffect(()=>{ + if(kakaoToken==='') return + console.log(kakaoToken) + postLogin(kakaoToken).then(response => { + if(response.authUser) { + setAccessToken(response.accesstoken) + navigate("/home") + } else {navigate('/join'); } }) - } + }, [kakaoToken]) +*/ + //토큰 발급 REST API + // const getKakaoTokenHandler = async (code:string) => { + // const data:any = { + // grant_type: "authorization_code", + // client_id: CLIENT_ID, + // redirect_uri: REDIRECT_URI, + // code: code + // } + // const queryString = Object.keys(data) + // .map((k:any)=> encodeURIComponent(k) + '=' + encodeURIComponent(data[k])) + // .join('&'); + + // console.log("쿼리스트링",queryString); + + // axios.post('https://kauth.kakao.com/oauth/token',queryString,{ + // headers: { + // 'Content-type': 'application/x-www-form-urlencoded;charset=utf-8' + // } + // }) .then((res)=>{ + // //서버에 토큰 전송 + // console.log("Res",res); + // setKakaoAccessToken(res.data.access_token); + // setKakaoRefreshToken(res.data.refresh_token); + // }) + // } return ( <> From fae8b005518ac31bd5b2d864c732f5df5925b631 Mon Sep 17 00:00:00 2001 From: Hyoin-Kim Date: Wed, 19 Jan 2022 03:30:04 +0900 Subject: [PATCH 10/16] =?UTF-8?q?=F0=9F=94=A8refactor:=20=EB=B6=88?= =?UTF-8?q?=ED=95=84=EC=9A=94=ED=95=9C=20=EC=A3=BC=EC=84=9D=20=EC=BD=94?= =?UTF-8?q?=EB=93=9C=20=EC=A0=9C=EA=B1=B0=20=EB=B0=8F=20response.user=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../pages/OAuthRedirectHandler/index.tsx | 49 +------------------ 1 file changed, 1 insertion(+), 48 deletions(-) diff --git a/src/presentation/pages/OAuthRedirectHandler/index.tsx b/src/presentation/pages/OAuthRedirectHandler/index.tsx index 2445e9f1..15081079 100644 --- a/src/presentation/pages/OAuthRedirectHandler/index.tsx +++ b/src/presentation/pages/OAuthRedirectHandler/index.tsx @@ -1,4 +1,3 @@ -/* eslint-disable @typescript-eslint/no-unused-vars */ import { kakaoAccessTokenState,kakaoRefreshTokenState } from "@stores/kakao-auth"; import { useEffect } from "react"; import { useNavigate } from "react-router-dom"; @@ -14,10 +13,9 @@ const OAuthRedirectHandler = () => { useEffect(()=>{ const code = new URL(window.location.href).searchParams.get('code') ?? ''; //인가코드 - //if(code) getKakaoTokenHandler(code.toString()) console.log(code); postLogin(code).then(response => { - if(response.authUser) { + if(response.user) { setAccessToken(response.accesstoken); navigate("/home"); } else { @@ -26,53 +24,8 @@ const OAuthRedirectHandler = () => { navigate('/join'); } }) - - - /* - 1. postLogin에서 내가 회원가입한 적이 있는지 검사 - 2-1. 회워낙입한 적이 있따면 SETaCEESSToken해주고 메인페이지로 navigate - 2-2. 회원가입한 적이 없다면 밑에꺼 그대로 - */ },[]); - /* - useEffect(()=>{ - if(kakaoToken==='') return - console.log(kakaoToken) - postLogin(kakaoToken).then(response => { - if(response.authUser) { - setAccessToken(response.accesstoken) - navigate("/home") - } else {navigate('/join'); } - }) - }, [kakaoToken]) -*/ - //토큰 발급 REST API - // const getKakaoTokenHandler = async (code:string) => { - // const data:any = { - // grant_type: "authorization_code", - // client_id: CLIENT_ID, - // redirect_uri: REDIRECT_URI, - // code: code - // } - // const queryString = Object.keys(data) - // .map((k:any)=> encodeURIComponent(k) + '=' + encodeURIComponent(data[k])) - // .join('&'); - - // console.log("쿼리스트링",queryString); - - // axios.post('https://kauth.kakao.com/oauth/token',queryString,{ - // headers: { - // 'Content-type': 'application/x-www-form-urlencoded;charset=utf-8' - // } - // }) .then((res)=>{ - // //서버에 토큰 전송 - // console.log("Res",res); - // setKakaoAccessToken(res.data.access_token); - // setKakaoRefreshToken(res.data.refresh_token); - // }) - // } - return ( <> From 7761c5435329abd2fb4d0485678b2828f7573021 Mon Sep 17 00:00:00 2001 From: Hyoin-Kim Date: Wed, 19 Jan 2022 03:30:27 +0900 Subject: [PATCH 11/16] =?UTF-8?q?=F0=9F=94=A8refactor:=20=EC=BD=94?= =?UTF-8?q?=EB=93=9C=20=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/infrastructure/api/login-user.ts | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/src/infrastructure/api/login-user.ts b/src/infrastructure/api/login-user.ts index 4f8cbf2e..fabadfc9 100644 --- a/src/infrastructure/api/login-user.ts +++ b/src/infrastructure/api/login-user.ts @@ -5,15 +5,15 @@ export interface LoginUserService { getUserInfo(token: string): Promise; } -export const postLogin = async (kakaoToken:string) : Promise<{authUser?:object;accesstoken:string;refreshtoken:string}> => { +export const postLogin = async (kakaoToken:string) : Promise<{user?:object;accesstoken:string;refreshtoken:string}> => { try{ const response = await publicAPI.post({url:`/auth/login`,data:{authenticationCode:kakaoToken, provider:'kakao'} }) console.log(response); if(response.status===200) return response.data - else throw '로그인 실패' + else throw '로그인 실패'; }catch (e){ console.error(e) - throw '로그인 실패' //후에 처리할거 + throw '로그인 실패'; } } @@ -21,12 +21,11 @@ export const postJoin = async (joinData: FormData) => { try { const response = await publicAPI.post({url:`/auth/register`,data: joinData, type:'multipart'}); if(response.status === 200){ - return response.data + return response.data; } - throw '회원가입 실패' + throw '회원가입 실패'; }catch (e){ console.error(e) - throw '회원가입 실패' + throw '회원가입 실패'; } - } From e2adf78b94061604c316e1e2452c42c66a9c75fb Mon Sep 17 00:00:00 2001 From: Hyoin-Kim Date: Wed, 19 Jan 2022 03:45:41 +0900 Subject: [PATCH 12/16] =?UTF-8?q?=E2=9C=A8feat:=20navigate=20url=20?= =?UTF-8?q?=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/presentation/components/JoinCompleteForm/index.tsx | 4 +++- src/presentation/components/JoinForm/index.tsx | 2 +- src/presentation/pages/OAuthRedirectHandler/index.tsx | 2 +- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/presentation/components/JoinCompleteForm/index.tsx b/src/presentation/components/JoinCompleteForm/index.tsx index 2e259f66..f4d81112 100644 --- a/src/presentation/components/JoinCompleteForm/index.tsx +++ b/src/presentation/components/JoinCompleteForm/index.tsx @@ -1,7 +1,9 @@ import { StJoinCompleteForm, StButton, StNoticeWrapper, StTitleWrapper } from './style'; import { imgParty } from '@assets/images'; +import { useNavigate } from 'react-router-dom'; const JoinCompleteForm = () => { + const navigate = useNavigate(); return ( <> @@ -12,7 +14,7 @@ const JoinCompleteForm = () => {

너가소개서를 이용해보세요!

 - 확인 + {navigate('/home')}}>확인 ); }; diff --git a/src/presentation/components/JoinForm/index.tsx b/src/presentation/components/JoinForm/index.tsx index 0b508b90..f8425b4e 100644 --- a/src/presentation/components/JoinForm/index.tsx +++ b/src/presentation/components/JoinForm/index.tsx @@ -65,7 +65,7 @@ function JoinForm() { const getData = await postJoin(form); setAccessToken(getData.accesstoken); - navigate('/home') + navigate('/joinComplete'); } catch(error) { console.error(error); //나중에 또 처리합시다. } diff --git a/src/presentation/pages/OAuthRedirectHandler/index.tsx b/src/presentation/pages/OAuthRedirectHandler/index.tsx index 15081079..acd8cb7c 100644 --- a/src/presentation/pages/OAuthRedirectHandler/index.tsx +++ b/src/presentation/pages/OAuthRedirectHandler/index.tsx @@ -17,7 +17,7 @@ const OAuthRedirectHandler = () => { postLogin(code).then(response => { if(response.user) { setAccessToken(response.accesstoken); - navigate("/home"); + navigate("/join"); } else { setKakaoAccessToken(response.accesstoken); setKakaoRefreshToken(response.refreshtoken); From 737e6eb0f6969c2c9fccd4900a4afd977c486158 Mon Sep 17 00:00:00 2001 From: Hyoin-Kim Date: Wed, 19 Jan 2022 03:47:52 +0900 Subject: [PATCH 13/16] =?UTF-8?q?=F0=9F=92=85=F0=9F=8F=BBstyle:=20console.?= =?UTF-8?q?log=20=EC=A7=80=EC=9A=B0=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/infrastructure/api/login-user.ts | 1 - src/presentation/components/JoinForm/index.tsx | 2 -- src/presentation/pages/OAuthRedirectHandler/index.tsx | 1 - 3 files changed, 4 deletions(-) diff --git a/src/infrastructure/api/login-user.ts b/src/infrastructure/api/login-user.ts index fabadfc9..e5ec003f 100644 --- a/src/infrastructure/api/login-user.ts +++ b/src/infrastructure/api/login-user.ts @@ -8,7 +8,6 @@ export interface LoginUserService { export const postLogin = async (kakaoToken:string) : Promise<{user?:object;accesstoken:string;refreshtoken:string}> => { try{ const response = await publicAPI.post({url:`/auth/login`,data:{authenticationCode:kakaoToken, provider:'kakao'} }) - console.log(response); if(response.status===200) return response.data else throw '로그인 실패'; }catch (e){ diff --git a/src/presentation/components/JoinForm/index.tsx b/src/presentation/components/JoinForm/index.tsx index f8425b4e..634fc5bb 100644 --- a/src/presentation/components/JoinForm/index.tsx +++ b/src/presentation/components/JoinForm/index.tsx @@ -23,8 +23,6 @@ import { useNavigate } from 'react-router-dom'; function JoinForm() { const accessToken = useRecoilValue(kakaoAccessTokenState); const refreshToken = useRecoilValue(kakaoRefreshTokenState); - console.log("조인페이지코드",accessToken); - console.log("조인페이지코드2",refreshToken); const [isConditionMet, setIsConditionMet] = useState({ id: false, name: false, diff --git a/src/presentation/pages/OAuthRedirectHandler/index.tsx b/src/presentation/pages/OAuthRedirectHandler/index.tsx index acd8cb7c..74e833e7 100644 --- a/src/presentation/pages/OAuthRedirectHandler/index.tsx +++ b/src/presentation/pages/OAuthRedirectHandler/index.tsx @@ -13,7 +13,6 @@ const OAuthRedirectHandler = () => { useEffect(()=>{ const code = new URL(window.location.href).searchParams.get('code') ?? ''; //인가코드 - console.log(code); postLogin(code).then(response => { if(response.user) { setAccessToken(response.accesstoken); From f88230e5b088a2684b83232684b709bce5a1deed Mon Sep 17 00:00:00 2001 From: Hyoin-Kim Date: Wed, 19 Jan 2022 03:54:28 +0900 Subject: [PATCH 14/16] =?UTF-8?q?=F0=9F=93=9Dchore:=20navigate=20url=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/presentation/pages/OAuthRedirectHandler/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/presentation/pages/OAuthRedirectHandler/index.tsx b/src/presentation/pages/OAuthRedirectHandler/index.tsx index 74e833e7..388783cd 100644 --- a/src/presentation/pages/OAuthRedirectHandler/index.tsx +++ b/src/presentation/pages/OAuthRedirectHandler/index.tsx @@ -16,7 +16,7 @@ const OAuthRedirectHandler = () => { postLogin(code).then(response => { if(response.user) { setAccessToken(response.accesstoken); - navigate("/join"); + navigate("/home"); } else { setKakaoAccessToken(response.accesstoken); setKakaoRefreshToken(response.refreshtoken); From 593e2f1128e7bd6b1dea15c7eb272b2111bbc11e Mon Sep 17 00:00:00 2001 From: seojin kim <001106ksj@gmail.com> Date: Wed, 19 Jan 2022 17:13:00 +0900 Subject: [PATCH 15/16] =?UTF-8?q?:nail=5Fcare:style:=20prettier=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/application/stores/kakao-auth.ts | 4 +- src/infrastructure/api/login-user.ts | 35 ++++++++----- src/infrastructure/api/user.ts | 2 +- src/infrastructure/remote/base.ts | 2 +- .../components/JoinCompleteForm/index.tsx | 9 +++- .../components/JoinForm/index.tsx | 32 ++++++------ .../components/LoginForm/OAuth.ts | 2 +- .../components/LoginForm/style.ts | 2 +- .../pages/OAuthRedirectHandler/index.tsx | 49 +++++++++---------- src/presentation/routes/UserRouter.tsx | 2 +- 10 files changed, 75 insertions(+), 64 deletions(-) diff --git a/src/application/stores/kakao-auth.ts b/src/application/stores/kakao-auth.ts index 264eb035..50470976 100644 --- a/src/application/stores/kakao-auth.ts +++ b/src/application/stores/kakao-auth.ts @@ -4,8 +4,8 @@ export const kakaoAccessTokenState = atom({ key: 'kakaoAccessTokenState', default: '', }); - + export const kakaoRefreshTokenState = atom({ key: 'kakaoRefreshTokenState', default: '', -}); \ No newline at end of file +}); diff --git a/src/infrastructure/api/login-user.ts b/src/infrastructure/api/login-user.ts index e5ec003f..1d496a64 100644 --- a/src/infrastructure/api/login-user.ts +++ b/src/infrastructure/api/login-user.ts @@ -5,26 +5,35 @@ export interface LoginUserService { getUserInfo(token: string): Promise; } -export const postLogin = async (kakaoToken:string) : Promise<{user?:object;accesstoken:string;refreshtoken:string}> => { - try{ - const response = await publicAPI.post({url:`/auth/login`,data:{authenticationCode:kakaoToken, provider:'kakao'} }) - if(response.status===200) return response.data +export const postLogin = async ( + kakaoToken: string, +): Promise<{ user?: object; accesstoken: string; refreshtoken: string }> => { + try { + const response = await publicAPI.post({ + url: `/auth/login`, + data: { authenticationCode: kakaoToken, provider: 'kakao' }, + }); + if (response.status === 200) return response.data; else throw '로그인 실패'; - }catch (e){ - console.error(e) + } catch (e) { + console.error(e); throw '로그인 실패'; - } -} + } +}; export const postJoin = async (joinData: FormData) => { try { - const response = await publicAPI.post({url:`/auth/register`,data: joinData, type:'multipart'}); - if(response.status === 200){ + const response = await publicAPI.post({ + url: `/auth/register`, + data: joinData, + type: 'multipart', + }); + if (response.status === 200) { return response.data; } throw '회원가입 실패'; - }catch (e){ - console.error(e) + } catch (e) { + console.error(e); throw '회원가입 실패'; } -} +}; diff --git a/src/infrastructure/api/user.ts b/src/infrastructure/api/user.ts index 7cf184c2..e4bf0a60 100644 --- a/src/infrastructure/api/user.ts +++ b/src/infrastructure/api/user.ts @@ -6,4 +6,4 @@ export interface UserService { getMyPageInfo(userID: string): Promise; getNeososeoBookmark(userID: string): Promise; getFeedbackBookmark(userID: string): Promise; -} \ No newline at end of file +} diff --git a/src/infrastructure/remote/base.ts b/src/infrastructure/remote/base.ts index 679e2ebb..f53313ce 100644 --- a/src/infrastructure/remote/base.ts +++ b/src/infrastructure/remote/base.ts @@ -114,4 +114,4 @@ export const publicAPI = { }), delete: ({ url, params, headers }: Omit) => sendRequest({ url, params, method: 'delete', headers, isPrivate: false }), -}; \ No newline at end of file +}; diff --git a/src/presentation/components/JoinCompleteForm/index.tsx b/src/presentation/components/JoinCompleteForm/index.tsx index f4d81112..633a8a10 100644 --- a/src/presentation/components/JoinCompleteForm/index.tsx +++ b/src/presentation/components/JoinCompleteForm/index.tsx @@ -14,7 +14,14 @@ const JoinCompleteForm = () => {

너가소개서를 이용해보세요!

- {navigate('/home')}}>확인 + { + navigate('/home'); + }} + > + 확인 + ); }; diff --git a/src/presentation/components/JoinForm/index.tsx b/src/presentation/components/JoinForm/index.tsx index 634fc5bb..603f5d37 100644 --- a/src/presentation/components/JoinForm/index.tsx +++ b/src/presentation/components/JoinForm/index.tsx @@ -11,15 +11,14 @@ import { } from './style'; import CommonInput from '@components/common/CommonInput'; import FileUpload from '@components/common/FileUpload'; -import { icProfile,icEmail } from '@assets/icons'; +import { icProfile, icEmail } from '@assets/icons'; import { useRecoilValue } from 'recoil'; -import {kakaoAccessTokenState,kakaoRefreshTokenState} from "@stores/kakao-auth"; -import {postJoin} from '@api/login-user'; +import { kakaoAccessTokenState, kakaoRefreshTokenState } from '@stores/kakao-auth'; +import { postJoin } from '@api/login-user'; import { useLoginUser } from '@hooks/useLoginUser'; import { createWatchProgram } from 'typescript'; import { useNavigate } from 'react-router-dom'; - function JoinForm() { const accessToken = useRecoilValue(kakaoAccessTokenState); const refreshToken = useRecoilValue(kakaoRefreshTokenState); @@ -30,7 +29,7 @@ function JoinForm() { const [image, setImage] = useState(null); const [inputId, setInputId] = useState(''); const [inputName, setInputName] = useState(''); - const { setAccessToken} = useLoginUser(); + const { setAccessToken } = useLoginUser(); const navigate = useNavigate(); useEffect(() => { @@ -50,24 +49,23 @@ function JoinForm() { setInputName(value); }; - const onClickSubmitUserInfo = async(e: React.MouseEvent)=> { + const onClickSubmitUserInfo = async (e: React.MouseEvent) => { e.preventDefault(); try { const form = new FormData(); - form.append('profileId', inputId); - form.append('name',inputName); - image && form.append('image',image); - form.append('provider','kakao'); - form.append('accesstoken',accessToken); - form.append('refreshtoken',refreshToken); - - const getData = await postJoin(form); - setAccessToken(getData.accesstoken); + form.append('profileId', inputId); + form.append('name', inputName); + image && form.append('image', image); + form.append('provider', 'kakao'); + form.append('accesstoken', accessToken); + form.append('refreshtoken', refreshToken); + + const getData = await postJoin(form); + setAccessToken(getData.accesstoken); navigate('/joinComplete'); - } catch(error) { + } catch (error) { console.error(error); //나중에 또 처리합시다. } - }; return ( diff --git a/src/presentation/components/LoginForm/OAuth.ts b/src/presentation/components/LoginForm/OAuth.ts index 330eb0a7..565e2241 100644 --- a/src/presentation/components/LoginForm/OAuth.ts +++ b/src/presentation/components/LoginForm/OAuth.ts @@ -1,4 +1,4 @@ export const CLIENT_ID = `${process.env.REACT_APP_CLIENT_ID}`; export const REDIRECT_URI = 'http://localhost:3000/auth/kakao/callback'; -export const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code`; \ No newline at end of file +export const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code`; diff --git a/src/presentation/components/LoginForm/style.ts b/src/presentation/components/LoginForm/style.ts index f737c788..e8745373 100644 --- a/src/presentation/components/LoginForm/style.ts +++ b/src/presentation/components/LoginForm/style.ts @@ -8,7 +8,7 @@ export const StLogin = styled.div` font-weight: 600; font-size: 24px; line-height: 100%; - margin-top:12px; + margin-top: 12px; `; export const StNoticeWrapper = styled.div` display: flex; diff --git a/src/presentation/pages/OAuthRedirectHandler/index.tsx b/src/presentation/pages/OAuthRedirectHandler/index.tsx index 388783cd..26eda67a 100644 --- a/src/presentation/pages/OAuthRedirectHandler/index.tsx +++ b/src/presentation/pages/OAuthRedirectHandler/index.tsx @@ -1,34 +1,31 @@ -import { kakaoAccessTokenState,kakaoRefreshTokenState } from "@stores/kakao-auth"; -import { useEffect } from "react"; -import { useNavigate } from "react-router-dom"; -import { useSetRecoilState } from "recoil"; +import { kakaoAccessTokenState, kakaoRefreshTokenState } from '@stores/kakao-auth'; +import { useEffect } from 'react'; +import { useNavigate } from 'react-router-dom'; +import { useSetRecoilState } from 'recoil'; import { postLogin } from '@api/login-user'; import { useLoginUser } from '@hooks/useLoginUser'; const OAuthRedirectHandler = () => { - const navigate = useNavigate(); - const {setAccessToken} = useLoginUser(); - const setKakaoAccessToken = useSetRecoilState(kakaoAccessTokenState); - const setKakaoRefreshToken = useSetRecoilState(kakaoRefreshTokenState); + const navigate = useNavigate(); + const { setAccessToken } = useLoginUser(); + const setKakaoAccessToken = useSetRecoilState(kakaoAccessTokenState); + const setKakaoRefreshToken = useSetRecoilState(kakaoRefreshTokenState); - useEffect(()=>{ - const code = new URL(window.location.href).searchParams.get('code') ?? ''; //인가코드 - postLogin(code).then(response => { - if(response.user) { - setAccessToken(response.accesstoken); - navigate("/home"); - } else { - setKakaoAccessToken(response.accesstoken); - setKakaoRefreshToken(response.refreshtoken); - navigate('/join'); - } - }) - },[]); + useEffect(() => { + const code = new URL(window.location.href).searchParams.get('code') ?? ''; //인가코드 + postLogin(code).then((response) => { + if (response.user) { + setAccessToken(response.accesstoken); + navigate('/home'); + } else { + setKakaoAccessToken(response.accesstoken); + setKakaoRefreshToken(response.refreshtoken); + navigate('/join'); + } + }); + }, []); - return ( - <> - - ); + return <>; }; -export default OAuthRedirectHandler; \ No newline at end of file +export default OAuthRedirectHandler; diff --git a/src/presentation/routes/UserRouter.tsx b/src/presentation/routes/UserRouter.tsx index 3d5ef3ea..b148c853 100644 --- a/src/presentation/routes/UserRouter.tsx +++ b/src/presentation/routes/UserRouter.tsx @@ -12,7 +12,7 @@ const LoginRouter = () => ( } /> } /> - } /> + } /> ); From 4a3b362823e4c5540981591912f2ec39357a35ab Mon Sep 17 00:00:00 2001 From: Hyoin-Kim Date: Wed, 19 Jan 2022 17:24:31 +0900 Subject: [PATCH 16/16] =?UTF-8?q?=F0=9F=93=9D=20chore:=20=EB=B6=88?= =?UTF-8?q?=ED=95=84=EC=9A=94=ED=95=9C=20=EC=BD=94=EB=93=9C=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/infrastructure/api/types/user.ts | 9 --------- src/presentation/components/JoinForm/index.tsx | 1 - src/presentation/components/LoginForm/OAuth.ts | 4 ++-- 3 files changed, 2 insertions(+), 12 deletions(-) diff --git a/src/infrastructure/api/types/user.ts b/src/infrastructure/api/types/user.ts index eb0439dc..fda7a90e 100644 --- a/src/infrastructure/api/types/user.ts +++ b/src/infrastructure/api/types/user.ts @@ -14,15 +14,6 @@ export interface LoginUser { profileImage: string; } -export interface IJoin { - profileId: string; - name: string; - image: string; - provider: string; - accesstoken: string; - refreshtoken: string; -} - export interface User { username: string; userID: string; diff --git a/src/presentation/components/JoinForm/index.tsx b/src/presentation/components/JoinForm/index.tsx index 603f5d37..d0f60718 100644 --- a/src/presentation/components/JoinForm/index.tsx +++ b/src/presentation/components/JoinForm/index.tsx @@ -16,7 +16,6 @@ import { useRecoilValue } from 'recoil'; import { kakaoAccessTokenState, kakaoRefreshTokenState } from '@stores/kakao-auth'; import { postJoin } from '@api/login-user'; import { useLoginUser } from '@hooks/useLoginUser'; -import { createWatchProgram } from 'typescript'; import { useNavigate } from 'react-router-dom'; function JoinForm() { diff --git a/src/presentation/components/LoginForm/OAuth.ts b/src/presentation/components/LoginForm/OAuth.ts index 565e2241..ab508a6a 100644 --- a/src/presentation/components/LoginForm/OAuth.ts +++ b/src/presentation/components/LoginForm/OAuth.ts @@ -1,4 +1,4 @@ -export const CLIENT_ID = `${process.env.REACT_APP_CLIENT_ID}`; -export const REDIRECT_URI = 'http://localhost:3000/auth/kakao/callback'; +const CLIENT_ID = `${process.env.REACT_APP_CLIENT_ID}`; +const REDIRECT_URI = 'http://localhost:3000/auth/kakao/callback'; export const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code`;