Merge branch 'feat/v2' into feat/issue-90

src/components/Common/CategoryFoodList/CategoryFoodList.tsx

@@ -14,12 +14,12 @@ const categoryType = CATEGORY_TYPE.FOOD;
 
 const imgSize = {
   home: {
-    width: 51,
-    height: 51,
+    width: 52,
+    height: 52,
   },
   products: {
-    width: 68,
-    height: 68,
+    width: 56,
+    height: 56,
   },
 };
 

src/components/Common/CategoryFoodList/categoryFoodList.css.ts

@@ -2,6 +2,7 @@ import { style } from '@vanilla-extract/css';
 
 export const categoryFoodListWrapper = style({
   display: 'flex',
+  justifyContent: 'space-between',
   gap: 10,
   padding: '0 20px',
   overflowX: 'auto',

src/components/Common/CategoryItem/CategoryItem.tsx

@@ -1,7 +1,8 @@
 import cx from 'classnames';
 import { Link } from 'react-router-dom';
 
-import { imageWrapper, categoryImage, categoryName, circle, bordered, link } from './categoryItem.css';
+import { imageWrapper, categoryImage, circle, bordered, link } from './categoryItem.css';
+import Text from '../Text/Text';
 
 import { PATH } from '@/constants/path';
 import { useGA } from '@/hooks/common';
@@ -54,7 +55,11 @@ const CategoryItem = ({
           alt={name}
         />
       </div>
-      {hasName && <span className={categoryName}>{name}</span>}
+      {hasName && (
+        <Text as="span" color="info" size="caption4" weight="semiBold">
+          {name}
+        </Text>
+      )}
     </Link>
   );
 };

src/components/Common/CategoryItem/categoryItem.css.ts

@@ -1,3 +1,4 @@
+import { vars } from '@/styles/theme.css';
 import { style } from '@vanilla-extract/css';
 
 export const link = style({
@@ -23,10 +24,5 @@ export const circle = style({
 });
 
 export const bordered = style({
-  border: '1px solid #e6e6e6',
-});
-
-export const categoryName = style({
-  fontSize: '1.2rem',
-  lineHeight: 1.4,
+  border: `1px solid ${vars.colors.border.default}`,
 });

src/components/Common/CategoryStoreList/CategoryStoreList.tsx

@@ -8,28 +8,11 @@ interface CategoryStoreListProps {
   hasName?: boolean;
   isCircular?: boolean;
   isBordered?: boolean;
-  location?: 'home' | 'products';
 }
 
 const categoryType = CATEGORY_TYPE.STORE;
 
-const imgSize = {
-  home: {
-    width: 78,
-    height: 58,
-  },
-  products: {
-    width: 76,
-    height: 58,
-  },
-};
-
-const CategoryStoreList = ({
-  hasName = false,
-  isCircular = false,
-  isBordered = false,
-  location = 'home',
-}: CategoryStoreListProps) => {
+const CategoryStoreList = ({ hasName = false, isCircular = false, isBordered = false }: CategoryStoreListProps) => {
   const { data: categories } = useCategoryStoreQuery();
 
   return (
@@ -38,8 +21,8 @@ const CategoryStoreList = ({
         <CategoryItem
           key={category.id}
           category={category}
-          width={imgSize[location].width}
-          height={imgSize[location].height}
+          width={68}
+          height={51}
           categoryType={categoryType}
           hasName={hasName}
           isCircular={isCircular}

src/components/Common/CategoryStoreList/categoryStoreList.css.ts

@@ -2,7 +2,7 @@ import { style } from '@vanilla-extract/css';
 
 export const categoryStoreListWrapper = style({
   display: 'flex',
-  justifyContent: 'space-between',
+  justifyContent: 'space-evenly',
   width: '100%',
   padding: '0 20px',
 });

src/components/Common/Header/Header.tsx

@@ -10,7 +10,7 @@ const Header = () => {
   return (
     <header className={container}>
       <Link to={PATH.HOME}>
-        <Logo width={120} />
+        <Logo />
       </Link>
       <Link to={PATH.SEARCH}>
         <SvgIcon variant="search2" width={20} height={20} fill="none" stroke="#232527" />

src/components/Common/SectionHeader/SectionHeader.tsx

@@ -13,10 +13,10 @@ interface SectionHeaderProps {
 const SectionHeader = ({ name, link, state }: SectionHeaderProps) => {
   return (
     <div className={container}>
-      <h1 className={title}>{name}</h1>
+      <h2 className={title}>{name}</h2>
       {link && (
         <Link to={link} state={state}>
-          <SvgIcon variant="arrowRight" width={20} height={20} />
+          <SvgIcon variant="arrowRight" width={16} height={16} style={{ transform: 'translateY(2px)' }} />
         </Link>
       )}
     </div>

src/components/Common/SectionHeader/sectionHeader.css.ts

@@ -7,6 +7,6 @@ export const container = style({
 });
 
 export const title = style({
-  fontSize: '1.8rem',
-  fontWeight: 600,
+  fontSize: '1.6rem',
+  fontWeight: 700,
 });

src/components/Common/TopBar/TopBar.tsx

@@ -25,7 +25,7 @@ const TopBar = ({ children }: TopBarProps) => {
 const Logo = () => {
   return (
     <Link to={PATH.HOME}>
-      <LogoImage width={120} />
+      <LogoImage />
     </Link>
   );
 };

src/components/Members/MemberRecipeList/MemberRecipeList.tsx

@@ -6,7 +6,7 @@ import styled from 'styled-components';
 import { PATH } from '@/constants/path';
 import { useIntersectionObserver } from '@/hooks/common';
 import { useInfiniteMemberRecipeQuery } from '@/hooks/queries/members';
-import useDisplaySlice from '@/utils/displaySlice';
+import displaySlice from '@/utils/displaySlice';
 
 interface MemberRecipeListProps {
   isPreview?: boolean;
@@ -17,7 +17,7 @@ const MemberRecipeList = ({ isPreview = false }: MemberRecipeListProps) => {
 
   const { fetchNextPage, hasNextPage, data } = useInfiniteMemberRecipeQuery();
   const memberRecipes = data?.pages.flatMap((page) => page.recipes);
-  const recipeToDisplay = useDisplaySlice(isPreview, memberRecipes);
+  const recipeToDisplay = displaySlice(isPreview, memberRecipes);
 
   useIntersectionObserver<HTMLDivElement>(fetchNextPage, scrollRef, hasNextPage);
 

src/components/Members/MemberReviewList/MemberReviewList.tsx

@@ -8,7 +8,7 @@ import MemberReviewItem from '../MemberReviewItem/MemberReviewItem';
 import { PATH } from '@/constants/path';
 import { useIntersectionObserver } from '@/hooks/common';
 import { useInfiniteMemberReviewQuery } from '@/hooks/queries/members';
-import useDisplaySlice from '@/utils/displaySlice';
+import displaySlice from '@/utils/displaySlice';
 
 interface MemberReviewListProps {
   isPreview?: boolean;
@@ -18,7 +18,7 @@ const MemberReviewList = ({ isPreview = false }: MemberReviewListProps) => {
   const scrollRef = useRef<HTMLDivElement>(null);
   const { fetchNextPage, hasNextPage, data } = useInfiniteMemberReviewQuery();
   const memberReviews = data.pages.flatMap((page) => page.reviews);
-  const reviewsToDisplay = useDisplaySlice(isPreview, memberReviews);
+  const reviewsToDisplay = displaySlice(isPreview, memberReviews);
 
   useIntersectionObserver<HTMLDivElement>(fetchNextPage, scrollRef, hasNextPage);
 

src/components/Product/ProductPreviewList/ProductPreviewList.tsx

@@ -6,7 +6,7 @@ import ProductItem from '../ProductItem/ProductItem';
 import { PATH } from '@/constants/path';
 import { useInfiniteProductsQuery } from '@/hooks/queries/product';
 import type { CategoryVariant } from '@/types/common';
-import useDisplaySlice from '@/utils/displaySlice';
+import displaySlice from '@/utils/displaySlice';
 
 interface ProductPreviewListProps {
   category: CategoryVariant;
@@ -18,7 +18,7 @@ const ProductPreviewList = ({ categoryId }: ProductPreviewListProps) => {
   const { data } = useInfiniteProductsQuery(categoryId, 'reviewCount,desc');
   const products = data.pages.flatMap((page) => page.products);
   // 몇개까지 보여줄지
-  const productToDisplay = useDisplaySlice(false, products, 5);
+  const productToDisplay = displaySlice(true, products, 5);
 
   return (
     <ul className={container}>

src/components/Rank/ReviewRankingItem/ReviewRankingItem.stories.tsx

@@ -8,31 +8,51 @@ const meta: Meta<typeof ReviewRankingItem> = {
   title: 'review/ReviewRankingItem',
   component: ReviewRankingItem,
   args: {
-    reviewRanking: {
-      reviewId: 1,
-      productId: 5,
-      productName: '구운감자슬림명란마요',
-      content:
-        '할머니가 먹을 거 같은 맛입니다. 1960년 전쟁 때 맛 보고 싶었는데 그때는 너무 가난해서 먹을 수 없었는데요 이것보다 긴 리뷰도 잘려 보인답니다',
-      image: REVIEW_CARD_DEFAULT_IMAGE_URL,
-      categoryType: 'food',
-      tags: [
-        {
-          id: 5,
-          name: '😋 맛있어요',
-          tagType: 'TASTE',
-        },
-        {
-          id: 1,
-          name: '🍭 달달해요',
-          tagType: 'TASTE',
-        },
-      ],
-    },
+    productName: '구운감자슬림명란마요',
+    content:
+      '할머니가 먹을 거 같은 맛입니다. 1960년 전쟁 때 맛 보고 싶었는데 그때는 너무 가난해서 먹을 수 없었는데요 이것보다 긴 리뷰도 잘려 보인답니다',
+    image: REVIEW_CARD_DEFAULT_IMAGE_URL,
   },
 };
 
 export default meta;
 type Story = StoryObj<typeof ReviewRankingItem>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  args: {
+    tags: [
+      {
+        id: 5,
+        name: '😋 맛있어요',
+        tagType: 'TASTE',
+      },
+      {
+        id: 1,
+        name: '🍭 달달해요',
+        tagType: 'TASTE',
+      },
+    ],
+  },
+};
+
+export const ExtraTag: Story = {
+  args: {
+    tags: [
+      {
+        id: 5,
+        name: '😋 맛있어요',
+        tagType: 'TASTE',
+      },
+      {
+        id: 1,
+        name: '🍭 속이 편해요',
+        tagType: 'TASTE',
+      },
+      {
+        id: 2,
+        name: '🍭 달달해요',
+        tagType: 'TASTE',
+      },
+    ],
+  },
+};