Skip to content

[Fix] #85 바텀시트 프로필카드에 필요한 정보 렌더링하도록 수정 - #86

Merged
hdg0116 merged 3 commits into
developfrom
fix/#85-룸메이트-요청-바텀시트-프로필카드-에러-해결
May 30, 2026

Hidden character warning

The head ref may contain hidden characters: "fix/#85-\ub8f8\uba54\uc774\ud2b8-\uc694\uccad-\ubc14\ud140\uc2dc\ud2b8-\ud504\ub85c\ud544\uce74\ub4dc-\uc5d0\ub7ec-\ud574\uacb0"
Merged

hdg0116 merged 3 commits into
developfrom
fix/#85-룸메이트-요청-바텀시트-프로필카드-에러-해결

Conversation

@hdg0116

@hdg0116 hdg0116 commented May 30, 2026

Copy link
Copy Markdown
Collaborator

🗒️ PR 타입

  • 기능 추가
  • 기능 삭제
  • 버그 수정
  • 코드 리팩토링
  • 문서 수정
  • 의존성, 환경 변수, 빌드 관련 코드 업데이트

🔗 관련 이슈


📌 작업사항

  • 요청 보내기 바텀시트 프로필 카드의 라이프스타일 태그를 취침시간·청소 주기·흡연여부 3개 고정 항목으로 변경
  • 취침시간은 {값} 취침, 청소 주기는 {값} 청소 형식으로 표시, 흡연여부는 - 값 그대로 표시
  • 라이프스타일 태그 데이터가 없을 경우 태그 영역 미렌더링 처리
  • 요청 보내기 바텀시트 프로필 카드에 프로필 이미지 표시 추가
  • 채팅방 목록 비었을 때 문구 위치 버그 해결

📸 스크린샷

스크린샷 2026-05-31 052942

📣 기타사항 및 코멘트

라이프스타일 태그는 따로 받아오는 곳이 없어서 그냥 프로필 조회 API 쓰고 값만 가공했습니다! 랜덤으로 가져오기엔 너무 변수가 많을 것 같아서 취침시간, 청소 주기, 흡연 여부 3가지 항목만 보이도록 구현했습니다!


✅ 체크리스트

  • 로컬에서 빌드 및 테스트 완료
  • Label 지정 완료
  • 리뷰어 지정 완료
  • 코드 리뷰 반영 완료

Summary by CodeRabbit

릴리스 노트

  • New Features

    • 채팅 상세 페이지에서 프로필 이미지 표시 추가
  • Bug Fixes

    • 라이프스타일 태그가 없을 때 표시 오류 개선
  • Style

    • 채팅 목록 페이지 레이아웃 스크롤 동작 개선

Review Change Stack

@hdg0116
hdg0116 requested a review from nabbang6 May 30, 2026 20:49
@hdg0116 hdg0116 self-assigned this May 30, 2026
@hdg0116 hdg0116 added the 🐞 Fix 버그 해결 label May 30, 2026
@vercel

vercel Bot commented May 30, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
bangjjack-frontend-dev Ready Ready Preview, Comment May 30, 2026 9:26pm

@coderabbitai

coderabbitai Bot commented May 30, 2026

Copy link
Copy Markdown

Warning

Review limit reached

@hdg0116, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 23 minutes and 19 seconds. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: b4208e52-51f7-4835-93d7-839eb2a26deb

📥 Commits

Reviewing files that changed from the base of the PR and between 0f1b104 and b002c62.

📒 Files selected for processing (1)
  • src/features/chat/hooks/useChatDetailPage.ts

Walkthrough

PR은 채팅 상세 페이지의 프로필 카드 렌더링을 개선하기 위해 사용자 프로필 데이터를 통합합니다. 라이프스타일 라벨 상수를 재-export하고, 채팅 상세 훅에서 파트너 프로필을 조회하여 프로필 이미지, 연령, 학과, 생활습관 태그를 매핑하며, 초대 시트 컴포넌트를 업데이트하여 데이터를 렌더링하고, 채팅 목록 페이지의 레이아웃을 조정합니다.

Changes

Chat Detail Profile Data and Rendering

Layer / File(s) Summary
Lifestyle label constants export
src/features/board/utils/index.ts
BEDTIME_LABEL, CLEANING_CYCLE_LABEL, SMOKING_LABEL을 mapLifestyleChecklistToEntries에서 재-export하여 라벨 매핑을 다른 모듈에서 사용 가능하게 합니다.
Chat detail enrichment with user profile
src/features/chat/hooks/useChatDetailPage.ts
useChatDetailPage 훅이 useUserProfile을 통해 파트너 프로필을 조회하고, profileImage, age, department를 프로필에서 가져온 값으로 재구성하며, lifestyleTags를 라이프스타일 라벨 상수로 매핑합니다(폴백 포함). 리다이렉트 조건도 hasChatDetail 불린값 기반으로 갱신됩니다.
Chat roommate invite sheet profile display updates
src/features/chat/components/chat-detail/ChatRoommateInviteSheet.tsx, src/features/chat/sections/chat-detail/ChatInputSection.tsx
ChatRoommateInviteSheetProps에 profileImage를 추가하고 lifestyleTags를 선택적으로 변경합니다. 컴포넌트는 profileImage를 ProfileAvatar에 전달하고, lifestyleTags는 존재하고 항목이 있을 때만 렌더링합니다. ChatInputSection에서 enriched profileImage를 시트에 전달합니다.
Chat list page layout styling adjustments
src/pages/chat/ChatListPage.tsx
에러/빈 상태 컨테이너를 flex h-full로, 페이지 래퍼를 flex h-full로, 탭 패널 컨테이너를 flex flex-1 flex-col overflow-y-auto로 변경하여 레이아웃 계층 구조와 세로 스크롤 동작을 명확히 합니다.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

  • Bangjjack/Bangjjack-Frontend#55: 메인 PR의 chatDetail 훅/컴포넌트 업데이트가 PR #55에서 도입된 채팅 기능 구현과 동일한 파일들을 직접 수정합니다.
  • Bangjjack/Bangjjack-Frontend#79: 메인 PR에서 SMOKING_LABEL 등의 라벨을 재-export하는 것이 PR #79처럼 다른 보드 컴포넌트에서 라벨을 사용하는 변경과 직결됩니다.
  • Bangjjack/Bangjjack-Frontend#66: 메인 PR의 useChatDetailPage와 채팅 UI에서 profileImage와 lifestyleTags를 연동하는 변경이 PR #66의 채팅 도메인 타입/컴포넌트 구조와 맞물립니다.

