SKRF-131 카카오 로그인 API 커스텀 훅, 에러처리 #27
Conversation
src/constants/auth.ts
Outdated
| isNewMember: boolean; | ||
| } | ||
|
|
||
| export { OauthLoginRequest, OauthLoginResponse }; |
There was a problem hiding this comment.
이 친구들은 type이 아닌가요? 몰라서 여쭤봅니다...!
There was a problem hiding this comment.
그러네요! 왜 여기다했지?ㅋㅋ... 찾아주셔서 감사합니다
| }, | ||
| } as const; | ||
|
|
||
| export { PATH }; |
There was a problem hiding this comment.
귀찮은 일을 깔끔하게 해주셨군요 👏👏👏
| onError: () => { | ||
| //TODO: Toast 띄우기 | ||
| navigate(PATH.LOGIN); | ||
| throw new Error('로그인 중 서버에서 오류가 발생했습니다'); |
There was a problem hiding this comment.
여기서 data.message(에러 시 응답으로 받은 에러메시지)를 사용할 수도 있을까요?
|
|
||
| import { useEffect } from 'react'; | ||
|
|
||
| const OauthRedirectPage = () => { | ||
| const authCode = new URL(window.location.href).searchParams.get('code'); | ||
| const code = new URLSearchParams(window.location.search).get('code') ?? ''; |
There was a problem hiding this comment.
??는 무슨 연산자인가요? 없으면 빈값 이런 뜻인가요?
There was a problem hiding this comment.
nullish 체크 연산자입니다!
?? 앞의 변수가 null || undefinded면 뒤에 값을 할당합니다!
URLSearchParms의 get메서드는 특정 파람값(여기서는 code)을 찾아주는 기능을하는데 찾지 못하면 null을 반환합니다 생각해보니 ??연산자는 필요없겠네요!
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing
https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
| if (!code) { | ||
| //TODO: 에러페이지로 이동시켜주기 | ||
| throw new Error('code is not exist'); | ||
| } |
There was a problem hiding this comment.
에러페이지도 피그마에 만들어놔야겠군요...🤔🤔
| <Global styles={GlobalStyle} /> | ||
| <RouterProvider router={router} /> | ||
| </ThemeProvider> | ||
| </QueryClientProvider> | ||
| </React.StrictMode>, | ||
| ); |
There was a problem hiding this comment.
그럼 전역에서 어떤 사용자가 로그인 중인지 판단할 수 있는 거죠?!
There was a problem hiding this comment.
로그인시 로컬스토리지에 토큰값을 저장할 예정입니다!
src/mocks/users.ts
Outdated
| token: 'test token', | ||
| isNewMember: false, | ||
| }); | ||
| }), | ||
| ]; |
* feat : isNewUser response에 추가 * fix : 불필요한 파일 삭제 * feat : PATH상수 추가 * feat : kakaoLogin api 모킹 테스트 * feat : QueryClient 설정 * fix : 확장성을 위해 용어 변경 kakao => oauth * fix : 불필요한 파일 삭제 * feat : Oauth API 통신 type 선언 * feat : axios oauthLogin post 요청기능 * feat : useOauthLogin 커스텀 훅 추가 * feat : OauthRedirectPage 로그인 기능 커스텀 훅으로 위임 * fix : 모킹 데이터 오류 수정 * chore : PATH타입 리터럴로 추론 * fix : auth관련 타입 conatant폴더에서 type폴더로 옮김 * feat : auth error발생시 서버 에러 메시지 전송 * fix: user.ts 충돌오류해결 --------- Co-authored-by: SongInJae <[email protected]>
* SKRF-131 카카오 로그인 API 커스텀 훅, 에러처리 (#27) * feat : isNewUser response에 추가 * fix : 불필요한 파일 삭제 * feat : PATH상수 추가 * feat : kakaoLogin api 모킹 테스트 * feat : QueryClient 설정 * fix : 확장성을 위해 용어 변경 kakao => oauth * fix : 불필요한 파일 삭제 * feat : Oauth API 통신 type 선언 * feat : axios oauthLogin post 요청기능 * feat : useOauthLogin 커스텀 훅 추가 * feat : OauthRedirectPage 로그인 기능 커스텀 훅으로 위임 * fix : 모킹 데이터 오류 수정 * chore : PATH타입 리터럴로 추론 * fix : auth관련 타입 conatant폴더에서 type폴더로 옮김 * feat : auth error발생시 서버 에러 메시지 전송 * fix: user.ts 충돌오류해결 --------- Co-authored-by: SongInJae <[email protected]> * refactor: Avatar 컴포넌트 포인터 속성 삭제, 기본 이미지 아이콘 추가, 편집 아이콘 추가 --------- Co-authored-by: hyesung99 <[email protected]> Co-authored-by: SongInJae <[email protected]>
📝요구사항과 구현내용
구현 스크린샷
✨pr포인트 & 궁금한 점
에러잡기가 목표였는데 구현하다보니 api가 많이 엮여있어서 주객전도 됐네요
에러 처리 후 Toast나 에러 페이지 redirect는 TODO로 남겨뒀습니다.
여기저기 폴더구조를 많이 생성했는데 컨벤션에 어긋났는지 확인 부탁드립니다! 아직 안정해진 컨벤션도 있는것 같은데 일단 프로젝트 흐름과 최대한 비슷하게 만들었어요.
많은 질타와 가르침 PLZ