feat: 카드 컴포넌트 분리

GlowTales · Aug 26, 2024 · 99da85f · 99da85f
1 parent 96abdee
commit 99da85f
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 33 deletions.
diff --git 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
@@ -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;
   }