diff --git a/src/components/home/homeRecentTales/Card.tsx b/src/components/home/homeRecentTales/Card.tsx index 51f9aa9..e5ca0b6 100644 --- a/src/components/home/homeRecentTales/Card.tsx +++ b/src/components/home/homeRecentTales/Card.tsx @@ -14,42 +14,28 @@ const getRandomColorPair = () => { }; const Card = (props: CardProps) => { - const cards = Array.from({ length: 3 }, (_, index) => { - const [backgroundColor1, backgroundColor2, height, imgSrc] = - getRandomColorPair(); - return { - key: index, - backgroundColor1, - backgroundColor2, - height, - imgSrc, - }; - }); + const [backgroundColor1, backgroundColor2, height, imgSrc] = + getRandomColorPair(); return ( <> - {cards.map( - ({ key, backgroundColor1, backgroundColor2, height, imgSrc }) => ( - - - - 사과나무 위에 사과가 있다 - 2024/08/26 - - {props.btnText ? ( - - ) : ( - - )} - - - ) - )} + + + + 사과나무 위에 사과가 있다 + 2024/08/26 + + {props.btnText ? ( + + ) : ( + + )} + + ); }; diff --git a/src/components/tales/createMain/CreateMain.styled.ts b/src/components/tales/createMain/CreateMain.styled.ts index 63a03a2..c80795c 100644 --- a/src/components/tales/createMain/CreateMain.styled.ts +++ b/src/components/tales/createMain/CreateMain.styled.ts @@ -48,6 +48,8 @@ export const OptionContainer = styled.div` justify-content: space-evenly; align-items: center; @media (max-width: 600px) { + width: 100%; + flex-direction: column; flex-wrap: wrap; gap: 1.5rem; }