[FEAT] 사용자, 기사 프로필 생성 및 수정 추가 - #62
Merged
Merged
Conversation
…into feature/create-profile
…into feature/create-profile
|
Caution Review failedThe pull request is closed. ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (3)
📝 WalkthroughWalkthrough고객과 기사 프로필 생성·수정 페이지와 API 흐름을 추가했습니다. 인증 로딩 fallback, 프로필 검증, 이미지 업로드, 오류 메시지 처리, 반응형 헤더 사이드 내비게이션도 변경했습니다. Changes프로필 관리 흐름
Estimated code review effort: 4 (Complex) | ~60 minutes Possibly related PRs
Suggested labels: Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 15
🧹 Nitpick comments (8)
src/lib/profile/uploadProfileImage.ts (1)
15-54: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win네트워크 부수효과를
src/lib/profile에서 분리하세요.
uploadProfileImageIfNeeded는 presigned URL 요청과 S3 PUT를 수행합니다. 이 동작은src/lib의 순수 함수 규칙을 위반합니다.업로드 orchestration은
src/hooks/profile의 전용 Hook 또는 API 계층으로 이동하세요.isProfileImageContentType와buildProfileImagePublicUrl만 순수 유틸로 유지하세요.As per path instructions, "
src/lib/**/*.ts: 순수 함수로 작성하고 부수효과를 두지 않습니다."🤖 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/lib/profile/uploadProfileImage.ts` around lines 15 - 54, Move the network orchestration out of uploadProfileImageIfNeeded in src/lib/profile into a dedicated hook under src/hooks/profile or an API-layer function, including requestProfileImageUploadUrl and uploadFileToPresignedUrl calls. Keep src/lib/profile limited to the pure utilities isProfileImageContentType and buildProfileImagePublicUrl, and update callers to use the moved upload flow while preserving the feature-flag and validation behavior.Source: Path instructions
src/components/profile/ProfileChipGroup.tsx (1)
68-84: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win
role="group"에 접근 이름과 오류 연결을 추가해 주세요.현재
role="group"에는 접근 이름이 없습니다. 스크린리더는 그룹의 목적을 읽지 못합니다. 또한 오류 문구가 chip 과 프로그램적으로 연결되지 않습니다.aria-label(또는FormFieldlabel id 를 가리키는aria-labelledby)과aria-describedby를 받도록 확장하면 두 문제가 함께 해결됩니다.♿ 제안 diff
interface ProfileChipGroupBaseProps<T extends string | number> { options: ProfileChipOption<T>[]; className?: string; chipClassName?: string; error?: string; + /** 그룹 접근 이름 (FormField label 과 연결 권장) */ + ariaLabel?: string; + ariaLabelledBy?: string; }- const { options, className, chipClassName, error } = props; + const { options, className, chipClassName, error, ariaLabel, ariaLabelledBy } = props; + const errorId = useId(); return ( <div className="flex w-full flex-col gap-4"> - <div className={cn("flex flex-wrap gap-8 md:gap-12", className)} role="group"> + <div + className={cn("flex flex-wrap gap-8 md:gap-12", className)} + role="group" + aria-label={ariaLabelledBy ? undefined : ariaLabel} + aria-labelledby={ariaLabelledBy} + aria-describedby={error ? errorId : undefined} + >- <Text as="p" role="alert" variant="xs-regular" className="text-text-error"> + <Text as="p" id={errorId} role="alert" variant="xs-regular" className="text-text-error">🤖 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/components/profile/ProfileChipGroup.tsx` around lines 68 - 84, Update the group element in ProfileChipGroup to expose an accessible name via aria-label or the associated FormField label id through aria-labelledby, and connect the rendered error message through aria-describedby. Ensure the relevant label and error ids are available and applied to the role="group" element while preserving the existing chip selection behavior.Source: Path instructions
src/components/profile/CustomerProfileForm.tsx (1)
68-71: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win
regionId필수 검증이 두 폼의 submit 핸들러에 중복되어 있습니다. 근본 원인은 검증 책임이 zod 스키마 밖에 있는 점입니다. 그래서 오류가 필드 대신 폼 전체 문구로 표시되고,isValid는 지역 미선택 상태에서도 true 가 됩니다. 스키마에서regionId를 필수로 정의하면 두 폼의 분기 코드가 사라집니다.
src/components/profile/CustomerProfileForm.tsx#L68-L71:createCustomerProfileSchema에서regionId를 필수로 만들고 이 분기를 제거해 주세요.src/components/profile/CustomerProfileEditForm.tsx#L88-L91:customerProfileEditSchema에 동일 규칙을 적용하고 이 분기를 제거해 주세요.🤖 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/components/profile/CustomerProfileForm.tsx` around lines 68 - 71, Make regionId required in both createCustomerProfileSchema and customerProfileEditSchema, then remove the duplicated submit-handler null checks in src/components/profile/CustomerProfileForm.tsx lines 68-71 and src/components/profile/CustomerProfileEditForm.tsx lines 88-91 so schema validation drives field-level errors and isValid.src/components/common/Header/ProfileMenuTrigger.tsx (1)
135-142: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value모바일 터치 영역을 확인해 주세요.
lg미만에서 아이콘은size-24이고 닉네임은max-lg:hidden으로 숨겨집니다. 따라서 트리거 버튼의 실제 클릭 영역이 24×24px로 축소됩니다. 이 값은 일반적인 최소 터치 영역 권장치보다 작습니다.시각 크기는 유지하고 패딩으로 터치 영역만 확장하는 방식을 권장합니다. Figma 디자인이 24px를 명시했다면 현재 상태를 유지해도 됩니다.
코딩 가이드라인의 "키보드 접근성, focus·disabled·hover·active 상태, aria 속성, 모달 focus 관리, 색상 대비, 모바일 터치 영역을 확인한다" 항목을 근거로 지적했습니다.
🤖 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/components/common/Header/ProfileMenuTrigger.tsx` around lines 135 - 142, Update the ProfileMenuTrigger mobile trigger styling around the profile Image so its visual size remains 24px while the clickable/focusable area meets the minimum touch-target size, using padding or equivalent spacing; preserve the existing desktop sizing and hidden nickname behavior.Source: Coding guidelines
src/components/common/Header/Header.tsx (1)
189-217: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value메뉴 열기 버튼이 두 분기에 중복 정의되어 있습니다.
189-198행과 208-217행의 버튼은
ref,className,aria-label,aria-expanded,onClick, 아이콘까지 동일합니다. 클래스 문자열이 길어 한쪽만 수정되면 어긋납니다.파일 내부 서브 컴포넌트로 추출하는 방식을 권장합니다.
♻️ 제안 리팩터
+const SideNavOpenButton = ({ + buttonRef, + isOpen, + onOpen, +}: { + buttonRef: RefObject<HTMLButtonElement | null>; + isOpen: boolean; + onOpen: () => void; +}) => ( + <button + ref={buttonRef} + type="button" + className="text-icon-default focus-visible:ring-border-brand rounded-4 flex size-24 items-center justify-center focus-visible:ring-2 focus-visible:outline-none lg:hidden" + aria-label="메뉴 열기" + aria-expanded={isOpen} + onClick={onOpen} + > + <MenuIcon aria-hidden="true" className="size-24" /> + </button> +);🤖 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/components/common/Header/Header.tsx` around lines 189 - 217, Extract the duplicated menu-open button markup into a file-local subcomponent, preserving its ref, accessibility attributes, styling, click handler, and MenuIcon. Replace both conditional branches in the Header component with this shared subcomponent so future changes remain consistent.src/components/common/Header/HeaderSideNav.tsx (2)
141-146: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win배경 오버레이 버튼의 접근 가능한 이름이 닫기 버튼과 중복됩니다.
오버레이
<button>과 헤더의 닫기<button>이 모두 "메뉴 닫기" 이름을 가집니다. 스크린리더 사용자는 동일한 이름의 버튼을 두 개 만납니다. 키보드 사용자에게도 오버레이는 불필요한 Tab 정지점입니다.이미 Escape 키와 닫기 버튼으로 닫기 동작을 제공하므로, 오버레이는 마우스 전용으로 두고 접근성 트리에서 제외하는 방식을 권장합니다.
♿ 제안 수정
<button type="button" className="bg-overlay-scrim absolute inset-0" - aria-label="메뉴 닫기" + aria-hidden="true" + tabIndex={-1} onClick={onClose} />🤖 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/components/common/Header/HeaderSideNav.tsx` around lines 141 - 146, Update the background overlay button in HeaderSideNav so it is excluded from the accessibility tree and removed from keyboard tab order, while preserving its mouse click behavior through onClose. Keep the header’s existing close button and Escape-key behavior unchanged.
24-27: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value데스크톱 브레이크포인트 값이 하드코딩되어 있습니다.
DESKTOP_MEDIA_QUERY의1024px는 Tailwindlg브레이크포인트와 같은 값입니다. 이 컴포넌트의lg:hidden클래스와 값이 동기화되어야 합니다. 프로젝트가 브레이크포인트를 변경하면 이 상수만 남아 어긋납니다.브레이크포인트 상수를 공용 모듈에 두고 두 곳에서 참조하는 방식을 권장합니다. 최소한
lg와 동일해야 함을 주석으로 명시해 주세요.🤖 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/components/common/Header/HeaderSideNav.tsx` around lines 24 - 27, Update DESKTOP_MEDIA_QUERY in HeaderSideNav to avoid an untracked hardcoded breakpoint by reusing the project’s shared breakpoint constant or configuration value for Tailwind lg; if no shared symbol exists, add a comment explicitly requiring the value to remain synchronized with lg. Keep the media query behavior aligned with the component’s lg:hidden class.src/styles/tokens.theme.css (1)
261-264: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win
size-25를size-100으로 변경하고 중복 토큰을 제거하세요.
size-25사용처는 프로필 이미지 두 곳이며 모두 100×100 크기를 의도합니다. 두 사용처를size-100으로 변경한 뒤--spacing-25를 제거하세요.--spacing-100과--spacing-104에는 각각 용도 주석을 추가하세요.🤖 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/styles/tokens.theme.css` around lines 261 - 264, 프로필 이미지의 두 size-25 사용처를 size-100으로 변경하고 중복된 --spacing-25 토큰을 제거하세요. --spacing-100과 --spacing-104에는 각각의 용도를 설명하는 주석을 추가하며, 기존 토큰 값과 다른 사용처는 유지하세요.Source: Path instructions
🤖 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.
Inline comments:
In `@src/components/common/FormField/FormField.tsx`:
- Around line 34-43: FormField의 labelContent에서 시각적 별표는 유지하되, aria-hidden 별표와 함께
sr-only 텍스트로 “필수”를 제공해 필수 상태를 접근성 트리에 노출하세요. 또한 FormField가 렌더링하거나 전달하는 실제 input
요소에 required 또는 aria-required를 설정해 스크린 리더가 필수 필드로 인식하도록 업데이트하세요.
In `@src/components/common/Header/Header.tsx`:
- Around line 127-128: Header의 openSideNav와 closeSideNav를 useCallback으로 감싸 렌더 간
함수 참조를 안정화하세요. 두 콜백의 의존성 배열은 setIsSideNavOpen의 안정적인 setter에 맞게 설정하고, 필요한
useCallback import도 추가하여 HeaderSideNav의 effect가 불필요하게 재실행되지 않도록 하세요.
In `@src/components/common/Header/HeaderSideNav.tsx`:
- Around line 29-46: Extract the duplicated isNavLinkActive logic into a shared
utility module, preserving the exact pathname, href, and
APP_ROUTES.MOVERS.FAVORITES handling. Remove the local implementations from
Header.tsx and HeaderSideNav.tsx, and import the shared function in both
components so desktop and mobile navigation use one active-state rule.
- Around line 148-154: Separate the dialog container from the navigation
landmark in the HeaderSideNav component: move role="dialog", aria-modal,
aria-labelledby, and panelRef to a div typed via useRef<HTMLDivElement>, then
wrap only the link list after the close-button block in a nav without
role="dialog" and close it at the list’s end.
In `@src/components/profile/CustomerProfileEditForm.tsx`:
- Around line 134-158: The three profile forms branch on localized error.message
text instead of stable ApiError.code values. Create a shared utility that maps
backend error codes, verified against /docs, to the affected field names, then
reuse it in src/components/profile/CustomerProfileEditForm.tsx lines 134-158 to
replace the phone and current-password message checks; in
src/components/profile/CustomerProfileForm.tsx lines 83-93 to replace the phone
check and retain setFocus("phone"); and in
src/components/profile/MoverProfileForm.tsx lines 88-106 to replace the phone,
nickname, and alias checks, preserving each form’s existing field error handling
and focus behavior.
- Around line 196-205: CustomerProfileEditForm의 전화번호 서버 오류 처리를 setError("phone")
및 setFocus("phone") 대신 setSubmitError로 변경하세요. 비활성화된 customer-edit-phone 입력은 계속
disabled 상태와 기존 error 렌더링을 유지하고, 전화번호를 수정할 수 없는 경우 제출 오류로 표시되도록 하세요.
In `@src/components/profile/CustomerProfileEditView.tsx`:
- Around line 18-20: Update src/components/profile/CustomerProfileEditView.tsx
lines 18-20 in the loading condition around isAuthPending, isProfilePending, and
canFetch to use isAuthPending || (canFetch && isProfilePending), then add a
!canFetch branch showing access guidance or redirecting. Apply the same
canFetch-aware loading logic in
src/components/profile/CustomerProfileCreateView.tsx lines 13-21, and handle
missing user?.id there because useCustomerProfileStatus requires it.
In `@src/components/profile/MoverBasicInfoEditForm.tsx`:
- Around line 144-152: Update the PasswordInput for currentPassword in
MoverBasicInfoEditForm to use autoComplete="current-password" instead of
"new-password". Keep the new-password value unchanged for the new password and
confirmation fields.
In `@src/components/profile/ProfileImageUploader.tsx`:
- Around line 51-59: Update src/components/profile/ProfileImageUploader.tsx
lines 51-59 and its props to accept an optional id, apply id ?? inputId to the
file input, and connect the trigger button to the error message with
aria-describedby. Update src/components/profile/CustomerProfileEditForm.tsx
lines 246-259 to pass id="customer-edit-profile-image", and
src/components/profile/CustomerProfileForm.tsx lines 128-141 to pass
id="customer-profile-image", matching each FormField labelFor; verify FormField
renders labelFor as label htmlFor.
- Around line 29-40: Move object URL creation out of the render path: replace
the useMemo-based objectUrl in the component with useState and create/revoke the
URL inside a useEffect tied to value, ensuring cleanup handles each created URL.
Remove the useMemo import and add useState while preserving the existing null
behavior when value is absent.
In `@src/hooks/profile/useCustomerProfileMe.ts`:
- Around line 5-10: Update useCustomerProfileMe in
src/hooks/profile/useCustomerProfileMe.ts at lines 5-10 to read userId from
useAuthStore, include it in the CUSTOMER_ME query key, and enable the query only
when userId exists. Apply the same change to useMoverProfileMe in
src/hooks/profile/useMoverProfileMe.ts at lines 5-10, using the MOVER_ME key.
In `@src/lib/api/profile.ts`:
- Around line 69-85: Update createCustomerProfile, updateCustomerBasicInfo, and
updateCustomerProfile in src/lib/api/profile.ts lines 69-85 to use axiosInstance
instead of fetchInstance while preserving their request payloads and response
types. Apply the same axiosInstance client and error-handling contract to the
mover profile creation and update functions in src/lib/api/profile.ts lines
132-148.
In `@src/lib/profile/uploadProfileImage.ts`:
- Around line 9-54: Update the profile-image flow around
IS_PROFILE_IMAGE_UPLOAD_ENABLED and uploadProfileImageIfNeeded so a selected
image is uploaded and its returned public URL reaches the
CustomerProfileEditForm PATCH payload before showing success. Before release,
enable the upload path; if upload infrastructure is unavailable, disable the
image-selection UI or clearly mark it unsupported instead of silently returning
undefined.
In `@src/lib/schemas/moverProfileSchema.ts`:
- Around line 31-35: career 스키마의 숫자 문자열 검증에 안전한 정수 범위 제한을 추가하세요.
Number(formValues.career)로 변환하기 전에 Number.isSafeInteger에 해당하는 값만 허용하고, 범위를 벗어나거나
Infinity가 될 수 있는 값은 기존 검증 오류 방식으로 거부되도록 수정하세요.
In `@src/lib/schemas/phoneSchema.ts`:
- Around line 7-17: phoneSchema에서 하이픈을 제거하는 transform보다 먼저 원본 입력값을 BE와 동일한 전화번호
정규식으로 검증하도록 순서를 변경하세요. 검증을 통과한 값만 하이픈을 제거해 후속 숫자 및 전화번호 검증으로 전달하고, 잘못된 하이픈 위치는
클라이언트에서도 거부되도록 하세요.
---
Nitpick comments:
In `@src/components/common/Header/Header.tsx`:
- Around line 189-217: Extract the duplicated menu-open button markup into a
file-local subcomponent, preserving its ref, accessibility attributes, styling,
click handler, and MenuIcon. Replace both conditional branches in the Header
component with this shared subcomponent so future changes remain consistent.
In `@src/components/common/Header/HeaderSideNav.tsx`:
- Around line 141-146: Update the background overlay button in HeaderSideNav so
it is excluded from the accessibility tree and removed from keyboard tab order,
while preserving its mouse click behavior through onClose. Keep the header’s
existing close button and Escape-key behavior unchanged.
- Around line 24-27: Update DESKTOP_MEDIA_QUERY in HeaderSideNav to avoid an
untracked hardcoded breakpoint by reusing the project’s shared breakpoint
constant or configuration value for Tailwind lg; if no shared symbol exists, add
a comment explicitly requiring the value to remain synchronized with lg. Keep
the media query behavior aligned with the component’s lg:hidden class.
In `@src/components/common/Header/ProfileMenuTrigger.tsx`:
- Around line 135-142: Update the ProfileMenuTrigger mobile trigger styling
around the profile Image so its visual size remains 24px while the
clickable/focusable area meets the minimum touch-target size, using padding or
equivalent spacing; preserve the existing desktop sizing and hidden nickname
behavior.
In `@src/components/profile/CustomerProfileForm.tsx`:
- Around line 68-71: Make regionId required in both createCustomerProfileSchema
and customerProfileEditSchema, then remove the duplicated submit-handler null
checks in src/components/profile/CustomerProfileForm.tsx lines 68-71 and
src/components/profile/CustomerProfileEditForm.tsx lines 88-91 so schema
validation drives field-level errors and isValid.
In `@src/components/profile/ProfileChipGroup.tsx`:
- Around line 68-84: Update the group element in ProfileChipGroup to expose an
accessible name via aria-label or the associated FormField label id through
aria-labelledby, and connect the rendered error message through
aria-describedby. Ensure the relevant label and error ids are available and
applied to the role="group" element while preserving the existing chip selection
behavior.
In `@src/lib/profile/uploadProfileImage.ts`:
- Around line 15-54: Move the network orchestration out of
uploadProfileImageIfNeeded in src/lib/profile into a dedicated hook under
src/hooks/profile or an API-layer function, including
requestProfileImageUploadUrl and uploadFileToPresignedUrl calls. Keep
src/lib/profile limited to the pure utilities isProfileImageContentType and
buildProfileImagePublicUrl, and update callers to use the moved upload flow
while preserving the feature-flag and validation behavior.
In `@src/styles/tokens.theme.css`:
- Around line 261-264: 프로필 이미지의 두 size-25 사용처를 size-100으로 변경하고 중복된 --spacing-25
토큰을 제거하세요. --spacing-100과 --spacing-104에는 각각의 용도를 설명하는 주석을 추가하며, 기존 토큰 값과 다른
사용처는 유지하세요.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 29f168fa-7511-4df8-b157-3938e97ab127
⛔ Files ignored due to path filters (1)
src/icons/gallery.svgis excluded by!**/*.svg
📒 Files selected for processing (67)
src/app/(customer)/(protected)/layout.tsxsrc/app/(customer)/(protected)/profile/edit/page.tsxsrc/app/(customer)/(protected)/profile/page.tsxsrc/app/(mover)/(protected)/layout.tsxsrc/app/(mover)/(protected)/mover/basic/edit/page.tsxsrc/app/(mover)/(protected)/mover/profile/edit/page.tsxsrc/app/(mover)/(protected)/mover/profile/page.tsxsrc/components/auth/MoverAuthGate.tsxsrc/components/common/FormField/FormField.tsxsrc/components/common/Header/Header.tsxsrc/components/common/Header/HeaderSideNav.tsxsrc/components/common/Header/ProfileMenuTrigger.tsxsrc/components/common/Header/notification/NotificationTrigger.tsxsrc/components/profile/CustomerProfileCreateView.tsxsrc/components/profile/CustomerProfileEditForm.tsxsrc/components/profile/CustomerProfileEditView.tsxsrc/components/profile/CustomerProfileForm.tsxsrc/components/profile/MoverBasicInfoEditForm.tsxsrc/components/profile/MoverBasicInfoEditView.tsxsrc/components/profile/MoverProfileCreateView.tsxsrc/components/profile/MoverProfileEditForm.tsxsrc/components/profile/MoverProfileEditView.tsxsrc/components/profile/MoverProfileForm.tsxsrc/components/profile/ProfileChipGroup.tsxsrc/components/profile/ProfileFormActions.tsxsrc/components/profile/ProfileFormSkeleton.tsxsrc/components/profile/ProfileImageUploader.tsxsrc/components/profile/ProfilePageHeader.tsxsrc/components/profile/ProfileSelectableChip.tsxsrc/hooks/profile/useCreateCustomerProfile.tssrc/hooks/profile/useCreateMoverProfile.tssrc/hooks/profile/useCustomerProfileMe.tssrc/hooks/profile/useCustomerProfileStatus.tssrc/hooks/profile/useMoverProfileMe.tssrc/hooks/profile/useMoverProfileStatus.tssrc/hooks/profile/useUpdateCustomerBasicInfo.tssrc/hooks/profile/useUpdateCustomerProfile.tssrc/hooks/profile/useUpdateMoverBasicInfo.tssrc/hooks/profile/useUpdateMoverProfile.tssrc/hooks/useMoverAuthReady.tssrc/icons/index.tssrc/lib/api/fetchInstance.tssrc/lib/api/getApiError.tssrc/lib/api/getApiErrorMessage.tssrc/lib/api/getValidationDataMessage.tssrc/lib/api/profile.tssrc/lib/api/profileImage.tssrc/lib/constants/apiRoutes.tssrc/lib/constants/appRoutes.tssrc/lib/constants/queryKeys.tssrc/lib/loading/getCustomerProtectedLoadingFallback.tsxsrc/lib/loading/getMoverProtectedLoadingFallback.tsxsrc/lib/profile/buildCustomerProfileEditPayloads.tssrc/lib/profile/toCustomerProfileEditFormValues.tssrc/lib/profile/toCustomerProfileFormValues.tssrc/lib/profile/toMoverBasicInfoEditFormValues.tssrc/lib/profile/toMoverProfileFormValues.tssrc/lib/profile/uploadProfileImage.tssrc/lib/schemas/customerProfileEditSchema.tssrc/lib/schemas/customerProfileSchema.tssrc/lib/schemas/moverBasicInfoEditSchema.tssrc/lib/schemas/moverProfileSchema.tssrc/lib/schemas/passwordChangeFields.tssrc/lib/schemas/phoneSchema.tssrc/styles/tokens.theme.csssrc/types/api.tssrc/types/profile.ts
juengseulki
reviewed
Aug 4, 2026
juengseulki
left a comment
juengseulki
left a comment
Contributor
There was a problem hiding this comment.
📋 PR 리뷰
👍 좋았던 점
- 고객과 기사 프로필 생성·수정 흐름을 View, Form, Hook, Schema, Mapper로 분리해 역할별 구조를 대칭적으로 구성했습니다.
- 고객 프로필 수정 화면은 하나로 유지하면서 BE의 기본정보 API와 프로필 API에 맞춰 변경 Payload를 나누도록 설계했습니다.
- 초기값과 현재값을 비교해 실제 변경된 필드만 전송하고, 변경 사항이 없으면 요청을 막도록 처리했습니다.
hasPhone과hasPassword를 실제 API 응답 기준으로 사용해 OAuth 계정의 전화번호·비밀번호 필드를 분기했습니다.- 기본정보 수정 성공 시 Auth Store의 세션도 갱신해 Header 이름이 즉시 변경되도록 했습니다.
- Query invalidation을 통해 고객·기사 프로필과 프로필 완료 상태를 최신 응답으로 다시 맞추도록 구성했습니다.
VALIDATION_ERROR의error.data를 해석하는 유틸을 분리해 서버 검증 메시지를 사용자에게 구체적으로 표시할 수 있도록 했습니다.- 고객과 기사 보호 화면의 Loading Fallback을 별도 유틸로 분리해 Role Guard 사용처의 중복을 줄였습니다.
- SideNav에 포커스 트랩, Escape 닫기, Scrim, Body Scroll Lock, 데스크톱 전환 시 자동 닫기 및 포커스 복원을 적용했습니다.
- Presigned URL 발급, S3 PUT, Public URL 생성 책임을 각각 분리해 향후 이미지 업로드 활성화 시 연결하기 좋은 구조를 마련했습니다.
- 고객과 기사 프로필 응답 타입에
hasPassword를 반영하고, 기사 응답에는 닉네임·경력·소개·평점 정보를 포함해 BE 계약에 맞게 매핑했습니다.
🚨 수정이 필요한 부분
- 고객 수정이 부분 성공한 뒤 재시도하면 이미 저장된 기본정보가 다시 변경분으로 계산될 수 있습니다.
- 기본정보 성공 후에도 비교 기준인
defaultValues는 최초 값으로 유지됩니다. - 프로필 저장 실패 후 재시도하면 이름 등의 기본정보 요청이 다시 전송될 수 있습니다.
- 성공한 필드를 초기 기준값에 반영하거나 최신 Query 값으로 Form을 reset해야 합니다.
- Header에서 렌더링 중 상태를 변경하고 있습니다.
pathname !== sideNavPathname조건문 안에서 Setter를 직접 호출합니다.- 경로 변경에 따른 SideNav 닫기는
useEffect([pathname])로 이동하고sideNavPathname상태를 제거하는 편이 안전합니다.
🔍 확인 및 제안
- 프로필 이미지 업로드가 비활성화된 상태에서도 사용자는 이미지를 선택하고 미리보기를 볼 수 있습니다. 현재 저장되지 않는 기능임을 UI에서 분명히 알려주는 것이 좋아 보여요.
- 고객 기본정보와 프로필 요청을 순차적으로 실행하는 현재 구조에서는 원자적 저장이 불가능합니다. 이번 PR처럼 부분 저장을 명확하게 안내하는 방향은 현실적이지만, 성공한 영역을 재시도 대상에서 제외하는 기준값 갱신은 꼭 필요합니다.
전체적으로 BE 프로필 API 분리와 OAuth 상태 계약을 FE에 잘 반영했고, 고객·기사 구조도 비교적 일관되게 정리됐습니다. 다만 부분 저장 후 재시도 기준과 Header의 렌더 중 상태 변경은 실제 동작 안정성에 영향을 주므로 병합 전에 보완하는 게 안전해 보입니다!😀
To Reviewer 요청 기준으로 고객·기사 프로필 생성·수정 구조,
고객의 basic/profile 이중 호출, OAuth 필드 분기와 Header SideNav를
중점적으로 확인했습니다!
고객과 기사 프로필 생성 구조를 View, Form, Hook, Status, Schema와 Mapper로
대칭되게 구성한 방향은 적절해 보입니다.
고객 수정 화면에서 기본정보와 프로필 정보를 한 번에 입력받되,
실제 요청은 BE 계약에 맞춰 PATCH /customer/me/basic과
PATCH /customer/me로 나눠 변경분만 순차 전송한 방식도 자연스럽습니다.
두 API를 하나의 트랜잭션으로 처리할 수 없으므로
기본정보는 성공하고 프로필 수정만 실패할 수 있는데,
이 경우 부분 저장 사실을 안내하고 비밀번호 필드를 초기화한 방향도 좋았습니다.
다만 기본정보 성공 이후에도 Form이 변경분을 비교하는 기준은
최초 defaultValues로 유지됩니다.
따라서 프로필 수정 실패 후 다시 제출하면 이미 저장된 이름 등의 기본정보가
다시 요청 Payload에 포함될 수 있어, 성공한 기본정보를 새로운 초기값으로 반영하거나
최신 Query 값을 기준으로 Form을 reset하는 보완이 필요해 보입니다.
OAuth 계정 분기도 API 응답의 hasPhone, hasPassword를 사용하고 있어
프론트에서 로그인 제공자를 추측하지 않고 실제 데이터 상태를 기준으로
입력 필드를 제공하는 방식이 적절해 보였습니다.
Header SideNav도 다음 접근성 동작이 잘 반영되어 있었습니다.
- SideNav 진입 시 닫기 버튼으로 포커스 이동
- 내부 Tab 순환
- Escape 및 Scrim 닫기
- Body Scroll Lock과 스크롤바 폭 보정
- 데스크톱 Breakpoint 진입 시 자동 닫기
- 닫힌 후 햄버거 버튼으로 포커스 복귀
다만 Header.tsx에서 pathname 변경을 확인하며 렌더링 중
상태 Setter를 직접 호출하고 있으므로, 이 부분은 useEffect([pathname])로
이동하는 것이 React 렌더링 규칙상 더 안전해 보입니다.
이미지 업로드는 현재 기능 플래그가 꺼져 있어 선택과 미리보기는 가능하지만
실제 저장에는 반영되지 않습니다. S3 연동 전 임시 정책이라면
사용자가 저장되는 것으로 오해하지 않도록 안내 문구를 추가하는 것도
함께 검토하면 좋을 것 같습니다.
yooseohyeon
reviewed
Aug 4, 2026
Contributor
There was a problem hiding this comment.
작업하느라 수고 많으셨습니다!
프로필 생성·수정 폼에서 공통으로 사용되는 UI들을 잘 분리해주셔서 폼 사이의 중복을 줄이면서도 각 화면의 요구사항은 명확하게 유지된 것 같습니다!
이미 리뷰가 달린 부분들은 제외하고 인라인 코멘트를 추가했습니다.
추가로 한 가지 질문이 있습니다! 지금은 회원가입 후 프로필 등록을 하지 않아도 헤더의 메뉴가 감춰지지 않고 헤더의 메뉴들에 접근하면 프로필 등록을 해야 한다는 안내가 없습니다. 기존 에러 ui(불러올 수 없다는 문구 같은)만 표시되는 것으로 확인됩니다. 이는 추후에 작업하실 예정이신 걸까요??
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 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.
Inline comments:
In `@src/components/profile/CustomerProfileEditForm.tsx`:
- Around line 107-114: Update the reset call in CustomerProfileEditForm so it
resets only successfully saved basic-information fields and clears the password
fields, rather than spreading all values from getValues(). Preserve dirty state
for regionId, serviceTypes, and image changes until the profile PATCH succeeds,
so buildCustomerProfileEditPayloads() still produces a retry payload after
failure.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: ab9ed5a1-9f8e-40ab-8a02-612aacc5cdaf
📒 Files selected for processing (29)
src/components/common/FormField/FormField.tsxsrc/components/common/Header/Header.tsxsrc/components/common/Header/HeaderSideNav.tsxsrc/components/common/Header/ProfileMenuTrigger.tsxsrc/components/common/Header/notification/NotificationTrigger.tsxsrc/components/estimate/request/EstimateRequestForm.tsxsrc/components/profile/CustomerProfileCreateView.tsxsrc/components/profile/CustomerProfileEditForm.tsxsrc/components/profile/CustomerProfileEditView.tsxsrc/components/profile/CustomerProfileForm.tsxsrc/components/profile/MoverBasicInfoEditForm.tsxsrc/components/profile/MoverBasicInfoEditView.tsxsrc/components/profile/MoverProfileCreateView.tsxsrc/components/profile/MoverProfileEditForm.tsxsrc/components/profile/MoverProfileEditView.tsxsrc/components/profile/MoverProfileForm.tsxsrc/components/profile/ProfileChipGroup.tsxsrc/components/profile/ProfileEmptyState.tsxsrc/components/profile/ProfileImageUploader.tsxsrc/hooks/profile/useCustomerProfileMe.tssrc/hooks/profile/useMoverProfileMe.tssrc/icons/index.tssrc/lib/constants/apiRoutes.tssrc/lib/constants/queryKeys.tssrc/lib/profile/buildCustomerProfileEditPayloads.tssrc/lib/schemas/moverProfileSchema.tssrc/lib/schemas/phoneSchema.tssrc/lib/schemas/signUpSchema.tssrc/styles/tokens.theme.css
🚧 Files skipped from review as they are similar to previous changes (17)
- src/icons/index.ts
- src/lib/schemas/phoneSchema.ts
- src/lib/constants/queryKeys.ts
- src/components/common/Header/notification/NotificationTrigger.tsx
- src/styles/tokens.theme.css
- src/hooks/profile/useCustomerProfileMe.ts
- src/components/common/Header/ProfileMenuTrigger.tsx
- src/components/profile/CustomerProfileForm.tsx
- src/components/profile/MoverProfileEditView.tsx
- src/components/profile/CustomerProfileEditView.tsx
- src/components/profile/MoverProfileForm.tsx
- src/lib/schemas/moverProfileSchema.ts
- src/components/common/Header/Header.tsx
- src/components/profile/MoverBasicInfoEditForm.tsx
- src/components/common/Header/HeaderSideNav.tsx
- src/components/profile/ProfileChipGroup.tsx
- src/lib/constants/apiRoutes.ts
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
src/components/common/Header/HeaderSideNav.tsx (1)
44-67: 🩺 Stability & Availability | 🟠 Major | ⚡ Quick win데스크톱 전환 시
shouldRender를 직접 해제하세요.사이드 내비게이션이 열린 상태에서 화면이
xl이상으로 전환되면xl:hidden이 패널을 즉시 숨깁니다. 이 경우transform의transitionend가 발생하지 않아 Line 87의setShouldRender(false)가 실행되지 않습니다.그 결과 Line 74-80의 body scroll lock이 계속 유지됩니다. 사용자는 데스크톱 화면에서 페이지를 스크롤할 수 없습니다.
shouldRender가true인 동안에는 미디어 쿼리를 감시하세요.xl전환 시onClose()와setShouldRender(false)를 함께 호출하세요.수정 예시
- useEffect(() => { - if (!isOpen) { + useEffect(() => { + if (!shouldRender) { return; } const mediaQuery = window.matchMedia(MEDIA_QUERY.xl); const handleBreakpointChange = (event: MediaQueryListEvent) => { if (event.matches) { onClose(); + setShouldRender(false); } }; if (mediaQuery.matches) { onClose(); + setShouldRender(false); return; } mediaQuery.addEventListener("change", handleBreakpointChange); return () => { mediaQuery.removeEventListener("change", handleBreakpointChange); }; - }, [isOpen, onClose]); + }, [onClose, shouldRender]);🤖 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/components/common/Header/HeaderSideNav.tsx` around lines 44 - 67, Update the HeaderSideNav media-query effect to also run while shouldRender is true, not only when isOpen is true. When the xl breakpoint matches initially or changes to matched, call both onClose() and setShouldRender(false) so desktop transitions release rendering and body scroll locking even without a transitionend event; retain cleanup for the media-query listener.Source: Coding guidelines
src/components/common/FormField/FormField.tsx (1)
17-19: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
FormFieldProps에서 라벨 연결을 필수화하세요.
labelFor와labelId가 모두 선택적이므로 두 값을 생략하거나 동시에 전달하는 잘못된 호출을 허용합니다.labelFor또는labelId중 정확히 하나만 허용하는 union 타입으로 정의하세요.🤖 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/components/common/FormField/FormField.tsx` around lines 17 - 19, Update FormFieldProps so labelFor and labelId form an exclusive union: require exactly one of the two properties while disallowing both together or omitting both. Preserve the existing string types and use the union directly in the prop definition.Sources: Coding guidelines, Path instructions
🤖 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.
Inline comments:
In `@src/components/common/Header/isNavLinkActive.ts`:
- Around line 13-23: Update the root-link handling in isNavLinkActive so
APP_ROUTES.MOVER_ESTIMATES.ROOT returns inactive for
APP_ROUTES.MOVER_ESTIMATES.SENT and any path beneath it, while preserving
activation for other root paths. Mirror the existing APP_ROUTES.MOVERS.FAVORITES
exclusion pattern and leave exact matching for the SENT menu unchanged.
---
Outside diff comments:
In `@src/components/common/FormField/FormField.tsx`:
- Around line 17-19: Update FormFieldProps so labelFor and labelId form an
exclusive union: require exactly one of the two properties while disallowing
both together or omitting both. Preserve the existing string types and use the
union directly in the prop definition.
In `@src/components/common/Header/HeaderSideNav.tsx`:
- Around line 44-67: Update the HeaderSideNav media-query effect to also run
while shouldRender is true, not only when isOpen is true. When the xl breakpoint
matches initially or changes to matched, call both onClose() and
setShouldRender(false) so desktop transitions release rendering and body scroll
locking even without a transitionend event; retain cleanup for the media-query
listener.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: b67a4849-f870-46e7-a31c-d23cdcf263f8
📒 Files selected for processing (10)
src/components/common/Chip/SelectableChip.tsxsrc/components/common/FormField/FormField.tsxsrc/components/common/Header/Header.tsxsrc/components/common/Header/HeaderSideNav.tsxsrc/components/common/Header/isNavLinkActive.tssrc/components/estimate/request/EstimateRequestForm.tsxsrc/components/profile/CustomerProfileEditForm.tsxsrc/components/profile/ProfileChipGroup.tsxsrc/icons/index.tssrc/lib/constants/appRoutes.ts
🚧 Files skipped from review as they are similar to previous changes (5)
- src/components/estimate/request/EstimateRequestForm.tsx
- src/lib/constants/appRoutes.ts
- src/icons/index.ts
- src/components/profile/ProfileChipGroup.tsx
- src/components/profile/CustomerProfileEditForm.tsx
…into feature/create-profile
This was referenced Aug 5, 2026
wndnjs2037
reviewed
Aug 8, 2026
Comment on lines
+69
to
+72
| useEffect(() => { | ||
| if (!shouldRender) { | ||
| return; | ||
| } |
Collaborator
There was a problem hiding this comment.
로직을 보면 스크롤 잠금 해제가 shouldRender가 false로 바뀔 때 실행되고, shouldRender는 패널의 transition이 끝나야(transitionend) false가 되게 되어 있는데,
데스크톱 폭에서는 패널이 xl:hidden으로 사라지면서 transition 자체가 실행되지 않아서, shouldRender가 true로 남고 overflow: hidden이 body에 그대로 남는 문제가 있을 수 있을 것 같습니다.
사이드바를 연 상태에서 화면을 데스크톱 폭으로 늘리면 body 스크롤 잠금이 안 풀리는 경우가 있는지 체크해보시고, 혹시 문제가 된다면 스크롤 잠금 effect가 shouldRender 대신 isOpen을 보고 잠그고 해제하도록 바꿔보시면 좋을 것 같아요.
Collaborator
|
파일이 많은데도 고객–기사가 1:1 대칭으로 읽히도록 잘 구현해주신 것 같아요. |
This was referenced Aug 10, 2026
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
4 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.
📋 작업 내용
고객/기사 프로필 생성·수정 플로우를 구현하고, Header 반응형(사이드 네비)과 프로필 관련 API·에러 처리를 BE 명세에 맞게 정리했습니다.
hasPhone/hasPassword)에 따른 전화번호·비밀번호 필드 분기PATCH .../me/basic) + 프로필(PATCH .../me) 변경분 이중 호출VALIDATION_ERROR시error.data메시지 추출, 프로필 로딩 스켈레톤·loadingFallback 분리🔥 변경 사항
프로필
/profile(생성),/profile/edit(수정 — 한 페이지에서 basic/profile 분리 호출)/mover/profile(생성),/mover/profile/edit,/mover/basic/editstatus.hasPhone === false일 때만 생성 폼에 전화번호 입력 노출 (OAuth 부분)hasPassword === false일 때 수정 폼에서 비밀번호 변경 필드 숨김 (OAuth 부분)establishSession으로 Header 이름 동기화phoneSchema(BE01[016789]규칙), 고객 edit의 disabled phone은 형식 검증 완화 (phone은 유니크하고 수정이 불가하므로 edit 쪽은 완화, 생성쪽은 BE와 규칙 맞춤)Header
1024px) 리사이즈 시 자동 닫기, 햄버거 메뉴로 focus 복귀API / Auth / Loading
ApiErrorData의 path/method/timestamp 를 data 값 하나로 합침getValidationDataMessage/getApiErrorMessage로VALIDATION_ERROR상세 메시지 표시useMoverAuthReady를 customer와 동일 allowlist 방식으로 정렬✅ 체크리스트
📷 스크린샷 (선택)
생성 (일반)
생성 (OAuth)
수정 (일반)
수정 (OAuth)
생성 (일반)
생성 (OAuth)
프로필 수정 (일반, OAuth)
기본정보 수정 (일반)
기본정보 수정 (OAuth)
desktop
tablet, mobile
side nav
알람 및 프로필은 dektop과 동일하게 열림
💬 To Reviewer
프로필 생성 (고객 ↔ 기사 대칭)
CustomerProfileCreateView/MoverProfileCreateViewCustomerProfileForm/MoverProfileFormuseCreateCustomerProfile/useCreateMoverProfileuseCustomerProfileStatus/useMoverProfileStatuscustomerProfileSchema/moverProfileSchematoCustomerProfileFormValues/toMoverProfileFormValuesapp/.../profile/page.tsx(customer·mover 각각)프로필 수정
고객(한 페이지, basic+profile 이중 호출):
CustomerProfileEditView/CustomerProfileEditFormuseUpdateCustomerBasicInfo/useUpdateCustomerProfilebuildCustomerProfileEditPayloads/customerProfileEditSchema기사(페이지 분리):
MoverProfileEditView/MoverProfileEditForm/useUpdateMoverProfileMoverBasicInfoEditView/MoverBasicInfoEditForm/useUpdateMoverBasicInfo/moverBasicInfoEditSchema공통 UI·유틸 (customer/mover 공용)
ProfilePageHeader,ProfileFormActions,ProfileFormSkeletonProfileImageUploader,ProfileChipGroup,ProfileSelectableChipuploadProfileImage,phoneSchema,passwordChangeFieldslib/api/profile.ts,types/profile.tsHeader 반응형
Header.tsx,HeaderSideNav.tsx,ProfileMenuTrigger.tsxAPI 에러 / Loading
getValidationDataMessage,getApiErrorMessage,getApiError,types/api.tsgetCustomerProtectedLoadingFallback/getMoverProtectedLoadingFallback다른 참고 사항
IS_PROFILE_IMAGE_UPLOAD_ENABLED = false)는 S3 연동 전이라 UI 미리보기만 동작합니다.Summary by CodeRabbit