refactor(blog): 시리즈 허브 카드 구조 정리

시리즈 제목 앞의 중복 배지를 제거하고 에피소드 링크 여백을 정리했어요.
변경된 카드 구조를 검증하는 컴포넌트 테스트를 추가했어요.

Author: dev-wooyeon

src/features/blog/ui/components/SeriesHubCard.test.tsx

@@ -0,0 +1,79 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import type { SeriesSummary } from '@/features/blog/model/series-group';
+import SeriesHubCard from './SeriesHubCard';
+
+vi.mock('./SeriesTrackedLink', () => ({
+  default: ({
+    href,
+    children,
+    className,
+  }: {
+    href: string;
+    children: React.ReactNode;
+    className?: string;
+  }) => (
+    <a href={href} className={className}>
+      {children}
+    </a>
+  ),
+}));
+
+const summary: SeriesSummary = {
+  id: 'redis-deep-dive',
+  title: 'Redis 완전정복',
+  latestDate: '2026-03-10',
+  firstPostSlug: 'redis-1',
+  postCount: 2,
+  totalReadingMinutes: 18,
+  posts: [
+    {
+      slug: 'redis-1',
+      title: 'Redis 1편',
+      description: '기초를 다뤄요',
+      date: '2026-03-01',
+      category: 'Tech',
+      tags: ['Redis'],
+      readingTime: 8,
+      series: {
+        id: 'redis-deep-dive',
+        title: 'Redis 완전정복',
+        order: 1,
+      },
+    },
+    {
+      slug: 'redis-2',
+      title: 'Redis 2편',
+      description: '심화를 다뤄요',
+      date: '2026-03-10',
+      category: 'Tech',
+      tags: ['Redis'],
+      readingTime: 10,
+      series: {
+        id: 'redis-deep-dive',
+        title: 'Redis 완전정복',
+        order: 2,
+      },
+    },
+  ],
+};
+
+describe('SeriesHubCard', () => {
+  it('renders series title and links without the redundant series badge', () => {
+    render(<SeriesHubCard summary={summary} seriesIndex={0} />);
+
+    expect(
+      screen.getByRole('heading', { level: 2, name: 'Redis 완전정복' })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('link', { name: /첫 글부터 읽기/i })
+    ).toHaveAttribute('href', '/blog/redis-1');
+    const firstEpisodeLink = screen.getByRole('link', {
+      name: /1\.?\s*Redis 1편/i,
+    });
+
+    expect(firstEpisodeLink).toHaveAttribute('href', '/blog/redis-1');
+    expect(firstEpisodeLink).toHaveClass('min-h-10', 'py-1.5');
+    expect(screen.queryByText('Series')).not.toBeInTheDocument();
+  });
+});

src/features/blog/ui/components/SeriesHubCard.tsx

@@ -7,21 +7,23 @@ interface SeriesHubCardProps {
   seriesIndex: number;
 }
 
-export default function SeriesHubCard({ summary, seriesIndex }: SeriesHubCardProps) {
+export default function SeriesHubCard({
+  summary,
+  seriesIndex,
+}: SeriesHubCardProps) {
   const metaText = `총 ${summary.postCount}편 · 총 ${summary.totalReadingMinutes}분 · 최근 업데이트 ${formatSeriesDate(summary.latestDate)}`;
   const firstPostOrder = summary.posts[0]?.series?.order;
 
   return (
     <section className="rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-bg-primary)] p-6">
       <div className="flex flex-wrap items-start justify-between gap-3">
         <div>
-          <span className="inline-flex rounded-full border border-[var(--color-category-series-border)] bg-[var(--color-category-series-bg)] px-2 py-1 text-xs font-medium text-[var(--color-category-series-text)]">
-            Series
-          </span>
-          <h2 className="mt-2 text-xl font-semibold text-[var(--color-text-primary)]">
+          <h2 className="text-xl font-semibold text-[var(--color-text-primary)]">
             {summary.title}
           </h2>
-          <p className="mt-1 text-sm text-[var(--color-text-tertiary)]">{metaText}</p>
+          <p className="mt-1 text-sm text-[var(--color-text-tertiary)]">
+            {metaText}
+          </p>
         </div>
 
         {summary.firstPostSlug && (
@@ -55,9 +57,11 @@ export default function SeriesHubCard({ summary, seriesIndex }: SeriesHubCardPro
                 postSlug={post.slug}
                 episodeOrder={order}
                 seriesIndex={seriesIndex}
-                className="flex min-h-11 items-center gap-3 rounded-[var(--radius-sm)] px-3 py-2 text-sm text-[var(--color-text-secondary)] transition-colors hover:bg-[var(--color-grey-50)] hover:text-[var(--color-text-primary)]"
+                className="flex min-h-10 items-center gap-3 rounded-[var(--radius-sm)] px-3 py-1.5 text-sm text-[var(--color-text-secondary)] transition-colors hover:bg-[var(--color-grey-50)] hover:text-[var(--color-text-primary)]"
               >
-                <span className="w-6 text-[var(--color-text-tertiary)]">{order}.</span>
+                <span className="w-6 text-[var(--color-text-tertiary)]">
+                  {order}.
+                </span>
                 <span className="flex-1 truncate">{post.title}</span>
               </SeriesTrackedLink>
             </li>