Feat: #137 아이디/비밀번호 찾기 기능 구현 #139
Conversation
Walkthrough이번 변경 사항은 사용자 인증 및 계정 복구 기능을 개선하기 위해 여러 컴포넌트와 서비스 파일에서 수정이 이루어졌습니다. 주요 변경 사항으로는 이메일 인증 로직의 추가, 사용자 ID 및 비밀번호 검색 기능의 구현, 그리고 레이아웃 구성 요소의 스타일링 단순화가 포함됩니다. 이로 인해 사용자 경험이 향상되고, 코드의 가독성과 유지 관리성이 높아졌습니다. Changes
Possibly related PRs
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: 0
Outside diff range and nitpick comments (1)
src/utils/converter.ts (1)
22-27: 코드 최적화를 위한 리팩토링 제안현재 구현은 요구 사항을 충족하지만, 약간의 리팩토링으로 코드를 최적화할 수 있습니다. slice 로직의 반복을 피하기 위해 다음과 같이 수정하는 것이 좋겠습니다:
-export const generateSecureUserId = (id: string) => { - if (id.length >= 4) { - return `${id.slice(0, -2)}**`; - } - return `${id.slice(0, -1)}*`; -}; +export const generateSecureUserId = (id: string) => { + const secureLength = id.length >= 4 ? 2 : 1; + return `${id.slice(0, -secureLength)}${'*'.repeat(secureLength)}`; +};이렇게 하면 조건문 내에서 slice 로직을 반복하지 않고도 동일한 결과를 얻을 수 있습니다.
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (12)
- src/components/user/auth-form/FooterLinks.tsx (1 hunks)
- src/hooks/useEmailVerification.ts (2 hunks)
- src/layouts/AuthFormLayout.tsx (1 hunks)
- src/layouts/page/AuthLayout.tsx (1 hunks)
- src/mocks/services/authServiceHandler.ts (3 hunks)
- src/pages/user/SearchIdPage.tsx (2 hunks)
- src/pages/user/SearchPasswordPage.tsx (2 hunks)
- src/pages/user/SignInPage.tsx (2 hunks)
- src/services/authService.ts (2 hunks)
- src/services/axiosProvider.ts (1 hunks)
- src/types/UserType.tsx (1 hunks)
- src/utils/converter.ts (1 hunks)
Files skipped from review due to trivial changes (4)
- src/components/user/auth-form/FooterLinks.tsx
- src/layouts/AuthFormLayout.tsx
- src/pages/user/SignInPage.tsx
- src/services/axiosProvider.ts
Additional comments not posted (27)
src/layouts/page/AuthLayout.tsx (1)
8-8: 좋아 보입니다!
<main>요소의 패딩 속성을p-30에서px-30 py-60으로 변경하는 것은 좋은 선택입니다. 이 변경으로 인해 메인 콘텐츠 영역 내의 수직 간격이 향상되어 레이아웃의 시각적 매력과 사용성이 개선될 수 있습니다. 콘텐츠 위아래에 더 많은 공간을 제공함으로써 사용자 경험이 향상될 것입니다.src/utils/converter.ts (1)
22-27: 변경 사항이 PR 목표에 부합합니다.이 기능은 사용자 ID의 일부를 가려 개인 정보를 보호하면서 ID 복구 프로세스를 개선하는 PR 목표에 잘 부합합니다. 사용자 경험 향상과 민감한 정보 보호라는 두 가지 목적을 모두 달성하고 있습니다.
src/types/UserType.tsx (2)
38-38: 좋아 보입니다!
SearchIdResult타입은User타입에서username속성만 추출하여 사용자 ID 검색 결과를 나타내는 데 적합해 보입니다. 타입 정의가 명확하고 의도에 부합합니다.
40-42: 잘 정의되었습니다!
SearchPasswordResult타입은password속성만 가지고 있어 비밀번호 검색 결과를 나타내는 데 적합해 보입니다. 타입 정의가 간결하고 명확합니다.src/hooks/useEmailVerification.ts (2)
4-4: 변경 사항이 적절해 보입니다.
EmailVerificationForm타입 import가 제거되었네요. PR 목표에서 언급된 이메일 인증 프로세스 변경과 일치하는 것 같습니다. 더 이상 해당 타입이 필요하지 않은 것으로 보입니다.
19-20: 변경 사항이 적절해 보입니다. 향후 이메일 인증 API 구현 시 코드 업데이트 필요
verifyCode함수 시그니처에서setError매개변수의EmailVerificationForm타입이 제거된 것은 이전 변경 사항과 일치합니다.추가된 주석은 향후 이메일 인증 API가 구현될 것임을 시사합니다. 현재 코드는 placeholder로 보이며, 실제 API 구현 후에는 해당 부분을 업데이트해야 할 것 같습니다. 인증 코드 검증 로직이 제대로 동작하는지 확인 부탁드립니다.
src/services/authService.ts (2)
73-85: 잘 구현되었습니다!
searchUserId함수는 사용자 ID를 검색하기 위해user/recover/username엔드포인트에 POST 요청을 보내는 역할을 잘 수행하고 있습니다. 함수 시그니처와 JSDoc 주석이 명확하게 작성되어 있어 가독성이 좋습니다.EmailVerificationForm과SearchIdResult타입을 사용하여 타입 안전성을 확보하였고, 인증이 필요없는 요청에 적합한defaultAxios인스턴스를 사용하고 있습니다.
87-98: 잘 구현되었습니다!
searchUserPassword함수는 사용자 비밀번호를 검색하기 위해user/recover/password엔드포인트에 POST 요청을 보내는 역할을 잘 수행하고 있습니다. 함수 시그니처와 JSDoc 주석이 명확하게 작성되어 있어 가독성이 좋습니다.SearchPasswordForm과SearchPasswordResult타입을 사용하여 타입 안전성을 확보하였고, 인증이 필요없는 요청에 적합한defaultAxios인스턴스를 사용하고 있습니다.src/pages/user/SearchIdPage.tsx (7)
1-3: 잘 되었습니다!필요한 모듈들을 잘 import 하셨네요. 상태 관리, 에러 처리, 그리고 네비게이션을 위해 useState, AxiosError, useNavigate를 사용하는 것이 적절해 보입니다.
8-14: 잘 되었습니다!커스텀 컴포넌트, 훅, 서비스, 유틸리티 함수들을 잘 import 하셨네요. 네이밍 컨벤션도 일관성 있게 잘 지켜졌고, 각 엔티티들의 역할도 명확해 보입니다.
18-23: 잘 되었습니다!이메일 인증과 토스트 알림을 위해 커스텀 훅을 사용한 것이 코드 가독성을 높이는데 도움이 되었네요.
검색 결과와 로딩 상태를 위한 상태 변수들도 적절한 초기값으로 잘 선언되었습니다.
useNavigate를 사용하여 네비게이션 기능을 구현한 것도 좋습니다.
25-28: 잘 되었습니다!
useForm훅을 사용하여 폼 상태 관리와 유효성 검사를 효과적으로 처리하셨네요.
watch,register,handleSubmit,setError,formState등의 변수들을 적절하게 활용하고 있습니다.
38-59: 잘 되었습니다!
onSubmit함수에서 폼 제출 로직을 잘 구현하셨네요.
verifyCode함수를 사용하여 코드 검증을 먼저 수행한 후 API 호출을 진행하는 것이 좋습니다.
searchUserId서비스를 호출하여 사용자 ID를 가져오는 것도 적절해 보입니다.
AxiosError를 사용한 에러 처리와toastError를 통한 사용자 피드백 제공도 잘 되었습니다.
로딩 상태 관리도 적절하게 이루어지고 있네요.
63-78: 잘 되었습니다!로딩 상태일 때 스피너를 렌더링하고, 검색 결과가 있을 때 조건부로 결과 섹션을 렌더링하는 것이 좋네요.
generateSecureUserId유틸리티 함수를 사용하여 보안성이 높은 사용자 ID를 표시한 것도 좋은 방법입니다.
"로그인으로 돌아가기" 버튼을 통해 사용자가 쉽게 이동할 수 있도록 한 것도 사용자 경험 측면에서 좋아 보입니다.
80-109: 잘 되었습니다!로딩 중이 아니고 검색 결과가 없을 때 폼 섹션을 조건부로 렌더링하는 것이 좋네요.
ValidationInput컴포넌트를 사용하여 입력 필드를 처리하고 있는데, 이 컴포넌트가 입력 유효성 검사와 에러 표시를 담당하는 것 같습니다.
isVerificationRequested상태에 따라 인증 코드 입력 필드를 조건부로 렌더링하는 것도 사용자에게 명확한 흐름을 제공하는 좋은 방법입니다.
VerificationButton컴포넌트는 인증 코드 요청과 확인 로직을 처리하고 있네요.
FooterLinks컴포넌트는 폼 하단에 렌더링되어 추가적인 내비게이션 옵션을 제공하는 것 같습니다.src/pages/user/SearchPasswordPage.tsx (7)
1-13: Import 변경 사항이 적절해 보입니다.새로 추가된 import 문은 컴포넌트의 기능을 위해 필요해 보이며, 사용되지 않거나 불필요한 import는 없는 것 같습니다. 잘 정리되었습니다!
17-20: 상태 관리 변경 사항이 잘 구성되었습니다.이메일 인증, 임시 비밀번호, 로딩 상태를 위한 새로운 상태 변수와 훅을 잘 도입하셨습니다. 특히
useEmailVerification훅을 사용하여 이메일 인증 로직을 캡슐화한 것은 코드 구성과 재사용성 측면에서 좋은 방법입니다.tempPassword와loading상태 변수를 활용하여 조건부 렌더링과 로딩 표시를 개선한 점도 사용자 경험 향상에 도움이 될 것 같습니다. 훌륭합니다!
38-58:onSubmit함수 변경 사항이 잘 처리되었습니다.
onSubmit함수를 비동기 처리와 에러 관리를 포함하도록 업데이트하신 것이 인상적입니다. 사용자가 입력한 코드를 먼저 검증하고, 검증이 성공한 경우에만searchUserPassword서비스를 사용하여 비밀번호를 가져오는 것은 적절한 흐름입니다.
try-catch블록을 사용하여 잠재적인 오류를 처리하고, Axios 오류와 예기치 않은 오류를 구분하여 사용자에게 적절한 피드백을 제공하는 것도 좋습니다.또한,
setLoading함수를 사용하여 로딩 상태를 관리함으로써 사용자 경험을 향상시킨 점도 훌륭합니다. 잘 구현하셨습니다!
62-77: 조건부 렌더링 로직 변경 사항이 사용자 경험을 향상시킵니다.
loading과tempPassword상태에 따라 임시 비밀번호를 표시하거나 로그인 페이지로 돌아가는 버튼을 표시하도록 렌더링 로직을 업데이트한 것은 사용자에게 명확한 피드백을 제공하여 사용자 경험을 개선하는 좋은 방법입니다.비밀번호 검색이 성공한 후 임시 비밀번호를 표시하고 로그인 페이지로 돌아가는 버튼을 제공하는 것도 사용자 친화적인 접근 방식입니다.
또한, 로딩 스피너를 표시하여 진행 중인 프로세스에 대해 사용자에게 알리는 것은 인지된 성능을 향상시키는 데 도움이 됩니다. 잘 처리하셨습니다!
79-103: 입력 필드 렌더링 로직이 잘 구성되었습니다.비밀번호 검색이 진행 중이 아니고 임시 비밀번호를 사용할 수 없을 때만 사용자 이름, 이메일 및 인증 코드에 대한 입력 필드를 렌더링하는 것은 적절한 방법입니다.
ValidationInput컴포넌트를 사용하여 일관된 입력 유효성 검사와 오류 처리를 수행한 점도 좋습니다.또한,
isVerificationRequested상태에 따라 이메일 인증 입력 필드를 조건부로 렌더링하여 사용자 흐름을 개선한 것도 훌륭합니다. 잘 처리하셨습니다!
104-113: 인증 버튼 컴포넌트 사용이 코드 모듈성을 향상시킵니다.인증 요청과 만료 로직을 처리하기 위해 별도의
VerificationButton컴포넌트를 사용하는 것은 코드 모듈성과 재사용성을 높이는 좋은 방법입니다.
VerificationButton컴포넌트는 인증 상태를 관리하고 버튼 동작을 처리하는 데 필요한 관련 props를 받아 사용하고 있습니다.또한, 버튼 레이블을 비밀번호 검색 컨텍스트에 맞게 커스터마이징하여 사용자에게 명확성을 제공한 점도 좋습니다. 잘 구현하셨습니다!
114-114: 푸터 링크 컴포넌트 사용이 코드 구성을 개선합니다.비밀번호 검색 페이지에 관련 푸터 링크를 표시하기 위해 별도의
FooterLinks컴포넌트를 사용하는 것은 코드 구성과 유지 관리성을 향상시키는 좋은 방법입니다.
typeprop을 전달하여 페이지 컨텍스트에 따라 푸터 링크를 커스터마이징함으로써 관련 링크가 표시되도록 한 점도 좋습니다. 잘 처리하셨습니다!src/mocks/services/authServiceHandler.ts (5)
5-5: 좋아 보입니다!
@/types/UserType에서 가져온 타입들은 새로운 API 엔드포인트에서 사용될 것으로 보입니다. 타입 가져오기가 올바르게 이루어졌습니다.
64-64: 주석 업데이트가 좋네요.사용자 정보 조회 API에 대한 주석이 명확해졌습니다. 주석 변경 사항을 승인합니다.
115-131: 아이디 찾기 API 구현이 잘 되었습니다.이메일 인증을 통한 아이디 찾기 API 엔드포인트가 기대한 대로 동작합니다. 주요 사항:
- 이메일과 인증 코드가 일치하는지 확인합니다.
- 인증 성공 시 연결된 아이디를 반환하고, 실패 시 적절한 오류 메시지를 반환합니다.
- 이메일이 일치하면
USER_INFO_DUMMY에서 아이디를 반환하는 것이 목업에 적합합니다.구현을 승인합니다.
133-151: 비밀번호 찾기 API 구현이 잘 되었습니다.아이디, 이메일, 인증 코드를 통한 비밀번호 찾기 API 엔드포인트가 기대한 대로 동작합니다. 주요 사항:
- 아이디, 이메일, 인증 코드가 일치하는지 확인합니다.
- 인증 성공 시 임시 비밀번호를 반환하고, 실패 시 적절한 오류 메시지를 반환합니다.
- 아이디와 이메일이 일치하면 하드코딩된 임시 비밀번호를 반환하는 것이 목업에 적합합니다.
구현을 승인합니다.
Line range hint
1-154: 전반적인 변경 사항이 잘 이루어졌습니다.
authServiceHandler.ts파일에 사용자 계정 복구를 위한 두 가지 새로운 API 엔드포인트가 추가되었습니다:
- 이메일 인증을 통한 아이디 찾기 (
/user/recover/username)- 아이디, 이메일, 인증 코드를 통한 비밀번호 찾기 (
/user/recover/password)새로운 엔드포인트는 기대한 로직과 오류 처리를 따르고 있으며, 기존 코드베이스와 일관된 패턴을 따르고 있습니다. 이러한 변경 사항은 PR 목표 중 사용자 아이디와 비밀번호 찾기 기능 구현과 관련된 부분을 충족시킵니다.
전반적인 변경 사항을 승인합니다.
Tools
Biome
[error] 112-115: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
|
@ice-bear98 @Seok93 리뷰 감사합니다!😆 |
PR Type
What kind of change does this PR introduce?
Related Issues
#137 아이디/비밀번호 찾기 기능 구현
What does this PR do?
View
아이디 찾기
비밀번호 찾기
Auth 관련 화면
로그인
회원가입
아이디 찾기
아이디 찾기 (결과)
비밀번호 찾기
비밀번호 찾기 (결과)
Other information