Merge branch 'develop' of https://github.com/woowacourse-teams/2023-z…

…ipgo into fix/#511
woowacourse-teams · Oct 19, 2023 · b51b249 · b51b249
2 parents 509552e + 78b06e0
commit b51b249
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 13 deletions.
diff --git a/frontend/src/components/Food/FoodList/FoodList.tsx b/frontend/src/components/Food/FoodList/FoodList.tsx
@@ -1,24 +1,30 @@
+import { Suspense } from 'react';
 import { styled } from 'styled-components';
 
 import { useInfiniteFoodListScroll } from '@/hooks/food/useInfiniteFoodListScroll';
 
 import FoodItem from '../FoodItem/FoodItem';
 
 const FoodList = () => {
-  const { foodList, hasNextPage, targetRef } = useInfiniteFoodListScroll();
+  const { foodList, hasNextPage, targetRef, isLoading, isFetching } = useInfiniteFoodListScroll();
 
-  if (!foodList) return null;
+  if (!foodList) return <Skeleton />;
 
   const hasResult = Boolean(foodList.length);
 
   return (
     <FoodListWrapper>
       {hasResult ? (
-        <FoodListContainer>
-          {foodList.map(food => (
-            <FoodItem key={food.id} {...food} />
-          ))}
-        </FoodListContainer>
+        <>
+          <FoodListContainer>
+            {foodList.map(food => (
+              <Suspense key={food.id} fallback={<FoodItem.Skeleton />}>
+                <FoodItem {...food} />
+              </Suspense>
+            ))}
+          </FoodListContainer>
+          {isFetching && <Skeleton />}
+        </>
       ) : (
         <NoResultContainer>
           <NoResultText>

diff --git a/frontend/src/components/Review/ReviewListAndChart/SummaryChart/SummaryChart.tsx b/frontend/src/components/Review/ReviewListAndChart/SummaryChart/SummaryChart.tsx
@@ -91,7 +91,7 @@ const Chart = (props: PropsWithChildren<ChartProps>) => {
     <ChartLayout>
       {chartInfo.map(({ name, percentage }) => (
         <Data key={name}>
-          <DataName>{name}</DataName>
+          <DataName $width={Number(name) ? 'initial' : '26%'}>{name}</DataName>
           <Bar>
             <BarBackground />
             <BarData percentage={percentage} />
@@ -120,10 +120,10 @@ const Data = styled.div`
   justify-content: space-between;
 `;
 
-const DataName = styled.div`
+const DataName = styled.div<{ $width?: number | string }>`
   overflow: hidden;
 
-  max-width: 28%;
+  width: ${({ $width = '26%' }) => (typeof $width === 'string' ? $width : `${$width}px`)};
 
   font-size: 1.2rem;
   font-weight: 500;

diff --git a/frontend/src/hooks/query/food.ts b/frontend/src/hooks/query/food.ts
@@ -17,6 +17,7 @@ export const useFoodListInfiniteQuery = (payload: Parameter<typeof getFoodList>)
     queryKey: [QUERY_KEY.petFoods, Object.values(payload).join()],
     queryFn: ({ pageParam = { ...payload, size: String(SIZE_PER_PAGE) } }) =>
       getFoodList(pageParam),
+    suspense: false,
     getNextPageParam: (lastFoodListRes, allFoodListRes) => {
       const [lastFood] = lastFoodListRes.petFoods.slice(-1);
 

diff --git a/frontend/src/pages/FoodDetail/FoodDetail.tsx b/frontend/src/pages/FoodDetail/FoodDetail.tsx
@@ -167,6 +167,8 @@ const BrandIconInfo = styled.p`
 `;
 
 const StandardToolTip = styled.button`
+  position: relative;
+
   display: flex;
   gap: 0.8rem;
   align-items: center;

diff --git a/frontend/src/pages/Landing/Landing.tsx b/frontend/src/pages/Landing/Landing.tsx
@@ -42,9 +42,7 @@ const Landing = () => {
         </BannerSection>
         <ListSection>
           <FilterBottomSheet />
-          <Suspense fallback={<FoodList.Skeleton />}>
-            <FoodList />
-          </Suspense>
+          <FoodList />
         </ListSection>
       </Layout>
     </Template>