Skip to content

Commit 8e5b8bc

Browse files
femmefatalehaeinfemmefatalehaein
authored
Merge pull request #66 from full-ownership/feature/search
feat : 1249 commit...
2 parents ab44228 + 80e624a commit 8e5b8bc

File tree

11 files changed

+399
-47
lines changed

11 files changed

+399
-47
lines changed

‎src/Component/SearchNearBy/SearchNearByMcDonald.vue

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<script setup>
2+
import { ref, onMounted } from "vue";
3+
import axios from "axios";
4+
5+
// Props 정의
6+
const props = defineProps({
7+
latitude: Number, // 위도
8+
longitude: Number, // 경도
9+
});
10+
11+
const kakaoApiKey = "f33cead2772e90625f7ee617bcf79982"; // 카카오 REST API 키
12+
const oliveYoungPlaces = ref([]); // 검색 결과 저장
13+
14+
// 올리브영 검색 함수
15+
const searchOliveYoungNearby = async (latitude, longitude) => {
16+
try {
17+
console.log('latitude',latitude)
18+
const url = `https://dapi.kakao.com/v2/local/search/keyword.json`;
19+
const params = {
20+
query: "맥도날드", // 검색어
21+
x: longitude, // 경도
22+
y: latitude, // 위도
23+
radius: 1000, // 반경 1km
24+
};
25+
26+
const headers = {
27+
Authorization: `KakaoAK ${kakaoApiKey}`, // 카카오 인증 헤더
28+
};
29+
30+
const response = await axios.get(url, { headers, params });
31+
oliveYoungPlaces.value = response.data.documents; // 검색 결과 저장
32+
} catch (error) {
33+
console.error("카카오 API 호출 오류:", error);
34+
oliveYoungPlaces.value = []; // 오류 발생 시 초기화
35+
}
36+
};
37+
38+
// Props가 변경될 때마다 검색 함수 호출
39+
onMounted(async () => {
40+
if (props.latitude && props.longitude) {
41+
console.log("onMounted로 API 호출:", props.latitude, props.longitude);
42+
await searchOliveYoungNearby(props.latitude, props.longitude);
43+
}
44+
});
45+
</script>
46+
47+
<template>
48+
<span v-if="oliveYoungPlaces.length > 0" style="display: inline-block;" class="shadow-md">
49+
<img src="@/assets/icons/mcdonald.png" width="100%">
50+
</span>
51+
</template>

‎src/Component/SearchNearBy/SearchNearByOliveYoung.vue

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<script setup>
2+
import { ref, onMounted } from "vue";
3+
import axios from "axios";
4+
5+
// Props 정의
6+
const props = defineProps({
7+
latitude: Number, // 위도
8+
longitude: Number, // 경도
9+
});
10+
11+
const kakaoApiKey = "f33cead2772e90625f7ee617bcf79982"; // 카카오 REST API 키
12+
const oliveYoungPlaces = ref([]); // 검색 결과 저장
13+
14+
// 올리브영 검색 함수
15+
const searchOliveYoungNearby = async (latitude, longitude) => {
16+
try {
17+
console.log('latitude',latitude)
18+
const url = `https://dapi.kakao.com/v2/local/search/keyword.json`;
19+
const params = {
20+
query: "올리브영", // 검색어
21+
x: longitude, // 경도
22+
y: latitude, // 위도
23+
radius: 5000, // 반경 1km
24+
};
25+
26+
const headers = {
27+
Authorization: `KakaoAK ${kakaoApiKey}`, // 카카오 인증 헤더
28+
};
29+
30+
const response = await axios.get(url, { headers, params });
31+
oliveYoungPlaces.value = response.data.documents; // 검색 결과 저장
32+
} catch (error) {
33+
console.error("카카오 API 호출 오류:", error);
34+
oliveYoungPlaces.value = []; // 오류 발생 시 초기화
35+
}
36+
};
37+
38+
// Props가 변경될 때마다 검색 함수 호출
39+
onMounted(async () => {
40+
if (props.latitude && props.longitude) {
41+
console.log("onMounted로 API 호출:", props.latitude, props.longitude);
42+
await searchOliveYoungNearby(props.latitude, props.longitude);
43+
}
44+
});
45+
</script>
46+
47+
<template>
48+
<span v-if="oliveYoungPlaces.length > 0" style="display: inline-block;" class="shadow-md">
49+
<img src="@/assets/icons/oliveyoung.png" width="100%">
50+
</span>
51+
</template>

