Skip to content

fix: 바뀐 명세 반영( 홈팝업 UX라이팅, subtitle 추가)#2074

Merged
seong-hui merged 6 commits intodevelopfrom
feat/#2072
Dec 12, 2025
Merged

fix: 바뀐 명세 반영( 홈팝업 UX라이팅, subtitle 추가)#2074
seong-hui merged 6 commits intodevelopfrom
feat/#2072

Conversation

@imddoy
Copy link
Contributor

@imddoy imddoy commented Dec 12, 2025

🤫 쉿, 나한테만 말해줘요. 이슈넘버

🧐 어떤 것을 변경했어요~?

멤버 궁합에서 사용자에게 본인의 작업 스타일을 볼 수 있도록 subtitle을 추가했어요

🤔 그렇다면, 어떻게 구현했어요~?

❤️‍🔥 당신이 생각하는 PR포인트, 내겐 매력포인트.

📸 스크린샷, 없으면 이것 참,, 섭섭한데요?

@coderabbitai
Copy link

coderabbitai bot commented Dec 12, 2025

Walkthrough

새 API 엔드포인트 및 React Query 훅으로 현재 사용자의 작업 스타일을 조회하고, 해당 데이터를 해시태그로 변환해 매칭 리스트 헤더에 표시하도록 UI를 리팩토링하며 추천 호출 에러 처리를 추가했습니다.

Changes

Cohort / File(s) 변경 요약
API 엔드포인트 및 훅
src/api/endpoint/members/getWorkPreference.ts
getMyWorkPreference 엔드포인트 추가 (GET api/v1/members/work-preference) 및 useGetMyWorkPreference React Query 훅 추가. 서버 응답 스키마에 workPreference(ideationStyle, workTime, communicationStyle, workPlace, feedbackStyle) 포함.
유틸리티 및 상수
src/components/matchmember/constant.ts
convertWorkPreferenceToHashtags(preference: WorkPreferenceType): string 함수 추가 — WorkPreferenceType 값을 해시태그 문자열로 변환.
컴포넌트 에러 처리
src/components/matchmember/MemberCard.tsx
useGetRecommendations 호출의 isError/error 소비 추가, Axios 에러에서 HTTP 상태를 추출해 400은 특정 메시지로 매핑하고 기타는 일반 실패 토스트 표시(토스트 훅 사용).
UI 텍스트 변경
src/components/matchmember/MatchContent.tsx
Step 1 버튼 레이블 텍스트 변경: "5초만에 소울메이트 찾기""앱잼 소울메이트 보러가기".
헤더/리스트 리팩토링
src/components/members/main/MemberList/WorkPreferenceMatchedMemberList.tsx
MyPreferenceSubTitle 컴포넌트 추가(작업 스타일 조회 및 해시태그 변환), 헤더 구조 재구성(TitleContainer, StyledRefreshIcon 등), 모바일/데스크탑 툴팁 및 타이포그래피 조정, 모달 호출 준비 주석 추가.

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
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

  • 주의깊게 검토할 파일/영역:
    • src/components/members/main/MemberList/WorkPreferenceMatchedMemberList.tsx — UI/스타일 대대적 변경 및 새로운 서브컴포넌트 통합
    • src/api/endpoint/members/getWorkPreference.ts — 응답 스키마(리터럴 유니언 필드)와 타입 정확성
    • src/components/matchmember/MemberCard.tsx — Axios 에러 처리 및 상태 코드 기반 메시지 매핑

Possibly related PRs

Suggested reviewers

  • seong-hui
  • ljh0608

Poem

🐰 깡충깡충 코드 밭을 뛰며,
새 엔드포인트 한 뿌리 심었네.
해시태그로 내 스타일을 말하고,
토스트로 에러도 살짝 알리네. ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 inconclusive)
Check name Status Explanation Resolution
Linked Issues check ❓ Inconclusive 이슈 #2072는 상세한 요구사항이 제공되지 않았으나, PR 변경사항(getMyWorkPreference 엔드포인트, WorkPreferenceMatchedMemberList 업데이트)이 '내 작업스타일 조회' 주제와 일치함. 이슈 #2072에 상세한 요구사항, 수락 기준(Acceptance Criteria), 또는 구현 지침이 추가되어야 PR 요구사항 충족 여부를 명확히 평가할 수 있습니다.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed 제목은 PR의 주요 변경사항(홈팝업 UX 라이팅, subtitle 추가)을 반영하고 있으며, 실제 코드 변경(새 API 엔드포인트, UI 업데이트, 에러 처리 추가)과 부분적으로 관련됨.
Out of Scope Changes check ✅ Passed PR의 모든 변경사항(API 엔드포인트 추가, UI 컴포넌트 업데이트, 에러 처리)이 '내 작업스타일 조회' 기능 구현 범위 내에 있는 것으로 보임.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description check ✅ Passed PR 설명이 변경 사항과 관련이 있습니다. 사용자가 멤버 궁합에서 작업 스타일 subtitle을 추가했다고 명시했으며, 이는 raw_summary의 변경 내용과 일치합니다.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch feat/#2072

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@github-actions github-actions bot requested a review from seong-hui December 12, 2025 18:31
@imddoy imddoy requested a review from ljh0608 December 12, 2025 18:32
@github-actions
Copy link

github-actions bot commented Dec 12, 2025

✨✨ 스토리북으로 확인하기 ✨✨

@github-actions
Copy link

github-actions bot commented Dec 12, 2025

🚀 프리뷰 배포 확인하기 🚀

https://6745f43c.sopt-internal-dev.pages.dev

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.tsQUESTIONS와 값이 중복되어 있어 유지보수 시 불일치가 발생할 수 있습니다.

   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

📥 Commits

Reviewing files that changed from the base of the PR and between 8dbe3d8 and 82b9285.

📒 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 훅과 유틸리티 함수를 잘 활용했습니다.

Copy link
Member

@seong-hui seong-hui left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat: 내 작업스타일 조회

2 participants