fix: qa 반영 (배너, 홈팝업)

[imddoy]

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

• close #

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

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

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

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

[coderabbitai]

Walkthrough

매칭 멤버 컴포넌트 및 관련 훅에 대한 단계적 개선. 반응형 배너 이미지 소스 추가, 네비게이션 라우팅 개선, UI 스타일 적용, 작업 선호도 조건 로직 단순화.

Changes

코호트 / 파일(들)	변경 요약
반응형 배너 업데이트 src/components/common/Banner/BalanceGameBanner/index.tsx	MB_MID_MEDIA_QUERY 상수 도입 및 picture 요소에 중간 범위 반응형 이미지 소스 추가. BannerImageWrapper에서 미디어 쿼리별 래퍼 제거, 정적 width: 100%와 height: auto로 변경.
매칭 멤버 모달 네비게이션 src/components/matchmember/MatchMemberModal.tsx	useRouter 훅 추가. handleNextStep에서 hasWorkPreference가 true일 때 router.push()를 통해 memberList 페이지로 네비게이션하도록 변경.
멤버 카드 스타일 개선 src/components/matchmember/MemberCard.tsx	Tag 컴포넌트에 fonts.LABEL_12_SB 타이포그래피와 colors.orange400 텍스트 색상 추가.
작업 선호도 이벤트 조건 단순화 src/components/matchmember/hooks/useMatchMemberEvent.ts	canOpenModal 조건에서 hasWorkPreference 요구사항 제거. enableWorkPreferenceEvent만으로 Work Preference 이벤트 활성화.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10분

• 주요 검토 포인트:
  • MatchMemberModal의 라우팅 로직이 올바르게 작동하는지 확인 필요
  • 작업 선호도 조건 단순화로 인한 의도하지 않은 모달 열림 여부 검증
  • 반응형 이미지 쿼리 breakpoint 값이 적절한지 확인

Possibly related PRs

• feat: 멤버 추천 홈팝업 구현 #2062: MatchMemberModal, MemberCard, useMatchMemberEvent에 대한 hasWorkPreference/enableWorkPreferenceEvent 필드 도입으로 이번 PR의 기초 제공.
• fix QA #2077: 작업 선호도 매칭 흐름 및 MatchMemberModal 네비게이션 로직 수정으로 동일한 코드 경로 변경.
• fix: 바뀐 명세 반영( 홈팝업 UX라이팅, subtitle 추가) #2074: 동일한 matchmember 기능의 MemberCard.tsx 수정 및 작업 선호도 관련 UI 로직 조정.

Suggested labels

size/M

Suggested reviewers

• seong-hui
• ljh0608

Poem

🐰 선호도의 조건을 단순히 하고,
라우터를 통해 길을 밝히며,
반응형의 이미지는 우아하게 펼쳐지고,
태그의 색상은 주황빛으로 물드네.
작은 변화들이 모여 큰 조화를 이루니! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	설명이 템플릿 형식만 남아있고 실제 변경 사항, 구현 내용, 이슈 번호, 스크린샷 등 구체적인 내용이 작성되지 않았습니다.	템플릿의 각 섹션을 채워 실제 변경 사항, 구현 방식, 이슈 번호(close #2078), 논의 사항, 스크린샷 등을 명확히 작성해주세요.
Title check	❓ Inconclusive	PR 제목은 '배너, 홈팝업' 수정이라는 일반적인 설명을 제공하지만, 실제 변경사항은 반응형 배너 이미지, 라우터 네비게이션, 태그 스타일링, 그리고 작업 선호도 조건 단순화를 포함하고 있어 구체적이지 않습니다.	제목을 '반응형 배너 이미지 추가 및 QA 피드백 반영' 같이 더 구체적으로 수정하는 것을 고려하세요. 또는 PR 설명에 상세한 변경사항을 추가하세요.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ 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 fix/#2078

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[seong-hui]

lgtm

[github-actions]

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

• Build
• Preview

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

src/components/matchmember/MatchMemberModal.tsx (1)

26-43: 라우팅 분기 시 모달 onClose()도 같이 호출하는 쪽이 안전해요.
라우트 이동만 하면(특히 레이아웃에 모달이 남는 구조면) 오버레이/스크롤락이 잔존할 수 있어서, hasWorkPreference 분기에서 onClose() 후 이동을 권장합니다. 또한 린트가 no-floating-promises 류를 쓰면 void router.push(...) 또는 await 처리도 고려해주세요.

  const handleNextStep = () => {
    if (hasWorkPreference) {
-      router.push(playgroundLink.memberList());
+      onClose();
+      void router.push(playgroundLink.memberList());
    } else {
      setStep((prev) => prev + 1);
    }
  };

src/components/common/Banner/BalanceGameBanner/index.tsx (1)

3-23: MB_MID_MEDIA_QUERY는 공용 상수로 끌어올리고, mid 구간 높이 정책도 한 번만 확인해주세요.
이미 src/styles/mediaQuery.ts에 MB_MID_MEDIA_QUERY가 있어 중복 정의 대신 import가 더 안전하고, 현재 BannerImage가 mid(376~768)에서는 height: 168px가 유지되는데(모바일만 auto) 새 mid 배너가 크롭되어도 괜찮은지 확인이 필요해 보입니다.

Also applies to: 41-55

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 9415de5 and 8dfd9f2.

⛔ Files ignored due to path filters (1)

• public/icons/img/banner_balancegame_mid.png is excluded by !**/*.png

📒 Files selected for processing (4)

• src/components/common/Banner/BalanceGameBanner/index.tsx (2 hunks)
• src/components/matchmember/MatchMemberModal.tsx (2 hunks)
• src/components/matchmember/MemberCard.tsx (1 hunks)
• src/components/matchmember/hooks/useMatchMemberEvent.ts (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

src/components/common/Banner/BalanceGameBanner/index.tsx (1)

src/styles/mediaQuery.ts (2)

• MB_MID_MEDIA_QUERY (18-18)
• MB_BASE_MEDIA_QUERY (17-17)

⏰ 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 (2)

src/components/matchmember/MemberCard.tsx (1)

167-180: Tag 스타일 변경은 순수 UI 변경으로 문제 없어 보여요.
${fonts.LABEL_12_SB};와 colors.orange400 적용이 명확하고, 기존 구조/레이아웃에 부작용 없어 보입니다.

src/components/matchmember/hooks/useMatchMemberEvent.ts (1)

48-52: hasWorkPreference 조건 제거로 “기존 입력자”도 모달 대상이 될 수 있어요—플로우 정합성만 확인해주세요.
enableWorkPreferenceEvent가 true인 경우, 이미 hasWorkPreference가 true여도 모달이 열릴 수 있으니(의도라면 OK) 실제 UX가 “모달 → 다음 단계에서 리스트로 라우팅” 시나리오와 맞는지 한 번만 점검 부탁드립니다.

[github-actions]

🚀 프리뷰 배포 확인하기 🚀

https://fed76826.sopt-internal-dev.pages.dev