‎src/Component/SearchNearBy/SearchNearByPharmacy.vue

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<script setup>
2+
import { ref, onMounted } from "vue";
3+
import axios from "axios";
4+
5+
// Props 정의
6+
const props = defineProps({
7+
latitude: Number, // 위도
8+
longitude: Number, // 경도
9+
});
10+
11+
const kakaoApiKey = "f33cead2772e90625f7ee617bcf79982"; // 카카오 REST API 키
12+
const oliveYoungPlaces = ref([]); // 검색 결과 저장
13+
14+
// 올리브영 검색 함수
15+
const searchOliveYoungNearby = async (latitude, longitude) => {
16+
try {
17+
console.log('latitude',latitude)
18+
const url = `https://dapi.kakao.com/v2/local/search/keyword.json`;
19+
const params = {
20+
query: "약국", // 검색어
21+
x: longitude, // 경도
22+
y: latitude, // 위도
23+
radius: 1000, // 반경 1km
24+
};
25+
26+
const headers = {
27+
Authorization: `KakaoAK ${kakaoApiKey}`, // 카카오 인증 헤더
28+
};
29+
30+
const response = await axios.get(url, { headers, params });
31+
oliveYoungPlaces.value = response.data.documents; // 검색 결과 저장
32+
} catch (error) {
33+
console.error("카카오 API 호출 오류:", error);
34+
oliveYoungPlaces.value = []; // 오류 발생 시 초기화
35+
}
36+
};
37+
38+
// Props가 변경될 때마다 검색 함수 호출
39+
onMounted(async () => {
40+
if (props.latitude && props.longitude) {
41+
console.log("onMounted로 API 호출:", props.latitude, props.longitude);
42+
await searchOliveYoungNearby(props.latitude, props.longitude);
43+
}
44+
});
45+
</script>
46+
47+
<template>
48+
<span v-if="oliveYoungPlaces.length > 0" style="display: inline-block;" class="shadow-md">
49+
<img src="@/assets/icons/pharmacy.png" width="100%">
50+
</span>
51+
</template>

‎src/Component/SearchNearBy/SearchNearByStarbucks.vue

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<script setup>
2+
import { ref, onMounted } from "vue";
3+
import axios from "axios";
4+
5+
// Props 정의
6+
const props = defineProps({
7+
latitude: Number, // 위도
8+
longitude: Number, // 경도
9+
});
10+
11+
const kakaoApiKey = "f33cead2772e90625f7ee617bcf79982"; // 카카오 REST API 키
12+
const oliveYoungPlaces = ref([]); // 검색 결과 저장
13+
14+
// 올리브영 검색 함수
15+
const searchOliveYoungNearby = async (latitude, longitude) => {
16+
try {
17+
console.log('latitude',latitude)
18+
const url = `https://dapi.kakao.com/v2/local/search/keyword.json`;
19+
const params = {
20+
query: "스타벅스", // 검색어
21+
x: longitude, // 경도
22+
y: latitude, // 위도
23+
radius: 1000, // 반경 1km
24+
};
25+
26+
const headers = {
27+
Authorization: `KakaoAK ${kakaoApiKey}`, // 카카오 인증 헤더
28+
};
29+
30+
const response = await axios.get(url, { headers, params });
31+
oliveYoungPlaces.value = response.data.documents; // 검색 결과 저장
32+
} catch (error) {
33+
console.error("카카오 API 호출 오류:", error);
34+
oliveYoungPlaces.value = []; // 오류 발생 시 초기화
35+
}
36+
};
37+
38+
// Props가 변경될 때마다 검색 함수 호출
39+
onMounted(async () => {
40+
if (props.latitude && props.longitude) {
41+
console.log("onMounted로 API 호출:", props.latitude, props.longitude);
42+
await searchOliveYoungNearby(props.latitude, props.longitude);
43+
}
44+
});
45+
</script>
46+
47+
<template>
48+
<span v-if="oliveYoungPlaces.length > 0" style="display: inline-block;" class="shadow-md">
49+
<img src="@/assets/icons/starbucks.png" width="100%">
50+
</span>
51+
</template>

‎src/assets/icons/mcdonald.png

4.98 KB
Loading

‎src/assets/icons/oliveyoung.png

2.95 KB
Loading

‎src/assets/icons/pharmacy.png

2.87 KB
Loading

‎src/assets/icons/starbucks.png

10.5 KB
Loading

