Feature/email page #28

Jeong-jeong · 2022-05-30T16:31:03Z

🧑‍💻 PR 내용

Closes Feat: 학교 인증 페이지 구현 #26
작성하지 않았을 때
형식이 안 맞을 때
이메일 형식이 맞을 때 && 인증번호 보내기 submit
인증번호 submit 성공시

🧐 논의

width를 100%로 설정해놨는데 고정된 값으로 해야될지 궁금합니다.

📸 스크린샷

…feature/email-page

Jeong-jeong · 2022-06-01T06:33:50Z

src/components/authMail/AuthCodeForm.tsx

+  useEffect(() => {
+    if (email) handleCountdown();
+  }, [email]);


email 값이 있을 때만 countdown이 실행되도록 구현했습니다

Jeong-jeong · 2022-06-01T06:34:11Z

src/components/authMail/AuthCodeForm.tsx

+        <Input name="authCode" placeholder="인증번호" maxLength={8} onChange={handleChange} />
+        {errors.email && <ErrorMessage>{errors.email}</ErrorMessage>}
+        <StyledButton disabled={!!errors.authCode}>확인</StyledButton>


에러 메세지 관한 시안이 아직 없어서 임시로 넣어두었습니다

Jeong-jeong · 2022-06-01T06:37:04Z

src/components/base/Input.tsx

+      }
+    }, []);
+    // FIXME: ref 고치기
+    return <InputStyled ref={ref} {...rest} height={height} width={width} focusColor={focusColor} isFocus={isFocus} />;


ref 타입 에러가 나는데 원인을 모르겠어서ㅠㅠ 시간날 때 확인 가능하시면 감사하겠습니다

25번째줄 ref의 타입을
ref: React.ForwardedRef<HTMLInputElement>
로 하면 에러 사라집니다!

자동 포커스 때문에 고민이시면 제가 이미 구현해둔거라 더 쉽게 가능 할거 같아요!
ref={ref} 를 ref={inputRef} 로 하시면 따로 ref를 받을 필요가 없어서 25번째 줄이 통으로 없어지고,
30 번째줄 if문을
if (inputRef.current && isFocus === true ) inputRef.current.focus();

이렇게 하신뒤에 EamilForm 쪽으로 오시면

@leejiho9898 우와 감사합니다!!!!

Jeong-jeong · 2022-06-01T06:38:13Z

src/pages/AuthMail.tsx


 const AuthMail = () => {
-  const [canMoveNext, setCanMoveNext] = useState(true);
+  const [cantMoveNext, setCantMoveNext] = useState(true);


disable과 canMoveNext 이름이 상충해 cant로 변경하였습니다. 더 좋은 아이디어 있으면 수정해주세요!

choisohyun

수고많으셨습니다!

choisohyun · 2022-06-01T06:59:57Z

src/hooks/common/useForm.ts

+  authCode?: string;
+}
+
+interface useFormProps {


Suggested change

interface useFormProps {

interface UseFormProps {

케이스 오타인것 같아요!

choisohyun · 2022-06-01T07:00:24Z

src/hooks/common/useForm.ts

+  validate: (arg: InitialValues) => InitialValues;
+}
+
+const useForm = ({ initialValues, onSubmit, validate }: useFormProps) => {


이런 훅 넘 유용하고 좋네요 👍👍

leejiho9898

몇가지 구현한 기능이 중복되는거 같아서 이것만 수정해주시면 좋을거 같아요!

leejiho9898 · 2022-06-01T07:50:21Z

src/hooks/common/useForm.ts

+
+interface useFormProps {
+  initialValues: InitialValues;
+  onSubmit: () => void;


useform에 onSubmit까지 달려있는거는 처음 봤는데 좋은거같아요 배우고 갑니다 ㅎㅎ

leejiho9898 · 2022-06-01T08:17:54Z

src/components/base/Input.tsx

+      }
+    }, []);
+    // FIXME: ref 고치기
+    return <InputStyled ref={ref} {...rest} height={height} width={width} focusColor={focusColor} isFocus={isFocus} />;


25번째줄 ref의 타입을
ref: React.ForwardedRef<HTMLInputElement>
로 하면 에러 사라집니다!

leejiho9898 · 2022-06-01T08:30:31Z

src/components/base/Input.tsx

+      }
+    }, []);
+    // FIXME: ref 고치기
+    return <InputStyled ref={ref} {...rest} height={height} width={width} focusColor={focusColor} isFocus={isFocus} />;


자동 포커스 때문에 고민이시면 제가 이미 구현해둔거라 더 쉽게 가능 할거 같아요!
ref={ref} 를 ref={inputRef} 로 하시면 따로 ref를 받을 필요가 없어서 25번째 줄이 통으로 없어지고,
30 번째줄 if문을
if (inputRef.current && isFocus === true ) inputRef.current.focus();

