Skip to content

Commit

Permalink
Merge pull request #66 from full-ownership/feature/search
Browse files Browse the repository at this point in the history
feat : 1249 commit...
  • Loading branch information
femmefatalehaein authored Nov 26, 2024
2 parents ab44228 + 80e624a commit 8e5b8bc
Show file tree
Hide file tree
Showing 11 changed files with 399 additions and 47 deletions.
51 changes: 51 additions & 0 deletions src/Component/SearchNearBy/SearchNearByMcDonald.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<script setup>
import { ref, onMounted } from "vue";
import axios from "axios";
// Props 정의
const props = defineProps({
latitude: Number, // 위도
longitude: Number, // 경도
});
const kakaoApiKey = "f33cead2772e90625f7ee617bcf79982"; // 카카오 REST API 키
const oliveYoungPlaces = ref([]); // 검색 결과 저장
// 올리브영 검색 함수
const searchOliveYoungNearby = async (latitude, longitude) => {
try {
console.log('latitude',latitude)
const url = `https://dapi.kakao.com/v2/local/search/keyword.json`;
const params = {
query: "맥도날드", // 검색어
x: longitude, // 경도
y: latitude, // 위도
radius: 1000, // 반경 1km
};
const headers = {
Authorization: `KakaoAK ${kakaoApiKey}`, // 카카오 인증 헤더
};
const response = await axios.get(url, { headers, params });
oliveYoungPlaces.value = response.data.documents; // 검색 결과 저장
} catch (error) {
console.error("카카오 API 호출 오류:", error);
oliveYoungPlaces.value = []; // 오류 발생 시 초기화
}
};
// Props가 변경될 때마다 검색 함수 호출
onMounted(async () => {
if (props.latitude && props.longitude) {
console.log("onMounted로 API 호출:", props.latitude, props.longitude);
await searchOliveYoungNearby(props.latitude, props.longitude);
}
});
</script>

<template>
<span v-if="oliveYoungPlaces.length > 0" style="display: inline-block;" class="shadow-md">
<img src="@/assets/icons/mcdonald.png" width="100%">
</span>
</template>
51 changes: 51 additions & 0 deletions src/Component/SearchNearBy/SearchNearByOliveYoung.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<script setup>
import { ref, onMounted } from "vue";
import axios from "axios";
// Props 정의
const props = defineProps({
latitude: Number, // 위도
longitude: Number, // 경도
});
const kakaoApiKey = "f33cead2772e90625f7ee617bcf79982"; // 카카오 REST API 키
const oliveYoungPlaces = ref([]); // 검색 결과 저장
// 올리브영 검색 함수
const searchOliveYoungNearby = async (latitude, longitude) => {
try {
console.log('latitude',latitude)
const url = `https://dapi.kakao.com/v2/local/search/keyword.json`;
const params = {
query: "올리브영", // 검색어
x: longitude, // 경도
y: latitude, // 위도
radius: 5000, // 반경 1km
};
const headers = {
Authorization: `KakaoAK ${kakaoApiKey}`, // 카카오 인증 헤더
};
const response = await axios.get(url, { headers, params });
oliveYoungPlaces.value = response.data.documents; // 검색 결과 저장
} catch (error) {
console.error("카카오 API 호출 오류:", error);
oliveYoungPlaces.value = []; // 오류 발생 시 초기화
}
};
// Props가 변경될 때마다 검색 함수 호출
onMounted(async () => {
if (props.latitude && props.longitude) {
console.log("onMounted로 API 호출:", props.latitude, props.longitude);
await searchOliveYoungNearby(props.latitude, props.longitude);
}
});
</script>

<template>
<span v-if="oliveYoungPlaces.length > 0" style="display: inline-block;" class="shadow-md">
<img src="@/assets/icons/oliveyoung.png" width="100%">
</span>
</template>
51 changes: 51 additions & 0 deletions src/Component/SearchNearBy/SearchNearByPharmacy.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<script setup>
import { ref, onMounted } from "vue";
import axios from "axios";
// Props 정의
const props = defineProps({
latitude: Number, // 위도
longitude: Number, // 경도
});
const kakaoApiKey = "f33cead2772e90625f7ee617bcf79982"; // 카카오 REST API 키
const oliveYoungPlaces = ref([]); // 검색 결과 저장
// 올리브영 검색 함수
const searchOliveYoungNearby = async (latitude, longitude) => {
try {
console.log('latitude',latitude)
const url = `https://dapi.kakao.com/v2/local/search/keyword.json`;
const params = {
query: "약국", // 검색어
x: longitude, // 경도
y: latitude, // 위도
radius: 1000, // 반경 1km
};
const headers = {
Authorization: `KakaoAK ${kakaoApiKey}`, // 카카오 인증 헤더
};
const response = await axios.get(url, { headers, params });
oliveYoungPlaces.value = response.data.documents; // 검색 결과 저장
} catch (error) {
console.error("카카오 API 호출 오류:", error);
oliveYoungPlaces.value = []; // 오류 발생 시 초기화
}
};
// Props가 변경될 때마다 검색 함수 호출
onMounted(async () => {
if (props.latitude && props.longitude) {
console.log("onMounted로 API 호출:", props.latitude, props.longitude);
await searchOliveYoungNearby(props.latitude, props.longitude);
}
});
</script>

