[FE] 20260228 #253 기능추가로그인 비밀번호 초기화 및 변경 페이지 구현#257
Merged
Hidden character warning
The head ref may contain hidden characters: "20260228_#253-\uae30\ub2a5\ucd94\uac00\ub85c\uadf8\uc778-\ube44\ubc00\ubc88\ud638-\ucd08\uae30\ud654-\ubc0f-\ubcc0\uacbd-\ud398\uc774\uc9c0-\uad6c\ud604"
Conversation
Walkthrough이 PR은 비밀번호 재설정 플로우를 단계별로 분리하여 인증코드 발송 및 비밀번호 확인 단계로 구현합니다. 모달 컴포넌트의 상태 관리와 UI를 업데이트하고, 인증 유틸리티에 새로운 API 함수를 추가하며, 개발 환경의 axios BASE_URL 로직을 조정합니다. Changes
Sequence DiagramsequenceDiagram
actor User as 사용자
participant Modal as ResetPasswordModal
participant Auth as auth.js
participant API as Backend API
User->>Modal: 이메일과 학번 입력
User->>Modal: "인증코드 전송" 클릭
Modal->>Auth: sendPasswordResetCode(email, studentId)
Auth->>API: POST /api/auth/password/reset/send
API-->>Auth: 인증코드 발송 성공
Auth-->>Modal: 응답 반환
Modal->>Modal: isCodeSent = true, 입력 필드 전환
Modal-->>User: 코드 입력 필드 표시
User->>Modal: 인증코드와 새 비밀번호 입력
User->>Modal: "비밀번호 변경" 클릭
Modal->>Auth: confirmPasswordReset(email, studentId, code, newPassword)
Auth->>API: POST /api/auth/password/reset/confirm
API-->>Auth: 비밀번호 변경 성공
Auth-->>Modal: 응답 반환
Modal->>Modal: 모달 닫기, 성공 토스트 표시
Modal-->>User: 비밀번호 재설정 완료
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related issues
Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (3)
frontend/src/components/login/ResetPasswordModal.jsx (2)
26-67: 컴포넌트 언마운트 시 요청 취소 처리 누락.모달이 닫힐 때 진행 중인 API 요청이 취소되지 않아, 컴포넌트 언마운트 후 상태 업데이트 시도로 인한 경고가 발생할 수 있습니다.
useEffectcleanup에서abortRef.current?.abort()를 호출하는 것을 권장합니다.♻️ useEffect cleanup 추가 제안
import { useRef, useState } from 'react'; +import { useEffect } from 'react'; // ... 기존 import const ResetPasswordModal = ({ onClose }) => { // ... 기존 state const abortRef = useRef(null); + useEffect(() => { + return () => { + abortRef.current?.abort(); + }; + }, []); const handleSendCode = async (e) => {🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/components/login/ResetPasswordModal.jsx` around lines 26 - 67, Add a useEffect inside the ResetPasswordModal component that returns a cleanup function calling abortRef.current?.abort() to cancel any in-flight requests when the modal unmounts/close; this ensures abortRef used by handleSendCode and handleConfirmReset is aborted on unmount to prevent post-unmount state updates and related warnings. Ensure the hook has an empty dependency array (or dependencies that represent the modal lifecycle) so it runs once and cleans up on unmount.
123-132: 새 비밀번호 강도 검증 고려.현재 새 비밀번호에 대한 클라이언트 측 강도 검증(최소 길이, 특수문자 등)이 없습니다. 백엔드에서 검증한다면 괜찮지만, UX 개선을 위해 클라이언트에서도 기본적인 비밀번호 요구사항을 안내하는 것이 좋습니다.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/components/login/ResetPasswordModal.jsx` around lines 123 - 132, Add client-side password strength validation in ResetPasswordModal: validate the newPassword state (e.g., minimum length, presence of digits/uppercase/special char) whenever it's updated and display inline feedback next to the <input id="new-password">; update the component's validation state and error message shown in the modal, and prevent or disable the submit action (the form submit handler such as handleSubmit or the submit button) until newPassword meets the rules. Use the existing setNewPassword to update state and add a derived validation flag (e.g., isPasswordValid) and user-facing hints so users see requirements and why submission is blocked.frontend/src/utils/auth.js (1)
85-90:newPasswordtrim 처리 일관성 검토 필요.다른 필드들(
studentId,code)은 모두.trim()이 적용되지만,newPassword는 trim되지 않습니다.ResetPasswordModal.jsx에서는!newPassword.trim()으로 유효성을 검사하므로, 사용자가 앞뒤에 공백을 포함한 비밀번호를 입력하면 의도치 않은 비밀번호가 저장될 수 있습니다.의도적인 설계라면 무시해도 되지만, 일관성을 위해 trim 적용 또는 명시적인 주석 추가를 고려해 주세요.
♻️ newPassword에 trim 적용 제안
const payload = { email: email.trim(), studentId: studentId.trim(), code: code.trim(), - newPassword, + newPassword: newPassword.trim(), };🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/utils/auth.js` around lines 85 - 90, The payload object construction includes email, studentId, and code with .trim() but leaves newPassword untrimmed, which conflicts with the validation in ResetPasswordModal.jsx that checks !newPassword.trim(); update the payload creation (the payload variable in frontend/src/utils/auth.js) to include newPassword.trim() before sending, or if an untrimmed password is intentional, add a clear comment next to the newPassword property explaining why trimming is omitted so behavior is explicit and consistent with ResetPasswordModal.jsx validation.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@frontend/src/components/login/ResetPasswordModal.jsx`:
- Around line 26-67: Add a useEffect inside the ResetPasswordModal component
that returns a cleanup function calling abortRef.current?.abort() to cancel any
in-flight requests when the modal unmounts/close; this ensures abortRef used by
handleSendCode and handleConfirmReset is aborted on unmount to prevent
post-unmount state updates and related warnings. Ensure the hook has an empty
dependency array (or dependencies that represent the modal lifecycle) so it runs
once and cleans up on unmount.
- Around line 123-132: Add client-side password strength validation in
ResetPasswordModal: validate the newPassword state (e.g., minimum length,
presence of digits/uppercase/special char) whenever it's updated and display
inline feedback next to the <input id="new-password">; update the component's
validation state and error message shown in the modal, and prevent or disable
the submit action (the form submit handler such as handleSubmit or the submit
button) until newPassword meets the rules. Use the existing setNewPassword to
update state and add a derived validation flag (e.g., isPasswordValid) and
user-facing hints so users see requirements and why submission is blocked.
In `@frontend/src/utils/auth.js`:
- Around line 85-90: The payload object construction includes email, studentId,
and code with .trim() but leaves newPassword untrimmed, which conflicts with the
validation in ResetPasswordModal.jsx that checks !newPassword.trim(); update the
payload creation (the payload variable in frontend/src/utils/auth.js) to include
newPassword.trim() before sending, or if an untrimmed password is intentional,
add a clear comment next to the newPassword property explaining why trimming is
omitted so behavior is explicit and consistent with ResetPasswordModal.jsx
validation.
ℹ️ Review info
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
frontend/src/components/login/ResetPasswordModal.jsxfrontend/src/utils/auth.jsfrontend/src/utils/axios.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
비밀번호 초기화 시 학번 + 이메일 입력 후 인증번호 전송, 이후 인증코드, 새 비밀번호를 함께 입력하도록 페이지 구현
Summary by CodeRabbit
릴리스 노트