‎src/views/CardView.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const randomImg = new URL(`../assets/img/home/home (${Math.floor(Math.random() *
2727
2828
<template>
2929
<div class="w-[360px] mx-auto p-1 mb-1">
30-
<div class="bg-white border-b-2 flex flex-row py-3">
30+
<div class="bg-white border-b-1 border-gray-100 flex flex-row py-3">
3131
<!-- 이미지 섹션 -->
3232
<div class="bg-pink-100 w-28 h-28 mx-2">
3333
<!-- imgUrl이 있으면 imgUrl 사용, 없으면 randomImage -->

‎src/views/MapView.vue

Lines changed: 50 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,11 @@ import "vue-simple-range-slider/css";
1010
import { useRoute, useRouter } from 'vue-router';
1111
import BarChart from "@/Component/BarChart.vue";
1212
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+
1318
const goChat = (house) => {
1419
console.log("채팅버튼 선택")
1520
console.log(house.aptNm)
@@ -301,8 +306,7 @@ const state = reactive({
301306
});
302307
303308
const search = () => {
304-
console.log(state.검색어)
305-
applyFilter1()
309+
applyFilter()
306310
}
307311
308312
const isSliderVisible = ref(""); // 현재 열려 있는 슬라이더 필터 이름
@@ -316,13 +320,13 @@ const toggleSlider = (filter) => {
316320
}
317321
};
318322
319-
const applyFilter1 = async() => {
320-
const query1 = { buildingUse: '아파트',
323+
const applyFilter = async() => {
324+
const query = { buildingUse: '아파트',
321325
fromArea: state.면적[0],
322326
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); // 데이터 로드
326330
};
327331
328332
const initFilter = () => {
@@ -333,6 +337,7 @@ const initFilter = () => {
333337
}
334338
}
335339
const router = useRouter();
340+
336341
const navigateTo = (param) => {
337342
router.push({ name: 'map', params: { param } }); // 이름과 params를 명확히 지정
338343
};
@@ -351,7 +356,6 @@ watch(
351356
const handleCardClick = (house) => {
352357
selectHouse(house); // 선택된 house 설정
353358
findDealsByAptseq(house.aptSeq); // aptSeq로 거래 정보 가져오기
354-
console.log('불러온', houseInfoStore.houseDeals)
355359
};
356360
357361
const selectHouse = (house) => {
@@ -439,16 +443,6 @@ onMounted(async () => {
439443
}
440444
});
441445
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-
// };
452446
const updateSearchResults = () => {
453447
if (!searchQuery.value.trim()) {
454448
filteredNames.value = [];
@@ -539,7 +533,6 @@ const selectKeyword = (name) =>{
539533
<!-- 검색 결과 리스트 -->
540534
</div>
541535
542-
543536
<div class="relative inline-block text-left ml-2">
544537
<!-- 버튼 -->
545538
<button
@@ -626,24 +619,23 @@ const selectKeyword = (name) =>{
626619
</button>
627620
</div>
628621
<!-- 리스트와 지도 영역 -->
629-
630-
631622
<div class="flex h-full font-Pretendard text-gray-600 z-10">
632623
<div class="flex flex-col h-full rounded-lg">
633624
<!-- 목록 영역 추가할 수 있습니다 -->
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">
637627
<p class="mr-1 ml-2 cursor-pointer font-bold">인기순</p>
638628
<p class="mr-1 cursor-pointer font-bold">가격순</p>
639629
<p class="mr-1 cursor-pointer font-bold">면적순</p>
640630
</div>
641-
<div class="text-center">
631+
<div class="text-center ">
642632
<div v-for="name in houseNames" :key="name.aptSeq">
643633
{{ name.aptNm }}
644634
</div>
645635
</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 ">
647639
<CardView
648640
:jibun="house.jibun"
649641
:imgUrl="house.imgUrl"
@@ -659,8 +651,9 @@ const selectKeyword = (name) =>{
659651
<!-- 오른쪽 뷰 -->
660652
<div
661653
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;">
664657
<div class="h-[30px] flex flex-row justify-end">
665658
<button
666659
class="text-gray-800 text-xs rounded h-[20px] w-[20px]"
@@ -733,28 +726,50 @@ const selectKeyword = (name) =>{
733726
734727
<table class="min-w-full border-collapse border border-gray-200 mt-4">
735728
<thead>
736-
<tr class="bg-blue-100 text-sm">
729+
<tr class="bg-blue-100 text-xs">
737730
<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>
740733
</tr>
741734
</thead>
742735
<tbody>
743736
<tr
744737
v-for="deal in houseInfoStore.houseDeals"
745738
:key="deal.id"
746739
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>
750743
</tr>
751744
</tbody>
752745
</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+
753767
<div>
754-
755768
</div>
756769
</div>
757770
</div>
771+
<!--여기 위치하기-->
772+
</div>
758773
</div>
759774
</div>
760775
<!-- 지도 표시 영역 -->

0 commit comments

Comments
 (0)