Feature/signup kkm #69

Gyuminn · 2023-01-30T13:20:51Z

📌 나 이런 거 했어요

[회원가입 1단계]
밑줄 + 링크를 추가하였고, 약관 체크를 하지 않았다면 '다음 계단'을 비활성화 상태로 만들어주었습니다.
[회원가입 2단계]
2단계로 넘어온 직후에는 아무것도 입력되어있지 않기 때문에 '다음 계단'을 비활성화 상태로 만들어주었습니다.
[회원가입 2단계]
#이나 & 같은 특수문자가 허용되고 있었는데, 닉네임 로직에서는 서버에서 유효성 검사를 해주고 있었습니다.
서버 측에서 수정처리를 해주는 것도 좋겠지만, 유효성 검사 자체는 클라이언트와 서버 양 측에서 모두 해주는 것이 좋다고도
알고 있어서 정규식 추가 검사를 해주었습니다.
[회원가입 2단계]
문구를 변경하였습니다.
[회원가입 3단계]
비밀번호 입력 화면 문구 수정 예정
[회원가입 전체]
회원 가입 화면에서 뒤로 가기 시 새로고침 되는 상태에서 이전 단계 화면(실제로는 컴포넌트만 변경)으로 이동하도록 하였습니다.

📌 나 이런 거 알게 되었어요

useForm의 setValue 옵션에서 shouldDefault 값으로 isDirty 값을 변경해줄 수 있는 것을 알게 되었는데, isDirty 관련해서 전반적인 수정작업이 필요할 것 같습니다. 자잘한 버그가 있는 상태입니다.

📌 나 이런 거 궁금해요

메인 페이지 좌측 배너에서 회원가입에 들어가는 경우 살짝 튀는 현상(렌더링 깜빡)이 발생하는 것 같은데 추후 확인이 필요할 것 같습니다.

vercel · 2023-01-30T13:20:55Z

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

Name	Status	Preview	Comments	Updated
nextjs-book-stairs	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Feb 8, 2023 at 2:12AM (UTC)

joohaem

멋지고 고마워요!!!!! 리뷰 코멘트 달아놨어요-

오랜만에 작업해보시니 어떠신가요 k k 이러다 다시 FE 세계 오는 거 아닌가몰라~

메인 페이지 좌측 배너에서 회원가입에 들어가는 경우 살짝 튀는 현상(렌더링 깜빡)이 발생하는 것 같은데 추후 확인이 필요할 것 같습니다.

확인해보니, 추측상
pages/login.tsx에서 isAniTime 으로 애니메이션 1초간 실행하는데
다음 페이지로 넘어갈 때 그 페이지 파일을 불러오는 동안 로그인 페이지를 보여주는 것 같아요
리액트에서는 동작이 빨라서 안 그랬는데 넥스트에서는 MPA 특성상 html 파일을 불러오는 시간이 있다보니까 간극이 조금 생기나보네요
회원가입 폼처럼 framer-motion 으로 언마운트 될 때의 애니메이션을 달아주어야 할 것 같아요!
-> 제가 주말에 할게요! 하고 싶으면 할람할~

joohaem · 2023-01-31T00:30:13Z

components/signup/SignupForm.tsx

@@ -35,10 +36,14 @@ export default function SignupForm(props: SignupFormProps) {
    </>
  );

+  const linkOfCondition = referralLinkLIst[0].href;


아 ~~~ 변수 생성 좋네요! !!

joohaem · 2023-01-31T00:34:38Z

pages/signup/index.tsx

+        if (formDataKeyIndex === "email") {
+          LocalStorage.setItem("booktez-email", loginFormData["email"]);
        }
