Skip to content

fix: 핀 등록 QA 이슈 수정 - #336

Merged
onebone merged 7 commits into
developfrom
feat/335-pin-registration-qa-fixes
Aug 12, 2026
Merged

onebone merged 7 commits into
developfrom
feat/335-pin-registration-qa-fixes

Conversation

@onebone

@onebone onebone commented Aug 12, 2026 •

Copy link
Copy Markdown
Contributor

변경 내용

핀 등록 QA 동작을 수정합니다.

  • 검색 및 뒤로가기 상태 유지
  • 지도 선택·500m 검증·기존 핀 표시 개선
  • 소개 필수 안내 및 등록 완료 피드백 개선

관련 이슈

Closes #335

변경 사항

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

테스트

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

스크린샷 (UI 변경시)

Figma 비교 화면과 라이브 데모로 확인했습니다.

체크리스트

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

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

pnpm lint:fix
pnpm format

Summary by CodeRabbit

  • 새로운 기능
    • 홈 화면의 인기·저장 장소를 선택하면 상세 정보를 확인한 뒤 지도에서 바로 열 수 있습니다.
    • 장소 검색어가 등록 과정에서도 유지되며, 검색 또는 지도에서 선택한 경로로 확인 화면에서 돌아갈 수 있습니다.
    • 지도 핀이 흐림 상태로 표시될 때 이미지와 북마크 색상이 흐림 스타일로 변경됩니다.
  • 개선 사항
    • 핀 등록 취소·완료 흐름이 간소화되었습니다.
    • 소개 입력 오류가 토스트 대신 입력창에 표시되며, 핀 생성 후 해당 장소가 지도에 자동 선택됩니다.

@coderabbitai

coderabbitai Bot commented Aug 12, 2026 •

Copy link
Copy Markdown

Review Change Stack

Warning

Review limit reached

@onebone, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 14 minutes

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

How can I continue?

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.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: b7e50d7a-b0d9-4089-a556-cee1e25202c0

📥 Commits

Reviewing files that changed from the base of the PR and between 3782cf1 and e12c341.

📒 Files selected for processing (13)
  • src/components/skeletons/HomeSkeleton.tsx
  • src/components/ui/SearchInput.tsx
  • src/features/map/components/MapPinMarker.tsx
  • src/features/map/components/MapViewer.tsx
  • src/features/map/hooks/useMapPinOverlays.ts
  • src/features/map/utils/mapPinMarker.ts
  • src/features/notification/components/NotificationRow.tsx
  • src/layouts/PinRegistrationLayout.tsx
  • src/pages/HomePage.tsx
  • src/pages/MapPage.tsx
  • src/pages/MyNotificationsPage.tsx
  • src/pages/PinPlaceSearchPage.tsx
  • src/pages/SongDetailPage.tsx
📝 Walkthrough

Walkthrough

지도 핀 흐림 상태를 추가했다. 핀 등록 상태에 검색어와 확인 출처를 저장한다. 홈과 곡 상세 화면에서 지도 선택 상태를 설정한다. 500m 반경 검사를 클라이언트 계산에서 제거한다. 알림 팔로우 상태 처리를 알림 데이터 기반으로 변경한다.

Changes

지도 핀 표시

Layer / File(s) Summary
지도 핀 흐림 상태 전달 및 렌더링
src/features/map/components/MapPinMarker.tsx, src/features/map/components/MapViewer.tsx, src/features/map/hooks/useMapPinOverlays.ts, src/features/map/utils/mapPinMarker.ts, src/layouts/PinRegistrationLayout.tsx
areMapPinsDimmed를 마커까지 전달한다. 흐림 상태에서 클릭 핸들러를 제거하고 전용 핀 색상과 배경을 사용한다. 커버 이미지는 렌더링하지 않는다.

핀 등록 흐름

Layer / File(s) Summary
등록 상태와 검색어 보존
src/store/pinCreationStore.ts, src/features/pin/components/PinPlaceSearch.tsx, src/pages/PinRegisterEntryPage.tsx
진입 검색어와 확인 출처를 저장한다. 지도 선택 상태만 초기화하고 검색어 변경을 전역 상태에 반영한다.
등록 경로와 반경 처리
src/layouts/PinRegistrationLayout.tsx, src/pages/PinRegisterPage.tsx, src/pages/PinRegisterSearchPage.tsx, src/pages/PinLocationConfirmPage.tsx
지도와 검색 진입 출처를 저장한다. 확인 이전 이동 경로를 출처에 따라 선택한다. 클라이언트의 500m 반경 상태 계산과 완료 제한을 제거한다.

