Polish macOS layer styling

LOG.md

@@ -2,6 +2,20 @@
 
 ## 2026-05-29
 
+- Added a category post-list page size control with 9/18/27 options, defaulting to 9 and persisting the user's choice in `localStorage` under `categoryPageSize`.
+- Wired the selected category page size into the React Query key and `getPostsByCategory` request size, resetting to page 1 when the size changes while preserving search behavior.
+- Adjusted the category page toolbar so search, page-size controls, and grid/list controls stack cleanly on narrow screens and align in one row on desktop.
+- Validation: `npm run lint` passed and `npm run build` passed. Static verification confirms the category query uses `pageSize` and the page-size selector persists to `localStorage`; interactive browser verification was skipped because no local browser/Playwright automation runtime is available in this environment.
+- Recommended next task: verify the category toolbar in a real browser after deploy, especially mobile widths and the 18/27 page-size transitions.
+- Investigated Google Search Console crawlability concerns for the live site.
+- Checked live `robots.txt`, `sitemap.xml`, homepage, sample post pages, and backend post API with a Googlebot user agent; public post URLs in the sitemap returned 200 with no `X-Robots-Tag` or meta robots block.
+- Confirmed the non-www production host `blog.wypark.me` is the relevant host; its home/archive initial HTML currently contains no `/posts/` links because public lists are client-side rendered.
+- Identified crawlability risk areas: home/archive rely on client-side post-list fetching, local builds generate a static-only sitemap when the backend API is unreachable, sitemap `lastmod` values can be timezone-skewed when backend timestamps omit an offset, and canonical URLs are not currently emitted.
+- Validation: `npm run build` passed. As expected without a local backend, build-time sitemap generation logged `fetch failed` and produced only static sitemap entries in the local `.next` output.
+- Converted home and archive pages to server-rendered public post lists through a dedicated `src/api/publicPosts.ts` fetch helper so first HTML now includes discoverable `/posts/` links.
+- Added centralized site metadata utilities, canonical metadata for public pages/posts, dynamic sitemap generation, KST-aware API date parsing for `lastmod`, and robots/site URL reuse.
+- Validation: `npm run lint` passed and `npm run build` passed. A local production server with `NEXT_PUBLIC_API_URL=https://blogserver.wypark.me` returned 22 `/posts/` links on `/`, 204 on `/archive`, canonical URLs for both pages, and sitemap output with 104 URLs including 102 post URLs.
+- Recommended next task: deploy the SEO crawlability fix, then resubmit `https://blog.wypark.me/sitemap.xml` and a representative post URL in Google Search Console URL Inspection.
 - Redesigned the app shell into a macOS-inspired blog OS with pastel desktop background tokens, translucent menu bar, quick-launch Dock, and reusable window surfaces.
 - Applied the window treatment to the home dashboard, post reader, archive, category view, auth screens, chess puzzle view, and admin management shells.
 - Restored the missing local `chess.js` install in `node_modules` so build verification could run; no dependency version changes were intended.
@@ -14,3 +28,7 @@
 - Validation: `npm run lint` passed, `npm run build` passed. The build logged a sitemap fetch warning because the backend API at the local default was not reachable, but the command completed successfully.
 - Browser verification: previously started this app on `http://localhost:3100` because ports 3000 and 3001 were already occupied; confirmed desktop background gradients, menu bar, Dock, and window surfaces on `/`, `/archive`, and `/login`. For this follow-up, the dev/standalone server started successfully in foreground but exited when launched as a background non-interactive process, so browser verification was skipped after lint/build passed.
 - Recommended next task: review the remaining older Korean strings in admin/editor flows and normalize any mojibake that predates this redesign.
+- Unified the macOS-inspired layer system by splitting window, card, control, sidebar, menu bar, and Dock border/shadow/blur tokens, with stronger dark-mode card separation.
+- Applied the layer tokens across shared surfaces, the menu bar, Dock, sidebar controls, search/toggles, home dashboard panels, reader navigation cards, and admin dashboard/editor panels.
+- Validation: `npm run lint` passed, `npm run build` passed, and in-app browser verification on `http://localhost:3100/` confirmed distinct light/dark computed border, shadow, and backdrop blur values for the menu bar, main window, internal cards, and Dock.
+- Recommended next task: do a visual pass on lower-traffic admin list/modal screens and convert any remaining ad hoc hover fills to the shared card/control tokens.

src/api/publicPosts.ts

@@ -0,0 +1,68 @@
+import { ApiResponse, Post, PostListResponse } from '@/types';
+
+export const PUBLIC_POSTS_REVALIDATE_SECONDS = 300;
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8080';
+
+type PublicPostListParams = {
+  page?: number;
+  size?: number;
+  keyword?: string;
+  category?: string;
+  tag?: string;
+  sort?: string;
+};
+
+const buildPostListUrl = (params: PublicPostListParams = {}) => {
+  const searchParams = new URLSearchParams();
+
+  Object.entries({
+    ...params,
+    sort: params.sort || 'createdAt,desc',
+  }).forEach(([key, value]) => {
+    if (value !== undefined && value !== '') {
+      searchParams.set(key, String(value));
+    }
+  });
+
+  return `${API_URL}/api/posts?${searchParams.toString()}`;
+};
+
+export const fetchPublicPosts = async (
+  params: PublicPostListParams = {},
+): Promise<PostListResponse | null> => {
+  try {
+    const response = await fetch(buildPostListUrl(params), {
+      method: 'GET',
+      headers: { 'Content-Type': 'application/json' },
+      next: { revalidate: PUBLIC_POSTS_REVALIDATE_SECONDS },
+    });
+
+    if (!response.ok) return null;
+
+    const json = (await response.json()) as ApiResponse<PostListResponse>;
+    return json.data;
+  } catch (error) {
+    console.error('Public posts fetch error:', error);
+    return null;
+  }
+};
+
+export const fetchPublicPost = async (slug: string): Promise<Post | null> => {
+  try {
+    const response = await fetch(`${API_URL}/api/posts/${encodeURIComponent(slug)}`, {
+      method: 'GET',
+      headers: { 'Content-Type': 'application/json' },
+      next: { revalidate: 60 },
+    });
+
+    if (!response.ok) return null;
+
+    const json = (await response.json()) as ApiResponse<Post>;
+    return json.data;
+  } catch (error) {
+    console.error('Public post fetch error:', error);
+    return null;
+  }
+};
+

src/app/admin/page.tsx

