From c9aed226993515af3c90f406bf17ed1a2890fae7 Mon Sep 17 00:00:00 2001
From: Kim Minjoo <itchu999@naver.com>
Date: Sat, 9 Nov 2024 16:39:14 +0900
Subject: [PATCH] =?UTF-8?q?Revert=20"=EB=91=98=EB=9F=AC=EB=B3=B4=EA=B8=B0(?=
 =?UTF-8?q?discover)=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B5=AC=ED=98=84=20?=
 =?UTF-8?q?#82"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/products/useGetFeed.ts            | 51 ---------------
 src/components/layouts/SearchBar/index.tsx |  5 +-
 src/pages/Discover/index.tsx               | 73 +---------------------
 3 files changed, 2 insertions(+), 127 deletions(-)
 delete mode 100644 src/apis/products/useGetFeed.ts

diff --git a/src/apis/products/useGetFeed.ts b/src/apis/products/useGetFeed.ts
deleted file mode 100644
index efca4b5..0000000
--- a/src/apis/products/useGetFeed.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { useSuspenseInfiniteQuery } from '@tanstack/react-query';
-import { isAxiosError } from 'axios';
-
-import { fetchInstance } from '../instance';
-
-export type Product = {
-  id: number;
-  name: string;
-  artist: string;
-  price: number;
-  thumbnailUrl: string;
-};
-
-type GetFeedResponse = {
-  hasNext: boolean;
-  products: Product[];
-};
-
-async function getFeed(size: number, pageParam: number): Promise<GetFeedResponse> {
-  try {
-    const response = await fetchInstance().get(`/products/feed?size=${size}&page=${pageParam}`);
-    // console.log('getFeed response: ', response);
-
-    return response.data;
-  } catch (error) {
-    if (isAxiosError(error)) {
-      if (error.response) {
-        throw new Error(error.response.data.message || '피드 가져오기 실패');
-      } else {
-        throw new Error('네트워크 오류 또는 서버에 연결할 수 없습니다.');
-      }
-    } else {
-      throw new Error('알 수 없는 오류입니다.');
-    }
-  }
-}
-
-const useGetFeed = () => {
-  const size = 20;
-
-  return useSuspenseInfiniteQuery<GetFeedResponse, Error, void>({
-    queryKey: ['feed', size],
-    queryFn: ({ pageParam = 0 }) => getFeed(size, pageParam as number),
-    initialPageParam: 0,
-    getNextPageParam: (lastPage) => {
-      return lastPage.hasNext ? lastPage.products.length / size + 1 : undefined;
-    },
-  });
-};
-
-export default useGetFeed;
diff --git a/src/components/layouts/SearchBar/index.tsx b/src/components/layouts/SearchBar/index.tsx
index c4362e6..eb453ac 100644
--- 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
index 65e4dac..84adaa0 100644
--- 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;
-  }
-`;