[FEAT] 지도 관련 디자인 수정

[crolvlee]

변경 내용

• 지도 관련 디자인 수정

연결 이슈

closes #108

테스트

리뷰 포인트

리뷰어가 집중해서 봐야 할 부분이 있으면 적어주세요. 없으면 삭제하세요.

Summary by CodeRabbit

• New Features

  • Improved the map filter experience with a more intuitive dropdown-based panel and richer price range controls.
  • Added support for selecting multiple transaction types and expanded rent-related filter options.

• Bug Fixes

  • Filter resets now clear all relevant price and transaction settings consistently.
  • Map overlays and lists update more reliably when filters are changed or closed.

• Style

  • Updated typography and font styling across the app for a cleaner, more consistent look.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
salmanhae	Ready	Preview, Comment	Jun 25, 2026 5:27pm

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 17e9a1f3-ccff-4376-a880-6422887812f9

📥 Commits

Reviewing files that changed from the base of the PR and between 8e840f5 and 2619784.

📒 Files selected for processing (7)

• frontend/index.html
• frontend/src/assets/main.css
• frontend/src/store/mapStore.js
• frontend/src/views/Community.vue
• frontend/src/views/Diagnosis.vue
• frontend/src/views/MapExplorer.vue
• frontend/src/views/Recommend.vue

---

📝 Walkthrough

Walkthrough

The PR loads Pretendard, updates global typography styles, changes font weights across several frontend views, and refactors map filtering to use multi-select transaction types with updated dropdown, slider, marker, and cleanup behavior.

Changes

Map filter overhaul

Layer / File(s)	Summary
Store filter contract and query rules frontend/src/store/mapStore.js	Monthly rent keys are added to money filters, transaction type state becomes an array, API filter construction and active-filter detection use the new shape, and reset behavior clears the expanded filter set.
Filter panel interactions frontend/src/views/MapExplorer.vue	The map filter UI becomes a dropdown-based panel with range sliders, selection sync, outside-click closing, reset wiring, lifecycle cleanup, and .dual-slider thumb styling.
Marker visuals frontend/src/views/MapExplorer.vue	Property, region, and cluster markers use updated inline HTML and styling for layout, borders, opacity, shadows, and text treatment.

Typography refresh

Layer / File(s)	Summary
Font load and base styles frontend/index.html, frontend/src/assets/main.css	Pretendard is loaded in the document head, and the base body and component typography styles switch to the new font and spacing treatment.
Page text weights frontend/src/views/Community.vue, frontend/src/views/Diagnosis.vue, frontend/src/views/Recommend.vue	Several headings, labels, badges, and buttons switch from font-black to font-bold across the main frontend views.

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant MapExplorer
  participant mapStore
  participant Document
  User->>MapExplorer: Click transaction pill
  MapExplorer->>mapStore: Read filters.transactionTypes and slider values
  MapExplorer->>MapExplorer: Open dropdown and sync local sliders
  Document->>MapExplorer: mousedown outside closes dropdown
  MapExplorer->>mapStore: Update selected types and price filters
  MapExplorer->>MapExplorer: Refresh map results and resetPriceFilters()

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

• ssafy-salman/salmanhae#58: Shares the map store and MapExplorer flow; that PR adds viewport plumbing while this one changes transaction filter state and UI.
• ssafy-salman/salmanhae#60: Also changes MapExplorer marker rendering and inline marker HTML/CSS.

Poem

૮Ꮚ˶ᵔ ﻌ ᵔ˶Ꮚა
I hopped through maps with font-lined grace,
And sliders twinkled in their place.
The homes all bloomed in bold delight,
While Pretendard made the pages light.

✨ 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/108-design

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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