style: Add list layout for pc view

src/components/Post/PostList.jsx

@@ -1,15 +1,17 @@
+import { DynamicList } from '../../styles/Common.styles';
 import PostItem from '../PostItem';
 
 const PostList = ({ data, page }) => {
   return (
-    <>
+    <DynamicList>
       {data?.results?.map((post) => (
         <PostItem
+          dynamic
           key={post?.id}
           post={post}
         />
       ))}
-    </>
+    </DynamicList>
   );
 };
 

src/components/PostItem/index.jsx

@@ -2,23 +2,25 @@ import PhoneImage from '../../assets/phone.svg';
 import { URL } from '../../API';
 import * as S from '../../styles/PostItem.styles';
 
-const PostItem = ({ post }) => {
+const PostItem = ({ dynamic, post }) => {
   const image = post?.image || PhoneImage;
+  const PostItemComponent = dynamic ? S.DynamicPostItem : S.PostItem;
+  const PostImageComponent = dynamic ? S.DynamicPostImage : S.PostImage;
 
   return (
-    <S.PostItem to={`${URL.post}${post?.id}`}>
+    <PostItemComponent to={`${URL.post}${post?.id}`}>
-      <S.PostImage>
+      <PostImageComponent>
         <img
           src={image}
           alt={post?.product?.name}
         />
-      </S.PostImage>
+      </PostImageComponent>
       <S.ProductInfo>
         <S.ProductName>{post?.product?.name}</S.ProductName>
         <S.ProductDate>{post?.written_at}</S.ProductDate>
         <S.ProductPrice>{post?.price}원</S.ProductPrice>
       </S.ProductInfo>
-    </S.PostItem>
+    </PostItemComponent>
   );
 };
 

src/styles/Common.styles.js

@@ -38,3 +38,12 @@ export const Input = styled.input`
     caret-color: ${({ theme }) => theme.colors.primary};
   }
 `;
+
+export const DynamicList = styled.div`
+  display: flex;
+  gap: 20px;
+
+  @media screen and (max-width: 768px) {
+    flex-direction: column;
+  }
+`;

src/styles/PostItem.styles.js

@@ -1,6 +1,27 @@
 import { Link } from 'react-router-dom';
 import { styled } from 'styled-components';
 
+export const DynamicPostItem = styled(Link)`
+  ${({ theme }) => theme.boxShadow};
+  ${({ theme }) => theme.hoverBorder};
+  ${({ theme }) => theme.activeTransform};
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding: 16px;
+  margin-bottom: 16px;
+  box-sizing: border-box;
+  text-decoration: none;
+  color: ${({ theme }) => theme.colors.gray900};
+  transition: all 0.3s ease;
+
+  @media screen and (max-width: 768px) {
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+  }
+`;
+
 export const PostItem = styled(Link)`
   ${({ theme }) => theme.boxShadow};
   ${({ theme }) => theme.hoverBorder};
@@ -8,10 +29,10 @@ export const PostItem = styled(Link)`
   display: flex;
   align-items: center;
   gap: 20px;
+  width: 100%;
   padding: 16px;
   margin-bottom: 16px;
   box-sizing: border-box;
-  width: 100%;
   text-decoration: none;
   color: ${({ theme }) => theme.colors.gray900};
   transition: all 0.3s ease;
@@ -38,6 +59,24 @@ export const ProductPrice = styled.div`
   font-weight: 600;
 `;
 
+export const DynamicPostImage = styled.div`
+  width: 200px;
+  height: 200px;
+  border-radius: 10px;
+
+  @media screen and (max-width: 768px) {
+    width: 100px;
+    height: 100px;
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 10px;
+  }
+`;
+
 export const PostImage = styled.div`
   width: 100px;
   height: 100px;