+      } else {
+        setError(formDataKeyIndex, { type: "server", message });


(제안) 저희 "email", "server" string을 const 상수로 표현함은 어떨까요??

유니온 타입으로 정의해두는 것도 좋다구 생각합니당~

joohaem · 2023-01-31T00:35:46Z

pages/signup/index.tsx

+      if (isValid) {
+        setNextStep(key);
+        if (formDataKeyIndex === "email") {
+          LocalStorage.setItem("booktez-email", loginFormData["email"]);
        }
+      } else {
+        setError(formDataKeyIndex, { type: "server", message });


(권장) else 구문을 최대한 피해야 가독성이 좋아진다고 생각해요

!isValid 로 에러 처리를 한 후에 return 시키고, 그 아래에 로직을 구성함은 어떨까요??

joohaem · 2023-01-31T00:38:42Z

pages/signup/index.tsx

+    if (isValid) {
+      setNextStep(inputValue);
+
+      if (formDataKeyIndex === "email") {
+        LocalStorage.setItem("booktez-email", loginFormData["email"]);
      }
+
+      return;
    }
+    setError(formDataKeyIndex, { type: "server", message });


요호 이렇게 되었군요!!
이것도 좋지만, 위에서 말 한 것처럼 에러 체킹을 위로 올리면, if 의 뎁스가 깊어지지 않을 수 있을 것 같아요

joohaem · 2023-01-31T00:41:01Z

pages/signup/index.tsx

-    setValue(formDataKeyIndex, "");
+    setValue(formDataKeyIndex, "", { shouldDirty: true });


👍👍👍👍

joohaem · 2023-01-31T00:42:43Z

util/check.ts

+const NICKNAME_REGEX = /^(?=.*[a-z0-9가-힣])[a-z0-9가-힣]{2,10}$/i;
+


joohaem · 2023-01-31T00:50:15Z

pages/signup/index.tsx

+    if (formDataKeyIndex == "nickname" || formDataKeyIndex == "password") {
+      const prevFormDataKeyIndex = formDataKeyIndex == "password" ? "nickname" : "email";
+
+      history.pushState(null, "", "");
+      window.onpopstate = () => {
+        setFormDataKeyIndex(prevFormDataKeyIndex);
+      };
+    } else {
+      window.onpopstate = () => {
+        // 초기화
+      };
+    }


switch문 사용하는 게 좀 더 알아보기 쉬우려나 싶네요!

(권장) if-else에, 삼항연산까지 있으니 어떤 코드인지 명확히 안 와닿는 것 같아요
formDataKeyIndex 값으로 switch 문 활용하면 좋을 것 같습니닷

여기서는 진짜 별거 아닌데, === 가 아닌 == 인 이유가 있나욤?

soryeongk

규민이 코드를 다시 보게 되다니 나 우럭.. 다시 돌아와~ 돌아와 돌아와~~

soryeongk · 2023-02-01T14:43:14Z

components/signup/SignupForm.tsx

@@ -35,10 +36,14 @@ export default function SignupForm(props: SignupFormProps) {
    </>
  );

+  const linkOfCondition = referralLinkLIst[0].href;


아 ~~~ 변수 생성 좋네요! !!

soryeongk · 2023-02-01T14:44:11Z

pages/signup/index.tsx

+        if (formDataKeyIndex === "email") {
+          LocalStorage.setItem("booktez-email", loginFormData["email"]);
        }
+      } else {
+        setError(formDataKeyIndex, { type: "server", message });


유니온 타입으로 정의해두는 것도 좋다구 생각합니당~

soryeongk · 2023-02-01T14:45:23Z

components/signup/SignupForm.tsx

+  & > a {
+    text-decoration: underline;
+  }


제가 피그마를 확인하지는 못했는데, 혹시 이 표시가 개인정보 수집 및 이용 약관에 동의합니다. 전체가 아닌 개인정보 수집 및 이용 약관에만 해당되는 것은 아닌가욥?

soryeongk · 2023-02-01T14:45:59Z

pages/signup/index.tsx

-    setValue(formDataKeyIndex, "");
+    setValue(formDataKeyIndex, "", { shouldDirty: true });


👍👍👍👍

soryeongk · 2023-02-01T14:47:53Z

pages/signup/index.tsx

+      setNextStep(inputValue);
+
+      if (formDataKeyIndex === "email") {
+        LocalStorage.setItem("booktez-email", loginFormData["email"]);


로컬스토리지 키를 상수나 타입으로 정의해두면 (나중에 코드를 고칠 누군가가 편해질 것 같아서)좋을 것 같다는 생각이 드는데, 필수는 아닙니당(근데 해주면 좋을 것 같은 느낌정도)

soryeongk · 2023-02-01T14:49:21Z

pages/signup/index.tsx

+    if (formDataKeyIndex == "nickname" || formDataKeyIndex == "password") {
+      const prevFormDataKeyIndex = formDataKeyIndex == "password" ? "nickname" : "email";
+
+      history.pushState(null, "", "");
+      window.onpopstate = () => {
+        setFormDataKeyIndex(prevFormDataKeyIndex);
+      };
+    } else {
+      window.onpopstate = () => {
+        // 초기화
+      };
+    }


여기서는 진짜 별거 아닌데, === 가 아닌 == 인 이유가 있나욤?

Gyuminn · 2023-02-08T02:20:34Z

도움을 요청합니다!!ㅜㅜ
@soryeongk @joohaem
제가 어떻게든 해보려고 했는데 잘 되지 않아서 현재까지 한 부분을 머지(기능상 에러는 x)하고, 작업을 도와주시면 감사하겠습니다.

📌 작업중 버그가 발생한 버튼 활성화 문제는 다음과 같습니다.

회원 가입 3단계중 (email <-> nickname)에서 뒤로가기, 다음단계를 반복하는 것은 문제가 없습니다만, (nickname <-> password) 부분을 왔다갔다 할 때 버튼 활성화 문제가 발생합니다. password 부분에서 nickname으로 갈 때는 정상작동하지만, 이 후 뒤로가기, 다음단계를 반복할 때 버튼이 활성화된 채로 존재합니다. useEffect의 뒤로가기 로직에서의 문제인지, useForm의 isDirty 업데이트 문제인지 모르겠어서 도움을 요청합니다..!!!

📌 할당된 작업 중 위의 문제가 해결되지 못해 진행하지 못한 작업은 다음과 같습니다.

[회원가입 3단계] 중 '비밀번호 형식 확인 문구', '디자인관련', '기능관련' - (노션에서 확인할 수 있습니다.)
코드리뷰 해주신 리팩토링 사항. - 뜯어고쳐야 할 수도 있을것 같아서 일단 냅두었습니다.

Gyuminn added 4 commits January 30, 2023 00:37

fix: change active condition of button

172015d

fix: disable button when move next step for signup

debe830

fix: check validtaion of nickname at client side

18b0881

fix: block refresh when go back in signup

837cafe

Gyuminn added the 🎉 feature label Jan 30, 2023

Gyuminn requested review from soryeongk and joohaem January 30, 2023 13:20

Gyuminn self-assigned this Jan 30, 2023

hotfix: change deps of useEffect

ecbc132

joohaem reviewed Jan 31, 2023

View reviewed changes

soryeongk approved these changes Feb 1, 2023

View reviewed changes

feat: 뒤로 가기 눌렀을 때 폼에 기존 value를 넣어놓기

ecf7fd8

vercel bot deployed to Preview February 8, 2023 02:12 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature/signup kkm #69

Feature/signup kkm #69

Gyuminn commented Jan 30, 2023 •

edited

Loading

vercel bot commented Jan 30, 2023 •

edited

Loading

joohaem left a comment •

edited

Loading

joohaem Jan 31, 2023

soryeongk Feb 1, 2023

joohaem Jan 31, 2023

soryeongk Feb 1, 2023

joohaem Jan 31, 2023 •

edited

Loading

joohaem Jan 31, 2023

joohaem Jan 31, 2023

soryeongk Feb 1, 2023

joohaem Jan 31, 2023

joohaem Jan 31, 2023

joohaem Jan 31, 2023 •

edited

Loading

soryeongk Feb 1, 2023

soryeongk left a comment

soryeongk Feb 1, 2023

soryeongk Feb 1, 2023

soryeongk Feb 1, 2023

soryeongk Feb 1, 2023

soryeongk Feb 1, 2023

soryeongk Feb 1, 2023

Gyuminn commented Feb 8, 2023

		setValue(formDataKeyIndex, "");
		setValue(formDataKeyIndex, "", { shouldDirty: true });

		const NICKNAME_REGEX = /^(?=.*[a-z0-9가-힣])[a-z0-9가-힣]{2,10}$/i;

Feature/signup kkm #69

Are you sure you want to change the base?

Feature/signup kkm #69

Conversation

Gyuminn commented Jan 30, 2023 • edited Loading

📌 나 이런 거 했어요

📌 나 이런 거 알게 되었어요

📌 나 이런 거 궁금해요

vercel bot commented Jan 30, 2023 • edited Loading

joohaem 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

joohaem Jan 31, 2023 • 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

joohaem Jan 31, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

soryeongk left a 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

Gyuminn commented Feb 8, 2023

Gyuminn commented Jan 30, 2023 •

edited

Loading

vercel bot commented Jan 30, 2023 •

edited

Loading

joohaem left a comment •

edited

Loading

joohaem Jan 31, 2023 •

edited

Loading

joohaem Jan 31, 2023 •

edited

Loading