feat(blog): 블로그 앱 셸과 탐색 경험 개선 (#92)

Author: dev-wooyeon

posts/2025년-회고/index.mdx

@@ -61,7 +61,7 @@
 시간과 기회비용을 함께 가져간다는 걸 느꼈어요.
 
 <img src="/images/posts/2025년-회고/a0d6d289b098.png" />
-- 시간 뻇는 범인 수배 -
+(시간 뺏는 범인 수배)
 
 그 시간에 가족과 더 시간을 보내거나
 책을 읽거나 기술 트렌드를 공부하는 편이
@@ -92,7 +92,7 @@
 마지막 접수날까지 공고가 계속 눈에 밟혔어요. 지금 쓰지 않으면 후회할 것 같아서 와이프와 논의한 뒤 지원하기로 했죠.
 
 "기술 학습"이 아니라
-**'전문가로 성장하기 위한 커리큘럼'**이라는 점이 매력적이었어요.
+<strong>'전문가로 성장하기 위한 커리큘럼'</strong>이라는 점이 매력적이었어요.
 
 질문에 답하면서
 그동안의 경험과 고민을 정리할 수 있었고,
@@ -131,7 +131,7 @@
 ### 📚 독서
 
 올해는 기술 트렌드보다
-**'일하는 사람으로서의 나'**를 돌아보는 책을 많이 읽었어요.
+<strong>'일하는 사람으로서의 나'</strong>를 돌아보는 책을 많이 읽었어요.
 
 인상 깊었던 책들
 

posts/베트남-여행-후기/index.mdx

@@ -83,15 +83,11 @@
   ![](/assets/posts/2026-02-05-travel-vietnam-review/food3.jpeg)
 </ImageGrid>
 
-유튜브로 미리 찾아본 식당들 전부 만족했어요.
-그중에서도 가장 추천하는 식당 소개해요.
-⭐⭐⭐⭐⭐
-**[Beni 2](https://share.google/1wtyxMhTXyT2QvGCO)**
+유튜브로 미리 찾아본 식당들 전부 만족했어요. 그중에서도 가장 추천하는 식당은 [Beni 2](https://share.google/1wtyxMhTXyT2QvGCO)예요. ⭐⭐⭐⭐⭐
 
 - 해산물 맛집이예요. 랍스터랑 세트메뉴로 주문해서 먹었는데 하나같이 다 맛있었어요.
 - 찐로컬 분위기로 현지인들도 많았어요.
-- 베트남의 시그니처 중 하나인 타이거 맥주 한잔 하기 좋아요.
-  **[Van may](https://share.google/vdprnrkE1M71IsDqZ)**
+- 베트남의 시그니처 중 하나인 타이거 맥주 한잔 하기 좋아요. [Van may](https://share.google/vdprnrkE1M71IsDqZ)도 추천해요.
 - 여긴 메뉴부터 특별했어요.
 - 곱창 쌀국수 🫢 근데 진짜 맛있어요.
 - 그리고 분짜, 파인애플 볶음밥도 먹었는데 맛있었습니다.

posts/운영-자동화-회고/index.mdx

@@ -127,7 +127,7 @@
 - 장애 대응 시간 단축 및 운영 만족도 향상
 
 무엇보다 **운영팀과의 커뮤니케이션 방식 자체가 바뀌었어요.**
-"이거 수동으로 해야 하나요?" 대신 **"이건 자동화할 수 있을까요?"**라는 질문이 나오기 시작했죠.
+"이거 수동으로 해야 하나요?" 대신 <strong>"이건 자동화할 수 있을까요?"</strong>라는 질문이 나오기 시작했죠.
 
 ---
 

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

@@ -3,12 +3,14 @@ import { describe, expect, it, vi } from 'vitest';
 import { useTheme } from 'next-themes';
 import { GiscusComments } from './GiscusComments';
 
+const mockGiscus = vi.fn(() => <div data-testid="giscus-embed" />);
+
 vi.mock('next-themes', () => ({
   useTheme: vi.fn(),
 }));
 
 vi.mock('@giscus/react', () => ({
-  default: () => <div data-testid="giscus-embed" />,
+  default: (props: unknown) => mockGiscus(props),
 }));
 
 describe('GiscusComments', () => {
@@ -38,6 +40,13 @@ describe('GiscusComments', () => {
 
     expect(screen.getByRole('heading', { level: 2, name: '댓글' })).toBeInTheDocument();
     expect(screen.getByTestId('giscus-embed')).toBeInTheDocument();
+    expect(mockGiscus).toHaveBeenCalledWith(
+      expect.objectContaining({
+        mapping: 'specific',
+        term: 'redis',
+        theme: 'dark',
+      })
+    );
     expect(postMessage).toHaveBeenCalledWith(
       {
         giscus: {
@@ -52,4 +61,3 @@ describe('GiscusComments', () => {
     document.body.removeChild(iframe);
   });
 });
-

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

@@ -15,7 +15,7 @@ interface GiscusCommentsProps {
  * @note repo, repoId, category, categoryId 값을 실제 값으로 교체해야 합니다.
  * https://giscus.app 에서 설정 후 값을 확인하세요.
  */
-export function GiscusComments({ slug: _slug }: GiscusCommentsProps) {
+export function GiscusComments({ slug }: GiscusCommentsProps) {
   const { resolvedTheme } = useTheme();
   const giscusTheme = resolvedTheme === 'dark' ? 'dark' : 'light';
 
@@ -40,21 +40,25 @@ export function GiscusComments({ slug: _slug }: GiscusCommentsProps) {
       <h2 className="text-xl font-bold text-[var(--color-grey-900)] mb-6">
         댓글
       </h2>
-      <Giscus
-        id="comments"
-        repo="dev-wooyeon/eunu-log"
-        repoId="R_kgDOQ9dweg"
-        category="Announcements"
-        categoryId="DIC_kwDOQ9dwes4C19H1"
-        mapping="title"
-        strict="0"
-        reactionsEnabled="1"
-        emitMetadata="0"
-        inputPosition="top"
-        theme={giscusTheme}
-        lang="ko"
-        loading="lazy"
-      />
+      <div className="min-h-40">
+        <Giscus
+          key={`${slug}-${giscusTheme}`}
+          id="comments"
+          repo="dev-wooyeon/eunu-log"
+          repoId="R_kgDOQ9dweg"
+          category="Announcements"
+          categoryId="DIC_kwDOQ9dwes4C19H1"
+          mapping="specific"
+          term={slug}
+          strict="1"
+          reactionsEnabled="1"
+          emitMetadata="0"
+          inputPosition="top"
+          theme={giscusTheme}
+          lang="ko"
+          loading="lazy"
+        />
+      </div>
     </section>
   );
 }

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

@@ -1,21 +1,9 @@
 import { render, screen } from '@testing-library/react';
-import { createElement, type ImgHTMLAttributes, type ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import { describe, expect, it } from 'vitest';
 import PostCard from './PostCard/PostCard';
 import type { FeedData } from '@/domains/post/model/types';
 
-vi.mock('next/image', () => ({
-  default: ({
-    alt,
-    fill: _fill,
-    priority: _priority,
-    ...props
-  }: ImgHTMLAttributes<HTMLImageElement> & {
-    fill?: boolean;
-    priority?: boolean;
-  }) => createElement('img', { ...props, alt: alt ?? '' }),
-}));
-
 vi.mock('next/link', () => ({
   default: ({
     href,
@@ -76,17 +64,14 @@ describe('PostCard', () => {
     expect(screen.getByText('약 12분')).toBeInTheDocument();
   });
 
-  it('renders thumbnail in list variant when image exists', () => {
+  it('keeps list variant text-only even when image exists', () => {
     const withImage: FeedData = {
       ...basePost,
       image: '/images/test.png',
     };
 
     render(<PostCard post={withImage} variant="list" />);
-    expect(screen.getByRole('presentation')).toHaveAttribute(
-      'src',
-      '/images/test.png'
-    );
+    expect(screen.queryByRole('presentation')).not.toBeInTheDocument();
   });
 
   it('shows category, series title, and tags in list variant', () => {

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

@@ -1,71 +1,13 @@
-import Image from 'next/image';
 import Link from 'next/link';
 import { clsx } from 'clsx';
 import { FeedData } from '@/domains/post/model/types';
+import { CategoryIcon } from '@/shared/ui/icons/AppSectionIcon';
 
 interface PostCardProps {
   post: FeedData;
   variant?: 'default' | 'featured' | 'list';
 }
 
-function CategoryIcon({ category }: { category: string }) {
-  switch (category) {
-    case 'Tech':
-      return (
-        <svg
-          viewBox="0 0 24 24"
-          width="12"
-          height="12"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          aria-hidden="true"
-        >
-          <rect x="3" y="4" width="18" height="14" rx="2" />
-          <path d="M8 20h8" />
-          <path d="M10 16v4" />
-          <path d="M14 16v4" />
-        </svg>
-      );
-    case 'Life':
-      return (
-        <svg
-          viewBox="0 0 24 24"
-          width="12"
-          height="12"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          aria-hidden="true"
-        >
-          <path d="M4 5a2 2 0 0 1 2-2h12v18H6a2 2 0 0 1-2-2z" />
-          <path d="M8 7h7" />
-          <path d="M8 11h7" />
-        </svg>
-      );
-    default:
-      return (
-        <svg
-          viewBox="0 0 24 24"
-          width="12"
-          height="12"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          aria-hidden="true"
-        >
-          <path d="m20 12-8 8-8-8 8-8 8 8z" />
-        </svg>
-      );
-  }
-}
-
 export default function PostCard({ post, variant = 'default' }: PostCardProps) {
   const formattedDate = new Date(post.date).toLocaleDateString('ko-KR', {
     year: 'numeric',
@@ -108,15 +50,15 @@ export default function PostCard({ post, variant = 'default' }: PostCardProps) {
       <Link
         href={`/blog/${post.slug}`}
         className={clsx(
-          'group block rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-bg-primary)] px-4 py-4',
+          'group block overflow-hidden rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-bg-primary)] px-5 py-5 sm:px-6',
           'transition-all duration-[var(--duration-200)] ease-[var(--ease-default)]',
-          'hover:border-[var(--color-border-hover)] hover:bg-[var(--color-grey-50)]',
+          'hover:-translate-y-0.5 hover:border-[var(--color-border-hover)] hover:bg-[var(--color-grey-50)] hover:shadow-[var(--shadow-sm)]',
           'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-toss-blue)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-bg-primary)]'
         )}
       >
-        <div className="flex items-center justify-between gap-4">
-          <div className="min-w-0 flex-1">
-            <div className="flex flex-wrap items-center gap-2 text-xs text-[var(--color-text-tertiary)]">
+        <div className="min-w-0">
+          <div className="min-w-0">
+            <div className="flex flex-wrap items-center gap-2 text-xs text-[var(--color-text-tertiary)] transition-transform duration-300 ease-[var(--ease-default)] group-hover:translate-x-0.5">
               <span className="inline-flex items-center gap-1.5 rounded-full border border-[var(--color-border)] bg-[var(--color-grey-50)] px-2 py-1 text-xs font-medium text-[var(--color-text-secondary)]">
                 <CategoryIcon category={post.category} />
                 {post.category}
@@ -135,14 +77,14 @@ export default function PostCard({ post, variant = 'default' }: PostCardProps) {
                 </>
               )}
             </div>
-            <h3 className="mt-2 text-base font-semibold leading-snug text-[var(--color-text-primary)] transition-colors group-hover:text-[var(--color-toss-blue)] group-focus-visible:text-[var(--color-toss-blue)]">
+            <h3 className="mt-3 text-lg font-semibold leading-snug text-[var(--color-text-primary)] transition-[color,transform] duration-300 ease-[var(--ease-default)] group-hover:translate-x-1 group-hover:text-[var(--color-toss-blue)] group-focus-visible:text-[var(--color-toss-blue)]">
               {post.title}
             </h3>
-            <p className="mt-1 text-sm text-[var(--color-text-secondary)] line-clamp-2">
+            <p className="mt-2 max-w-3xl text-sm leading-6 text-[var(--color-text-secondary)] line-clamp-2 transition-transform duration-300 ease-[var(--ease-default)] group-hover:translate-x-1">
               {post.description}
             </p>
             {visibleTags.length > 0 ? (
-              <div className="mt-3 flex flex-wrap gap-2">
+              <div className="mt-3 flex flex-wrap gap-2 transition-transform duration-300 ease-[var(--ease-default)] group-hover:translate-x-1">
                 {visibleTags.map((tag) => (
                   <span
                     key={tag}
@@ -154,18 +96,6 @@ export default function PostCard({ post, variant = 'default' }: PostCardProps) {
               </div>
             ) : null}
           </div>
-          {post.image ? (
-            <div className="hidden h-20 w-32 shrink-0 overflow-hidden rounded-xl border border-[var(--color-border)] sm:block">
-              <Image
-                src={post.image}
-                alt=""
-                width={256}
-                height={160}
-                sizes="128px"
-                className="h-full w-full object-cover transition-transform duration-200 group-hover:scale-105"
-              />
-            </div>
-          ) : null}
         </div>
       </Link>
     );
@@ -175,14 +105,14 @@ export default function PostCard({ post, variant = 'default' }: PostCardProps) {
     <Link
       href={`/blog/${post.slug}`}
       className={clsx(
-        'group flex h-full cursor-pointer flex-col rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-bg-primary)] p-6',
+        'group flex h-full cursor-pointer flex-col overflow-hidden rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-bg-primary)] p-6',
         'transition-all duration-[var(--duration-200)] ease-[var(--ease-default)]',
         'hover:-translate-y-0.5 hover:border-[var(--color-border-hover)] hover:shadow-[var(--shadow-md)]',
         'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-toss-blue)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-bg-primary)]',
         'active:translate-y-0 active:shadow-sm'
       )}
     >
-      <div className="mb-4 flex items-center gap-2 text-xs text-[var(--color-text-tertiary)]">
+      <div className="mb-4 flex items-center gap-2 text-xs text-[var(--color-text-tertiary)] transition-transform duration-300 ease-[var(--ease-default)] group-hover:translate-x-0.5">
         <span className="inline-flex items-center gap-1.5 rounded-full border border-[var(--color-border)] bg-[var(--color-grey-50)] px-2.5 py-1 text-xs font-medium text-[var(--color-text-secondary)]">
           <CategoryIcon category={post.category} />
           {post.category}
@@ -196,10 +126,10 @@ export default function PostCard({ post, variant = 'default' }: PostCardProps) {
           </>
         )}
       </div>
-      <h3 className="line-clamp-2 text-lg font-semibold leading-snug text-[var(--color-text-primary)] transition-colors group-hover:text-[var(--color-toss-blue)] group-focus-visible:text-[var(--color-toss-blue)]">
+      <h3 className="line-clamp-2 text-lg font-semibold leading-snug text-[var(--color-text-primary)] transition-[color,transform] duration-300 ease-[var(--ease-default)] group-hover:translate-x-1 group-hover:text-[var(--color-toss-blue)] group-focus-visible:text-[var(--color-toss-blue)]">
         {post.title}
       </h3>
-      <p className="mt-3 flex-grow line-clamp-2 text-sm text-[var(--color-text-secondary)]">
+      <p className="mt-3 flex-grow line-clamp-2 text-sm text-[var(--color-text-secondary)] transition-transform duration-300 ease-[var(--ease-default)] group-hover:translate-x-1">
         {post.description}
       </p>
     </Link>

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

@@ -50,7 +50,7 @@ export default function PostList({ posts, layout = 'grid' }: PostListProps) {
         variants={containerVariants}
         initial="hidden"
         animate="visible"
-        className="space-y-3"
+        className="space-y-4"
       >
         {posts.map((post) => (
           <motion.div key={post.slug} variants={itemVariants}>

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

@@ -55,10 +55,10 @@ export default function TableOfContents({ items }: TableOfContentsProps) {
 
   return (
     <nav
-      className="hidden xl:block fixed right-8 top-1/2 -translate-y-1/2 w-64 max-h-[80vh]"
+      className="fixed right-8 top-20 bottom-8 hidden w-64 xl:block"
       aria-label="이 글의 목차"
     >
-      <div className="p-4 bg-[var(--color-grey-50)] rounded-[var(--radius-md)] max-h-[80vh] overflow-y-auto">
+      <div className="h-full overflow-y-auto rounded-[var(--radius-md)] bg-[var(--color-grey-50)] p-4">
         <h2 className="text-sm font-semibold text-[var(--color-grey-900)] mb-4 sticky top-0 bg-[var(--color-grey-50)] pb-2">
           이 글의 목차
         </h2>

src/features/blog/ui/pages/EngineeringPage.tsx

@@ -6,7 +6,7 @@ import EngineeringPageClient from './EngineeringPageClient';
 
 export const metadata: Metadata = {
   title: 'Engineering',
-  description: '기술 글과 시리즈를 같은 흐름에서 살펴볼 수 있어요',
+  description: '기술 글을 한 흐름에서 탐색할 수 있어요',
 };
 
 export default function EngineeringPage() {
@@ -22,7 +22,7 @@ export default function EngineeringPage() {
             Engineering
           </h1>
           <p className="mt-4 text-lg text-[var(--color-grey-600)]">
-            기술 글과 시리즈를 같은 흐름에서 살펴볼 수 있어요
+            기술 글을 한 흐름에서 살펴볼 수 있어요
           </p>
         </header>