지도 장소 이동

Layer / File(s) Summary
곡 상세 핀 생성과 지도 선택
src/pages/SongDetailPage.tsx
소개 입력 오류를 인라인으로 표시한다. 핀 생성 성공 후 생성된 핀과 장소를 지도 선택 상태에 저장하고 /app으로 이동한다.
홈 장소 상세 조회와 지도 이동
src/pages/HomePage.tsx
인기 장소와 저장 장소의 상세 정보를 조회한다. 조회 결과를 지도 선택 상태에 저장하고 /app으로 이동한다. 중복 실행과 조회 실패를 처리한다.

알림 상태 표시

Layer / File(s) Summary
알림 팔로우 상태 처리
src/features/notification/types.ts, src/features/notification/components/NotificationRow.tsx, src/features/notification/queries/useNotifications.ts, src/pages/MyNotificationsPage.tsx
알림에 팔로우 상태와 장소 정보를 추가한다. 알림 행은 알림 데이터로 버튼 상태를 처리한다. 맞팔로우 성공 후 목록을 다시 조회한다.
홈 및 검색 UI 조정
src/components/skeletons/HomeSkeleton.tsx, src/components/ui/SearchInput.tsx
홈 알림 아이콘 크기와 래퍼를 조정한다. friend 검색 입력의 배경색과 포커스 스타일을 변경한다.

Estimated code review effort: 4 (Complex) | ~45 minutes

Possibly related PRs

Suggested labels: bug

Suggested reviewers: jeonggyul, l0521

🚥 Pre-merge checks | ✅ 2 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name Status Explanation Resolution
Out of Scope Changes check ⚠️ Warning 알림 기능, 알림 데이터, 팔로우 상태, SearchInput 스타일 변경은 연결 이슈의 핀 등록 요구사항과 직접 관련이 없습니다. 연결 이슈와 무관한 알림 및 SearchInput 변경을 별도 PR로 분리하거나 해당 변경의 범위를 명시하십시오.
Linked Issues check ❓ Inconclusive 500m 클라이언트 제한 제거는 확인되지만 availability API 호출과 OUT_OF_RANGE 처리 여부는 변경 요약만으로 확인할 수 없습니다. availability API 호출, OUT_OF_RANGE 안내 문구, 현재 화면 유지 동작을 구현한 코드 근거를 추가로 확인하십시오.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed 제목은 핀 등록 QA 수정이라는 주요 변경 범위를 명확히 나타냅니다.
✨ Finishing Touches 💡 1
⚔️ Resolve merge conflicts 💡
  • Resolve merge conflict in branch feat/335-pin-registration-qa-fixes
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/335-pin-registration-qa-fixes

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

Copy link
Copy Markdown

https://pr-336.plimap.kr

@onebone
onebone marked this pull request as ready for review August 12, 2026 09:12

@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.

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
src/features/map/hooks/useMapPinOverlays.ts (1)

129-138: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick win

흐림 상태의 기존 핀 클릭을 차단하세요.

areMapPinsDimmed는 마커 내용에만 전달됩니다. onClick은 흐림 상태에서도 계속 등록됩니다. 또한 areMapPinsDimmed 변경 시 기존 overlay를 재사용하므로, 마커 DOM을 갱신해도 기존 클릭 핸들러는 남습니다.

src/layouts/PinRegistrationLayout.tsx는 위치 선택 중 areMapPinsDimmed를 true로 전달합니다. 이 상태에서 기존 핀을 누르면 flyTo가 실행됩니다. 지도 중심 변경이 onCenterChanged로 이어지면 candidateCoordinate도 기존 핀 위치로 바뀔 수 있습니다.

흐림 상태를 확인하는 ref로 클릭 핸들러를 조기에 종료하거나, 상태 변경 시 overlay의 클릭 핸들러를 교체 또는 재생성하세요. MapPinMarker의 cursor-pointer도 흐림 상태에서 제거하세요.

