@@ -10,6 +10,11 @@ import "vue-simple-range-slider/css";
10
10
import { useRoute , useRouter } from ' vue-router' ;
11
11
import BarChart from " @/Component/BarChart.vue" ;
12
12
13
+ import SearchNearByOliveYoung from " @/Component/SearchNearBy/SearchNearByOliveYoung.vue" ;
14
+ import SearchNearByMcDonald from " @/Component/SearchNearBy/SearchNearByMcDonald.vue" ;
15
+ import SearchNearByPharmacy from " @/Component/SearchNearBy/SearchNearByPharmacy.vue" ;
16
+ import SearchNearByStarbucks from " @/Component/SearchNearBy/SearchNearByStarbucks.vue" ;
17
+
13
18
const goChat = (house ) => {
14
19
console .log (" 채팅버튼 선택" )
15
20
console .log (house .aptNm )
@@ -301,8 +306,7 @@ const state = reactive({
301
306
});
302
307
303
308
const search = () => {
304
- console .log (state.검색어)
305
- applyFilter1 ()
309
+ applyFilter ()
306
310
}
307
311
308
312
const isSliderVisible = ref (" " ); // 현재 열려 있는 슬라이더 필터 이름
@@ -316,13 +320,13 @@ const toggleSlider = (filter) => {
316
320
}
317
321
};
318
322
319
- const applyFilter1 = async () => {
320
- const query1 = { buildingUse: ' 아파트' ,
323
+ const applyFilter = async () => {
324
+ const query = { buildingUse: ' 아파트' ,
321
325
fromArea: state.면적[0 ],
322
326
toArea: state.면적[1 ],
323
- keyword: state.검색어 }
324
- const queryString1 = new URLSearchParams (query1 ).toString ();
325
- await fetchData (queryString1 ); // 데이터 로드
327
+ keyword: state.검색어 }
328
+ const queryString = new URLSearchParams (query ).toString ();
329
+ await fetchData (queryString ); // 데이터 로드
326
330
};
327
331
328
332
const initFilter = () => {
@@ -333,6 +337,7 @@ const initFilter = () => {
333
337
}
334
338
}
335
339
const router = useRouter ();
340
+
336
341
const navigateTo = (param ) => {
337
342
router .push ({ name: ' map' , params: { param } }); // 이름과 params를 명확히 지정
338
343
};
@@ -351,7 +356,6 @@ watch(
351
356
const handleCardClick = (house ) => {
352
357
selectHouse (house); // 선택된 house 설정
353
358
findDealsByAptseq (house .aptSeq ); // aptSeq로 거래 정보 가져오기
354
- console .log (' 불러온' , houseInfoStore .houseDeals )
355
359
};
356
360
357
361
const selectHouse = (house ) => {
@@ -439,16 +443,6 @@ onMounted(async () => {
439
443
}
440
444
});
441
445
442
- // 검색 처리
443
- // const updateSearchResults = () => {
444
- // console.log('검색처리중')
445
- // if (!searchQuery.value || searchQuery.value.trim() === "") {
446
- // filteredNames.value = [];
447
- // console.log("검색어가 비어 있습니다.");
448
- // return;
449
- // }
450
- // filteredNames.value = trie.search(searchQuery.value.trim());
451
- // };
452
446
const updateSearchResults = () => {
453
447
if (! searchQuery .value .trim ()) {
454
448
filteredNames .value = [];
@@ -539,7 +533,6 @@ const selectKeyword = (name) =>{
539
533
<!-- 검색 결과 리스트 -->
540
534
< / div>
541
535
542
-
543
536
< div class = " relative inline-block text-left ml-2" >
544
537
<!-- 버튼 -->
545
538
< button
@@ -626,24 +619,23 @@ const selectKeyword = (name) =>{
626
619
< / button>
627
620
< / div>
628
621
<!-- 리스트와 지도 영역 -->
629
-
630
-
631
622
< div class = " flex h-full font-Pretendard text-gray-600 z-10" >
632
623
< div class = " flex flex-col h-full rounded-lg" >
633
624
<!-- 목록 영역 추가할 수 있습니다 -->
634
- < div class = " p-2 overflow-y-auto " >
635
-
636
- < div class = " flex flex-row p-2 text-s h-[24px] fixed bg-white-800 z-20" >
625
+ < div class = " p-2 " >
626
+ < div class = " flex flex-row p-2 text-s h-[24px] fixed bg-white z-20" >
637
627
< p class = " mr-1 ml-2 cursor-pointer font-bold" > 인기순< / p>
638
628
< p class = " mr-1 cursor-pointer font-bold" > 가격순< / p>
639
629
< p class = " mr-1 cursor-pointer font-bold" > 면적순< / p>
640
630
< / div>
641
- < div class = " text-center" >
631
+ < div class = " text-center " >
642
632
< div v- for = " name in houseNames" : key= " name.aptSeq" >
643
633
{{ name .aptNm }}
644
634
< / div>
645
635
< / div>
646
- < div v- for = " house in houseInfos" : key= " house.id" class = " z-10" >
636
+
637
+ < div class = " overflow-y-auto h-full mt-12 max-h-[80vh] bg-white" >
638
+ < div v- for = " house in houseInfos" : key= " house.id" class = " z-10 " >
647
639
< CardView
648
640
: jibun= " house.jibun"
649
641
: imgUrl= " house.imgUrl"
@@ -659,8 +651,9 @@ const selectKeyword = (name) =>{
659
651
<!-- 오른쪽 뷰 -->
660
652
< div
661
653
v- if = " selectedHouse?.aptSeq === house.aptSeq"
662
- class = " absolute z-100 top-300 left-300 bg-white p-6 shadow-lg transition duration-300 w-[360px] h-[100%] overflow-y-auto"
663
- style= " left: 400px; top: 140px;" >
654
+ class = " absolute z-100 top-[-100px] left-300 bg-white p-6 shadow-lg transition duration-300 w-[360px] h-[78%] overflow-y-auto
655
+ rounded-md shadow-lg"
656
+ style= " left: 400px; top: 9vh;" >
664
657
< div class = " h-[30px] flex flex-row justify-end" >
665
658
< button
666
659
class = " text-gray-800 text-xs rounded h-[20px] w-[20px]"
@@ -733,28 +726,50 @@ const selectKeyword = (name) =>{
733
726
734
727
< table class = " min-w-full border-collapse border border-gray-200 mt-4" >
735
728
< thead>
736
- < tr class = " bg-blue-100 text-sm " >
729
+ < tr class = " bg-blue-100 text-xs " >
737
730
< th class = " border border-gray-300 px-4 py-2 text-center" > 거래 일< / th>
738
- < th class = " border border-gray-300 px-4 py-2 text-center" > 면적< / th>
739
- < th class = " border border-gray-300 px-4 py-2 text-center" > 거래 금액< / th>
731
+ < th class = " border border-gray-300 px-4 py-2 text-center" > 면적 (㎡) < / th>
732
+ < th class = " border border-gray-300 px-4 py-2 text-center" > 거래 금액(만원) < / th>
740
733
< / tr>
741
734
< / thead>
742
735
< tbody>
743
736
< tr
744
737
v- for = " deal in houseInfoStore.houseDeals"
745
738
: key= " deal.id"
746
739
class = " odd:bg-gray-50 even:bg-white text-sm" >
747
- < td class = " border border-gray-300 px-4 py-2 text-center text-xs" > {{ deal .dealYear }} 년 {{ deal .dealMonth }}월 {{ deal .dealDay }}일 < / td>
748
- < td class = " border border-gray-300 px-4 py-2 text-center text-xs" > {{ deal .excluUseAr }} ㎡ < / td>
749
- < td class = " border border-gray-300 px-4 py-2 text-center text-xs" > {{ deal .dealAmount }}만원 < / td>
740
+ < td class = " border border-gray-300 px-4 py-2 text-center text-xs" > {{ deal .dealYear }}. {{ deal .dealMonth }}. {{ deal .dealDay }}< / td>
741
+ < td class = " border border-gray-300 px-4 py-2 text-center text-xs" > {{ deal .excluUseAr }} < / td>
742
+ < td class = " border border-gray-300 px-4 py-2 text-center text-xs" > {{ deal .dealAmount }}< / td>
750
743
< / tr>
751
744
< / tbody>
752
745
< / table>
746
+ < div class = " text-left text-lg font-PretendardSemiBold mt-4 mb-1 flex flex-row" >
747
+ < div class = " text-sm border-b-4 px-2" > 반경 1km 편의시설< / div>
748
+ < / div>
749
+ < div class = " flex flex-row justify-evenly space-x-4 p-2" >
750
+ < SearchNearByOliveYoung
751
+ : longitude= " parseFloat(house.longitude)"
752
+ : latitude= " parseFloat(house.latitude)" / >
753
+
754
+ < SearchNearByMcDonald
755
+ : longitude= " parseFloat(house.longitude)"
756
+ : latitude= " parseFloat(house.latitude)" / >
757
+
758
+ < SearchNearByPharmacy
759
+ : longitude= " parseFloat(house.longitude)"
760
+ : latitude= " parseFloat(house.latitude)" / >
761
+
762
+ < SearchNearByStarbucks
763
+ : longitude= " parseFloat(house.longitude)"
764
+ : latitude= " parseFloat(house.latitude)" / >
765
+ < / div>
766
+
753
767
< div>
754
-
755
768
< / div>
756
769
< / div>
757
770
< / div>
771
+ <!-- 여기 위치하기-->
772
+ < / div>
758
773
< / div>
759
774
< / div>
760
775
<!-- 지도 표시 영역 -->
0 commit comments