diff --git a/apps/member/src/components/common/Card/Card.tsx b/apps/member/src/components/common/Card/Card.tsx
new file mode 100644
index 00000000..6ada4a14
--- /dev/null
+++ b/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;
diff --git a/apps/member/src/components/common/NewsCard/NewsCard.tsx b/apps/member/src/components/common/NewsCard/NewsCard.tsx
deleted file mode 100644
index fc68a8c4..00000000
--- a/apps/member/src/components/common/NewsCard/NewsCard.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import classNames from 'classnames';
-import Image from '../Image/Image';
-import { Link } from 'react-router-dom';
-
-interface NewsCardProps {
-  to: string;
-  imageUrl?: string;
-  title: string;
-  description?: string;
-}
-
-const NewsCard = ({ to, imageUrl, title, description }: NewsCardProps) => {
-  return (
-    <Link
-      to={to}
-      className="cursor-pointer space-y-2 rounded-lg p-2 transition hover:bg-gray-100 items-center flex flex-col"
-    >
-      <Image
-        src={imageUrl}
-        alt={title}
-        width="w-48"
-        height="h-48"
-        className="rounded-lg object-cover border"
-      />
-      <div className="w-48">
-        <p
-          className={classNames('break-keep font-semibold', {
-            'text-center': !description,
-          })}
-        >
-          {title}
-        </p>
-        {description && (
-          <p className="truncate text-sm text-clab-main-light">{description}</p>
-        )}
-      </div>
-    </Link>
-  );
-};
-
-export default NewsCard;
diff --git a/apps/member/src/components/main/NewsCardSection/NewsCardSection.tsx b/apps/member/src/components/main/NewsCardSection/NewsCardSection.tsx
index 82b854ae..32153bba 100644
--- a/apps/member/src/components/main/NewsCardSection/NewsCardSection.tsx
+++ b/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>
diff --git a/apps/member/src/components/my/MyActivityGroupSection/MyActivityGroupSection.tsx b/apps/member/src/components/my/MyActivityGroupSection/MyActivityGroupSection.tsx
index 691bb30c..cd569587 100644
--- a/apps/member/src/components/my/MyActivityGroupSection/MyActivityGroupSection.tsx
+++ b/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}
           />