@@ -93,7 +93,7 @@ function RecentPostRow({ post }: { post: Post }) {
   return (
     <Link
       href={`/posts/${post.slug}`}
-      className="group flex items-center justify-between gap-4 rounded-lg px-3 py-3 transition hover:bg-black/[0.03] dark:hover:bg-white/10"
+      className="group flex items-center justify-between gap-4 rounded-lg px-3 py-3 transition hover:bg-[var(--card-bg)]"
     >
       <div className="min-w-0">
         <p className="truncate text-sm font-semibold text-[var(--color-text)] transition group-hover:text-[var(--color-accent)]">{post.title}</p>
@@ -123,7 +123,7 @@ function RecentCommentRow({ comment }: { comment: AdminComment }) {
     return (
       <Link
         href={`/posts/${comment.postSlug}`}
-        className="flex items-center gap-3 rounded-lg px-3 py-3 transition hover:bg-black/[0.03] dark:hover:bg-white/10"
+        className="flex items-center gap-3 rounded-lg px-3 py-3 transition hover:bg-[var(--card-bg)]"
       >
         {content}
       </Link>

src/app/archive/page.tsx

@@ -1,61 +1,76 @@
-'use client';
+import type { Metadata } from 'next';
-
-import { useMemo } from 'react';
-import { useQuery } from '@tanstack/react-query';
-import { format } from 'date-fns';
 import Link from 'next/link';
-import { Archive, Calendar, ChevronRight, FileText, Loader2 } from 'lucide-react';
+import { Archive, Calendar, ChevronRight, FileText } from 'lucide-react';
-import { getPosts } from '@/api/posts';
+import {
+  fetchPublicPosts,
+} from '@/api/publicPosts';
 import EmptyState from '@/components/ui/EmptyState';
 import StatusBadge from '@/components/ui/StatusBadge';
 import Surface from '@/components/ui/Surface';
 import WindowSurface from '@/components/ui/WindowSurface';
+import { SITE_NAME } from '@/lib/site';
 import { Post, PostListResponse } from '@/types';
 
-const getTotalElements = (data?: PostListResponse) => {
+export const dynamic = 'force-dynamic';
+export const revalidate = 300;
+
+export const metadata: Metadata = {
+  title: 'Archive',
+  alternates: {
+    canonical: '/archive',
+  },
+  openGraph: {
+    title: `Archive | ${SITE_NAME}`,
+    url: '/archive',
+    siteName: SITE_NAME,
+    type: 'website',
+  },
+};
+
+const getTotalElements = (data?: PostListResponse | null) => {
   return data?.page?.totalElements ?? data?.totalElements ?? 0;
 };
 
-export default function ArchivePage() {
+const formatDate = (value: string) => {
-  const { data, isLoading } = useQuery({
+  const date = new Date(value);
-    queryKey: ['posts', 'all'],
+  if (Number.isNaN(date.getTime())) return '';
-    queryFn: () => getPosts({ page: 0, size: 1000 }),
+
-    staleTime: 1000 * 60 * 5,
+  return new Intl.DateTimeFormat('ko-KR', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+  }).format(date);
+};
+
+const groupPostsByMonth = (posts: Post[]) => {
+  const groups: Record<string, Record<string, Post[]>> = {};
+
+  posts.forEach((post) => {
+    const date = new Date(post.createdAt);
+    if (Number.isNaN(date.getTime())) return;
+
+    const year = date.getFullYear().toString();
+    const month = (date.getMonth() + 1).toString().padStart(2, '0');
+
+    groups[year] ??= {};
+    groups[year][month] ??= [];
+    groups[year][month].push(post);
   });
 
-  const archiveGroups = useMemo(() => {
+  return groups;
-    if (!data?.content) return {};
+};
 
-    const groups: { [year: string]: { [month: string]: Post[] } } = {};
+const sortPostsNewestFirst = (posts: Post[]) => {
-
+  return [...posts].sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
-    data.content.forEach((post) => {
+};
-      const date = new Date(post.createdAt);
-      const year = date.getFullYear().toString();
-      const month = (date.getMonth() + 1).toString().padStart(2, '0');
-
-      if (!groups[year]) groups[year] = {};
-      if (!groups[year][month]) groups[year][month] = [];
-
-      groups[year][month].push(post);
-    });
-
-    return groups;
-  }, [data]);
-
-  const sortedYears = useMemo(() => {
-    return Object.keys(archiveGroups).sort((a, b) => Number(b) - Number(a));
-  }, [archiveGroups]);
 
+export default async function ArchivePage() {
+  const data = await fetchPublicPosts({ page: 0, size: 1000, sort: 'createdAt,desc' });
+  const posts = data?.content || [];
+  const archiveGroups = groupPostsByMonth(posts);
+  const sortedYears = Object.keys(archiveGroups).sort((a, b) => Number(b) - Number(a));
   const totalPosts = getTotalElements(data);
 
-  if (isLoading) {
-    return (
-      <div className="flex min-h-[50vh] items-center justify-center">
-        <Loader2 className="animate-spin text-[var(--color-accent)]" size={40} />
-      </div>
-    );
-  }
-
   return (
     <main className="mx-auto w-full px-0 py-4 md:w-[78vw] md:max-w-[1280px] md:py-6">
       <WindowSurface
@@ -92,15 +107,15 @@ export default function ArchivePage() {
 
                   <div className="space-y-8 md:pl-12">
                     {sortedMonths.map((month) => {
-                      const posts = months[month];
+                      const monthPosts = months[month];
-                      const sortedPosts = [...posts].sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
+                      const sortedPosts = sortPostsNewestFirst(monthPosts);
 
                       return (
                         <div key={month} className="group">
                           <h3 className="mb-4 flex items-center gap-2 text-lg font-bold text-[var(--color-text-muted)]">
                             <Calendar size={18} className="text-[var(--color-text-subtle)]" />
                             {month}월
-                            <StatusBadge tone="neutral">{posts.length}</StatusBadge>
+                            <StatusBadge tone="neutral">{monthPosts.length}</StatusBadge>
                           </h3>
 
                           <div className="grid gap-3">
@@ -117,9 +132,9 @@ export default function ArchivePage() {
                                     </h4>
                                     <div className="mt-1.5 flex items-center gap-2 text-xs text-[var(--color-text-subtle)]">
                                       <StatusBadge tone="neutral" className="px-1.5 py-0.5">{post.categoryName || '미분류'}</StatusBadge>
-                                      <span>·</span>
+                                      <span aria-hidden="true">·</span>
                                       <span className="tabular-nums">
-                                        {format(new Date(post.createdAt), 'yyyy.MM.dd')}
+                                        {formatDate(post.createdAt)}
                                       </span>
                                     </div>
                                   </div>
@@ -138,7 +153,7 @@ export default function ArchivePage() {
           </div>
         ) : (
           <EmptyState
-            title="아직 작성된 기록이 없습니다."
+            title="아직 작성한 글이 없습니다."
             icon={<FileText size={48} />}
             className="py-20"
           />

src/app/category/[id]/page.tsx

@@ -9,10 +9,23 @@ import PostCard from '@/components/post/PostCard';
 import PostListItem from '@/components/post/PostListItem';
 import PostSearch from '@/components/post/PostSearch';
 import EmptyState from '@/components/ui/EmptyState';
+import SegmentedControl from '@/components/ui/SegmentedControl';
 import Surface from '@/components/ui/Surface';
 import WindowSurface from '@/components/ui/WindowSurface';
 
-const PAGE_SIZE = 10;
+const PAGE_SIZE_OPTIONS = [
+  { label: '9개', value: '9' },
+  { label: '18개', value: '18' },
+  { label: '27개', value: '27' },
+] as const;
+const DEFAULT_PAGE_SIZE = '9';
+const CATEGORY_PAGE_SIZE_STORAGE_KEY = 'categoryPageSize';
+
+type PageSizeOption = (typeof PAGE_SIZE_OPTIONS)[number]['value'];
+
+const isPageSizeOption = (value: string | null): value is PageSizeOption => {
+  return PAGE_SIZE_OPTIONS.some((option) => option.value === value);
+};
 
 const isNoticeCategoryName = (categoryName: string) => {
   const normalizedName = categoryName.toLowerCase();
@@ -27,6 +40,12 @@ export default function CategoryPage({ params }: { params: Promise<{ id: string
 
   const [page, setPage] = useState(0);
   const [keyword, setKeyword] = useState('');
+  const [pageSize, setPageSize] = useState<PageSizeOption>(() => {
+    if (typeof window === 'undefined') return DEFAULT_PAGE_SIZE;
+
+    const savedSize = localStorage.getItem(CATEGORY_PAGE_SIZE_STORAGE_KEY);
+    return isPageSizeOption(savedSize) ? savedSize : DEFAULT_PAGE_SIZE;
+  });
   const [viewMode, setViewMode] = useState<'grid' | 'list'>(() => {
     if (isNoticeCategory || typeof window === 'undefined') return isNoticeCategory ? 'list' : 'grid';
 
@@ -47,9 +66,15 @@ export default function CategoryPage({ params }: { params: Promise<{ id: string
     setPage(0);
   };
 
+  const handlePageSizeChange = (nextSize: PageSizeOption) => {
+    setPage(0);
+    setPageSize(nextSize);
+    localStorage.setItem(CATEGORY_PAGE_SIZE_STORAGE_KEY, nextSize);
+  };
+
   const { data: postsData, isLoading, error, isPlaceholderData } = useQuery({
-    queryKey: ['posts', 'category', apiCategoryName, page, keyword],
+    queryKey: ['posts', 'category', apiCategoryName, page, pageSize, keyword],
-    queryFn: () => getPostsByCategory(apiCategoryName, page, PAGE_SIZE, keyword),
+    queryFn: () => getPostsByCategory(apiCategoryName, page, Number(pageSize), keyword),
     placeholderData: (previousData) => previousData,
   });
 
@@ -96,22 +121,30 @@ export default function CategoryPage({ params }: { params: Promise<{ id: string
             <span className="text-lg font-normal text-[var(--color-text-subtle)]">글 목록</span>
           </h1>
 
-          <div className="flex w-full items-center gap-3 md:w-auto">
+          <div className="flex w-full flex-col gap-3 md:w-auto md:flex-row md:items-center">
             <PostSearch
               onSearch={handleSearch}
               placeholder={`${apiCategoryName} 검색`}
               className="w-full md:w-64"
             />
 
-            <div className="flex shrink-0 items-center gap-1 rounded-full border border-[var(--color-line)] bg-[var(--color-control)] p-1 shadow-[var(--shadow-control)] backdrop-blur-xl">
+            <SegmentedControl
+              ariaLabel="페이지당 게시글 수"
+              options={PAGE_SIZE_OPTIONS}
+              value={pageSize}
+              onChange={handlePageSizeChange}
+              className="justify-center"
+            />
+
+            <div className="flex shrink-0 items-center gap-1 rounded-full border border-[var(--control-border)] bg-[var(--color-control)] p-1 shadow-[var(--shadow-control)] backdrop-blur-[18px]">
               <button
                 type="button"
                 onClick={() => handleViewModeChange('grid')}
                 className={clsx(
                   'rounded-full p-2 transition-all duration-150',
                   activeViewMode === 'grid'
-                    ? 'bg-[var(--window-bg-strong)] text-[var(--color-accent)] shadow-sm'
+                    ? 'bg-[var(--card-bg-strong)] text-[var(--color-accent)] shadow-sm'
-                    : 'text-[var(--color-text-subtle)] hover:bg-black/[0.04] hover:text-[var(--color-text)] dark:hover:bg-white/10',
+                    : 'text-[var(--color-text-subtle)] hover:bg-[var(--card-bg)] hover:text-[var(--color-text)]',
                 )}
                 title="카드로 보기"
                 aria-label="카드로 보기"
@@ -125,8 +158,8 @@ export default function CategoryPage({ params }: { params: Promise<{ id: string
                 className={clsx(
                   'rounded-full p-2 transition-all duration-150',
                   activeViewMode === 'list'
-                    ? 'bg-[var(--window-bg-strong)] text-[var(--color-accent)] shadow-sm'
+                    ? 'bg-[var(--card-bg-strong)] text-[var(--color-accent)] shadow-sm'
-                    : 'text-[var(--color-text-subtle)] hover:bg-black/[0.04] hover:text-[var(--color-text)] dark:hover:bg-white/10',
+                    : 'text-[var(--color-text-subtle)] hover:bg-[var(--card-bg)] hover:text-[var(--color-text)]',
                 )}
                 title="리스트로 보기"
                 aria-label="리스트로 보기"
@@ -173,7 +206,7 @@ export default function CategoryPage({ params }: { params: Promise<{ id: string
                 type="button"
                 onClick={handlePrevPage}
                 disabled={page === 0}
-                className="rounded-full p-2 text-[var(--color-text-muted)] transition-colors hover:bg-black/[0.04] hover:text-[var(--color-text)] disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent dark:hover:bg-white/10"
+                className="rounded-full p-2 text-[var(--color-text-muted)] transition-colors hover:bg-[var(--card-bg)] hover:text-[var(--color-text)] disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent"
                 aria-label="이전 페이지"
               >
                 <ChevronLeft size={24} />
@@ -187,7 +220,7 @@ export default function CategoryPage({ params }: { params: Promise<{ id: string
                 type="button"
                 onClick={handleNextPage}
                 disabled={isLast || isPlaceholderData}
-                className="rounded-full p-2 text-[var(--color-text-muted)] transition-colors hover:bg-black/[0.04] hover:text-[var(--color-text)] disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent dark:hover:bg-white/10"
+                className="rounded-full p-2 text-[var(--color-text-muted)] transition-colors hover:bg-[var(--card-bg)] hover:text-[var(--color-text)] disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent"
                 aria-label="다음 페이지"
               >
                 <ChevronRight size={24} />

src/app/globals.css

@@ -30,16 +30,25 @@
     linear-gradient(155deg, rgba(218, 235, 255, 0.86) 6%, rgba(218, 235, 255, 0) 50%),
     linear-gradient(42deg, rgba(222, 251, 236, 0.74) 48%, rgba(222, 251, 236, 0) 88%),
     linear-gradient(180deg, #fbf8ff 0%, #eef5ff 100%);
-  --window-bg: rgba(255, 255, 255, 0.58);
+  --window-bg: rgba(255, 255, 255, 0.6);
-  --window-bg-strong: rgba(255, 255, 255, 0.78);
+  --window-bg-strong: rgba(255, 255, 255, 0.8);
   --window-titlebar: rgba(255, 255, 255, 0.5);
-  --window-border: rgba(255, 255, 255, 0.62);
+  --window-border: rgba(255, 255, 255, 0.68);
-  --menubar-bg: rgba(255, 255, 255, 0.48);
+  --window-titlebar-border: rgba(39, 54, 82, 0.1);
-  --dock-bg: rgba(255, 255, 255, 0.5);
+  --card-bg: rgba(255, 255, 255, 0.46);
-  --sidebar-bg: rgba(255, 255, 255, 0.46);
+  --card-bg-strong: rgba(255, 255, 255, 0.68);
-  --color-surface: rgba(255, 255, 255, 0.58);
+  --card-border: rgba(39, 54, 82, 0.11);
-  --color-surface-strong: rgba(255, 255, 255, 0.82);
+  --card-border-hover: rgba(39, 54, 82, 0.18);
-  --color-control: rgba(255, 255, 255, 0.54);
+  --control-border: rgba(39, 54, 82, 0.12);
+  --menubar-bg: rgba(255, 255, 255, 0.5);
+  --menubar-border: rgba(255, 255, 255, 0.7);
+  --dock-bg: rgba(255, 255, 255, 0.54);
+  --dock-border: rgba(255, 255, 255, 0.72);
+  --sidebar-bg: rgba(255, 255, 255, 0.48);
+  --sidebar-border: rgba(255, 255, 255, 0.6);
+  --color-surface: var(--card-bg);
+  --color-surface-strong: var(--card-bg-strong);
+  --color-control: rgba(255, 255, 255, 0.56);
   --color-line: rgba(39, 54, 82, 0.13);
   --color-text: #1d1d1f;
   --color-text-muted: #62646d;
@@ -48,10 +57,13 @@
   --color-accent-hover: #0071e3;
   --color-accent-soft: rgba(0, 102, 204, 0.1);
   --color-danger-soft: rgba(255, 59, 48, 0.1);
-  --shadow-window: 0 26px 80px rgba(70, 92, 130, 0.16), 0 1px 0 rgba(255, 255, 255, 0.7) inset;
+  --shadow-window: 0 28px 80px rgba(70, 92, 130, 0.18), 0 10px 28px rgba(70, 92, 130, 0.08), 0 1px 0 rgba(255, 255, 255, 0.72) inset;
-  --shadow-panel: 0 22px 56px rgba(70, 92, 130, 0.13);
+  --shadow-sidebar: 16px 0 42px rgba(70, 92, 130, 0.12), -1px 0 0 rgba(255, 255, 255, 0.46) inset;
-  --shadow-card: 0 10px 30px rgba(70, 92, 130, 0.08);
+  --shadow-menubar: 0 16px 40px rgba(70, 92, 130, 0.12), 0 1px 0 rgba(255, 255, 255, 0.58) inset;
-  --shadow-control: 0 12px 26px rgba(70, 92, 130, 0.1);
+  --shadow-panel: var(--shadow-sidebar);
+  --shadow-card: 0 14px 34px rgba(70, 92, 130, 0.09), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
+  --shadow-dock: 0 22px 58px rgba(70, 92, 130, 0.18), 0 8px 18px rgba(70, 92, 130, 0.1), 0 1px 0 rgba(255, 255, 255, 0.68) inset;
+  --shadow-control: 0 12px 26px rgba(70, 92, 130, 0.1), 0 1px 0 rgba(255, 255, 255, 0.46) inset;
   --focus-ring: 0 0 0 4px rgba(0, 102, 204, 0.14);
   --background: var(--color-page);
   --foreground: var(--color-text);
@@ -72,17 +84,26 @@ html[data-theme="dark"] {
     linear-gradient(150deg, rgba(43, 73, 110, 0.5) 10%, rgba(43, 73, 110, 0) 54%),
     linear-gradient(42deg, rgba(38, 91, 72, 0.38) 48%, rgba(38, 91, 72, 0) 88%),
     linear-gradient(180deg, #131620 0%, #07090f 100%);
-  --window-bg: rgba(27, 29, 39, 0.64);
+  --window-bg: rgba(28, 31, 42, 0.68);
-  --window-bg-strong: rgba(34, 36, 48, 0.82);
+  --window-bg-strong: rgba(39, 42, 56, 0.84);
-  --window-titlebar: rgba(255, 255, 255, 0.06);
+  --window-titlebar: rgba(255, 255, 255, 0.075);
-  --window-border: rgba(255, 255, 255, 0.14);
+  --window-border: rgba(255, 255, 255, 0.18);
-  --menubar-bg: rgba(24, 26, 36, 0.58);
+  --window-titlebar-border: rgba(255, 255, 255, 0.13);
-  --dock-bg: rgba(24, 26, 36, 0.62);
+  --card-bg: rgba(43, 46, 60, 0.5);
-  --sidebar-bg: rgba(22, 24, 33, 0.56);
+  --card-bg-strong: rgba(52, 55, 70, 0.66);
-  --color-surface: rgba(27, 29, 39, 0.64);
+  --card-border: rgba(255, 255, 255, 0.14);
-  --color-surface-strong: rgba(34, 36, 48, 0.82);
+  --card-border-hover: rgba(255, 255, 255, 0.22);
-  --color-control: rgba(255, 255, 255, 0.08);
+  --control-border: rgba(255, 255, 255, 0.13);
-  --color-line: rgba(255, 255, 255, 0.12);
+  --menubar-bg: rgba(24, 27, 38, 0.62);
+  --menubar-border: rgba(255, 255, 255, 0.16);
+  --dock-bg: rgba(27, 30, 42, 0.66);
+  --dock-border: rgba(255, 255, 255, 0.18);
+  --sidebar-bg: rgba(21, 24, 34, 0.64);
+  --sidebar-border: rgba(255, 255, 255, 0.14);
+  --color-surface: var(--card-bg);
+  --color-surface-strong: var(--card-bg-strong);
+  --color-control: rgba(255, 255, 255, 0.085);
+  --color-line: rgba(255, 255, 255, 0.13);
   --color-text: #f5f5f7;
   --color-text-muted: #b2b5bf;
   --color-text-subtle: #8f939f;
@@ -90,10 +111,13 @@ html[data-theme="dark"] {
   --color-accent-hover: #46a6ff;
   --color-accent-soft: rgba(41, 151, 255, 0.16);
   --color-danger-soft: rgba(255, 69, 58, 0.16);
-  --shadow-window: 0 30px 90px rgba(0, 0, 0, 0.44), 0 1px 0 rgba(255, 255, 255, 0.08) inset;
+  --shadow-window: 0 32px 100px rgba(0, 0, 0, 0.54), 0 14px 36px rgba(0, 0, 0, 0.28), 0 1px 0 rgba(255, 255, 255, 0.1) inset;
-  --shadow-panel: 0 24px 60px rgba(0, 0, 0, 0.36);
+  --shadow-sidebar: 18px 0 46px rgba(0, 0, 0, 0.38), -1px 0 0 rgba(255, 255, 255, 0.08) inset;
-  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.24);
+  --shadow-menubar: 0 18px 46px rgba(0, 0, 0, 0.32), 0 1px 0 rgba(255, 255, 255, 0.09) inset;
-  --shadow-control: 0 14px 30px rgba(0, 0, 0, 0.26);
+  --shadow-panel: var(--shadow-sidebar);
+  --shadow-card: 0 16px 34px rgba(0, 0, 0, 0.32), 0 1px 0 rgba(255, 255, 255, 0.08) inset;
+  --shadow-dock: 0 26px 68px rgba(0, 0, 0, 0.44), 0 10px 24px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.12) inset;
+  --shadow-control: 0 14px 30px rgba(0, 0, 0, 0.28), 0 1px 0 rgba(255, 255, 255, 0.08) inset;
   --focus-ring: 0 0 0 4px rgba(41, 151, 255, 0.18);
   --background: var(--color-page);
   --foreground: var(--color-text);
@@ -221,7 +245,7 @@ samp,
 .hover\:bg-gray-100:hover,
 .hover\:bg-gray-200:hover,
 .focus\:bg-white:focus {
-  background-color: rgba(255, 255, 255, 0.58);
+  background-color: var(--card-bg-strong);
 }
 
 .hover\:bg-blue-50:hover {
@@ -264,16 +288,16 @@ input:not([type="checkbox"]):not([type="radio"]),
 textarea,
 select {
   background-color: var(--color-control);
-  border-color: var(--color-line);
+  border-color: var(--control-border);
   color: var(--color-text);
   box-shadow: 0 1px 0 rgba(255, 255, 255, 0.42) inset;
-  backdrop-filter: blur(20px);
+  backdrop-filter: blur(18px);
 }
 
 input:not([type="checkbox"]):not([type="radio"]):focus,
 textarea:focus,
 select:focus {
-  background-color: var(--window-bg-strong);
+  background-color: var(--card-bg-strong);
   border-color: var(--color-accent);
 }
 
@@ -330,7 +354,7 @@ html[data-theme="dark"] .hover\:bg-gray-50:hover,
 html[data-theme="dark"] .hover\:bg-gray-100:hover,
 html[data-theme="dark"] .hover\:bg-gray-200:hover,
 html[data-theme="dark"] .focus\:bg-white:focus {
-  background-color: rgba(255, 255, 255, 0.11);
+  background-color: var(--card-bg-strong);
 }
 
 html[data-theme="dark"] .hover\:bg-blue-50:hover {
@@ -351,44 +375,45 @@ html[data-theme="dark"] .disabled\:bg-gray-400:disabled {
 html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
 html[data-theme="dark"] textarea,
 html[data-theme="dark"] select {
-  background-color: rgba(255, 255, 255, 0.08);
+  background-color: var(--color-control);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset;
 }
 
 html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):focus,
 html[data-theme="dark"] textarea:focus,
 html[data-theme="dark"] select:focus {
-  background-color: rgba(255, 255, 255, 0.11);
+  background-color: var(--card-bg-strong);
 }
 
 .w-md-editor {
   border-radius: 0.5rem !important;
-  border-color: var(--color-line) !important;
+  border-color: var(--card-border) !important;
-  background-color: var(--window-bg-strong) !important;
+  background-color: var(--card-bg-strong) !important;
   box-shadow: var(--shadow-card);
-  backdrop-filter: blur(24px);
+  backdrop-filter: blur(20px);
 }
 
 .w-md-editor-toolbar {
   border-radius: 0.5rem 0.5rem 0 0 !important;
-  border-color: var(--color-line) !important;
+  border-color: var(--window-titlebar-border) !important;
   background-color: var(--window-titlebar) !important;
 }
 
 html[data-theme="dark"] .w-md-editor {
-  background-color: var(--window-bg-strong) !important;
+  background-color: var(--card-bg-strong) !important;
-  border-color: var(--color-line) !important;
+  border-color: var(--card-border) !important;
 }
 
 html[data-theme="dark"] .w-md-editor-toolbar {
   background-color: var(--window-titlebar) !important;
-  border-color: var(--color-line) !important;
+  border-color: var(--window-titlebar-border) !important;
 }
 
 .wy-editor-shell {
   --color-canvas-default: transparent;
   --color-canvas-subtle: transparent;
-  --color-border-default: var(--color-line);
+  --color-border-default: var(--card-border);
-  --color-border-muted: var(--color-line);
+  --color-border-muted: var(--card-border);
   --color-fg-default: var(--color-text);
   --color-fg-muted: var(--color-text-muted);
   --color-accent-fg: var(--color-accent);
@@ -399,14 +424,15 @@ html[data-theme="dark"] .w-md-editor-toolbar {
   min-height: 520px;
   overflow: hidden;
   border-radius: 0.5rem !important;
-  border: 1px solid var(--color-line) !important;
+  border: 1px solid var(--card-border) !important;
-  background-color: var(--window-bg-strong) !important;
+  background-color: var(--card-bg-strong) !important;
   color: var(--color-text) !important;
   box-shadow: var(--shadow-card) !important;
+  backdrop-filter: blur(20px);
 }
 
 .wy-editor-shell .w-md-editor-toolbar {
-  border-color: var(--color-line) !important;
+  border-color: var(--window-titlebar-border) !important;
   background-color: var(--window-titlebar) !important;
 }
 

src/app/layout.tsx

@@ -5,6 +5,7 @@ import './globals.css';
 import Providers from './providers';
 import DesktopShell from '@/components/layout/DesktopShell';
 import { THEME_INIT_SCRIPT } from '@/components/theme/theme';
+import { DEFAULT_DESCRIPTION, SITE_NAME, SITE_URL } from '@/lib/site';
 
 const pretendard = localFont({
   src: './fonts/PretendardVariable.woff2',
@@ -14,8 +15,23 @@ const pretendard = localFont({
 });
 
 export const metadata: Metadata = {
-  title: 'WYPark Blog',
+  metadataBase: new URL(SITE_URL),
-  description: '개발 블로그',
+  title: {
+    default: SITE_NAME,
+    template: `%s | ${SITE_NAME}`,
+  },
+  description: DEFAULT_DESCRIPTION,
+  alternates: {
+    canonical: '/',
+  },
+  openGraph: {
+    title: SITE_NAME,
+    description: DEFAULT_DESCRIPTION,
+    url: '/',
+    siteName: SITE_NAME,
+    type: 'website',
+    locale: 'ko_KR',
+  },
 };
 
 export default function RootLayout({
@@ -54,3 +70,4 @@ export default function RootLayout({
     </html>
   );
 }
+

src/app/page.tsx

@@ -1,27 +1,52 @@
-'use client';
+import type { Metadata } from 'next';
-
+import type { ReactNode } from 'react';
-import { Suspense, type ReactNode } from 'react';
-import { useQuery } from '@tanstack/react-query';
-import { useSearchParams } from 'next/navigation';
 import Link from 'next/link';
 import {
   Archive,
   ChevronRight,
   Clock,
-  Loader2,
   Search,
   TrendingUp,
 } from 'lucide-react';
-import { getPosts } from '@/api/posts';
+import {
+  fetchPublicPosts,
+} from '@/api/publicPosts';
 import EmptyState from '@/components/ui/EmptyState';
 import StatusBadge from '@/components/ui/StatusBadge';
 import Surface from '@/components/ui/Surface';
 import WindowSurface from '@/components/ui/WindowSurface';
+import { DEFAULT_DESCRIPTION, SITE_NAME } from '@/lib/site';
 import { Post, PostListResponse } from '@/types';
 
+export const dynamic = 'force-dynamic';
+export const revalidate = 300;
+
+export const metadata: Metadata = {
+  title: {
+    absolute: SITE_NAME,
+  },
+  description: DEFAULT_DESCRIPTION,
+  alternates: {
+    canonical: '/',
+  },
+  openGraph: {
+    title: SITE_NAME,
+    description: DEFAULT_DESCRIPTION,
+    url: '/',
+    siteName: SITE_NAME,
+    type: 'website',
+  },
+};
+
+type HomePageProps = {
+  searchParams?: Promise<Record<string, string | string[] | undefined>>;
+};
+
 const isNoticePost = (post: Post) => {
   const categoryName = post.categoryName || '';
-  return categoryName === '공지' || categoryName === '怨듭?' || categoryName.toLowerCase() === 'notice';
+  const normalizedName = categoryName.toLowerCase();
+
+  return categoryName === '공지' || normalizedName === 'notice' || normalizedName === 'announcement';
 };
 
 const formatDate = (value?: string) => {
@@ -50,18 +75,23 @@ const getSummary = (content?: string, maxLength = 118) => {
     .slice(0, maxLength);
 };
 
-const getTotalElements = (data?: PostListResponse) => {
+const getTotalElements = (data?: PostListResponse | null) => {
   return data?.page?.totalElements ?? data?.totalElements ?? 0;
 };
 
+const getSearchKeyword = async (searchParams?: HomePageProps['searchParams']) => {
+  const resolvedSearchParams = searchParams ? await searchParams : {};
+  const keyword = resolvedSearchParams.keyword;
+
+  return Array.isArray(keyword) ? keyword[0] || '' : keyword || '';
+};
+
 function SearchResults({
   keyword,
   data,
-  isLoading,
 }: {
   keyword: string;
-  data?: PostListResponse;
+  data?: PostListResponse | null;
-  isLoading: boolean;
 }) {
   const searchResults = data?.content || [];
   const searchTotalElements = getTotalElements(data);
@@ -85,11 +115,7 @@ function SearchResults({
         </p>
       </div>
 
-      {isLoading ? (
+      {searchResults.length > 0 ? (
-        <div className="flex min-h-60 items-center justify-center">
-          <Loader2 className="animate-spin text-[var(--color-accent)]" size={30} />
-        </div>
-      ) : searchResults.length > 0 ? (
         <div className="divide-y divide-[var(--color-line)]">
           {searchResults.map((post) => (
             <CompactPostRow key={post.id} post={post} />
@@ -144,7 +170,7 @@ function CompactPostRow({
   return (
     <Link
       href={`/posts/${post.slug}`}
-      className="group flex items-start justify-between gap-4 rounded-lg px-1 py-4 transition duration-150 hover:bg-black/[0.025] hover:px-3 dark:hover:bg-white/[0.07]"
+      className="group flex items-start justify-between gap-4 rounded-lg px-1 py-4 transition duration-150 hover:bg-[var(--card-bg)] hover:px-3"
     >
       {rank !== undefined && (
         <span className="mt-1 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-[var(--color-accent-soft)] text-xs font-bold tabular-nums text-[var(--color-accent)]">
@@ -191,13 +217,8 @@ function PostListPanel({
   isPopular?: boolean;
 }) {
   return (
-    <WindowSurface
+    <Surface as="section" strong className="overflow-hidden">
-      as="section"
+      <div className="flex min-h-12 items-center justify-between gap-3 border-b border-[var(--window-titlebar-border)] bg-[var(--window-titlebar)] px-5 py-3">
-      showTrafficLights={false}
-      className="shadow-none"
-      bodyClassName="overflow-hidden"
-    >
-      <div className="flex min-h-12 items-center justify-between gap-3 border-b border-[var(--color-line)] bg-white/[0.16] px-5 py-3 dark:bg-white/[0.04]">
         <h2 className="flex min-w-0 items-center gap-2 text-sm font-bold text-[var(--color-text)]">
           {icon}
           <span className="truncate">{title}</span>
@@ -209,78 +230,51 @@ function PostListPanel({
       </div>
 
       <div className="p-5 md:p-6">
-      {posts.length > 0 ? (
+        {posts.length > 0 ? (
-        <div className="divide-y divide-[var(--color-line)]">
+          <div className="divide-y divide-[var(--color-line)]">
-          {posts.map((post, index) => (
+            {posts.map((post, index) => (
-            <CompactPostRow
+              <CompactPostRow
-              key={post.id}
+                key={post.id}
-              post={post}
+                post={post}
-              rank={isPopular ? index + 1 : undefined}
+                rank={isPopular ? index + 1 : undefined}
-              showViews={isPopular}
+                showViews={isPopular}
-            />
+              />
-          ))}
+            ))}
-        </div>
+          </div>
-      ) : (
+        ) : (
-        <EmptyState title={isPopular ? '인기 글을 집계 중입니다.' : '아직 공개된 글이 없습니다.'} className="min-h-72" />
+          <EmptyState title={isPopular ? '인기 글을 집계 중입니다.' : '아직 공개된 글이 없습니다.'} className="min-h-72" />
-      )}
+        )}
       </div>
-    </WindowSurface>
+    </Surface>
   );
 }
 
-function HomeContent() {
+export default async function Home({ searchParams }: HomePageProps) {
-  const searchParams = useSearchParams();
+  const keyword = await getSearchKeyword(searchParams);
-  const keyword = searchParams.get('keyword') || '';
-
-  const { data: noticesData, isLoading: isNoticesLoading } = useQuery({
-    queryKey: ['posts', 'notices'],
-    queryFn: () => getPosts({ category: '공지', size: 3, sort: 'createdAt,desc' }),
-    retry: 0,
-  });
-
-  const { data: latestData, isLoading: isLatestLoading } = useQuery({
-    queryKey: ['posts', 'latest'],
-    queryFn: () => getPosts({ size: 8, sort: 'createdAt,desc' }),
-    retry: 0,
-  });
-
-  const { data: popularData, isLoading: isPopularLoading } = useQuery({
-    queryKey: ['posts', 'popular'],
-    queryFn: () => getPosts({ size: 8, sort: 'viewCount,desc' }),
-    retry: 0,
-  });
-
-  const { data: searchData, isLoading: isSearchLoading } = useQuery({
-    queryKey: ['posts', 'search', keyword],
-    queryFn: () => getPosts({ keyword, size: 20 }),
-    enabled: !!keyword,
-    retry: 0,
-  });
-
-  const notices = noticesData?.content || [];
-  const latestList = (latestData?.content || []).filter((post) => !isNoticePost(post)).slice(0, 5);
-  const popularList = (popularData?.content || []).filter((post) => !isNoticePost(post)).slice(0, 5);
-  const isHomeLoading = !keyword && (isNoticesLoading || isLatestLoading || isPopularLoading);
 
   if (keyword) {
+    const searchData = await fetchPublicPosts({ keyword, size: 20 });
+
     return (
       <main className="mx-auto w-full px-0 py-4 md:w-[78vw] md:max-w-[1280px] md:py-6">
-        <SearchResults keyword={keyword} data={searchData} isLoading={isSearchLoading} />
+        <SearchResults keyword={keyword} data={searchData} />
       </main>
     );
   }
 
-  if (isHomeLoading) {
+  const [noticesData, latestData, popularData] = await Promise.all([
-    return (
+    fetchPublicPosts({ category: '공지', size: 3, sort: 'createdAt,desc' }),
-      <div className="flex min-h-[60vh] items-center justify-center">
+    fetchPublicPosts({ size: 8, sort: 'createdAt,desc' }),
-        <Loader2 className="animate-spin text-[var(--color-accent)]" size={36} />
+    fetchPublicPosts({ size: 8, sort: 'viewCount,desc' }),
-      </div>
+  ]);
-    );
+
-  }
+  const notices = noticesData?.content || [];
+  const latestList = (latestData?.content || []).filter((post) => !isNoticePost(post)).slice(0, 5);
+  const popularList = (popularData?.content || []).filter((post) => !isNoticePost(post)).slice(0, 5);
 
   return (
     <main className="mx-auto w-full px-0 py-4 md:w-[78vw] md:max-w-[1280px] md:py-6">
-      <h1 className="sr-only">WYPark Blog</h1>
+      <h1 className="sr-only">{SITE_NAME}</h1>
       <WindowSurface
         title="WYPark"
         controls={(
@@ -313,17 +307,3 @@ function HomeContent() {
     </main>
   );
 }
-
-export default function Home() {
-  return (
-    <Suspense
-      fallback={(
-        <div className="flex min-h-[60vh] items-center justify-center">
-          <Loader2 className="animate-spin text-[var(--color-accent)]" size={36} />
-        </div>
-      )}
-    >
-      <HomeContent />
-    </Suspense>
-  );
-}

src/app/posts/[slug]/page.tsx

@@ -1,87 +1,90 @@
 import { Metadata } from 'next';
-import PostDetailClient from '@/components/post/PostDetailClient';
 import { notFound } from 'next/navigation';
-import { Post } from '@/types';
+import { fetchPublicPost } from '@/api/publicPosts';
+import PostDetailClient from '@/components/post/PostDetailClient';
+import { DEFAULT_DESCRIPTION, getCanonicalUrl, parseApiDate, SITE_NAME, SITE_URL } from '@/lib/site';
 
 type Props = {
   params: Promise<{ slug: string }>;
 };
 
-// 🛠️ 서버 사이드 데이터 패칭 함수 (Metadata와 Page 양쪽에서 재사용)
+const getPostDescription = (content?: string) => {
-async function getPostFromServer(slug: string): Promise<Post | null> {
+  const plainText = content
-  const BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8080';
+    ?.replace(/```[\s\S]*?```/g, ' ')
-  
+    .replace(/!\[(.*?)\]\(.*?\)/g, '$1')
-  try {
+    .replace(/\[(.*?)\]\(.*?\)/g, '$1')
-    const res = await fetch(`${BASE_URL}/api/posts/${slug}`, {
+    .replace(/[#*`_~>]/g, '')
-      // 캐시 설정: 60초마다 갱신 (블로그 특성상 적절)
+    .replace(/\s+/g, ' ')
-      // 즉시 반영이 필요하다면 'no-store'로 설정하거나 revalidate: 0 사용
+    .trim();
-      next: { revalidate: 60 }, 
+
-    });
+  if (!plainText) return DEFAULT_DESCRIPTION;
-    
+
-    if (!res.ok) return null;
+  return plainText.length > 150 ? `${plainText.slice(0, 150)}...` : plainText;
-    
+};
-    const json = await res.json();
+
-    return json.data;
+const getFirstMarkdownImage = (content?: string) => {
-  } catch (error) {
+  const imageMatch = content?.match(/!\[.*?\]\((.*?)\)/);
-    console.error('Server fetch error:', error);
+  const imageUrl = imageMatch?.[1]?.split(/\s+/)[0] || '/og-image.png';
-    return null;
+
-  }
+  try {
-}
+    return new URL(imageUrl, SITE_URL).toString();
+  } catch {
+    return new URL('/og-image.png', SITE_URL).toString();
+  }
+};
 
-// 🌟 메타데이터 생성 (SEO)
 export async function generateMetadata({ params }: Props): Promise<Metadata> {
   const { slug } = await params;
-  const post = await getPostFromServer(slug);
+  const post = await fetchPublicPost(slug);
+  const canonicalUrl = getCanonicalUrl(`/posts/${encodeURIComponent(post?.slug || slug)}`);
 
   if (!post) {
     return {
       title: '게시글을 찾을 수 없습니다',
+      alternates: {
+        canonical: canonicalUrl,
+      },
     };
   }
 
-  // 본문 요약 및 이미지 추출 로직
+  const description = getPostDescription(post.content);
-  const description = post.content
+  const imageUrl = getFirstMarkdownImage(post.content);
-    ?.replace(/[#*`_~]/g, '')
+  const publishedTime = parseApiDate(post.createdAt).toISOString();
-    .replace(/\n/g, ' ')
+  const modifiedTime = parseApiDate(post.updatedAt || post.createdAt).toISOString();
-    .substring(0, 150) + '...';
-
-  const imageMatch = post.content?.match(/!\[.*?\]\((.*?)\)/);
-  const imageUrl = imageMatch ? imageMatch[1] : '/og-image.png';
 
   return {
     title: post.title,
-    description: description,
+    description,
+    alternates: {
+      canonical: canonicalUrl,
+    },
     openGraph: {
       title: post.title,
-      description: description,
+      description,
-      url: `https://blog.wypark.me/posts/${slug}`,
+      url: canonicalUrl,
-      siteName: 'WYPark Blog',
+      siteName: SITE_NAME,
       images: [{ url: imageUrl, width: 1200, height: 630 }],
       type: 'article',
-      publishedTime: post.createdAt, // created_at 대신 createdAt 사용 주의 (타입 정의 따름)
+      publishedTime,
+      modifiedTime,
       authors: ['WYPark'],
     },
     twitter: {
       card: 'summary_large_image',
       title: post.title,
-      description: description,
+      description,
       images: [imageUrl],
     },
   };
 }
 
-// 🌟 실제 페이지 렌더링 (SSR 적용)
 export default async function PostDetailPage({ params }: Props) {
   const { slug } = await params;
-  
+  const post = await fetchPublicPost(slug);
-  // 1. 서버에서 데이터를 미리 가져옵니다.
-  const post = await getPostFromServer(slug);
 
-  // 2. 데이터가 없으면 404 페이지로 보냅니다. (봇에게도 404 신호를 줌)
   if (!post) {
     notFound();
   }
 
-  // 3. 가져온 데이터를 클라이언트 컴포넌트에 'initialPost'로 넘겨줍니다.
   return <PostDetailClient slug={slug} initialPost={post} />;
-}
+}

src/app/robots.ts

@@ -1,16 +1,14 @@
 import { MetadataRoute } from 'next';
+import { SITE_URL } from '@/lib/site';
 
 export default function robots(): MetadataRoute.Robots {
-  const baseUrl = 'https://blog.wypark.me'; 
-
   return {
     rules: {
       userAgent: '*',
       allow: '/',
-      // 검색 로봇이 굳이 긁어갈 필요 없는 페이지들은 차단 (글쓰기, 로그인 등)
       disallow: ['/write', '/login', '/signup', '/admin'],
     },
-    // 여기서 동적으로 생성된 sitemap.xml을 가리킵니다.
+    sitemap: `${SITE_URL}/sitemap.xml`,
-    sitemap: `${baseUrl}/sitemap.xml`,
   };
-}
+}
+

src/app/sitemap.ts

@@ -1,60 +1,40 @@
 import { MetadataRoute } from 'next';
+import {
+  fetchPublicPosts,
+} from '@/api/publicPosts';
+import { parseApiDate, SITE_URL } from '@/lib/site';
 
-interface SitemapPost {
+export const dynamic = 'force-dynamic';
-  slug: string;
+export const revalidate = 300;
-  updatedAt?: string;
-  createdAt?: string;
-}
 
 export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
-  const baseUrl = 'https://blog.wypark.me'; 
+  const generatedAt = new Date();
-  // API 주소 환경변수 사용 (없으면 로컬)
-  const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8080';
-
-  // 1. 고정된 정적 페이지들
   const routes: MetadataRoute.Sitemap = [
     {
-      url: baseUrl,
+      url: SITE_URL,
-      lastModified: new Date(),
+      lastModified: generatedAt,
       changeFrequency: 'daily',
       priority: 1,
     },
     {
-      url: `${baseUrl}/archive`,
+      url: `${SITE_URL}/archive`,
-      lastModified: new Date(),
+      lastModified: generatedAt,
       changeFrequency: 'daily',
       priority: 0.8,
     },
   ];
 
-  try {
+  const postsData = await fetchPublicPosts({ size: 1000, sort: 'createdAt,desc' });
-    // 2. API에서 게시글 목록 가져오기
+  const posts = postsData?.content || [];
-    const response = await fetch(`${apiUrl}/api/posts?size=1000&sort=createdAt,desc`, {
-      method: 'GET',
-      headers: { 'Content-Type': 'application/json' },
-      next: { revalidate: 3600 } 
-    });
 
-    if (!response.ok) {
+  const postRoutes: MetadataRoute.Sitemap = posts
-      throw new Error('Failed to fetch posts');
+    .filter((post) => post.slug)
-    }
+    .map((post) => ({
-
+      url: `${SITE_URL}/posts/${encodeURIComponent(post.slug)}`,
-    const json = await response.json() as { data?: { content?: SitemapPost[] } };
+      lastModified: parseApiDate(post.updatedAt || post.createdAt, generatedAt),
-    const posts = json.data?.content || [];
+      changeFrequency: 'weekly',
-
-    // 3. 게시글 데이터를 사이트맵 형식으로 변환
-    const postRoutes = posts.map((post) => ({
-      // 🛠️ 핵심 수정: slug를 encodeURIComponent로 감싸서 특수문자(&, 한글 등)를 안전하게 처리합니다.
-      url: `${baseUrl}/posts/${encodeURIComponent(post.slug)}`,
-      lastModified: new Date(post.updatedAt || post.createdAt || Date.now()),
-      changeFrequency: 'weekly' as const,
       priority: 0.8,
     }));
 
-    return [...routes, ...postRoutes];
+  return [...routes, ...postRoutes];
-
-  } catch (error) {
-    console.error('Sitemap generation error:', error);
-    return routes;
-  }
 }

src/components/admin/AdminPostEditor.tsx

@@ -111,7 +111,7 @@ function CategoryOptions({
       {categories.map((category) => (
         <div key={category.id}>
           <label
-            className="flex cursor-pointer items-center gap-2 rounded-lg px-3 py-2 text-sm text-[var(--color-text-muted)] transition hover:bg-black/[0.04] hover:text-[var(--color-text)] dark:hover:bg-white/10"
+            className="flex cursor-pointer items-center gap-2 rounded-lg px-3 py-2 text-sm text-[var(--color-text-muted)] transition hover:bg-[var(--card-bg)] hover:text-[var(--color-text)]"
             style={{ marginLeft: `${depth * 10}px` }}
           >
             <input
@@ -167,7 +167,7 @@ function DraftLoadDialog({
           <button
             type="button"
             onClick={onCancel}
-            className="inline-flex items-center justify-center rounded-full border border-[var(--color-line)] bg-[var(--color-control)] px-4 py-2 text-sm font-semibold text-[var(--color-text-muted)] transition hover:bg-[var(--window-bg-strong)] hover:text-[var(--color-text)]"
+            className="inline-flex items-center justify-center rounded-full border border-[var(--control-border)] bg-[var(--color-control)] px-4 py-2 text-sm font-semibold text-[var(--color-text-muted)] transition hover:bg-[var(--card-bg-strong)] hover:text-[var(--color-text)]"
           >
             취소
           </button>
@@ -479,7 +479,7 @@ export default function AdminPostEditor({ editSlug }: AdminPostEditorProps) {
           <button
             type="button"
             onClick={() => router.push('/admin/posts')}
-            className="inline-flex h-8 items-center gap-2 rounded-full border border-[var(--color-line)] bg-[var(--color-control)] px-3 text-xs font-semibold text-[var(--color-text-muted)] shadow-[var(--shadow-control)] transition hover:bg-[var(--window-bg-strong)] hover:text-[var(--color-text)]"
+            className="inline-flex h-8 items-center gap-2 rounded-full border border-[var(--control-border)] bg-[var(--color-control)] px-3 text-xs font-semibold text-[var(--color-text-muted)] shadow-[var(--shadow-control)] transition hover:bg-[var(--card-bg-strong)] hover:text-[var(--color-text)]"
           >
             <ArrowLeft size={14} />
             목록
@@ -502,7 +502,7 @@ export default function AdminPostEditor({ editSlug }: AdminPostEditorProps) {
                   <button
                     type="button"
                     onClick={handleTempSave}
-                    className="inline-flex h-9 items-center gap-2 rounded-full border border-[var(--color-line)] bg-[var(--color-control)] px-4 text-sm font-semibold text-[var(--color-text-muted)] shadow-[var(--shadow-control)] transition hover:bg-[var(--window-bg-strong)] hover:text-[var(--color-text)]"
+                    className="inline-flex h-9 items-center gap-2 rounded-full border border-[var(--control-border)] bg-[var(--color-control)] px-4 text-sm font-semibold text-[var(--color-text-muted)] shadow-[var(--shadow-control)] transition hover:bg-[var(--card-bg-strong)] hover:text-[var(--color-text)]"
                   >
                     <FileText size={16} />
                     임시저장
@@ -527,7 +527,7 @@ export default function AdminPostEditor({ editSlug }: AdminPostEditorProps) {
                 value={title}
                 onChange={(event) => setTitle(event.target.value)}
                 placeholder="제목을 입력하세요"
-                className="mb-5 w-full rounded-lg border border-[var(--color-line)] bg-[var(--color-control)] px-4 py-3 text-2xl font-bold tracking-normal text-[var(--color-text)] outline-none transition placeholder:text-[var(--color-text-subtle)] focus:border-[var(--color-accent)] md:text-3xl"
+                className="mb-5 w-full rounded-lg border border-[var(--control-border)] bg-[var(--color-control)] px-4 py-3 text-2xl font-bold tracking-normal text-[var(--color-text)] outline-none transition placeholder:text-[var(--color-text-subtle)] focus:border-[var(--color-accent)] md:text-3xl"
               />
 
               <div className="wy-editor-shell" data-color-mode={resolvedTheme}>
@@ -558,15 +558,15 @@ export default function AdminPostEditor({ editSlug }: AdminPostEditorProps) {
                 발행 상태
               </h2>
               <div className="mt-4 grid grid-cols-3 gap-2 text-center">
-                <div className="rounded-lg border border-[var(--color-line)] bg-[var(--color-control)] p-3">
+                <div className="rounded-lg border border-[var(--card-border)] bg-[var(--card-bg)] p-3 shadow-[var(--shadow-card)]">
                   <p className="text-lg font-bold tabular-nums text-[var(--color-text)]">{contentLength.toLocaleString()}</p>
                   <p className="text-[10px] font-semibold text-[var(--color-text-subtle)]">글자</p>
                 </div>
-                <div className="rounded-lg border border-[var(--color-line)] bg-[var(--color-control)] p-3">
+                <div className="rounded-lg border border-[var(--card-border)] bg-[var(--card-bg)] p-3 shadow-[var(--shadow-card)]">
                   <p className="text-lg font-bold tabular-nums text-[var(--color-text)]">{wordCount.toLocaleString()}</p>
                   <p className="text-[10px] font-semibold text-[var(--color-text-subtle)]">단어</p>
                 </div>
-                <div className="rounded-lg border border-[var(--color-line)] bg-[var(--color-control)] p-3">
+                <div className="rounded-lg border border-[var(--card-border)] bg-[var(--card-bg)] p-3 shadow-[var(--shadow-card)]">
                   <p className="text-lg font-bold tabular-nums text-[var(--color-text)]">{readingMinutes}</p>
                   <p className="text-[10px] font-semibold text-[var(--color-text-subtle)]">분</p>
                 </div>
@@ -581,7 +581,7 @@ export default function AdminPostEditor({ editSlug }: AdminPostEditorProps) {
                 <Folder size={17} />
                 카테고리
               </h2>
-              <div className="max-h-64 overflow-y-auto rounded-lg border border-[var(--color-line)] bg-[var(--color-control)] p-2">
+              <div className="max-h-64 overflow-y-auto rounded-lg border border-[var(--card-border)] bg-[var(--card-bg)] p-2 shadow-[var(--shadow-card)]">
                 {categories.length > 0 ? (
                   <CategoryOptions categories={categories} selectedId={categoryId} onSelect={setCategoryId} />
                 ) : (
@@ -602,7 +602,7 @@ export default function AdminPostEditor({ editSlug }: AdminPostEditorProps) {
                 value={tags}
                 onChange={(event) => setTags(event.target.value)}
                 placeholder="react, nextjs, essay"
-                className="w-full rounded-lg border border-[var(--color-line)] bg-[var(--color-control)] px-3 py-2 text-sm text-[var(--color-text)] outline-none transition placeholder:text-[var(--color-text-subtle)] focus:border-[var(--color-accent)]"
+                className="w-full rounded-lg border border-[var(--control-border)] bg-[var(--color-control)] px-3 py-2 text-sm text-[var(--color-text)] outline-none transition placeholder:text-[var(--color-text-subtle)] focus:border-[var(--color-accent)]"
               />
               <p className="mt-2 text-xs text-[var(--color-text-subtle)]">쉼표로 구분해서 입력하세요.</p>
             </Surface>
@@ -613,7 +613,7 @@ export default function AdminPostEditor({ editSlug }: AdminPostEditorProps) {
                 이미지
               </h2>
               <label
-                className={`flex min-h-28 w-full cursor-pointer flex-col items-center justify-center rounded-lg border border-dashed border-[var(--color-line)] bg-[var(--color-control)] p-4 text-center transition hover:border-[var(--color-accent)] hover:bg-[var(--window-bg-strong)] ${isUploading ? 'cursor-wait opacity-60' : ''}`}
+                className={`flex min-h-28 w-full cursor-pointer flex-col items-center justify-center rounded-lg border border-dashed border-[var(--card-border)] bg-[var(--card-bg)] p-4 text-center shadow-[var(--shadow-card)] transition hover:border-[var(--color-accent)] hover:bg-[var(--card-bg-strong)] ${isUploading ? 'cursor-wait opacity-60' : ''}`}
               >
                 <UploadCloud className="mb-2 h-7 w-7 text-[var(--color-text-subtle)]" />
                 <span className="text-sm font-semibold text-[var(--color-text)]">
@@ -641,7 +641,7 @@ export default function AdminPostEditor({ editSlug }: AdminPostEditorProps) {
                 <button
                   type="button"
                   onClick={() => setShowDraftList((previous) => !previous)}
-                  className="rounded-full border border-[var(--color-line)] bg-[var(--color-control)] px-2.5 py-1 text-xs font-bold text-[var(--color-text-muted)] transition hover:bg-[var(--window-bg-strong)] hover:text-[var(--color-text)]"
+                  className="rounded-full border border-[var(--control-border)] bg-[var(--color-control)] px-2.5 py-1 text-xs font-bold text-[var(--color-text-muted)] transition hover:bg-[var(--card-bg-strong)] hover:text-[var(--color-text)]"
                 >
                   {drafts.length}/10
                 </button>
@@ -656,7 +656,7 @@ export default function AdminPostEditor({ editSlug }: AdminPostEditorProps) {
                   ) : (
                     <ul className="space-y-1">
                       {drafts.map((draft) => (
-                        <li key={draft.id} className="group rounded-lg px-3 py-2 transition hover:bg-black/[0.04] dark:hover:bg-white/10">
+                        <li key={draft.id} className="group rounded-lg px-3 py-2 transition hover:bg-[var(--card-bg)]">
                           <div className="flex items-start justify-between gap-2">
                             <button type="button" onClick={() => handleLoadDraft(draft)} className="min-w-0 flex-1 text-left">
                               <p className="line-clamp-1 text-sm font-semibold text-[var(--color-text)]">{draft.title}</p>

src/components/admin/AdminRouteShell.tsx

@@ -60,7 +60,7 @@ export default function AdminRouteShell({ children }: { children: React.ReactNod
     <div className="mx-auto w-full space-y-6 px-0 py-4 md:w-[80vw] md:max-w-[1400px] md:py-6">
       <WindowSurface title="Admin Console" subtitle="Operations toolbar" bodyClassName="p-2">
         <nav
-          className="flex gap-2 overflow-x-auto rounded-lg bg-[var(--color-control)] p-1 backdrop-blur-xl"
+          className="flex gap-2 overflow-x-auto rounded-lg border border-[var(--card-border)] bg-[var(--card-bg)] p-1 shadow-[var(--shadow-card)] backdrop-blur-[18px]"
           aria-label="관리자 메뉴"
         >
           {navItems.map((item) => {
@@ -74,8 +74,8 @@ export default function AdminRouteShell({ children }: { children: React.ReactNod
                 className={clsx(
                   'inline-flex h-9 shrink-0 items-center gap-2 rounded-lg px-4 text-sm font-semibold transition',
                   isActive
-                    ? 'bg-[var(--window-bg-strong)] text-[var(--color-text)] shadow-sm'
+                    ? 'bg-[var(--card-bg-strong)] text-[var(--color-text)] shadow-sm'
-                    : 'text-[var(--color-text-muted)] hover:bg-black/[0.04] hover:text-[var(--color-text)] dark:hover:bg-white/10',
+                    : 'text-[var(--color-text-muted)] hover:bg-[var(--card-bg-strong)] hover:text-[var(--color-text)]',
                 )}
               >
                 <Icon size={16} />

src/components/admin/dashboard/AdminDashboardActionCenter.tsx

@@ -50,7 +50,7 @@ export default function AdminDashboardActionCenter({
               <Link
                 key={item.label}
                 href={item.href}
-                className="flex items-center justify-between gap-4 rounded-lg px-3 py-3 transition hover:bg-black/[0.03] dark:hover:bg-white/10"
+                className="flex items-center justify-between gap-4 rounded-lg px-3 py-3 transition hover:bg-[var(--card-bg)]"
               >
                 <span className="flex items-center gap-3 text-sm font-semibold text-[var(--color-text-muted)]">
                   <Icon size={16} />

src/components/admin/dashboard/AdminDashboardCategoryHealth.tsx

@@ -34,9 +34,9 @@ export default function AdminDashboardCategoryHealth({
       </div>
 
       {categoryStats.length > 0 ? (
-        <div className="overflow-x-auto rounded-lg border border-[var(--color-line)]">
+        <div className="overflow-x-auto rounded-lg border border-[var(--card-border)] bg-[var(--card-bg)] shadow-[var(--shadow-card)]">
           <div className="min-w-[680px]">
-            <div className="grid grid-cols-[1.2fr_0.6fr_0.7fr_0.9fr_auto] gap-3 bg-black/[0.03] px-4 py-3 text-xs font-bold text-[var(--color-text-subtle)] dark:bg-white/10">
+            <div className="grid grid-cols-[1.2fr_0.6fr_0.7fr_0.9fr_auto] gap-3 bg-[var(--window-titlebar)] px-4 py-3 text-xs font-bold text-[var(--color-text-subtle)]">
               <span>카테고리</span>
               <span>글</span>
               <span>최근 조회</span>
@@ -47,7 +47,7 @@ export default function AdminDashboardCategoryHealth({
               <Link
                 key={category.id}
                 href={`/category/${category.name}`}
-                className="grid grid-cols-[1.2fr_0.6fr_0.7fr_0.9fr_auto] gap-3 border-t border-[var(--color-line)] px-4 py-3 text-sm transition hover:bg-black/[0.03] dark:hover:bg-white/10"
+                className="grid grid-cols-[1.2fr_0.6fr_0.7fr_0.9fr_auto] gap-3 border-t border-[var(--card-border)] px-4 py-3 text-sm transition hover:bg-[var(--card-bg-strong)]"
               >
                 <span className="truncate font-semibold text-[var(--color-text)]">{category.name}</span>
                 <span className="text-[var(--color-text-muted)]">{category.postCount.toLocaleString()}</span>

src/components/admin/dashboard/AdminDashboardPostPerformance.tsx

@@ -16,7 +16,7 @@ function PostStatRow({ post, isFallback }: { post: DashboardPostStat; isFallback
   return (
     <Link
       href={`/posts/${post.slug}`}
-      className="group flex items-start justify-between gap-4 rounded-lg px-3 py-3 transition hover:bg-black/[0.03] dark:hover:bg-white/10"
+      className="group flex items-start justify-between gap-4 rounded-lg px-3 py-3 transition hover:bg-[var(--card-bg)]"
     >
       <div className="min-w-0">
         <div className="mb-1 flex items-center gap-2">

src/components/comment/CommentItem.tsx

@@ -163,7 +163,7 @@ export default function CommentItem({ comment, postSlug, depth = 0 }: CommentIte
              </button>
              <button
                onClick={() => { setIsDeleting(false); setGuestPassword(''); }}
-               className="rounded-full p-1 text-[var(--color-text-subtle)] hover:bg-black/[0.06] dark:hover:bg-white/10"
+               className="rounded-full p-1 text-[var(--color-text-subtle)] hover:bg-[var(--card-bg)]"
              >
                <X size={14} />
              </button>

src/components/layout/DesktopDock.tsx

@@ -109,14 +109,14 @@ export default function DesktopDock({ isSidebarCollapsed }: DesktopDockProps) {
     const Icon = item.icon;
     const active = item.isActive?.(pathname) ?? false;
     const itemClass = clsx(
-      'group relative flex h-10 w-10 items-center justify-center rounded-lg border border-white/20 bg-[var(--color-control)] text-[var(--color-text-muted)] shadow-[var(--shadow-control)] transition duration-150 hover:-translate-y-1 hover:bg-[var(--window-bg-strong)] hover:text-[var(--color-text)] focus-visible:-translate-y-1 sm:h-12 sm:w-12',
+      'group relative flex h-10 w-10 items-center justify-center rounded-lg border border-[var(--control-border)] bg-[var(--color-control)] text-[var(--color-text-muted)] shadow-[var(--shadow-control)] transition duration-150 hover:-translate-y-1 hover:bg-[var(--card-bg-strong)] hover:text-[var(--color-text)] focus-visible:-translate-y-1 sm:h-12 sm:w-12',
-      active && 'bg-[var(--window-bg-strong)] text-[var(--color-accent)] ring-1 ring-[var(--color-accent-soft)]',
+      active && 'bg-[var(--card-bg-strong)] text-[var(--color-accent)] ring-1 ring-[var(--color-accent-soft)]',
     );
 
     const content = (
       <>
         <Icon size={20} strokeWidth={2.1} />
-        <span className="pointer-events-none absolute -top-9 hidden whitespace-nowrap rounded-full border border-[var(--color-line)] bg-[var(--window-bg-strong)] px-2.5 py-1 text-xs font-semibold text-[var(--color-text)] opacity-0 shadow-[var(--shadow-control)] backdrop-blur-xl transition group-hover:opacity-100 sm:block">
+        <span className="pointer-events-none absolute -top-9 hidden whitespace-nowrap rounded-full border border-[var(--card-border)] bg-[var(--card-bg-strong)] px-2.5 py-1 text-xs font-semibold text-[var(--color-text)] opacity-0 shadow-[var(--shadow-control)] backdrop-blur-[18px] transition group-hover:opacity-100 sm:block">
           {item.label}
         </span>
         {active && (
@@ -162,7 +162,7 @@ export default function DesktopDock({ isSidebarCollapsed }: DesktopDockProps) {
         isSidebarCollapsed ? 'md:left-[calc(50%+2.5rem)]' : 'md:left-[calc(50%+9rem)]',
       )}
     >
-      <div className="flex max-w-[calc(100vw-1rem)] items-end gap-1.5 overflow-x-auto rounded-lg border border-[var(--window-border)] bg-[var(--dock-bg)] px-2 py-2 shadow-[var(--shadow-window)] backdrop-blur-2xl sm:gap-2">
+      <div className="flex max-w-[calc(100vw-1rem)] items-end gap-1.5 overflow-x-auto rounded-lg border border-[var(--dock-border)] bg-[var(--dock-bg)] px-2 py-2 shadow-[var(--shadow-dock)] backdrop-blur-[30px] sm:gap-2">
         {items.map(renderItem)}
       </div>
     </nav>

src/components/layout/DesktopMenuBar.tsx

@@ -58,7 +58,7 @@ export default function DesktopMenuBar({ isSidebarCollapsed }: DesktopMenuBarPro
         isSidebarCollapsed ? 'md:left-24' : 'md:left-[19rem]',
       )}
     >
-      <div className="flex h-11 items-center justify-between gap-3 rounded-lg border border-[var(--window-border)] bg-[var(--menubar-bg)] px-3 shadow-[var(--shadow-control)] backdrop-blur-2xl">
+      <div className="flex h-11 items-center justify-between gap-3 rounded-lg border border-[var(--menubar-border)] bg-[var(--menubar-bg)] px-3 shadow-[var(--shadow-menubar)] backdrop-blur-[24px]">
         <div className="flex min-w-0 items-center gap-3">
           <Link href="/" className="shrink-0 text-sm font-bold text-[var(--color-text)]">
             WYPark

src/components/layout/Sidebar.tsx

@@ -74,7 +74,7 @@ function CategoryItem({ category, depth, onNavigate, pathname }: CategoryItemPro
           'flex items-center justify-between rounded-lg px-3 py-2 text-sm transition-all',
           isActive
             ? 'bg-[var(--color-accent-soft)] font-semibold text-[var(--color-accent)] shadow-sm'
-            : 'text-[var(--color-text-muted)] hover:bg-black/[0.04] hover:text-[var(--color-text)] dark:hover:bg-white/10',
+            : 'text-[var(--color-text-muted)] hover:bg-[var(--card-bg)] hover:text-[var(--color-text)]',
         )}
         style={{ marginLeft: `${depth * 8}px` }}
       >
@@ -95,7 +95,7 @@ function CategoryItem({ category, depth, onNavigate, pathname }: CategoryItemPro
               event.stopPropagation();
               setIsExpanded((previous) => !previous);
             }}
-            className="ml-1 rounded-full p-1 transition-colors hover:bg-black/[0.06] dark:hover:bg-white/10"
+            className="ml-1 rounded-full p-1 transition-colors hover:bg-[var(--card-bg)]"
             aria-label={isChildrenVisible ? `${category.name} 접기` : `${category.name} 펼치기`}
           >
             <ChevronRight
@@ -171,7 +171,7 @@ function SidebarContent({
       <button
         type="button"
         onClick={() => setIsOpen((previous) => !previous)}
-        className="fixed left-4 top-4 z-50 rounded-full border border-[var(--color-line)] bg-[var(--color-control)] p-2 shadow-[var(--shadow-control)] backdrop-blur-xl transition-colors hover:bg-[var(--color-surface-strong)] md:hidden"
+        className="fixed left-4 top-4 z-50 rounded-full border border-[var(--control-border)] bg-[var(--color-control)] p-2 shadow-[var(--shadow-control)] backdrop-blur-[18px] transition-colors hover:bg-[var(--card-bg-strong)] md:hidden"
         aria-label={isOpen ? '사이드바 닫기' : '사이드바 열기'}
       >
         {isOpen ? <X size={20} /> : <Menu size={20} />}
@@ -189,7 +189,7 @@ function SidebarContent({
 
       <aside
         className={clsx(
-          'fixed left-0 top-0 z-40 flex h-screen w-72 flex-col overflow-hidden border-r border-[var(--window-border)] bg-[var(--sidebar-bg)] shadow-[var(--shadow-panel)] backdrop-blur-2xl transition-[transform,width] duration-300 ease-out md:translate-x-0',
+          'fixed left-0 top-0 z-40 flex h-screen w-72 flex-col overflow-hidden border-r border-[var(--sidebar-border)] bg-[var(--sidebar-bg)] shadow-[var(--shadow-sidebar)] backdrop-blur-[30px] transition-[transform,width] duration-300 ease-out md:translate-x-0',
           isDesktopCollapsed ? 'md:w-20' : 'md:w-72',
           isOpen ? 'translate-x-0' : '-translate-x-full',
         )}
@@ -198,7 +198,7 @@ function SidebarContent({
           <button
             type="button"
             onClick={() => onDesktopCollapsedChange(!isDesktopCollapsed)}
-            className="absolute right-3 top-3 hidden h-8 w-8 items-center justify-center rounded-full border border-[var(--color-line)] bg-[var(--color-control)] text-[var(--color-text-muted)] shadow-[var(--shadow-control)] transition hover:bg-[var(--window-bg-strong)] hover:text-[var(--color-text)] md:flex"
+            className="absolute right-3 top-3 hidden h-8 w-8 items-center justify-center rounded-full border border-[var(--control-border)] bg-[var(--color-control)] text-[var(--color-text-muted)] shadow-[var(--shadow-control)] transition hover:bg-[var(--card-bg-strong)] hover:text-[var(--color-text)] md:flex"
             aria-label={isDesktopCollapsed ? '사이드바 펼치기' : '사이드바 접기'}
           >
             {isDesktopCollapsed ? <ChevronsRight size={16} /> : <ChevronsLeft size={16} />}
@@ -288,7 +288,7 @@ function SidebarContent({
                       'flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm transition-all',
                       pathname === '/category/uncategorized'
                         ? 'bg-[var(--color-accent-soft)] font-semibold text-[var(--color-accent)]'
-                        : 'text-[var(--color-text-muted)] hover:bg-black/[0.04] hover:text-[var(--color-text)] dark:hover:bg-white/10',
+                        : 'text-[var(--color-text-muted)] hover:bg-[var(--card-bg)] hover:text-[var(--color-text)]',
                     )}
                   >
                     <FileQuestion size={16} />
@@ -310,7 +310,7 @@ function SidebarContent({
                   'flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm transition-all',
                   pathname === '/play/chess'
                     ? 'bg-[var(--color-accent-soft)] font-semibold text-[var(--color-accent)]'
-                    : 'text-[var(--color-text-muted)] hover:bg-black/[0.04] hover:text-[var(--color-text)] dark:hover:bg-white/10',
+                    : 'text-[var(--color-text-muted)] hover:bg-[var(--card-bg)] hover:text-[var(--color-text)]',
                 )}
               >
                 <Crown size={16} />
@@ -325,8 +325,8 @@ function SidebarContent({
               title="홈"
               aria-label="홈"
               className={clsx(
-                'flex h-11 w-11 items-center justify-center rounded-xl border border-[var(--color-line)] bg-[var(--color-control)] text-[var(--color-text-muted)] shadow-[var(--shadow-control)] transition hover:bg-[var(--window-bg-strong)] hover:text-[var(--color-text)]',
+                'flex h-11 w-11 items-center justify-center rounded-xl border border-[var(--control-border)] bg-[var(--color-control)] text-[var(--color-text-muted)] shadow-[var(--shadow-control)] transition hover:bg-[var(--card-bg-strong)] hover:text-[var(--color-text)]',
-                pathname === '/' && 'bg-[var(--window-bg-strong)] text-[var(--color-accent)]',
+                pathname === '/' && 'bg-[var(--card-bg-strong)] text-[var(--color-accent)]',
               )}
             >
               <Home size={18} />
@@ -344,8 +344,8 @@ function SidebarContent({
                   title={category.name}
                   aria-label={category.name}
                   className={clsx(
-                    'flex h-11 w-11 items-center justify-center rounded-xl border border-[var(--color-line)] bg-[var(--color-control)] text-[var(--color-text-muted)] shadow-[var(--shadow-control)] transition hover:bg-[var(--window-bg-strong)] hover:text-[var(--color-text)]',
+                    'flex h-11 w-11 items-center justify-center rounded-xl border border-[var(--control-border)] bg-[var(--color-control)] text-[var(--color-text-muted)] shadow-[var(--shadow-control)] transition hover:bg-[var(--card-bg-strong)] hover:text-[var(--color-text)]',
-                    isActive && 'bg-[var(--window-bg-strong)] text-[var(--color-accent)]',
+                    isActive && 'bg-[var(--card-bg-strong)] text-[var(--color-accent)]',
                   )}
                 >
                   <Folder size={18} />
@@ -358,8 +358,8 @@ function SidebarContent({
               title="미분류"
               aria-label="미분류"
               className={clsx(
-                'flex h-11 w-11 items-center justify-center rounded-xl border border-[var(--color-line)] bg-[var(--color-control)] text-[var(--color-text-muted)] shadow-[var(--shadow-control)] transition hover:bg-[var(--window-bg-strong)] hover:text-[var(--color-text)]',
+                'flex h-11 w-11 items-center justify-center rounded-xl border border-[var(--control-border)] bg-[var(--color-control)] text-[var(--color-text-muted)] shadow-[var(--shadow-control)] transition hover:bg-[var(--card-bg-strong)] hover:text-[var(--color-text)]',
-                pathname === '/category/uncategorized' && 'bg-[var(--window-bg-strong)] text-[var(--color-accent)]',
+                pathname === '/category/uncategorized' && 'bg-[var(--card-bg-strong)] text-[var(--color-accent)]',
               )}
             >
               <FileQuestion size={18} />
@@ -372,8 +372,8 @@ function SidebarContent({
               title="체스"
               aria-label="체스"
               className={clsx(
-                'flex h-11 w-11 items-center justify-center rounded-xl border border-[var(--color-line)] bg-[var(--color-control)] text-[var(--color-text-muted)] shadow-[var(--shadow-control)] transition hover:bg-[var(--window-bg-strong)] hover:text-[var(--color-text)]',
+                'flex h-11 w-11 items-center justify-center rounded-xl border border-[var(--control-border)] bg-[var(--color-control)] text-[var(--color-text-muted)] shadow-[var(--shadow-control)] transition hover:bg-[var(--card-bg-strong)] hover:text-[var(--color-text)]',
-                pathname === '/play/chess' && 'bg-[var(--window-bg-strong)] text-[var(--color-accent)]',
+                pathname === '/play/chess' && 'bg-[var(--card-bg-strong)] text-[var(--color-accent)]',
               )}
             >
               <Crown size={18} />
@@ -402,7 +402,7 @@ export default function Sidebar(props: SidebarProps) {
       fallback={(
         <div
           className={clsx(
-            'h-screen border-r border-[var(--window-border)] bg-[var(--sidebar-bg)]',
+            'h-screen border-r border-[var(--sidebar-border)] bg-[var(--sidebar-bg)]',
             props.isDesktopCollapsed ? 'w-20' : 'w-72',
           )}
         />

src/components/layout/TopHeader.tsx

@@ -49,7 +49,7 @@ export default function TopHeader() {
   };
 
   const quietActionClass =
-    'flex h-9 shrink-0 items-center gap-2 rounded-full border border-[var(--color-line)] bg-[var(--color-control)] px-3 text-sm font-semibold text-[var(--color-text-muted)] shadow-[var(--shadow-control)] backdrop-blur-2xl transition-colors hover:bg-[var(--color-surface-strong)] hover:text-[var(--color-text)]';
+    'flex h-9 shrink-0 items-center gap-2 rounded-full border border-[var(--control-border)] bg-[var(--color-control)] px-3 text-sm font-semibold text-[var(--color-text-muted)] shadow-[var(--shadow-control)] backdrop-blur-[18px] transition-colors hover:bg-[var(--card-bg-strong)] hover:text-[var(--color-text)]';
 
   return (
     <div
@@ -65,7 +65,7 @@ export default function TopHeader() {
         ].join(' ')}
         aria-hidden={!isMenuOpen}
       >
-        <div className="flex min-w-max items-center gap-2 rounded-full border border-[var(--color-line)] bg-[var(--color-surface)]/85 p-1.5 shadow-[var(--shadow-control)] backdrop-blur-2xl">
+        <div className="flex min-w-max items-center gap-2 rounded-full border border-[var(--control-border)] bg-[var(--card-bg)] p-1.5 shadow-[var(--shadow-control)] backdrop-blur-[18px]">
           <ThemeToggle />
 
           {_hasHydrated && (
@@ -96,7 +96,7 @@ export default function TopHeader() {
                 <button
                   type="button"
                   onClick={handleLogout}
-                  className="flex h-9 shrink-0 items-center gap-2 rounded-full border border-[var(--color-line)] bg-[var(--color-control)] px-3 text-sm font-medium text-[var(--color-text-muted)] shadow-[var(--shadow-control)] backdrop-blur-2xl transition-colors hover:bg-[var(--color-surface-strong)] hover:text-red-500"
+                  className="flex h-9 shrink-0 items-center gap-2 rounded-full border border-[var(--control-border)] bg-[var(--color-control)] px-3 text-sm font-medium text-[var(--color-text-muted)] shadow-[var(--shadow-control)] backdrop-blur-[18px] transition-colors hover:bg-[var(--card-bg-strong)] hover:text-red-500"
                 >
                   <LogOut size={16} />
                   <span className="hidden sm:inline">로그아웃</span>
@@ -116,7 +116,7 @@ export default function TopHeader() {
                 <Link
                   href="/signup"
                   onClick={closeMenu}
-                  className="flex h-9 shrink-0 items-center gap-2 rounded-full border border-[var(--color-line)] bg-[var(--color-control)] px-3 text-sm font-semibold text-[var(--color-text)] shadow-[var(--shadow-control)] backdrop-blur-2xl transition-all hover:bg-[var(--color-surface-strong)]"
+                  className="flex h-9 shrink-0 items-center gap-2 rounded-full border border-[var(--control-border)] bg-[var(--color-control)] px-3 text-sm font-semibold text-[var(--color-text)] shadow-[var(--shadow-control)] backdrop-blur-[18px] transition-all hover:bg-[var(--card-bg-strong)]"
                 >
                   <UserPlus size={16} />
                   <span className="hidden sm:inline">회원가입</span>
@@ -132,7 +132,7 @@ export default function TopHeader() {
         aria-label={isMenuOpen ? '상단 메뉴 닫기' : '상단 메뉴 열기'}
         aria-expanded={isMenuOpen}
         onClick={() => setIsMenuOpen((previous) => !previous)}
-        className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-[var(--color-line)] bg-[var(--color-control)] text-[var(--color-text)] shadow-[var(--shadow-control)] backdrop-blur-2xl transition-colors hover:bg-[var(--color-surface-strong)]"
+        className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-[var(--control-border)] bg-[var(--color-control)] text-[var(--color-text)] shadow-[var(--shadow-control)] backdrop-blur-[18px] transition-colors hover:bg-[var(--card-bg-strong)]"
       >
         {isMenuOpen ? <X size={18} /> : <Menu size={18} />}
       </button>

src/components/post/PostDetailClient.tsx

@@ -78,7 +78,7 @@ export default function PostDetailClient({ slug, initialPost }: PostDetailClient
         <button
           type="button"
           onClick={() => router.push('/')}
-          className="rounded-lg border border-[var(--color-line)] bg-[var(--color-control)] px-5 py-2.5 font-semibold text-[var(--color-text-muted)] transition-colors hover:bg-[var(--window-bg-strong)]"
+          className="rounded-lg border border-[var(--control-border)] bg-[var(--color-control)] px-5 py-2.5 font-semibold text-[var(--color-text-muted)] transition-colors hover:bg-[var(--card-bg-strong)]"
         >
           메인으로
         </button>
@@ -144,7 +144,7 @@ export default function PostDetailClient({ slug, initialPost }: PostDetailClient
           <WindowSurface title="Navigation" bodyClassName="p-4 md:p-5">
             <nav className="grid grid-cols-1 gap-4 md:grid-cols-2">
               {prevPost ? (
-                <Link href={`/posts/${prevPost.slug}`} className="group flex w-full flex-col items-start gap-1 rounded-lg border border-[var(--color-line)] bg-[var(--color-control)] p-5 transition-colors hover:bg-[var(--window-bg-strong)]">
+                <Link href={`/posts/${prevPost.slug}`} className="group flex w-full flex-col items-start gap-1 rounded-lg border border-[var(--card-border)] bg-[var(--card-bg)] p-5 shadow-[var(--shadow-card)] transition-colors hover:bg-[var(--card-bg-strong)]">
                   <span className="flex items-center gap-1 text-xs font-bold text-[var(--color-text-subtle)] transition-colors group-hover:text-[var(--color-accent)]">
                     <ChevronLeft size={16} />
                     이전 글
@@ -163,7 +163,7 @@ export default function PostDetailClient({ slug, initialPost }: PostDetailClient
               )}
 
               {nextPost ? (
-                <Link href={`/posts/${nextPost.slug}`} className="group flex w-full flex-col items-end gap-1 rounded-lg border border-[var(--color-line)] bg-[var(--color-control)] p-5 transition-colors hover:bg-[var(--window-bg-strong)]">
+                <Link href={`/posts/${nextPost.slug}`} className="group flex w-full flex-col items-end gap-1 rounded-lg border border-[var(--card-border)] bg-[var(--card-bg)] p-5 shadow-[var(--shadow-card)] transition-colors hover:bg-[var(--card-bg-strong)]">
                   <span className="flex items-center gap-1 text-xs font-bold text-[var(--color-text-subtle)] transition-colors group-hover:text-[var(--color-accent)]">
                     다음 글
                     <ChevronRight size={16} />

src/components/post/PostListItem.tsx

@@ -33,7 +33,7 @@ export default function PostListItem({ post, showViews = false }: PostListItemPr
       <div
         className={clsx(
           'flex items-center justify-between gap-4 rounded-lg px-3 py-4 transition duration-150',
-          isNotice ? 'hover:bg-red-500/[0.06]' : 'hover:bg-black/[0.03] dark:hover:bg-white/10',
+          isNotice ? 'hover:bg-red-500/[0.06]' : 'hover:bg-[var(--card-bg)]',
         )}
       >
         <div className="flex min-w-0 flex-1 items-center gap-3">

src/components/post/PostSearch.tsx

@@ -48,7 +48,7 @@ export default function PostSearch({
           onChange={(e) => setKeyword(e.target.value)}
           onKeyDown={handleKeyDown}
           placeholder={placeholder}
-          className="w-full rounded-full border border-[var(--color-line)] bg-[var(--color-control)] py-2.5 pl-10 pr-10 text-sm text-[var(--color-text)] shadow-[var(--shadow-control)] outline-none transition-all placeholder:text-[var(--color-text-subtle)] focus:border-[var(--color-accent)] focus:bg-[var(--color-surface-strong)]"
+          className="w-full rounded-full border border-[var(--control-border)] bg-[var(--color-control)] py-2.5 pl-10 pr-10 text-sm text-[var(--color-text)] shadow-[var(--shadow-control)] outline-none transition-all placeholder:text-[var(--color-text-subtle)] focus:border-[var(--color-accent)] focus:bg-[var(--card-bg-strong)]"
         />
         <Search 
           className="absolute left-3.5 top-1/2 -translate-y-1/2 cursor-pointer text-[var(--color-text-subtle)] transition-colors hover:text-[var(--color-accent)]" 
@@ -58,7 +58,7 @@ export default function PostSearch({
         {keyword && (
           <button
             onClick={handleClear}
-            className="absolute right-3 top-1/2 -translate-y-1/2 rounded-full p-1 text-[var(--color-text-subtle)] transition-colors hover:bg-black/[0.06] hover:text-[var(--color-text)] dark:hover:bg-white/10"
+            className="absolute right-3 top-1/2 -translate-y-1/2 rounded-full p-1 text-[var(--color-text-subtle)] transition-colors hover:bg-[var(--card-bg)] hover:text-[var(--color-text)]"
             aria-label="검색어 지우기"
           >
             <X size={14} />

src/components/theme/ThemeToggle.tsx

@@ -20,7 +20,7 @@ export default function ThemeToggle() {
 
   return (
     <div
-      className="inline-flex h-9 shrink-0 items-center rounded-full border border-[var(--color-line)] bg-[var(--color-control)] p-1 shadow-[var(--shadow-control)] backdrop-blur-2xl"
+      className="inline-flex h-9 shrink-0 items-center rounded-full border border-[var(--control-border)] bg-[var(--color-control)] p-1 shadow-[var(--shadow-control)] backdrop-blur-[18px]"
       role="group"
       aria-label="화면 테마"
     >
@@ -39,8 +39,8 @@ export default function ThemeToggle() {
             className={clsx(
               'inline-flex h-7 w-7 items-center justify-center rounded-full text-xs font-semibold transition duration-150 sm:w-8',
               isSelected
-                ? 'bg-[var(--window-bg-strong)] text-[var(--color-text)] shadow-sm'
+                ? 'bg-[var(--card-bg-strong)] text-[var(--color-text)] shadow-sm'
-                : 'text-[var(--color-text-subtle)] hover:bg-black/[0.04] hover:text-[var(--color-text)] dark:hover:bg-white/10',
+                : 'text-[var(--color-text-subtle)] hover:bg-[var(--card-bg)] hover:text-[var(--color-text)]',
             )}
           >
             <Icon size={15} strokeWidth={2.2} />

src/components/ui/EmptyState.tsx

@@ -17,7 +17,7 @@ export default function EmptyState({
   return (
     <div
       className={clsx(
-        'flex min-h-36 flex-col items-center justify-center rounded-lg border border-dashed border-[var(--color-line)] bg-[var(--color-surface)] px-5 py-10 text-center',
+        'flex min-h-36 flex-col items-center justify-center rounded-lg border border-dashed border-[var(--card-border)] bg-[var(--card-bg)] px-5 py-10 text-center shadow-[var(--shadow-card)] backdrop-blur-[18px]',
         className,
       )}
     >

src/components/ui/SegmentedControl.tsx

@@ -7,7 +7,7 @@ export interface SegmentedControlOption<T extends string> {
 
 interface SegmentedControlProps<T extends string> {
   ariaLabel: string;
-  options: SegmentedControlOption<T>[];
+  options: readonly SegmentedControlOption<T>[];
   value: T;
   onChange: (value: T) => void;
   className?: string;
@@ -23,7 +23,7 @@ export default function SegmentedControl<T extends string>({
   return (
     <div
       className={clsx(
-        'inline-flex h-9 rounded-full border border-[var(--color-line)] bg-[var(--color-control)] p-1 shadow-[var(--shadow-control)] backdrop-blur-xl',
+        'inline-flex h-9 rounded-full border border-[var(--control-border)] bg-[var(--color-control)] p-1 shadow-[var(--shadow-control)] backdrop-blur-[18px]',
         className,
       )}
       role="group"
@@ -41,8 +41,8 @@ export default function SegmentedControl<T extends string>({
             className={clsx(
               'min-w-14 rounded-full px-3 text-sm font-semibold transition duration-150',
               isSelected
-                ? 'bg-[var(--color-surface-strong)] text-[var(--color-text)] shadow-sm'
+                ? 'bg-[var(--card-bg-strong)] text-[var(--color-text)] shadow-sm'
-                : 'text-[var(--color-text-muted)] hover:bg-black/[0.04] hover:text-[var(--color-text)] dark:hover:bg-white/10',
+                : 'text-[var(--color-text-muted)] hover:bg-[var(--card-bg)] hover:text-[var(--color-text)]',
             )}
           >
             {option.label}

src/components/ui/Surface.tsx

@@ -19,11 +19,11 @@ export default function Surface({
   return (
     <Component
       className={clsx(
-        'rounded-lg border border-[var(--window-border)] backdrop-blur-2xl',
+        'rounded-lg border border-[var(--card-border)] backdrop-blur-[18px]',
         strong
-          ? 'bg-[var(--window-bg-strong)] shadow-[var(--shadow-card)]'
+          ? 'bg-[var(--card-bg-strong)] shadow-[var(--shadow-card)]'
-          : 'bg-[var(--window-bg)] shadow-[var(--shadow-card)]',
+          : 'bg-[var(--card-bg)] shadow-[var(--shadow-card)]',
-        interactive && 'transition duration-150 hover:-translate-y-0.5 hover:border-black/15 hover:bg-[var(--window-bg-strong)] hover:shadow-[var(--shadow-control)] dark:hover:border-white/20',
+        interactive && 'transition duration-150 hover:-translate-y-0.5 hover:border-[var(--card-border-hover)] hover:bg-[var(--card-bg-strong)] hover:shadow-[var(--shadow-control)]',
         className,
       )}
       {...props}

src/components/ui/WindowSurface.tsx

@@ -28,13 +28,13 @@ export default function WindowSurface({
   return (
     <Component
       className={clsx(
-        'w-full overflow-hidden rounded-lg border border-[var(--window-border)] bg-[var(--window-bg)] shadow-[var(--shadow-window)] backdrop-blur-2xl',
+        'w-full overflow-hidden rounded-lg border border-[var(--window-border)] bg-[var(--window-bg)] shadow-[var(--shadow-window)] backdrop-blur-[28px]',
         className,
       )}
       {...props}
     >
       {hasTitlebar && (
-        <div className="flex min-h-11 items-center justify-between gap-4 border-b border-[var(--color-line)] bg-[var(--window-titlebar)] px-4 py-2.5">
+        <div className="flex min-h-11 items-center justify-between gap-4 border-b border-[var(--window-titlebar-border)] bg-[var(--window-titlebar)] px-4 py-2.5">
           <div className="flex min-w-0 items-center gap-3">
             {showTrafficLights && (
               <div className="flex shrink-0 items-center gap-1.5" aria-hidden="true">

src/lib/site.ts

@@ -0,0 +1,33 @@
+export const SITE_URL = 'https://blog.wypark.me';
+export const SITE_NAME = 'WYPark Blog';
+export const DEFAULT_DESCRIPTION = '개발 블로그';
+
+const API_DATE_TIMEZONE = '+09:00';
+const TIMEZONE_SUFFIX_PATTERN = /(z|[+-]\d{2}:?\d{2})$/i;
+
+const trimSubMilliseconds = (value: string) => {
+  return value.replace(/(\.\d{3})\d+/, '$1');
+};
+
+const withApiTimezone = (value: string) => {
+  if (TIMEZONE_SUFFIX_PATTERN.test(value)) return value;
+  if (/^\d{4}-\d{2}-\d{2}$/.test(value)) return `${value}T00:00:00${API_DATE_TIMEZONE}`;
+
+  return `${value}${API_DATE_TIMEZONE}`;
+};
+
+export const getCanonicalUrl = (path = '/') => {
+  return new URL(path, SITE_URL).toString();
+};
+
+export const parseApiDate = (value?: string | null, fallback = new Date()) => {
+  if (!value) return fallback;
+
+  const date = new Date(withApiTimezone(trimSubMilliseconds(value.trim())));
+
+  if (Number.isNaN(date.getTime())) return fallback;
+
+  const now = new Date();
+  return date > now ? now : date;
+};
+