feat: login #13

chaaerim · 2023-02-26T12:58:47Z

🚀 작업 내용

로그인 로직을 구현했습니다.
에러 처리를 보다 쉽게 할 수 있도록 axios 에러를 커스텀했습니다.

✏️ 상세 설명

토큰은 localStorage에 저장하고 헤더에 넣어 서버와 통신하는 방식으로 구현했습니다.
axios response interceptors를 이용하여 aT와 rT 만료 처리를 하고자 했는데 이 부분은 api 작업이 마무리되고 추가해두겠습니다.

📷 스크린샷

📁 참고 자료

be-student

와 진짜 신기했어요 많이 배워갑니다!!!
되게 세심한 부분까지 다 하나하나 신경써주시네요

be-student · 2023-02-26T13:02:00Z

src/apis/client.ts

  baseURL: process.env.NODE_ENV === 'development' ? DEV_SERVER_URL : PROD_SERVER_URL,
+  headers: {
+    Authorization: `Bearer ${authToken.access}`,
+    'Content-Type': 'application/json; charset=utf-8',


와 이걸 다 신경써주시네요 저거 쓰는 것 처음봐요

👍👍👍

be-student · 2023-02-26T13:04:56Z

src/apis/client.ts

+  try {
+    return (error as EffError).isEffError === true;
+  } catch {
+    return false;
  }


error 가 null 이 들어오는 경우가 아니라면

return (error as EffError).isEffError===true;

이렇게 적어도 좋을 것 같아요

조금 더 줄일 수 있을 거 같아요!

return (error as EffError).isEffError;

이렇게 되었을 때, isEffError 가 설정되지 않았다면 undefined 같은 값이 올 수도 있고, 만약 데이터가 있었다면, isEffError 에 이상한 데이터가 담겨서 올 수도 있을 것 같아요 as 로 캐스팅 한 이후에 가져오니까요
그래서 검증 과정으로 ===true 를 붙히는 쪽이 좋아보여요

타입 단언 때문이군요~ 확실히 as 사용 때문에 애매할 수 있겠네요 === true로 체크해주는게 더 확실하겠네요 👀

넵 줄일 수 있는 부분은 줄여볼게요 !

be-student · 2023-02-26T13:09:47Z

src/apis/client.ts

+  error: unknown
+): error is AxiosError & { response: AxiosResponse } {
+  try {
+    return axios.isAxiosError(error) && error.response?.data != null;


여기도 try catch 문이 없어도 괜찮을 것 같아요!

return axios.isAxiosError(error)&&error.response?.data!==null;

axios 같은 경우는 에러가 났을 때 더 이상 다음 동작이 실행이 안되는걸로 알고 있어서 꼼꼼하게 try catch로 처리하려고 했는데 코드가 길어진 감이 있군요 여기도 줄일 수 있는 부분은 줄여보도록 하겠습니다!

be-student · 2023-02-26T13:11:32Z

src/apis/client.ts

+    if (config?.headers == null) {
+      throw new Error(`config.header is undefined`);
+    }
+    config.headers['Content-Type'] = 'application/json; charset=utf-8';


와 여기도 멋있네요

아휴 아닙니다 허허 ..

L2HYUNN · 2023-02-27T08:20:10Z

src/apis/client.ts

  baseURL: process.env.NODE_ENV === 'development' ? DEV_SERVER_URL : PROD_SERVER_URL,
+  headers: {
+    Authorization: `Bearer ${authToken.access}`,
+    'Content-Type': 'application/json; charset=utf-8',


👍👍👍

L2HYUNN · 2023-02-27T08:25:38Z

src/apis/client.ts

+  try {
+    return (error as EffError).isEffError === true;
+  } catch {
+    return false;
  }


조금 더 줄일 수 있을 거 같아요!

return (error as EffError).isEffError;

L2HYUNN · 2023-02-27T08:51:31Z

src/apis/client.ts

+//axios에러를 커스텀한 에러로 변환
+function createEffErrorFromAxiosError(error: AxiosError): EffErrorResponse | AxiosError {
+  if (isAxiosErrorWithResponseData(error)) {
+    const effError = error as EffError;


에러 확인하고 커스텀 에러 만드는 로직들은 따로 apis폴더 안에 utils 파일 같은거로 따로 정리해도 좋을 거 같아요!

네이밍이 명확히 잘되어 있고 동작도 간단해서 굳이 하나씩 읽으면서 확인할 필요 없을 거 같아요.

L2HYUNN · 2023-02-27T09:02:21Z

src/apis/client.ts

+axiosClient.interceptors.request.use(
+  function (config) {
+    if (config?.headers == null) {
+      throw new Error(`config.header is undefined`);
+    }
+    config.headers['Content-Type'] = 'application/json; charset=utf-8';
+    config.headers['Authorization'] = authToken.access;

-export const patch = <T>(...args: Parameters<typeof axiosClient.patch>) => {
-  return axiosClient.patch<T, T>(...args);
-};
+    return config;
+  },


isAxiosErrorWithResponseData 처럼 안에 함수도 따로 분리해주면 추상화 단계가 동일해서 더 읽기 좋을 거 같아요!

그리고 axiosClient를 생성할 때 Content-Type과 Authorization값을 넣어주는데 따로 인터셉터를 통해 넣어주는 이유가 있을까요?

request 요청시 혹시 모르게 발생할 수 있는 auth에러를 방지하기 위해서 request에서 한 번 더 처리해주려고 했어요 !

L2HYUNN · 2023-02-27T09:03:53Z

src/apis/client.ts

+function delay(time: number) {
+  return new Promise(res => setTimeout(res, time));
+}


delay는 이곳 저곳에서 사용할 수 있을 거 같아서 따로 utils 폴더로 분리하면 좋을 거 같아요~!

넵 axios 하단에 utils 폴더 하나 생성해두겠습니당

src/apis/client.ts

L2HYUNN · 2023-02-27T09:07:07Z

src/components/common/ConfirmModal/index.tsx

+      <Button variant="largePrimary" onClick={onClick}>
+        확인
+      </Button>
    </>


👍👍 CD가 돌아가겠군요~~

L2HYUNN · 2023-02-27T09:12:22Z

src/hooks/form/useCheckLoginForm.ts

+  const isDisabled = !isDirty || !isValid;
+
+  const isRequiredText = useCallback(
+    (text: string) => (text === '비밀번호' ? `${text}를 입력해주세요.` : `${text}을 입력해주세요.`),


(text: string) => `${text}를 입력해주세요.`

이렇게 표현해도 괜찮지 않나요!?

비밀번호 같은 경우 뒤에 를이 들어가야하고 이메일 같은 경우는 을이 들어가야해서 요렇게 처리했어요 허허

아하 을,를 차이를 제가 못 봤었네요..!

L2HYUNN · 2023-02-27T09:17:20Z

src/hooks/form/useCheckLoginForm.ts

+  const { mutate: loginMutation } = useMutation(async () => {
+    const { email, password } = getValues();
+    try {
+      const data = await postLogin(email, password);
+      if (data) {
+        const { accessToken, refreshToken } = data;
+        localStorage.setItem('accessToken', accessToken);
+        localStorage.setItem('refreshToken', refreshToken);
+      }
+      // 로컬스토리지에 제대로 aT, rT 들어갔으면 카테고리 선택 페이지로 라우팅
+    } catch (error: unknown) {
+      if (isEffError(error)) {
+        // TODO: toast 추가
+        console.log(error.message, error.errorCode);
+      }
+    }
+  });


react-query 관련 부분은 따로 hook으로 빼서 사용하면 더 좋을 거 같아요!!

추가로 에러 관련 처리는 ErrorBoundary 활용해서 선언적으로 처리하면 어떨까요!?

저도 이부분에 대해서 고민이 많았는데 form hook에서 submit까지 핸들링하는게 useForm들의 역할이라는 생각이 들어서 여기에 두었어요! 저는 개인적으로 반복해서 사용되는 react-query hook이 아니라면 역할에 맞는 곳에 위치하는게 코드를 보는 입장, 작성하는 입장에서도 편리할 것 같다고 생각이 드는데 어떻게 생각하시나요?!?!

아하 그렇군요..! 저는 개인적으로 react-query를 hook으로 분리하는 것이 반복 뿐만 아니라 사용하는 곳에서 선언적으로 사용할 수 있어서 좋다고 생각했어요. useForm을 사용할 때 login mutation에 대한 구현을 굳이 알 필요가 없다고 생각해서요!

L2HYUNN

LGTM

* feat: 로그인, 회원가입 레이아웃 및 로그인 로직 구현 * feat: axios 에러 커스텀 * chore: 주석 추가 * feat: axios request interceptors 추가

* feat: input 컴포넌트 구현 (#2) * feat: input 컴포넌트 구현 * fix: install pnpm * refactor: 타이포 토큰 적용 * feat: modal 컴포넌트 구현 (#4) * feat: modal 컴포넌트 생성 * feat: modal 컴포넌트 구현 * refactor: type 변경 및 리뷰 반영 * refactor: modal interface 제거 * feat: icon 컴포넌트 구현 (#3) * feat: svg 저장 * feat: icon 컴포넌트 구현 * refactor: icon 바로 export * refactor: span 태그로 변경 * refactor: icon type * feat: button 컴포넌트 구현 (#6) * fix: rem을 위한 html fontSize 수정 * refactor: text 컴포넌트 type 선언 위치 변경 * style: 누락 및 변경된 theme 추가 * feat(button): button 컴포넌트 추가 * chore(button): button 컴포넌트 예제 추가 * refactor(text): text 컴포넌트 스타일 타입명 변경 * feat: jest, react-testing-library setting (#5) * feat: jest, react-testing-library setting * chore: paths 수정 * fix: fix conflict * feat: select 컴포넌트 구현 (#7) * feat: mount, update 관련 hooks 추가 * feat: void callback type 추가 * feat: select 컴포넌트 추가 * feat: select 컴포넌트 예제 코드 추가 * chore: local pnpm 패키지 제거 * style: select 컴포넌트 margin top 추가 * feat: header 컴포넌트 구현 (#9) * feat: sign up 레이아웃과 로직 구현 (#10) * feat: 회원가입 레이아웃 및 로직 작업 * feat: sign up validation check 로직 추가 * feat: signUp 성공시 모달창 보여주기 * chore: console 삭제 및 주석 달기 * feat: 비밀번호 최대 길이 20자로 제한 * refactor: button 컴포넌트 리팩토링 (#11) * style: reset css 버튼 disabled cursor 조건 추가 * style: theme 디자인 시스템 변경 적용 * refactor: button 컴포넌트 리팩토링 * feat: toast component 구현 (#14) * feat: login (#13) * feat: 로그인, 회원가입 레이아웃 및 로그인 로직 구현 * feat: axios 에러 커스텀 * chore: 주석 추가 * feat: axios request interceptors 추가 * feat: 답변 Bubble 컴포넌트 구현 (#16) * feat: 답변 Bubble 컴포넌트 구현 * chore: 폴더 rename * refactor: 중복 코드 제거 * feat: user answer bubble 컴포넌트 구현 (#17) * feat: input bubble 컴포넌트 구현 (#18) * refactor: toast design system 적용 (#21) * setting: jest eslint 설정 추가 및 유틸 파일 추가 (#19) * chore: jest 관련 사용하지 않는 패키지 제거 * chore: 지속적으로 문제가 생기는 Home 테스트 코드 제거 * chore: main에 button에서 발생하던 문제 해결 * feat: jest 관련 eslint plugins 추가 * feat: jest eslint plugin 설정 적용 * chore: testing library 패키지 재설치 * fix: jest-dom eslint 설정 오탈자 수정 * fix: jest 설정 변경 * feat: 커스텀 랜더를 위한 testUtils 추가 * feat: button 랜더링 및 작동 테스트 추가 * chore: 불필요한 export 제거 * fix: button test describe 이름 변경 * setting: test CI 및 codecov 부착 (#20) * feat: test ci 추가 * feat: codecov 설정 및 CI 추가 * fix: 스크립트 오탈자 수정 * feat: 로그인 로직 작업 완료 및 비밀번호 재설정 레이아웃 (#22) * feat: 로그인 로직 작업 완료 및 비밀번호 재설정 레이아웃 * refactor: console 삭제 * refactor: 환경변수 적용 * feat: 비밀번호 재설정 api fetching (#23) * feat: category 페이지 구현 (#24) * feat: useBackGroundColor hook 추가 * feat: layout에 background color 적용 * refactor: 공통 hook 폴더 분리 * fix: axios request interceptors 헤더 Bearer 추가 * feat(hooks): useMounted hook 추가 * feat: client suspense 추가 * feat: client suspense 적용 * feat: 로그인 성공 이후 카테고리 페이지로 리다이렉트 추가 * feat: main 카테고리 호출 api 로직 추가 * fix: select 컴포넌트가 undefined 또한 주입 받을 수 있게 설정 추가 * feat: bottom fixed button 추가 * feat: category 페이지 추가 * feat: production env 파일 git ignore 추가 * feat: dynamic category 페이지 추가 * feat: single bottom fixed button 테스트 추가 * feat: category detail 페이지 구현 (#25) * feat: category 페이지 getStaticProps 리턴 타입 추가 * fix: suspense 문제 임시 조치 * feat: mid category api 관련 로직 추가 * feat: next 외부 이미지 사용 설정 추가 * feat: category detail 페이지 추가 * fix: next config image hostname 변경 * feat: question 페이지 구현 (#26) * feat: question 관련 api 로직 추가 및 일부 네이밍 수정 * fix: 변경된 api 이름 적용 * fix: question dynamic route path 변경 * refactor: useBackGroundColor route 로직 개선 * feat: question 페이지 추가 * fix: next config s3 url 수정 * refactor: early return을 통한 타입 undefined 문제 개선 * refactor: category 페이지 early return을 통한 타입 undefined 문제 개선 * feat: onboarding page 작업 완료 (#27) * feat: chip component 구현 (#28) * feat: chip component 구현 * chore: 공백 삭제 * test: Icon 컴포넌트 테스트 추가 (#30) * feat: jest svg 관련 설정 수정 및 추가 * refactor: icon import 방식 변경 * test: icon 테스트 추가 * feat: question answer 기능 구현 (#31) * feat: main 카테고리 호출 api 로직 추가 * feat: mid category api 관련 로직 추가 * feat: question 관련 api 로직 추가 및 일부 네이밍 수정 * feat: question 페이지 추가 * feat: question answer 관련 api 로직 추가 * feat: double bottom fixed button 추가 * feat: question answer 로직 추가 * chore: 불필요한 변경 제거 * feat: token refetch 로직 추가 (#32) * feat: analytics tools 추가 (#34) * feat: google analytics 설정 추가 * feat: hotjar 설정 추가 * feat: mypage 작업 완료 (#33) * feat: mypage 작업 완료 * chore: tsconfig 수정 * fix: 오타 수정 * fix: querykey 바뀐 것 수정 * feat: 404page 작업 (#35) * feat: 404 page 구현 * chore: fix lint error * setting: playwright 설정 및 예제 추가 (#36) * feat: playwright 설정 및 예제 추가 * feat: playwright eslint plugin 추가 및 적용 * chore: jest test ignore pattern 추가 * chore: response.d.ts lint 적용 * test: 비로그인시 홈화면에 대한 e2e 테스트 추가 * feat: question 페이지 구현 v2 (#37) * refactor: api base url 수정 및 deprecated api 명시 * refactor: deprecated response 명시 * refactor: 질문 생성 api v2 추가 및 적용 * feat: 질문 답변 저장 api 및 mutation hook 추가 * feat: 질문 api v2 추가 및 query hook 추가 * refactor: question api 변경점 추가 및 적용 * feat: question 컴포넌트 추가 * feat: questions 페이지 구현 * refactor: AIBubble 변경된 디자인 적용 (#39) * refactor: api base url 수정 및 deprecated api 명시 * feat: 질문 api v2 추가 및 query hook 추가 * refactor: question api 변경점 추가 및 적용 * refactor: bubble에 chip 컴포넌트 적용 * refactor: 변경된 AI 답변 텍스트 디자인 적용 * feat: 헤더 변경 및 favicon, og tag 적용 (#40) * feat: 카테고리 헤더 적용 및 뒤로가기 버튼 클릭시 모달 overlay * feat: right icon 색 변경 가능하게 수정 * feat: favicon, og-tag 적용 * feat: responsive 디자인 적용 (#41) * feat: desktop media query theme 추가 * feat: 디자인에 따른 desktop 반응형 적용 * setting: auto release tag action 추가 (#42) * chore: 배포 버전 명시 * feat: auto release tag action 추가 * hotfix: Release 1.0.0 deploy error 해결 (#44) * fix: 변경된 s3 url 적용 * fix: useShowLoginModal prop undefined 에러 임시 조치 * feat: useModal Dimmer 반응형 적용 * fix: useQuestionAnswer hook api import 에러 해결 * fix: useModal import warning 해결 * feat: title ,description seo 추가 * fix: page api 캐싱으로 인해 이전 질문이 잠시 보이는 문제 해결 --------- Co-authored-by: chaerim kim <89721027+chaaerim@users.noreply.github.com>

chaaerim requested a review from L2HYUNN as a code owner February 26, 2023 12:58

github-actions bot added the Type: Feature 유형: 기능 추가 label Feb 26, 2023

be-student reviewed Feb 26, 2023

View reviewed changes

L2HYUNN assigned chaaerim Feb 27, 2023

L2HYUNN reviewed Feb 27, 2023

View reviewed changes

L2HYUNN approved these changes Mar 4, 2023

View reviewed changes

chaaerim added 4 commits March 5, 2023 14:31

feat: 로그인, 회원가입 레이아웃 및 로그인 로직 구현

2025371

feat: axios 에러 커스텀

89a5d35

chore: 주석 추가

b954cce

feat: axios request interceptors 추가

79f07a8

chaaerim force-pushed the feat/login branch from 6aeac9f to 79f07a8 Compare March 5, 2023 05:31

chaaerim merged commit 1a9573a into dev Mar 5, 2023

chaaerim deleted the feat/login branch March 5, 2023 05:33

L2HYUNN pushed a commit that referenced this pull request Mar 10, 2023

feat: login (#13)

5e8ae1f

* feat: 로그인, 회원가입 레이아웃 및 로그인 로직 구현 * feat: axios 에러 커스텀 * chore: 주석 추가 * feat: axios request interceptors 추가

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: login #13

feat: login #13

chaaerim commented Feb 26, 2023

be-student left a comment •

edited

Loading

be-student Feb 26, 2023

L2HYUNN Feb 27, 2023

be-student Feb 26, 2023

L2HYUNN Feb 27, 2023

be-student Feb 27, 2023

L2HYUNN Feb 27, 2023

chaaerim Mar 1, 2023

be-student Feb 26, 2023

chaaerim Mar 1, 2023

be-student Feb 26, 2023

chaaerim Mar 1, 2023

L2HYUNN Feb 27, 2023

L2HYUNN Feb 27, 2023

L2HYUNN Feb 27, 2023

L2HYUNN Feb 27, 2023

chaaerim Mar 1, 2023

L2HYUNN Feb 27, 2023

chaaerim Mar 1, 2023

L2HYUNN Feb 27, 2023

L2HYUNN Feb 27, 2023

chaaerim Mar 1, 2023

L2HYUNN Mar 4, 2023

L2HYUNN Feb 27, 2023

chaaerim Mar 1, 2023

L2HYUNN Mar 4, 2023

L2HYUNN left a comment

feat: login #13

feat: login #13

Conversation

chaaerim commented Feb 26, 2023

🚀 작업 내용

✏️ 상세 설명

📷 스크린샷

📁 참고 자료

be-student left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

L2HYUNN left a comment

Choose a reason for hiding this comment

be-student left a comment •

edited

Loading