[김윤수] week13 by yunsusu · Pull Request #391 · codeit-bootcamp-frontend/2-Weekly-Mission

yunsusu · 2024-01-14T06:28:00Z

요구사항

기본

[로그인 페이지] “회원 가입하기”를 클릭하면 ‘/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”: “test@codeit.com”, “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을 활용했나요?

주요 변경사항

로그인 페이지 제작
회원가입 제작
관련 api 사용

스크린샷

멘토에게

제 코드에서 로그인과 회원가입 부분에서 뭐가 문제인지 잘 모르겠는 오류가 뜹니다.. 동작은 잘 하는데 거슬리기도 하고 그냥 넘어갈건 아닌 것 같아 질문 드립니다.

부족한 부분 확인하면 계속 수정해서 올리겠습니다 (any타입도 틈틈히 하겠습니다..ㅎ)

…nd/2-Weekly-Mission into part3-김윤수

sstaar91

윤수님 고생하셨습니다.
전반적으로 기능적인 구현에 대해서는 잘 해주셨지만
몇가지 생각해봐야 할 부분이 있을 것 같습니다.

우선 PR은 내 코드가 main branch에 merge 되기 전 마지막 단계이기 때문에
불필요한 console이나 주석은 제거하고 올려주시는 것이 좋습니다.

두번째로 스타일 컴포넌트를 사용하시는 것 같은데
스타일 컴포넌트도 하나의 컴포넌트처럼 취급 될 수 있기에 컴포넌트 이름 짓는 것 처럼
대문자로 지어주셔야 합니다!

세번째로 코드에 작성드리지는 않았지만, 비슷한 구조로 이루어져 있는 함수나
비슷한 역할로 사용되는 state가 있다면 하나로 합쳐서 관리하는 방법도 고민해 보시면 좋을 것 같아요

예를 들면 지금 회원가입 하는 부분에서 state가 여러개 사용되고 있고,
해당 state의 값을 변화시키는 함수의 구조가 비슷한 것들이 있는데
이 부분들은 한번 고민해 보셔서 다른 방법으로 관리하는 것을 고민해 보세요!

sstaar91 · 2024-01-15T02:08:30Z

+export default function AddLink() {
+  return (
+    <F.addLink>
+      <div style={{ width: "20px", height: "20px", position: "relative" }}>


인라인 스타일은 가급적 사용을 지양해주세요!

sstaar91 · 2024-01-15T04:25:02Z

-    userName: "",
-    img: "",
-  });
+  const [login, setLogin] = useState<string | null>(null);


Suggested change

const [login, setLogin] = useState<string | null>(null);

const [login, setLogin] = useState<string>("");

해당 state에 null이 들어오게 되는 경우가 아니라면 state의 기본값을 넣어주는 것이 좋습니다.

그리고 userData와 login이라는 state는 Header에서만 사용되는 부분이기에
Header에서 선언하고 사용하는 것이 좋겠네요!

App 컴포넌트에서 사용하게 되면 불필요한 렌더링이 발생할 수 있습니다.

sstaar91 · 2024-01-15T04:25:44Z

-          </F.addLink>
-        ) : null}
-      </F.Main>
+      <F.Main ref={targetRef}>{scrollAddUrl ? <AddLink /> : null}</F.Main>


Suggested change

<F.Main ref={targetRef}>{scrollAddUrl ? <AddLink /> : null}</F.Main>

<F.Main ref={targetRef}>{scrollAddUrl && <AddLink />}</F.Main>

&& 연산자를 이용하면 불필요한 null을 입력하지 않아도 됩니다

sstaar91 · 2024-01-15T04:27:27Z

