design: Change post layout and style

src/pages/PostDetail/index.jsx

@@ -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>
+      <S.WrittenTime>{data.written_at}</S.WrittenTime>
-          <div className="storage">{data.storage}</div>
+      <PanelLayout>
-          <div className="price">가격 {data.price.toLocaleString()}원</div>
+        <LeftPanel>
-          <p>{data.text}</p>
+          <S.Text>{data.text}</S.Text>
+          <S.Price>가격 {data.price.toLocaleString()}원</S.Price>
         </LeftPanel>
         <RightPanel>
           <SubTitle>제품 사진</SubTitle>
-          <ImageViewer
+          <ImageViewer images={data?.images?.map((image) => image.image)} />
-            images={data?.images?.map((image) => image.image)}
-            // title="제품 사진"
-          />
           <SubTitle>최근 거래 가격</SubTitle>
           <ProductPriceGraph id={data.product.id} />
         </RightPanel>

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;
+`;

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;

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;