Merge pull request #53 from full-ownership/mapp

Mapp

Author: femmefatalehaein

.env

@@ -1 +1 @@
-VITE_API_BASE_URL=https://back.newjeaps.com
+VITE_API_BASE_URL=http://localhost:8080

src/assets/img/apt/apt (1).jpg

@@ -26,7 +26,7 @@ const routes = [
         component: LoginView,
       },
       {
-        path: 'map/:param', // :param은 동적 라우트 파라미터
+        path: 'map/', // :param은 동적 라우트 파라미터
         name: 'map',
         component: MapView,
       },

src/assets/img/apt/apt (10).jpg

@@ -3,32 +3,30 @@ import axios from 'axios';
 import apiClient from '@/api'; // 위에서 만든 axios 인스턴스를 import
 
 export const useHouseInfoStore = defineStore('houseInfo', {
+
   state: () => ({
     houseInfos: { data: [] }, // 상태 정의 (초기값)
   }),
   actions: {
-    async fetchHouseInfo(type) {
+    async fetchHouseInfo(params) {
       try {
-        // URL을 BASE_URL과 합쳐서 사용
-        console.log("맵카드")
-        console.log(apiClient)
-        const response = await apiClient.get(`/api/houseinfos/${type}`);
-        // response.data.data를 houseInfos에 할당 (주요 수정 부분)
-        this.houseInfos= response.data.data;
-
-        // response.data를 콘솔에 출력하여 디버깅
-
-        console.log(response.data.data);
-
-
-  
+        console.log("fetchHousdeInfo 동작시도")
+        const queryParams = new URLSearchParams(params).toString(); // 쿼리 문자열 생성
+        const endpoint = `/api/house-info/range?${queryParams}`;
+        // API 요청
+        console.log(endpoint)
+        const response = await apiClient.get(endpoint);
+        this.houseInfos = response.data.data;
+        console.log("응답 데이터:", response.data.data);
+        //console.log(response.data.data);
       } catch (error) {
-        console.log('데이터를 가져오는데 실패했습니다.', error);
+        console.error("데이터를 가져오는데 실패했습니다.", error);
       }
-    },
-    
+    }
+     ,
+
     // 필터링된 데이터를 가져오는 메서드
-    async fetchFilteredHouseInfo({ 
+    async fetchFilteredHouseInfo({
       buildingUse,
       fromPrice,
       toPrice,

src/assets/img/apt/apt (11).jpg

@@ -3,7 +3,7 @@
     <div class="bg-white border-b-2 flex flex-row py-3">
       <!-- 이미지 섹션 -->
        <div class="bg-pink-100 w-28 h-28 mx-2">
-         이미지
+        <img :src="imgUrl" alt="이미지" class="w-full h-full object-cover" />
        </div>
       <!-- 내용 섹션 -->
       <div class="ml-2">
@@ -16,16 +16,22 @@
           <span class="text-sm text-gray-600">
             {{ legalName }}</span>
         </div>
-          <div class="pl-1">
-            <span class="text-md">최소 </span>
-            <span class="text-sm">{{ minPropertyPrice }}</span>
-            <span class="text-md">만원</span>
-            <span class="text-md"> - </span>
-            <span class="text-md">최대</span>
-            <span class="text-sm">{{ maxPropertyPrice }}</span>
-            <span class="text-md">만원</span>
+          <div class="pl-1 flex flex-row justify-center">
+            <div>
+              <span class="bg-blue-500 text-white text-xxs px-2 py-1 mr-1 text-center">
+              평당가
+              </span>
+            </div>
+            <div class="bg-pink-200 px-2">
+              <span class="text-sm">{{ minPropertyPrice }}</span>
+              <span class="text-md">만원</span>
+              <span class="text-md"> - </span>
+              <span class="text-sm">{{ maxPropertyPrice }}</span>
+              <span class="text-md">만원</span>
+            </div>
+
           </div>
-          
+
         <!-- 버튼 -->
       </div>
     </div>
@@ -35,6 +41,7 @@
 <script setup>
 
 defineProps({
+  imgUrl : String,
   id: Number, // int → Number
   buildingUse: String,
   buildingName: String,
@@ -43,11 +50,8 @@ defineProps({
   minPropertyPrice: Number, // double → Number
   maxPropertyPrice: Number  // double → Number
 });
-
 </script>
 
 <style scoped>
 /* TailwindCSS 스타일을 사용하기 때문에 별도의 추가 스타일은 필요하지 않습니다. */
-
-
 </style>

src/assets/img/apt/apt (12).jpg

@@ -5,7 +5,7 @@
         <img alt="logo" src="@/assets/img/logo.png" class="w-24 -mr-1" @click="goToHome" />
       </div>
       <nav class="md:ml-auto flex flex-wrap items-center text-base justify-center">
-        <a @click="goToMapView('아파트')" href="" class="mr-5 hover:text-gray-900">지도</a>
+        <a @click="goToMapView({ buildingUse: '아파트', sidoName: '서울특별시', gugunName: '종로구' });"  class="mr-5 hover:text-gray-900">지도</a>
         <a @click="goToIntroductionView" class="mr-5 hover:text-gray-900">회사소개</a>
         <div>
       <div v-if="userStore.userInfos.data.nickname">
@@ -45,10 +45,18 @@ const goToLogin = () => {
 };
 
 const goToMapView = (param) => {
-  //console.log('mapView 등장')
-  console.log(param)
-  router.push({ name: 'map', params: {param} } );
-}
+
+  console.log('동작')
+
+  if (!param) {
+    console.error("param is not provided");
+    return;
+  }
+
+  console.log("Received param:", param);
+  // Router로 이동
+  router.push({ name: 'map', query: { ...param } });
+};
 
 const goToIntroductionView = () =>{
   router.push({name: 'introduction'})

src/assets/img/apt/apt (13).jpg

@@ -9,7 +9,6 @@ import RangeSlider from "vue-simple-range-slider";
 import "vue-simple-range-slider/css";
 import { useRoute, useRouter } from 'vue-router';
 
-
 const map = ref(null); // Kakao Map 객체
 const polygons = ref([]); // 생성된 폴리곤 객체 배열
 const overlays = ref([]); // 생성된 오버레이 객체 배열
@@ -45,9 +44,14 @@ const onLoadKakaoMap = async (mapRef) => {
   map.value = mapRef;
   console.log("Kakao Map Loaded:", map.value);
 
+  // 초기 로딩 시 sido.json으로 도 경계선 로드
+  await init("/sido.json");
+
+
   // 초기 로딩 시 광역시/도 데이터 로드
   await loadPolygonData("/sido.json");
 
+
   // 줌 레벨 변경 이벤트
   kakao.maps.event.addListener(map.value, "zoom_changed", async () => {
     level.value = map.value.getLevel();
@@ -237,17 +241,15 @@ const fetchData = async (type) => {
 };
 
 const route = useRoute();
-// params로 전달된 "param" 값
-
+console.log(`전달된 route`);
+console.log(route.params);
+console.log("Route query:", route.query);
 
-// 문자열로 변환된 buildingUse
-const buildingUse = route.params.param;
 
-console.log('전달된 파라미터:', buildingUse); // 디버깅용
 
 onMounted(async () => {
   isLoading.value = false;
-  await fetchData(buildingUse); // 데이터 로드
+  await fetchData(route.query); // 데이터 로드
   isLoading.value = true;
 });
 
@@ -259,10 +261,9 @@ watch(
   { immediate: true } // 즉시 실행
 );
 
-// store에서 houseInfos 가져오기
 const houseInfos = computed(() => houseInfoStore.houseInfos);
 
-// DOMContentLoaded 이벤트는 HTML 문서의 모든 콘텐츠가 완전히 로드되었을 때 발생함
+
 document.addEventListener("DOMContentLoaded", () => {
 
   const filterButton = document.getElementById("filterButton");
@@ -279,7 +280,7 @@ document.addEventListener("DOMContentLoaded", () => {
 });
 
 const state = reactive({
-  가격: [0, 10000000], // 초기값
+  가격: [0, 10000000],
   면적: [0,200],
   사용승인일: [1990, 2024],
   층수: [0, 40],
@@ -309,7 +310,9 @@ const initFilter = () => {
     value[0] = 0;
     value[1] = 10000000;
     console.log(`${key}: ${value[0]} ~ ${value[1]}`);
-    //console.log(${value[0]})
+
+    //console.log(`${value[0]}`)
+
   }
 }
 const router = useRouter();
@@ -460,14 +463,14 @@ const navigateTo = (param) => {
           </div>
               <div v-for="house in houseInfos" :key="house.id">
                 <CardView
-                :id="house.id"
-                :buildingUse="house.buildingUse"
-                :buildingName="house.buildingName"
-                :districtName="house.districtName"
-                :legalName="house.legalName"
-                :minPropertyPrice="house.minPropertyPrice"
-                :maxPropertyPrice="house.maxPropertyPrice"
-              />
+                :imgUrl="house.imgUrl"
+                :buildingUse="house.buildingUses"
+                :id="house.aptSeq"
+                :buildingName="house.aptNm"
+                :districtName="house.gugunName"
+                :legalName="house.dongName"
+                :minPropertyPrice="house.minPrice"
+                :maxPropertyPrice="house.maxPrice"/>
               </div>
           </div>
         </div>

src/assets/img/apt/apt (14).jpg

@@ -26,7 +26,7 @@ const userInfoForm = reactive({
   email: '', // 이메일
 });
 
-// 저장 함수 (예: API 호출)
+// 저장 함수 (예: API 호출) ㅇㅇ
 const saveUserInfo = () => {
   console.log('저장된 정보:', userInfoForm);
   // API 호출 예제

src/assets/img/apt/apt (15).jpg

@@ -5,26 +5,26 @@ import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 import vueDevTools from 'vite-plugin-vue-devtools'
 
-// https://vite.dev/config/
 export default defineConfig({
+  //const BASE_URL = import.meta.env.VITE_API_BASE_URL;
   server: {
     port: 3000,
     proxy: {
       '/api': {
-        target: 'https://back.newjeaps.com', // 첫 번째 서버 주소
+        target: "http://localhost:8080", // 환경 변수 사용, // 첫 번째 서버 주소
         changeOrigin: true,
         secure: true,  // https 사용하지 않는 경우 false로 설정
         rewrite: (path) => path.replace(/^\/api/, ''), // 프록시 경로를 적절히 수정
       },
       // 추가적인 프록시 설정이 필요하면 아래와 같이 작성할 수 있습니다.
-  
     },
   },
   plugins: [
     vue(),
     vueJsx(),
     vueDevTools(),
   ],
+
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),