Skip to content

fix : 피드 진입 시 지도 핀 말풍선 표시 및 재생 파형 그라데이션 - #279

Merged
kim3360 merged 2 commits into
developfrom
feat/278-feed-map-pin-message-bubble
Aug 9, 2026
Merged

kim3360 merged 2 commits into
developfrom
feat/278-feed-map-pin-message-bubble

Conversation

@kim3360

@kim3360 kim3360 commented Aug 9, 2026

Copy link
Copy Markdown
Member

변경 내용

  • 피드에서 지도로 진입 시 해당 핀 말풍선(닉네임·소개·미리듣기) 표시
  • 말풍선 노출을 위해 핀 위치로 줌 21 flyTo
  • 피드 진입 시 장소 검색 InfoWindow(흰 카드) 비노출
  • 재생 중 파형 아이콘에 재생 버튼과 동일한 네온 그라데이션 적용

관련 이슈

Closes #278

변경 사항

  • 새로운 기능 추가
  • 버그 수정
  • UI/UX 개선
  • 리팩토링
  • 문서 업데이트

테스트

  • 브라우저에서 정상 동작 확인
  • 기존 기능에 영향 없음 확인

스크린샷 (UI 변경시)

image

체크리스트

  • 코드가 정상적으로 동작합니다
  • 새로운 에러나 경고가 없습니다
  • 필요시 문서를 업데이트했습니다
  • 코드 포맷팅을 실행했습니다 (pnpm format)
  • ESLint 검사를 통과했습니다 (pnpm lint:fix)

코드 품질 확인
PR 제출 전에 다음 명령어를 실행하여 코드 품질을 확인해주세요:

pnpm lint:fix
pnpm format

Summary by CodeRabbit

  • 새로운 기능

    • 피드에서 장소로 진입하면 해당 지도 핀이 자동으로 중심에 표시되고 확대됩니다.
    • 일반 장소 선택 시 기존처럼 선택한 위치로 이동합니다.
    • 재생 중인 음성 메시지 아이콘이 네온 그라디언트로 표시됩니다.
  • 버그 수정

    • 피드의 장소 정보가 누락되거나 잘못된 경우에도 지도와 관련 버튼이 안정적으로 표시됩니다.
    • 유효한 장소 정보가 있을 때만 곡 상세 보기 버튼이 노출됩니다.

@kim3360
kim3360 requested review from JeongGyul, L0521 and onebone August 9, 2026 18:34
@kim3360 kim3360 self-assigned this Aug 9, 2026
@coderabbitai

coderabbitai Bot commented Aug 9, 2026

Copy link
Copy Markdown

Review Change Stack

📝 Walkthrough

Walkthrough

피드에서 지도에 진입하면 해당 핀의 말풍선을 표시하고 PIN_FOCUS_ZOOM까지 확대합니다. 장소 검색 InfoWindow는 숨깁니다. 재생 중인 사운드 파형에는 네온 그라디언트 스타일을 적용합니다.

Changes

피드 지도 진입

Layer / File(s) Summary
피드 핀 데이터 정규화
src/features/pin/types.ts, src/features/pin/hooks/useOpenPinPlaceOnMap.ts, src/features/pin/components/PinListSheet.tsx
placeTrackId를 선택 속성으로 변경했습니다. 유효한 숫자 ID만 정규화하고 mapFocusPinfocusedFeedPin에 연결합니다.
지도 포커스 이동
src/features/map/hooks/useMapPinOverlays.ts, src/features/map/components/MapViewer.tsx, src/pages/MapPage.tsx
PIN_FOCUS_ZOOM을 내보냅니다. MapViewerHandleflyTo를 추가합니다. 피드 진입 시 해당 좌표로 이동하고 장소 검색 InfoWindow를 숨깁니다.
재생 파형 스타일
src/features/map/components/MapPinMessageBox.tsx, src/features/map/components/MapPinMessageBox.css
재생 상태에 따라 파형 래퍼에 gc-wave--playing을 적용합니다. 재생 중에는 네온 그라디언트 마스크를 사용합니다.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  participant 피드
  participant useOpenPinPlaceOnMap
  participant MapPage
  participant MapViewer
  피드->>useOpenPinPlaceOnMap: 장소와 placeTrackId 전달
  useOpenPinPlaceOnMap->>MapPage: mapFocusPin 반환
  MapPage->>MapViewer: flyTo 좌표와 PIN_FOCUS_ZOOM 전달
  MapViewer-->>MapPage: 지도 이동 완료
