Merge pull request #61 from full-ownership/feature/map

Feature/map

.env

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

src/App.vue

@@ -3,15 +3,12 @@ import HeaderView from '@/views/HeaderView.vue'
 import FooterView from '@/views/FooterView.vue'
 import MainView from '@/views/MainView.vue'
 import ChatbotButton from './Component/Chatbot/ChatbotButton.vue'
-
-
-
 </script>
 
 <template>
   <div>
     <!-- <HeaderView /> -->
-    <HeaderView />
+    <HeaderView class="fixed z-50"/>
     <MainView />
 
   </div>

src/stores/mapCard.js

@@ -6,6 +6,8 @@ export const useHouseInfoStore = defineStore('houseInfo', {
 
   state: () => ({
     houseInfos: { data: [] }, // 상태 정의 (초기값)
+    houseDeals: { data: [] },
+    houseNames: { data: [] }, // 거래 정보를 저장할 상태 추가 // 거래 정보를 저장할 상태 추가
   }),
   actions: {
     async fetchHouseInfo(params) {
@@ -62,6 +64,38 @@ export const useHouseInfoStore = defineStore('houseInfo', {
       }
     },
 
+      //---------------------------------------------------------
+      // 특정 aptSeq로 거래 정보를 가져오는 메서드
+      // 특정 aptSeq로 거래 정보를 가져오는 메서드
+      async fetchHouseDeals(aptSeq) {
+        try {
+          const endpoint = `/api/house-info/deals/${aptSeq}`;
+          console.log(endpoint)
+          // API 호출
+          const response = await apiClient.get(endpoint);
+
+          this.houseDeals = response.data.data; // 응답 데이터를 상태에 저장
+          console.log("거래 정보 데이터:", response.data.data);
+        } catch (error) {
+          console.error("거래 정보를 가져오는데 실패했습니다:", error);
+        }
+      }
+,
+      async fetchHouseNames() {
+        try {
+          const endpoint = `/api/house-info/building-name`;
+          console.log('이름 가져오는 맵카드');
+          console.log(endpoint)
+          // API 호출
+          const response = await apiClient.get(endpoint);
+          this.houseNames = response.data.data; // 응답 데이터를 상태에 저장
+          console.log("이름데이터 ", response.data.data);
+
+        } catch (error) {
+          console.error("이름데이터를 가져오는데 실패했습니다:", error);
+        }
+      }
+
 
 
 

src/utils/Trie.js

@@ -0,0 +1,46 @@
+class TrieNode {
+    constructor() {
+      this.children = {};
+      this.isEndOfWord = false;
+    }
+  }
+
+  class Trie {
+    constructor() {
+      this.root = new TrieNode();
+    }
+
+    insert(word) {
+      let node = this.root;
+      for (const char of word) {
+        if (!node.children[char]) {
+          node.children[char] = new TrieNode();
+        }
+        node = node.children[char];
+      }
+      node.isEndOfWord = true;
+    }
+
+    search(prefix) {
+      let node = this.root;
+      for (const char of prefix) {
+        if (!node.children[char]) {
+          return [];
+        }
+        node = node.children[char];
+      }
+      return this._collectWords(node, prefix);
+    }
+
+    _collectWords(node, prefix) {
+      const results = [];
+      if (node.isEndOfWord) {
+        results.push(prefix);
+      }
+      for (const [char, childNode] of Object.entries(node.children)) {
+        results.push(...this._collectWords(childNode, prefix + char));
+      }
+      return results;
+    }
+  }
+

src/views/HeaderView.vue

@@ -1,27 +1,39 @@
 <template>
-  <header class="h-20 font-PretendardRegular fixed inset-x-0 top-0 z-50 bg-white text-gray-700 body-font border-b border-gray-200">
+  <header class="h-20 font-PretendardRegular fixed inset-x-0 top-0 z-50 bg-white text-gray-700 body-font border-b border-gray-200
+  flex justify-center items-center
+  ">
     <div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
       <div class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
         <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({ 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">
-        <button @click="goToMyPage">
-        {{ userStore.userInfos.data.nickname}}
-        </button>
-      </div>
-      <div v-else>
-        <button
-        type="button"
-        class="mb-0 text-grey bg-white-400 hover:bg-blue-400 hover:text-white border focus:outline-none focus:ring-blue-300 font-medium text-sm px-5 py-2.5 text-center dark:hover:bg-blue-700 dark:focus:white"
-        @click="goToLogin">
-          로그인 | 회원가입
-        </button>
-      </div>
-  </div>
+          <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>
+          <div v-if="userStore.userInfos.data.nickname" >
+            <button @click="goToMyPage" 
+            class="
+            flex flex-row items-center
+            mb-0 text-grey bg-white-400 hover:bg-blue-400 hover:text-white rounded-lg focus:outline-none focus:ring-blue-300 font-medium text-sm px-4 py-2 text-center dark:hover:bg-blue-700 dark:focus:white">
+            <span class="mr-1">
+              <img alt="logo" src="@/assets/icons/account.png" class="w-[30px] "/>
+            </span>
+            <span class="text-xs font-Pretendard">
+              {{ userStore.userInfos.data.nickname}}
+            </span>
+            </button>
+          </div>
+          <div v-else>
+            <button
+            type="button"
+            class="mb-0 text-grey bg-white-400 hover:bg-blue-400 hover:text-white border focus:outline-none focus:ring-blue-300 font-medium text-sm px-5 py-2.5 text-center dark:hover:bg-blue-700 dark:focus:white"
+            @click="goToLogin">
+              로그인 | 회원가입
+            </button>
+          </div>
+        </div>
       </nav>
     </div>
   </header>

src/views/HomeView.vue

@@ -27,7 +27,7 @@ const goToMapView = (param) => {
   <div class="flex bg-gray-100 h-[100vh] items-center justify-center
   ">
     <!-- 헤더 높이만큼 상단 패딩 추가 -->
-    <div class="w-[75vw] mx-auto flex flex-col  items-center p-12 ">
+    <div class="w-[75vw] mx-auto flex flex-col items-center pt-12 ">
       <!-- 서치바 영역 -->
       <form class="items-center max-w-lg mx-auto w-2/3 mb-10">
         <label for="simple-search" class="sr-only">Search</label>