[FE] 비밀번호 변경 기능을 구현한다 #950

skiende74 · 2024-11-07T14:02:41Z

❗ Issue

[FE] 비밀번호 변경 기능을 구현한다. #949

✨ 구현한 기능

flow 3스텝

비밀번호 변경 요청 (이메일 전송하는 API콜)
-> 2. 확인코드 입력받아서 (확인코드검증하는 API콜)
-> 3. 그 후 비밀번호 패턴검증후 (최종 변경요청 API콜)

다음 스텝으로 버튼은 각 API콜들이 success일 때만 활성화.

멀티 스텝 페이지 패턴으로 구현했습니다.
부모페이지와 1,2,3 스텝을 담당하는 페이지로 구성됩니다.

API콜들, step 넘기기 관련 로직들은 부모페이지에 있고,
사용자 입력 UI, 검증은 자식(step)페이지들이 책임집니다

// pages/ResetPasswordPage.tsx

{step === 0 && (
        <SendVerificationEmailStep
          onNext={async (value: ResetPasswordArgs['email']) => {
            setResetPasswordArgs({ email: value });
            setStep(1);
          }}
        />
      )}
      {step === 1 && (
        <EnterVerificationCodeStep
          args={resetPasswordArgs as Pick<ResetPasswordArgs, 'email'>}
          onNext={async (value: Pick<ResetPasswordArgs, 'email' | 'code'>) => {
            setResetPasswordArgs(args => ({ ...args, ...value }));
            setStep(2);
          }}
        />
      )}
      {step === 2 && (
        <ResetPasswordStep
          args={resetPasswordArgs as Pick<ResetPasswordArgs, 'email' | 'code'>}
          onNext={async (value: ResetPasswordArgs) => {
            await postToResetPassword(value, {
              onSuccess: () => {
                showToast({ message: TOAST_MESSAGE.RESET_PASSWORD_COMPLETE, type: 'confirm' });
                navigate(ROUTE_PATH.signIn);
              },
            });
          }}
        />
      )}

