Merge pull request #47 from full-ownership/feature/router

Feature/router

Author: femmefatalehaein

.env

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

src/stores/mapCard.js

@@ -26,5 +26,46 @@ export const useHouseInfoStore = defineStore('houseInfo', {
         console.log('데이터를 가져오는데 실패했습니다.', error);
       }
     },
+    
+    // 필터링된 데이터를 가져오는 메서드
+    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.error('필터링된 데이터를 가져오는데 실패했습니다.', error);
+      }
+    },
+
+
+
+
   },
 });

src/views/MapView.vue

@@ -216,9 +216,9 @@ document.addEventListener("DOMContentLoaded", () => {
 
 const state = reactive({
   가격: [0, 10000000], // 초기값
-  면적: [0, 10000000],
-  사용승인일: [0, 10000000],
-  층수: [0, 10000000],
+  면적: [0,200],
+  사용승인일: [1990, 2024],
+  층수: [0, 40],
 });
 
 const isSliderVisible = ref(""); // 현재 열려 있는 슬라이더 필터 이름
@@ -228,15 +228,37 @@ const toggleSlider = (filter) => {
     // 이미 열려 있는 슬라이더를 클릭하면 닫음
     isSliderVisible.value = "";
   } else {
-    // 다른 슬라이더를 클릭하면 현재 슬라이더를 열고, 나머지는 닫음
     isSliderVisible.value = filter;
   }
 };
 
-const applyFilter = () => {
+const applyFilter = async() => {
+
   for (const [key, value] of Object.entries(state)) {
     console.log(`${key}: ${value[0]} ~ ${value[1]}`);
     //console.log(`${value[0]}`)
+    // 필터링 조건 구성
+    const filterParams = {// 전달된 param 값
+    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],
+  };
+  console.log("필터 파라미터:", filterParams);
+   // Pinia store의 fetchFilteredHouseInfo 호출
+   try {
+    isLoading.value = true; // 로딩 시작
+    await houseInfoStore.fetchFilteredHouseInfo(filterParams); // 비동기 작업
+    isLoading.value = false; // 로딩 종료
+  } catch (error) {
+    console.error("필터 적용 중 에러:", error);
+    isLoading.value = false; // 로딩 실패 시에도 종료
+  }
   }
 };
 
@@ -344,7 +366,9 @@ const initFilter = () => {
             v-model="state[filter]"
             style="width: 100%"
             exponential
-            :max="1000000000">
+            :max="1000000"
+            
+            >
             <template #suffix>만원</template>
           </RangeSlider>
           <div class="flex flex-row justify-end">

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>