[FE] refactor: 홈 화면 변경

frontend/src/components/Common/Carousel/Carousel.tsx

@@ -38,7 +38,9 @@ export default Carousel;
 
 const CarouselContainer = styled.div`
   display: flex;
-  width: ${CAROUSEL_WIDTH}px;
+  width: 100%;
+  border: 1px solid ${({ theme }) => theme.colors.gray2};
+  border-radius: 10px;
   overflow: hidden;
 `;
 

frontend/src/components/Common/CategoryItem/CategoryItem.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import CategoryItem from './CategoryItem';
+
+const meta: Meta<typeof CategoryItem> = {
+  title: 'common/CategoryItem',
+  component: CategoryItem,
+  args: {
+    name: '즉석 식품',
+    image: 'https://tqklhszfkvzk6518638.cdn.ntruss.com/product/8801771029052.jpg',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof CategoryItem>;
+
+export const Default: Story = {};

frontend/src/components/Common/CategoryItem/CategoryItem.tsx

@@ -0,0 +1,48 @@
+import { Button } from '@fun-eat/design-system';
+import styled from 'styled-components';
+
+interface CategoryItemProps {
+  name: string;
+  image: string;
+}
+
+const CategoryItem = ({ name, image }: CategoryItemProps) => {
+  return (
+    <CategoryItemContainer variant="transparent">
+      <ImageWrapper>
+        <img src={image} width={60} height={60} alt="카테고리" />
+      </ImageWrapper>
+      <CategoryName>{name}</CategoryName>
+    </CategoryItemContainer>
+  );
+};
+
+export default CategoryItem;
+
+const CategoryItemContainer = styled(Button)`
+  width: 60px;
+  height: 100px;
+  text-align: center;
+`;
+
+const ImageWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 60px;
+  height: 60px;
+  border-radius: 10px;
+  background: ${({ theme }) => theme.colors.white};
+
+  img {
+    width: 100%;
+    height: auto;
+    object-fit: cover;
+  }
+`;
+
+const CategoryName = styled.p`
+  margin-top: 10px;
+  font-weight: 600;
+  font-size: 0.8rem;
+`;

frontend/src/components/Common/CategoryList/CategoryList.stories.tsx

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import CategoryList from './CategoryList';
+
+const meta: Meta<typeof CategoryList> = {
+  title: 'common/CategoryList',
+  component: CategoryList,
+};
+
+export default meta;
+type Story = StoryObj<typeof CategoryList>;
+
+export const Default: Story = {};

frontend/src/components/Common/CategoryList/CategoryList.tsx

@@ -0,0 +1,62 @@
+import styled from 'styled-components';
+
+import CategoryItem from '../CategoryItem/CategoryItem';
+
+import { MENU_IMAGES, MENU_NAME, STORE_IMAGES, STORE_NAMES } from '@/constants';
+
+const MENU_LENGTH = 5;
+const STORE_LENGTH = 4;
+
+const CategoryList = () => {
+  const menuList = Array.from({ length: MENU_LENGTH }, (_, index) => ({
+    name: MENU_NAME[index],
+    image: MENU_IMAGES[index],
+  }));
+
+  const storeList = Array.from({ length: STORE_LENGTH }, (_, index) => ({
+    name: STORE_NAMES[index],
+    image: STORE_IMAGES[index],
+  }));
+
+  return (
+    <CategoryListContainer>
+      <MenuListWrapper>
+        {menuList.map((menu, index) => (
+          <CategoryItem key={`menuItem-${index}`} name={menu.name} image={menu.image} />
+        ))}
+      </MenuListWrapper>
+      <StoreListWrapper>
+        {storeList.map((menu, index) => (
+          <CategoryItem key={`storeItem-${index}`} name={menu.name} image={menu.image} />
+        ))}
+      </StoreListWrapper>
+    </CategoryListContainer>
+  );
+};
+
+export default CategoryList;
+
+const CategoryListContainer = styled.div`
+  overflow-x: auto;
+  overflow-y: hidden;
+
+  @media screen and (min-width: 500px) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+
+const MenuListWrapper = styled.div`
+  display: flex;
+  gap: 20px;
+`;
+
+const StoreListWrapper = styled.div`
+  display: flex;
+  gap: 20px;
+`;

frontend/src/components/Common/CategoryTab/CategoryTab.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import CategoryTab from './CategoryTab';
+
+const meta: Meta<typeof CategoryTab> = {
+  title: 'common/CategoryTab',
+  component: CategoryTab,
+};
+
+export default meta;
+type Story = StoryObj<typeof CategoryTab>;
+
+export const FoodCategory: Story = {
+  args: {
+    tabVariant: 'food',
+  },
+};
+
+export const StoreCategory: Story = {
+  args: {
+    tabVariant: 'store',
+  },
+};

frontend/src/components/Common/CategoryMenu/CategoryMenu.tsx → frontend/src/components/Common/CategoryTab/CategoryTab.tsx

@@ -6,22 +6,22 @@ import { useCategoryContext } from '@/hooks/context';
 import { useCategoryQuery } from '@/hooks/queries/product';
 import type { CategoryVariant } from '@/types/common';
 
-interface CategoryMenuProps {
-  menuVariant: CategoryVariant;
+interface CategoryTabProps {
+  tabVariant: CategoryVariant;
 }
 
-const CategoryMenu = ({ menuVariant }: CategoryMenuProps) => {
-  const { data: categories } = useCategoryQuery(menuVariant);
+const CategoryTab = ({ tabVariant }: CategoryTabProps) => {
+  const { data: categories } = useCategoryQuery(tabVariant);
   const { categoryIds, selectCategory } = useCategoryContext();
 
-  const currentCategoryId = categoryIds[menuVariant];
+  const currentCategoryId = categoryIds[tabVariant];
 
   return (
-    <CategoryMenuContainer>
-      {categories.map((menu) => {
-        const isSelected = menu.id === currentCategoryId;
+    <CategoryTabContainer>
+      {categories.map((tab) => {
+        const isSelected = tab.id === currentCategoryId;
         return (
-          <li key={menu.id}>
+          <li key={tab.id}>
             <CategoryButton
               type="button"
               customHeight="30px"
@@ -30,24 +30,24 @@ const CategoryMenu = ({ menuVariant }: CategoryMenuProps) => {
               weight="bold"
               variant={isSelected ? 'filled' : 'outlined'}
               isSelected={isSelected}
-              menuVariant={menuVariant}
-              onClick={() => selectCategory(menuVariant, menu.id)}
+              tabVariant={tabVariant}
+              onClick={() => selectCategory(tabVariant, tab.id)}
               aria-pressed={isSelected}
             >
-              {menu.name}
+              {tab.name}
             </CategoryButton>
           </li>
         );
       })}
-    </CategoryMenuContainer>
+    </CategoryTabContainer>
   );
 };
 
-export default CategoryMenu;
+export default CategoryTab;
 
-type CategoryMenuStyleProps = Pick<CategoryMenuProps, 'menuVariant'>;
+type CategoryTabStyleProps = Pick<CategoryTabProps, 'tabVariant'>;
 
-const CategoryMenuContainer = styled.ul`
+const CategoryTabContainer = styled.ul`
   display: flex;
   gap: 8px;
   white-space: nowrap;
@@ -58,12 +58,12 @@ const CategoryMenuContainer = styled.ul`
   }
 `;
 
-const CategoryButton = styled(Button)<{ isSelected: boolean } & CategoryMenuStyleProps>`
+const CategoryButton = styled(Button)<{ isSelected: boolean } & CategoryTabStyleProps>`
   padding: 6px 12px;
-  ${({ isSelected, menuVariant }) => (isSelected ? selectedCategoryMenuStyles[menuVariant] : '')}
+  ${({ isSelected, tabVariant }) => (isSelected ? selectedCategoryTabStyles[tabVariant] : '')}
 `;
 
-const selectedCategoryMenuStyles: Record<CategoryMenuStyleProps['menuVariant'], CSSProp> = {
+const selectedCategoryTabStyles: Record<CategoryTabStyleProps['tabVariant'], CSSProp> = {
   food: `
     background: ${theme.colors.gray5};
     color: ${theme.textColors.white};

frontend/src/components/Common/index.ts

@@ -1,4 +1,4 @@
-export { default as CategoryMenu } from './CategoryMenu/CategoryMenu';
+export { default as CategoryTab } from './CategoryTab/CategoryTab';
 export { default as Header } from './Header/Header';
 export { default as NavigationBar } from './NavigationBar/NavigationBar';
 export { default as SortButton } from './SortButton/SortButton';
@@ -20,3 +20,5 @@ export { default as MoreButton } from './MoreButton/MoreButton';
 export { default as NavigableSectionTitle } from './NavigableSectionTitle/NavigableSectionTitle';
 export { default as Carousel } from './Carousel/Carousel';
 export { default as RegisterButton } from './RegisterButton/RegisterButton';
+export { default as CategoryItem } from './CategoryItem/CategoryItem';
+export { default as CategoryList } from './CategoryList/CategoryList';

frontend/src/components/Product/PBProductList/PBProductList.tsx

@@ -8,23 +8,17 @@ import { MoreButton } from '@/components/Common';
 import { PATH } from '@/constants/path';
 import { useCategoryContext } from '@/hooks/context';
 import { useInfiniteProductsQuery } from '@/hooks/queries/product';
-import displaySlice from '@/utils/displaySlice';
 
-interface PBProductListProps {
-  isHomePage?: boolean;
-}
-
-const PBProductList = ({ isHomePage }: PBProductListProps) => {
+const PBProductList = () => {
   const { categoryIds } = useCategoryContext();
 
   const { data: pbProductListResponse } = useInfiniteProductsQuery(categoryIds.store);
   const pbProducts = pbProductListResponse.pages.flatMap((page) => page.products);
-  const pbProductsToDisplay = displaySlice(isHomePage, pbProducts, 10);
 
   return (
     <>
       <PBProductListContainer>
-        {pbProductsToDisplay.map((pbProduct) => (
+        {pbProducts.map((pbProduct) => (
           <li key={pbProduct.id}>
             <Link as={RouterLink} to={`${PATH.PRODUCT_LIST}/store/${pbProduct.id}`}>
               <PBProductItem pbProduct={pbProduct} />

frontend/src/components/Product/ProductList/ProductList.tsx

@@ -10,15 +10,13 @@ import { useIntersectionObserver } from '@/hooks/common';
 import { useCategoryContext } from '@/hooks/context';
 import { useInfiniteProductsQuery } from '@/hooks/queries/product';
 import type { CategoryVariant, SortOption } from '@/types/common';
-import displaySlice from '@/utils/displaySlice';
 
 interface ProductListProps {
   category: CategoryVariant;
-  isHomePage?: boolean;
   selectedOption?: SortOption;
 }
 
-const ProductList = ({ category, isHomePage, selectedOption }: ProductListProps) => {
+const ProductList = ({ category, selectedOption }: ProductListProps) => {
   const scrollRef = useRef<HTMLDivElement>(null);
 
   const { categoryIds } = useCategoryContext();
@@ -28,14 +26,13 @@ const ProductList = ({ category, isHomePage, selectedOption }: ProductListProps)
     selectedOption?.value ?? 'reviewCount,desc'
   );
   const productList = data.pages.flatMap((page) => page.products);
-  const productsToDisplay = displaySlice(isHomePage, productList);
 
   useIntersectionObserver<HTMLDivElement>(fetchNextPage, scrollRef, hasNextPage);
 
   return (
     <>
       <ProductListContainer>
-        {productsToDisplay.map((product) => (
+        {productList.map((product) => (
           <li key={product.id}>
             <Link as={RouterLink} to={`${PATH.PRODUCT_LIST}/${category}/${product.id}`}>
               <ProductItem product={product} />

frontend/src/components/Rank/RecipeRankingItem/RecipeRankingItem.tsx

@@ -24,14 +24,13 @@ const RecipeRankingItem = ({ rank, recipe }: RecipeRankingItemProps) => {
       <Spacing direction="horizontal" size={12} />
       <RecipeRankingWrapper>
         <RankingRecipeWrapper>
-          <Text weight="bold">{rank}</Text>
           <Spacing direction="horizontal" size={12} />
           {image !== null ? (
             <RecipeImage src={image} alt={`${rank}위 꿀조합`} width={60} height={60} />
           ) : (
             <RecipePreviewImage width={60} height={60} />
           )}
-          <Spacing direction="horizontal" size={12} />
+          <Spacing direction="horizontal" size={20} />
           <TitleFavoriteWrapper>
             <Text weight="bold">{title}</Text>
             <FavoriteWrapper>
@@ -57,16 +56,15 @@ export default RecipeRankingItem;
 
 const RecipeRankingItemContainer = styled.div`
   width: calc(100% - 50px);
-  height: 72px;
   max-width: 560px;
   margin: 12px 0;
-  padding: 0 24px;
+  padding: 0 5px;
 `;
 
 const RecipeRankingWrapper = styled.div`
   display: flex;
   justify-content: space-between;
-  width: 100%;
+  width: 95%;
 `;
 
 const RankingRecipeWrapper = styled.div`