Conversation
Walkthrough새 API 엔드포인트 및 React Query 훅으로 현재 사용자의 작업 스타일을 조회하고, 해당 데이터를 해시태그로 변환해 매칭 리스트 헤더에 표시하도록 UI를 리팩토링하며 추천 호출 에러 처리를 추가했습니다. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant UI as WorkPreferenceMatchedMemberList (컴포넌트)
participant Hook as useGetMyWorkPreference (React Query)
participant API as GET /api/v1/members/work-preference
participant Util as convertWorkPreferenceToHashtags
UI->>Hook: useQuery(['getMyWorkPreference']) 호출
Hook->>API: GET 요청
API-->>Hook: 200 + { workPreference: {...} } 응답
Hook-->>UI: data 반환 (loading false)
UI->>Util: convertWorkPreferenceToHashtags(data.workPreference)
Util-->>UI: "#태그1 `#태그2` ..." 반환
UI->>UI: SubTitle 렌더링 (해시태그 표시)
alt API 오류
Hook-->>UI: error, isError
UI->>UI: axios 에러 상태 추출 및 토스트 표시
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 inconclusive)
✅ Passed checks (4 passed)
✨ 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 |
|
🚀 프리뷰 배포 확인하기 🚀 |
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (3)
src/components/matchmember/constant.ts (1)
65-72: 타입과 런타임 검사 불일치
WorkPreferenceType은 필수 객체 타입으로 정의되어 있어!preference조건이 타입 시스템과 일치하지 않습니다. 방어적 코딩은 좋지만, 타입을 명시적으로 업데이트하거나 호출부에서 null 체크를 수행하는 것이 더 명확합니다.-export const convertWorkPreferenceToHashtags = (preference: WorkPreferenceType): string => { +export const convertWorkPreferenceToHashtags = (preference: WorkPreferenceType | null | undefined): string => { if (!preference) return ''; const tags = Object.values(preference); const hashtagString = tags.map((tag) => `#${tag}`).join(' '); return hashtagString; };src/api/endpoint/members/getWorkPreference.ts (1)
11-19: 스키마 정의 개선 제안
z.union([z.literal(...), z.literal(...)])보다z.enum([...])사용이 더 간결합니다. 또한,constant.ts의QUESTIONS와 값이 중복되어 있어 유지보수 시 불일치가 발생할 수 있습니다.serverResponseScheme: z.object({ workPreference: z.object({ - ideationStyle: z.union([z.literal('즉흥'), z.literal('숙고')]), - workTime: z.union([z.literal('아침'), z.literal('밤')]), - communicationStyle: z.union([z.literal('몰아서'), z.literal('나눠서')]), - workPlace: z.union([z.literal('카공'), z.literal('집콕')]), - feedbackStyle: z.union([z.literal('직설적'), z.literal('돌려서')]), + ideationStyle: z.enum(['즉흥', '숙고']), + workTime: z.enum(['아침', '밤']), + communicationStyle: z.enum(['몰아서', '나눠서']), + workPlace: z.enum(['카공', '집콕']), + feedbackStyle: z.enum(['직설적', '돌려서']), }), }),src/components/members/main/MemberList/WorkPreferenceMatchedMemberList.tsx (1)
120-120: TODO 주석 확인 필요작업선택 모달 오픈 로직이 TODO로 남아있습니다. 현재 PR 범위에서 구현 예정인지 확인이 필요합니다.
이 기능 구현이 필요하시면 도움을 드릴 수 있습니다. 별도 이슈로 추적하시겠습니까?
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
src/api/endpoint/members/getWorkPreference.ts(1 hunks)src/components/matchmember/MatchContent.tsx(1 hunks)src/components/matchmember/MemberCard.tsx(1 hunks)src/components/matchmember/constant.ts(1 hunks)src/components/members/main/MemberList/WorkPreferenceMatchedMemberList.tsx(5 hunks)
🧰 Additional context used
🧬 Code graph analysis (3)
src/api/endpoint/members/getWorkPreference.ts (1)
src/api/typedAxios.ts (1)
createEndpoint(12-58)
src/components/members/main/MemberList/WorkPreferenceMatchedMemberList.tsx (3)
src/api/endpoint/members/getWorkPreference.ts (1)
useGetMyWorkPreference(22-27)src/components/matchmember/constant.ts (1)
convertWorkPreferenceToHashtags(65-72)src/styles/mediaQuery.ts (1)
MOBILE_MEDIA_QUERY(12-12)
src/components/matchmember/MemberCard.tsx (1)
src/api/endpoint/members/getRecommendations.ts (1)
useGetRecommendations(42-47)
⏰ 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). (2)
- GitHub Check: chromatic-deploy
- GitHub Check: build-app / build
🔇 Additional comments (3)
src/components/matchmember/MatchContent.tsx (1)
57-59: LGTM!UX 문구가 명세에 맞게 업데이트되었습니다.
src/api/endpoint/members/getWorkPreference.ts (1)
22-27: LGTM!
useGetRecommendations와 동일한 패턴으로 훅이 구현되어 있습니다. 코드베이스 일관성이 잘 유지되었습니다.src/components/members/main/MemberList/WorkPreferenceMatchedMemberList.tsx (1)
21-29: LGTM!
MyPreferenceSubTitle컴포넌트가 로딩 상태와 데이터 유무를 적절히 처리하고 있습니다. 새로운 API 훅과 유틸리티 함수를 잘 활용했습니다.
🤫 쉿, 나한테만 말해줘요. 이슈넘버
🧐 어떤 것을 변경했어요~?
멤버 궁합에서 사용자에게 본인의 작업 스타일을 볼 수 있도록 subtitle을 추가했어요
🤔 그렇다면, 어떻게 구현했어요~?
❤️🔥 당신이 생각하는 PR포인트, 내겐 매력포인트.
📸 스크린샷, 없으면 이것 참,, 섭섭한데요?