From 99da85f0591b43febb4701cfc03632a1925b2fc7 Mon Sep 17 00:00:00 2001
From: CJY <cjy3458@naver.com>
Date: Mon, 26 Aug 2024 21:49:43 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=B9=B4=EB=93=9C=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/home/homeRecentTales/Card.tsx  | 52 +++++++------------
 .../tales/createMain/CreateMain.styled.ts     |  2 +
 2 files changed, 21 insertions(+), 33 deletions(-)

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 }) => (
-          <S.CardContainer
-            key={key}
-            height={height}
-            backgroundColor1={backgroundColor1}
-            backgroundColor2={backgroundColor2}
-          >
-            <S.CardWrapper>
-              <S.TitleWrapper>
-                <S.CardTitle>사과나무 위에 사과가 있다</S.CardTitle>
-                <S.CardCreatedAt>2024/08/26</S.CardCreatedAt>
-              </S.TitleWrapper>
-              {props.btnText ? (
-                <button onClick={props.onClick}>{props.btnText}</button>
-              ) : (
-                <S.CardImg src={imgSrc} />
-              )}
-            </S.CardWrapper>
-          </S.CardContainer>
-        )
-      )}
+      <S.CardContainer
+        height={height}
+        backgroundColor1={backgroundColor1}
+        backgroundColor2={backgroundColor2}
+      >
+        <S.CardWrapper>
+          <S.TitleWrapper>
+            <S.CardTitle>사과나무 위에 사과가 있다</S.CardTitle>
+            <S.CardCreatedAt>2024/08/26</S.CardCreatedAt>
+          </S.TitleWrapper>
+          {props.btnText ? (
+            <button onClick={props.onClick}>{props.btnText}</button>
+          ) : (
+            <S.CardImg src={imgSrc} />
+          )}
+        </S.CardWrapper>
+      </S.CardContainer>
     </>
   );
 };
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;
   }