<template>
<span v-if="oliveYoungPlaces.length > 0" style="display: inline-block;" class="shadow-md">
<img src="@/assets/icons/pharmacy.png" width="100%">
</span>
</template>
51 changes: 51 additions & 0 deletions src/Component/SearchNearBy/SearchNearByStarbucks.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<script setup>
import { ref, onMounted } from "vue";
import axios from "axios";
// Props 정의
const props = defineProps({
latitude: Number, // 위도
longitude: Number, // 경도
});
const kakaoApiKey = "f33cead2772e90625f7ee617bcf79982"; // 카카오 REST API 키
const oliveYoungPlaces = ref([]); // 검색 결과 저장
// 올리브영 검색 함수
const searchOliveYoungNearby = async (latitude, longitude) => {
try {
console.log('latitude',latitude)
const url = `https://dapi.kakao.com/v2/local/search/keyword.json`;
const params = {
query: "스타벅스", // 검색어
x: longitude, // 경도
y: latitude, // 위도
radius: 1000, // 반경 1km
};
const headers = {
Authorization: `KakaoAK ${kakaoApiKey}`, // 카카오 인증 헤더
};
const response = await axios.get(url, { headers, params });
oliveYoungPlaces.value = response.data.documents; // 검색 결과 저장
} catch (error) {
console.error("카카오 API 호출 오류:", error);
oliveYoungPlaces.value = []; // 오류 발생 시 초기화
}
};
// Props가 변경될 때마다 검색 함수 호출
onMounted(async () => {
if (props.latitude && props.longitude) {
console.log("onMounted로 API 호출:", props.latitude, props.longitude);
await searchOliveYoungNearby(props.latitude, props.longitude);
}
});
</script>

