fix: grid, flex 다른 방법으로 해결

fun-eat · Apr 23, 2024 · 7c1b728 · 7c1b728
1 parent 0ab1095
commit 7c1b728
Show file tree

Hide file tree

Showing 9 changed files with 15 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,7 +1,6 @@
 import { style } from '@vanilla-extract/css';
 
 export const ellipsis = style({
-  maxWidth: 163,
   whiteSpace: 'nowrap',
   overflow: 'hidden',
   textOverflow: 'ellipsis',