[Phase 4] frontend zoom rendering

[HOKAGO-MEMORIES]

Changes

• Render REGION_AVG, CLUSTER, and PROPERTY viewport items with distinct Naver map marker styles
• Keep the side list property-only while region/cluster modes stay focused on map readability
• Add marker utility helpers for viewport item type, label, representative price, and anchor
• Expand frontend tests to include utils coverage and mark phase4 complete in harness status

Linked Issue

closes #59

Tests

• cd frontend && pnpm test
• cd frontend && pnpm build
• python scripts/execute_codex.py map-viewport-zoom --dry-run

Summary by CodeRabbit

• New Features
  • Map zoom behavior now shows different marker styles for broad areas, clusters, and individual listings.
  • The map count and empty-state messages now adapt to the current zoom level.
• Bug Fixes
  • Side-list results now stay focused on individual listings when viewing broader map levels.
  • Marker content is now safely escaped to help prevent display issues.
• Tests
  • Expanded automated coverage for marker labels, pricing, and listing-only behavior.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
salmanhae	Ready	Preview, Comment	Jun 24, 2026 7:31am

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds a new mapViewport.js utility module with item type/mode constants and marker helper functions (isPropertyItem, getPrimaryPriceValue, viewportMarkerKind, viewportMarkerAnchor, viewportMarkerLabel). Updates mapStore.js to use isPropertyItem and rewrites MapExplorer.vue to render region-average, cluster, and property markers using mode-aware HTML builders with escapeHtml protection and updated click handling. Includes unit tests and marks phase 4 complete.

Changes

Viewport-Mode-Aware Map Marker Rendering

Layer / File(s)	Summary
Viewport utility constants and marker helpers frontend/src/utils/mapViewport.js, frontend/src/utils/mapViewport.test.mjs	Introduces VIEWPORT_ITEM_TYPES, VIEWPORT_MODES, and five exported helper functions (isPropertyItem, getPrimaryPriceValue, viewportMarkerKind, viewportMarkerAnchor, viewportMarkerLabel). Unit tests cover all three item types for kind, anchor, price extraction, and label structure.
Store: properties derived via isPropertyItem frontend/src/store/mapStore.js	Imports isPropertyItem from the new utility and replaces the inline item.type === 'PROPERTY' filter when computing properties from viewportItems.
MapExplorer.vue: mode-aware rendering and click handling frontend/src/views/MapExplorer.vue	Imports viewport helpers; adds isPropertyMode, visibleMapItems, viewportCountLabel, and emptyListText computed properties; replaces single markerContent with regionMarkerContent, clusterMarkerContent, and propertyMarkerContent dispatched by viewportMarkerKind; adds escapeHtml; updates marker iteration, click handling (pan/zoom for non-property markers), and watcher dependencies.
Phase docs, status, and test script frontend/package.json, phases/map-viewport-zoom/phase4-frontend-zoom-rendering.md, phases/map-viewport-zoom/phase4.status.json	Broadens test glob to src/**/*.test.mjs; updates phase 4 plan with specific file list and checks all Done-When items; writes phase4.status.json as completed.

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant MapExplorer
  participant mapStore
  participant mapViewport as mapViewport.js

  User->>MapExplorer: pan/zoom map
  MapExplorer->>mapStore: fetch viewport items
  mapStore->>mapStore: filter properties via isPropertyItem(item)
  mapStore-->>MapExplorer: viewportItems, filteredProperties

  MapExplorer->>MapExplorer: compute visibleMapItems (mode-based)
  loop each item in visibleMapItems
    MapExplorer->>mapViewport: viewportMarkerKind(item)
    mapViewport-->>MapExplorer: kind
    MapExplorer->>mapViewport: viewportMarkerLabel(item, {formatWons, transactionLabel})
    mapViewport-->>MapExplorer: {eyebrow, title, value}
    MapExplorer->>MapExplorer: build HTML via regionMarkerContent / clusterMarkerContent / propertyMarkerContent
  end

  User->>MapExplorer: click marker
  alt property marker
    MapExplorer->>mapStore: selectProperty(id)
  else region / cluster marker
    MapExplorer->>MapExplorer: pan and zoom map
  end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• ssafy-salman/salmanhae#58: Updates mapStore.js to derive properties from viewportItems by checking type === 'PROPERTY', the exact same filter this PR replaces with isPropertyItem, and also wires MapExplorer.vue to viewport-based data.

Suggested labels

ai-generated

🐰 Hop, hop, hooray for the map today!
Regions glow and clusters play,
Each zoom level gets its own flair,
Property markers placed with care.
From broad to close, the map knows the way! 🗺️✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description covers changes, linked issue, and tests, matching the template's core information.
Linked Issues check	✅ Passed	The PR implements the phase 4 zoom rendering goals: distinct region/cluster/property markers, property-only side list, and preserved property selection.
Out of Scope Changes check	✅ Passed	The changed files stay focused on the zoom-rendering feature, its tests, and phase tracking with no clear unrelated additions.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The title is directly related to the main change and clearly identifies phase 4 frontend zoom rendering.

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

✨ 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 phase/4-frontend-zoom-rendering

---

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

[coderabbitai]

🧹 Nitpick comments (1)

frontend/src/views/MapExplorer.vue (1)

384-443: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚖️ Poor tradeoff

Optional: extract the shared marker-HTML scaffold.

regionMarkerContent, clusterMarkerContent, and propertyMarkerContent repeat near-identical inline-style button/pointer markup with only colors, dimensions, and label slots differing. A small builder (style config + label slots) would reduce duplication and keep marker styling consistent as it evolves.

🤖 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 `@frontend/src/views/MapExplorer.vue` around lines 384 - 443, The marker
content builders are duplicating the same button/pointer HTML scaffold across
regionMarkerContent, clusterMarkerContent, and propertyMarkerContent. Extract
the shared marker markup into a small reusable builder or helper that accepts a
style/config object and label slots, then update these functions to call it with
their specific dimensions, colors, and text fields so the styling stays
consistent and easier to maintain.

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

Nitpick comments:
In `@frontend/src/views/MapExplorer.vue`:
- Around line 384-443: The marker content builders are duplicating the same
button/pointer HTML scaffold across regionMarkerContent, clusterMarkerContent,
and propertyMarkerContent. Extract the shared marker markup into a small
reusable builder or helper that accepts a style/config object and label slots,
then update these functions to call it with their specific dimensions, colors,
and text fields so the styling stays consistent and easier to maintain.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 3a6dee96-1da0-41a3-be28-fa3ecd9e6107

📥 Commits

Reviewing files that changed from the base of the PR and between bdcb0ac and 672f212.

📒 Files selected for processing (7)

• frontend/package.json
• frontend/src/store/mapStore.js
• frontend/src/utils/mapViewport.js
• frontend/src/utils/mapViewport.test.mjs
• frontend/src/views/MapExplorer.vue
• phases/map-viewport-zoom/phase4-frontend-zoom-rendering.md
• phases/map-viewport-zoom/phase4.status.json