design: 2차 UI 수정 (#262)

Author: shinhyojeong

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)`

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;
   }

src/pages/messagebox/index.tsx

@@ -126,8 +126,8 @@ const MessageBoxPage = ({ roomId: defaultRoomId }: Props): ReactElement => {
                 <MessageBoxPlaceholder
                   image={{
                     url: IMAGE.MAIL,
-                    width: '90px',
-                    height: '90px'
+                    width: '81px',
+                    height: '67px'
                   }}
                   message={`쪽지 내역이 없어요.\n구매하고 싶은 상품에 가격을 제안해보세요.`}
                 />