refactor(member): blog section UI 개선 (#93)

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;

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;

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>