Fix#374 프로필 수정 및 등록 버튼 클릭시 disabled 처리 및 spinner 추가 #375
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughIntroduces loading state handling for profile register and edit pages by consuming isPending from their respective hooks, disabling submit buttons, and showing a Spinner during pending states. Updates hooks’ return signatures to include isPending. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor U as User
participant R as RegisterProfile Page
participant H as useRegisterProfile Hook
participant API as Users API
U->>R: Click "등록하기"
R->>H: if (!isPending) mutate(formData)
alt First click (isPending=false)
H->>API: POST /profiles
H-->>R: isPending=true
R-->>U: Show Spinner, disable button
API-->>H: Response (success/error)
H-->>R: isPending=false
R-->>U: Re-enable button, update UI
else While pending (isPending=true)
R-->>U: Ignore submit (no API call)
end
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Assessment against linked issues
Assessment against linked issues: Out-of-scope changes
Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches
🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
|
📝 추가 및 변경된 파일총 2개 파일 변경 |
📚 Storybook이 Chromatic에 배포되었습니다!
|
![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
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
mosu-app/src/pages/mypage/profile/edit.tsx (1)
85-104: Guard against re-entrancy; block submits while pending (Enter key, IME confirm, etc.).Disabling the button alone doesn’t stop form-submit paths other than clicking. Add an early return when pending to guarantee no extra API calls fire during an in-flight mutation.
Apply:
- const onSubmit = handleSubmit( - (data) => { - mutate(data, { + const onSubmit = handleSubmit( + (data) => { + if (isPending) return; + mutate(data, { onSuccess: () => { toast.success("프로필이 수정되었습니다."); router.push("/mypage"); }, onError: (error) => { if (error instanceof HTTPException) { toast.error(error.message); return; } toast.error("프로필 수정에 실패했습니다. 다시 시도해주세요."); }, }); },mosu-app/src/pages/mypage/profile/register.tsx (1)
83-102: Add re-entrancy guard to fully satisfy “no requests while pending.”Prevent duplicate submissions via Enter key or rapid interactions by short-circuiting when pending.
Apply:
- const onSubmit = handleSubmit( - (data) => { - mutate(data, { + const onSubmit = handleSubmit( + (data) => { + if (isPending) return; + mutate(data, { onSuccess: () => { toast.success("프로필이 등록되었습니다."); router.push("/"); }, onError: (error) => { if (error instanceof HTTPException) { toast.error(error.message); return; } toast.error("프로필 등록에 실패했습니다. 다시 시도해주세요."); }, }); },
🧹 Nitpick comments (2)
mosu-app/src/pages/mypage/profile/edit.tsx (1)
207-209: Improve UX/a11y on submit button; ensure submit semantics and visible spinner.
- Add type="submit" and aria-busy for accessibility.
- Inherit color via currentColor so the spinner stays visible across themes.
Apply:
- <Button variant="default" className="my-10 h-[60px] w-full" disabled={isPending}> - {isPending ? <Spinner /> : "프로필 수정하기"} + <Button + type="submit" + variant="default" + className="my-10 h-[60px] w-full" + aria-busy={isPending} + disabled={isPending} + > + {isPending ? <Spinner color="currentColor" /> : "프로필 수정하기"} </Button>mosu-app/src/pages/mypage/profile/register.tsx (1)
210-212: Button semantics + spinner visibility.Add type="submit", aria-busy, and use currentColor for Spinner to ensure visibility across themes.
Apply:
- <Button variant="default" className="my-10 h-[60px] w-full" disabled={isPending}> - {isPending ? <Spinner /> : "등록하기"} + <Button + type="submit" + variant="default" + className="my-10 h-[60px] w-full" + aria-busy={isPending} + disabled={isPending} + > + {isPending ? <Spinner color="currentColor" /> : "등록하기"} </Button>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (2)
mosu-app/src/pages/mypage/profile/edit.tsx(3 hunks)mosu-app/src/pages/mypage/profile/register.tsx(3 hunks)
🧰 Additional context used
🧬 Code graph analysis (2)
mosu-app/src/pages/mypage/profile/register.tsx (2)
mosu-app/src/entities/users/services/registerProfile.ts (1)
useRegisterProfile(17-21)mosu-app/src/shared/components/Spinner/Spinner.tsx (1)
Spinner(9-38)
mosu-app/src/pages/mypage/profile/edit.tsx (2)
mosu-app/src/entities/users/services/editProfile.ts (1)
useEditProfile(19-23)mosu-app/src/shared/components/Spinner/Spinner.tsx (1)
Spinner(9-38)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Build & Publish Storybook
🔇 Additional comments (4)
mosu-app/src/pages/mypage/profile/edit.tsx (2)
25-25: Spinner import looks good.
83-83: React Query v5 confirmed —isPendingis correctI’ve verified in
mosu-app/package.jsonthat the project uses@tanstack/react-query@^5.76.0, and theuseEditProfilehook returns the v5-style mutation object (which exposesisPendingrather thanisLoading). No changes are necessary here—your button disabling will work as expected.mosu-app/src/pages/mypage/profile/register.tsx (2)
25-25: Spinner import looks good.
81-81: Confirm React Query version; isPending vs isLoading.Same as edit page: ensure we’re on @tanstack/react-query v5 or adapt to isLoading (v4) so the disabled state engages.
Reuse the script from the other comment; it checks the package version and scans for isPending/isLoading usage patterns.
✅ Linked Issue
🔍 What I did
Summary by CodeRabbit