Loading

Possibly related PRs

Suggested labels: enhancement

Suggested reviewers: l0521, onebone, jeonggyul

🚥 Pre-merge checks | ✅ 4
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed PR 제목은 피드 진입 시 지도 핀 말풍선과 재생 파형 그라데이션 변경을 정확히 요약합니다.
Linked Issues check ✅ Passed [278]은 mapFocusPin 설정, 줌 21 이동, 검색 InfoWindow 숨김, 재생 파형 그라데이션을 요구하며 모든 변경이 구현되었습니다.
Out of Scope Changes check ✅ Passed 모든 변경은 [278]의 피드-지도 전환과 재생 파형 UI 요구사항을 지원하며 관련 범위를 벗어난 변경은 없습니다.
✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/278-feed-map-pin-message-bubble

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.

@github-actions

github-actions Bot commented Aug 9, 2026

Copy link
Copy Markdown

https://pr-279.plimap.kr

@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: 3

🤖 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/map/components/MapPinMessageBox.css`:
- Around line 85-86: MapPinMessageBox.css의 해당 스타일 선언 블록에서 -webkit-mask 선언 바로 앞에
빈 줄을 추가하여 declaration-empty-line-before Stylelint 규칙을 만족시키세요.

In `@src/features/pin/hooks/useOpenPinPlaceOnMap.ts`:
- Around line 134-137: Update the resolvedPlaceTrackId validation in the
placeTrackId resolution logic to accept only positive integer IDs, using
Number.isInteger(...) and a greater-than-zero check. Preserve undefined for
zero, negative, fractional, and invalid numeric-string values before they reach
findFocusedPlaceTrackId() and the detail CTA.

In `@src/pages/MapPage.tsx`:
- Around line 215-221: Update the feed-entry UI branches to consistently use
isFeedMapEntry, including isRegisterButtonVisible and onFullPageBack. Ensure
mapFocusPin-only entries are treated like all other feed entries: hide the
registration button and avoid navigating back to the place-search screen.
🪄 Autofix

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 Plus

Run ID: cbb299e3-4e4d-4763-bf10-8c8f7f3ce8b4

📥 Commits

Reviewing files that changed from the base of the PR and between a83d74e and ac329b3.

📒 Files selected for processing (8)
  • src/features/map/components/MapPinMessageBox.css
  • src/features/map/components/MapPinMessageBox.tsx
  • src/features/map/components/MapViewer.tsx
  • src/features/map/hooks/useMapPinOverlays.ts
  • src/features/pin/components/PinListSheet.tsx
  • src/features/pin/hooks/useOpenPinPlaceOnMap.ts
  • src/features/pin/types.ts
  • src/pages/MapPage.tsx

Comment thread src/features/map/components/MapPinMessageBox.css
Comment thread src/features/pin/hooks/useOpenPinPlaceOnMap.ts Outdated
Comment thread src/pages/MapPage.tsx
@kim3360

kim3360 commented Aug 9, 2026

Copy link
Copy Markdown
Member Author

@coderabbitai review

@kim3360

kim3360 commented Aug 9, 2026

Copy link
Copy Markdown
Member Author

@coderabbitai full review

@kim3360

kim3360 commented Aug 9, 2026

Copy link
Copy Markdown
Member Author

@coderabbitai resolve

@kim3360 kim3360 closed this Aug 9, 2026
@kim3360
kim3360 temporarily deployed to preview-maintenance August 9, 2026 19:27 — with GitHub Actions Inactive
@kim3360 kim3360 reopened this Aug 9, 2026
@coderabbitai

coderabbitai Bot commented Aug 9, 2026

Copy link
Copy Markdown
✅ Action performed

Comments resolved and changes approved.

@kim3360
kim3360 merged commit 381fb85 into develop Aug 9, 2026
7 checks passed
@kim3360
kim3360 temporarily deployed to preview-maintenance August 9, 2026 19:28 — with GitHub Actions Inactive

This branch was successfully deployed

1 active and 1 inactive deployments
preview-maintenance c1d0819d Deployed Aug 9, 2026 by kim3360 via cleanup #458
preview c1d0819d Deployed Aug 9, 2026 by kim3360 via deploy #451
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

피드 진입 시 지도 핀 말풍선 표시 및 재생 파형 그라데이션

2 participants