feat : marker 찍기

Author: femmefatalehaein

src/assets/img/home/home (1).jpeg

@@ -26,7 +26,7 @@ const routes = [
         component: LoginView,
       },
       {
-        path: 'map/:param', // :param은 동적 라우트 파라미터
+        path: 'map/', // :param은 동적 라우트 파라미터
         name: 'map',
         component: MapView,
       },
@@ -70,4 +70,4 @@ const router = createRouter({
   routes,
 });
 
-export default router;
+export default router;

src/assets/img/home/home (10).jpeg

@@ -3,28 +3,67 @@ 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("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.error("데이터를 가져오는데 실패했습니다.", error);
+      }
+    }
+     ,
 
-        console.log(response.data.data);
+    // 필터링된 데이터를 가져오는 메서드
+    async fetchFilteredHouseInfo({
+      buildingUse,
+      fromPrice,
+      toPrice,
+      fromArea,
+      toArea,
+      fromConstructYear,
+      toConstructYear,
+      // fromFloor,
+      // toFloor,
+     }) {
+      try {
+        // URL 쿼리 파라미터를 생성
+        const queryParams = new URLSearchParams({
+          buildingUse:buildingUse,
+          fromPrice: fromPrice?.toString() || '0', // 기본값 0
+          toPrice: toPrice?.toString() || '10000000', // 기본 최대값
+          fromArea: fromArea?.toString() || '0', // 기본값 0
+          toArea: toArea?.toString() || '100', // 기본 최대값
+          fromConstructYear: fromConstructYear?.toString() || '1990', // 기본 최대값
+          toConstructYear: toConstructYear?.toString() || '2024', // 기본 최대값
+          // fromFloor: fromFloor?.toString() || '0', // 기본 최대값
+          // toFloor: toFloor?.toString() || '40', // 기본 최대값
+        }).toString();
 
+        console.log("필터링된 데이터 호출 URL:", `/api/houseinfos/range?${queryParams}`);
 
-  
+        // API 요청
+        const response = await apiClient.get(`/api/houseinfos/range?${queryParams}`);
+        this.houseInfos = response.data.data; // 데이터를 상태에 저장
+        console.log("필터링된 데이터:", response.data.data);
       } catch (error) {
-        console.log('데이터를 가져오는데 실패했습니다.', error);
+        console.error('필터링된 데이터를 가져오는데 실패했습니다.', error);
       }
     },
+
+
+
+
   },
-});
+});

src/assets/img/home/home (11).jpeg

@@ -1,53 +1,72 @@
+<script setup>
+import { ref, computed } from 'vue';
+
+defineProps({
+  imgUrl : String,
+  id: Number,
+  jibun: String, // int → Number
+  buildingUse: String,
+  buildingName: String,
+  districtName: String,
+  legalName: String,
+  minPropertyPrice: Number, // double → Number
+  maxPropertyPrice: Number  // double → Number
+});
+
+// 전달받은 imgUrl이 없을 경우 랜덤 이미지를 설정
+// const imgUrl = ref(null); // imgUrl이 null로 초기화
+// 랜덤 이미지를 반환하는 computed
+// 랜덤 이미지를 설정하는 변수
+const randomImg = new URL(`../assets/img/home/home (${Math.floor(Math.random() * 21) + 1}).jpeg`, import.meta.url).href;
+
+console.log(randomImg)
+</script>
+
+<style scoped>
+/* TailwindCSS 스타일을 사용하기 때문에 별도의 추가 스타일은 필요하지 않습니다. */
+</style>
+
 <template>
   <div class="w-[360px] mx-auto p-1 mb-1">
     <div class="bg-white border-b-2 flex flex-row py-3">
-      <!-- 이미지 섹션 -->
-       <div class="bg-pink-100 w-28 h-28 mx-2">
-         이미지
-       </div>
-      <!-- 내용 섹션 -->
+        <!-- 이미지 섹션 -->
+        <div class="bg-pink-100 w-28 h-28 mx-2">
+        <!-- imgUrl이 있으면 imgUrl 사용, 없으면 randomImage -->
+        <img v-if="imgUrl" :src="imgUrl" alt="이미지" class="w-full h-full object-cover" />
+        <img v-else :src="randomImg" alt="랜덤 이미지" class="w-full h-full object-cover" />
+      </div>
+
       <div class="ml-2">
         <span class="inline-flex mb-1 items-center text-xxs w-auto text-gray-600 border-2 border-gray-200 bg-white rounded-lg px-2 text-center">
           {{ buildingUse }}</span>
         <h5 class="text-lg font-bold text-gray-800 pl-1">{{ buildingName }}</h5>
         <div class="pl-1">
           <span class="text-sm text-gray-600">
-            {{ districtName }}</span>
+            {{ districtName }}&nbsp;</span>
+          <span class="text-sm text-gray-600">
+            {{ legalName }}&nbsp;</span>
           <span class="text-sm text-gray-600">
-            {{ legalName }}</span>
+            {{ jibun }}</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 mt-1 flex flex-row justify-center">
+            <div class="flex justify-center">
+              <span class="bg-blue-500 text-white text-xxs px-2 py-1 mr-1 text-center">
+              평당가
+              </span>
+            </div>
+            <div class="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>
   </div>
 </template>
 
-<script setup>
-
-defineProps({
-  id: Number, // int → Number
-  buildingUse: String,
-  buildingName: String,
-  districtName: String,
-  legalName: String,
-  minPropertyPrice: Number, // double → Number
-  maxPropertyPrice: Number  // double → Number
-});
-
-</script>
-
-<style scoped>
-/* TailwindCSS 스타일을 사용하기 때문에 별도의 추가 스타일은 필요하지 않습니다. */
-
-
-</style>

src/assets/img/home/home (12).jpeg

@@ -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'})
@@ -60,10 +68,9 @@ const goToMyPage = () => {
 
 const userStore = useUserStore();
 
-// 컴포넌트가 마운트될 때 사용자 닉네임 가져오기
 onMounted(async () => {
-  await userStore.fetchUserInfo(); // 닉네임 가져오기
+  await userStore.fetchUserInfo();
   console.log(userStore.userInfos.data.nickname);
 });
 
-</script>
+</script>