+    // e.preventDefault();
+
+    try {
+      const res = await signin(userData);
+      console.log(res);


PR 올리실 때 console이나 주석은 제거해주세요!
코드 가독성에 영향을 미칩니다

sstaar91 · 2024-01-15T04:57:44Z

+                required
+              />
+              {emailError && <p style={{ color: "red" }}>{emailError}</p>}
+              {wrongMail ? null : <p style={{ color: "red" }}>이메일이 중복되었습니다.</p>}


Suggested change

{wrongMail ? null : <p style={{ color: "red" }}>이메일이 중복되었습니다.</p>}

{!wrongMail && <p style={{ color: "red" }}>이메일이 중복되었습니다.</p>}

요렇게 할 수도 있겠죠?

sstaar91 · 2024-01-15T04:58:22Z

+  const [showPassword, toggleShowPassword] = useToggle(false);
+  const [showConfirmPassword, toggleShowConfirmPassword] = useToggle(false);


기본값이 boolean 값일 경우 state의 이름은 의문형으로 지어주는 것이 좋습니다.

sstaar91 · 2024-01-15T05:09:28Z

질문에 대한 제 생각을 말씀드려보자면! 이미 에러 문구에 답은 나와있다고 볼 수 있겠습니다.

toggleShowPassword 함수는 useToggle이라는 훅에서 만들어서 가져온 함수인데
해당 함수의 타입을 보면 ()=> void 로 되어있는 것을 볼 수 있습니다.

하지만 img 태그에서 사용하는 onClick 이벤트에는 MouseEventHandler 타입이 필요하다는
경고문구를 띄우고 있는데요
해당 함수에 이 타입을 넣어주게 되면 해당 경고문구는 사라질 것 같습니다.

그러나 useToggle이라는 함수는 img 태그에서만 사용되는 태그가 아니기 때문에
useToggle에서 반환하는 함수의 타입을 제네릭으로 지정하고 실제 사용하는 환경에서 타입을 설정하는 방법으로
구현하는 것이 좋을 것 같습니다!

yunsusu added 4 commits January 12, 2024 11:38

feat : login api

23423a6

Merge branch 'part3-김윤수' of https://github.com/codeit-bootcamp-fronte…

75d4f80

…nd/2-Weekly-Mission into part3-김윤수

feat : 로그인 회원가입 구현 / react-hook-form을 사용

b4de537

멘토님 리뷰 수정

a70e573

yunsusu requested a review from sstaar91 January 14, 2024 06:28

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

fix : 코드 정리 / 위클리 요구사항 확인 후 수정

9266ede

sstaar91 reviewed Jan 15, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[김윤수] week13#391

Hidden character warning

[김윤수] week13#391
yunsusu wants to merge 5 commits into
codeit-bootcamp-frontend:part3-김윤수from
yunsusu:part3-김윤수-week13

yunsusu commented Jan 14, 2024

Uh oh!

sstaar91 left a comment

Uh oh!

sstaar91 Jan 15, 2024

Uh oh!

sstaar91 Jan 15, 2024

Uh oh!

sstaar91 Jan 15, 2024

Uh oh!

sstaar91 Jan 15, 2024

Uh oh!

sstaar91 Jan 15, 2024

Uh oh!

sstaar91 Jan 15, 2024

Uh oh!

sstaar91 commented Jan 15, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	const [login, setLogin] = useState<string \| null>(null);
	const [login, setLogin] = useState<string>("");

	<F.Main ref={targetRef}>{scrollAddUrl ? <AddLink /> : null}</F.Main>
	<F.Main ref={targetRef}>{scrollAddUrl && <AddLink />}</F.Main>

	{wrongMail ? null : <p style={{ color: "red" }}>이메일이 중복되었습니다.</p>}
	{!wrongMail && <p style={{ color: "red" }}>이메일이 중복되었습니다.</p>}

		const [showPassword, toggleShowPassword] = useToggle(false);
		const [showConfirmPassword, toggleShowConfirmPassword] = useToggle(false);

Conversation

yunsusu commented Jan 14, 2024

요구사항

기본

심화

주요 변경사항

스크린샷

멘토에게

Uh oh!

sstaar91 left a comment

Choose a reason for hiding this comment

Uh oh!

sstaar91 Jan 15, 2024

Choose a reason for hiding this comment

Uh oh!

sstaar91 Jan 15, 2024

Choose a reason for hiding this comment

Uh oh!

sstaar91 Jan 15, 2024

Choose a reason for hiding this comment

Uh oh!

sstaar91 Jan 15, 2024

Choose a reason for hiding this comment

Uh oh!

sstaar91 Jan 15, 2024

Choose a reason for hiding this comment

Uh oh!

sstaar91 Jan 15, 2024

Choose a reason for hiding this comment

Uh oh!

sstaar91 commented Jan 15, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants