카카오톡 소셜 로그인/ 회원가입 api 연결 완료! #112
Conversation
# Conflicts: # src/infrastructure/api/types/user.ts
|
울 웹쁜이 고생많았어 ! 여기서 미리보기로 보면서 쉬어~ 다른 웹쁜이들한테도 자랑해줘~ |
|
울 웹쁜이 고생많았어 ! 여기서 미리보기로 보면서 쉬어~ 다른 웹쁜이들한테도 자랑해줘~ |
|
울 웹쁜이 고생많았어 ! 여기서 미리보기로 보면서 쉬어~ 다른 웹쁜이들한테도 자랑해줘~ |
|
울 웹쁜이 고생많았어 ! 여기서 미리보기로 보면서 쉬어~ 다른 웹쁜이들한테도 자랑해줘~ |
src/infrastructure/api/types/user.ts
Outdated
| @@ -14,6 +14,15 @@ export interface LoginUser { | |||
| profileImage: string; | |||
| } | |||
|
|
|||
| export interface IJoin { | |||
There was a problem hiding this comment.
I 빼고 그냥 Join이라고 하는 건 어때~? 여기만 붙어있는 것 같아서 !!
There was a problem hiding this comment.
이 친구 이제 안 쓰이게 되어서.. 아예 지워도 될듯합니다..!!
|
|
||
| return ( | ||
| <> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
There was a problem hiding this comment.
저 부분은 로그인 요청이 갈 동안 띄워지는 화면이다!!
/auth/kakao/callback으로 카카오에서 넘겨주는 인가 코드를 받아야 하는데 그러려면 리라돔에서 라우팅을 해야 해서 일단 이 페이지 컴포넌트를 띄워둔 것이야!
로그인 하면 아주 잠깐 흰 화면이 뜨는데 그 흰 화면이 이 화면인데
로그인 중이라고 표시해주는 문구를 넣는게 더 좋을까?
There was a problem hiding this comment.
넣는게 아주 좋을 것 같은데 나중에 디자인 해달라고 하자!!
There was a problem hiding this comment.
이게 아주아주 잠깐 뜨는 흰 화면인데 로딩중이라는 문구를 두면 더 애매해질수도 있을것같아서(너무 잠깐 띄워지는 뷰라 글씨도 못읽을정도로 빨리 지나갈듯) 일단 흰화면 유지해두는게 좋을것같아!!
|
|
||
| export interface LoginUserService { | ||
| getUserInfo(token: string): Promise<LoginUser>; | ||
| } | ||
|
|
There was a problem hiding this comment.
로그인, 회원가입 과정은 목킹을 할 수 없다고 판단하여(거쳐야 하는 과정이 3개나 되고 그 과정에 클라만 있는게 아니라 복잡해지기 때문) 지금처럼 바로 export해서 쓰는게 좋을 것 같다고 생각했어용
그래서 지금처럼 api 안에다가 바로 쓰지만, 혹시 다른 파일로 분리해야 한다고 생각한다면 의견 주세요!!
src/infrastructure/api/login-user.ts
Outdated
|
|
||
| export interface LoginUserService { | ||
| getUserInfo(token: string): Promise<LoginUser>; | ||
| } | ||
|
|
||
| export const postLogin = async (kakaoToken:string) : Promise<{user?:object;accesstoken:string;refreshtoken:string}> => { |
There was a problem hiding this comment.
온니 프리티어는 내가 맥북을 얻으면 먹여서 푸쉬할게..
| import {kakaoAccessTokenState,kakaoRefreshTokenState} from "@stores/kakao-auth"; | ||
| import {postJoin} from '@api/login-user'; | ||
| import { useLoginUser } from '@hooks/useLoginUser'; | ||
| import { createWatchProgram } from 'typescript'; |
| export const CLIENT_ID = `${process.env.REACT_APP_CLIENT_ID}`; | ||
| export const REDIRECT_URI = 'http://localhost:3000/auth/kakao/callback'; |
There was a problem hiding this comment.
다른 파일에서 쓰지 않는다면 export하지 않아도 괜찮을듯!
| @@ -12,7 +14,7 @@ const JoinCompleteForm = () => { | |||
| </StTitleWrapper> | |||
| <p>너가소개서를 이용해보세요!</p> | |||
| </StJoinCompleteForm> | |||
| <StButton type="submit">확인</StButton> | |||
| <StButton type="submit" onClick={()=>{navigate('/home')}}>확인</StButton> | |||
There was a problem hiding this comment.
button 태그 type 기본값이 submit이라 설정 안해줘도 될 듯!!
|
|
||
| return ( | ||
| <> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
There was a problem hiding this comment.
넣는게 아주 좋을 것 같은데 나중에 디자인 해달라고 하자!!
|
울 웹쁜이 고생많았어 ! 여기서 미리보기로 보면서 쉬어~ 다른 웹쁜이들한테도 자랑해줘~ |
|
울 웹쁜이 고생많았어 ! 여기서 미리보기로 보면서 쉬어~ 다른 웹쁜이들한테도 자랑해줘~ |
⛓ Related Issues
📋 작업 내용
📌 PR Point
카카오톡 client_id 와 리다이랙트 uri를 설정해줌
카카오톡 로그인을 실행하면 -> 인가코드라는 것을 넘겨준다.
리다이랙트 uri의 code = 뒤에 오는 부분이 인가코드이다.
인가코드를 넘겨주면 카카오톡에서 accessToken과 refreshToken을 발급받을수있다 .
두개의 토큰을 서버를 통해 발급받으면 join페이지로 이동
사진과 아이디, 이름 입력하여 post 로 넘겨주면 회원가입 성공과 함께 다음페이지 이동
회원가입한 로그인 사용자는 회원가입 없이 바로 다음 페이지로 이동 ('/home')
회원가입이 처음인 카카오톡 사용자는 /join -> /joinComplete -> /home 으로 이동
🔬 Reference