[FEAT] 온보딩 ui 수정 #29
[FEAT] 온보딩 ui 수정 #29
Conversation
✅ Deploy Preview for umc-nect ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Pull request overview
This PR implements UI improvements and validation enhancements for the onboarding flow. The changes focus on nickname validation constraints, custom field editing behavior, collaboration style assessment expansion, and layout refinements across multiple steps.
Changes:
- Enhanced nickname validation with 4-character maximum limit
- Improved custom field editing experience in Step2 with toggle functionality
- Added third collaboration style question (teamwork preference) in Step6
- Refined layout spacing and button positioning for better visual consistency
Reviewed changes
Copilot reviewed 11 out of 11 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/utils/validate.ts | Added max length validation for nickname and new teamworkStyle field |
| src/index.css | Added status color variables for error and success states |
| src/hooks/useForm.ts | Added default values (3) for all slider fields in Step6 |
| src/components/common/ChipButton.tsx | Added semibold font weight for selected state |
| src/components/auth/onboarding/steps/Step1.tsx | Removed birth field success message and cleaned up unused code |
| src/components/auth/onboarding/steps/Step2.tsx | Implemented editable custom field with click-to-toggle functionality |
| src/components/auth/onboarding/steps/Step3.tsx | Adjusted title gap spacing from 3.25 to 3 |
| src/components/auth/onboarding/steps/Step4.tsx | Removed unnecessary React fragments around ChipButton |
| src/components/auth/onboarding/steps/Step5.tsx | Adjusted title gap spacing from 3.25 to 3 |
| src/components/auth/onboarding/steps/Step6.tsx | Added teamwork style slider and updated slider labels |
| src/components/auth/onboarding/OnboardingMain.tsx | Fixed button positioning with absolute positioning |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
|
||
| // 온보딩 1 | ||
| const nickname = z.string().min(1, '닉네임은 1글자 이상으로 작성해주세요.') | ||
| const nickname = z.string().min(1, '닉네임은 1글자 이상으로 작성해주세요.').max(4, '5글자 이내의 닉네임') |
There was a problem hiding this comment.
The error message '5글자 이내의 닉네임' is incomplete and unclear. It should be a complete sentence explaining the constraint. Consider changing it to '닉네임은 4글자 이하로 작성해주세요.' to match the style of the min validation message and clearly indicate the maximum allowed length.
| const nickname = z.string().min(1, '닉네임은 1글자 이상으로 작성해주세요.').max(4, '5글자 이내의 닉네임') | |
| const nickname = z.string().min(1, '닉네임은 1글자 이상으로 작성해주세요.').max(4, '닉네임은 4글자 이하로 작성해주세요.') |
| onBlur={handleCustomFieldBlur} | ||
| className={`px-5 py-2.5 w-full max-w-73 text-center border-2 rounded-xl body-1 duration-300 ease-in-out focus:outline-none ${ | ||
| onClick={handleCustomFieldClick} | ||
| className={`px-5 py-2.5 w-full max-w-73 text-center border-2 rounded-xl body-1 duration-300 ease-in-out focus:outline-none cursor-pointer ${ |
There was a problem hiding this comment.
The input element is using cursor-pointer class, which suggests it's clickable, but input fields typically use text cursor by default. The onClick handler is meant to toggle selection state when already selected, but clicking on an input field should normally allow text editing with a text cursor. This creates a confusing user experience where the cursor changes to a pointer but the field still accepts text input.
| className={`px-5 py-2.5 w-full max-w-73 text-center border-2 rounded-xl body-1 duration-300 ease-in-out focus:outline-none cursor-pointer ${ | |
| className={`px-5 py-2.5 w-full max-w-73 text-center border-2 rounded-xl body-1 duration-300 ease-in-out focus:outline-none ${ |
[FEAT] 온보딩 ui 수정
🎯 Issue
#28
📝 변경 내용
🐹 추가 변경 사항
color-status-error,color-status-success)✅ 변경 사항
📷 스크린샷
issue.28.mov
📋 체크리스트