fix: 무한 스크롤 수정

eveneul · eveneul · commit 772dffd8fc6e · 2025-07-12T11:54:41.000+09:00
diff --git a/src/core/useRender.js b/src/core/useRender.js
@@ -2,6 +2,8 @@ import Layout from "../components/Layout";
 import routes from "../routes";
 import { getAppPath } from "../main";
 
+let currentPage = null;
+
 const useRender = () => {
   const init = () => {
     document.querySelector("#root").innerHTML = Layout();
@@ -12,10 +14,16 @@ const useRender = () => {
   };
 
   const view = async () => {
+    // 이전 페이지의 unmount 호출
+    if (currentPage && currentPage.unmount) {
+      currentPage.unmount();
+    }
+
     for (const route of routes) {
       const match = getAppPath().match(route.path);
       if (!match) continue;
       const Page = route.component;
+      currentPage = Page; // 현재 페이지 저장
       Page.init?.(match?.[1]);
       draw("main", Page({}));
       await Page.mount?.();
diff --git a/src/pages/Home.js b/src/pages/Home.js
@@ -12,6 +12,7 @@ const state = {
   products: [],
   pagination: {},
   categories: {},
+  watchRegistered: false,
 };
 
 const fetchProducts = async (params = {}) => {
@@ -23,14 +24,17 @@ const fetchProducts = async (params = {}) => {
   }
 
   const productData = await getProducts(params);
-  state.isLoading = false;
 
   // 무한 스크롤 방식 구현으로 누적된 product 값
   if (params.page && params.page > 1) {
     state.products = [...state.products, ...productData.products];
-    state.isLoadingMore = false;
+    // 로딩을 조금 늦게 false로 설정
+    setTimeout(() => {
+      state.isLoadingMore = false;
+    }, 500);
   } else {
     state.products = productData.products;
+    state.isLoading = false;
   }
 
   state.pagination = productData.pagination;
@@ -42,32 +46,48 @@ const fetchCategories = async () => {
   state.isLoading = false;
 };
 
+let scrollHandler = null;
+let scrollTimeout = null;
+
 const fetchMoreProductsScroll = () => {
   const location = getAppPath();
   if (location !== "/") return;
   const triggerHeight = 100;
-  let scrollHandler = null;
 
   const handleScroll = () => {
     const location = getAppPath();
     // 메인페이지에서만 가능하도록 처리
     if (location !== "/") return;
-    if (state.isLoadingMore || !state.pagination?.hasNext) return;
+    // 로딩 중이거나 다음 페이지가 없으면 스크롤 감지 안함
+    if (state.isLoadingMore || state.isLoading || !state.pagination?.hasNext) return;
+
     const currentScroll = window.scrollY;
     const viewHeight = document.documentElement.clientHeight;
     const bodyHeight = document.body.scrollHeight;
+
     if (currentScroll + viewHeight > bodyHeight - triggerHeight) {
-      state.isLoadingMore = true;
-      const currentPage = store.get("params")["page"];
-      store.set("params", {
-        ...store.get("params"),
-        page: currentPage + 1,
-      });
+      if (state.isLoadingMore) return;
+
+      if (scrollTimeout) {
+        clearTimeout(scrollTimeout);
+      }
+
+      scrollTimeout = setTimeout(() => {
+        if (state.isLoadingMore || state.isLoading) return;
+
+        state.isLoadingMore = true;
+        const currentPage = store.get("params")["page"] || 1;
+        store.set("params", {
+          ...store.get("params"),
+          page: currentPage + 1,
+        });
+      }, 300);
     }
   };
 
+  // 기존 스크롤 핸들러 제거
   if (scrollHandler) {
-    window.removeEventListener("scroll", handleScroll);
+    window.removeEventListener("scroll", scrollHandler);
   }
 
   scrollHandler = handleScroll;
@@ -91,6 +111,7 @@ const renderHome = () => {
 
 Home.init = () => {
   state.isLoading = true;
+  state.watchRegistered = false;
 };
 
 Home.mount = async () => {
@@ -112,38 +133,74 @@ Home.mount = async () => {
 
   fetchMoreProductsScroll();
 
-  store.watch(async (newValue) => {
-    const url = new URL(window.location);
-    Object.entries(newValue).forEach(([key, value]) => {
-      if (value !== "" && value) {
-        url.searchParams.set(key, value);
-      } else {
-        url.searchParams.delete(key);
+  // store.watch 중복 등록 방지
+  if (!state.watchRegistered) {
+    state.watchRegistered = true;
+    store.watch(async (newValue) => {
+      console.log("test");
+      // 무한 스크롤로 인한 page 변경은 별도 처리
+      if (state.isLoadingMore && newValue.page) {
+        await fetchProducts(newValue);
+        state.isLoadingMore = false;
+
+        render.draw(
+          "#product-list",
+          ProductList({
+            products: state.products,
+            pagination: state.pagination,
+          }),
+        );
+        ProductList.mount(state.products);
+        ProductCard.mount();
+        return;
       }
-    });
-    window.history.pushState({}, "", url.toString());
 
-    await fetchProducts(newValue);
-    state.isLoadingMore = false;
+      const url = new URL(window.location);
+      Object.entries(newValue).forEach(([key, value]) => {
+        if (value !== "" && value) {
+          url.searchParams.set(key, value);
+        } else {
+          url.searchParams.delete(key);
+        }
+      });
+      window.history.pushState({}, "", url.toString());
+
+      await fetchProducts(newValue);
+      state.isLoadingMore = false;
+
+      render.draw("#search-container", Search(store.get("categories"), false));
+      Search.mount();
 
-    render.draw("#search-container", Search(store.get("categories"), false));
-    Search.mount();
+      render.draw("#breadcrumb-container", Breadcrumb());
+      Breadcrumb.mount();
 
-    render.draw("#breadcrumb-container", Breadcrumb());
-    Breadcrumb.mount();
+      render.draw(
+        "#product-list",
+        ProductList({
+          products: state.products,
+          pagination: state.pagination,
+        }),
+      );
 
-    render.draw(
-      "#product-list",
-      ProductList({
-        products: state.products,
-        pagination: state.pagination,
-      }),
-    );
+      ProductList.mount(state.products);
 
-    ProductList.mount(state.products);
+      ProductCard.mount();
+    }, "params");
+  }
+};
 
-    ProductCard.mount();
-  }, "params");
+Home.unmount = () => {
+  // 스크롤 이벤트 리스너 정리
+  if (scrollHandler) {
+    window.removeEventListener("scroll", scrollHandler);
+    scrollHandler = null;
+  }
+
+  // 타이머 정리
+  if (scrollTimeout) {
+    clearTimeout(scrollTimeout);
+    scrollTimeout = null;
+  }
 };
 
 export default function Home({ products, pagination, isLoading, categories, isLoadingMore }) {
diff --git a/src/pages/NotFound.js b/src/pages/NotFound.js
@@ -8,6 +8,16 @@ NotFound.mount = () => {
   });
 };
 
+NotFound.unmount = () => {
+  const homeLink = document.querySelector("#notFound [data-link]");
+  if (homeLink) {
+    homeLink.removeEventListener("click", (event) => {
+      event.preventDefault();
+      navigate.push({}, "/");
+    });
+  }
+};
+
 export default function NotFound() {
   return /* html */ `
   <div class="text-center my-4 py-20 shadow-md p-6 bg-white rounded-lg" id="notFound">
diff --git a/src/pages/Product.js b/src/pages/Product.js
@@ -112,6 +112,48 @@ Product.mount = async () => {
   // });
 };
 
+Product.unmount = () => {
+  // 이벤트 리스너들 정리
+  const goToProductListBtn = document.querySelector(".go-to-product-list");
+  const homeLink = document.querySelector("a");
+  const quantityInput = document.querySelector("#quantity-input");
+  const quantityIncrease = document.querySelector("#quantity-increase");
+  const quantityDecrease = document.querySelector("#quantity-decrease");
+  const cartBtn = document.getElementById("add-to-cart-btn");
+  const relatedProductList = document.querySelectorAll(".related-product-card");
+
+  if (goToProductListBtn) {
+    goToProductListBtn.removeEventListener("click", methods.goToProductList);
+  }
+  if (homeLink) {
+    homeLink.removeEventListener("click", methods.goToProductList);
+  }
+  if (quantityInput) {
+    quantityInput.removeEventListener("change", (event) => {
+      if (event.target.value < 1) event.target.value = 1;
+    });
+  }
+  if (quantityIncrease) {
+    quantityIncrease.removeEventListener("click", methods.handleUpQuantity);
+  }
+  if (quantityDecrease) {
+    quantityDecrease.removeEventListener("click", methods.handleDownQuantity);
+  }
+  if (cartBtn) {
+    cartBtn.removeEventListener("click", () => {
+      methods.handleAddCard(quantityInput.value);
+    });
+  }
+  if (relatedProductList.length > 0) {
+    relatedProductList.forEach((product) => {
+      const productId = product.getAttribute("data-product-id");
+      product.removeEventListener("click", () => {
+        methods.goToRelatedProducts(productId);
+      });
+    });
+  }
+};
+
 export default function Product() {
   return /* html */ `
     ${