<template>
<span v-if="oliveYoungPlaces.length > 0" style="display: inline-block;" class="shadow-md">
<img src="@/assets/icons/starbucks.png" width="100%">
</span>
</template>
Binary file added src/assets/icons/mcdonald.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/icons/oliveyoung.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/icons/pharmacy.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/icons/starbucks.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/views/CardView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const randomImg = new URL(`../assets/img/home/home (${Math.floor(Math.random() *
<template>
<div class="w-[360px] mx-auto p-1 mb-1">
<div class="bg-white border-b-2 flex flex-row py-3">
<div class="bg-white border-b-1 border-gray-100 flex flex-row py-3">
<!-- 이미지 섹션 -->
<div class="bg-pink-100 w-28 h-28 mx-2">
<!-- imgUrl이 있으면 imgUrl 사용, 없으면 randomImage -->
Expand Down
85 changes: 50 additions & 35 deletions src/views/MapView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,11 @@ import "vue-simple-range-slider/css";
import { useRoute, useRouter } from 'vue-router';
import BarChart from "@/Component/BarChart.vue";
import SearchNearByOliveYoung from "@/Component/SearchNearBy/SearchNearByOliveYoung.vue";
import SearchNearByMcDonald from "@/Component/SearchNearBy/SearchNearByMcDonald.vue";
import SearchNearByPharmacy from "@/Component/SearchNearBy/SearchNearByPharmacy.vue";
import SearchNearByStarbucks from "@/Component/SearchNearBy/SearchNearByStarbucks.vue";
const goChat = (house) => {
console.log("채팅버튼 선택")
console.log(house.aptNm)
Expand Down Expand Up @@ -301,8 +306,7 @@ const state = reactive({
});
const search = () => {
console.log(state.검색어)
applyFilter1()
applyFilter()
}
const isSliderVisible = ref(""); // 현재 열려 있는 슬라이더 필터 이름
Expand All @@ -316,13 +320,13 @@ const toggleSlider = (filter) => {
}
};
const applyFilter1 = async() => {
const query1 = { buildingUse: '아파트',
const applyFilter = async() => {
const query = { buildingUse: '아파트',
fromArea: state.면적[0],
toArea:state.면적[1],
keyword:state.검색어 }
const queryString1 = new URLSearchParams(query1).toString();
await fetchData(queryString1); // 데이터 로드
keyword:state.검색어 }
const queryString = new URLSearchParams(query).toString();
await fetchData(queryString); // 데이터 로드
};
const initFilter = () => {
Expand All @@ -333,6 +337,7 @@ const initFilter = () => {
}
}
const router = useRouter();
const navigateTo = (param) => {
router.push({ name: 'map', params: { param } }); // 이름과 params를 명확히 지정
};
Expand All @@ -351,7 +356,6 @@ watch(
const handleCardClick = (house) => {
selectHouse(house); // 선택된 house 설정
findDealsByAptseq(house.aptSeq); // aptSeq로 거래 정보 가져오기
console.log('불러온', houseInfoStore.houseDeals)
};
const selectHouse = (house) => {
Expand Down Expand Up @@ -439,16 +443,6 @@ onMounted(async () => {
}
});
// 검색 처리
// const updateSearchResults = () => {
// console.log('검색처리중')
// if (!searchQuery.value || searchQuery.value.trim() === "") {
// filteredNames.value = [];
// console.log("검색어가 비어 있습니다.");
// return;
// }
// filteredNames.value = trie.search(searchQuery.value.trim());
// };
const updateSearchResults = () => {
if (!searchQuery.value.trim()) {
filteredNames.value = [];
Expand Down Expand Up @@ -539,7 +533,6 @@ const selectKeyword = (name) =>{
<!-- 검색 결과 리스트 -->
</div>
<div class="relative inline-block text-left ml-2">
<!-- 버튼 -->
<button
Expand Down Expand Up @@ -626,24 +619,23 @@ const selectKeyword = (name) =>{
</button>
</div>
<!-- 리스트와 지도 영역 -->
<div class="flex h-full font-Pretendard text-gray-600 z-10">
<div class="flex flex-col h-full rounded-lg">
<!-- 목록 영역 추가할 수 있습니다 -->
<div class="p-2 overflow-y-auto ">
<div class="flex flex-row p-2 text-s h-[24px] fixed bg-white-800 z-20">
<div class="p-2 ">
<div class="flex flex-row p-2 text-s h-[24px] fixed bg-white 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 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" class="z-10">
<div class="overflow-y-auto h-full mt-12 max-h-[80vh] bg-white">
<div v-for="house in houseInfos" :key="house.id" class="z-10 ">
<CardView
:jibun="house.jibun"
:imgUrl="house.imgUrl"
Expand All @@ -659,8 +651,9 @@ const selectKeyword = (name) =>{
<!-- 오른쪽 뷰 -->
<div
v-if="selectedHouse?.aptSeq === house.aptSeq"
class="absolute z-100 top-300 left-300 bg-white p-6 shadow-lg transition duration-300 w-[360px] h-[100%] overflow-y-auto"
style="left: 400px; top: 140px;">
class="absolute z-100 top-[-100px] left-300 bg-white p-6 shadow-lg transition duration-300 w-[360px] h-[78%] overflow-y-auto
rounded-md shadow-lg"
style="left: 400px; top: 9vh;">
<div class="h-[30px] flex flex-row justify-end">
<button
class="text-gray-800 text-xs rounded h-[20px] w-[20px]"
Expand Down Expand Up @@ -733,28 +726,50 @@ const selectKeyword = (name) =>{
<table class="min-w-full border-collapse border border-gray-200 mt-4">
<thead>
<tr class="bg-blue-100 text-sm">
<tr class="bg-blue-100 text-xs">
<th class="border border-gray-300 px-4 py-2 text-center">거래 일</th>
<th class="border border-gray-300 px-4 py-2 text-center">면적</th>
<th class="border border-gray-300 px-4 py-2 text-center">거래 금액</th>
<th class="border border-gray-300 px-4 py-2 text-center">면적 (㎡)</th>
<th class="border border-gray-300 px-4 py-2 text-center">거래 금액(만원)</th>
</tr>
</thead>
<tbody>
<tr
v-for="deal in houseInfoStore.houseDeals"
:key="deal.id"
class="odd:bg-gray-50 even:bg-white text-sm">
<td class="border border-gray-300 px-4 py-2 text-center text-xs">{{ deal.dealYear }}{{ deal.dealMonth }}{{ deal.dealDay }}</td>
<td class="border border-gray-300 px-4 py-2 text-center text-xs">{{ deal.excluUseAr}} </td>
<td class="border border-gray-300 px-4 py-2 text-center text-xs">{{ deal.dealAmount}}만원</td>
<td class="border border-gray-300 px-4 py-2 text-center text-xs">{{ deal.dealYear }}.{{ deal.dealMonth }}.{{ deal.dealDay }}</td>
<td class="border border-gray-300 px-4 py-2 text-center text-xs">{{ deal.excluUseAr}} </td>
<td class="border border-gray-300 px-4 py-2 text-center text-xs">{{ deal.dealAmount}}</td>
</tr>
</tbody>
</table>
<div class="text-left text-lg font-PretendardSemiBold mt-4 mb-1 flex flex-row">
<div class="text-sm border-b-4 px-2"> 반경 1km 편의시설</div>
</div>
<div class="flex flex-row justify-evenly space-x-4 p-2">
<SearchNearByOliveYoung
:longitude="parseFloat(house.longitude)"
:latitude="parseFloat(house.latitude)"/>
<SearchNearByMcDonald
:longitude="parseFloat(house.longitude)"
:latitude="parseFloat(house.latitude)"/>
<SearchNearByPharmacy
:longitude="parseFloat(house.longitude)"
:latitude="parseFloat(house.latitude)"/>
<SearchNearByStarbucks
:longitude="parseFloat(house.longitude)"
:latitude="parseFloat(house.latitude)"/>
</div>
<div>
</div>
</div>
</div>
<!--여기 위치하기-->
</div>
</div>
</div>
<!-- 지도 표시 영역 -->
Expand Down
Loading

0 comments on commit 8e5b8bc

Please sign in to comment.