feat : ready for map

.env

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

src/stores/mapCard.js

@@ -32,22 +32,25 @@ export const useHouseInfoStore = defineStore('houseInfo', {
       buildingUse,
       fromPrice,
       toPrice,
-      // fromArea,
-      // toArea,
-      // fromConstructYear,
-      // toConstructYear,
+      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', // 기본 최대값
+          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}`);

src/views/MapView.vue

@@ -216,9 +216,9 @@ document.addEventListener("DOMContentLoaded", () => {
 
 const state = reactive({
   가격: [0, 10000000], // 초기값
-  면적: [0, 10000000],
+  면적: [0,200],
   사용승인일: [1990, 2024],
-  층수: [0, 33],
+  층수: [0, 40],
 });
 
 const isSliderVisible = ref(""); // 현재 열려 있는 슬라이더 필터 이름
@@ -228,12 +228,12 @@ const toggleSlider = (filter) => {
     // 이미 열려 있는 슬라이더를 클릭하면 닫음
     isSliderVisible.value = "";
   } else {
-    // 다른 슬라이더를 클릭하면 현재 슬라이더를 열고, 나머지는 닫음
     isSliderVisible.value = filter;
   }
 };
 
 const applyFilter = async() => {
+
   for (const [key, value] of Object.entries(state)) {
     console.log(`${key}: ${value[0]} ~ ${value[1]}`);
     //console.log(`${value[0]}`)
@@ -242,16 +242,14 @@ const applyFilter = async() => {
     buildingUse,
     fromPrice:state["가격"][0], // "가격"의 최소값
     toPrice:state["가격"][1],
-    //fromArea:state["면적"][0],
-    //toArea:state["면적"][1], // "가격"의 최대값
-    // fromConstructYear:state['사용승인일'][0],
-    // toConstructYear:state['사용승인일'][1],
-    // fromFloor:state['사용승인일'][0],
-    // toFloor:state['층수'][1],
+    fromArea:state["면적"][0],
+    toArea:state["면적"][1], // "가격"의 최대값
+    fromConstructYear:state['사용승인일'][0],
+    toConstructYear:state['사용승인일'][1],
+    fromFloor:state['층수'][0],
+    toFloor:state['층수'][1],
   };
-
   console.log("필터 파라미터:", filterParams);
-
    // Pinia store의 fetchFilteredHouseInfo 호출
    try {
     isLoading.value = true; // 로딩 시작
@@ -261,7 +259,6 @@ const applyFilter = async() => {
     console.error("필터 적용 중 에러:", error);
     isLoading.value = false; // 로딩 실패 시에도 종료
   }
-
   }
 };
 

src/views/MyPageView.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { reactive, ref } from 'vue';
+import { useUserStore } from '@/stores/userStore'; // Pinia 스토어 import
 
 // 탭 데이터 설정
 const tabs = reactive([
@@ -9,35 +10,45 @@ const tabs = reactive([
 
 // 활성화된 탭 상태
 const activeTab = ref(tabs[0]); // 기본값: 첫 번째 탭
+
+// 컴포넌트가 마운트될 때 사용자 닉네임 가져오기
+onMounted(async () => {
+  await userStore.fetchUserInfo(); // 닉네임 가져오기
+  console.log(userStore.userInfos.data.nickname);
+});
+
 </script>
 <template>
     <div class="container mx-auto flex flex-col justify-center items-center mt-8 vh-[100vh] pt-12 bg-whites">
       <div class="bg-pink-100 h-[10%]">
-        <h1 class="text-3xl font-Pretendard font-bold py-4 text-center">MY 다방</h1>
+
+        <h1 class="text-3xl font-Pretendard font-bold py-4 text-center">MY 다방2</h1>
       </div>
       <div class="flex flex-col w-[40%] border-4 border-gray-600 py-12 rounded-lg">
         <div>
           <span>
-            
+
           </span>
         </div>
         <div class="">
           연결된 소셜계정
         </div>
         <div class="">
           닉네임
+          {{ userStore.userInfos.data.nickname}}
         </div>
         <div class="">
           이름
+          {{ userStore.userInfos.data.name}}
         </div>
         <div class="">
           이메일
+          {{ userStore.userInfos.data.email}}
         </div>
 
       </div>
 
-
-
+
     </div>
   </template>