refactor(member): add Card Component (#78)

apps/member/src/components/common/Card/Card.tsx

@@ -0,0 +1,50 @@
+import { useNavigate } from 'react-router-dom';
+import Image from '../Image/Image';
+import { createImageUrl } from '@utils/api';
+import classNames from 'classnames';
+
+interface CardProps {
+  to?: string;
+  image?: string;
+  title: string;
+  description?: string;
+}
+
+const Card = ({ to, image, title, description }: CardProps) => {
+  const navigate = useNavigate();
+
+  const handleCardClick = () => {
+    to && navigate(to);
+  };
+
+  return (
+    <div
+      onClick={handleCardClick}
+      className="flex flex-col items-center p-2 space-y-2 transition rounded-lg cursor-pointer hover:bg-gray-100"
+    >
+      {image && (
+        <Image
+          src={createImageUrl(image)}
+          alt={title}
+          width="w-48"
+          height="h-48"
+          className="object-cover border rounded-lg"
+        />
+      )}
+      <div className="w-48">
+        <p
+          className={classNames('break-keep font-semibold', {
+            'text-center': !description,
+          })}
+        >
+          {title}
+        </p>
+        {description && (
+          <p className="text-sm truncate text-clab-main-light">{description}</p>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Card;

apps/member/src/components/main/NewsCardSection/NewsCardSection.tsx

@@ -1,9 +1,9 @@
-import NewsCard from '@components/common/NewsCard/NewsCard';
+import Card from '@components/common/Card/Card';
 import Section from '@components/common/Section/Section';
 import { COMMUNITY_MESSAGE } from '@constants/message';
 import { PATH } from '@constants/path';
-import { BlogPostItem } from '@type/blog';
-import { CommunityPostItem } from '@type/community';
+import type { BlogPostItem } from '@type/blog';
+import type { CommunityPostItem } from '@type/community';
 
 interface NewsCardSectionProps {
   to: string;
@@ -24,7 +24,7 @@ const NewsCardSection = ({ to, title, data = [] }: NewsCardSectionProps) => {
           </p>
         ) : (
           data.map((news, index) => (
-            <NewsCard key={index} to={post_path} {...news} />
+            <Card key={index} to={post_path} {...news} />
           ))
         )}
       </Section.Body>

apps/member/src/components/my/MyActivityGroupSection/MyActivityGroupSection.tsx

@@ -1,4 +1,4 @@
-import NewsCard from '@components/common/NewsCard/NewsCard';
+import Card from '@components/common/Card/Card';
 import Section from '@components/common/Section/Section';
 import { PATH_FINDER } from '@constants/path';
 import type { ActivityGroupMemberMyType } from '@type/activity';
@@ -13,10 +13,10 @@ const MyActivityGroupSection = ({ data }: MyActivityGroupSectionProps) => {
       <Section.Header title="나의 활동" />
       <Section.Body className="flex gap-2 overflow-scroll scrollbar-hide">
         {data.map((activityGroup) => (
-          <NewsCard
+          <Card
             key={activityGroup.id}
             to={PATH_FINDER.ACTIVITY_DETAIL(activityGroup.id)}
-            imageUrl={activityGroup.imageUrl}
+            image={activityGroup.imageUrl}
             title={activityGroup.name}
             description={activityGroup.subject}
           />