Feat: #142 이메일 인증 기능 구현 #143
Conversation
Walkthrough이번 변경 사항은 이메일 인증 프로세스와 관련된 여러 컴포넌트 및 훅의 구조를 수정하고, 변수 이름을 변경하는 작업을 포함합니다. Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
Outside diff range and nitpick comments (2)
src/pages/user/SearchPasswordPage.tsx (1)
28-35: TODO 주석을 처리하는 데 도움이 필요하신가요?
useAxios훅 적용 후handleVerificationError함수를 수정하거나 삭제해야 한다는 TODO 주석이 있습니다. 이 작업을 제가 도와드릴까요? 필요한 경우 GitHub 이슈를 생성해 드릴까요?src/pages/user/SearchIdPage.tsx (1)
28-35: 'handleVerificationError' 함수 추가 및 TODO 처리 필요
handleVerificationError함수를 추가하여 인증 오류를 처리하고 있습니다. 주석에 따르면useAxios훅 적용 후 해당 함수를 수정하거나 삭제해야 합니다.해당 TODO 항목의 구현을 도와드릴까요? 새로운 GitHub 이슈를 생성해 드릴까요?
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (12)
- src/components/user/auth-form/FooterLinks.tsx (2 hunks)
- src/components/user/auth-form/SearchDataForm.tsx (2 hunks)
- src/components/user/auth-form/SearchResultSection.tsx (2 hunks)
- src/hooks/useEmailVerification.ts (1 hunks)
- src/mocks/mockData.ts (1 hunks)
- src/mocks/services/authServiceHandler.ts (3 hunks)
- src/pages/setting/UserAuthenticatePage.tsx (2 hunks)
- src/pages/user/SearchIdPage.tsx (3 hunks)
- src/pages/user/SearchPasswordPage.tsx (3 hunks)
- src/pages/user/SignUpPage.tsx (2 hunks)
- src/services/authService.ts (2 hunks)
- src/types/UserType.tsx (1 hunks)
Additional comments not posted (32)
src/components/user/auth-form/SearchResultSection.tsx (2)
9-9: 좋아 보입니다!변수명을
nav에서navigate로 변경한 것은 코드의 가독성을 향상시킵니다.useNavigatehook을 사용하여 navigation 함수를 가져오는 것도 올바른 방법입니다.
19-19: 잘 수정되었습니다!버튼의
onClick핸들러에서nav대신navigate변수를 사용하도록 업데이트된 것이 보입니다. 버튼을 클릭하면 '/signin' 경로로 올바르게 이동할 것으로 보입니다.src/types/UserType.tsx (1)
43-44: 잘 작성된 새로운 타입입니다!새로 추가된
RequestEmailCode타입은User타입에서src/hooks/useEmailVerification.ts (4)
2-3: LGTM!
AxiosError와sendEmailCode를 가져오는 것은 에러 처리와 이메일 인증 코드 전송에 필요합니다. 변경 사항이 적절해 보입니다.
11-25: 잘 구현되었습니다!
requestVerificationCode함수가 이메일 매개변수를 받도록 업데이트되었고, 비동기적으로 동작하도록 변경되었습니다. 이미 인증 요청이 이루어졌는지 확인하고, 그렇지 않은 경우sendEmailCode를 사용하여 이메일 코드를 전송하려고 시도합니다. 성공 시isVerificationRequested상태를true로 설정하고 성공 토스트 메시지를 표시합니다. 에러 발생 시AxiosError를 구체적으로 처리하여 응답에서 에러 메시지를 표시하거나, 예상치 못한 에러에 대해 일반적인 에러 메시지를 표시합니다. 함수 로직이 올바르게 구현되었고, 에러 처리도 적절히 이루어지고 있습니다.
Line range hint
28-32: 변경 사항 없음
expireVerificationCode함수는 변경되지 않았습니다. 인증 코드 만료 시isVerificationRequested상태를false로 설정하고 적절한 에러 토스트 메시지를 표시합니다. 함수 로직이 올바르게 유지되고 있습니다.
Line range hint
34-38: 내보내는 객체 업데이트내보내는 반환 객체가
verifyCode함수를 제외하도록 업데이트되었습니다. 이제isVerificationRequested,requestVerificationCode,expireVerificationCode를 포함합니다. 이는 훅의 변경 사항과 일치하며, 더 이상 사용되지 않는verifyCode함수를 제거했습니다. 필요한 함수와 상태는 여전히 내보내져 사용할 수 있습니다.src/components/user/auth-form/FooterLinks.tsx (3)
35-35: 좋습니다!
nav에서navigate로 변수 이름을 변경한 것은 코드의 가독성과 명확성을 향상시킵니다. 또한useNavigate훅을 사용하여 React Router에서 탐색 기능을 얻는 것이 올바른 방법입니다.
42-42: 잘 수정되었습니다!버튼 클릭 핸들러에서
nav대신navigate함수를 사용하도록 업데이트한 것은 변수 이름 변경과 일관성이 있습니다. 또한navigate함수에link.path를 인수로 전달하여 지정된 경로로의 탐색을 올바르게 처리합니다.
51-51: 잘 수정되었습니다!회원가입 버튼에서
nav대신navigate함수를 사용하도록 수정한 것은 변수 이름 변경과 일관성이 있습니다. 또한/signup경로를navigate함수에 전달하여 회원가입 페이지로의 탐색을 올바르게 처리합니다.src/pages/setting/UserAuthenticatePage.tsx (2)
9-9: 좋아 보입니다!
useEmailVerification훅에서 필요한 속성들을 잘 가져왔습니다. 속성 이름도 명확하고 이해하기 쉽네요.
54-54: 잘 수정되었습니다!
requestVerificationCode호출을handleSubmit으로 감싸고watch메서드를 사용하여 이메일을 가져오도록 변경한 것은 좋은 선택입니다. 이렇게 하면 버튼 클릭 시 폼 유효성 검사를 거치고 최신 이메일 값을 사용하여 인증 코드 요청을 보낼 수 있습니다. 이는 인증 코드 요청의 신뢰성을 향상시키는 데 도움이 됩니다.src/components/user/auth-form/SearchDataForm.tsx (7)
6-6: LGTM!
SearchPasswordForm타입을 올바르게 import 하였습니다.
10-12: LGTM!이메일 인증 기능과 관련된 새로운 prop 타입들이
SearchDataFormProps에 올바르게 추가되었습니다.
15-20: LGTM!
SearchDataForm컴포넌트의 prop destructuring이 새로운 이메일 인증 관련 prop들을 포함하도록 올바르게 업데이트되었습니다.
24-26: LGTM!
useFormContexthook에서watch를 올바르게 destructure하고, generic 타입을SearchPasswordForm으로 업데이트하였습니다.
34-34: LGTM!아이디 입력 필드의
ValidationInput컴포넌트에 전달되는errorsprop을 올바르게 업데이트하였습니다.
42-42: LGTM!이메일 입력 필드의
ValidationInput컴포넌트에 전달되는errorsprop을 올바르게 업데이트하였습니다.
Line range hint
50-60: LGTM!인증번호 입력 필드의
ValidationInput컴포넌트에 전달되는errorsprop을 올바르게 업데이트하였습니다.또한,
VerificationButton컴포넌트의requestCodeprop을watch에서 얻은 이메일 값으로requestVerificationCode를 호출하도록 업데이트하였습니다.src/services/authService.ts (1)
75-86: 잘 구현되었습니다!이메일 인증 코드를 전송하는
sendEmailCode함수가 잘 구현되었습니다. 함수의 목적과 매개변수가 JSDoc 주석으로 명확하게 문서화되어 있고,authAxios인스턴스를 사용하여 인증이 필요한 POST 요청을 보내고 있습니다. 함수는 Axios 응답을 resolve하는 프로미스를 반환합니다.이 함수는 이메일 인증 기능의 핵심 부분으로, 기존 코드와 잘 통합되어 있으며 확립된 패턴과 규칙을 따르고 있습니다. 전반적으로 코드 변경 사항이 잘 구현되었습니다.
src/mocks/services/authServiceHandler.ts (4)
4-4: 좋습니다!
emailVerificationCode를@mocks/mockData에서 가져오는 것은 모듈의 공개 인터페이스에 포함시키는 적절한 방법입니다.
115-124: 잘 구현되었습니다!이메일 인증을 위한 새로운 API 엔드포인트가 적절하게 구현되었습니다. 주요 사항은 다음과 같습니다:
- 제공된 이메일이 미리 정의된 더미 이메일과 일치하는지 올바르게 검증합니다.
- 이메일이 일치하지 않는 경우, 사용자에게 이메일 확인을 요청하는 명확한 오류 메시지와 함께 400 상태를 반환합니다.
- 이메일이 유효한 경우, 콘텐츠 없이 200 상태를 반환하는 것이 적절합니다.
전반적으로 이메일 인증 엔드포인트의 구현이 잘 이루어졌습니다.
130-130: 좋은 개선이에요!이메일 인증 코드 검증 로직을 하드코딩된 값('1234') 대신
emailVerificationCode변수를 사용하도록 변경한 것은 좋은 개선입니다. 이는 다음과 같은 이점이 있습니다:
- 필요한 경우 인증 코드를 쉽게 변경할 수 있어 유지 관리와 유연성이 향상됩니다.
- 모의 데이터에서
emailVerificationCode를 가져오는 것과 일관성이 있습니다.이 변경은 코드의 가독성과 유지 관리성을 높이는 좋은 실천입니다.
150-150: 일관성 있는 개선이 이루어졌네요!비밀번호 찾기 API 엔드포인트에서도 이메일 인증 코드 검증 로직이
emailVerificationCode변수를 사용하도록 업데이트되었습니다. 이는 이전 변경사항과 일관성이 있으며, 다음과 같은 장점이 있습니다:
- 하드코딩된 값 대신 변수를 사용하여 유지 관리와 유연성이 향상됩니다.
- 모의 데이터에서
emailVerificationCode를 가져오는 것과 일관성이 있습니다.- 서로 다른 API 엔드포인트에서 이메일 코드 검증의 일관성을 보장합니다.
이러한 변경은 코드베이스 전반에 걸쳐 모범 사례를 적용하고 있음을 보여줍니다.
src/pages/user/SignUpPage.tsx (2)
16-16: LGTM!
useEmailVerification훅에서 이메일 인증 관련 상태와 함수를 잘 가져왔네요. 이 프로퍼티들은 이메일 인증 프로세스를 관리하는 데 사용될 것 같아요.
150-150: 폼 상태에서 이메일을 가져오도록 변경한 것이 좋아요!이전에는
handleSubmit메서드를 직접 전달했는데, 이제는 인라인 함수를 사용하여 폼 상태에서 이메일을 가져오도록 변경했네요. 이렇게 하면 항상 최신 이메일 값을 사용하여 인증 요청을 보낼 수 있어요. 인증 프로세스의 신뢰성이 향상될 거예요.src/pages/user/SearchPasswordPage.tsx (3)
10-10: 이메일 인증 훅을 올바르게 가져왔습니다코드에서
useEmailVerification훅을 정확하게 임포트했습니다.
16-16: 이메일 인증 훅의 상태와 함수를 올바르게 사용했습니다
useEmailVerification훅에서 필요한 상태와 함수를 정확하게 디스트럭처링하여 가져왔습니다.
26-26: 폼 메서드를 올바르게 디스트럭처링했습니다폼 전송 및 에러 처리를 위해
handleSubmit,setError,setValue를 정확하게 가져왔습니다.src/pages/user/SearchIdPage.tsx (3)
11-11: 'useEmailVerification' 훅 import 추가 확인훅을 올바르게 import하였습니다.
25-26: 'useEmailVerification' 훅에서 필요한 값 추출
isVerificationRequested,requestVerificationCode,expireVerificationCode를 훅에서 성공적으로 추출하였습니다.
64-71: 'SearchDataForm' 컴포넌트에 새로운 props 전달 확인 필요
SearchDataForm컴포넌트에 새로운 props인isVerificationRequested,requestVerificationCode,expireVerificationCode를 전달하고 있습니다. 해당 컴포넌트에서 이 props들을 올바르게 수신하고 사용하는지 확인해 주세요.다음 스크립트를 실행하여
SearchDataForm컴포넌트가 이 props들을 수신하는지 확인할 수 있습니다:Verification successful
새로운 props가 SearchDataForm 컴포넌트에서 올바르게 수신 및 사용됨을 확인
SearchDataForm컴포넌트가isVerificationRequested,requestVerificationCode,expireVerificationCodeprops를 올바르게 수신하고 사용하고 있음을 확인했습니다. 구체적으로:
isVerificationRequested는 조건부 렌더링에 사용됩니다.requestVerificationCode는VerificationButton컴포넌트에 전달되어 사용됩니다.expireVerificationCode도VerificationButton컴포넌트에 전달됩니다.따라서
SearchIdPage.tsx에서 전달된 props들이SearchDataForm컴포넌트에서 예상대로 처리되고 있습니다.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: SearchDataForm 컴포넌트에서 새로운 props를 수신하는지 확인 # 기대 결과: 컴포넌트가 해당 props를 구조 분해 할당하고 있어야 합니다. ast-grep --lang tsx --pattern $'function SearchDataForm({ formType, isVerificationRequested, requestVerificationCode, expireVerificationCode, $$$ }) { $$$ }'Length of output: 4515
|
@Seok93 리뷰 감사합니다😊 |
|
coderabbitai가 리뷰 해준 내용 중, 네트워크 구현 쪽을 제외하고는 수정을 완료했습니다. 인증 에러 발생 시 오류는 토스트를 제거하고, 입력 필드에만 표시하도록 변경했습니다. 확인 후 리뷰 부탁드립니다! |
|
@Seok93 @ice-bear98 리뷰 감사합니다!! 마감일까지 더 열심히 해보겠습니다...😂👍 |
PR Type
What kind of change does this PR introduce?
Related Issues
#142 이메일 인증 기능 구현
What does this PR do?
View
Other information
handleVerificationError함수를 실행하도록 처리했습니다. 이 처리 때문에 현재 네트워크 코드가 지저분해 보이는데,useAxios적용되면 수정 및 리팩토링하도록 하겠습니다.회원가입,비밀번호 변경 전 인증페이지의 이메일 인증은 해당 API를 작성하면서 적용하도록 하겠습니다!