[윤병현] week15 #995

78-artilleryman · 2024-04-07T10:54:02Z

요구사항

기본

[로그인페이지] 회원 가입하기”를 클릭하면 ‘/signup’ 페이지로 이동하나요?
[로그인페이지] 이메일 input에 placeholder는 “이메일을 입력해 주세요.”, 비밀번호 input에 placeholder는 “비밀번호를 입력해 주세요.”가 보이나요?
[로그인페이지]이메일 input에서 focus out 할 때, 값이 없을 경우 아래에 “이메일을 입력해주세요.” 에러 메세지가 보이나요?
[로그인페이지] 이메일 input에서 focus out 할 때, 이메일 형식에 맞지 않는 값이 있는 경우 아래에 “올바른 이메일 주소가 아닙니다.” 에러 메세지가 보이나요?
[로그인페이지] 비밀번호 input에서 focus out 할 때, 값이 없을 경우 아래에 “비밀번호를 입력해주세요.” 에러 메세지가 보이나요?
[로그인페이지] 로그인 실패하는 경우, 이메일 input 아래에 “이메일을 확인해주세요.”, 비밀번호 input 아래에 “비밀번호를 확인해주세요.” 에러 메세지가 보이나요?
[로그인페이지] 로그인 버튼 클릭 또는 Enter키 입력으로 로그인 실행 되나요?
[로그인페이지] https://bootcamp-api.codeit.kr/docs 에 명세된 “/api/sign-in”으로 { “email”: “[email protected]”, “password”: “sprint101” } POST 요청해서 성공 응답을 받으면 “/folder”로 이동하나요?
[회원가입 페이지] “회원 가입하기”를 클릭하면 ‘/signin’ 페이지로 이동하나요?
[회원가입 페이지] 이메일 input에 placeholder는 “이메일을 입력해 주세요.”, 비밀번호 input에 placeholder는 “영문, 숫자를 조합해 8자 이상 입력해 주세요. ”비밀번호 확인 input에 placeholder는 “비밀번호와 일치하는 값을 입력해 주세요.”가 보이나요?
[회원가입 페이지] 이메일 input에서 focus out 할 때, 값이 없을 경우 “이메일을 입력해주세요.” 에러 메세지가 보이나요?
[회원가입 페이지] 이메일 input에서 focus out 할 때, 이메일 형식에 맞지 않는 값이 있는 경우 “올바른 이메일 주소가 아닙니다.” 에러 메세지가 보이나요?
[회원가입 페이지] 비밀번호 input에서 focus out 할 때, 값이 8자 미만으로 있거나 문자열만 있거나 숫자만 있는 경우, “비밀번호는 영문, 숫자 조합 8자 이상 입력해 주세요.” 에러 메세지가 보이나요?
[회원가입 페이지] 비밀번호 input과 비밀번호 확인 input의 값이 다른 경우, 비밀번호 확인 input 아래에 “비밀번호가 일치하지 않아요.” 에러 메세지가 보이나요?
[회원가입 페이지] 회원가입을 실행할 경우, 문제가 있는 경우 문제가 있는 input에 에러 메세지가 보이나요?
[회원가입 페이지] 회원가입 버튼 클릭 또는 Enter키 입력으로 회원가입 실행 되나요?
[회원가입 페이지] 이메일 중복 확인은 “/api/check-email” POST 요청해서 확인 할 수 있나요?
[회원가입 페이지] 유효한 회원가입 형식의 경우 “/api/sign-up” POST 요청하고 성공 응답을 받으면 “/folder”로 이동하나요?
[로그인, 회원가입 페이지 공통] 눈 모양 아이콘 클릭시 비밀번호의 문자열이 보이기도 하고, 가려지나요?
[로그인, 회원가입 페이지 공통] 비밀번호의 문자열이 가려질 때는 눈 모양 아이콘에는 사선이 그어져있고, 비밀번호의 문자열이 보일 때는 사선이 없는 눈 모양 아이콘이 보이나요?
[로그인, 회원가입 페이지 공통] 소셜 로그인에 구글 아이콘 클릭시 ‘https://www.google.com’, 카카오 아이콘 클릭시 ‘https://www.kakaocorp.com/page’로 이동하나요?
[로그인, 회원가입 페이지 공통] 로그인/회원가입시 성공 응답으로 받은 accessToken을 로컬 스토리지에 저장하나요?
[로그인, 회원가입 페이지 공통] 로그인/회원가입 페이지에 접근시 로컬 스토리지에 accessToken이 있는 경우 ‘/folder’ 페이지로 이동하나요?

심화

[심화 체크리스트] 로그인, 회원가입 기능에 react-hook-form을 활용했나요?

주요 변경사항

로그인, 회원가입 페이지 생성
로그인 기능, 회원가입 기능 구현
react-hook-form 사용

스크린샷

멘토에게

