From 7c1b728c7bb7eb42f3ee0f6ad6df8ea16c3ede5a Mon Sep 17 00:00:00 2001
From: hae-on <solbi2004@naver.com>
Date: Tue, 23 Apr 2024 11:52:10 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20grid,=20flex=20=EB=8B=A4=EB=A5=B8=20?=
 =?UTF-8?q?=EB=B0=A9=EB=B2=95=EC=9C=BC=EB=A1=9C=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Product/ProductList/productList.css.ts         | 2 +-
 .../Product/ProductPreviewList/ProductPreviewList.tsx         | 4 ++--
 .../Product/ProductPreviewList/productPreviewList.css.ts      | 4 ++++
 .../Rank/RecipeRankingList/recipeRankingList.css.ts           | 2 +-
 .../Rank/ReviewRankingItem/reviewRankingItem.css.ts           | 1 -
 src/components/Rank/ReviewRankingList/ReviewRankingList.tsx   | 4 ++--
 .../Rank/ReviewRankingList/reviewRankingList.css.ts           | 4 ++++
 src/components/Recipe/RecipeList/recipeList.css.ts            | 2 +-
 src/styles/common.css.ts                                      | 1 -
 9 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/components/Product/ProductList/productList.css.ts b/src/components/Product/ProductList/productList.css.ts
