Merge pull request #65 from full-ownership/feature/search

femmefatalehaein · web-flow · commit ab442289f05a · 2024-11-26T22:00:34.000+09:00
feat : 자동완성검색 by Trie 알고리즘
diff --git a/src/stores/mapCard.js b/src/stores/mapCard.js
@@ -73,7 +73,6 @@ export const useHouseInfoStore = defineStore('houseInfo', {
           console.log(endpoint)
           // API 호출
           const response = await apiClient.get(endpoint);
-    
           this.houseDeals = response.data.data; // 응답 데이터를 상태에 저장
           console.log("거래 정보 데이터:", response.data.data);
         } catch (error) {
@@ -84,12 +83,10 @@ export const useHouseInfoStore = defineStore('houseInfo', {
       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);
diff --git a/src/views/CardView.vue b/src/views/CardView.vue
@@ -19,7 +19,6 @@ defineProps({
 // 랜덤 이미지를 설정하는 변수
 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>
diff --git a/src/views/MapView.vue b/src/views/MapView.vue
@@ -302,7 +302,6 @@ const state = reactive({
 
 const search = () => {
 console.log(state.검색어)
-console.log('검색어')
 applyFilter1()
  }
 
@@ -318,12 +317,10 @@ const toggleSlider = (filter) => {
 };
 
 const applyFilter1 = async() => {
-
   const query1 = { buildingUse: '아파트',
                   fromArea: state.면적[0],
                   toArea:state.면적[1],
                    keyword:state.검색어 }
-
   const queryString1 = new URLSearchParams(query1).toString();
   await fetchData(queryString1); // 데이터 로드
 };
@@ -340,7 +337,6 @@ const navigateTo = (param) => {
   router.push({ name: 'map', params: { param } }); // 이름과 params를 명확히 지정
 };
 
-
 //*상세 정보 불러오는 곳
 const selectedHouse = ref(null); // 반드시 ref로 선언
 
@@ -364,7 +360,7 @@ const selectHouse = (house) => {
 
 const findDealsByAptseq = async (aptSeq) => {
   try {
-    console.log(`Fetching deals for aptSeq: ${aptSeq}`);
+    // console.log(`Fetching deals for aptSeq: ${aptSeq}`);
     await houseInfoStore.fetchHouseDeals(aptSeq); // Pinia 스토어 호출
 
   } catch (error) {
@@ -410,7 +406,6 @@ class TrieNode {
       }
       return this._collectWords(node, prefix);
     }
-
     _collectWords(node, prefix) {
       const results = [];
       if (node.isEndOfWord) {
@@ -435,53 +430,82 @@ onMounted(async () => {
   houseNames.value = Array.isArray(houseInfoStore.houseNames?.data)
   ? houseInfoStore.houseNames.data
   : [];
-
-  // 트라이에 이름 삽입
-  console.log("트라이가 생성전", trie);
-  console.log('houseNames.value의 타입:', Array.isArray(houseNames.value) ? '배열' : typeof houseNames.value);
-  console.log('houseNames.value의 타입:', Array.isArray(houseNames.value) ? '배열' : typeof houseNames.value);
   for (const name of houseInfoStore.houseNames) {
    if (name?.aptNm) { // aptNm이 존재하는지 확인
     trie.insert(name.aptNm);
-    console.log(`삽입된 이름: ${name.aptNm}`);
   } else {
     console.warn("aptNm이 없는 데이터:", name);
   }
   }
-
-  console.log("트라이가 생성되었습니다:", trie);
 });
 
 // 검색 처리
+// const updateSearchResults = () => {
+//   console.log('검색처리중')
+//   if (!searchQuery.value || searchQuery.value.trim() === "") {
+//     filteredNames.value = [];
+//     console.log("검색어가 비어 있습니다.");
+//     return;
+//   }
+//   filteredNames.value = trie.search(searchQuery.value.trim());
+// };
 const updateSearchResults = () => {
-  console.log('검색처리중')
-  if (!searchQuery.value || searchQuery.value.trim() === "") {
+  if (!searchQuery.value.trim()) {
     filteredNames.value = [];
-    console.log("검색어가 비어 있습니다.");
     return;
   }
 
-  filteredNames.value = trie.search(searchQuery.value.trim());
-  console.log("검색 결과:", JSON.stringify(filteredNames.value)); // 일치하는 결과 콘솔 출력
+  const results = [];
+  let node = trie.root;
+  const prefix = searchQuery.value.trim();
+
+  for (const char of prefix) {
+    if (!node.children[char]) {
+      filteredNames.value = []; // 검색어에 맞는 결과가 없으면 초기화
+      return;
+    }
+    node = node.children[char];
+  }
+
+  // 결과를 최대 5개까지만 수집
+  const collectWords = (currentNode, currentWord) => {
+    if (results.length >= 5) return; // 5개를 찾으면 종료
+    if (currentNode.isEndOfWord) {
+      results.push(currentWord);
+    }
+    for (const [char, childNode] of Object.entries(currentNode.children)) {
+      collectWords(childNode, currentWord + char);
+    }
+  };
+
+  collectWords(node, prefix);
+  filteredNames.value = results; // 결과 저장
 };
+
+const selectKeyword = (name) =>{
+  searchQuery.value=name
+}
+
+
+
 </script>
 <template>
   <div class="flex flex-row items-center w-full h-[100vh] overflow-hidden ">
     <!-- 지도 및 필터 영역 -->
-    <div class="flex flex-col justify-start w-full h-full mt-40">
+    <div class="relative flex flex-col justify-start w-full h-full mt-40">
       <!-- 필터 전체 버튼 -->
-      <div class="flex flex-row items-center py-4 h-14 border-b border-gray-200 z-100">
-        <!--검색 창-->
-        <div class="relative w-[370px] ml-4 mr-2 ">
+      <div class="flex flex-row items-center py-4 h-14 border-b border-gray-200 z-100 relative">
+         <!--검색 창-->
+        <div class="w-[370px] ml-4 mr-2 relative justify-center">
           <input
             v-model="searchQuery"
             type="text"
             @input="updateSearchResults"
             placeholder="찾고자하는 아파트 이름을 입력하세요"
-            class="absolute w-full h-8 px-4 pr-10 text-sm text-gray-700 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"/>
+            class="w-full  h-8 px-4 pr-10 text-sm text-gray-700 border border-gray-300 rounded-lg shadow-sm focus:outline-none "/>
           <button
             type="button"
-            class="absolute inset-y-0 right-0 flex items-center px-3 text-gray-500 hover:text-gray-700"
+            class="absolute flex justify-center right-0 top-2 px-3 text-gray-500 hover:text-gray-700"
             @click="search">
               <svg
                 class="w-4 h-4"
@@ -498,19 +522,24 @@ const updateSearchResults = () => {
               </svg>
           </button>
           <!-- 검색 결과 -->
-          <div v-if="filteredNames.length > 0" class="absolute bg-yellow-400 z-100">
-            <p>검색 결과:</p>
+        </div>
+     <!-- 검색 결과 -->
+        <div v-if="filteredNames.length > 0" class="absolute w-[360px] h-auto max-h-96 z-100 top-12 left-4 shadow-lg rounded-md border border-gray-300">
+          <!-- 결과 없음 메시지 -->
+          <div class="bg-white text-gray-700 px-4 py-2 font-semibold border-b border-gray-300">
             <ul>
-              <li v-for="(name, index) in filteredNames" :key="index">
-                {{ name }}
-              </li>
-            </ul>
-          </div>
-          <div v-else>
-            <p>일치하는 결과가 없습니다.</p>
+            <li v-for="(name, index) in filteredNames"
+              :key="index"
+              class="px-4 py-2 hover:bg-blue-100 cursor-pointer"
+              @click="selectKeyword(name)">
+              {{ name }}
+            </li>
+          </ul>
           </div>
+          <!-- 검색 결과 리스트 -->
         </div>
 
+
         <div class="relative inline-block text-left ml-2">
         <!-- 버튼 -->
         <button
@@ -587,6 +616,7 @@ const updateSearchResults = () => {
               </button>
             </div>
           </div>
+      
         </div>
         <!-- 필요한 필터 수 만큼 반복 -->
         <button type="button" class="relative inline-block text-left ml-2 h-8 px-2 py-2 bg-white border border-gray-300 shadow-sm focus:ring-indigo-500">
@@ -596,22 +626,24 @@ const updateSearchResults = () => {
         </button>
       </div>
       <!-- 리스트와 지도 영역 -->
-      <div class="flex flex-row h-full font-Pretendard text-gray-600 relaitvie">
+
+          
+      <div class="flex h-full font-Pretendard text-gray-600 z-10">
         <div class="flex flex-col h-full rounded-lg">
-          <div class="flex flex-row p-2 text-s bg-blue-100">
-            <p class="mr-1 ml-2 cursor-pointer font-bold">인기순</p>
-            <p class="mr-1 cursor-pointer font-bold">가격순</p>
-            <p class="mr-1 cursor-pointer font-bold">면적순</p>
-            <FilterButton></FilterButton>
-          </div>
           <!-- 목록 영역 추가할 수 있습니다 -->
-          <div class="p-2 overflow-y-auto">
-            <div class="text-center ">
+          <div class="p-2 overflow-y-auto ">
+
+            <div class="flex flex-row p-2 text-s h-[24px] fixed bg-white-800 z-20">
+              <p class="mr-1 ml-2 cursor-pointer font-bold">인기순</p>
+              <p class="mr-1 cursor-pointer font-bold">가격순</p>
+              <p class="mr-1 cursor-pointer font-bold">면적순</p>
+            </div>
+            <div class="text-center">
               <div v-for="name in houseNames" :key="name.aptSeq">
                 {{ name.aptNm }}
               </div>
-          </div>
-              <div v-for="house in houseInfos" :key="house.id" >
+            </div>
+              <div v-for="house in houseInfos" :key="house.id" class="z-10">
                 <CardView
                 :jibun="house.jibun"
                 :imgUrl="house.imgUrl"
