Merge pull request #91 from kakao-tech-campus-2nd-step3/revert-90-feat/…

…#82-discover Revert "둘러보기(discover) 페이지 구현 #82"
kakao-tech-campus-2nd-step3 · Nov 9, 2024 · 864e09e · 864e09e
2 parents 3daf3e9 + c9aed22
commit 864e09e
Show file tree

Hide file tree

Showing 3 changed files with 2 additions and 127 deletions.
diff --git a/src/apis/products/useGetFeed.ts b/src/apis/products/useGetFeed.ts
diff --git a/src/components/layouts/SearchBar/index.tsx b/src/components/layouts/SearchBar/index.tsx
@@ -4,7 +4,6 @@ import CancelIcon from '@/assets/icons/cancel-filled-gray.svg?react';
 import SearchIcon from '@/assets/icons/search.svg?react';
 import IconButton from '@/components/common/IconButton';
 import { SEARCH_ARRAY_KEY } from '@/components/common/SearchModal/RecentSearch';
-import Z_INDEX from '@/styles/z_index';
 import { useForm } from 'react-hook-form';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { HEADER_HEIGHT } from '../Header';
@@ -89,8 +88,7 @@ export default SearchBar;
 const SEARCHBAR_HEIGHT = HEADER_HEIGHT;
 
 const SearchBarWrapper = styled.div`
-  position: fixed;
-  z-index: ${Z_INDEX.Header};
+  position: sticky;
   top: 0;
   width: 100%;
   height: ${SEARCHBAR_HEIGHT};
@@ -99,7 +97,6 @@ const SearchBarWrapper = styled.div`
   justify-content: space-between;
   align-items: center;
   gap: 10px;
-  background-color: var(--color-white);
 `;
 
 const InputBox = styled.form`

diff --git a/src/pages/Discover/index.tsx b/src/pages/Discover/index.tsx
@@ -1,76 +1,5 @@
-import styled from '@emotion/styled';
-import { Suspense, useEffect } from 'react';
-
-import useGetFeed, { type Product } from '@/apis/products/useGetFeed';
-import { HEADER_HEIGHT } from '@/components/layouts/Header';
-import SearchBar from '@/components/layouts/SearchBar';
-import { TABBAR_HEIGHT } from '@/components/layouts/TabBar';
-
 const Discover = () => {
-  const { data, fetchNextPage, hasNextPage } = useGetFeed();
-
-  // 스크롤 내려감에 따라 다음 페이지 데이터 페칭
-  const handleScroll = () => {
-    const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
-    if (scrollTop + clientHeight >= scrollHeight - 100 && hasNextPage) {
-      fetchNextPage();
-    }
-  };
-
-  useEffect(() => {
-    window.addEventListener('scroll', handleScroll);
-
-    return () => window.removeEventListener('scroll', handleScroll); // 언마운트될 때 이벤트 리스너 해제
-  }, [fetchNextPage, hasNextPage]);
-
-  return (
-    <Wrapper>
-      <SearchBar />
-      <ContentWrapper>
-        <Suspense fallback={<>Loading...</>}>
-          <ImageGrid>
-            {data?.pages.map((page) =>
-              page.products.map((product: Product) => (
-                <ImageItem key={product.id}>
-                  <img src={product.thumbnailUrl} alt={product.name} />
-                </ImageItem>
-              )),
-            )}
-          </ImageGrid>
-        </Suspense>
-      </ContentWrapper>
-    </Wrapper>
-  );
+  return <>Discover</>;
 };
 
 export default Discover;
-
-const Wrapper = styled.div`
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  margin: ${HEADER_HEIGHT} 0 ${TABBAR_HEIGHT} 0;
-`;
-
-const ContentWrapper = styled.div`
-  padding: 4px;
-  overflow-y: auto;
-  flex: 1;
-`;
-
-const ImageGrid = styled.div`
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-  gap: 8px;
-`;
-
-const ImageItem = styled.div`
-  border-radius: var(--border-radius);
-  overflow: hidden;
-
-  img {
-    width: 100%;
-    height: auto;
-    display: block;
-  }
-`;