+ {post.series ? (
+
+ {post.series.title}
+
+ ) : null}
{formattedDate}
{readingTimeLabel && (
@@ -135,6 +141,18 @@ export default function PostCard({ post, variant = 'default' }: PostCardProps) {
{post.description}
+ {visibleTags.length > 0 ? (
+
+ {visibleTags.map((tag) => (
+
+ #{tag}
+
+ ))}
+
+ ) : null}
{post.image ? (
diff --git a/src/features/blog/ui/pages/BlogListPage.tsx b/src/features/blog/ui/pages/BlogListPage.tsx
index e90911c0..69d159af 100644
--- a/src/features/blog/ui/pages/BlogListPage.tsx
+++ b/src/features/blog/ui/pages/BlogListPage.tsx
@@ -1,6 +1,6 @@
import { Metadata } from 'next';
import { getSortedFeedData } from '@/features/blog/services/post-repository';
-import { Header, Container } from '@/shared/layout';
+import { Container } from '@/shared/layout';
import BlogListClient from './BlogListClient';
export const metadata: Metadata = {
@@ -12,23 +12,19 @@ export default function BlogPage() {
const allPosts = getSortedFeedData();
return (
- <>
-
+
+
+
+
+ Blog
+
+
+ 개발과 일상에 대한 이야기를 나눕니다
+
+
-
-
-
-
- Blog
-
-
- 개발과 일상에 대한 이야기를 나눕니다
-
-
-
-
-
-
+
+
);
}
diff --git a/src/features/blog/ui/pages/BlogPostPage.tsx b/src/features/blog/ui/pages/BlogPostPage.tsx
index 55a4f5c6..16c7cb0a 100644
--- a/src/features/blog/ui/pages/BlogPostPage.tsx
+++ b/src/features/blog/ui/pages/BlogPostPage.tsx
@@ -9,7 +9,7 @@ import {
getMdxSource,
parseHeadingsFromMdx,
} from '@/features/blog/services/markdown-parser';
-import { Header, Container } from '@/shared/layout';
+import { Container } from '@/shared/layout';
import {
ReadingProgress,
TableOfContents,
@@ -92,7 +92,6 @@ export default async function BlogPostPage({
return (
<>
-
-
+
{/* Header */}
diff --git a/src/features/blog/ui/pages/EngineeringPage.tsx b/src/features/blog/ui/pages/EngineeringPage.tsx
index d9045b5a..e470b1a0 100644
--- a/src/features/blog/ui/pages/EngineeringPage.tsx
+++ b/src/features/blog/ui/pages/EngineeringPage.tsx
@@ -1,7 +1,7 @@
import { Metadata } from 'next';
import { Suspense } from 'react';
import { getSortedFeedData } from '@/features/blog/services/post-repository';
-import { Header, Container } from '@/shared/layout';
+import { Container } from '@/shared/layout';
import EngineeringPageClient from './EngineeringPageClient';
export const metadata: Metadata = {
@@ -15,25 +15,21 @@ export default function EngineeringPage() {
);
return (
- <>
-
+
+
+
-
-
-
-
-
-
-
-
-
+
+
+
+
);
}
diff --git a/src/features/blog/ui/pages/EngineeringSeriesPage.tsx b/src/features/blog/ui/pages/EngineeringSeriesPage.tsx
index 5f42e550..a0b32813 100644
--- a/src/features/blog/ui/pages/EngineeringSeriesPage.tsx
+++ b/src/features/blog/ui/pages/EngineeringSeriesPage.tsx
@@ -2,7 +2,7 @@ import Link from 'next/link';
import { notFound } from 'next/navigation';
import { getSeriesSummaries } from '@/features/blog/model/series-group';
import { getSortedFeedData } from '@/features/blog/services/post-repository';
-import { Header, Container } from '@/shared/layout';
+import { Container } from '@/shared/layout';
interface EngineeringSeriesPageProps {
seriesId: string;
@@ -31,63 +31,59 @@ export default function EngineeringSeriesPage({
}
return (
- <>
-
+
+
+ ←
+ Engineering으로 돌아가기
+
-
-
- ←
- Engineering으로 돌아가기
-
+
-
+
+ {seriesSummary.posts.map((post) => {
+ const order = post.series?.order ?? 0;
-
- {seriesSummary.posts.map((post) => {
- const order = post.series?.order ?? 0;
-
- return (
-
-
-
- {order}편 · {formatPostDate(post.date)}
-
-
- {post.title}
-
-
- {post.description}
-
-
- 글 보기
-
-
-
- );
- })}
-
-
-
-
+ return (
+
+
+
+ {order}편 · {formatPostDate(post.date)}
+
+
+ {post.title}
+
+
+ {post.description}
+
+
+ 글 보기
+
+
+
+ );
+ })}
+
+
+
);
}
diff --git a/src/features/blog/ui/pages/LifePage.tsx b/src/features/blog/ui/pages/LifePage.tsx
index e19c1c4c..ca8b1788 100644
--- a/src/features/blog/ui/pages/LifePage.tsx
+++ b/src/features/blog/ui/pages/LifePage.tsx
@@ -1,6 +1,6 @@
import { Metadata } from 'next';
import { getSortedFeedData } from '@/features/blog/services/post-repository';
-import { Header, Container } from '@/shared/layout';
+import { Container } from '@/shared/layout';
import { PostList } from '@/features/blog/ui/components';
export const metadata: Metadata = {
@@ -12,23 +12,19 @@ export default function LifePage() {
const lifePosts = getSortedFeedData().filter((post) => post.category === 'Life');
return (
- <>
-
+
+
+
-
-
-
-
-
-
-
+
+
);
}
diff --git a/src/features/blog/ui/pages/SeriesPage.tsx b/src/features/blog/ui/pages/SeriesPage.tsx
index 96a7dd1b..74e2b638 100644
--- a/src/features/blog/ui/pages/SeriesPage.tsx
+++ b/src/features/blog/ui/pages/SeriesPage.tsx
@@ -1,6 +1,6 @@
import { Metadata } from 'next';
import { getSortedFeedData } from '@/features/blog/services/post-repository';
-import { Header, Container } from '@/shared/layout';
+import { Container } from '@/shared/layout';
import { EmptyState } from '@/shared/ui';
import { getSeriesSummaries } from '@/features/blog/model/series-group';
import { SeriesHubList } from '@/features/blog/ui/components';
@@ -19,40 +19,36 @@ export default function SeriesPage() {
);
return (
- <>
-
+
+
+
-
-
-
-
- {seriesSummaries.length === 0 ? (
- 📚}
- title="아직 등록된 시리즈가 없어요"
- description="새로운 시리즈를 준비 중입니다. 먼저 블로그의 다른 글을 둘러보세요."
- size="sm"
- action={{
- label: 'Engineering 둘러보기',
- href: '/engineering',
- variant: 'secondary',
- }}
- />
- ) : (
-
-
-
+ {seriesSummaries.length === 0 ? (
+ 📚}
+ title="아직 등록된 시리즈가 없어요"
+ description="새로운 시리즈를 준비 중입니다. 먼저 블로그의 다른 글을 둘러보세요."
+ size="sm"
+ action={{
+ label: 'Engineering 둘러보기',
+ href: '/engineering',
+ variant: 'secondary',
+ }}
+ />
+ ) : (
+
+
);
}
diff --git a/src/features/home/model/home-feed.test.ts b/src/features/home/model/home-feed.test.ts
new file mode 100644
index 00000000..6fef3e06
--- /dev/null
+++ b/src/features/home/model/home-feed.test.ts
@@ -0,0 +1,95 @@
+import { describe, expect, it } from 'vitest';
+import type { FeedData } from '@/domains/post/model/types';
+import {
+ buildHomeCategoryCounts,
+ filterHomePosts,
+ type HomePopularView,
+} from './home-feed';
+
+function createPost(
+ slug: string,
+ category: FeedData['category'],
+ date: string,
+ overrides: Partial = {}
+): FeedData {
+ return {
+ slug,
+ title: slug,
+ description: `${slug} description`,
+ date,
+ category,
+ ...overrides,
+ };
+}
+
+describe('home-feed model', () => {
+ it('builds category counts for all home filters', () => {
+ const posts = [
+ createPost('one', 'Tech', '2026-04-01'),
+ createPost('two', 'Life', '2026-04-02'),
+ createPost('three', 'Tech', '2026-04-03'),
+ ];
+
+ expect(buildHomeCategoryCounts(posts)).toEqual({
+ All: 3,
+ Tech: 2,
+ Life: 1,
+ });
+ });
+
+ it('filters posts by query across title, description, tags, and series', () => {
+ const posts = [
+ createPost('redis', 'Tech', '2026-04-03', {
+ title: 'Redis 운영 회고',
+ tags: ['Cache'],
+ }),
+ createPost('travel', 'Life', '2026-04-02', {
+ title: '베트남 여행 후기',
+ }),
+ createPost('flink-series', 'Tech', '2026-04-01', {
+ title: '체크포인트 정리',
+ series: {
+ id: 'flink',
+ title: 'Flink 완전정복',
+ order: 1,
+ },
+ }),
+ ];
+
+ expect(
+ filterHomePosts(posts, [], {
+ query: 'cache',
+ category: 'All',
+ sortOrder: 'latest',
+ }).map((post) => post.slug)
+ ).toEqual(['redis']);
+
+ expect(
+ filterHomePosts(posts, [], {
+ query: 'flink',
+ category: 'All',
+ sortOrder: 'latest',
+ }).map((post) => post.slug)
+ ).toEqual(['flink-series']);
+ });
+
+ it('sorts by popularity first and falls back to latest order', () => {
+ const posts = [
+ createPost('older-popular', 'Tech', '2026-04-01'),
+ createPost('latest-normal', 'Tech', '2026-04-03'),
+ createPost('mid-popular', 'Life', '2026-04-02'),
+ ];
+ const popularViews: HomePopularView[] = [
+ { slug: 'mid-popular', count: 10 },
+ { slug: 'older-popular', count: 20 },
+ ];
+
+ expect(
+ filterHomePosts(posts, popularViews, {
+ query: '',
+ category: 'All',
+ sortOrder: 'popular',
+ }).map((post) => post.slug)
+ ).toEqual(['older-popular', 'mid-popular', 'latest-normal']);
+ });
+});
diff --git a/src/features/home/model/home-feed.ts b/src/features/home/model/home-feed.ts
new file mode 100644
index 00000000..3876b3fa
--- /dev/null
+++ b/src/features/home/model/home-feed.ts
@@ -0,0 +1,83 @@
+import type { FeedData } from '@/domains/post/model/types';
+import type { Category } from '@/features/blog/ui/components/CategoryFilter';
+
+export interface HomePopularView {
+ slug: string;
+ count: number;
+}
+
+export type HomeSortOrder = 'latest' | 'popular';
+
+interface HomeFeedOptions {
+ query: string;
+ category: Category;
+ sortOrder: HomeSortOrder;
+}
+
+export function buildHomeCategoryCounts(
+ posts: FeedData[]
+): Record {
+ return {
+ All: posts.length,
+ Tech: posts.filter((post) => post.category === 'Tech').length,
+ Life: posts.filter((post) => post.category === 'Life').length,
+ };
+}
+
+function buildSearchText(post: FeedData): string {
+ return [
+ post.title,
+ post.description,
+ post.category,
+ post.series?.title,
+ ...(post.tags ?? []),
+ ]
+ .filter(Boolean)
+ .join(' ')
+ .toLowerCase();
+}
+
+function compareByDateDesc(a: FeedData, b: FeedData): number {
+ if (a.date === b.date) {
+ return a.slug.localeCompare(b.slug);
+ }
+
+ return a.date < b.date ? 1 : -1;
+}
+
+export function filterHomePosts(
+ posts: FeedData[],
+ popularViews: HomePopularView[],
+ { query, category, sortOrder }: HomeFeedOptions
+): FeedData[] {
+ const normalizedQuery = query.trim().toLowerCase();
+ const popularCountBySlug = new Map(
+ popularViews.map((entry) => [entry.slug, entry.count])
+ );
+
+ return [...posts]
+ .filter((post) => {
+ if (category !== 'All' && post.category !== category) {
+ return false;
+ }
+
+ if (!normalizedQuery) {
+ return true;
+ }
+
+ return buildSearchText(post).includes(normalizedQuery);
+ })
+ .sort((left, right) => {
+ if (sortOrder === 'popular') {
+ const countGap =
+ (popularCountBySlug.get(right.slug) ?? 0) -
+ (popularCountBySlug.get(left.slug) ?? 0);
+
+ if (countGap !== 0) {
+ return countGap;
+ }
+ }
+
+ return compareByDateDesc(left, right);
+ });
+}
diff --git a/src/features/home/ui/pages/HomePage.test.tsx b/src/features/home/ui/pages/HomePage.test.tsx
index 73cf0437..12db3797 100644
--- a/src/features/home/ui/pages/HomePage.test.tsx
+++ b/src/features/home/ui/pages/HomePage.test.tsx
@@ -4,30 +4,21 @@ import type { FeedData } from '@/domains/post/model/types';
import HomePage from './HomePage';
const mockGetSortedFeedData = vi.fn<() => FeedData[]>(() => []);
-const mockGetSeriesSummaries = vi.fn(() => []);
const mockGetPopularViewsInRecentDays = vi.fn(async () => []);
vi.mock('@/features/blog/services/post-repository', () => ({
getSortedFeedData: () => mockGetSortedFeedData(),
}));
-vi.mock('@/features/blog/model/series-group', () => ({
- getSeriesSummaries: (...args: unknown[]) => mockGetSeriesSummaries(...args),
-}));
-
vi.mock('@/app/actions/view', () => ({
getPopularViewsInRecentDays: (...args: unknown[]) =>
mockGetPopularViewsInRecentDays(...args),
}));
-vi.mock('@/shared/layout', () => ({
- Header: () =>
,
-}));
-
-const mockHeroSection = vi.fn(() =>
);
+const mockHomePageClient = vi.fn(() =>
);
-vi.mock('@/features/home/ui/sections/HeroSection', () => ({
- default: (props: unknown) => mockHeroSection(props),
+vi.mock('./HomePageClient', () => ({
+ default: (props: unknown) => mockHomePageClient(props),
}));
function createPost(index: number): FeedData {
@@ -41,7 +32,7 @@ function createPost(index: number): FeedData {
}
describe('HomePage', () => {
- it('fills popular list with latest non-series posts when view data is empty', async () => {
+ it('passes posts and normalized popular views to the home client', async () => {
mockGetSortedFeedData.mockReturnValue([
createPost(1),
createPost(2),
@@ -50,23 +41,28 @@ describe('HomePage', () => {
createPost(5),
createPost(6),
]);
- mockGetSeriesSummaries.mockReturnValue([]);
- mockGetPopularViewsInRecentDays.mockResolvedValue([]);
+ mockGetPopularViewsInRecentDays.mockResolvedValue([
+ {
+ slug: 'post-2',
+ count: 17,
+ updated_at: '2026-03-20T00:00:00.000Z',
+ },
+ ]);
const element = await HomePage();
render(element);
- expect(screen.getByTestId('mock-header')).toBeInTheDocument();
- expect(screen.getByTestId('hero')).toBeInTheDocument();
+ expect(screen.getByTestId('home-page-client')).toBeInTheDocument();
+ expect(mockGetPopularViewsInRecentDays).toHaveBeenCalledWith(30, 6);
- const firstCallArgs = mockHeroSection.mock.calls[0]?.[0] as {
- popularPosts: Array<{ post: FeedData; viewCount: number | null }>;
+ const firstCallArgs = mockHomePageClient.mock.calls[0]?.[0] as {
+ posts: FeedData[];
+ popularViews: Array<{ slug: string; count: number }>;
};
- expect(firstCallArgs.popularPosts).toHaveLength(5);
- expect(
- firstCallArgs.popularPosts.every((item) => item.viewCount === null)
- ).toBe(true);
- expect(firstCallArgs.popularPosts[0].post.slug).toBe('post-1');
+ expect(firstCallArgs.posts).toHaveLength(6);
+ expect(firstCallArgs.popularViews).toEqual([
+ { slug: 'post-2', count: 17 },
+ ]);
});
});
diff --git a/src/features/home/ui/pages/HomePage.tsx b/src/features/home/ui/pages/HomePage.tsx
index 1c6b463d..dac4ab1c 100644
--- a/src/features/home/ui/pages/HomePage.tsx
+++ b/src/features/home/ui/pages/HomePage.tsx
@@ -1,106 +1,25 @@
-import { Header } from '@/shared/layout';
-import type { FeedData } from '@/domains/post/model/types';
import { getPopularViewsInRecentDays } from '@/app/actions/view';
import { getSortedFeedData } from '@/features/blog/services/post-repository';
-import { getSeriesSummaries } from '@/features/blog/model/series-group';
-import HeroSection from '@/features/home/ui/sections/HeroSection';
+import HomePageClient from './HomePageClient';
-const POPULAR_POST_LIMIT = 5;
const POPULAR_VIEW_DAYS = 30;
-export interface HomePopularPost {
- post: FeedData;
- viewCount: number | null;
-}
-
-function buildPopularPosts(
- allPosts: FeedData[],
- popularViews: Array<{ slug: string; count: number }>
-): HomePopularPost[] {
- const nonSeriesPosts = allPosts.filter((post) => !post.series);
- const postMap = new Map(nonSeriesPosts.map((post) => [post.slug, post]));
- const pickedSlugs = new Set();
-
- const rankedMatches = popularViews
- .map((entry) => {
- const post = postMap.get(entry.slug);
-
- if (!post) {
- return null;
- }
-
- return {
- post,
- viewCount: entry.count,
- };
- })
- .filter((entry): entry is HomePopularPost => entry !== null)
- .sort((a, b) => {
- const countGap = (b.viewCount ?? 0) - (a.viewCount ?? 0);
- if (countGap !== 0) {
- return countGap;
- }
-
- return a.post.date < b.post.date ? 1 : -1;
- });
-
- const result: HomePopularPost[] = [];
-
- for (const entry of rankedMatches) {
- if (result.length >= POPULAR_POST_LIMIT) {
- break;
- }
-
- if (pickedSlugs.has(entry.post.slug)) {
- continue;
- }
-
- pickedSlugs.add(entry.post.slug);
- result.push(entry);
- }
-
- if (result.length >= POPULAR_POST_LIMIT) {
- return result;
- }
-
- for (const post of nonSeriesPosts) {
- if (result.length >= POPULAR_POST_LIMIT) {
- break;
- }
-
- if (pickedSlugs.has(post.slug)) {
- continue;
- }
-
- pickedSlugs.add(post.slug);
- result.push({
- post,
- viewCount: null,
- });
- }
-
- return result;
-}
-
export default async function HomePage() {
const sortedPosts = getSortedFeedData();
- const seriesSummaries = getSeriesSummaries(sortedPosts);
const popularViews = await getPopularViewsInRecentDays(
POPULAR_VIEW_DAYS,
- POPULAR_POST_LIMIT
+ Math.max(sortedPosts.length, 1)
);
- const popularPosts = buildPopularPosts(sortedPosts, popularViews);
return (
- <>
-
-
-
-
+
+ ({
+ slug,
+ count,
+ }))}
+ />
+
);
}
diff --git a/src/features/home/ui/pages/HomePageClient.tsx b/src/features/home/ui/pages/HomePageClient.tsx
new file mode 100644
index 00000000..9251d17c
--- /dev/null
+++ b/src/features/home/ui/pages/HomePageClient.tsx
@@ -0,0 +1,145 @@
+'use client';
+
+import { useDeferredValue, useMemo, useState } from 'react';
+import { clsx } from 'clsx';
+import type { FeedData } from '@/domains/post/model/types';
+import {
+ CategoryFilter,
+ PostList,
+ type Category,
+} from '@/features/blog/ui/components';
+import {
+ buildHomeCategoryCounts,
+ filterHomePosts,
+ type HomePopularView,
+ type HomeSortOrder,
+} from '@/features/home/model/home-feed';
+import { Container } from '@/shared/layout';
+
+interface HomePageClientProps {
+ posts: FeedData[];
+ popularViews: HomePopularView[];
+}
+
+const FEED_CATEGORIES: Category[] = ['All', 'Tech', 'Life'];
+const SORT_OPTIONS: Array<{ value: HomeSortOrder; label: string }> = [
+ { value: 'latest', label: '최신순' },
+ { value: 'popular', label: '인기순' },
+];
+
+export default function HomePageClient({
+ posts,
+ popularViews,
+}: HomePageClientProps) {
+ const [searchQuery, setSearchQuery] = useState('');
+ const [activeCategory, setActiveCategory] = useState('All');
+ const [sortOrder, setSortOrder] = useState('latest');
+ const deferredSearchQuery = useDeferredValue(searchQuery);
+
+ const categoryCounts = useMemo(() => buildHomeCategoryCounts(posts), [posts]);
+ const filteredPosts = useMemo(
+ () =>
+ filterHomePosts(posts, popularViews, {
+ query: deferredSearchQuery,
+ category: activeCategory,
+ sortOrder,
+ }),
+ [activeCategory, deferredSearchQuery, popularViews, posts, sortOrder]
+ );
+
+ const activeSortLabel =
+ SORT_OPTIONS.find((option) => option.value === sortOrder)?.label ??
+ '최신순';
+
+ return (
+
+
+
+
+
+
+ Archive
+
+
+ {filteredPosts.length}개의 글
+ •
+ {activeSortLabel}
+
+
+
+ {deferredSearchQuery.trim() ? (
+
+ "{deferredSearchQuery.trim()}" 검색 결과
+
+ ) : null}
+
+ 홈 피드 검색
+
+
+
+
+
+
+
+
+
+
+ {SORT_OPTIONS.map((option) => (
+ setSortOrder(option.value)}
+ className={clsx(
+ 'rounded-full px-4 py-2 text-sm font-medium transition-colors',
+ sortOrder === option.value
+ ? 'bg-[var(--color-bg-primary)] text-[var(--color-grey-900)] shadow-sm'
+ : 'text-[var(--color-grey-500)] hover:text-[var(--color-grey-700)]'
+ )}
+ aria-pressed={sortOrder === option.value}
+ >
+ {option.label}
+
+ ))}
+
+
+
+
+
+ );
+}
+
+export type { HomePageClientProps };
diff --git a/src/features/resume/ui/pages/ResumePage.tsx b/src/features/resume/ui/pages/ResumePage.tsx
index 32e872a5..67811d50 100644
--- a/src/features/resume/ui/pages/ResumePage.tsx
+++ b/src/features/resume/ui/pages/ResumePage.tsx
@@ -1,6 +1,6 @@
import { Metadata } from 'next';
import type { ReactNode } from 'react';
-import { Header, Container } from '@/shared/layout';
+import { Container } from '@/shared/layout';
import {
experiences,
personalInfo,
@@ -104,11 +104,8 @@ export default function ResumePage() {
};
return (
- <>
-
-
-
-
+
+
{/* Profile Header */}
@@ -171,7 +168,7 @@ export default function ResumePage() {
{/* Skills Section */}
-
+
🛠️ Skills
@@ -188,7 +185,7 @@ export default function ResumePage() {
{/* Experience Section */}
-
+
💼
Experience
@@ -281,7 +278,7 @@ export default function ResumePage() {
{/* Personal Projects Section */}
-
+
🚀 Personal Projects
@@ -368,7 +365,7 @@ export default function ResumePage() {
{/* Education Section */}
-
+
🎓 Education
@@ -463,7 +460,6 @@ export default function ResumePage() {
-
+
);
}
@@ -25,7 +25,8 @@ export default function ThemeToggle() {
const nextTheme = isDark ? 'light' : 'dark';
return (
-
{
setTheme(nextTheme);
trackEvent(AnalyticsEvents.theme, {
@@ -33,60 +34,63 @@ export default function ThemeToggle() {
to_theme: nextTheme,
});
}}
- className="relative p-2 rounded-lg hover:bg-[var(--color-grey-100)] transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-toss-blue)]"
+ className="relative inline-flex h-11 w-[88px] items-center rounded-full border border-[var(--color-grey-200)] bg-[var(--color-grey-50)] px-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-toss-blue)]"
aria-label={`${isDark ? '라이트' : '다크'} 모드로 전환`}
- whileHover={{ scale: 1.05 }}
- whileTap={{ scale: 0.95 }}
>
-
-
+
+
+
+
+
+
- {isDark ? (
- // Dark Mode -> Show Sun (Switch to Light)
-
-
- ) : (
- // Light Mode -> Show Moon (Switch to Dark)
-
-
- )}
-
-
-
+
+
+
+
+
);
}