diff --git a/apps/member/src/components/common/Card/Card.tsx b/apps/member/src/components/common/Card/Card.tsx
deleted file mode 100644
index 6ada4a14..00000000
--- a/apps/member/src/components/common/Card/Card.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-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/PostCard/PostCard.tsx b/apps/member/src/components/common/PostCard/PostCard.tsx
new file mode 100644
index 00000000..10f27a4c
--- /dev/null
+++ b/apps/member/src/components/common/PostCard/PostCard.tsx
@@ -0,0 +1,48 @@
+import { useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { createImageUrl } from '@utils/api';
+import { cn } from '@utils/string';
+import Image from '../Image/Image';
+
+interface PostCardProps {
+  to: string;
+  title: string;
+  subTitle?: string;
+  imageUrl?: string;
+}
+
+const PostCard = ({ to, title, subTitle, imageUrl }: PostCardProps) => {
+  const navigate = useNavigate();
+
+  const handleClick = useCallback(() => navigate(to), [navigate, to]);
+
+  return (
+    <div
+      role="button"
+      onClick={handleClick}
+      className="flex flex-col items-center p-2 space-y-2 transition rounded-lg cursor-pointer hover:bg-gray-100"
+    >
+      <Image
+        src={createImageUrl(imageUrl)}
+        alt={title}
+        width="w-48"
+        height="h-48"
+        className="object-cover border rounded-lg"
+      />
+      <div className="w-48">
+        <p
+          className={cn('break-keep', {
+            'text-center': !subTitle,
+          })}
+        >
+          {title}
+        </p>
+        {subTitle && (
+          <p className="text-sm truncate text-clab-main-light">{subTitle}</p>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default PostCard;
diff --git a/apps/member/src/components/main/BlogSection/BlogSection.tsx b/apps/member/src/components/main/BlogSection/BlogSection.tsx
new file mode 100644
index 00000000..4e32f809
--- /dev/null
+++ b/apps/member/src/components/main/BlogSection/BlogSection.tsx
@@ -0,0 +1,27 @@
+import { useBlog } from '@hooks/queries';
+import Section from '@components/common/Section/Section';
+import { COMMUNITY_MESSAGE } from '@constants/message';
+import PostCard from '@components/common/PostCard/PostCard';
+import { PATH } from '@constants/path';
+import EmptyBox from '@components/common/EmptyBox/EmptyBox';
+
+const BlogSection = () => {
+  const { data } = useBlog();
+
+  return (
+    <Section>
+      <Section.Header title="기술 블로그" />
+      <Section.Body className="flex gap-2 overflow-scroll scrollbar-hide">
+        {data.items.length === 0 ? (
+          <EmptyBox>{COMMUNITY_MESSAGE.NO_ARTICLE}</EmptyBox>
+        ) : (
+          data.items.map((news) => (
+            <PostCard key={news.id} to={PATH.BLOG} {...news} />
+          ))
+        )}
+      </Section.Body>
+    </Section>
+  );
+};
+
+export default BlogSection;
diff --git a/apps/member/src/components/main/NewsCardSection/NewsCardSection.tsx b/apps/member/src/components/main/NewsCardSection/NewsCardSection.tsx
deleted file mode 100644
index 32153bba..00000000
--- a/apps/member/src/components/main/NewsCardSection/NewsCardSection.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-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 type { BlogPostItem } from '@type/blog';
-import type { CommunityPostItem } from '@type/community';
-
-interface NewsCardSectionProps {
-  to: string;
-  title: string;
-  data?: Array<BlogPostItem | CommunityPostItem>;
-}
-
-const NewsCardSection = ({ to, title, data = [] }: NewsCardSectionProps) => {
-  const post_path = to === PATH.NEWS ? PATH.NEWS : PATH.BLOG;
-
-  return (
-    <Section>
-      <Section.Header title={title}></Section.Header>
-      <Section.Body className="flex gap-2 overflow-scroll scrollbar-hide">
-        {data.length === 0 ? (
-          <p className="w-full text-center text-gray-500">
-            {COMMUNITY_MESSAGE.NO_ARTICLE}
-          </p>
-        ) : (
-          data.map((news, index) => (
-            <Card key={index} to={post_path} {...news} />
-          ))
-        )}
-      </Section.Body>
-    </Section>
-  );
-};
-
-export default NewsCardSection;
diff --git a/apps/member/src/components/my/MyActivityGroupSection/MyActivityGroupSection.tsx b/apps/member/src/components/my/MyActivityGroupSection/MyActivityGroupSection.tsx
index cd569587..abc5f854 100644
--- a/apps/member/src/components/my/MyActivityGroupSection/MyActivityGroupSection.tsx
+++ b/apps/member/src/components/my/MyActivityGroupSection/MyActivityGroupSection.tsx
@@ -1,4 +1,4 @@
-import Card from '@components/common/Card/Card';
+import PostCard from '@components/common/PostCard/PostCard';
 import Section from '@components/common/Section/Section';
 import { PATH_FINDER } from '@constants/path';
 import type { ActivityGroupMemberMyType } from '@type/activity';
@@ -13,12 +13,12 @@ const MyActivityGroupSection = ({ data }: MyActivityGroupSectionProps) => {
       <Section.Header title="나의 활동" />
       <Section.Body className="flex gap-2 overflow-scroll scrollbar-hide">
         {data.map((activityGroup) => (
-          <Card
+          <PostCard
             key={activityGroup.id}
             to={PATH_FINDER.ACTIVITY_DETAIL(activityGroup.id)}
-            image={activityGroup.imageUrl}
+            imageUrl={activityGroup.imageUrl}
             title={activityGroup.name}
-            description={activityGroup.subject}
+            subTitle={activityGroup.subject}
           />
         ))}
       </Section.Body>