[Fix] #82 온보딩 UI 수정 - #83
Hidden character warning
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Review limit reached
More reviews will be available in 52 minutes and 22 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
Walkthrough드롭다운 및 선택 필드 컴포넌트에 비활성 상태 지원을 추가하고, 온보딩 및 프로필 편집 플로우에서 선택 필드 종속성을 강제합니다. 부서 필드 플레이스홀더를 단순화하고, 온보딩 레이아웃 너비를 조정하며, 뒤로 가기 네비게이션에 인증 정리를 추가합니다. Changes필드 비활성 상태 및 검증
온보딩 레이아웃 및 네비게이션
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Suggested reviewers
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 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 |
✅ CI 검증 결과✅ TypeScript: 통과 🎉 모든 검증을 통과했습니다. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (2)
src/features/onboarding/components/steps/OnBoardingSchoolInfoStep.tsx (1)
59-59: ⚡ Quick win에러 상태일 때도 필드를 비활성화하는 것을 고려하세요.
학과 목록 로딩이 실패하면(
isDepartmentsError === true)departments배열이 비어있어 드롭다운에 옵션이 표시되지 않습니다. 현재는 캠퍼스가 선택되고 로딩이 끝나면 에러 상태에서도 필드가 활성화되어 사용자가 빈 드롭다운을 열 수 있습니다.더 나은 UX를 위해 에러 상태에서도 필드를 비활성화하는 것을 고려해보세요.
♻️ 제안하는 수정
- disabled={!values.campus || isDepartmentsLoading} + disabled={!values.campus || isDepartmentsLoading || isDepartmentsError}🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/features/onboarding/components/steps/OnBoardingSchoolInfoStep.tsx` at line 59, The dropdown is still enabled when departments failed to load; update the disabled condition in OnBoardingSchoolInfoStep so it also disables the field when isDepartmentsError is true (or when departments is empty) in addition to !values.campus and isDepartmentsLoading: modify the prop expression that currently uses !values.campus || isDepartmentsLoading to include || isDepartmentsError (or || departments.length === 0) so the select remains disabled on load error.src/features/mypage/components/profile-edit/ProfileEditFields.tsx (1)
189-189: ⚡ Quick win에러 상태일 때도 필드를 비활성화하는 것을 고려하세요.
온보딩 화면과 동일한 패턴이지만, 학과 목록 로딩이 실패했을 때(
isDepartmentsError === true) 필드가 활성화되어 빈 드롭다운을 열 수 있습니다.에러 상태에서도 필드를 비활성화하여 일관된 UX를 제공하는 것을 권장합니다.
♻️ 제안하는 수정
- disabled={!selectedCampus || isDepartmentsLoading} + disabled={!selectedCampus || isDepartmentsLoading || isDepartmentsError}🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/features/mypage/components/profile-edit/ProfileEditFields.tsx` at line 189, The dropdown's disabled prop currently checks only selectedCampus and isDepartmentsLoading, so when department loading fails the field remains enabled; update the disabled expression used in the ProfileEditFields component (the JSX element using disabled={!selectedCampus || isDepartmentsLoading}) to also include isDepartmentsError (e.g., disabled={!selectedCampus || isDepartmentsLoading || isDepartmentsError}) so the field is disabled on load error and matches onboarding UX.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@src/features/mypage/components/profile-edit/ProfileEditFields.tsx`:
- Line 189: The dropdown's disabled prop currently checks only selectedCampus
and isDepartmentsLoading, so when department loading fails the field remains
enabled; update the disabled expression used in the ProfileEditFields component
(the JSX element using disabled={!selectedCampus || isDepartmentsLoading}) to
also include isDepartmentsError (e.g., disabled={!selectedCampus ||
isDepartmentsLoading || isDepartmentsError}) so the field is disabled on load
error and matches onboarding UX.
In `@src/features/onboarding/components/steps/OnBoardingSchoolInfoStep.tsx`:
- Line 59: The dropdown is still enabled when departments failed to load; update
the disabled condition in OnBoardingSchoolInfoStep so it also disables the field
when isDepartmentsError is true (or when departments is empty) in addition to
!values.campus and isDepartmentsLoading: modify the prop expression that
currently uses !values.campus || isDepartmentsLoading to include ||
isDepartmentsError (or || departments.length === 0) so the select remains
disabled on load error.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: b6ea8016-1834-47c7-a821-195718eb7d37
📒 Files selected for processing (7)
src/components/ui/dropdown.tsxsrc/components/ui/select-field.tsxsrc/features/mypage/components/profile-edit/ProfileEditFields.tsxsrc/features/onboarding/components/OnBoardingLayout.tsxsrc/features/onboarding/components/fields/OnBoardingSelectField.tsxsrc/features/onboarding/components/steps/OnBoardingSchoolInfoStep.tsxsrc/pages/OnBoardingPage.tsx
✅ CI 검증 결과✅ TypeScript: 통과 🎉 모든 검증을 통과했습니다. |
1 participant
🗒️ PR 타입
🔗 관련 이슈
📌 작업사항
px-400)과 통일 (max-w-93.75제거)SelectField드롭다운 아이템 텍스트 수직 클리핑 수정 (truncate를 button → inner span으로 이동)SelectField/DropdownTriggerdisabledprop 지원 추가📸 스크린샷
📣 기타사항 및 코멘트
캠퍼스 미선택 상태에서 학과 선택 시 아래처럼 표시되는 문제가 잇어서 캠퍼스 선택 전까지는 disabled로 표시되게 처리했습니당!
✅ 체크리스트
Summary by CodeRabbit
릴리스 노트
Bug Fixes
Style