Merged
Conversation
Deploying mateball-client with
|
| Latest commit: |
73b055f
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://80ae7509.mateball-client.pages.dev |
| Branch Preview URL: | https://feat--325-edit-profile-api.mateball-client.pages.dev |
Walkthrough프로필 수정 페이지가 모킹에서 실제 API 연동으로 전환되었습니다. HTTP PUT 헬퍼와 사용자 쿼리/뮤테이션(매칭 조건 포함), 엔드포인트·쿼리키·타입이 추가되었고, 폼은 react-hook-form + zod로 재구성되어 닉네임/소개·매칭 조건 수정 흐름이 구현되었습니다. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor U as User
participant P as EditProfilePage
participant RQ as ReactQuery
participant API as HTTP Client
participant S as Server
U->>P: 페이지 진입
P->>RQ: 쿼리: GET user info, GET match-condition
RQ->>API: GET /v1/users/info, GET /v2/users/match-condition
API->>S: 요청 전달
S-->>API: 응답
API-->>RQ: 데이터 반환
RQ-->>P: 초기값 바인딩
U->>P: 닉네임/소개 제출
P->>RQ: mutation EDIT_PROFILE (PUT /v2/users/info)
RQ->>API: PUT { field, value }
API->>S: 요청
S-->>API: 성공
API-->>RQ: 응답
RQ-->>P: onSuccess (USER_KEY.ALL 무효화, 페이지 리로드)
U->>P: 매칭 조건 수정 제출
P->>RQ: mutation EDIT_MATCH_CONDITION (PATCH /v2/users/match-condition)
RQ->>API: PATCH { team, teamAllowed, style, genderPreference }
API->>S: 요청
S-->>API: 성공
API-->>RQ: 응답
RQ-->>P: 완료 (버튼 상태/dirty 초기화)
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Assessment against linked issues
Assessment against linked issues: Out-of-scope changes
Possibly related PRs
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 (
|
heesunee
changed the title
|
MATEBALL-STORYBOOK |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (11)
src/shared/constants/api.ts (1)
15-16: 상수명 재정의: HTTP 메서드와 버전 표기 일치시키기
- src/shared/constants/api.ts (15–16행)
POST_EDIT_PROFILE→PUT_EDIT_PROFILEMATCH_CONDITION→MATCH_CONDITION_V2(기존POST_MATCH_CONDITION은 v1 호출용으로 유지)- 변경된 상수명에 맞춰 호출부 일괄 업데이트
- put(END_POINT.POST_EDIT_PROFILE) → put(END_POINT.PUT_EDIT_PROFILE) (src/shared/apis/user/user-mutations.ts:44)
- patch/get 호출 시 END_POINT.MATCH_CONDITION → END_POINT.MATCH_CONDITION_V2 (src/shared/apis/user/user-mutations.ts:57, src/shared/apis/user/user-queries.ts:25)
상수명과 실제 HTTP 메서드·버전이 일대일 대응하도록 리네임하면 가독성과 유지보수성이 높아집니다.
src/shared/apis/base/http.ts (1)
15-17: HTTP 메서드 커버리지 완성도 높이기(DELETE 추가 권장)삭제 요청도 동일 패턴으로 자주 필요합니다. 예약어 충돌을 피해
del네이밍을 권장합니다.export function put<T>(...args: Parameters<typeof instance.put>): Promise<T> { return instance.put<T>(...args).then((res) => res.data); } + +export function del<T>(...args: Parameters<typeof instance.delete>): Promise<T> { + return instance.delete<T>(...args).then((res) => res.data); +}src/pages/edit-profile/constants/edit-profile.ts (2)
3-16: 리터럴 타입 보존 및 오타 방지 위해 as const 권장소비 측에서
label을 좁은 리터럴 타입으로 활용할 수 있고, 이후 값 비교 시 안전합니다.export const PROFILE_VIEWING_STYLE = [ { id: 1, label: '열정 응원러', }, { id: 2, label: '경기 집중러', }, { id: 3, label: '직관 먹방러', }, -]; + ] as const;
3-16: 표시용 label과 전송용 value 분리 고려서버 교환값과 UI 문구가 분리되면 번역/카피 변경에도 API 계약이 안정적입니다. 예:
{ id, value: 'PASSIONATE', label: '열정 응원러' }형태로 정의하고, API에는value만 사용.src/shared/constants/query-key.ts (1)
9-10: 키 네이밍 컨벤션 통일 제안
usersNumCount등 기존 키는 camelCase를 사용합니다. 일관성을 위해 다음과 같이 권장합니다.- EDIT_PROFILE: () => [...USER_KEY.ALL, 'edit'] as const, - MATCH_CONDITION: () => [...USER_KEY.ALL, 'match_condition'] as const, + EDIT_PROFILE: () => [...USER_KEY.ALL, 'edit'] as const, + MATCH_CONDITION: () => [...USER_KEY.ALL, 'matchCondition'] as const,src/pages/edit-profile/schema/EditProfileSchema.ts (1)
1-7: 스키마 공통화로 모듈 의존 축소 제안
@pages/sign-up/...에 의존하면 페이지 간 결합도가 올라갑니다. 공통 스키마(예:@shared/schemas/user.ts)로 이동해 회원가입/프로필수정이 함께 참조하도록 리팩터링을 고려하세요.src/shared/apis/user/user-queries.ts (1)
25-25: 제네릭 중복 지정 제거로 간결화
queryOptions<...>에서 이미 응답 타입을 고정했으므로get호출의 제네릭은 생략 가능합니다.아래처럼 단순화하세요:
- queryFn: () => get<getMatchConditionResponse>(END_POINT.MATCH_CONDITION), + queryFn: () => get(END_POINT.MATCH_CONDITION),src/shared/types/user-types.ts (1)
35-43: 문서화된 HTTP 메서드와 실제 사용 메서드 불일치주석에는 둘 다
post로 표기되어 있지만, 코드에서는 프로필 수정은PUT, 매칭 조건 수정은PATCH를 사용합니다. 실제 서버 스펙에 맞게 주석을 정정하거나, 필요시 메서드를 맞춰주세요.권장 변경(주석 정정):
/** * 사용자 정보 수정 - * post + * put * /v2/users/info */ /** * 매칭 조건 수정 - * post + * patch * /v2/users/match-condition */Also applies to: 58-61
src/shared/apis/user/user-mutations.ts (1)
45-47: 불필요한 async 키워드 제거
onSuccess에서await를 사용하지 않으므로async는 제거하세요. 작은 정리지만 가독성이 좋아집니다.- onSuccess: async () => { - queryClient.invalidateQueries({ queryKey: USER_KEY.ALL }); - }, + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: USER_KEY.ALL }); + },src/pages/edit-profile/edit-profile.tsx (2)
33-34: 닉네임/소개 수정 버튼의 비활성화 조건 보완
react-hook-form의isSubmitting은handleSubmit기반 서브밋에만 반응합니다. 현재는trigger+ 직접mutate호출이라 중복 클릭 방지가 되지 않을 수 있습니다. 프로필 수정 뮤테이션의isPending을 사용해 버튼을 제어하세요.- const { mutate: editProfile } = useMutation(userMutations.EDIT_PROFILE()); + const { mutate: editProfile, isPending: isEditProfilePending } = + useMutation(userMutations.EDIT_PROFILE()); <Button type="button" label="수정" onClick={submitNickname} - disabled={!!errors.nickname || nicknameVal.trim().length === 0 || isSubmitting} + disabled={!!errors.nickname || nicknameVal.trim().length === 0 || isEditProfilePending} className="cap_14_sb mt-[0.8rem] w-auto px-[1.6rem] py-[0.6rem]" /> <Button type="button" label="수정" onClick={submitInformation} - disabled={!!errors.information || informationVal.trim().length === 0 || isSubmitting} + disabled={ + !!errors.information || informationVal.trim().length === 0 || isEditProfilePending + } className="cap_14_sb mt-[0.8rem] w-auto px-[1.6rem] py-[0.6rem]" />Also applies to: 121-123, 150-152
54-55: 서버 필드 키 값 확인 필요(닉네임/소개)
field: '닉네임',field: '소개'처럼 한글 라벨을 그대로 전송합니다. BE가 기대하는 키(예:'nickname','introduction'등 코드 값)와 일치하는지 반드시 확인하세요. 불일치 시 400/무시될 수 있습니다.필요하시다면 필드 키 매핑 유틸(라벨↔코드)을 만들어 드리겠습니다.
Also applies to: 60-61
📜 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 (9)
src/pages/edit-profile/constants/edit-profile.ts(1 hunks)src/pages/edit-profile/edit-profile.tsx(3 hunks)src/pages/edit-profile/schema/EditProfileSchema.ts(1 hunks)src/shared/apis/base/http.ts(1 hunks)src/shared/apis/user/user-mutations.ts(2 hunks)src/shared/apis/user/user-queries.ts(2 hunks)src/shared/constants/api.ts(1 hunks)src/shared/constants/query-key.ts(1 hunks)src/shared/types/user-types.ts(1 hunks)
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#78
File: src/pages/sign-up/utils/age-calculate.ts:1-4
Timestamp: 2025-07-09T09:08:46.371Z
Learning: heesunee는 나이 계산 시 한국식 나이 시스템을 사용하므로, 정확한 생일 기반 계산보다는 출생연도 기준의 간단한 계산 방식을 선호합니다.
🧬 Code graph analysis (6)
src/pages/edit-profile/schema/EditProfileSchema.ts (1)
src/pages/sign-up/schema/validation-schema.ts (1)
NicknameSchema(14-43)
src/shared/apis/base/http.ts (1)
src/shared/apis/base/instance.ts (1)
instance(8-14)
src/shared/types/user-types.ts (1)
src/shared/types/match-types.ts (1)
postMatchConditionRequest(166-171)
src/shared/apis/user/user-queries.ts (4)
src/shared/types/user-types.ts (1)
getMatchConditionResponse(50-55)src/shared/constants/query-key.ts (1)
USER_KEY(2-11)src/shared/apis/base/http.ts (1)
get(3-5)src/shared/constants/api.ts (1)
END_POINT(3-41)
src/shared/apis/user/user-mutations.ts (5)
src/shared/types/base-types.ts (1)
responseTypes(7-10)src/shared/types/user-types.ts (2)
postEditProfileRequest(40-43)postMatchConditionRequest(62-67)src/shared/constants/query-key.ts (1)
USER_KEY(2-11)src/shared/apis/base/http.ts (2)
put(15-17)patch(11-13)src/shared/constants/api.ts (1)
END_POINT(3-41)
src/pages/edit-profile/edit-profile.tsx (7)
src/shared/apis/user/user-queries.ts (1)
userQueries(7-27)src/shared/apis/user/user-mutations.ts (1)
userMutations(14-59)src/pages/edit-profile/schema/EditProfileSchema.ts (2)
EditProfileValues(9-9)EditProfileSchema(4-7)src/pages/onboarding/constants/onboarding.ts (3)
NO_TEAM_OPTION(26-26)TEAMS(13-24)GENDER(48-63)src/pages/sign-up/constants/validation.ts (2)
NICKNAME_PLACEHOLDER(21-21)INFORMATION_PLACEHOLDER(25-26)src/pages/sign-up/constants/NOTICE.ts (2)
NICKNAME_RULE_MESSAGE(9-9)INFORMATION_RULE_MESSAGE(17-17)src/pages/edit-profile/constants/edit-profile.ts (1)
PROFILE_VIEWING_STYLE(3-16)
🔇 Additional comments (4)
src/shared/apis/base/http.ts (1)
15-17: PUT 래퍼 추가 좋습니다기존 get/post/patch 패턴과 일관되고,
res.data추출 형태도 동일합니다.src/pages/edit-profile/schema/EditProfileSchema.ts (1)
4-9: Sign-up 스키마 재사용 접근 좋습니다중복을 줄이면서 동일 검증 규칙을 유지합니다.
src/shared/apis/user/user-queries.ts (1)
22-26: MATCH_CONDITION 쿼리 추가 LGTM키/엔드포인트/타입 지정이 일관되고, 베이스
get래퍼 사용도 적절합니다.src/shared/apis/user/user-mutations.ts (1)
53-58: PATCH가 서버 스펙과 일치하는지 확인 필요주석과 상수명은 과거
POST_*컨벤션을 따르고 있어 혼동 소지가 있습니다. 현재/v2/users/match-condition가PATCH가 맞는지 BE 스펙을 재확인해주세요. 필요 시 메서드/주석/상수명(예:MATCH_CONDITION유지 orPATCH_MATCH_CONDITION로 변경)을 일치시켜 주세요.
| const [gender, setGender] = useState<string | undefined>(undefined); | ||
| const [mateTeam, setMateTeam] = useState<string | undefined>(undefined); | ||
| const [viewStyle, setViewStyle] = useState<string | undefined>(undefined); | ||
| const [isSubmit, setIsSubmit] = useState(false); |
There was a problem hiding this comment.
저장 버튼이 한 번 클릭 후 영구 비활성화되는 버그
isSubmit를 true로 바꾼 뒤 다시 false로 복구하지 않아 버튼이 계속 비활성화됩니다. 뮤테이션의 isPending을 사용해 상태를 추적하거나 onSettled에서 복구하세요. 아래는 isPending을 쓰는 간단한 수정안입니다.
- const [isSubmit, setIsSubmit] = useState(false);
+ // isSubmit 로컬 상태 대신 뮤테이션 pending 상태 사용
- const { mutate: editMatchCondition } = useMutation(userMutations.EDIT_MATCH_CONDITION());
+ const { mutate: editMatchCondition, isPending: isEditMatchPending } =
+ useMutation(userMutations.EDIT_MATCH_CONDITION());
- const isSubmitDisabled = !isMatchDirty || isSubmit;
+ const isSubmitDisabled = !isMatchDirty || isEditMatchPending;
const handleSaveClick = () => {
if (!isMatchDirty) return;
- setIsSubmit(true);
-
- editMatchCondition({
- team: teamValue,
- genderPreference: genderValue,
- style: viewStyleValue,
- teamAllowed: teamValue === NO_TEAM_OPTION ? null : mateTeamValue || null,
- });
+ editMatchCondition(
+ {
+ team: teamValue,
+ genderPreference: genderValue,
+ style: viewStyleValue,
+ teamAllowed: teamValue === NO_TEAM_OPTION ? null : mateTeamValue || null,
+ }
+ // 필요 시 onError/onSuccess에서 토스트 노출 등 처리
+ );
};Also applies to: 33-35, 81-82, 83-93
🤖 Prompt for AI Agents
In src/pages/edit-profile/edit-profile.tsx around lines 31 (and related 33-35,
81-82, 83-93), the local state isSubmit is set true on submit but never reset,
causing the save button to remain disabled; replace the manual boolean toggle
with the mutation's isPending (or at minimum call setIsSubmit(false) in the
mutation's onSettled callback) so the disabled state reflects the actual request
lifecycle — update button/disabled checks to use mutation.isPending (or
setIsSubmit(false) in onSettled), remove any permanent setIsSubmit(true) paths,
and ensure all submit-related branches (lines noted) use the same
lifecycle-driven flag.
Comment on lines
+53
to
+58
| EDIT_MATCH_CONDITION: () => | ||
| mutationOptions<postMatchConditionRequest, Error, postMatchConditionRequest>({ | ||
| mutationKey: USER_KEY.MATCH_CONDITION(), | ||
| mutationFn: ({ team, teamAllowed, style, genderPreference }) => | ||
| patch(END_POINT.MATCH_CONDITION, { team, teamAllowed, style, genderPreference }), | ||
| }), |
There was a problem hiding this comment.
🛠️ Refactor suggestion
EDIT_MATCH_CONDITION: 반환 타입/캐시 무효화 보완
mutationOptions의TData가 요청 바디 타입(postMatchConditionRequest)로 지정되어 있어 타입 안정성이 떨어집니다. 다른 뮤테이션과 동일하게responseTypes로 맞추는 것을 권장합니다.- 성공 시
MATCH_CONDITION쿼리를 무효화하지 않아 화면 데이터가 갱신되지 않습니다.
아래처럼 수정하세요:
- EDIT_MATCH_CONDITION: () =>
- mutationOptions<postMatchConditionRequest, Error, postMatchConditionRequest>({
+ EDIT_MATCH_CONDITION: () =>
+ mutationOptions<responseTypes, Error, postMatchConditionRequest>({
mutationKey: USER_KEY.MATCH_CONDITION(),
- mutationFn: ({ team, teamAllowed, style, genderPreference }) =>
- patch(END_POINT.MATCH_CONDITION, { team, teamAllowed, style, genderPreference }),
+ mutationFn: ({ team, teamAllowed, style, genderPreference }) =>
+ patch<responseTypes>(END_POINT.MATCH_CONDITION, {
+ team,
+ teamAllowed,
+ style,
+ genderPreference,
+ }),
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: USER_KEY.MATCH_CONDITION() });
+ },
}),📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| EDIT_MATCH_CONDITION: () => | |
| mutationOptions<postMatchConditionRequest, Error, postMatchConditionRequest>({ | |
| mutationKey: USER_KEY.MATCH_CONDITION(), | |
| mutationFn: ({ team, teamAllowed, style, genderPreference }) => | |
| patch(END_POINT.MATCH_CONDITION, { team, teamAllowed, style, genderPreference }), | |
| }), | |
| EDIT_MATCH_CONDITION: () => | |
| mutationOptions<responseTypes, Error, postMatchConditionRequest>({ | |
| mutationKey: USER_KEY.MATCH_CONDITION(), | |
| mutationFn: ({ team, teamAllowed, style, genderPreference }) => | |
| patch<responseTypes>(END_POINT.MATCH_CONDITION, { | |
| team, | |
| teamAllowed, | |
| style, | |
| genderPreference, | |
| }), | |
| onSuccess: () => { | |
| queryClient.invalidateQueries({ queryKey: USER_KEY.MATCH_CONDITION() }); | |
| }, | |
| }), |
🤖 Prompt for AI Agents
In src/shared/apis/user/user-mutations.ts around lines 53 to 58, change the
mutation generic TData from the request body type to the API response type
(e.g., mutationOptions<postMatchConditionResponse, Error,
postMatchConditionRequest>) and add an onSuccess handler that invalidates the
MATCH_CONDITION cache (e.g., call
queryClient.invalidateQueries(USER_KEY.MATCH_CONDITION()) or equivalent) so the
UI refreshes after a successful edit.
Comment on lines
+62
to
+67
| export interface postMatchConditionRequest { | ||
| team: string; | ||
| teamAllowed: string | null; | ||
| style: string; | ||
| genderPreference: string; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
postMatchConditionRequest 타입 중복 정의 제거 (단일 소스 유지)
src/shared/types/match-types.ts에도 동일한 postMatchConditionRequest가 존재합니다. 타입이 분산되면 향후 드리프트 위험이 큽니다. user-types.ts에서 재정의 대신 리익스포트를 권장합니다.
아래처럼 중복 인터페이스를 제거하고 리익스포트로 대체하세요:
- export interface postMatchConditionRequest {
- team: string;
- teamAllowed: string | null;
- style: string;
- genderPreference: string;
- }
+export type { postMatchConditionRequest } from '@/shared/types/match-types';추가로, 현재 src/shared/apis/user/user-mutations.ts는 postMatchConditionRequest를 user-types에서 import하고 있으므로, 위와 같이 리익스포트하면 기존 import 경로를 유지하면서 중복만 제거됩니다.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| export interface postMatchConditionRequest { | |
| team: string; | |
| teamAllowed: string | null; | |
| style: string; | |
| genderPreference: string; | |
| } | |
| export type { postMatchConditionRequest } from '@/shared/types/match-types'; |
🤖 Prompt for AI Agents
In src/shared/types/user-types.ts around lines 62 to 67, remove the duplicate
postMatchConditionRequest interface and instead re-export the single
authoritative type from src/shared/types/match-types.ts; delete the interface
block here, add a re-export statement that forwards postMatchConditionRequest
from match-types, and ensure the module still exports whatever else it needs so
existing imports (e.g., src/shared/apis/user/user-mutations.ts) continue to work
without changing their import paths.
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
src/shared/apis/user/user-mutations.ts (1)
58-63: 반환 타입 오적용 + 캐시 무효화 누락 (이전 리뷰와 동일 이슈)뮤테이션의
TData를 요청 바디 타입으로 지정해 타입 안정성이 깨집니다. 또한 성공 시MATCH_CONDITION쿼리를 무효화해야 UI가 최신 상태로 갱신됩니다.- EDIT_MATCH_CONDITION: () => - mutationOptions<postMatchConditionRequest, Error, postMatchConditionRequest>({ + EDIT_MATCH_CONDITION: () => + mutationOptions<responseTypes, Error, postMatchConditionRequest>({ mutationKey: USER_KEY.MATCH_CONDITION(), - mutationFn: ({ team, teamAllowed, style, genderPreference }) => - patch(END_POINT.MATCH_CONDITION, { team, teamAllowed, style, genderPreference }), - }), + mutationFn: ({ team, teamAllowed, style, genderPreference }) => + patch<responseTypes>(END_POINT.MATCH_CONDITION, { + team, + teamAllowed, + style, + genderPreference, + }), + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: USER_KEY.MATCH_CONDITION() }); + }, + }),
🧹 Nitpick comments (3)
src/shared/constants/query-key.ts (1)
10-11: 쿼리 키 네이밍 일관성 제안 (match_condition)USER_KEY 내 다른 토큰들은 대부분 하이픈/언더스코어 없이 소문자 또는 카멜케이스입니다.
"match_condition"만 언더스코어를 사용해 일관성이 깨집니다. 캐시 키 가독성을 위해 카멜케이스로 맞추는 것을 권장합니다.- MATCH_CONDITION: () => [...USER_KEY.ALL, 'match_condition'] as const, + MATCH_CONDITION: () => [...USER_KEY.ALL, 'matchCondition'] as const,기존에 이미 발급된 캐시 키가 있다면 병행 배포 시 캐시 미스가 발생할 수 있으니, 관련 쿼리/뮤테이션의 key 문자열 동기화 여부를 확인해주세요.
src/shared/apis/user/user-queries.ts (1)
16-21: USER_INFO 쿼리의 v1 전환 — 타입/계약 호환성 점검 필요
USER_INFO조회가 v2(/v2/users/info)에서 v1(/v1/users/info)로 변경되었습니다.getUserInfoResponse타입이 v1 스키마와 일치하는지, 그리고 쓰기 경로(등록/수정)는 v2를 사용 중인 점이 의도된 분리인지 확인해주세요.읽기/쓰기를 동일 버전으로 통일하거나, 타입을 버전별로 분리하면 유지보수성이 높아집니다.
src/shared/apis/user/user-mutations.ts (1)
45-56: 전체 리로드 제거하고 캐시 무효화만으로 갱신하세요
window.location.reload()는 UX·성능에 불리합니다.invalidateQueries를await로 보장하면 전체 리로드 없이도 반영됩니다. 또한 엔드포인트 상수명을 PUT에 맞춰 정리하세요.- mutationFn: ({ field, value }) => put(END_POINT.POST_EDIT_PROFILE, { field, value }), - onSuccess: async () => { - queryClient.invalidateQueries({ queryKey: USER_KEY.ALL }); - window.location.reload(); - }, + mutationFn: ({ field, value }) => put(END_POINT.PUT_EDIT_PROFILE, { field, value }), + onSuccess: async () => { + await queryClient.invalidateQueries({ queryKey: USER_KEY.ALL }); + },과거 학습에 따르면 heesunee는 출생연도 기반(한국식) 나이 계산을 선호합니다.
field가birthYear일 때, 프런트의 나이 표시/검증 로직과 동기화되는지 한번 점검해주세요.
📜 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 (7)
src/pages/edit-profile/edit-profile.tsx(3 hunks)src/pages/edit-profile/schema/EditProfileSchema.ts(1 hunks)src/shared/apis/user/user-mutations.ts(2 hunks)src/shared/apis/user/user-queries.ts(2 hunks)src/shared/constants/api.ts(1 hunks)src/shared/constants/query-key.ts(1 hunks)src/shared/types/user-types.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
- src/shared/types/user-types.ts
- src/pages/edit-profile/schema/EditProfileSchema.ts
- src/pages/edit-profile/edit-profile.tsx
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#78
File: src/pages/sign-up/utils/age-calculate.ts:1-4
Timestamp: 2025-07-09T09:08:46.371Z
Learning: heesunee는 나이 계산 시 한국식 나이 시스템을 사용하므로, 정확한 생일 기반 계산보다는 출생연도 기준의 간단한 계산 방식을 선호합니다.
🧬 Code graph analysis (2)
src/shared/apis/user/user-queries.ts (4)
src/shared/apis/base/http.ts (1)
get(3-5)src/shared/constants/api.ts (1)
END_POINT(3-43)src/shared/types/user-types.ts (1)
getMatchConditionResponse(52-57)src/shared/constants/query-key.ts (1)
USER_KEY(2-12)
src/shared/apis/user/user-mutations.ts (5)
src/shared/types/base-types.ts (1)
responseTypes(7-10)src/shared/types/user-types.ts (2)
postEditProfileRequest(42-45)postMatchConditionRequest(64-69)src/shared/constants/query-key.ts (1)
USER_KEY(2-12)src/shared/apis/base/http.ts (2)
put(15-17)patch(11-13)src/shared/constants/api.ts (1)
END_POINT(3-43)
⏰ 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: chromatic
🔇 Additional comments (4)
src/shared/constants/api.ts (1)
15-18: POST_EDIT_PROFILE 네이밍 및 API 버전 혼재 정리 필요
POST_EDIT_PROFILE이 실제로 PUT 호출에 사용되고 있어 네이밍과 HTTP 메서드가 불일치합니다.PUT_EDIT_PROFILE로 변경을 권장합니다.GET_USER_INFO는 v1(/v1/users/info),PUT_EDIT_PROFILE는 v2(/v2/users/info) 경로를 사용 중입니다. 버전별 요청/응답 스키마 차이가 있는지 확인 후 일관성 있게 통일하거나 명확히 분리해 주세요.- POST_EDIT_PROFILE: '/v2/users/info', + PUT_EDIT_PROFILE: '/v2/users/info',
getUserInfoResponse와postEditProfileRequest타입이 각각의 버전에 맞게 정의되어 있는지 백엔드 계약과 일치하는지 검증 부탁드립니다.src/shared/apis/user/user-queries.ts (2)
5-5: 타입 임포트 추가 LGTM추가된
getMatchConditionResponse임포트 적절합니다.
22-26: MATCH_CONDITION 쿼리 추가 LGTM키/엔드포인트/타입 매핑이 올바릅니다. 이후 뮤테이션 성공 시 이 키를 무효화하면 UI가 즉시 갱신됩니다.
src/shared/apis/user/user-mutations.ts (1)
9-14: 타입 임포트 추가 LGTM요청 바디 타입 분리가 명확합니다. 위 코멘트대로
EDIT_MATCH_CONDITION의TData만 응답 타입으로 정정하면 일관성이 완성됩니다.
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
1 participant
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.
#️⃣ Related Issue
Closes #325
☀️ New-insight
💎 PR Point
📸 Screenshot
Summary by CodeRabbit