index 7d17c4f7..3b85ccd8 100644
--- a/src/components/Product/ProductList/productList.css.ts
+++ b/src/components/Product/ProductList/productList.css.ts
@@ -2,7 +2,7 @@ import { style } from '@vanilla-extract/css';
 
 export const container = style({
   display: 'grid',
-  gridTemplateColumns: 'repeat(2, 1fr)',
+  gridTemplateColumns: 'minmax(0, 1fr) 1fr',
   gridAutoRows: 'auto',
   columnGap: 10,
   rowGap: 20,
diff --git a/src/components/Product/ProductPreviewList/ProductPreviewList.tsx b/src/components/Product/ProductPreviewList/ProductPreviewList.tsx
index e49c5bb7..d86a3959 100644
--- a/src/components/Product/ProductPreviewList/ProductPreviewList.tsx
+++ b/src/components/Product/ProductPreviewList/ProductPreviewList.tsx
@@ -1,6 +1,6 @@
 import { Link } from 'react-router-dom';
 
-import { container } from './productPreviewList.css';
+import { container, productItemWrapper } from './productPreviewList.css';
 import ProductItem from '../ProductItem/ProductItem';
 
 import { PATH } from '@/constants/path';
@@ -23,7 +23,7 @@ const ProductPreviewList = ({ categoryId }: ProductPreviewListProps) => {
   return (
     <ul className={container}>
       {productToDisplay.map((product) => (
-        <li key={product.id}>
+        <li key={product.id} className={productItemWrapper}>
           <Link to={`${PATH.PRODUCT_LIST}/detail/${product.id}`}>
             <ProductItem product={product} />
           </Link>
diff --git a/src/components/Product/ProductPreviewList/productPreviewList.css.ts b/src/components/Product/ProductPreviewList/productPreviewList.css.ts
index 5880a330..db05341f 100644
--- a/src/components/Product/ProductPreviewList/productPreviewList.css.ts
+++ b/src/components/Product/ProductPreviewList/productPreviewList.css.ts
@@ -6,3 +6,7 @@ export const container = style({
   padding: '0 20px',
   overflowX: 'auto',
 });
+
+export const productItemWrapper = style({
+  minWidth: 163,
+});
diff --git a/src/components/Rank/RecipeRankingList/recipeRankingList.css.ts b/src/components/Rank/RecipeRankingList/recipeRankingList.css.ts
index 7d17c4f7..3b85ccd8 100644
--- a/src/components/Rank/RecipeRankingList/recipeRankingList.css.ts
+++ b/src/components/Rank/RecipeRankingList/recipeRankingList.css.ts
@@ -2,7 +2,7 @@ import { style } from '@vanilla-extract/css';
 
 export const container = style({
   display: 'grid',
-  gridTemplateColumns: 'repeat(2, 1fr)',
+  gridTemplateColumns: 'minmax(0, 1fr) 1fr',
   gridAutoRows: 'auto',
   columnGap: 10,
   rowGap: 20,
diff --git a/src/components/Rank/ReviewRankingItem/reviewRankingItem.css.ts b/src/components/Rank/ReviewRankingItem/reviewRankingItem.css.ts
index 72d65c24..212fff57 100644
--- a/src/components/Rank/ReviewRankingItem/reviewRankingItem.css.ts
+++ b/src/components/Rank/ReviewRankingItem/reviewRankingItem.css.ts
@@ -4,7 +4,6 @@ import { style } from '@vanilla-extract/css';
 export const reviewImage = style({
   width: '100%',
   height: 'auto',
-  minWidth: 164,
   borderRadius: '6px',
   objectFit: 'cover',
   aspectRatio: '164 / 90',
diff --git a/src/components/Rank/ReviewRankingList/ReviewRankingList.tsx b/src/components/Rank/ReviewRankingList/ReviewRankingList.tsx
index 600f49a5..a76f1666 100644
--- a/src/components/Rank/ReviewRankingList/ReviewRankingList.tsx
+++ b/src/components/Rank/ReviewRankingList/ReviewRankingList.tsx
@@ -1,6 +1,6 @@
 import { Link } from 'react-router-dom';
 
-import { container } from './reviewRankingList.css';
+import { container, reviewItemWrapper } from './reviewRankingList.css';
 import ReviewRankingItem from '../ReviewRankingItem/ReviewRankingItem';
 
 import { PATH } from '@/constants/path';
@@ -20,7 +20,7 @@ const ReviewRankingList = () => {
   return (
     <ul className={container}>
       {reviews.map(({ reviewId, productName, content, tags, image }) => (
-        <li key={reviewId}>
+        <li key={reviewId} className={reviewItemWrapper}>
           <Link to={`${PATH.REVIEW}/${reviewId}`} onClick={handleReviewRankingLinkClick}>
             <ReviewRankingItem productName={productName} content={content} tags={tags} image={image} />
           </Link>
diff --git a/src/components/Rank/ReviewRankingList/reviewRankingList.css.ts b/src/components/Rank/ReviewRankingList/reviewRankingList.css.ts
index 68a282a0..92798984 100644
--- a/src/components/Rank/ReviewRankingList/reviewRankingList.css.ts
+++ b/src/components/Rank/ReviewRankingList/reviewRankingList.css.ts
@@ -5,3 +5,7 @@ export const container = style({
   gap: 10,
   padding: '0 20px',
 });
+
+export const reviewItemWrapper = style({
+  minWidth: 164,
+});
diff --git a/src/components/Recipe/RecipeList/recipeList.css.ts b/src/components/Recipe/RecipeList/recipeList.css.ts
index 5de3d059..f98b8706 100644
--- a/src/components/Recipe/RecipeList/recipeList.css.ts
+++ b/src/components/Recipe/RecipeList/recipeList.css.ts
@@ -2,7 +2,7 @@ import { style } from '@vanilla-extract/css';
 
 export const container = style({
   display: 'grid',
-  gridTemplateColumns: 'repeat(2, 1fr)',
+  gridTemplateColumns: 'minmax(0, 1fr) 1fr',
   gridAutoRows: 'auto',
   columnGap: 10,
   rowGap: 20,
diff --git a/src/styles/common.css.ts b/src/styles/common.css.ts
index 51299597..8d852417 100644
--- a/src/styles/common.css.ts
+++ b/src/styles/common.css.ts
@@ -1,7 +1,6 @@
 import { style } from '@vanilla-extract/css';
 
 export const ellipsis = style({
-  maxWidth: 163,
   whiteSpace: 'nowrap',
   overflow: 'hidden',
   textOverflow: 'ellipsis',