[Phase 3] frontend map viewport api

[HOKAGO-MEMORIES]

Changes

• Add frontend API support for GET /api/v1/map/viewport while keeping property list/detail APIs available
• Store viewport mode/items in Pinia and derive visible property markers from PROPERTY viewport items
• Route map idle/filter refreshes through the viewport API
• Add API coverage for viewport endpoint and cleaned params
• Mark phase3 complete in harness status

Linked Issue

closes #57

Tests

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

Summary by CodeRabbit

• New Features
  • The map now loads visible results from a viewport-aware endpoint, improving updates as you pan and zoom.
  • Map results now include viewport-specific mode and item data for a more accurate browsing experience.
• Bug Fixes
  • Map refreshes now handle missing map initialization more gracefully.
  • Error handling was improved so map loading issues are less likely to interrupt the page.
• Tests
  • Added coverage for the new viewport-based map data request and parameter handling.

[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:12am

[coderabbitai]

📝 Walkthrough

Walkthrough

Phase 3 frontend work: properties.js gains a new fetchMapViewport function targeting /api/v1/map/viewport and refactors existing API functions to accept an injectable HTTP client. The Pinia map store adds viewportMode/viewportItems state and a fetchViewport action, while fetchProperties becomes a thin delegate. MapExplorer.vue switches all fetch calls to fetchViewport. Test glob broadened to cover all API test files.

Changes

Map Viewport Frontend Integration

Layer / File(s)	Summary
fetchMapViewport API function and injectable client frontend/src/api/properties.js, frontend/src/api/properties.test.mjs, frontend/package.json	fetchMapViewport is added to call /api/v1/map/viewport with cleanParams; existing functions gain an optional injectable client parameter. A stub-based unit test verifies endpoint, cleaned params (strips propertyType, minDeposit, maxDeposit), and response shape. Test script glob broadened to src/api/*.test.mjs.
mapStore fetchViewport action and viewport state frontend/src/store/mapStore.js	Adds viewportMode and viewportItems state fields. Introduces fetchViewport async action using requestSeq cancellation that calls fetchMapViewport, populates viewport state, derives properties by filtering type === 'PROPERTY', and sets totalCount. Clears viewport state on error. fetchProperties delegates to fetchViewport.
MapExplorer.vue wired to fetchViewport frontend/src/views/MapExplorer.vue	Replaces all store.fetchProperties calls with store.fetchViewport in refreshFromMapBounds (uninitialized-map fallback and bounds-scoped fetch) and in the onMounted map-SDK failure path.
Phase plan and status completed phases/map-viewport-zoom/phase3-frontend-map-viewport-api.md, phases/map-viewport-zoom/phase3.status.json	Phase plan specifies exact files changed and marks all checklist items as done. Status JSON records completed with updated timestamp and detail message.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• ssafy-salman/salmanhae#12: Previously established fetchProperties/fetchPropertyDetail in properties.js, the map store's fetchProperties action, and the map-idle refresh in MapExplorer.vue — the exact surface extended by this PR.
• ssafy-salman/salmanhae#54: Introduced the backend /api/v1/map/viewport endpoint whose mode, items, and totalCount response shape is consumed by the new fetchMapViewport function here.
• ssafy-salman/salmanhae#56: Implemented and validated the /api/v1/map/viewport backend behavior that mapStore.fetchViewport and MapExplorer.vue are now wired to call.

Suggested labels

ai-generated

🐇 From /properties I used to roam,
Now /map/viewport is my new home!
cleanParams trims what need not be sent,
fetchViewport knows just what was meant.
🗺️ Zoom in, zoom out — the map is bright,
Every viewport pixel just right! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description covers changes, linked issue, and tests, so it is mostly complete despite using English headings instead of the template.
Linked Issues check	✅ Passed	The changes add the viewport API, update Pinia state, and route map refreshes through it, matching issue #57's goals.
Out of Scope Changes check	✅ Passed	The phase status update and test-script change appear tied to the viewport work and not unrelated to the PR's objectives.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The title matches the main change: adding frontend support for the map viewport API in phase 3.

_{✏️ 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/3-frontend-map-viewport-api

---

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