design: 1차 UI 수정

src/components/home/CategorySlider/index.tsx

@@ -119,13 +119,7 @@ const CategorySlider = (): ReactElement => {
                       sort: SORT_OPTIONS[0].code
                     })}`}>
                     <Styled.CategoryImgWrapper>
-                      <Styled.CategoryImg
-                        key={name}
-                        alt={`category-${name}`}
-                        height={58}
-                        src={imageUrl}
-                        width={58}
-                      />
+                      <Styled.CategoryImg url={imageUrl} />
                     </Styled.CategoryImgWrapper>
                     <Styled.CateGoryName>{name}</Styled.CateGoryName>
                   </Styled.CategoryLink>

src/components/home/CategorySlider/styled.ts

@@ -1,7 +1,6 @@
 import { css } from '@emotion/react'
 import styled from '@emotion/styled'
 import { IconButton } from '@offer-ui/react'
-import Image from 'next/image'
 import Link from 'next/link'
 import type { CateGoryBoxWrapperProps } from './types'
 import { theme } from '@styles'
@@ -35,6 +34,10 @@ export const CateGoryWrapper = styled.div`
 `
 
 export const CategoryLink = styled(Link)`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
   background: transparent;
 
   color: ${({ theme }) => theme.colors.grayScale90};
@@ -139,43 +142,40 @@ export const CategoryItem = styled.button`
 `
 
 export const CategoryImgWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
   width: 108px;
   height: 86px;
 
   cursor: pointer;
+
   ${({ theme }) => css`
+    padding: 10px;
     border-radius: ${theme.radius.round12};
 
     background-color: ${theme.colors.grayScale05};
 
     ${theme.mediaQuery.tablet} {
       width: 80px;
       height: 80px;
+      padding: 8px;
     }
 
     ${theme.mediaQuery.mobile} {
       width: 60px;
       height: 60px;
+      padding: 4px;
     }
   `};
 `
 
-export const CategoryImg = styled(Image)`
-  border-radius: 12px;
+export const CategoryImg = styled.div<{ url: string }>`
+  ${({ url }) => css`
+    width: 100%;
+    height: 100%;
 
-  ${({ theme }): string => theme.mediaQuery.tablet} {
-    width: 52px;
-    height: 52px;
-  }
-  ${({ theme }): string => theme.mediaQuery.mobile} {
-    width: 40px;
-    height: 40px;
-  }
+    background: url(${url}) center/contain no-repeat;
+  `}
 `
+
 export const CateGoryName = styled.div`
   margin-top: 12px;
 

src/components/home/ProductItem/styled.ts

@@ -5,27 +5,28 @@ import { Image, ToggleButton } from '@offer-ui/react'
 const Container = styled.div`
   flex: 1 0 22%;
 
-  max-width: 22%;
+  max-width: 25%;
 
   cursor: pointer;
 
   ${({ theme }) => theme.mediaQuery.mobile} {
     flex: 1 0 44%;
 
-    max-width: 44%;
+    max-width: 48%;
   }
 `
 
 const ProductImg = styled(Image)`
   width: 100%;
   max-width: none;
+  height: 276px;
 
   ${({ theme }): string => theme.mediaQuery.tablet} {
     height: 166px;
   }
 
   ${({ theme }): string => theme.mediaQuery.mobile} {
-    height: 200px;
+    height: 160px;
   }
 `
 

src/components/home/ProductList/styled.ts

@@ -14,7 +14,7 @@ const ProductListWrapper = styled.div`
     margin-top: 20px;
   }
   ${({ theme }): string => theme.mediaQuery.mobile} {
-    gap: 15px 50px;
+    gap: 8px 20px;
 
     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구매하고 싶은 상품에 가격을 제안해보세요.`}
                 />

src/pages/post/[postId]/index.tsx

@@ -210,7 +210,7 @@ const Layout = styled.div`
   width: 100%;
   max-width: 1200px;
   height: fit-content;
-  margin: 0 auto 15px;
+  margin: 0 auto 120px;
   padding-top: 20px;
 
   ${({ theme }): SerializedStyles => css`