Suggested reviewers

  • nabbang6
🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed PR 제목이 이슈 #85와 바텀시트 프로필카드 정보 렌더링이라는 주요 변경사항을 명확하게 반영하고 있습니다.
Linked Issues check ✅ Passed PR 변경사항이 이슈 #85의 바텀시트 프로필카드 렌더링 문제 해결 목표를 충족합니다. 라이프스타일 태그 표시, 프로필 이미지 추가, 데이터 부재 시 처리가 구현되었습니다.
Out of Scope Changes check ✅ Passed 모든 변경사항이 이슈 #85의 범위 내에 있습니다. 바텀시트 프로필카드 관련 변경과 채팅 목록 빈 상태 레이아웃 버그 수정이 이슈에 나열된 작업사항과 일치합니다.
Description check ✅ Passed PR 설명이 대부분의 필수 섹션을 포함하고 있으며, PR 타입(버그 수정), 관련 이슈, 상세한 작업사항, 스크린샷, 추가 코멘트가 모두 작성되어 있습니다.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/#85-룸메이트-요청-바텀시트-프로필카드-에러-해결

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

Copy link
Copy Markdown

✅ CI 검증 결과

TypeScript: 통과
ESLint: 통과
Prettier: 통과
Build: 통과

🎉 모든 검증을 통과했습니다.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Actionable comments posted: 1

🧹 Nitpick comments (1)
src/features/chat/hooks/useChatDetailPage.ts (1)

127-127: ⚡ Quick win

?? 0로 인한 잘못된 요청 가능성은 낮음 (useUserProfile 내부 enabled 가드 있음).

useUserProfileenabled: !!userIduserId=0일 때 쿼리 실행을 막습니다. 다만 queryKeyprofile(0)로 잡힐 수 있어(실행은 안 되더라도) 더 깔끔하게 하려면 baseChatDetail?.id가 있을 때만 값 전달/쿼리키 설계 개선을 권장합니다.

🤖 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/features/chat/hooks/useChatDetailPage.ts` at line 127, The code passes 0
via "?? 0" to useUserProfile which can produce an unwanted queryKey like
"profile(0)"; change the call to pass undefined when there's no id (e.g.
useUserProfile(baseChatDetail?.id) or baseChatDetail?.id ?? undefined) and/or
update useUserProfile's queryKey construction to only include the userId when
it's defined (ensure useUserProfile and its queryKey check for undefined and
keep enabled: !!userId as-is). This ensures no spurious profile(0) queryKey
while keeping the enabled guard intact.
🤖 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/features/chat/hooks/useChatDetailPage.ts`:
- Line 147: Remove the debug console.log in useChatDetailPage that prints
user-identifying data (the line logging age, department, profileImage,
lifestyleTags); either delete it or replace with a safe, non-production-only
logging mechanism (e.g., guard with NODE_ENV !== 'production' and redact PII) so
no personal data is emitted to production logs. Ensure the modification targets
the console.log("[useChatDetailPage]", { age, department, profileImage,
lifestyleTags }) statement inside the useChatDetailPage hook.

---

Nitpick comments:
In `@src/features/chat/hooks/useChatDetailPage.ts`:
- Line 127: The code passes 0 via "?? 0" to useUserProfile which can produce an
unwanted queryKey like "profile(0)"; change the call to pass undefined when
there's no id (e.g. useUserProfile(baseChatDetail?.id) or baseChatDetail?.id ??
undefined) and/or update useUserProfile's queryKey construction to only include
the userId when it's defined (ensure useUserProfile and its queryKey check for
undefined and keep enabled: !!userId as-is). This ensures no spurious profile(0)
queryKey while keeping the enabled guard intact.
🪄 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

Run ID: 36c975e8-57b6-438f-8c88-d8c3114775db

📥 Commits

Reviewing files that changed from the base of the PR and between a8e1142 and 0f1b104.

📒 Files selected for processing (5)
  • src/features/board/utils/index.ts
  • src/features/chat/components/chat-detail/ChatRoommateInviteSheet.tsx
  • src/features/chat/hooks/useChatDetailPage.ts
  • src/features/chat/sections/chat-detail/ChatInputSection.tsx
  • src/pages/chat/ChatListPage.tsx

Comment thread src/features/chat/hooks/useChatDetailPage.ts Outdated
@github-actions

Copy link
Copy Markdown

✅ CI 검증 결과

TypeScript: 통과
ESLint: 통과
Prettier: 통과
Build: 통과

🎉 모든 검증을 통과했습니다.

@hdg0116
hdg0116 merged commit 4a6b4d1 into develop May 30, 2026
4 checks passed
@hdg0116
hdg0116 deleted the fix/#85-룸메이트-요청-바텀시트-프로필카드-에러-해결 branch May 30, 2026 21:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

🐞 Fix 버그 해결

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Fix] #85 룸메이트 요청 바텀시트 프로필 카드 렌더링 문제 해결

1 participant