diff --git a/src/components/common/KakaoMap.vue b/src/components/common/KakaoMap.vue
index 37ae9a4..dc02c5c 100644
--- a/src/components/common/KakaoMap.vue
+++ b/src/components/common/KakaoMap.vue
@@ -31,7 +31,10 @@ onMounted(() => {
setTarget(newMarkers[0].getPosition());
});
- watch(target, (newTarget) => {
+ watch(target, (newTarget, oldTarget) => {
+ if (oldTarget && newTarget.La === oldTarget.La && newTarget.Ma === oldTarget.Ma) {
+ return;
+ }
map.panTo(newTarget);
});
});
diff --git a/src/components/common/PageNavigation.vue b/src/components/common/PageNavigation.vue
deleted file mode 100644
index 8ff4fc9..0000000
--- a/src/components/common/PageNavigation.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-
-
-
-
-
-
-
-
-
diff --git a/src/components/search/SearchBar.vue b/src/components/search/SearchBar.vue
index 6d7d243..983d68b 100644
--- a/src/components/search/SearchBar.vue
+++ b/src/components/search/SearchBar.vue
@@ -1,5 +1,5 @@
@@ -127,19 +124,3 @@ button {
align-items: center;
}
-
-
diff --git a/src/components/search/SideBar.vue b/src/components/search/SideBar.vue
index e017c18..1e3a80a 100644
--- a/src/components/search/SideBar.vue
+++ b/src/components/search/SideBar.vue
@@ -3,9 +3,27 @@ import { useAttractionStore } from '@/stores/attractionStore';
import AttractionItem from './AttractionItem.vue';
import SearchBar from './SearchBar.vue';
import { storeToRefs } from 'pinia';
+import { onMounted, onUnmounted, ref } from 'vue';
const attractionStore = useAttractionStore();
-const { attractionList } = storeToRefs(attractionStore);
+const { attractionList, page, hasNextPage } = storeToRefs(attractionStore);
+const observer = ref(null);
+const sentinal = ref(null);
+
+async function handleIntersect(entries) {
+ if (entries[0].isIntersecting && page.value && hasNextPage.value) {
+ await attractionStore.fetchNextPage();
+ }
+}
+
+onMounted(() => {
+ observer.value = new IntersectionObserver(handleIntersect, { threshold: 1 });
+ observer.value.observe(sentinal.value);
+});
+
+onUnmounted(() => {
+ observer.value.disconnect();
+});
@@ -15,6 +33,7 @@ const { attractionList } = storeToRefs(attractionStore);
+
diff --git a/src/stores/attractionStore.js b/src/stores/attractionStore.js
index 421a2ea..ab2e552 100644
--- a/src/stores/attractionStore.js
+++ b/src/stores/attractionStore.js
@@ -4,17 +4,45 @@ import { ref } from 'vue';
export const useAttractionStore = defineStore('attraction', () => {
const attractionList = ref([]);
+ const queryString = ref('');
+ const page = ref(0);
+ const hasNextPage = ref(true);
const target = ref(null);
- function search(queryString) {
- searchAttarctions(queryString, ({ data }) => {
- attractionList.value = data;
+ function setQueryString(value) {
+ queryString.value = value;
+ }
+
+ function search(preventClear = false) {
+ if (page.value === 0) {
+ page.value = 1;
+ }
+ const query = `${queryString.value}&page=${page.value}`;
+ searchAttarctions(query, ({ data }) => {
+ preventClear
+ ? (attractionList.value = [...attractionList.value, ...data])
+ : (attractionList.value = data);
});
}
+ function fetchNextPage() {
+ page.value += 1;
+ search(true);
+ }
+
function setTarget(coords) {
target.value = coords;
}
- return { attractionList, target, setTarget, search };
+ return {
+ attractionList,
+ queryString,
+ target,
+ setTarget,
+ page,
+ hasNextPage,
+ setQueryString,
+ search,
+ fetchNextPage,
+ };
});