design: Change post layout and style
This commit is contained in:
parent
566d8be8d9
commit
fd1fcba2a0
@ -16,25 +16,21 @@ const PostDetail = () => {
|
||||
|
||||
return (
|
||||
<S.PostDetail>
|
||||
<PanelLayout>
|
||||
<LeftPanel>
|
||||
<Link
|
||||
className="product"
|
||||
to={`${URL.product}/${data.product.id}`}
|
||||
>
|
||||
{data.product.name}
|
||||
</Link>
|
||||
<time>{data.written_at}</time>
|
||||
<div className="storage">{data.storage}</div>
|
||||
<div className="price">가격 {data.price.toLocaleString()}원</div>
|
||||
<p>{data.text}</p>
|
||||
<S.WrittenTime>{data.written_at}</S.WrittenTime>
|
||||
<PanelLayout>
|
||||
<LeftPanel>
|
||||
<S.Text>{data.text}</S.Text>
|
||||
<S.Price>가격 {data.price.toLocaleString()}원</S.Price>
|
||||
</LeftPanel>
|
||||
<RightPanel>
|
||||
<SubTitle>제품 사진</SubTitle>
|
||||
<ImageViewer
|
||||
images={data?.images?.map((image) => image.image)}
|
||||
// title="제품 사진"
|
||||
/>
|
||||
<ImageViewer images={data?.images?.map((image) => image.image)} />
|
||||
<SubTitle>최근 거래 가격</SubTitle>
|
||||
<ProductPriceGraph id={data.product.id} />
|
||||
</RightPanel>
|
||||
|
@ -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;
|
||||
`;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user