feat(site): 콘텐츠 탐색과 읽기 경험 개선 (#113)

홈을 최신순 단일 피드로 단순화하고 읽기 경험, 콘텐츠 공개 정책, 성능 및 배포 안정성을 개선합니다.

Author: dev-wooyeon

.github/workflows/quality.yml

@@ -0,0 +1,45 @@
+name: Quality
+
+on:
+  pull_request:
+  push:
+    branches:
+      - master
+
+concurrency:
+  group: quality-${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  validate:
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install Chromium
+        run: npx playwright install --with-deps chromium
+
+      - name: Run repository quality gate
+        run: npm run test:ci
+
+      - name: Upload browser failures
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-report
+          path: |
+            playwright-report
+            .cache/test-results
+          if-no-files-found: ignore
+          retention-days: 7

app/api/og/Pretendard-Bold.ttf

@@ -0,0 +1,26 @@
+// @vitest-environment node
+
+import { describe, expect, it } from 'vitest';
+import { NextRequest } from 'next/server';
+
+const PNG_SIGNATURE = [137, 80, 78, 71, 13, 10, 26, 10];
+
+describe('GET /api/og', () => {
+  it('returns a non-empty PNG from the Node.js runtime', async () => {
+    const { GET, runtime } = await import('./route');
+    const response = await GET(
+      new NextRequest(
+        'https://ark-log.vercel.app/api/og?title=%ED%95%9C%EA%B8%80%20OG%20%EC%9D%B4%EB%AF%B8%EC%A7%80&tags=Next.js,Ark'
+      )
+    );
+    const bytes = new Uint8Array(await response.arrayBuffer());
+
+    expect(runtime).toBe('nodejs');
+    expect(response.status).toBe(200);
+    expect(response.headers.get('content-type')).toBe('image/png');
+    expect(bytes.byteLength).toBeGreaterThan(10_000);
+    expect(Array.from(bytes.slice(0, PNG_SIGNATURE.length))).toEqual(
+      PNG_SIGNATURE
+    );
+  }, 30_000);
+});

app/api/og/route.test.ts

@@ -1,23 +1,35 @@
+import { readFile } from 'node:fs/promises';
+import { join } from 'node:path';
 import { ImageResponse } from 'next/og';
-import { NextRequest } from 'next/server';
+import type { NextRequest } from 'next/server';
 import { SITE_NAME } from '@/site/config/site';
 
-export const runtime = 'edge';
+export const runtime = 'nodejs';
+
+const fontPath = join(process.cwd(), 'app', 'api', 'og', 'Pretendard-Bold.ttf');
+let fontDataPromise: Promise<ArrayBuffer> | null = null;
+
+function loadFontData(): Promise<ArrayBuffer> {
+  if (!fontDataPromise) {
+    fontDataPromise = readFile(fontPath).then(
+      (font) =>
+        font.buffer.slice(
+          font.byteOffset,
+          font.byteOffset + font.byteLength
+        ) as ArrayBuffer
+    );
+  }
+
+  return fontDataPromise;
+}
 
 export async function GET(req: NextRequest) {
   const { searchParams } = new URL(req.url);
   const title = searchParams.get('title') || SITE_NAME;
   const date = searchParams.get('date');
   const tags = searchParams.get('tags')?.split(',') || [];
 
-  // Load Noto Sans KR for consistent rendering across environments
-  // Using a Google Fonts raw file as a reliable source
-  const fontData = await fetch(
-    new URL(
-      'https://github.com/google/fonts/raw/main/ofl/notosanskr/NotoSansKR-Bold.otf',
-      import.meta.url
-    )
-  ).then((res) => res.arrayBuffer());
+  const fontData = await loadFontData();
 
   return new ImageResponse(
     <div
@@ -37,7 +49,7 @@ export async function GET(req: NextRequest) {
           display: 'flex',
           flexDirection: 'column',
           gap: '20px',
-          fontFamily: '"Noto Sans KR"',
+          fontFamily: 'Pretendard',
         }}
       >
         {date && (
@@ -73,6 +85,7 @@ export async function GET(req: NextRequest) {
               <div
                 key={tag}
                 style={{
+                  display: 'flex',
                   backgroundColor: 'rgba(49, 130, 246, 0.1)',
                   color: '#3182f6',
                   padding: '8px 24px',
@@ -102,7 +115,7 @@ export async function GET(req: NextRequest) {
             fontSize: '32px',
             fontWeight: 700,
             color: '#3182f6',
-            fontFamily: '"Noto Sans KR"',
+            fontFamily: 'Pretendard',
           }}
         >
           {SITE_NAME}
@@ -114,7 +127,7 @@ export async function GET(req: NextRequest) {
       height: 630,
       fonts: [
         {
-          name: 'Noto Sans KR',
+          name: 'Pretendard',
           data: fontData,
           style: 'normal',
           weight: 700,

app/api/og/route.tsx

@@ -0,0 +1,26 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { describe, expect, it } from 'vitest';
+
+const layoutPath = path.resolve(process.cwd(), 'app/layout.tsx');
+const layoutContent = fs.readFileSync(layoutPath, 'utf8');
+const tossfacePath = path.resolve(process.cwd(), 'styles/tossface.css');
+const tossfaceContent = fs.readFileSync(tossfacePath, 'utf8');
+
+describe('root layout font loading', () => {
+  it('preloads the primary text font without eagerly loading Tossface', () => {
+    expect(layoutContent).toContain('href="/fonts/PretendardVariable.woff2"');
+    expect(layoutContent).not.toContain('href="/fonts/TossFaceFontWeb.otf"');
+  });
+
+  it('passes a public client DTO instead of full editorial metadata', () => {
+    expect(layoutContent).toContain('selectClientPosts(getSortedFeedData())');
+    expect(layoutContent).toContain('<AppProviders posts={posts}>');
+  });
+
+  it('keeps Tossface demand-driven for matching emoji glyphs', () => {
+    expect(layoutContent).toContain("import '@/styles/tossface.css';");
+    expect(tossfaceContent).toContain("font-family: 'Tossface Safe';");
+    expect(tossfaceContent).toContain('unicode-range:');
+  });
+});

app/layout.test.ts

@@ -5,6 +5,7 @@ import '@/styles/tossface.css';
 
 import AppProviders from '@/site/providers/AppProviders';
 import { getSortedFeedData } from '@/blog/services/post-repository';
+import { selectClientPosts } from '@/site/providers/client-posts';
 import { AppShell } from '@/site/shell/AppShell';
 import {
   SITE_AUTHOR,
@@ -59,12 +60,8 @@ export const viewport: Viewport = {
   initialScale: 1,
 };
 
-export default function RootLayout({
-  children,
-}: {
-  children: ReactNode;
-}) {
-  const posts = getSortedFeedData();
+export default function RootLayout({ children }: { children: ReactNode }) {
+  const posts = selectClientPosts(getSortedFeedData());
 
   return (
     <html lang="ko" suppressHydrationWarning>
@@ -76,16 +73,9 @@ export default function RootLayout({
           type="font/woff2"
           crossOrigin="anonymous"
         />
-        <link
-          rel="preload"
-          href="/fonts/TossFaceFontWeb.otf"
-          as="font"
-          type="font/otf"
-          crossOrigin="anonymous"
-        />
       </head>
       <body>
-        <AppProviders>
+        <AppProviders posts={posts}>
           <div id="app-root">
             <AppShell posts={posts}>{children}</AppShell>
           </div>

app/layout.tsx

@@ -0,0 +1,16 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import NotFound from './not-found';
+
+describe('NotFound', () => {
+  it('offers a Korean recovery path to the home page', () => {
+    render(<NotFound />);
+
+    expect(
+      screen.getByRole('heading', { name: '페이지를 찾을 수 없어요' })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('link', { name: '홈으로 돌아가기' })
+    ).toHaveAttribute('href', '/');
+  });
+});

app/not-found.test.tsx

@@ -0,0 +1,27 @@
+import Link from 'next/link';
+import { Container } from '@/ui/layout';
+
+export default function NotFound() {
+  return (
+    <main>
+      <Container size="sm" className="py-24 text-center md:py-32">
+        <p className="text-meta font-semibold text-[var(--color-toss-blue)]">
+          404
+        </p>
+        <h1 className="mt-3 text-2xl font-bold tracking-tight text-[var(--color-text-primary)] sm:text-3xl">
+          페이지를 찾을 수 없어요
+        </h1>
+        <p className="mx-auto mt-4 max-w-xl text-reading leading-relaxed text-[var(--color-text-secondary)]">
+          주소가 바뀌었거나 글이 아직 공개되지 않았습니다. 홈에서 다른 기록을
+          살펴보세요.
+        </p>
+        <Link
+          href="/"
+          className="mt-8 inline-flex min-h-11 items-center justify-center rounded-[var(--radius-action)] bg-[var(--color-toss-blue)] px-5 text-sm font-semibold text-white transition-colors hover:bg-[var(--color-toss-blue-dark)] 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)]"
+        >
+          홈으로 돌아가기
+        </Link>
+      </Container>
+    </main>
+  );
+}

app/not-found.tsx

@@ -29,14 +29,14 @@ describe('sitemap', () => {
     expect(urls).toEqual(
       expect.arrayContaining([
         SITE_URL,
-        `${SITE_URL}/blog`,
         `${SITE_URL}/engineering`,
         `${SITE_URL}/life`,
-        `${SITE_URL}/series`,
         `${SITE_URL}/resume`,
         `${SITE_URL}/rss.xml`,
       ])
     );
+    expect(urls).not.toContain(`${SITE_URL}/blog`);
+    expect(urls).not.toContain(`${SITE_URL}/series`);
   });
 
   it('uses updated date for post lastModified when available', () => {

app/sitemap.test.ts

@@ -28,10 +28,8 @@ export default function sitemap(): MetadataRoute.Sitemap {
 
   const routePaths: SitePath[] = [
     '',
-    '/blog',
     '/engineering',
     '/life',
-    '/series',
     '/resume',
     SITE_FEED_PATH,
   ];