[Phase 2] feat(fe): 지도 매물 API 연동 및 마커 표시

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

frontend/.env.example

@@ -1 +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

frontend/pnpm-workspace.yaml

@@ -1,3 +1,6 @@
+packages:
+  - .
+
 allowBuilds:
   esbuild: true
   vue-demi: true

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

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
+}

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); }