diff --git a/src/pages/PostDetail/index.jsx b/src/pages/PostDetail/index.jsx index 334971b..c72d81a 100644 --- a/src/pages/PostDetail/index.jsx +++ b/src/pages/PostDetail/index.jsx @@ -16,25 +16,21 @@ const PostDetail = () => { return ( + + {data.product.name} + + {data.written_at} - - {data.product.name} - - -
{data.storage}
-
가격 {data.price.toLocaleString()}원
-

{data.text}

+ {data.text} + 가격 {data.price.toLocaleString()}원
제품 사진 - image.image)} - // title="제품 사진" - /> + image.image)} /> 최근 거래 가격 diff --git a/src/styles/PostDetail.styles.js b/src/styles/PostDetail.styles.js index eb1a027..1a585d1 100644 --- a/src/styles/PostDetail.styles.js +++ b/src/styles/PostDetail.styles.js @@ -11,22 +11,6 @@ export const PostDetail = styled.div` font-weight: 600; } - time { - display: block; - margin-top: 4px; - font-size: 14px; - line-height: 1.5; - letter-spacing: 0; - color: ${({ theme }) => theme.colors.gray500}; - } - - .price { - margin-top: 8px; - font-size: 18px; - line-height: 1.7; - font-weight: bold; - } - p { font-size: 16px; } @@ -40,3 +24,16 @@ export const WrittenTime = styled.time` letter-spacing: 0; color: ${({ theme }) => theme.colors.gray500}; `; + +export const Text = styled.p` + font-size: 16px; + line-height: 1.7; + color: ${({ theme }) => theme.colors.gray900}; +`; + +export const Price = styled.div` + margin-top: 8px; + font-size: 18px; + line-height: 1.7; + font-weight: bold; +`; diff --git a/src/styles/PostItem.styles.js b/src/styles/PostItem.styles.js index 47f1bf3..22fe28f 100644 --- a/src/styles/PostItem.styles.js +++ b/src/styles/PostItem.styles.js @@ -3,6 +3,8 @@ import { styled } from 'styled-components'; export const PostItem = styled(Link)` ${({ theme }) => theme.boxShadow}; + ${({ theme }) => theme.hoverBorder}; + ${({ theme }) => theme.activeTransform}; display: flex; align-items: center; gap: 20px; diff --git a/src/styles/Products.styles.js b/src/styles/Products.styles.js index 666341d..ce4ae3d 100644 --- a/src/styles/Products.styles.js +++ b/src/styles/Products.styles.js @@ -3,6 +3,8 @@ import { styled } from 'styled-components'; export const ProductItem = styled(Link)` ${({ theme }) => theme.boxShadow}; + ${({ theme }) => theme.hoverBorder}; + ${({ theme }) => theme.activeTransform}; display: block; padding: 16px; margin-bottom: 16px;