design: PostList 컴포넌트 레이아웃 수정

price-offer · Jan 30, 2024 · 300003d · 300003d
1 parent 43975f9
commit 300003d
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 16 deletions.
diff --git a/src/components/home/ProductItem/styled.ts b/src/components/home/ProductItem/styled.ts
@@ -3,17 +3,7 @@ import styled from '@emotion/styled'
 import { Image, ToggleButton } from '@offer-ui/react'
 
 const Container = styled.div`
-  flex: 1 0 22%;
-
-  max-width: 25%;
-
   cursor: pointer;
-
-  ${({ theme }) => theme.mediaQuery.mobile} {
-    flex: 1 0 44%;
-
-    max-width: 48%;
-  }
 `
 
 const ProductImg = styled(Image)`

diff --git a/src/components/home/ProductList/styled.ts b/src/components/home/ProductList/styled.ts
@@ -1,20 +1,20 @@
 import styled from '@emotion/styled'
 
 const ProductListWrapper = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  gap: 30px;
-  justify-content: start;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 28px 30px;
 
   margin-top: 20px;
 
   ${({ theme }): string => theme.mediaQuery.tablet} {
-    gap: 18px 20px;
+    gap: 20px 15px;
 
     margin-top: 20px;
   }
   ${({ theme }): string => theme.mediaQuery.mobile} {
-    gap: 8px 20px;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 20px 8px;
 
     margin-top: 16px;
   }