[Refactor] card component 리팩토링 및 채널 반응형 수정

src/components/base/Card/ChallangeCard.tsx

@@ -0,0 +1,23 @@
+type ChallangeCardProps = {
+  title: string;
+  reward: string;
+  avatarSrc: string;
+  commentCnt: number;
+  cheerCnt: number;
+  styleProps?: object;
+  onClick?: () => void;
+};
+
+const ChallangeCard = ({
+  avatarSrc,
+  title,
+  reward,
+  commentCnt,
+  cheerCnt,
+  styleProps = {},
+  onClick,
+}: ChallangeCardProps) => {
+  return <div></div>;
+};
+
+export default ChallangeCard;

src/components/base/Card/UserCard.tsx

@@ -0,0 +1,19 @@
+interface UserCardProps {
+  userName: string;
+  introduction: string;
+  avatarSrc: string;
+  styleProps?: object;
+  onClick?: () => void;
+}
+
+const UserCard = ({
+  userName,
+  introduction,
+  avatarSrc,
+  styleProps,
+  onClick,
+}: UserCardProps) => {
+  return <div></div>;
+};
+
+export default UserCard;

src/components/base/Card/index.tsx

@@ -1,6 +1,7 @@
 import { Avatar, Heading, Text, Box, Flex } from "@chakra-ui/react";
 import React from "react";
 import Social from "../Social";
+import styled from "@emotion/react";
 
 type CardTypes = {
   type: "challenge" | "user";
@@ -11,6 +12,7 @@ type CardTypes = {
   commentCount?: number;
   cheerCount?: number;
   margin?: string | number;
+  author?: string;
   styleProps?: object;
   onClick?: () => void;
 };
@@ -24,48 +26,67 @@ const Card = ({
   commentCount = 0,
   cheerCount = 0,
   margin = 0,
+  author = "username",
   styleProps = {},
   onClick,
 }: CardTypes) => {
   const CardStyle: React.CSSProperties = {
     position: "relative",
     borderRadius: "5px",
     width: "100%",
-    maxWidth: 610,
+    maxWidth: "610px",
     height: type === "challenge" ? 120 : 96,
     backgroundColor: "#ffffff",
-    display: "flex",
     alignItems: "center",
     padding: 16,
     boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.1)",
   };
 
   return (
-    <Box
+    <Flex
       style={{ ...CardStyle, ...styleProps }}
       margin={margin}
       _hover={{ cursor: "pointer" }}
       onClick={onClick}
     >
-      <Avatar size={avatarSize} src={avatarSrc}></Avatar>
-      <Box marginLeft={"24px"}>
+      <Flex flexDirection="column" width="64px" alignItems="center">
+        <Avatar size={avatarSize} src={avatarSrc}></Avatar>
+        {type === "challenge" ? <Text textAlign="center">{author}</Text> : ""}
+      </Flex>
+      <Flex
+        flexDirection="column"
+        marginLeft={"24px"}
+        overflow="hidden"
+        width="35vw"
+        maxWidth="350px"
+      >
         <Heading
           size={"md"}
           marginBottom={type === "challenge" ? "16px" : "8px"}
+          overflow="hidden"
+          whiteSpace="nowrap"
+          textOverflow="ellipsis"
         >
           {heading}
         </Heading>
-        <Text fontSize={"md"}>{text}</Text>
-      </Box>
+        <Text
+          fontSize={"md"}
+          overflow="hidden"
+          whiteSpace="nowrap"
+          textOverflow="ellipsis"
+        >
+          {text}
+        </Text>
+      </Flex>
       {type === "challenge" ? (
         <Flex position={"absolute"} right={"16px"} bottom={"30px"}>
           <Social type="comment" count={commentCount} size="side"></Social>
           <Social type="cheer" count={cheerCount} size="side"></Social>
         </Flex>
       ) : (
-        ""
+        <div></div>
       )}
-    </Box>
+    </Flex>
   );
 };
 export default Card;

src/components/domain/ChallengesPage/Challenges.tsx

@@ -38,6 +38,7 @@ const Challenges = ({ posts }: ChallengesProps) => {
                 commentCount={challenge.comments.length}
                 cheerCount={challenge.likes.length}
                 avatarSrc={challenge.author.image}
+                author={challenge.author.fullName}
               ></Card>
             </CardContainer>
           );

src/components/domain/ChallengesPage/Chips.tsx

@@ -11,13 +11,15 @@ const ChipsContainer = styled.div`
   display: flex;
   justify-content: space-evenly;
   margin: 20px 0;
+  flex-wrap: wrap;
 `;
 
 const Chip = styled(Button)`
   flex: 0 0 auto;
   font-size: 24px;
   background-color: white;
   color: #838489;
+  margin-bottom: 6px;
 
   &:hover {
     color: white !important;