이번에는 axios를 사용해서 api 통신을 해봤습니다. 근데 api 통신에서 발생하는 오류 처리를 어떻게 하면 좋을지 멘토님에 의견 들어보고 싶습니다.

vercel · 2024-04-07T10:54:05Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
4-weekly-mission	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 7, 2024 10:54am

greenblues1190

병현님 react hook form 사용해 폼 로직 잘 구현해주셨네요~ 몇가지 부분들 피드백 드렸어요

greenblues1190 · 2024-04-08T14:37:20Z

src/components/signinPage/Input.tsx

-        <ErrorMesage>필수 입력사항입니다.</ErrorMesage>
-      )}
+      {errors && <ErrorMesage text={error?.message?.toString()} />}


r:

errors가 아니라 error가 되어야 할 것 같아요.

앞에서 error가 truthy로 검증되었기 때문에 error에서 message 호출할 때는 체이닝하지 않아도 될 것 같습니다.

Suggested change

<ErrorMesage>필수 입력사항입니다.</ErrorMesage>

)}

{errors && <ErrorMesage text={error?.message?.toString()} />}

{errors && <ErrorMesage text={error.message?.toString()} />}

greenblues1190 · 2024-04-08T14:43:59Z

src/components/signinPage/Input.tsx

        />
        {type === "password" && (
          <ImgPosition onClick={toggleEyesButton}>
            {pwState ? (
-              <Image src={setPwOff} alt="Pw-off" />
-            ) : (
              <Image src={setPwOn} alt="Pw-on" />


r: 반대로 된 것 같아요 👀

greenblues1190 · 2024-04-08T14:51:11Z

src/components/signinPage/LogoBox.tsx

+        {text}{" "}
        <Link style={LinkStyle} href={`/`}>
-          회원 가입하기
+          {linkText}


c: 회원 가입하기 링크의 href가 메인 페이지가 맞을까요? 👀

로고 정도만 컴포넌트로 분리하고 회원이 아니신가요와 회원가입하기 링크정도는 회원가입과 로그인 페이지 렌더링 코드부분
에 뒀으면 어땠을까 생각이 드네요. 어떤 컴포넌트를 분리하고 분리하지 않아야 유지보수에 좋은 코드가 될 수 있을지에 대해 한번 생각해보셨으면 좋겠습니다!

https://atomicdesign.bradfrost.com/chapter-2/

greenblues1190 · 2024-04-08T14:56:16Z

src/pages/signin/index.tsx

-            placeholder="비밀번호를 입력해 주세요"
-          ></Input>
+        <LogoBox text="회원이 아니신가요?" linkText="회원 가입하기" />
+        <Form onSubmit={handleSubmit(onSubmit)}>


r: 폼 요소의 에러 처리는 handleSubmit의 두번째 인자인 onError로 처리하면 함수의 책임이 분리되어 더 유연한 코드가 될 것 같아요.

Suggested change

<Form onSubmit={handleSubmit(onSubmit)}>

<Form onSubmit={handleSubmit(onSubmit, onError)}>

{/* 잘못된 값으로 폼 제출 시 `register` 함수에서 정의한 에러 메시지를 `onError`에서 전달받아 사용하기 /*}

greenblues1190 · 2024-04-08T14:59:20Z

src/pages/signin/index.tsx

+    const res = await loginRequest(data);
+
+    if (res) {
+      const { data } = res;
+      window.localStorage.setItem("accessToken", data.accessToken);
+      router.push("/folder");
+    } else {
+      setError("userEmail", { message: "이메일을 확인해주세요" });
+      setError("userPw", { message: "비밀번호를 확인해주세요" });
+    }


c: await loginRequest(data)가 성공하고 res가 없는 경우가 있나요? 로그인 요청 실패 시 첫번째 라인에서 예외 발생해 else 절로 진입이 안될 것 같아요.

try { const res = await loginRequest(data); // loginRequest 실패 시 진입 불가능한 코드들 const { data } = res; window.localStorage.setItem("accessToken", data.accessToken); router.push("/folder"); } catch(e) { // @todo 에러 처리 }

greenblues1190 · 2024-04-08T15:09:57Z

src/pages/signup/index.tsx

+    const res = await signupRequest(data);
+
+    if (res) {
+      const { data } = res;
+      window.localStorage.setItem("accessToken", data.accessToken);
+      router.push("/signin");
+    }


c: 사용자 인증/인가 로직은 커스텀 훅 등으로 분리해주세요. 다른 컴포넌트에서 쉽게 재사용할 수 있고 여러 인증 방식 추가에 유연하게 대응할 수 있습니다.

Suggested change

const res = await signupRequest(data);

if (res) {

const { data } = res;

window.localStorage.setItem("accessToken", data.accessToken);

router.push("/signin");

}

try {

// API 요청, 토큰 저장 등을 분리

await signup(data);

router.push("/signin");

} catch {

// 예외 처리

}

greenblues1190 · 2024-04-08T15:14:15Z

src/utils/Api.ts

+    } else if (response.status === 500) {
+      console.log("서버에러");
+    }


c: 500 에러는 axios interceptor로 공통 에러 처리하면 좋겠네요!

greenblues1190 · 2024-04-08T15:16:18Z

src/utils/Api.ts

+    if (response.status === 200) {
+      const res = response.data;
+      return res;
+    } else if (response.status === 400) {
+      console.log("없는 유저 정보");
+    } else if (response.status === 500) {
+      console.log("서버에러");
+    }


r: 여기도 마찬가지로 진입 불가능한 코드가 있네요. axios에서 상태 코드 4~500번대이면 에러 발생해 catch절이 실행됩니다.

Suggested change

if (response.status === 200) {

const res = response.data;

return res;

} else if (response.status === 400) {

console.log("없는 유저 정보");

} else if (response.status === 500) {

console.log("서버에러");

}

const res = response.data;

return res;

// } else if (response.status === 400) {

// console.log("없는 유저 정보");

// } else if (response.status === 500) {

// console.log("서버에러");

// }

greenblues1190 · 2024-04-21T23:59:19Z

미션 진행을 위해 머지합니다

78-artilleryman added 13 commits April 6, 2024 23:59

design: 소셜 로그인 UI 생성

3faa65f

design: 로그인 페이지 반응형 스타일 적용

64ef989

design: 회원가입 페이지 생성

c6b7469

feat: id validation 설정

8d9d472

feat: 비밀번호 validation 생성

7f8fb5b

feat: 로그인 기능 구현

eae70f1

refactor: 소셜 링크 연결

904cd48

refactor: focus out 됐을 때 오류 메시지 출력되게 변경

657632a

feat: 회원가입 validation 설정

0383ef6

feat: 회원가입 기능 구현

50a7909

feat: 이메일 중복 검사 기능 구현

0939f8f

refactor: 로그인 실패시 오류 메세지 추가, 오류시 인풋 border 색깔 변경되게 구현

9231d9a

refactor: 눈 모양 아이콘 누르면 비밀번호 보이게 구현

39b6f27

vercel bot deployed to Preview – 4-weekly-mission April 7, 2024 10:54 View deployment

78-artilleryman requested a review from greenblues1190 April 7, 2024 10:55

78-artilleryman self-assigned this Apr 7, 2024

78-artilleryman added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Apr 7, 2024

greenblues1190 requested changes Apr 8, 2024

View reviewed changes

greenblues1190 merged commit 2d784f7 into codeit-bootcamp-frontend:part3-윤병현 Apr 21, 2024
2 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[윤병현] week15 #995

[윤병현] week15 #995

78-artilleryman commented Apr 7, 2024 •

edited

Loading

vercel bot commented Apr 7, 2024 •

edited

Loading

greenblues1190 left a comment

greenblues1190 Apr 8, 2024 •

edited

Loading

greenblues1190 Apr 8, 2024

greenblues1190 Apr 8, 2024

greenblues1190 Apr 8, 2024

greenblues1190 Apr 8, 2024

greenblues1190 Apr 8, 2024

greenblues1190 Apr 8, 2024

greenblues1190 Apr 8, 2024

greenblues1190 commented Apr 21, 2024

	<Form onSubmit={handleSubmit(onSubmit)}>
	<Form onSubmit={handleSubmit(onSubmit, onError)}>
	{/* 잘못된 값으로 폼 제출 시 `register` 함수에서 정의한 에러 메시지를 `onError`에서 전달받아 사용하기 /*}

[윤병현] week15 #995

[윤병현] week15 #995

Conversation

78-artilleryman commented Apr 7, 2024 • edited Loading

요구사항

기본

심화

주요 변경사항

스크린샷

멘토에게

vercel bot commented Apr 7, 2024 • edited Loading

greenblues1190 left a comment

Choose a reason for hiding this comment

greenblues1190 Apr 8, 2024 • edited Loading

Choose a reason for hiding this comment

greenblues1190 Apr 8, 2024

Choose a reason for hiding this comment

greenblues1190 Apr 8, 2024

Choose a reason for hiding this comment

greenblues1190 Apr 8, 2024

Choose a reason for hiding this comment

greenblues1190 Apr 8, 2024

Choose a reason for hiding this comment

greenblues1190 Apr 8, 2024

Choose a reason for hiding this comment

greenblues1190 Apr 8, 2024

Choose a reason for hiding this comment

greenblues1190 Apr 8, 2024

Choose a reason for hiding this comment

greenblues1190 commented Apr 21, 2024

78-artilleryman commented Apr 7, 2024 •

edited

Loading

vercel bot commented Apr 7, 2024 •

edited

Loading

greenblues1190 Apr 8, 2024 •

edited

Loading