From ad5a86b5e4e83522e56b0c19ef9fe140eb6d7d63 Mon Sep 17 00:00:00 2001
From: HOKAGO-MEMORIES <minchotejava@gmail.com>
Date: Fri, 19 Jun 2026 00:30:34 +0900
Subject: [PATCH 1/5] =?UTF-8?q?feat(fe):=20=EC=A7=80=EB=8F=84=20=EB=A7=A4?=
 =?UTF-8?q?=EB=AC=BC=20API=20=EC=97=B0=EB=8F=99=20=EB=B0=8F=20=EB=A7=88?=
 =?UTF-8?q?=EC=BB=A4=20=ED=91=9C=EC=8B=9C=20(#11)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/.env.example                         |   1 +
 frontend/pnpm-workspace.yaml                  |   3 +
 frontend/src/api/http.js                      |  13 +
 frontend/src/api/properties.js                |  18 +
 frontend/src/assets/main.css                  |  25 +
 frontend/src/store/mapStore.js                | 339 +++++------
 frontend/src/utils/naverMaps.js               |  45 ++
 frontend/src/views/MapExplorer.vue            | 556 ++++++++++++------
 .../property-map-fe/phase2-property-map-fe.md |  28 +
 9 files changed, 654 insertions(+), 374 deletions(-)
 create mode 100644 frontend/src/api/http.js
 create mode 100644 frontend/src/api/properties.js
 create mode 100644 frontend/src/utils/naverMaps.js
 create mode 100644 phases/property-map-fe/phase2-property-map-fe.md

diff --git a/frontend/.env.example b/frontend/.env.example
index 4d18a04..94f4716 100644
--- a/frontend/.env.example
+++ b/frontend/.env.example
@@ -1 +1,2 @@
 VITE_NAVER_MAP_CLIENT_ID=
+VITE_API_BASE_URL=http://localhost:8080
diff --git a/frontend/pnpm-workspace.yaml b/frontend/pnpm-workspace.yaml
index a23eae0..d9534f8 100644
--- a/frontend/pnpm-workspace.yaml
+++ b/frontend/pnpm-workspace.yaml
@@ -1,3 +1,6 @@
+packages:
+  - .
+
 allowBuilds:
   esbuild: true
   vue-demi: true
diff --git a/frontend/src/api/http.js b/frontend/src/api/http.js
new file mode 100644
index 0000000..375b908
--- /dev/null
+++ b/frontend/src/api/http.js
@@ -0,0 +1,13 @@
+import axios from 'axios'
+
+const baseURL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080'
+
+const http = axios.create({
+  baseURL,
+  timeout: 10000,
+  headers: {
+    Accept: 'application/json'
+  }
+})
+
+export default http
diff --git a/frontend/src/api/properties.js b/frontend/src/api/properties.js
new file mode 100644
index 0000000..2d7a71c
--- /dev/null
+++ b/frontend/src/api/properties.js
@@ -0,0 +1,18 @@
+import http from './http'
+
+const cleanParams = (params) =>
+  Object.fromEntries(
+    Object.entries(params).filter(([, value]) => value !== undefined && value !== null && value !== '')
+  )
+
+export const fetchProperties = async (params) => {
+  const response = await http.get('/api/v1/properties', {
+    params: cleanParams(params)
+  })
+  return response.data.data
+}
+
+export const fetchPropertyDetail = async (propertyId) => {
+  const response = await http.get(`/api/v1/properties/${propertyId}`)
+  return response.data.data
+}
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 50efcaa..992ee87 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -33,6 +33,31 @@ body {
   .form-input {
     @apply w-full bg-slate-50 border border-slate-200 rounded-xl p-2.5 text-xs font-bold focus:outline-none focus:ring-2 focus:ring-brand;
   }
+
+  .filter-field {
+    @apply flex min-w-0 flex-col gap-1;
+  }
+
+  .filter-field span {
+    @apply text-[10px] font-black text-slate-500;
+  }
+
+  .filter-field input,
+  .filter-field select {
+    @apply h-10 w-full rounded-xl border border-slate-200 bg-slate-50 px-2 text-xs font-bold text-slate-800 outline-none transition focus:border-brand focus:ring-2 focus:ring-brand/20;
+  }
+
+  .detail-stat {
+    @apply min-w-0 rounded-2xl border border-slate-200 bg-slate-50 p-3;
+  }
+
+  .detail-stat span {
+    @apply block text-[10px] font-black text-slate-500;
+  }
+
+  .detail-stat b {
+    @apply mt-1 block truncate text-sm font-black text-slate-900;
+  }
 }
 
 .glow-safe-path { filter: drop-shadow(0 0 6px #10b981); }
diff --git a/frontend/src/store/mapStore.js b/frontend/src/store/mapStore.js
index 5dafb08..896742c 100644
--- a/frontend/src/store/mapStore.js
+++ b/frontend/src/store/mapStore.js
@@ -1,241 +1,168 @@
 import { defineStore } from 'pinia'
+import { fetchProperties, fetchPropertyDetail } from '../api/properties'
 
-const propertiesByRegion = {
-  gwanak: [
-    {
-      id: 1,
-      region: 'gwanak',
-      name: '가온 리빙 하우스',
-      type: '원룸(다가구)',
-      deposit: 10000,
-      rent: 45,
-      marketPrice: 20000,
-      publicPrice: 12000,
-      seniorDeposits: 4000,
-      collateral: 3000,
-      address: '서울 관악구 대학동 1533-5',
-      safetyScore: 94,
-      crimeGrade: '1등급 (최상)',
-      cctvs: 8,
-      lamps: '최상',
-      policeDist: '80m',
-      description: '생활안전지도 기준 5대 범죄율 발생이 낮은 안심 치안 구역입니다. 야간 안심 조명이 보행로 전체에 확보되어 있습니다.',
-      x: 180,
-      y: 160,
-      historicalPrices: [8000, 9000, 9500, 10000],
-      reviews: [
-        { user: '동글이', date: '2025.11', content: '여성안심귀갓길 바로 연결되어서 밤늦게 가도 골목이 밝아요.', rate: 5 },
-        { user: '코딩새내기', date: '2026.01', content: '방음도 나쁘지 않고 편의점 접근성이 좋습니다. 다만 언덕길이 조금 있어요.', rate: 4 }
-      ]
-    },
-    {
-      id: 2,
-      region: 'gwanak',
-      name: '대학동 그린 원룸',
-      type: '원룸(다가구)',
-      deposit: 12000,
-      rent: 38,
-      marketPrice: 15000,
-      publicPrice: 9000,
-      seniorDeposits: 5000,
-      collateral: 4000,
-      address: '서울 관악구 대학동 1511-12',
-      safetyScore: 68,
-      crimeGrade: '4등급 (보통)',
-      cctvs: 3,
-      lamps: '보통',
-      policeDist: '350m',
-      description: '가로등 조도가 낮고 CCTV 밀도가 낮습니다. 일부 범죄주의구간과 겹쳐 밤길 보행 시 큰 도로 위주 이동이 권장됩니다.',
-      x: 380,
-      y: 280,
-      historicalPrices: [10000, 11000, 11500, 12000],
-      reviews: [
-        { user: '자취의신', date: '2025.08', content: '가격은 낮은 편이지만 밤에는 골목이 어두워요.', rate: 3 }
-      ]
-    },
-    {
-      id: 3,
-      region: 'gwanak',
-      name: '샤로수 스마트 텔',
-      type: '오피스텔(공동주택)',
-      deposit: 16000,
-      rent: 65,
-      marketPrice: 22000,
-      publicPrice: 14000,
-      seniorDeposits: 0,
-      collateral: 2000,
-      address: '서울 관악구 청룡동 860-2',
-      safetyScore: 88,
-      crimeGrade: '2등급 (우수)',
-      cctvs: 12,
-      lamps: '우수',
-      policeDist: '150m',
-      description: '대로변에 위치해 조도가 균일하고 건물 내 보안 인프라가 우수합니다. 상권 밀집 구역과 가까워 주말 소음은 확인이 필요합니다.',
-      x: 250,
-      y: 320,
-      historicalPrices: [14000, 15000, 15500, 16000],
-      reviews: [
-        { user: '안전제일', date: '2026.01', content: 'CCTV가 많고 관리가 잘 되어 택배 분실 걱정이 적습니다.', rate: 5 }
-      ]
-    }
-  ],
-  mapo: [
-    {
-      id: 4,
-      region: 'mapo',
-      name: '홍대 가온 빌라',
-      type: '투룸(다세대주택)',
-      deposit: 18000,
-      rent: 60,
-      marketPrice: 24000,
-      publicPrice: 13000,
-      seniorDeposits: 0,
-      collateral: 3000,
-      address: '서울 마포구 서교동 365-4',
-      safetyScore: 72,
-      crimeGrade: '5등급 (유흥가 인접 우려)',
-      cctvs: 9,
-      lamps: '최상',
-      policeDist: '100m',
-      description: '파출소와 가로등은 가깝지만 주변 유흥 상권 밀도가 높아 주말 야간 소음과 경범죄 주의가 필요합니다.',
-      x: 200,
-      y: 200,
-      historicalPrices: [15000, 16000, 17500, 18000],
-      reviews: [
-        { user: '홍대생', date: '2025.12', content: '밝기는 밝은데 주말 새벽에는 외부 소음이 있습니다.', rate: 3 }
-      ]
-    }
-  ]
+const DEFAULT_BOUNDS = {
+  west: 126.76,
+  east: 127.18,
+  south: 37.42,
+  north: 37.66
 }
 
-const infraByRegion = {
-  gwanak: {
-    cctvs: [{ x: 100, y: 120 }, { x: 190, y: 150 }, { x: 210, y: 170 }, { x: 310, y: 290 }],
-    lamps: [{ x: 140, y: 80 }, { x: 230, y: 190 }, { x: 350, y: 220 }],
-    polices: [{ x: 150, y: 150, desc: '대학동안심치안센터' }],
-    paths: [{ x1: 50, y1: 50, x2: 150, y2: 150 }, { x1: 150, y1: 150, x2: 250, y2: 320 }],
-    crimeZones: ['130,220 180,240 220,180 150,170'],
-    mainRoads: [
-      [50, 50, 450, 50], [150, 50, 150, 400], [150, 320, 450, 320]
-    ],
-    subRoads: [[300, 50, 300, 320], [50, 180, 150, 180]]
-  },
-  mapo: {
-    cctvs: [{ x: 120, y: 150 }, { x: 220, y: 180 }],
-    lamps: [{ x: 150, y: 250 }, { x: 300, y: 100 }],
-    polices: [{ x: 210, y: 210, desc: '서교 파출소' }],
-    paths: [{ x1: 100, y1: 100, x2: 210, y2: 210 }],
-    crimeZones: ['180,180 250,190 240,250 170,240'],
-    mainRoads: [[50, 100, 450, 100], [210, 50, 210, 420]],
-    subRoads: [[50, 250, 450, 250]]
-  }
+const DEFAULT_CENTER = {
+  latitude: 37.5665,
+  longitude: 126.978
+}
+
+const toNumberOrEmpty = (value) => {
+  if (value === '' || value === null || value === undefined) return ''
+  const numberValue = Number(value)
+  return Number.isFinite(numberValue) ? numberValue : ''
 }
 
 export default defineStore('map', {
   state: () => ({
-    currentRegion: 'gwanak',
+    currentRegion: 'seoul',
     selectedPropertyId: null,
-    favorites: [1, 3],
+    selectedProperty: null,
+    properties: [],
+    totalCount: 0,
+    bounds: { ...DEFAULT_BOUNDS },
+    center: { ...DEFAULT_CENTER },
+    zoom: 12,
     searchKeyword: '',
-    filterType: 'all',
-    sortType: 'safe',
-    activeLayers: {
-      cctv: true,
-      lamp: true,
-      police: true,
-      path: true,
-      crimeZone: true
-    },
-    weights: {
-      safety: 40,
-      price: 30,
-      traffic: 20,
-      life: 10
+    filters: {
+      transactionType: '',
+      propertyType: '',
+      minDeposit: '',
+      maxDeposit: '',
+      minPrice: '',
+      maxPrice: ''
     },
-    calcBuildingType: 'multi',
-    communityPosts: [
-      { id: 1, region: 'gwanak', title: '가온 리빙 하우스 뒤쪽 골목 방범등 수리 완료', category: '치안 및 안전', content: 'LED 보안등으로 교체되어 퇴근길 체감 조도가 확실히 좋아졌습니다.', author: '가온골목대장', rate: 5, date: '2026-05-20' },
-      { id: 2, region: 'gwanak', title: '대학동 녹두거리 계단 지름길 밤길 주의', category: '실거주 꿀팁', content: '골목 일부가 어두워서 3분 더 걸려도 대로변 안심귀갓길로 우회하는 편이 좋습니다.', author: '치안순찰대', rate: 2, date: '2026-05-18' }
-    ],
-    chatMessages: [
-      { role: 'bot', text: '안녕하세요! HUG 126% 기준, 다가구 선순위 보증금, 임대인 세금 체납 확인 등 안전 계약 질문을 도와드릴게요.' }
-    ]
+    isLoading: false,
+    isDetailLoading: false,
+    error: '',
+    detailError: '',
+    lastFetchedAt: null,
+    requestSeq: 0
   }),
   getters: {
     regions: () => [
-      { value: 'gwanak', label: '서울시 관악구 대학동', desc: '청년 원룸 밀집 구역' },
-      { value: 'mapo', label: '서울시 마포구 서교동', desc: '유흥 상권 인접지' }
+      {
+        value: 'seoul',
+        label: '서울 주요 권역',
+        desc: '시드 매물 조회'
+      }
     ],
-    currentProperties: (state) => propertiesByRegion[state.currentRegion],
-    currentInfra: (state) => infraByRegion[state.currentRegion],
-    allProperties: () => Object.values(propertiesByRegion).flat(),
-    selectedProperty(state) {
-      return Object.values(propertiesByRegion).flat().find((property) => property.id === state.selectedPropertyId) || null
-    },
+    currentProperties: (state) => state.properties,
     filteredProperties(state) {
       const keyword = state.searchKeyword.trim().toLowerCase()
-      let list = [...propertiesByRegion[state.currentRegion]]
-      if (keyword) {
-        list = list.filter((property) => property.name.toLowerCase().includes(keyword) || property.address.toLowerCase().includes(keyword))
-      }
-      if (state.filterType !== 'all') {
-        list = list.filter((property) => property.type.includes(state.filterType))
-      }
-      if (state.sortType === 'safe') list.sort((a, b) => b.safetyScore - a.safetyScore)
-      if (state.sortType === 'price-low') list.sort((a, b) => (a.deposit + a.rent * 100) - (b.deposit + b.rent * 100))
-      return list
-    },
-    communityForCurrentRegion(state) {
-      return state.communityPosts.filter((post) => post.region === state.currentRegion)
+      if (!keyword) return state.properties
+      return state.properties.filter((property) => {
+        const title = property.title || property.buildingName || ''
+        const address = property.address || property.roadAddress || ''
+        return title.toLowerCase().includes(keyword) || address.toLowerCase().includes(keyword)
+      })
     },
     regionStatus(state) {
-      if (state.currentRegion === 'gwanak') return { text: '치안 안전 최고 1등급지', tone: 'text-emerald-700' }
-      return { text: '유흥인접 폭력/경범죄 주의구간 포함', tone: 'text-rose-600' }
+      if (state.error) return { text: '매물 API 확인 필요', tone: 'text-rose-600' }
+      if (state.isLoading) return { text: '매물 불러오는 중', tone: 'text-slate-600' }
+      return { text: `${state.totalCount.toLocaleString()}개 매물 표시`, tone: 'text-emerald-700' }
+    },
+    hasActiveFilters(state) {
+      return Object.values(state.filters).some((value) => value !== '')
     }
   },
   actions: {
     setRegion(region) {
       this.currentRegion = region
-      this.selectedPropertyId = null
     },
-    selectProperty(id) {
-      this.selectedPropertyId = id
+    setBounds(bounds) {
+      this.bounds = {
+        west: Number(bounds.west),
+        east: Number(bounds.east),
+        south: Number(bounds.south),
+        north: Number(bounds.north)
+      }
     },
-    closeProperty() {
-      this.selectedPropertyId = null
+    setCenter(center) {
+      this.center = {
+        latitude: Number(center.latitude),
+        longitude: Number(center.longitude)
+      }
     },
-    toggleLayer(layerKey) {
-      this.activeLayers[layerKey] = !this.activeLayers[layerKey]
+    setZoom(zoom) {
+      this.zoom = Number(zoom)
     },
-    toggleFavorite(id) {
-      const index = this.favorites.indexOf(id)
-      if (index >= 0) this.favorites.splice(index, 1)
-      else this.favorites.push(id)
+    setFilter(key, value) {
+      if (!(key in this.filters)) return
+      if (['minDeposit', 'maxDeposit', 'minPrice', 'maxPrice'].includes(key)) {
+        this.filters[key] = toNumberOrEmpty(value)
+        return
+      }
+      this.filters[key] = value
     },
-    setWeight(key, value) {
-      this.weights[key] = Number(value)
+    resetFilters() {
+      this.filters = {
+        transactionType: '',
+        propertyType: '',
+        minDeposit: '',
+        maxDeposit: '',
+        minPrice: '',
+        maxPrice: ''
+      }
+      this.searchKeyword = ''
     },
-    addCommunityPost(payload) {
-      this.communityPosts.unshift({
-        id: this.communityPosts.length + 1,
-        region: this.currentRegion,
-        date: new Date().toISOString().slice(0, 10),
-        ...payload
-      })
+    async fetchProperties(bounds = this.bounds) {
+      const seq = ++this.requestSeq
+      this.isLoading = true
+      this.error = ''
+      this.setBounds(bounds)
+
+      try {
+        const data = await fetchProperties({
+          ...this.bounds,
+          ...this.filters
+        })
+
+        if (seq !== this.requestSeq) return
+
+        this.properties = data.items || []
+        this.totalCount = data.totalCount ?? this.properties.length
+        this.lastFetchedAt = new Date().toISOString()
+
+        if (this.selectedPropertyId && !this.properties.some((property) => property.id === this.selectedPropertyId)) {
+          this.selectedPropertyId = null
+          this.selectedProperty = null
+        }
+      } catch (error) {
+        if (seq !== this.requestSeq) return
+        this.error = error.response?.data?.message || '매물 데이터를 불러오지 못했습니다.'
+        this.properties = []
+        this.totalCount = 0
+      } finally {
+        if (seq === this.requestSeq) {
+          this.isLoading = false
+        }
+      }
     },
-    sendChat(text) {
-      const message = text.trim()
-      if (!message) return
-      this.chatMessages.push({ role: 'user', text: message })
-      let answer = '다세대인지 다가구인지 등기 상태를 먼저 확인해 주세요. 이후 공시가격, 보증금, 선순위 권리, 세금 체납 여부를 함께 검토하면 위험도를 더 정확히 판단할 수 있습니다.'
-      if (message.includes('126') || message.includes('보증보험') || message.includes('HUG')) {
-        answer = 'HUG 126% 기준은 공시가격 × 140% × 90%로 계산합니다. 즉 보증금이 공시가격의 126%를 초과하면 반환보증 가입이 어려울 수 있어 계약 전 공시가격과 보증금을 반드시 비교해야 합니다.'
-      } else if (message.includes('다가구') || message.includes('선순위')) {
-        answer = '다가구 주택은 호실별 개별 등기가 아니라 건물 전체 기준으로 권리관계가 얽힙니다. 내 보증금보다 먼저 배당받는 기존 세입자 보증금 총합을 확인해야 하며, 선순위 임차인 정보 제공 확인서를 요구하는 것이 좋습니다.'
-      } else if (message.includes('세금') || message.includes('체납')) {
-        answer = '임대인의 국세·지방세 체납은 경매 배당에서 세입자보다 앞설 수 있습니다. 계약 전 국세 및 지방세 완납증명서 제출 또는 미납 국세 열람 동의를 특약으로 두는 편이 안전합니다.'
+    async selectProperty(id) {
+      this.selectedPropertyId = id
+      this.detailError = ''
+      this.selectedProperty = this.properties.find((property) => property.id === id) || null
+      this.isDetailLoading = true
+
+      try {
+        this.selectedProperty = await fetchPropertyDetail(id)
+      } catch (error) {
+        this.detailError = error.response?.data?.message || '매물 상세 정보를 불러오지 못했습니다.'
+      } finally {
+        this.isDetailLoading = false
       }
-      this.chatMessages.push({ role: 'bot', text: answer })
+    },
+    closeProperty() {
+      this.selectedPropertyId = null
+      this.selectedProperty = null
+      this.detailError = ''
     }
   }
 })
diff --git a/frontend/src/utils/naverMaps.js b/frontend/src/utils/naverMaps.js
new file mode 100644
index 0000000..1efe58c
--- /dev/null
+++ b/frontend/src/utils/naverMaps.js
@@ -0,0 +1,45 @@
+let sdkPromise
+
+export const loadNaverMaps = () => {
+  if (typeof window === 'undefined') {
+    return Promise.reject(new Error('Naver Maps SDK can only be loaded in the browser.'))
+  }
+
+  if (window.naver?.maps) {
+    return Promise.resolve(window.naver.maps)
+  }
+
+  const clientId = import.meta.env.VITE_NAVER_MAP_CLIENT_ID
+  if (!clientId) {
+    return Promise.reject(new Error('VITE_NAVER_MAP_CLIENT_ID is not configured.'))
+  }
+
+  if (sdkPromise) {
+    return sdkPromise
+  }
+
+  sdkPromise = new Promise((resolve, reject) => {
+    const existingScript = document.getElementById('naver-map-sdk')
+    if (existingScript) {
+      existingScript.addEventListener('load', () => resolve(window.naver.maps), { once: true })
+      existingScript.addEventListener('error', () => reject(new Error('Failed to load Naver Maps SDK.')), { once: true })
+      return
+    }
+
+    const script = document.createElement('script')
+    script.id = 'naver-map-sdk'
+    script.async = true
+    script.src = `https://oapi.map.naver.com/openapi/v3/maps.js?ncpKeyId=${encodeURIComponent(clientId)}`
+    script.onload = () => {
+      if (window.naver?.maps) {
+        resolve(window.naver.maps)
+        return
+      }
+      reject(new Error('Naver Maps SDK loaded without maps namespace.'))
+    }
+    script.onerror = () => reject(new Error('Failed to load Naver Maps SDK.'))
+    document.head.appendChild(script)
+  })
+
+  return sdkPromise
+}
diff --git a/frontend/src/views/MapExplorer.vue b/frontend/src/views/MapExplorer.vue
index 72b57f5..173f6e0 100644
--- a/frontend/src/views/MapExplorer.vue
+++ b/frontend/src/views/MapExplorer.vue
@@ -1,172 +1,214 @@
 <template>
-  <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
-    <section class="lg:col-span-8 bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden h-[620px] relative">
-      <div class="absolute top-3 left-3 z-20 flex flex-wrap gap-2 max-w-[92%]">
-        <button v-for="layer in layers" :key="layer.key" @click="store.toggleLayer(layer.key)" :class="layerButtonClass(layer.key)">
-          <span>{{ layer.icon }}</span> {{ layer.label }}
-        </button>
+  <div class="grid grid-cols-1 gap-4 lg:grid-cols-12">
+    <section class="relative h-[660px] overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm lg:col-span-8">
+      <div class="absolute left-3 right-3 top-3 z-20 space-y-2">
+        <form class="flex flex-col gap-2 rounded-2xl border border-slate-200 bg-white/95 p-3 shadow-sm backdrop-blur md:flex-row md:items-center" @submit.prevent="refreshFromFilters">
+          <label class="flex min-w-0 flex-1 items-center gap-2 rounded-xl border border-slate-200 bg-slate-50 px-3 py-2">
+            <Search class="h-4 w-4 shrink-0 text-slate-400" aria-hidden="true" />
+            <input
+              v-model="store.searchKeyword"
+              class="w-full bg-transparent text-sm font-semibold text-slate-800 outline-none placeholder:text-slate-400"
+              type="search"
+              placeholder="건물명 또는 주소 검색"
+            />
+          </label>
+          <button class="inline-flex items-center justify-center gap-2 rounded-xl bg-slate-900 px-4 py-2 text-sm font-bold text-white transition hover:bg-slate-800" type="submit">
+            <RotateCw class="h-4 w-4" aria-hidden="true" />
+            조회
+          </button>
+        </form>
+
+        <form class="grid grid-cols-2 gap-2 rounded-2xl border border-slate-200 bg-white/95 p-3 shadow-sm backdrop-blur md:grid-cols-6" @submit.prevent="refreshFromFilters">
+          <label class="filter-field">
+            <span>거래</span>
+            <select v-model="store.filters.transactionType">
+              <option value="">전체</option>
+              <option value="MONTHLY_RENT">월세</option>
+              <option value="JEONSE">전세</option>
+              <option value="SALE">매매</option>
+            </select>
+          </label>
+          <label class="filter-field">
+            <span>유형</span>
+            <select v-model="store.filters.propertyType">
+              <option value="">전체</option>
+              <option value="ONE_ROOM">원룸</option>
+              <option value="OFFICETEL">오피스텔</option>
+              <option value="APARTMENT">아파트</option>
+              <option value="VILLA">빌라</option>
+              <option value="MULTI_FAMILY">단독/다가구</option>
+            </select>
+          </label>
+          <label class="filter-field">
+            <span>보증금 최소</span>
+            <input v-model="store.filters.minDeposit" min="0" step="1000000" type="number" placeholder="원" />
+          </label>
+          <label class="filter-field">
+            <span>보증금 최대</span>
+            <input v-model="store.filters.maxDeposit" min="0" step="1000000" type="number" placeholder="원" />
+          </label>
+          <label class="filter-field">
+            <span>매매가 최소</span>
+            <input v-model="store.filters.minPrice" min="0" step="10000000" type="number" placeholder="원" />
+          </label>
+          <div class="flex items-end gap-2">
+            <button class="h-10 flex-1 rounded-xl border border-slate-300 bg-white px-3 text-xs font-black text-slate-700 transition hover:bg-slate-50" type="button" @click="resetFilters">
+              초기화
+            </button>
+            <button class="h-10 rounded-xl bg-brand px-3 text-xs font-black text-white transition hover:bg-brand-dark" type="submit">
+              적용
+            </button>
+          </div>
+        </form>
       </div>
 
-      <div class="absolute bottom-3 left-3 z-20 bg-white/95 border border-slate-200 p-3 rounded-xl shadow-md text-[10px] space-y-1.5">
-        <div class="font-bold text-slate-700 border-b border-slate-100 pb-1 mb-1">안전 인프라 및 범죄주의 구간</div>
-        <div class="flex items-center gap-2"><span class="w-2.5 h-2.5 rounded-full bg-blue-500"></span> CCTV</div>
-        <div class="flex items-center gap-2"><span class="w-2.5 h-2.5 rounded-full bg-yellow-400"></span> LED 보안등</div>
-        <div class="flex items-center gap-2"><span class="w-2.5 h-2.5 rounded-full bg-emerald-500"></span> 치안센터 / 안심벨</div>
-        <div class="flex items-center gap-2"><span class="h-1.5 w-6 rounded-full bg-teal-400 border border-dashed border-teal-700"></span> 안심귀갓길</div>
-        <div class="flex items-center gap-2"><span class="w-4 h-2.5 bg-rose-500/20 border border-dashed border-rose-600"></span> 범죄주의 구간</div>
+      <div ref="mapElement" class="h-full w-full bg-slate-100"></div>
+
+      <div v-if="isMapLoading" class="absolute inset-0 z-10 flex items-center justify-center bg-slate-50">
+        <div class="flex items-center gap-2 rounded-full border border-slate-200 bg-white px-4 py-2 text-sm font-bold text-slate-700 shadow-sm">
+          <Loader2 class="h-4 w-4 animate-spin" aria-hidden="true" />
+          지도 불러오는 중
+        </div>
       </div>
 
-      <div class="absolute bottom-3 left-1/2 -translate-x-1/2 z-20 bg-slate-900/95 text-white py-2 px-4 rounded-full text-xs shadow-md hidden md:flex items-center gap-2">
-        <span>🛡️</span>
-        <span>매물 마커를 클릭하면 HUG 가입성·실질 범죄지수·실거래 추이를 확인할 수 있습니다.</span>
+      <div v-if="mapError" class="absolute inset-0 z-10 flex items-center justify-center bg-slate-50 p-6">
+        <div class="max-w-sm rounded-2xl border border-amber-200 bg-white p-5 text-center shadow-sm">
+          <AlertTriangle class="mx-auto h-8 w-8 text-amber-500" aria-hidden="true" />
+          <h2 class="mt-3 text-sm font-black text-slate-900">네이버 지도를 불러오지 못했습니다</h2>
+          <p class="mt-2 text-xs leading-5 text-slate-500">{{ mapError }}</p>
+          <p class="mt-3 text-xs font-bold text-slate-600">매물 목록은 기본 지도 범위로 조회됩니다.</p>
+        </div>
       </div>
 
-      <div class="relative w-full h-full bg-slate-100 overflow-hidden select-none">
-        <svg class="absolute inset-0 w-full h-full" viewBox="0 0 520 460" preserveAspectRatio="xMidYMid slice">
-          <rect width="520" height="460" fill="#f1f5f9" />
-          <g stroke="#ffffff" stroke-width="14" stroke-linecap="round" stroke-linejoin="round">
-            <line v-for="(road, index) in store.currentInfra.mainRoads" :key="`main-${index}`" :x1="road[0]" :y1="road[1]" :x2="road[2]" :y2="road[3]" />
-          </g>
-          <g stroke="#ffffff" stroke-width="7" stroke-linecap="round" stroke-linejoin="round">
-            <line v-for="(road, index) in store.currentInfra.subRoads" :key="`sub-${index}`" :x1="road[0]" :y1="road[1]" :x2="road[2]" :y2="road[3]" />
-          </g>
-          <g v-show="store.activeLayers.path" stroke="#14b8a6" stroke-width="4" stroke-linecap="round" stroke-dasharray="7 7" class="glow-safe-path">
-            <line v-for="(path, index) in store.currentInfra.paths" :key="`path-${index}`" :x1="path.x1" :y1="path.y1" :x2="path.x2" :y2="path.y2" class="animate-pulse-path" />
-          </g>
-          <g v-show="store.activeLayers.crimeZone" opacity="0.65">
-            <polygon v-for="(zone, index) in store.currentInfra.crimeZones" :key="`zone-${index}`" :points="zone" class="crime-danger-zone" />
-          </g>
-        </svg>
-
-        <template v-if="store.activeLayers.cctv">
-          <div v-for="(point, index) in store.currentInfra.cctvs" :key="`cctv-${index}`" class="map-feature text-blue-600 border-blue-300 glow-cctv" :style="pointStyle(point)">📹</div>
-        </template>
-        <template v-if="store.activeLayers.lamp">
-          <div v-for="(point, index) in store.currentInfra.lamps" :key="`lamp-${index}`" class="map-feature text-yellow-500 border-yellow-300 glow-lamp" :style="pointStyle(point)">💡</div>
-        </template>
-        <template v-if="store.activeLayers.police">
-          <div v-for="(point, index) in store.currentInfra.polices" :key="`police-${index}`" class="absolute z-20 bg-white border border-emerald-400 text-emerald-700 text-[10px] font-black rounded-lg px-2 py-1 shadow" :style="pointStyle(point)">🏢 {{ point.desc }}</div>
-        </template>
-
-        <button v-for="property in store.currentProperties" :key="property.id" @click="store.selectProperty(property.id)" class="absolute z-30 group -translate-x-1/2 -translate-y-full" :style="pointStyle(property)">
-          <div :class="['rounded-xl px-2.5 py-1.5 text-[11px] font-black shadow-md border-2 transition group-hover:scale-110', store.selectedPropertyId === property.id ? 'bg-amber-400 text-slate-900 border-white' : 'bg-brand text-white border-white']">
-            🏠 {{ (property.deposit / 10000).toFixed(1) }}억/{{ property.rent }}
-          </div>
-          <div :class="['w-3 h-3 mx-auto -mt-1.5 rotate-45 border-r border-b border-white', store.selectedPropertyId === property.id ? 'bg-amber-400' : 'bg-brand']"></div>
-        </button>
+      <div class="absolute bottom-3 left-3 z-20 flex flex-wrap items-center gap-2 rounded-2xl border border-slate-200 bg-white/95 px-3 py-2 text-xs font-bold text-slate-600 shadow-sm backdrop-blur">
+        <MapPin class="h-4 w-4 text-brand" aria-hidden="true" />
+        <span>{{ store.totalCount.toLocaleString() }}개 매물</span>
+        <span v-if="store.lastFetchedAt" class="text-slate-400">{{ formattedFetchedAt }}</span>
       </div>
     </section>
 
-    <aside class="lg:col-span-4 flex flex-col gap-4 h-[620px]">
-      <div class="bg-white rounded-2xl border border-slate-200 shadow-sm p-3 space-y-3">
-        <div class="flex items-center gap-2 bg-slate-50 border border-slate-100 px-3 py-2 rounded-xl">
-          <span class="text-slate-400">🔎</span>
-          <input v-model="store.searchKeyword" type="text" placeholder="건물명 또는 주소 검색" class="bg-transparent text-sm w-full focus:outline-none" />
+    <aside class="flex h-[660px] flex-col gap-4 lg:col-span-4">
+      <section class="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
+        <div class="flex items-center justify-between gap-3">
+          <div>
+            <p class="text-[11px] font-black uppercase text-brand-dark">F-1 Property Search</p>
+            <h2 class="mt-1 text-lg font-black text-slate-900">지도 범위 매물</h2>
+          </div>
+          <SlidersHorizontal class="h-5 w-5 text-slate-400" aria-hidden="true" />
         </div>
-        <div class="grid grid-cols-2 gap-2">
-          <select v-model="store.filterType" class="bg-slate-50 border border-slate-200 rounded-lg p-2 text-xs font-bold focus:outline-none">
-            <option value="all">모든 주거유형</option>
-            <option value="다가구">원룸(다가구)</option>
-            <option value="오피스텔">오피스텔</option>
-            <option value="투룸">투룸</option>
-          </select>
-          <select v-model="store.sortType" class="bg-slate-50 border border-slate-200 rounded-lg p-2 text-xs font-bold focus:outline-none">
-            <option value="safe">치안지수 높은순</option>
-            <option value="price-low">월세 낮은순</option>
-          </select>
+        <p class="mt-2 text-xs leading-5 text-slate-500">현재 지도 화면 안의 매물을 Spring Boot API에서 조회합니다.</p>
+      </section>
+
+      <section class="min-h-0 flex-1 overflow-y-auto rounded-2xl border border-slate-200 bg-white p-3 shadow-sm">
+        <div v-if="store.isLoading" class="flex h-full items-center justify-center text-sm font-bold text-slate-500">
+          <Loader2 class="mr-2 h-4 w-4 animate-spin" aria-hidden="true" />
+          매물을 불러오는 중입니다
         </div>
-      </div>
 
-      <div class="bg-white rounded-2xl border border-slate-200 shadow-sm flex-1 overflow-y-auto p-3 space-y-2">
-        <article v-for="property in store.filteredProperties" :key="property.id" @click="store.selectProperty(property.id)" :class="['p-3 rounded-xl border transition cursor-pointer', store.selectedPropertyId === property.id ? 'bg-brand-light border-brand shadow-sm' : 'bg-slate-50 border-slate-200 hover:bg-slate-100']">
-          <div class="flex items-center justify-between gap-2">
-            <span class="text-[10px] font-black px-2 py-0.5 rounded bg-blue-100 text-blue-700">{{ property.type }}</span>
-            <span class="text-xs font-black text-emerald-600">🛡️ {{ property.safetyScore }}점</span>
+        <div v-else-if="store.error" class="flex h-full items-center justify-center p-6 text-center">
+          <div>
+            <AlertTriangle class="mx-auto h-8 w-8 text-rose-500" aria-hidden="true" />
+            <p class="mt-3 text-sm font-black text-slate-900">매물 API 오류</p>
+            <p class="mt-2 text-xs leading-5 text-slate-500">{{ store.error }}</p>
           </div>
-          <h3 class="font-black text-slate-900 text-sm mt-2 flex items-center justify-between">
-            {{ property.name }}
-            <span v-if="store.favorites.includes(property.id)" class="text-rose-500">♥</span>
-          </h3>
-          <p class="text-[11px] text-slate-500 mt-1">{{ property.address }}</p>
-          <div class="flex items-center justify-between mt-3 pt-2 border-t border-slate-200/60">
-            <span class="text-sm font-black text-slate-900">보증금 {{ (property.deposit / 10000).toFixed(1) }}억 / 월세 {{ property.rent }}</span>
-            <span class="text-[10px] text-slate-500 bg-teal-50 px-2 py-0.5 rounded font-bold">{{ property.crimeGrade }}</span>
+        </div>
+
+        <div v-else-if="store.filteredProperties.length === 0" class="flex h-full items-center justify-center p-6 text-center">
+          <div>
+            <Home class="mx-auto h-8 w-8 text-slate-300" aria-hidden="true" />
+            <p class="mt-3 text-sm font-black text-slate-900">표시할 매물이 없습니다</p>
+            <p class="mt-2 text-xs leading-5 text-slate-500">지도를 조금 넓히거나 필터를 초기화해보세요.</p>
           </div>
-        </article>
-      </div>
+        </div>
+
+        <div v-else class="space-y-2">
+          <article
+            v-for="property in store.filteredProperties"
+            :key="property.id"
+            :class="[
+              'cursor-pointer rounded-xl border p-3 transition',
+              store.selectedPropertyId === property.id ? 'border-brand bg-brand-light shadow-sm' : 'border-slate-200 bg-slate-50 hover:bg-slate-100'
+            ]"
+            @click="store.selectProperty(property.id)"
+          >
+            <div class="flex items-start justify-between gap-3">
+              <div class="min-w-0">
+                <p class="truncate text-sm font-black text-slate-900">{{ displayTitle(property) }}</p>
+                <p class="mt-1 truncate text-xs font-semibold text-slate-500">{{ property.address }}</p>
+              </div>
+              <span class="shrink-0 rounded-full bg-white px-2 py-1 text-[10px] font-black text-slate-600">{{ propertyTypeLabel(property.propertyType) }}</span>
+            </div>
+            <div class="mt-3 flex items-center justify-between gap-3 border-t border-slate-200/70 pt-3">
+              <span class="text-sm font-black text-slate-900">{{ priceText(property) }}</span>
+              <span class="rounded-full bg-slate-900 px-2 py-1 text-[10px] font-black text-white">{{ transactionLabel(property.transactionType) }}</span>
+            </div>
+            <p class="mt-2 text-xs font-semibold text-slate-500">{{ areaText(property) }} · {{ floorText(property) }}</p>
+          </article>
+        </div>
+      </section>
     </aside>
 
     <transition name="slide">
-      <section v-if="store.selectedProperty" class="fixed inset-y-0 right-0 w-full md:w-[480px] bg-white shadow-2xl z-[100] border-l border-slate-200 overflow-y-auto">
-        <div class="sticky top-0 bg-white/95 backdrop-blur-md border-b border-slate-100 p-4 flex items-center justify-between z-10">
+      <section v-if="store.selectedProperty" class="fixed inset-y-0 right-0 z-[100] w-full overflow-y-auto border-l border-slate-200 bg-white shadow-2xl md:w-[440px]">
+        <div class="sticky top-0 z-10 flex items-center justify-between border-b border-slate-100 bg-white/95 p-4 backdrop-blur">
           <div class="flex items-center gap-2">
-            <span class="bg-brand-light text-brand-dark text-[10px] font-black px-2 py-0.5 rounded">{{ store.selectedProperty.type }}</span>
-            <span class="text-xs text-slate-500">매물 No. {{ store.selectedProperty.id }}</span>
-          </div>
-          <div class="flex gap-2">
-            <button @click="store.toggleFavorite(store.selectedProperty.id)" :class="['w-8 h-8 rounded-full border flex items-center justify-center text-sm', store.favorites.includes(store.selectedProperty.id) ? 'bg-rose-50 border-rose-200 text-rose-500' : 'bg-white border-slate-200 text-slate-400']">♥</button>
-            <button @click="store.closeProperty()" class="w-8 h-8 rounded-full bg-slate-100 hover:bg-slate-200 text-slate-600">✕</button>
+            <span class="rounded-full bg-brand-light px-2 py-1 text-[10px] font-black text-brand-dark">{{ transactionLabel(store.selectedProperty.transactionType) }}</span>
+            <span class="text-xs font-bold text-slate-400">No. {{ store.selectedProperty.id }}</span>
           </div>
+          <button class="flex h-9 w-9 items-center justify-center rounded-full bg-slate-100 text-slate-600 transition hover:bg-slate-200" type="button" @click="store.closeProperty">
+            <X class="h-4 w-4" aria-hidden="true" />
+            <span class="sr-only">닫기</span>
+          </button>
         </div>
 
-        <div class="p-5 space-y-5">
+        <div class="space-y-5 p-5">
           <div>
-            <h2 class="text-xl font-black text-slate-900">{{ store.selectedProperty.name }}</h2>
-            <p class="text-sm text-slate-500">{{ store.selectedProperty.address }}</p>
-            <div class="mt-3 flex items-center justify-between bg-brand-light p-3 rounded-xl border border-brand/20">
-              <div><span class="text-xs font-bold text-brand-dark">희망 월세</span><p class="text-lg font-black text-brand-dark">보증금 {{ (store.selectedProperty.deposit / 10000).toFixed(1) }}억 / {{ store.selectedProperty.rent }}만원</p></div>
-              <div class="text-right"><span class="text-[10px] text-slate-500">공시가격</span><p class="text-xs font-black">{{ formatMoney(store.selectedProperty.publicPrice) }}만원</p></div>
-            </div>
+            <p class="text-xs font-black text-brand-dark">{{ propertyTypeLabel(store.selectedProperty.propertyType) }}</p>
+            <h2 class="mt-1 text-2xl font-black text-slate-900">{{ displayTitle(store.selectedProperty) }}</h2>
+            <p class="mt-2 text-sm leading-6 text-slate-500">{{ store.selectedProperty.address }}</p>
+            <p v-if="store.selectedProperty.roadAddress" class="text-xs leading-5 text-slate-400">{{ store.selectedProperty.roadAddress }}</p>
           </div>
 
-          <div class="bg-slate-50 p-4 rounded-2xl border border-slate-100 space-y-3">
-            <div class="flex items-center justify-between">
-              <h3 class="font-black text-sm">🛡️ 통합 치안 및 거주 안전 리포트</h3>
-              <span class="bg-emerald-100 text-emerald-800 text-[10px] font-black px-2 py-0.5 rounded-full">{{ safetyLabel(store.selectedProperty.safetyScore) }}</span>
-            </div>
-            <div class="flex items-center gap-4">
-              <div class="w-16 h-16 rounded-full bg-emerald-50 border-4 border-brand flex flex-col items-center justify-center text-brand-dark">
-                <span class="text-xl font-black">{{ store.selectedProperty.safetyScore }}</span><span class="text-[8px] font-bold">안전 등급</span>
-              </div>
-              <div class="flex-1 space-y-1 text-[11px]">
-                <p class="flex justify-between"><span class="text-slate-500 font-bold">범죄 발생률 등급</span><b>{{ store.selectedProperty.crimeGrade }}</b></p>
-                <p class="flex justify-between"><span class="text-slate-500 font-bold">야간 조도</span><b>{{ store.selectedProperty.lamps }}</b></p>
-                <p class="flex justify-between"><span class="text-slate-500 font-bold">CCTV 수</span><b>{{ store.selectedProperty.cctvs }}개</b></p>
-              </div>
-            </div>
-            <p class="text-xs text-slate-600 bg-white p-3 rounded-xl border border-slate-200 leading-relaxed">{{ store.selectedProperty.description }}</p>
+          <div class="rounded-2xl border border-brand/20 bg-brand-light p-4">
+            <p class="text-xs font-black text-brand-dark">가격</p>
+            <p class="mt-1 text-xl font-black text-slate-900">{{ priceText(store.selectedProperty) }}</p>
+            <p v-if="store.selectedProperty.maintenanceFee" class="mt-2 text-xs font-bold text-slate-600">관리비 {{ formatWons(store.selectedProperty.maintenanceFee) }}</p>
           </div>
 
-          <div :class="['p-4 rounded-2xl border space-y-3', hugStatus(store.selectedProperty).eligible ? 'bg-emerald-50 border-emerald-100' : 'bg-rose-50 border-rose-100']">
-            <div class="flex justify-between items-center">
-              <h3 class="font-black text-xs">🧾 HUG 126% 가입 적격성 예비진단</h3>
-              <span :class="['text-[10px] font-black px-2 py-0.5 rounded', hugStatus(store.selectedProperty).eligible ? 'bg-emerald-100 text-emerald-800' : 'bg-rose-200 text-rose-950']">{{ hugStatus(store.selectedProperty).label }}</span>
+          <div class="grid grid-cols-2 gap-2">
+            <div class="detail-stat">
+              <span>전용 면적</span>
+              <b>{{ areaText(store.selectedProperty) }}</b>
+            </div>
+            <div class="detail-stat">
+              <span>층수</span>
+              <b>{{ floorText(store.selectedProperty) }}</b>
             </div>
-            <div class="bg-white/80 p-3 rounded-xl text-xs space-y-1 border border-white">
-              <p class="flex justify-between"><span>HUG 가입 보증 한도</span><b>{{ formatMoney(hugStatus(store.selectedProperty).limit) }}만원</b></p>
-              <p class="flex justify-between"><span>선순위 보증금</span><b>{{ store.selectedProperty.type.includes('다가구') ? formatMoney(store.selectedProperty.seniorDeposits) + '만원 확인 필요' : '개별등기' }}</b></p>
+            <div class="detail-stat">
+              <span>건물명</span>
+              <b>{{ store.selectedProperty.buildingName || '-' }}</b>
+            </div>
+            <div class="detail-stat">
+              <span>법정동 코드</span>
+              <b>{{ store.selectedProperty.legalDongCode || '-' }}</b>
             </div>
-            <p class="text-xs leading-relaxed">{{ hugStatus(store.selectedProperty).message }}</p>
-            <router-link to="/diagnosis" class="block text-center bg-slate-900 hover:bg-slate-800 text-white font-bold text-xs py-2 rounded-xl">이 매물 상세진단 실행</router-link>
           </div>
 
-          <div>
-            <h3 class="font-black text-sm mb-2">📈 국토부 실거래 신고 내역</h3>
-            <svg class="w-full h-40 bg-slate-50 border border-slate-100 rounded-xl" viewBox="0 0 360 150">
-              <polyline :points="chartPoints(store.selectedProperty.historicalPrices)" fill="none" stroke="#1ABC9C" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-              <circle v-for="(point, index) in chartPointArray(store.selectedProperty.historicalPrices)" :key="index" :cx="point.x" :cy="point.y" r="4" fill="#1ABC9C" />
-              <text x="16" y="135" font-size="10" fill="#64748b">23년</text><text x="110" y="135" font-size="10" fill="#64748b">24년</text><text x="210" y="135" font-size="10" fill="#64748b">25년</text><text x="310" y="135" font-size="10" fill="#64748b">26년</text>
-            </svg>
+          <div v-if="store.detailError" class="rounded-2xl border border-rose-100 bg-rose-50 p-4 text-xs font-bold leading-5 text-rose-700">
+            {{ store.detailError }}
           </div>
 
-          <div>
-            <h3 class="font-black text-sm mb-2">👤 실거주자 후기</h3>
-            <div class="space-y-2">
-              <article v-for="review in store.selectedProperty.reviews" :key="review.user" class="bg-slate-50 p-3 rounded-xl border border-slate-100">
-                <div class="flex justify-between text-[11px]"><b>{{ review.user }} <span class="text-slate-400 font-normal">({{ review.date }})</span></b><span class="text-amber-500 font-black">★ {{ review.rate }}</span></div>
-                <p class="text-xs text-slate-600 mt-1 leading-relaxed">{{ review.content }}</p>
-              </article>
+          <div v-if="store.isDetailLoading" class="flex items-center justify-center rounded-2xl border border-slate-200 bg-slate-50 p-4 text-sm font-bold text-slate-500">
+            <Loader2 class="mr-2 h-4 w-4 animate-spin" aria-hidden="true" />
+            상세 정보를 불러오는 중입니다
+          </div>
+
+          <div v-if="store.selectedProperty.description" class="rounded-2xl border border-slate-200 bg-slate-50 p-4">
+            <div class="flex items-center gap-2">
+              <Building2 class="h-4 w-4 text-slate-400" aria-hidden="true" />
+              <h3 class="text-sm font-black text-slate-900">매물 메모</h3>
             </div>
+            <p class="mt-3 text-sm leading-6 text-slate-600">{{ store.selectedProperty.description }}</p>
           </div>
         </div>
       </section>
@@ -175,46 +217,224 @@
 </template>
 
 <script setup>
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import {
+  AlertTriangle,
+  Building2,
+  Home,
+  Loader2,
+  MapPin,
+  RotateCw,
+  Search,
+  SlidersHorizontal,
+  X
+} from '@lucide/vue'
 import useMapStore from '../store/mapStore'
+import { loadNaverMaps } from '../utils/naverMaps'
 
 const store = useMapStore()
-const layers = [
-  { key: 'cctv', label: 'CCTV', icon: '📹' },
-  { key: 'lamp', label: '가로등/조도', icon: '💡' },
-  { key: 'police', label: '관공서/안심벨', icon: '🏢' },
-  { key: 'path', label: '안심귀갓길', icon: '🛣️' },
-  { key: 'crimeZone', label: '범죄 위험 지역구간', icon: '⚠️' }
-]
-
-const layerButtonClass = (key) => {
-  const active = store.activeLayers[key]
-  if (key === 'crimeZone' && active) return 'layer-btn bg-rose-100 border-rose-300 text-rose-700 font-black'
-  if (active) return 'layer-btn bg-brand-light border-brand/40 text-brand-dark font-bold'
-  return 'layer-btn bg-white border-slate-200 text-slate-600 hover:bg-slate-50 font-bold'
+const mapElement = ref(null)
+const isMapLoading = ref(true)
+const mapError = ref('')
+
+let mapsApi = null
+let map = null
+let idleListener = null
+let markers = []
+let markerListeners = []
+
+const formattedFetchedAt = computed(() => {
+  if (!store.lastFetchedAt) return ''
+  return new Intl.DateTimeFormat('ko-KR', {
+    hour: '2-digit',
+    minute: '2-digit'
+  }).format(new Date(store.lastFetchedAt))
+})
+
+const displayTitle = (property) => property.title || property.buildingName || `매물 ${property.id}`
+
+const transactionLabel = (type) => ({
+  MONTHLY_RENT: '월세',
+  JEONSE: '전세',
+  SALE: '매매'
+}[type] || '거래')
+
+const propertyTypeLabel = (type) => ({
+  ONE_ROOM: '원룸',
+  OFFICETEL: '오피스텔',
+  APARTMENT: '아파트',
+  VILLA: '빌라',
+  MULTI_FAMILY: '단독/다가구'
+}[type] || '주거')
+
+const formatWons = (value) => {
+  if (value === null || value === undefined) return '-'
+  const man = Math.round(Number(value) / 10000)
+  if (!Number.isFinite(man)) return '-'
+  if (man >= 10000) {
+    const eok = Math.floor(man / 10000)
+    const rest = man % 10000
+    return rest > 0 ? `${eok}억 ${rest.toLocaleString()}만` : `${eok}억`
+  }
+  return `${man.toLocaleString()}만`
+}
+
+const priceText = (property) => {
+  if (property.transactionType === 'SALE') return `매매 ${formatWons(property.price)}`
+  if (property.transactionType === 'JEONSE') return `전세 ${formatWons(property.deposit)}`
+  return `보증금 ${formatWons(property.deposit)} / 월세 ${formatWons(property.monthlyRent)}`
+}
+
+const areaText = (property) => {
+  if (!property.areaM2) return '면적 정보 없음'
+  const pyeong = Number(property.areaM2) / 3.3058
+  return `${Number(property.areaM2).toFixed(1)}m² (${pyeong.toFixed(1)}평)`
+}
+
+const floorText = (property) => {
+  const floor = property.floor ? `${property.floor}층` : '층수 미상'
+  return property.totalFloor ? `${floor} / ${property.totalFloor}층` : floor
 }
-const pointStyle = (point) => ({ left: `${point.x}px`, top: `${point.y}px` })
-const formatMoney = (value) => Math.round(value).toLocaleString()
-const safetyLabel = (score) => score >= 90 ? '안전 최우수' : score >= 80 ? '안전 우수' : score >= 70 ? '주의 필요' : '야간 주의'
-const hugStatus = (property) => {
-  const limit = Math.round(property.publicPrice * 1.26)
-  const eligible = property.deposit <= limit
+
+const getMapBounds = () => {
+  const bounds = map.getBounds()
+  const sw = bounds.getSW()
+  const ne = bounds.getNE()
   return {
-    limit,
-    eligible,
-    label: eligible ? 'HUG 요건 부합' : 'HUG 가입불가',
-    message: eligible
-      ? '보증금이 HUG 가입 허용선 안에 있습니다. 다가구라면 선순위 보증금까지 합산해 최종 부채비율을 확인하세요.'
-      : `보증금 ${formatMoney(property.deposit)}만원이 HUG 한도 ${formatMoney(limit)}만원을 초과합니다. 보증보험 가입이 어려운 위험 매물입니다.`
+    west: sw.lng(),
+    south: sw.lat(),
+    east: ne.lng(),
+    north: ne.lat()
   }
 }
-const chartPointArray = (prices) => {
-  const min = Math.min(...prices)
-  const max = Math.max(...prices)
-  return prices.map((price, index) => {
-    const x = 30 + index * 100
-    const y = max === min ? 70 : 115 - ((price - min) / (max - min)) * 80
-    return { x, y }
+
+const markerContent = (property, isSelected) => {
+  const background = isSelected ? '#101311' : '#1ABC9C'
+  const label = property.transactionType === 'SALE' ? formatWons(property.price) : formatWons(property.deposit)
+
+  return `
+    <button type="button" style="
+      position: relative;
+      min-width: 74px;
+      border: 2px solid #fff;
+      border-radius: 14px;
+      background: ${background};
+      color: #fff;
+      padding: 7px 10px;
+      font-size: 12px;
+      font-weight: 900;
+      line-height: 1;
+      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.22);
+      cursor: pointer;
+      white-space: nowrap;
+    ">
+      ${transactionLabel(property.transactionType)} ${label}
+      <span style="
+        position: absolute;
+        left: 50%;
+        bottom: -6px;
+        width: 10px;
+        height: 10px;
+        transform: translateX(-50%) rotate(45deg);
+        background: ${background};
+        border-right: 2px solid #fff;
+        border-bottom: 2px solid #fff;
+      "></span>
+    </button>
+  `
+}
+
+const clearMarkers = () => {
+  markerListeners.forEach((listener) => mapsApi?.Event.removeListener(listener))
+  markerListeners = []
+  markers.forEach((marker) => marker.setMap(null))
+  markers = []
+}
+
+const renderMarkers = () => {
+  if (!mapsApi || !map) return
+  clearMarkers()
+
+  store.filteredProperties.forEach((property) => {
+    if (!property.latitude || !property.longitude) return
+
+    const marker = new mapsApi.Marker({
+      position: new mapsApi.LatLng(property.latitude, property.longitude),
+      map,
+      icon: {
+        content: markerContent(property, store.selectedPropertyId === property.id),
+        anchor: new mapsApi.Point(42, 44)
+      }
+    })
+    const listener = mapsApi.Event.addListener(marker, 'click', () => store.selectProperty(property.id))
+    markers.push(marker)
+    markerListeners.push(listener)
   })
 }
-const chartPoints = (prices) => chartPointArray(prices).map((point) => `${point.x},${point.y}`).join(' ')
+
+const refreshFromMapBounds = async () => {
+  if (!map) {
+    await store.fetchProperties()
+    return
+  }
+
+  store.setCenter({
+    latitude: map.getCenter().lat(),
+    longitude: map.getCenter().lng()
+  })
+  store.setZoom(map.getZoom())
+  await store.fetchProperties(getMapBounds())
+}
+
+const refreshFromFilters = async () => {
+  await refreshFromMapBounds()
+}
+
+const resetFilters = async () => {
+  store.resetFilters()
+  await refreshFromMapBounds()
+}
+
+watch(
+  [() => store.filteredProperties, () => store.selectedPropertyId],
+  () => renderMarkers(),
+  { deep: true }
+)
+
+watch(
+  () => store.selectedProperty,
+  (property) => {
+    if (!mapsApi || !map || !property?.latitude || !property?.longitude) return
+    map.panTo(new mapsApi.LatLng(property.latitude, property.longitude))
+  }
+)
+
+onMounted(async () => {
+  try {
+    mapsApi = await loadNaverMaps()
+    map = new mapsApi.Map(mapElement.value, {
+      center: new mapsApi.LatLng(store.center.latitude, store.center.longitude),
+      zoom: store.zoom,
+      minZoom: 9,
+      scaleControl: false,
+      mapDataControl: false,
+      zoomControl: true,
+      zoomControlOptions: {
+        position: mapsApi.Position.RIGHT_CENTER
+      }
+    })
+    idleListener = mapsApi.Event.addListener(map, 'idle', refreshFromMapBounds)
+    await refreshFromMapBounds()
+  } catch (error) {
+    mapError.value = error.message || '지도 SDK 설정을 확인해주세요.'
+    await store.fetchProperties()
+  } finally {
+    isMapLoading.value = false
+  }
+})
+
+onBeforeUnmount(() => {
+  if (idleListener) mapsApi?.Event.removeListener(idleListener)
+  clearMarkers()
+})
 </script>
diff --git a/phases/property-map-fe/phase2-property-map-fe.md b/phases/property-map-fe/phase2-property-map-fe.md
new file mode 100644
index 0000000..56b6127
--- /dev/null
+++ b/phases/property-map-fe/phase2-property-map-fe.md
@@ -0,0 +1,28 @@
+# Phase 2: Property Map Frontend
+
+## Goal
+Connect the F-1 property search UI to the Spring Boot Property API and show returned properties as Naver Map markers. Keep the scope to map search, marker display, basic filters, and property detail lookup.
+
+## Files
+- `frontend/.env.example` - document frontend API and Naver Maps environment variables.
+- `frontend/src/api/http.js` - create the shared Axios client for Spring Boot REST calls.
+- `frontend/src/api/properties.js` - add Property API request helpers.
+- `frontend/src/utils/naverMaps.js` - load the Naver Maps SDK from `VITE_NAVER_MAP_CLIENT_ID`.
+- `frontend/src/store/mapStore.js` - replace mock map properties with API-backed state and actions.
+- `frontend/src/views/MapExplorer.vue` - render the Naver map, markers, filters, list, and detail panel.
+
+## Done When
+- [ ] The frontend requests `GET /api/v1/properties` with current map bounds and active filters.
+- [ ] Property markers are rendered on the Naver map and selecting a marker/list item requests `GET /api/v1/properties/{propertyId}`.
+- [ ] Basic filters for transaction type, property type, deposit, and sale price are passed to the backend API.
+- [ ] Missing map API key and backend API errors show user-readable empty/error states without crashing the page.
+- [ ] `pnpm build` succeeds in `frontend`.
+
+## Architecture Rules
+- Frontend calls only the Spring Boot REST API.
+- API keys and backend URLs are read from environment variables.
+- MVP-excluded features such as HUG precise judgment, community, brokerage, and AI registry analysis are not implemented in this phase.
+- API response contracts follow `docs/08_API_SPEC.md`.
+
+## Implementation Instructions
+Use `VITE_API_BASE_URL` for the Spring Boot base URL and `VITE_NAVER_MAP_CLIENT_ID` for the browser map SDK. Keep the initial map centered around the seeded Seoul property data, then fetch by map viewport after the SDK is ready and whenever the map becomes idle after movement or zoom.

From a4612b5ebffd97bc954fdf5b6590bdff0a32fd85 Mon Sep 17 00:00:00 2001
From: HOKAGO-MEMORIES <minchotejava@gmail.com>
Date: Fri, 19 Jun 2026 01:15:08 +0900
Subject: [PATCH 2/5] =?UTF-8?q?docs(fe):=20=EB=A7=A4=EB=AC=BC=20=ED=99=95?=
 =?UTF-8?q?=EC=9D=B8=EC=9A=A9=20=ED=99=98=EA=B2=BD=EB=B3=80=EC=88=98=20?=
 =?UTF-8?q?=EC=98=88=EC=8B=9C=20=EC=B6=94=EA=B0=80=20(#11)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.example          | 12 ++++++++++++
 frontend/.env.example |  3 +++
 2 files changed, 15 insertions(+)

diff --git a/.env.example b/.env.example
index d18d823..cf291e3 100644
--- a/.env.example
+++ b/.env.example
@@ -1,5 +1,17 @@
+# Backend / seed scripts
+# Naver Maps geocoding uses the server-side client id and secret.
 NAVER_MAPS_CLIENT_ID=
 NAVER_MAPS_CLIENT_SECRET=
+
+# MOLIT transaction APIs. Used by seed/batch scripts, not by the frontend.
 MOLIT_SERVICE_KEY=
+
+# Spring Boot datasource. Use the Supabase PostgreSQL JDBC connection string.
+# Example:
+# SUPABASE_DB_URL=jdbc:postgresql://aws-0-ap-northeast-2.pooler.supabase.com:6543/postgres?sslmode=require
 SUPABASE_DB_URL=
+SUPABASE_DB_USERNAME=
+SUPABASE_DB_PASSWORD=
+
+# Supabase admin key for seed/admin scripts only. Never expose this to the frontend.
 SUPABASE_SERVICE_ROLE_KEY=
diff --git a/frontend/.env.example b/frontend/.env.example
index 94f4716..3d08556 100644
--- a/frontend/.env.example
+++ b/frontend/.env.example
@@ -1,2 +1,5 @@
+# Browser-safe Naver Maps SDK key. Do not put the secret here.
 VITE_NAVER_MAP_CLIENT_ID=
+
+# Spring Boot API base URL. Keep this pointing at the backend when verifying map markers.
 VITE_API_BASE_URL=http://localhost:8080

From 0a85e92a7edcfd6fc6279520682ab5e24a29a39b Mon Sep 17 00:00:00 2001
From: HOKAGO-MEMORIES <minchotejava@gmail.com>
Date: Fri, 19 Jun 2026 01:29:26 +0900
Subject: [PATCH 3/5] =?UTF-8?q?docs(be):=20=EB=B0=B1=EC=97=94=EB=93=9C=20?=
 =?UTF-8?q?=ED=99=98=EA=B2=BD=EB=B3=80=EC=88=98=20=EC=98=88=EC=8B=9C=20?=
 =?UTF-8?q?=EB=B6=84=EB=A6=AC=20(#11)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.example         | 9 +--------
 backend/.env.example | 7 +++++++
 2 files changed, 8 insertions(+), 8 deletions(-)
 create mode 100644 backend/.env.example

diff --git a/.env.example b/.env.example
index cf291e3..0c47ab6 100644
--- a/.env.example
+++ b/.env.example
@@ -1,4 +1,4 @@
-# Backend / seed scripts
+# Seed scripts / local data generation
 # Naver Maps geocoding uses the server-side client id and secret.
 NAVER_MAPS_CLIENT_ID=
 NAVER_MAPS_CLIENT_SECRET=
@@ -6,12 +6,5 @@ NAVER_MAPS_CLIENT_SECRET=
 # MOLIT transaction APIs. Used by seed/batch scripts, not by the frontend.
 MOLIT_SERVICE_KEY=
 
-# Spring Boot datasource. Use the Supabase PostgreSQL JDBC connection string.
-# Example:
-# SUPABASE_DB_URL=jdbc:postgresql://aws-0-ap-northeast-2.pooler.supabase.com:6543/postgres?sslmode=require
-SUPABASE_DB_URL=
-SUPABASE_DB_USERNAME=
-SUPABASE_DB_PASSWORD=
-
 # Supabase admin key for seed/admin scripts only. Never expose this to the frontend.
 SUPABASE_SERVICE_ROLE_KEY=
diff --git a/backend/.env.example b/backend/.env.example
new file mode 100644
index 0000000..6694315
--- /dev/null
+++ b/backend/.env.example
@@ -0,0 +1,7 @@
+# Spring Boot datasource
+# Use these values when running the backend locally.
+# Example:
+# SUPABASE_DB_URL=jdbc:postgresql://aws-0-ap-northeast-2.pooler.supabase.com:6543/postgres?sslmode=require
+SUPABASE_DB_URL=
+SUPABASE_DB_USERNAME=
+SUPABASE_DB_PASSWORD=

From af0c72662200ec6b61fada64e6feb5009943993b Mon Sep 17 00:00:00 2001
From: HOKAGO-MEMORIES <minchotejava@gmail.com>
Date: Fri, 19 Jun 2026 01:44:53 +0900
Subject: [PATCH 4/5] =?UTF-8?q?fix(be):=20=ED=94=84=EB=A1=A0=ED=8A=B8=20?=
 =?UTF-8?q?=EB=A7=A4=EB=AC=BC=20API=20CORS=20=ED=97=88=EC=9A=A9=20(#11)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/.env.example                          |  3 ++
 .../com/ssafy/salmanhae/config/WebConfig.java | 32 +++++++++++++++++++
 .../property/PropertyHttpIntegrationTest.java | 20 ++++++++++++
 3 files changed, 55 insertions(+)
 create mode 100644 backend/src/main/java/com/ssafy/salmanhae/config/WebConfig.java

diff --git a/backend/.env.example b/backend/.env.example
index 6694315..f327370 100644
--- a/backend/.env.example
+++ b/backend/.env.example
@@ -5,3 +5,6 @@
 SUPABASE_DB_URL=
 SUPABASE_DB_USERNAME=
 SUPABASE_DB_PASSWORD=
+
+# Comma-separated frontend origins allowed to call /api/** from browsers.
+APP_CORS_ALLOWED_ORIGINS=http://localhost:5173,http://127.0.0.1:5173
diff --git a/backend/src/main/java/com/ssafy/salmanhae/config/WebConfig.java b/backend/src/main/java/com/ssafy/salmanhae/config/WebConfig.java
new file mode 100644
index 0000000..623e1d8
--- /dev/null
+++ b/backend/src/main/java/com/ssafy/salmanhae/config/WebConfig.java
@@ -0,0 +1,32 @@
+package com.ssafy.salmanhae.config;
+
+import java.util.Arrays;
+
+import org.springframework.beans.factory.annotation.Value;
+import org.springframework.context.annotation.Configuration;
+import org.springframework.web.servlet.config.annotation.CorsRegistry;
+import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
+
+@Configuration
+public class WebConfig implements WebMvcConfigurer {
+
+	private final String[] allowedOrigins;
+
+	public WebConfig(
+			@Value("${app.cors.allowed-origins:http://localhost:5173,http://127.0.0.1:5173}") String allowedOrigins
+	) {
+		this.allowedOrigins = Arrays.stream(allowedOrigins.split(","))
+				.map(String::trim)
+				.filter(origin -> !origin.isBlank())
+				.toArray(String[]::new);
+	}
+
+	@Override
+	public void addCorsMappings(CorsRegistry registry) {
+		registry.addMapping("/api/**")
+				.allowedOrigins(allowedOrigins)
+				.allowedMethods("GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS")
+				.allowedHeaders("*")
+				.maxAge(3600);
+	}
+}
diff --git a/backend/src/test/java/com/ssafy/salmanhae/controller/property/PropertyHttpIntegrationTest.java b/backend/src/test/java/com/ssafy/salmanhae/controller/property/PropertyHttpIntegrationTest.java
index 0227dd9..1c5eefc 100644
--- a/backend/src/test/java/com/ssafy/salmanhae/controller/property/PropertyHttpIntegrationTest.java
+++ b/backend/src/test/java/com/ssafy/salmanhae/controller/property/PropertyHttpIntegrationTest.java
@@ -8,6 +8,9 @@
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.boot.test.context.SpringBootTest;
 import org.springframework.boot.test.web.client.TestRestTemplate;
+import org.springframework.http.HttpEntity;
+import org.springframework.http.HttpHeaders;
+import org.springframework.http.HttpMethod;
 import org.springframework.http.HttpStatus;
 import org.springframework.http.ResponseEntity;
 import org.springframework.test.context.ActiveProfiles;
@@ -51,4 +54,21 @@ void detailEndpointReturnsNotFoundForMissingProperty() {
 		assertThat(notFoundResponse.getStatusCode()).isEqualTo(HttpStatus.NOT_FOUND);
 		assertThat(notFoundResponse.getBody()).containsEntry("code", "PROPERTY_NOT_FOUND");
 	}
+
+	@Test
+	void propertyApiAllowsLocalFrontendOrigin() {
+		HttpHeaders headers = new HttpHeaders();
+		headers.setOrigin("http://127.0.0.1:5173");
+		headers.setAccessControlRequestMethod(HttpMethod.GET);
+
+		ResponseEntity<Void> preflightResponse = restTemplate.exchange(
+				"/api/v1/properties?west=126.93&east=126.94&south=37.46&north=37.48",
+				HttpMethod.OPTIONS,
+				new HttpEntity<>(headers),
+				Void.class
+		);
+
+		assertThat(preflightResponse.getStatusCode()).isEqualTo(HttpStatus.OK);
+		assertThat(preflightResponse.getHeaders().getAccessControlAllowOrigin()).isEqualTo("http://127.0.0.1:5173");
+	}
 }

From 794690775e03843150623922a3e5cef380653258 Mon Sep 17 00:00:00 2001
From: HOKAGO-MEMORIES <minchotejava@gmail.com>
Date: Fri, 19 Jun 2026 02:10:28 +0900
Subject: [PATCH 5/5] =?UTF-8?q?fix(fe):=20=EC=A7=80=EB=8F=84=20=EC=97=B0?=
 =?UTF-8?q?=EB=8F=99=20=EB=A6=AC=EB=B7=B0=20=EB=B3=B4=EC=99=84=20(#11)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/.env.example                          |  2 +-
 frontend/src/store/mapStore.js                | 15 ++++--
 frontend/src/utils/naverMaps.js               | 49 ++++++++++++++++---
 frontend/src/views/MapExplorer.vue            |  3 ++
 .../property-map-fe/phase2-property-map-fe.md |  3 +-
 5 files changed, 61 insertions(+), 11 deletions(-)

diff --git a/backend/.env.example b/backend/.env.example
index f327370..5ef0e9f 100644
--- a/backend/.env.example
+++ b/backend/.env.example
@@ -2,9 +2,9 @@
 # Use these values when running the backend locally.
 # Example:
 # SUPABASE_DB_URL=jdbc:postgresql://aws-0-ap-northeast-2.pooler.supabase.com:6543/postgres?sslmode=require
+SUPABASE_DB_PASSWORD=
 SUPABASE_DB_URL=
 SUPABASE_DB_USERNAME=
-SUPABASE_DB_PASSWORD=
 
 # Comma-separated frontend origins allowed to call /api/** from browsers.
 APP_CORS_ALLOWED_ORIGINS=http://localhost:5173,http://127.0.0.1:5173
diff --git a/frontend/src/store/mapStore.js b/frontend/src/store/mapStore.js
index 896742c..e7a19d2 100644
--- a/frontend/src/store/mapStore.js
+++ b/frontend/src/store/mapStore.js
@@ -43,7 +43,8 @@ export default defineStore('map', {
     error: '',
     detailError: '',
     lastFetchedAt: null,
-    requestSeq: 0
+    requestSeq: 0,
+    detailRequestSeq: 0
   }),
   getters: {
     regions: () => [
@@ -146,23 +147,31 @@ export default defineStore('map', {
       }
     },
     async selectProperty(id) {
+      const seq = ++this.detailRequestSeq
       this.selectedPropertyId = id
       this.detailError = ''
       this.selectedProperty = this.properties.find((property) => property.id === id) || null
       this.isDetailLoading = true
 
       try {
-        this.selectedProperty = await fetchPropertyDetail(id)
+        const property = await fetchPropertyDetail(id)
+        if (seq !== this.detailRequestSeq || this.selectedPropertyId !== id) return
+        this.selectedProperty = property
       } catch (error) {
+        if (seq !== this.detailRequestSeq || this.selectedPropertyId !== id) return
         this.detailError = error.response?.data?.message || '매물 상세 정보를 불러오지 못했습니다.'
       } finally {
-        this.isDetailLoading = false
+        if (seq === this.detailRequestSeq) {
+          this.isDetailLoading = false
+        }
       }
     },
     closeProperty() {
+      this.detailRequestSeq += 1
       this.selectedPropertyId = null
       this.selectedProperty = null
       this.detailError = ''
+      this.isDetailLoading = false
     }
   }
 })
diff --git a/frontend/src/utils/naverMaps.js b/frontend/src/utils/naverMaps.js
index 1efe58c..c90381f 100644
--- a/frontend/src/utils/naverMaps.js
+++ b/frontend/src/utils/naverMaps.js
@@ -1,5 +1,18 @@
 let sdkPromise
 
+const resolveIfReady = (resolve) => {
+  if (window.naver?.maps) {
+    resolve(window.naver.maps)
+    return true
+  }
+  return false
+}
+
+const rejectAndAllowRetry = (reject, message) => {
+  sdkPromise = null
+  reject(new Error(message))
+}
+
 export const loadNaverMaps = () => {
   if (typeof window === 'undefined') {
     return Promise.reject(new Error('Naver Maps SDK can only be loaded in the browser.'))
@@ -21,23 +34,47 @@ export const loadNaverMaps = () => {
   sdkPromise = new Promise((resolve, reject) => {
     const existingScript = document.getElementById('naver-map-sdk')
     if (existingScript) {
-      existingScript.addEventListener('load', () => resolve(window.naver.maps), { once: true })
-      existingScript.addEventListener('error', () => reject(new Error('Failed to load Naver Maps SDK.')), { once: true })
+      if (resolveIfReady(resolve)) return
+
+      const scriptState = existingScript.dataset.loadState
+      const readyState = existingScript.readyState
+      if (scriptState === 'error' || scriptState === 'loaded' || readyState === 'complete') {
+        existingScript.remove()
+      } else {
+        existingScript.addEventListener('load', () => {
+          if (!resolveIfReady(resolve)) {
+            rejectAndAllowRetry(reject, 'Naver Maps SDK loaded without maps namespace.')
+          }
+        }, { once: true })
+        existingScript.addEventListener('error', () => {
+          existingScript.dataset.loadState = 'error'
+          rejectAndAllowRetry(reject, 'Failed to load Naver Maps SDK.')
+        }, { once: true })
+        return
+      }
+    }
+
+    if (document.getElementById('naver-map-sdk')) {
       return
     }
 
     const script = document.createElement('script')
     script.id = 'naver-map-sdk'
     script.async = true
+    script.dataset.loadState = 'loading'
     script.src = `https://oapi.map.naver.com/openapi/v3/maps.js?ncpKeyId=${encodeURIComponent(clientId)}`
     script.onload = () => {
-      if (window.naver?.maps) {
-        resolve(window.naver.maps)
+      script.dataset.loadState = 'loaded'
+      if (resolveIfReady(resolve)) {
         return
       }
-      reject(new Error('Naver Maps SDK loaded without maps namespace.'))
+      rejectAndAllowRetry(reject, 'Naver Maps SDK loaded without maps namespace.')
+    }
+    script.onerror = () => {
+      script.dataset.loadState = 'error'
+      script.remove()
+      rejectAndAllowRetry(reject, 'Failed to load Naver Maps SDK.')
     }
-    script.onerror = () => reject(new Error('Failed to load Naver Maps SDK.'))
     document.head.appendChild(script)
   })
 
diff --git a/frontend/src/views/MapExplorer.vue b/frontend/src/views/MapExplorer.vue
index 173f6e0..bcc6407 100644
--- a/frontend/src/views/MapExplorer.vue
+++ b/frontend/src/views/MapExplorer.vue
@@ -129,7 +129,10 @@
               'cursor-pointer rounded-xl border p-3 transition',
               store.selectedPropertyId === property.id ? 'border-brand bg-brand-light shadow-sm' : 'border-slate-200 bg-slate-50 hover:bg-slate-100'
             ]"
+            tabindex="0"
             @click="store.selectProperty(property.id)"
+            @keydown.enter="store.selectProperty(property.id)"
+            @keydown.space.prevent="store.selectProperty(property.id)"
           >
             <div class="flex items-start justify-between gap-3">
               <div class="min-w-0">
diff --git a/phases/property-map-fe/phase2-property-map-fe.md b/phases/property-map-fe/phase2-property-map-fe.md
index 56b6127..a8c0873 100644
--- a/phases/property-map-fe/phase2-property-map-fe.md
+++ b/phases/property-map-fe/phase2-property-map-fe.md
@@ -5,6 +5,7 @@ Connect the F-1 property search UI to the Spring Boot Property API and show retu
 
 ## Files
 - `frontend/.env.example` - document frontend API and Naver Maps environment variables.
+- `frontend/pnpm-workspace.yaml` - correct the frontend pnpm workspace settings so local install/build commands work.
 - `frontend/src/api/http.js` - create the shared Axios client for Spring Boot REST calls.
 - `frontend/src/api/properties.js` - add Property API request helpers.
 - `frontend/src/utils/naverMaps.js` - load the Naver Maps SDK from `VITE_NAVER_MAP_CLIENT_ID`.
@@ -25,4 +26,4 @@ Connect the F-1 property search UI to the Spring Boot Property API and show retu
 - API response contracts follow `docs/08_API_SPEC.md`.
 
 ## Implementation Instructions
-Use `VITE_API_BASE_URL` for the Spring Boot base URL and `VITE_NAVER_MAP_CLIENT_ID` for the browser map SDK. Keep the initial map centered around the seeded Seoul property data, then fetch by map viewport after the SDK is ready and whenever the map becomes idle after movement or zoom.
+Use `VITE_API_BASE_URL` for the Spring Boot base URL and `VITE_NAVER_MAP_CLIENT_ID` for the browser map SDK. Initialize the map with a fixed Seoul viewport centered at latitude `37.5665`, longitude `126.9780`, zoom `12`, and fallback bounds `west=126.76`, `east=127.18`, `south=37.42`, `north=37.66`. Fetch properties by the current map bounds after the SDK is ready and whenever the map becomes idle after movement or zoom. If the backend returns no properties, keep this fixed viewport and show the empty state rather than auto-fitting or panning to another region.