이렇게 하신뒤에 EamilForm 쪽으로 오시면

leejiho9898 · 2022-06-01T08:58:01Z

src/components/authMail/EmailForm.tsx

+  useEffect(() => {
+    if (emailInputRef.current) emailInputRef.current.focus();
+  }, []);
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <InputsWrapper>
+        <Input name="email" placeholder="이메일" maxLength={50} onChange={handleChange} ref={emailInputRef} />


제가 input 컴포넌트에 focus 속성을 넣어놨어요 그래서 따로 안만드시고 바로 isFocus만 넣어주시면 됩니다.

<Input name="email" placeholder="이메일" maxLength={50} onChange={handleChange} isFocus />

choisohyun · 2022-06-01T09:51:57Z

src/pages/AuthMail.tsx


  return (
-    <SurveyTemplate disableNext={canMoveNext} hasProgressBar={false}>
-      <Button onClick={() => setCanMoveNext((prev) => !prev)}>클릭</Button>
+    <SurveyTemplate disableNext={cantMoveNext} currStep={3} totalStep={10}>


지영님 인증메일 쪽은 hasProgressBar={false} 넘겨주시면 프로그래스바 안나올거에요!

Jeong-jeong added 12 commits May 31, 2022 01:26

feat: SurveyTemplate 수정, 변경된 버튼 반영

a0fa1f1

feat: Input 컴포넌트 수정, ref 타입오류 미해결

ed71d90

feat: Button 컴포넌트 disabled 관련 로직 추가

75da525

refactor: 반응형을 위한 position: relative 추가 in SurveyTemplate

46dedc4

feat: Title 공통 컴포넌트 구현

9089785

Design: warning 컬러 추가

40fe668

feat: 메일 인증 페이지 이메일 form 구현

1e9db51

feat: EmailForm 구현 완료. cantMoveNext로 이름 변경

3cbb374

feat: AuthCodeForm 구현, components/authMail 폴더로 이동

bc7ddcb

feat: 카운트다운 구현

a682e5f

feat: useForm submit 로직 수정

18e3c43

feat: submit 함수 컴포넌트 외부로 분리

3e933d2

Jeong-jeong self-assigned this Jun 1, 2022

Jeong-jeong added the Feat 새로운 기능 추가 label Jun 1, 2022

Merge branch 'dev' of github.com:YAPP-Github/20th-Web-Team-2-FE into …

ce27ef6

…feature/email-page

Jeong-jeong commented Jun 1, 2022

View reviewed changes

Comment: 주석 삭제

1866e3a

Jeong-jeong marked this pull request as ready for review June 1, 2022 06:41

Jeong-jeong requested review from choisohyun and leejiho9898 June 1, 2022 06:41

choisohyun approved these changes Jun 1, 2022

View reviewed changes

leejiho9898 approved these changes Jun 1, 2022

View reviewed changes

leejiho9898 reviewed Jun 1, 2022

View reviewed changes

choisohyun reviewed Jun 1, 2022

View reviewed changes

Jeong-jeong added 3 commits June 1, 2022 21:15

Feat: forwardRef 삭제, isFocus deps 추가

edadbd6

Feat: 인증번호 보내기 완료 시 focus 변경 로직 추가

038ac5a

Feat: 코드 리뷰 반영

e695ce1

Jeong-jeong merged commit 8bb1500 into dev Jun 1, 2022

Jeong-jeong deleted the feature/email-page branch June 1, 2022 12:17

mslee300 added this to Done in Lonessum Jun 10, 2022

choisohyun mentioned this pull request Jun 12, 2022

Feat: 소개팅 설문 페이지 #28 #79

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature/email page #28

Feature/email page #28

Jeong-jeong commented May 30, 2022 •

edited

Jeong-jeong Jun 1, 2022

Jeong-jeong Jun 1, 2022

Jeong-jeong Jun 1, 2022

leejiho9898 Jun 1, 2022

leejiho9898 Jun 1, 2022 •

edited

Jeong-jeong Jun 1, 2022

Jeong-jeong Jun 1, 2022

choisohyun left a comment

choisohyun Jun 1, 2022

choisohyun Jun 1, 2022

leejiho9898 left a comment

leejiho9898 Jun 1, 2022

leejiho9898 Jun 1, 2022

leejiho9898 Jun 1, 2022 •

edited

leejiho9898 Jun 1, 2022

choisohyun Jun 1, 2022

Feature/email page #28

Feature/email page #28

Conversation

Jeong-jeong commented May 30, 2022 • edited

🧑‍💻 PR 내용

🧐 논의

📸 스크린샷

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

leejiho9898 Jun 1, 2022 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

choisohyun left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

leejiho9898 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

leejiho9898 Jun 1, 2022 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Jeong-jeong commented May 30, 2022 •

edited

leejiho9898 Jun 1, 2022 •

edited

leejiho9898 Jun 1, 2022 •

edited