수정 예시
+  const areMapPinsDimmedRef = useRef(areMapPinsDimmed);
+  useEffect(() => {
+    areMapPinsDimmedRef.current = areMapPinsDimmed;
+  }, [areMapPinsDimmed]);
+
         onClick: () => {
+          if (areMapPinsDimmedRef.current) return;
           const latestPin = mapPinsByIdRef.current.get(pin.id);

PR 목표의 기존 핀 표시 개선과 src/layouts/PinRegistrationLayout.tsx의 등록 화면 호출 경로를 기준으로 판단했습니다.

Also applies to: 164-176

🤖 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/map/hooks/useMapPinOverlays.ts` around lines 129 - 138, Update
the overlay click handling in useMapPinOverlays so clicks on existing pins are
ignored while areMapPinsDimmed is true, including overlays reused across
dim-state changes; use a ref or replace/recreate handlers to reflect the current
state. Also update MapPinMarker to remove cursor-pointer while dimmed,
preserving normal click behavior when pins are not dimmed.
🤖 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.

Outside diff comments:
In `@src/features/map/hooks/useMapPinOverlays.ts`:
- Around line 129-138: Update the overlay click handling in useMapPinOverlays so
clicks on existing pins are ignored while areMapPinsDimmed is true, including
overlays reused across dim-state changes; use a ref or replace/recreate handlers
to reflect the current state. Also update MapPinMarker to remove cursor-pointer
while dimmed, preserving normal click behavior when pins are not dimmed.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 3ef2d1e1-5689-4b12-a83e-2275308fa85a

📥 Commits

Reviewing files that changed from the base of the PR and between e0f18d9 and f17701e.

📒 Files selected for processing (13)
  • src/features/map/components/MapPinMarker.tsx
  • src/features/map/components/MapViewer.tsx
  • src/features/map/hooks/useMapPinOverlays.ts
  • src/features/map/utils/mapPinMarker.ts
  • src/features/pin/components/PinPlaceSearch.tsx
  • src/layouts/PinRegistrationLayout.tsx
  • src/pages/HomePage.tsx
  • src/pages/PinLocationConfirmPage.tsx
  • src/pages/PinRegisterEntryPage.tsx
  • src/pages/PinRegisterPage.tsx
  • src/pages/PinRegisterSearchPage.tsx
  • src/pages/SongDetailPage.tsx
  • src/store/pinCreationStore.ts

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

🤖 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/components/ui/SearchInput.tsx`:
- Line 13: Update the friend variant styling in SearchInput to restore its
existing has-[:focus-visible]:outline-* keyboard-focus classes while preserving
the current background, spacing, and padding classes.

In `@src/pages/MyNotificationsPage.tsx`:
- Around line 108-110: Update the follow-request handling around useToggleFollow
so every memberId mutation receives success processing, rather than relying on
the per-call mutate onSuccess that only reliably applies to the latest call. Use
mutateAsync for each request or move notification-query invalidation into the
hook-level success handler, and track isFollowPending per actor/memberId instead
of exposing only the latest request’s pending state.
🪄 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: 8014a777-494a-4f28-bf6e-560a54021b02

📥 Commits

Reviewing files that changed from the base of the PR and between f17701e and 3782cf1.

📒 Files selected for processing (9)
  • src/components/skeletons/HomeSkeleton.tsx
  • src/components/ui/SearchInput.tsx
  • src/features/map/components/MapPinMarker.tsx
  • src/features/map/hooks/useMapPinOverlays.ts
  • src/features/notification/components/NotificationRow.tsx
  • src/features/notification/queries/useNotifications.ts
  • src/features/notification/types.ts
  • src/pages/HomePage.tsx
  • src/pages/MyNotificationsPage.tsx
🚧 Files skipped from review as they are similar to previous changes (3)
  • src/features/map/hooks/useMapPinOverlays.ts
  • src/features/map/components/MapPinMarker.tsx
  • src/pages/HomePage.tsx

Comment thread src/components/ui/SearchInput.tsx
Comment thread src/pages/MyNotificationsPage.tsx Outdated
@onebone onebone added the feature Feature implementation label Aug 12, 2026
@onebone onebone self-assigned this Aug 12, 2026
@onebone
onebone force-pushed the feat/335-pin-registration-qa-fixes branch from 3cacb89 to 604c773 Compare August 12, 2026 13:46
@onebone
onebone merged commit 792af76 into develop Aug 12, 2026
2 of 3 checks passed
@onebone
onebone deleted the feat/335-pin-registration-qa-fixes branch August 12, 2026 14:14
@onebone
onebone deployed to preview-maintenance August 12, 2026 14:15 — with GitHub Actions Active

This branch was successfully deployed

2 active deployments
preview — e12c3416 Deployed Aug 12, 2026 by onebone via deploy #585
preview-maintenance — e12c3416 Deployed Aug 12, 2026 by onebone via cleanup #586
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feature Feature implementation

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat: 핀 등록 500m 검증 방식 변경

1 participant