diff --git a/src/components/Post/PostList.jsx b/src/components/Post/PostList.jsx index f5c18d1..1cb3d38 100644 --- a/src/components/Post/PostList.jsx +++ b/src/components/Post/PostList.jsx @@ -1,15 +1,17 @@ +import { DynamicList } from '../../styles/Common.styles'; import PostItem from '../PostItem'; const PostList = ({ data, page }) => { return ( - <> + {data?.results?.map((post) => ( ))} - + ); }; diff --git a/src/components/PostItem/index.jsx b/src/components/PostItem/index.jsx index 48b6249..5acdfd6 100644 --- a/src/components/PostItem/index.jsx +++ b/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 ( - - + + {post?.product?.name} - + {post?.product?.name} {post?.written_at} {post?.price}원 - + ); }; diff --git a/src/styles/Common.styles.js b/src/styles/Common.styles.js index 1154a87..db1a73c 100644 --- a/src/styles/Common.styles.js +++ b/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; + } +`; diff --git a/src/styles/PostItem.styles.js b/src/styles/PostItem.styles.js index 22fe28f..7f30f71 100644 --- a/src/styles/PostItem.styles.js +++ b/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;