del

src/page/ProductListPage.jsx

@@ -5,10 +5,9 @@ import InnerContainer from "./InnerContainer";
 import Nav from "../component/Nav";
 import { useSelector } from "react-redux";
 import { db, auth } from "../firebase";
-import { doc, onSnapshot } from "firebase/firestore";
+import { doc, getDoc } from "firebase/firestore";
 import { fetchProducts } from "../redux";
 import { useDispatch } from "react-redux";
-import { useInView } from "react-intersection-observer";
 
 const StyleProductList = styled.div`
   nav {
@@ -44,63 +43,41 @@ const StyleProductList = styled.div`
 function ProductListPage() {
   const [filterOption, setFilterOption] = useState("전체");
   const products = useSelector((state) => state.products);
-
   const [filteredProducts, setFilteredProducts] = useState([]);
   const dispatch = useDispatch();
 
-  const [ref, inView] = useInView({
-    threshold: 0,
-    triggerOnce: false,
-  });
-
   useEffect(() => {
     dispatch(fetchProducts());
   }, [dispatch]);
 
   useEffect(() => {
-    if (inView) {
-      dispatch(fetchProducts());
-    }
-  }, [inView, dispatch]);
-
-  useEffect(() => {
-    const unsubscribeAuth = auth.onAuthStateChanged((user) => {
+    const filterProducts = async (user) => {
+      let bookmarkedIds = [];
       if (user) {
         const userDocRef = doc(db, "users", user.uid);
+        const docSnap = await getDoc(userDocRef);
 
-        // onSnapshot을 사용하여 북마크 정보의 실시간 변경을 감시
-        const unsubscribeSnapshot = onSnapshot(userDocRef, (docSnap) => {
-          let bookmarkedIds = [];
-          if (docSnap.exists()) {
-            const userData = docSnap.data();
-            if (userData.bookmarks) {
-              // bookmarks가 존재하는지 확인
-              bookmarkedIds = userData.bookmarks.map((bookmark) => bookmark.id);
-            }
+        if (docSnap.exists()) {
+          const userData = docSnap.data();
+          if (userData.bookmarks) {
+            bookmarkedIds = userData.bookmarks.map((bookmark) => bookmark.id);
           }
+        }
+      }
 
-          const nonBookmarkedFilteredProducts = products.filter(
-            (product) =>
-              !bookmarkedIds.includes(product.id) &&
-              (filterOption === "전체" || product.type === filterOption)
-          );
-
-          setFilteredProducts(nonBookmarkedFilteredProducts);
-        });
+      const nonBookmarkedFilteredProducts = products.filter(
+        (product) =>
+          !bookmarkedIds.includes(product.id) &&
+          (filterOption === "전체" || product.type === filterOption)
+      );
 
-        // 컴포넌트 언마운트 시 onSnapshot 감시 중지
-        return () => unsubscribeSnapshot();
-      } else {
-        // 사용자가 로그인하지 않은 경우에도 필터링을 적용하여 상품을 표시
-        const nonBookmarkedFilteredProducts = products.filter(
-          (product) => filterOption === "전체" || product.type === filterOption
-        );
+      setFilteredProducts(nonBookmarkedFilteredProducts);
+    };
 
-        setFilteredProducts(nonBookmarkedFilteredProducts);
-      }
+    const unsubscribeAuth = auth.onAuthStateChanged((user) => {
+      filterProducts(user);
     });
 
-    // 인증 상태 리스너 해제
     return () => unsubscribeAuth();
   }, [products, filterOption]);
 
@@ -112,7 +89,6 @@ function ProductListPage() {
           {filteredProducts.map((product, index) => (
             <ProductCard key={index} product={product} />
           ))}
-          <div className="blank" ref={ref} />
         </main>
       </StyleProductList>
     </InnerContainer>