pages/ResetPasswordPage 파일이 가장 주된 파일입니다.
(그 다음으로 components/ResetPassword/* 파일입니다.)
따라서 저 파일 위주로만 봐주시면 됩니다.

2.mp4

📢 논의하고 싶은 내용

백엔드가 비밀번호변경API 아직 완성이안돼서 기다렸다가 머지해야 될 거 같네요
(원래는 이번주 완성하기로 되어있었는데 머지가 지연되고 있다하네요)

🎸 기타

참고 : Button이라는 공통컴포넌트가 원래 disabled일때 회색되어야하는데 안되고있었길래 되게해놨습니다.

github-actions · 2024-11-07T14:04:27Z

🚀 storybook: https://669cc4025d9f500bb8c34778-riymmrynzd.chromatic.com/

ooherin

빠른 시간안에 저를 도와 구현을 완료해주신 제이드 정말 감사합니다..!! 정말 대단하신데요! 👍 stepper 가 조금 까다로운 로직인데, 제이드 코드 정말 깔끔해서 감탄하면서 봤네요!

ooherin · 2024-11-08T01:35:48Z

frontend/src/components/ResetPassword/EnterVerificationCodeStep.tsx

+      onSuccess: () => setIsComplete(true),
+      onError: error => setPostErrorMessage(error.message),
+    });
+  const handleClickNext = () => {


사소한 건데 한칸 띄우면 좋을 것 같아요:)

반영하였습니다.

ooherin · 2024-11-08T01:36:09Z

frontend/src/components/ResetPassword/EnterVerificationCodeStep.tsx

+
+  const canMove = isEmailValid && isComplete;
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {


접근성 챙기신 것 좋습니다👍👍

👍👍👍

ooherin · 2024-11-08T01:40:00Z

frontend/src/pages/SignInPage.tsx

@@ -82,7 +83,7 @@ const SignInPage = () => {
          <FormField onKeyDown={handleKeyDown}>
            <FormField.Label label="이메일" />
            <FormField.Input maxLength={254} value={email} name="email" onChange={onChangeEmail} />
-            <FormField.ErrorMessage value={getEmailErrors()} />
+            {getEmailErrors() && <FormField.ErrorMessage value={getEmailErrors()} />}


이 부분을 바꾸신 이유가 있을까요? 개인적으로 layout 변경을 최소화하기 위해 errorMessage의 공간을 남겨두셨는데, 이유가 궁금해서요!

예전에 그렇게 한 뒤로 계속 고민하였는데,
미리 간격을 만들어 놓으니 공간차지가 과도하게 많아 UI가 많이 안 이쁘다는 점이 가장 크고
토스나 다른사람들 코드들을 참고해보니 에러상황에서 layout change가 발생하게끔 짜시는분들이 많길래 이렇게 하였습니다 !

ooherin · 2024-11-08T01:41:42Z

frontend/src/components/ResetPassword/EnterVerificationCodeStep.tsx

+    isValidated: isEmailValid,
+  } = useValidateInput({
+    initialValue: '',
+    validates: [],


아 이게 코드 관련된 함수였군요! getCodeError 등으로 Email 대신 code 로 수정하셔야 할 것 같습니다!

ooherin · 2024-11-08T01:43:12Z

frontend/src/components/ResetPassword/ResetPasswordStep.tsx

+
+  return (
+    <>
+      <Header left={<Header.Backward onClick={handleClickBackward} />} />


Step 이랑 관련 없이 Logo Header 부분이 반복되는 것 같은데, 이를 부모 컴포넌트로 빼지 않은게 의도적인 걸까요? 아마 바쁘셔서 잊으셨을 수도 있을 것 같네요..!

반영하였습니다

ooherin · 2024-11-08T01:45:39Z

frontend/src/components/ResetPassword/SendVerificationEmailStep.tsx

+
+  const canMove = isEmailValid && isComplete;
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {


이 keyDown은 이정도면 유틸로 뺴도 좋을 것 같기도 하네요...! 지금도 나쁘지 않긴합니다!!

ooherin · 2024-11-08T01:47:27Z

frontend/src/components/ResetPassword/ResetPasswordStep.tsx

+
+export default SendVerificationEmailStep;
+
+const S = {


사실 이렇게 반복되는 CSS의 경우 중복 코드가 많아서 고민이 많았는데요. 개인적으로 LandingPage 때 비슷한 걸 겪어서, 이럴 때는 상위에 공용 css 파일을 만들어 해당 파일을 다음과 같이 import 해서 사용하였습니다!

import * as CS from './style' //CS는 commonStyle 이라는 뜻

제이드도 한번 고려해보시면 좋을 것 같아요!

그러게요 스탭별로 동일한 스타일이라 유지보수하기도 하나의 파일로 관리하는 편이 좋을거 같습니다~!

반영하였습니다

ooherin · 2024-11-08T01:48:09Z

frontend/src/components/_common/FlexBox/FlexBox.tsx

@@ -13,7 +14,7 @@ const FlexBox = {
    gap?: number | string;
    flexWrap?: string;
    width?: string;
-    justify?: 'space-between' | 'around';
+    justify?: CSSProperties['justifyContent'];


우와 이거 진짜 좋네요!!!!👏👏

ooherin · 2024-11-08T01:48:24Z

frontend/src/components/_common/Button/Button.tsx

    ${({ isSquare }) => (isSquare ? 'border-radius: 0.4rem' : 'border-radius: 10rem')};
    ${({ size }) => sizeStyles[size]};
-    ${({ color }) => ColorStyles[color]};
+    ${({ color, disabled }) => ColorStyles[disabled ? 'disabled' : color]};


이걸 빠뜨렸군요..?ㅎㅎ감사합니다!

ooherin · 2024-11-08T01:51:27Z

frontend/src/pages/ResetPasswordPage.tsx

+    <>
+      {step === 0 && (
+        <SendVerificationEmailStep
+          onNext={async (value: ResetPasswordArgs['email']) => {


onNext로 스탭 넘어가는 동작을 상위 컴포넌트에서 처리한 거 정말 아이디어 좋은 것 같습니다!ResetPasswordArgs['email']로 사용한것도, 신박하고 좋은 것 같습니다!! 나중에 객체에서 특정 속성 타입만 꺼낼 때 사용해 봐야 겠네요!!

healim01

수고하셨습니다~!! 멋지네용
자잘한 코멘트 적어놨는데 확인해보시고 반영하시면 될거 같습니당

그리고 radius 관련해서 이야기한번 나왔었는데 제대로 이야기 해보면 좋을거 같앙요~!

healim01 · 2024-11-09T04:59:41Z

frontend/src/components/ResetPassword/EnterVerificationCodeStep.tsx

+
+  const canMove = isEmailValid && isComplete;
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {


👍👍👍

healim01 · 2024-11-09T05:00:49Z

frontend/src/components/ResetPassword/EnterVerificationCodeStep.tsx

+    display: flex;
+    position: relative;
+
+    width: 30rem;
+    margin-bottom: 0.5rem;
+    padding: 1.6rem;
+
+    background-color: ${({ theme }) => theme.palette.background};
+    flex-direction: column;


사소하지만 이후에 ${flexColumn} 으로 통일 가능할거 같아요~!

적용하였습니다

healim01 · 2024-11-09T05:01:08Z

frontend/src/components/ResetPassword/EnterVerificationCodeStep.tsx

+
+    background-color: ${({ theme }) => theme.palette.background};
+    flex-direction: column;
+    border-radius: 1rem;


radius 도 그때 이야기 한번 나왔는데 정확히 어떤 수치로 정할지 통일해봐야겠네요~!

healim01 · 2024-11-09T05:01:57Z

frontend/src/components/ResetPassword/ResetPasswordStep.tsx

+
+export default SendVerificationEmailStep;
+
+const S = {


그러게요 스탭별로 동일한 스타일이라 유지보수하기도 하나의 파일로 관리하는 편이 좋을거 같습니다~!

skiende74 · 2024-11-10T05:37:32Z

생각해보니 기존기능을 해치는게아니라, 신규기능 추가를 dev에 하는 거라서
백엔드 머지속도에 꼭맞출필요는없네요.
오늘중으로 리뷰반영해서 올리겠습니다

github-actions · 2024-11-10T10:16:45Z

🚀 storybook: https://669cc4025d9f500bb8c34778-xvanspebqn.chromatic.com/

skiende74 · 2024-11-10T10:46:58Z

리뷰들 반영하였습니다.
백엔드속도에 맞춰야되는줄알고 반영이늦었네요. (꼭 그럴필요는없었던..)
로그인을 위해 모킹된 CI테스트도 덤으로 작성하였습니다.

github-actions · 2024-11-10T10:47:53Z

🚀 storybook: https://669cc4025d9f500bb8c34778-bgwagrmdez.chromatic.com/

github-actions · 2024-11-11T04:25:22Z

🚀 storybook: https://669cc4025d9f500bb8c34778-fegxtwmuhv.chromatic.com/

skiende74 · 2024-11-11T04:33:38Z

백엔드 api 엔드포인트 변경(몇글자수준),
에러코드 반영하였습니다.

github-actions · 2024-11-11T04:34:29Z

🚀 storybook: https://669cc4025d9f500bb8c34778-qewovlunby.chromatic.com/

healim01 · 2024-11-12T02:57:08Z

굳 확인했습니다~~!!

skiende74 added 5 commits November 7, 2024 20:57

feat: find password 기본페이지 일부 구현

3f78090

feat: 비밀번호 변경관련 3개의 API 구현 및 react-query 연결

1c392dc

feat: 3개의 step 페이지 임시생성

cebe730

fix: 버튼 공통컴포넌트 disabled에 대해 UI반응안하던 거 해결. + step 페이지 변수명/타입 구현

e259abe

feat: 각 step 구현 완료 및 완료시 토스트메시지

d153b8f

skiende74 temporarily deployed to frontend-msw November 7, 2024 14:02 — with GitHub Actions Inactive

ooherin reviewed Nov 8, 2024

View reviewed changes

healim01 reviewed Nov 9, 2024

View reviewed changes

skiende74 self-assigned this Nov 10, 2024

feat: 리뷰 반영

013afc7

skiende74 temporarily deployed to frontend-msw November 10, 2024 10:15 — with GitHub Actions Inactive

feat: 로그인관련 CI용 e2e테스트 작성 및 접근성 챙기기

d6805e8

skiende74 temporarily deployed to frontend-msw November 10, 2024 10:45 — with GitHub Actions Inactive

skiende74 added 2 commits November 11, 2024 13:12

feat: 백엔드 api 엔드포인트 변경 반영 및 불필요한 api호출 제거

38d39c9

feat: 백엔드 에러코드 추가

dfd66ff

skiende74 had a problem deploying to frontend-msw November 11, 2024 04:23 — with GitHub Actions Failure

feat: 작은 변경사항 이메일 로그인 테스트에 반영

dac6847

skiende74 temporarily deployed to frontend-msw November 11, 2024 04:32 — with GitHub Actions Inactive

skiende74 added 🔑 FE 😊 Feature 🧪 Test labels Nov 11, 2024

skiende74 merged commit 24eee8a into dev-fe Nov 12, 2024
3 checks passed

skiende74 deleted the feat/949-find-password branch November 12, 2024 04:17

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FE] 비밀번호 변경 기능을 구현한다 #950

[FE] 비밀번호 변경 기능을 구현한다 #950

skiende74 commented Nov 7, 2024 •

edited

Loading

github-actions bot commented Nov 7, 2024

ooherin left a comment

ooherin Nov 8, 2024

skiende74 Nov 11, 2024

ooherin Nov 8, 2024

healim01 Nov 9, 2024

ooherin Nov 8, 2024

skiende74 Nov 10, 2024 •

edited

Loading

ooherin Nov 8, 2024

ooherin Nov 8, 2024

skiende74 Nov 10, 2024

ooherin Nov 8, 2024

ooherin Nov 8, 2024

healim01 Nov 9, 2024

skiende74 Nov 10, 2024 •

edited

Loading

ooherin Nov 8, 2024

ooherin Nov 8, 2024

ooherin Nov 8, 2024

healim01 left a comment

healim01 Nov 9, 2024

healim01 Nov 9, 2024

skiende74 Nov 10, 2024

healim01 Nov 9, 2024

skiende74 Nov 10, 2024

healim01 Nov 9, 2024

skiende74 commented Nov 10, 2024 •

edited

Loading

github-actions bot commented Nov 10, 2024

skiende74 commented Nov 10, 2024 •

edited

Loading

github-actions bot commented Nov 10, 2024

github-actions bot commented Nov 11, 2024

skiende74 commented Nov 11, 2024

github-actions bot commented Nov 11, 2024

healim01 commented Nov 12, 2024


		const canMove = isEmailValid && isComplete;

		const handleKeyDown = (event: React.KeyboardEvent) => {

[FE] 비밀번호 변경 기능을 구현한다 #950

[FE] 비밀번호 변경 기능을 구현한다 #950

Conversation

skiende74 commented Nov 7, 2024 • edited Loading

❗ Issue

✨ 구현한 기능

flow 3스텝

📢 논의하고 싶은 내용

🎸 기타

github-actions bot commented Nov 7, 2024

ooherin 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

skiende74 Nov 10, 2024 • 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

skiende74 Nov 10, 2024 • 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

healim01 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

skiende74 commented Nov 10, 2024 • edited Loading

github-actions bot commented Nov 10, 2024

skiende74 commented Nov 10, 2024 • edited Loading

github-actions bot commented Nov 10, 2024

github-actions bot commented Nov 11, 2024

skiende74 commented Nov 11, 2024

github-actions bot commented Nov 11, 2024

healim01 commented Nov 12, 2024

skiende74 commented Nov 7, 2024 •

edited

Loading

skiende74 Nov 10, 2024 •

edited

Loading

skiende74 Nov 10, 2024 •

edited

Loading

skiende74 commented Nov 10, 2024 •

edited

Loading

skiende74 commented Nov 10, 2024 •

edited

Loading