Redesign blog as desktop OS

2026-05-29 09:46:00 +09:00
parent ab585b5faa
commit 7f9bc1f83b
24 changed files with 1016 additions and 592 deletions
--- a/src/components/admin/AdminCategoryPanel.tsx
+++ b/src/components/admin/AdminCategoryPanel.tsx
@@ -5,6 +5,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import toast from 'react-hot-toast';
 import { Folder, FolderOpen, FolderPlus, FolderTree, Loader2, Save, Trash2 } from 'lucide-react';
 import { createCategory, deleteCategory, getCategories, updateCategory } from '@/api/category';
+import WindowSurface from '@/components/ui/WindowSurface';
 import { Category, CategoryUpdateRequest } from '@/types';
 import { clsx } from 'clsx';

@@ -342,7 +343,7 @@ export default function AdminCategoryPanel() {
  };

  return (
-    <section className="rounded-lg border border-gray-200 bg-white p-5">
+    <WindowSurface title="Categories" subtitle="Finder tree" bodyClassName="p-5">
      <div className="mb-5 flex items-start justify-between gap-4">
        <div>
          <h2 className="flex items-center gap-2 text-lg font-bold text-gray-950">
@@ -426,6 +427,6 @@ export default function AdminCategoryPanel() {
          )}
        </div>
      </div>
-    </section>
+    </WindowSurface>
  );
 }
--- a/src/components/admin/AdminCommentsPanel.tsx
+++ b/src/components/admin/AdminCommentsPanel.tsx
@@ -14,6 +14,7 @@ import {
  X,
 } from 'lucide-react';
 import { deleteAdminComment, getAdminComments } from '@/api/comments';
+import WindowSurface from '@/components/ui/WindowSurface';
 import { AdminComment, AdminCommentListResponse, PageMeta } from '@/types';

 const PAGE_SIZE = 10;
@@ -168,7 +169,7 @@ export default function AdminCommentsPanel() {
  };

  return (
-    <section className="rounded-lg border border-gray-200 bg-white p-5">
+    <WindowSurface title="Comments" subtitle="Moderation" bodyClassName="p-5">
      <div className="mb-5 flex items-start justify-between gap-4">
        <div>
          <h2 className="flex items-center gap-2 text-lg font-bold text-gray-950">
@@ -283,6 +284,6 @@ export default function AdminCommentsPanel() {
          onConfirm={handleConfirmDelete}
        />
      )}
-    </section>
+    </WindowSurface>
  );
 }
--- a/src/components/admin/AdminPostsPanel.tsx
+++ b/src/components/admin/AdminPostsPanel.tsx
@@ -18,6 +18,7 @@ import {
 } from 'lucide-react';
 import { getCategories } from '@/api/category';
 import { deletePost, getPosts } from '@/api/posts';
+import WindowSurface from '@/components/ui/WindowSurface';
 import { Category, PageMeta, Post, PostListResponse } from '@/types';

 const PAGE_SIZE = 10;
@@ -399,7 +400,7 @@ export default function AdminPostsPanel() {
  };

  return (
-    <section className="rounded-lg border border-gray-200 bg-white p-5">
+    <WindowSurface title="Posts" subtitle="Management" bodyClassName="p-5">
      <div className="mb-5 flex flex-col justify-between gap-4 md:flex-row md:items-end">
        <div>
          <h2 className="flex items-center gap-2 text-lg font-bold text-gray-950">
@@ -665,6 +666,6 @@ export default function AdminPostsPanel() {
          onConfirm={handleConfirmBulkDelete}
        />
      )}
-    </section>
+    </WindowSurface>
  );
 }
--- a/src/components/admin/AdminProfilePanel.tsx
+++ b/src/components/admin/AdminProfilePanel.tsx
@@ -7,6 +7,7 @@ import toast from 'react-hot-toast';
 import { Camera, Loader2, Save, UserRound } from 'lucide-react';
 import { getProfile, updateProfile } from '@/api/profile';
 import { uploadImage } from '@/api/image';
+import WindowSurface from '@/components/ui/WindowSurface';
 import { Profile, ProfileUpdateRequest } from '@/types';

 const defaultProfile: Profile = {
@@ -206,7 +207,7 @@ export default function AdminProfilePanel() {
  ].join('|');

  return (
-    <section className="rounded-lg border border-gray-200 bg-white p-5">
+    <WindowSurface title="Profile" subtitle="Public identity" bodyClassName="p-5">
      <div className="mb-5 flex items-start justify-between gap-4">
        <div>
          <h2 className="flex items-center gap-2 text-lg font-bold text-gray-950">
@@ -224,6 +225,6 @@ export default function AdminProfilePanel() {
      ) : (
        <ProfileForm key={formKey} profile={displayProfile} />
      )}
-    </section>
+    </WindowSurface>
  );
 }
--- a/src/components/admin/AdminRouteShell.tsx
+++ b/src/components/admin/AdminRouteShell.tsx
@@ -6,6 +6,7 @@ import { useEffect } from 'react';
 import toast from 'react-hot-toast';
 import { BarChart3, FileText, FolderTree, Loader2, MessageSquareText, UserRound } from 'lucide-react';
 import { clsx } from 'clsx';
+import WindowSurface from '@/components/ui/WindowSurface';
 import { useAuthStore } from '@/store/authStore';

 const navItems = [
@@ -57,31 +58,33 @@ export default function AdminRouteShell({ children }: { children: React.ReactNod

  return (
    <div className="mx-auto max-w-7xl space-y-6 px-1 py-4 md:px-4">
-      <nav
-        className="flex gap-2 overflow-x-auto rounded-full border border-[var(--color-line)] bg-[var(--color-control)] p-1 shadow-[var(--shadow-control)] backdrop-blur-2xl"
-        aria-label="관리자 메뉴"
-      >
-        {navItems.map((item) => {
-          const Icon = item.icon;
-          const isActive = item.exact ? pathname === item.href : pathname === item.href || pathname.startsWith(`${item.href}/`);
+      <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"
+          aria-label="관리자 메뉴"
+        >
+          {navItems.map((item) => {
+            const Icon = item.icon;
+            const isActive = item.exact ? pathname === item.href : pathname === item.href || pathname.startsWith(`${item.href}/`);

-          return (
-            <Link
-              key={item.href}
-              href={item.href}
-              className={clsx(
-                'inline-flex h-9 shrink-0 items-center gap-2 rounded-full px-4 text-sm font-semibold transition',
-                isActive
-                  ? 'bg-[var(--color-surface-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',
-              )}
-            >
-              <Icon size={16} />
-              {item.label}
-            </Link>
-          );
-        })}
-      </nav>
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                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'
+                    : 'text-[var(--color-text-muted)] hover:bg-black/[0.04] hover:text-[var(--color-text)] dark:hover:bg-white/10',
+                )}
+              >
+                <Icon size={16} />
+                {item.label}
+              </Link>
+            );
+          })}
+        </nav>
+      </WindowSurface>

      {children}
    </div>
--- a/src/components/chess/ChessPuzzleClient.tsx
+++ b/src/components/chess/ChessPuzzleClient.tsx
@@ -14,7 +14,7 @@ import {
  Target,
 } from 'lucide-react';
 import { getTodayChessPuzzle } from '@/api/chess';
-import Surface from '@/components/ui/Surface';
+import WindowSurface from '@/components/ui/WindowSurface';
 import { type ChessPuzzle } from '@/types';

 type FeedbackTone = 'neutral' | 'success' | 'error';
@@ -104,7 +104,7 @@ function LoadingState() {
    <main className="mx-auto flex w-full max-w-6xl flex-col gap-6 px-3 py-6 md:px-6">
      <PageHeader />
      <section className="grid items-start gap-5 lg:grid-cols-[minmax(0,1fr)_21rem]">
-        <Surface strong className="p-3 md:p-5">
+        <WindowSurface title="Board" bodyClassName="p-3 md:p-5">
          <div className="mx-auto grid aspect-square w-full max-w-[min(78vh,680px)] grid-cols-8 overflow-hidden rounded-lg border border-[var(--color-line)]">
            {BOARD_SQUARES.map((square, index) => (
              <div
@@ -117,11 +117,11 @@ function LoadingState() {
              />
            ))}
          </div>
-        </Surface>
-        <Surface strong as="aside" className="flex min-h-72 flex-col items-center justify-center p-5 text-center">
+        </WindowSurface>
+        <WindowSurface title="Puzzle" as="aside" bodyClassName="flex min-h-72 flex-col items-center justify-center p-5 text-center">
          <Loader2 className="mb-3 animate-spin text-[var(--color-accent)]" size={28} />
          <p className="text-sm font-semibold text-[var(--color-text)]">오늘의 퍼즐을 불러오는 중입니다.</p>
-        </Surface>
+        </WindowSurface>
      </section>
    </main>
  );
@@ -131,7 +131,7 @@ function ErrorState({ onRetry }: { onRetry: () => void }) {
  return (
    <main className="mx-auto flex w-full max-w-6xl flex-col gap-6 px-3 py-6 md:px-6">
      <PageHeader />
-      <Surface strong className="flex min-h-80 flex-col items-center justify-center p-8 text-center">
+      <WindowSurface title="Puzzle" bodyClassName="flex min-h-80 flex-col items-center justify-center p-8 text-center">
        <AlertCircle className="mb-3 text-red-500" size={30} />
        <h2 className="text-lg font-bold text-[var(--color-text)]">오늘의 퍼즐을 불러오지 못했습니다.</h2>
        <p className="mt-2 max-w-md text-sm leading-6 text-[var(--color-text-muted)]">
@@ -145,7 +145,7 @@ function ErrorState({ onRetry }: { onRetry: () => void }) {
          <RotateCcw size={16} />
          다시 시도
        </button>
-      </Surface>
+      </WindowSurface>
    </main>
  );
 }
@@ -267,7 +267,7 @@ function ChessPuzzleBoard({ puzzle }: { puzzle: ChessPuzzle }) {
      <PageHeader />

      <section className="grid items-start gap-5 lg:grid-cols-[minmax(0,1fr)_21rem]">
-        <Surface strong className="p-3 md:p-5">
+        <WindowSurface title="Board" bodyClassName="p-3 md:p-5">
          <div className="mx-auto grid aspect-square w-full max-w-[min(78vh,680px)] grid-cols-8 overflow-hidden rounded-lg border border-[var(--color-line)] shadow-[var(--shadow-control)]">
            {BOARD_SQUARES.map((square, index) => {
              const piece = game.get(square);
@@ -339,9 +339,9 @@ function ChessPuzzleBoard({ puzzle }: { puzzle: ChessPuzzle }) {
              );
            })}
          </div>
-        </Surface>
+        </WindowSurface>

-        <Surface strong as="aside" className="p-5">
+        <WindowSurface title="Puzzle" as="aside" bodyClassName="p-5">
          <div className="mb-4 flex items-start justify-between gap-3">
            <div>
              <p className="text-xs font-semibold uppercase text-[var(--color-text-subtle)]">
@@ -409,7 +409,7 @@ function ChessPuzzleBoard({ puzzle }: { puzzle: ChessPuzzle }) {
            Lichess 원문
            <ExternalLink size={13} />
          </a>
-        </Surface>
+        </WindowSurface>
      </section>
    </main>
  );
--- a/src/components/comment/CommentList.tsx
+++ b/src/components/comment/CommentList.tsx
@@ -1,24 +1,22 @@
 'use client';

 import { useQuery } from '@tanstack/react-query';
+import { Loader2, MessageCircle } from 'lucide-react';
 import { getComments } from '@/api/comments';
+import { Comment } from '@/types';
 import CommentForm from './CommentForm';
 import CommentItem from './CommentItem';
-import { Loader2, MessageCircle } from 'lucide-react';
-import { Comment } from '@/types';

 interface CommentListProps {
  postSlug: string;
 }

 export default function CommentList({ postSlug }: CommentListProps) {
-  // 댓글 목록 조회
  const { data: comments, isLoading, error } = useQuery({
    queryKey: ['comments', postSlug],
    queryFn: () => getComments(postSlug),
  });

-  // 총 댓글 수 계산 (재귀)
  const countComments = (list: Comment[]): number => {
    if (!list) return 0;
    return list.reduce((acc, curr) => acc + 1 + countComments(curr.children), 0);
@@ -27,28 +25,30 @@ export default function CommentList({ postSlug }: CommentListProps) {
  const totalCount = comments ? countComments(comments) : 0;

  if (isLoading) {
-    return <div className="flex justify-center py-10"><Loader2 className="animate-spin text-[var(--color-accent)]" /></div>;
+    return (
+      <div className="flex justify-center py-10">
+        <Loader2 className="animate-spin text-[var(--color-accent)]" />
+      </div>
+    );
  }

  if (error) {
-    return <div className="py-10 text-center text-red-500">댓글을 불러오는데 실패했습니다.</div>;
+    return <div className="py-10 text-center text-red-500">댓글을 불러오는 데 실패했습니다.</div>;
  }

  return (
-    <div className="mt-16 border-t border-[var(--color-line)] pt-10">
-      <div className="flex items-center gap-2 mb-6">
+    <div>
+      <div className="mb-6 flex items-center gap-2">
        <MessageCircle className="text-[var(--color-accent)]" size={24} />
        <h3 className="text-xl font-bold text-[var(--color-text)]">
          댓글 <span className="text-[var(--color-accent)]">{totalCount}</span>
        </h3>
      </div>

-      {/* 최상위 댓글 작성 폼 */}
      <div className="mb-10">
        <CommentForm postSlug={postSlug} />
      </div>

-      {/* 댓글 목록 */}
      <div className="space-y-6">
        {comments && comments.length > 0 ? (
          comments.map((comment) => (
@@ -56,7 +56,7 @@ export default function CommentList({ postSlug }: CommentListProps) {
          ))
        ) : (
          <div className="rounded-lg border border-dashed border-[var(--color-line)] bg-[var(--color-surface)] py-10 text-center text-sm text-[var(--color-text-muted)]">
-            아직 댓글이 없습니다. 첫 번째 댓글을 남겨보세요!
+            아직 댓글이 없습니다. 첫 번째 댓글을 남겨보세요.
          </div>
        )}
      </div>
--- a/src/components/layout/DesktopDock.tsx
+++ b/src/components/layout/DesktopDock.tsx
@@ -0,0 +1,101 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { clsx } from 'clsx';
+import { Archive, Crown, Home, LogIn, PenLine, Settings } from 'lucide-react';
+import { useAuthStore } from '@/store/authStore';
+
+type DockItem = {
+  href: string;
+  label: string;
+  icon: typeof Home;
+  isActive: (pathname: string) => boolean;
+};
+
+export default function DesktopDock() {
+  const pathname = usePathname();
+  const { isLoggedIn, role, _hasHydrated } = useAuthStore();
+  const isAdmin = _hasHydrated && isLoggedIn && role?.includes('ADMIN');
+
+  const items: DockItem[] = [
+    {
+      href: '/',
+      label: '홈',
+      icon: Home,
+      isActive: (currentPath) => currentPath === '/',
+    },
+    {
+      href: '/archive',
+      label: '아카이브',
+      icon: Archive,
+      isActive: (currentPath) => currentPath.startsWith('/archive'),
+    },
+    {
+      href: '/play/chess',
+      label: '체스',
+      icon: Crown,
+      isActive: (currentPath) => currentPath.startsWith('/play/chess'),
+    },
+  ];
+
+  if (isAdmin) {
+    items.push(
+      {
+        href: '/admin',
+        label: '관리자',
+        icon: Settings,
+        isActive: (currentPath) => currentPath === '/admin',
+      },
+      {
+        href: '/admin/posts/new',
+        label: '글쓰기',
+        icon: PenLine,
+        isActive: (currentPath) => currentPath.startsWith('/admin/posts/new'),
+      },
+    );
+  } else {
+    items.push({
+      href: '/login',
+      label: '로그인',
+      icon: LogIn,
+      isActive: (currentPath) => currentPath.startsWith('/login'),
+    });
+  }
+
+  return (
+    <nav
+      aria-label="빠른 실행 Dock"
+      className="fixed bottom-3 left-1/2 z-40 -translate-x-1/2 md:bottom-5 md:left-[calc(50%+9rem)]"
+    >
+      <div className="flex items-end gap-1.5 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">
+        {items.map((item) => {
+          const Icon = item.icon;
+          const active = item.isActive(pathname);
+
+          return (
+            <Link
+              key={item.href}
+              href={item.href}
+              title={item.label}
+              aria-label={item.label}
+              aria-current={active ? 'page' : undefined}
+              className={clsx(
+                'group relative flex h-11 w-11 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',
+                active && 'bg-[var(--window-bg-strong)] text-[var(--color-accent)] ring-1 ring-[var(--color-accent-soft)]',
+              )}
+            >
+              <Icon size={21} 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">
+                {item.label}
+              </span>
+              {active && (
+                <span className="absolute -bottom-1 h-1 w-1 rounded-full bg-[var(--color-accent)]" />
+              )}
+            </Link>
+          );
+        })}
+      </div>
+    </nav>
+  );
+}
--- a/src/components/layout/DesktopMenuBar.tsx
+++ b/src/components/layout/DesktopMenuBar.tsx
@@ -0,0 +1,162 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import Link from 'next/link';
+import { usePathname, useRouter } from 'next/navigation';
+import { clsx } from 'clsx';
+import { LogOut, Menu, PenLine, Settings, User, UserPlus, X } from 'lucide-react';
+import ThemeToggle from '@/components/theme/ThemeToggle';
+import { useAuthStore } from '@/store/authStore';
+
+const getAppTitle = (pathname: string) => {
+  if (pathname.startsWith('/admin/posts/new')) return 'Write';
+  if (pathname.startsWith('/admin/posts')) return 'Posts';
+  if (pathname.startsWith('/admin/comments')) return 'Comments';
+  if (pathname.startsWith('/admin/categories')) return 'Categories';
+  if (pathname.startsWith('/admin/profile')) return 'Profile';
+  if (pathname.startsWith('/admin')) return 'Dashboard';
+  if (pathname.startsWith('/archive')) return 'Archive';
+  if (pathname.startsWith('/category')) return 'Finder';
+  if (pathname.startsWith('/posts')) return 'Reader';
+  if (pathname.startsWith('/play/chess')) return 'Chess';
+  if (pathname.startsWith('/login')) return 'Login';
+  if (pathname.startsWith('/signup')) return 'Signup';
+  return 'Desktop';
+};
+
+export default function DesktopMenuBar() {
+  const router = useRouter();
+  const pathname = usePathname();
+  const menuRef = useRef<HTMLDivElement>(null);
+  const { isLoggedIn, role, logout, _hasHydrated } = useAuthStore();
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const isAdmin = _hasHydrated && role?.includes('ADMIN');
+
+  useEffect(() => {
+    const handlePointerDown = (event: PointerEvent) => {
+      if (!menuRef.current?.contains(event.target as Node)) {
+        setIsMenuOpen(false);
+      }
+    };
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') setIsMenuOpen(false);
+    };
+
+    document.addEventListener('pointerdown', handlePointerDown);
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('pointerdown', handlePointerDown);
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, []);
+
+  const closeMenu = () => setIsMenuOpen(false);
+
+  const handleLogout = () => {
+    if (confirm('로그아웃 하시겠습니까?')) {
+      closeMenu();
+      logout();
+      alert('로그아웃 되었습니다.');
+      router.push('/');
+    }
+  };
+
+  const quietActionClass =
+    'inline-flex h-8 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 hover:bg-[var(--window-bg-strong)] hover:text-[var(--color-text)]';
+
+  const actionLinks = (
+    <>
+      <ThemeToggle />
+
+      {_hasHydrated && (
+        isLoggedIn ? (
+          <>
+            {isAdmin && (
+              <>
+                <Link href="/admin" onClick={closeMenu} className={quietActionClass}>
+                  <Settings size={15} />
+                  <span>관리자</span>
+                </Link>
+                <Link
+                  href="/admin/posts/new"
+                  onClick={closeMenu}
+                  className="inline-flex h-8 shrink-0 items-center gap-2 rounded-full bg-[var(--color-accent)] px-3 text-sm font-semibold text-white shadow-[var(--shadow-control)] transition hover:bg-[var(--color-accent-hover)]"
+                >
+                  <PenLine size={15} />
+                  <span>글쓰기</span>
+                </Link>
+              </>
+            )}
+            <button
+              type="button"
+              onClick={handleLogout}
+              className={clsx(quietActionClass, 'hover:text-red-500')}
+            >
+              <LogOut size={15} />
+              <span>로그아웃</span>
+            </button>
+          </>
+        ) : (
+          <>
+            <Link href="/login" onClick={closeMenu} className={quietActionClass}>
+              <User size={15} />
+              <span>로그인</span>
+            </Link>
+            <Link href="/signup" onClick={closeMenu} className={quietActionClass}>
+              <UserPlus size={15} />
+              <span>회원가입</span>
+            </Link>
+          </>
+        )
+      )}
+    </>
+  );
+
+  return (
+    <div
+      ref={menuRef}
+      className="fixed left-16 right-3 top-3 z-40 md:left-[19rem] md:right-6"
+    >
+      <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 min-w-0 items-center gap-4">
+          <Link href="/" className="shrink-0 text-sm font-bold text-[var(--color-text)]">
+            WYPark OS
+          </Link>
+          <span className="hidden h-4 w-px bg-[var(--color-line)] sm:block" />
+          <span className="truncate text-sm font-semibold text-[var(--color-text-muted)]">
+            {getAppTitle(pathname)}
+          </span>
+          <div className="hidden items-center gap-3 text-xs font-medium text-[var(--color-text-subtle)] lg:flex">
+            <span>파일</span>
+            <span>편집</span>
+            <span>보기</span>
+            <span>윈도우</span>
+          </div>
+        </div>
+
+        <div className="hidden items-center gap-2 md:flex">{actionLinks}</div>
+
+        <button
+          type="button"
+          aria-label={isMenuOpen ? '상단 메뉴 닫기' : '상단 메뉴 열기'}
+          aria-expanded={isMenuOpen}
+          onClick={() => setIsMenuOpen((previous) => !previous)}
+          className="inline-flex h-8 w-8 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)] transition hover:bg-[var(--window-bg-strong)] md:hidden"
+        >
+          {isMenuOpen ? <X size={17} /> : <Menu size={17} />}
+        </button>
+      </div>
+
+      <div
+        className={clsx(
+          'absolute right-0 top-[3.25rem] flex min-w-64 flex-col gap-2 rounded-lg border border-[var(--window-border)] bg-[var(--window-bg-strong)] p-3 shadow-[var(--shadow-window)] backdrop-blur-2xl transition md:hidden',
+          isMenuOpen ? 'translate-y-0 opacity-100' : 'pointer-events-none -translate-y-2 opacity-0',
+        )}
+      >
+        {actionLinks}
+      </div>
+    </div>
+  );
+}
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -178,7 +178,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(--color-line)] bg-[var(--color-surface-strong)]/96 backdrop-blur-xl transition-transform duration-300 ease-out',
+          '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 duration-300 ease-out',
          isOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0',
        )}
      >
@@ -308,7 +308,7 @@ function SidebarContent() {
          </div>
        </nav>

-        <div className="shrink-0 border-t border-[var(--color-line)] bg-[var(--color-surface-strong)]/80 p-5">
+        <div className="shrink-0 border-t border-[var(--color-line)] bg-[var(--window-titlebar)] p-5">
          <div className="flex justify-center gap-3">
            <a
              href={displayProfile.githubUrl || '#'}
@@ -338,7 +338,7 @@ function SidebarContent() {

 export default function Sidebar() {
  return (
-    <Suspense fallback={<div className="h-screen w-72 border-r border-[var(--color-line)] bg-[var(--color-surface-strong)]" />}>
+    <Suspense fallback={<div className="h-screen w-72 border-r border-[var(--window-border)] bg-[var(--sidebar-bg)]" />}>
      <SidebarContent />
    </Suspense>
  );
--- a/src/components/post/PostCard.tsx
+++ b/src/components/post/PostCard.tsx
@@ -1,10 +1,11 @@
 import Link from 'next/link';
-import { Post } from '@/types';
 import StatusBadge from '@/components/ui/StatusBadge';
 import Surface from '@/components/ui/Surface';
+import { Post } from '@/types';

 const isNoticePost = (post: Post) => {
-  return post.categoryName === '공지' || post.categoryName.toLowerCase() === 'notice';
+  const categoryName = post.categoryName || '';
+  return categoryName === '공지' || categoryName === '怨듭?' || categoryName.toLowerCase() === 'notice';
 };

 const formatDate = (value: string) => {
--- a/src/components/post/PostDetailClient.tsx
+++ b/src/components/post/PostDetailClient.tsx
@@ -1,21 +1,23 @@
 'use client';

 import { useQuery } from '@tanstack/react-query';
+import { AlertCircle, ArrowLeft, Calendar, ChevronLeft, ChevronRight, Loader2, User } from 'lucide-react';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
 import { getPost } from '@/api/posts';
 import { getProfile } from '@/api/profile';
-import MarkdownRenderer from '@/components/post/MarkdownRenderer';
 import CommentList from '@/components/comment/CommentList';
+import MarkdownRenderer from '@/components/post/MarkdownRenderer';
 import TOC from '@/components/post/TOC';
-import { Loader2, Calendar, User, ArrowLeft, AlertCircle, ChevronLeft, ChevronRight } from 'lucide-react';
-import { useRouter } from 'next/navigation';
-import Link from 'next/link';
-import Image from 'next/image';
 import StatusBadge from '@/components/ui/StatusBadge';
-import { Post } from '@/types'; // 타입 임포트
+import Surface from '@/components/ui/Surface';
+import WindowSurface from '@/components/ui/WindowSurface';
+import { Post } from '@/types';

 interface PostDetailClientProps {
  slug: string;
-  initialPost: Post; // 🌟 서버에서 넘겨받는 초기 데이터 (필수)
+  initialPost: Post;
 }

 const getPostErrorInfo = (error: unknown) => {
@@ -37,12 +39,10 @@ const getPostErrorInfo = (error: unknown) => {
 export default function PostDetailClient({ slug, initialPost }: PostDetailClientProps) {
  const router = useRouter();

-  // 1. 게시글 상세 조회
  const { data: post, isLoading: isPostLoading, error } = useQuery({
    queryKey: ['post', slug],
    queryFn: () => getPost(slug),
    enabled: !!slug,
-    // 🌟 핵심: 서버에서 가져온 데이터를 초기값으로 사용하여 즉시 렌더링 (Hydration)
    initialData: initialPost,
  });

@@ -51,25 +51,22 @@ export default function PostDetailClient({ slug, initialPost }: PostDetailClient
    queryFn: getProfile,
  });

-  // 🌟 Loading 상태 처리를 제거하거나 조건을 완화합니다.
-  // initialData가 있으면 isLoading은 false가 되므로 바로 아래 컨텐츠가 렌더링됩니다.
  if (isPostLoading) {
    return (
-      <div className="flex justify-center items-center h-screen">
+      <div className="flex h-screen items-center justify-center">
        <Loader2 className="animate-spin text-[var(--color-accent)]" size={40} />
      </div>
    );
  }

-  // 에러 처리
  if (error || !post) {
    const { status: errorStatus, message } = getPostErrorInfo(error);
    const errorMessage = message || '게시글을 찾을 수 없습니다.';
    const isAuthError = errorStatus === 401 || errorStatus === 403;

    return (
-      <div className="mx-auto max-w-4xl px-4 py-20 text-center">
-        <div className="flex justify-center mb-4">
+      <WindowSurface className="mx-auto max-w-4xl" bodyClassName="px-4 py-20 text-center">
+        <div className="mb-4 flex justify-center">
          <AlertCircle className="text-[var(--color-text-subtle)]" size={64} />
        </div>
        <h2 className="mb-2 text-2xl font-bold text-[var(--color-text)]">
@@ -78,33 +75,42 @@ export default function PostDetailClient({ slug, initialPost }: PostDetailClient
        <p className="mb-6 text-[var(--color-text-muted)]">
          {isAuthError ? '로그인이 필요하거나 비공개 게시글일 수 있습니다.' : errorMessage}
        </p>
-        <div className="flex justify-center gap-3">
-          <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(--color-surface-strong)]">메인으로</button>
-        </div>
-      </div>
+        <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)]"
+        >
+          메인으로
+        </button>
+      </WindowSurface>
    );
  }

-  // 백엔드 데이터 사용 (이전글/다음글)
  const prevPost = post.prevPost;
  const nextPost = post.nextPost;

  return (
-    <div className="mx-auto max-w-6xl px-4 py-10 md:px-8 md:py-14">
-      <Link href="/" className="mb-10 inline-flex items-center gap-1 text-sm font-medium text-[var(--color-text-muted)] transition-colors hover:text-[var(--color-accent)]">
+    <div className="mx-auto max-w-6xl px-1 py-4 md:px-3 md:py-6">
+      <Link href="/" className="mb-6 inline-flex items-center gap-1 text-sm font-medium text-[var(--color-text-muted)] transition-colors hover:text-[var(--color-accent)]">
        <ArrowLeft size={18} />
        <span>목록으로</span>
      </Link>

-      <div className="relative grid gap-8 xl:grid-cols-[minmax(0,780px)_210px] xl:justify-center xl:gap-16">
-        
-        <main className="min-w-0">
-          <article>
-            <header className="mb-12 border-b border-[var(--color-line)] pb-8">
+      <div className="relative grid gap-6 xl:grid-cols-[minmax(0,780px)_220px] xl:justify-center xl:gap-8">
+        <main className="min-w-0 space-y-6">
+          <WindowSurface
+            as="article"
+            title="Reader"
+            subtitle={post.categoryName || '미분류'}
+            bodyClassName="p-6 md:p-10"
+          >
+            <header className="mb-10 border-b border-[var(--color-line)] pb-8">
              <StatusBadge tone="neutral" className="mb-5">
                {post.categoryName || '미분류'}
              </StatusBadge>
-              <h1 className="mb-7 break-keep text-4xl font-bold leading-[1.08] tracking-normal text-[var(--color-text)] md:text-6xl">{post.title}</h1>
+              <h1 className="mb-7 break-keep text-4xl font-bold leading-[1.08] tracking-normal text-[var(--color-text)] md:text-6xl">
+                {post.title}
+              </h1>
              <div className="flex flex-wrap items-center gap-5 text-sm text-[var(--color-text-muted)]">
                <div className="flex items-center gap-2">
                  {profile?.imageUrl ? (
@@ -117,44 +123,76 @@ export default function PostDetailClient({ slug, initialPost }: PostDetailClient
                      unoptimized
                    />
                  ) : (
-                    <div className="flex h-8 w-8 items-center justify-center rounded-full bg-black/[0.05] dark:bg-white/10"><User size={16} /></div>
+                    <div className="flex h-8 w-8 items-center justify-center rounded-full bg-black/[0.05] dark:bg-white/10">
+                      <User size={16} />
+                    </div>
                  )}
                  <span className="font-bold text-[var(--color-text)]">{profile?.name || 'Dev Park'}</span>
                </div>
-                <div className="flex items-center gap-1.5"><Calendar size={16} />{new Date(post.createdAt).toLocaleDateString('ko-KR')}</div>
+                <div className="flex items-center gap-1.5">
+                  <Calendar size={16} />
+                  {new Date(post.createdAt).toLocaleDateString('ko-KR')}
+                </div>
              </div>
            </header>

-            <div className="prose prose-lg mb-20 max-w-none prose-headings:font-bold prose-headings:tracking-normal prose-headings:text-[var(--color-text)] prose-p:text-[var(--color-text)] prose-p:leading-8 prose-strong:text-[var(--color-text)] prose-li:text-[var(--color-text-muted)] prose-li:leading-8 prose-a:text-[var(--color-accent)] prose-hr:border-[var(--color-line)] prose-pre:bg-[#1e1e1e] prose-pre:text-gray-100">
+            <div className="prose prose-lg max-w-none prose-headings:font-bold prose-headings:tracking-normal prose-headings:text-[var(--color-text)] prose-p:text-[var(--color-text)] prose-p:leading-8 prose-strong:text-[var(--color-text)] prose-li:text-[var(--color-text-muted)] prose-li:leading-8 prose-a:text-[var(--color-accent)] prose-hr:border-[var(--color-line)] prose-pre:bg-[#1e1e1e] prose-pre:text-gray-100">
              <MarkdownRenderer content={post.content || ''} />
            </div>
-          </article>
+          </WindowSurface>

-          <nav className="mb-16 grid grid-cols-1 gap-4 border-y border-[var(--color-line)] py-8 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-surface)] p-5 transition-colors hover:bg-[var(--color-surface-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} /> 이전 글</span>
-                <span className="line-clamp-1 w-full text-left font-bold text-[var(--color-text-muted)] transition-colors group-hover:text-[var(--color-accent)]">{prevPost.title}</span>
-              </Link>
-            ) : <div className="hidden w-full cursor-not-allowed rounded-lg border border-[var(--color-line)] bg-[var(--color-surface)] p-5 opacity-60 md:block"><span className="flex items-center gap-1 text-xs font-bold text-[var(--color-text-subtle)]"><ChevronLeft size={16} /> 이전 글 없음</span></div>}
+          <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)]">
+                  <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} />
+                    이전 글
+                  </span>
+                  <span className="line-clamp-1 w-full text-left font-bold text-[var(--color-text-muted)] transition-colors group-hover:text-[var(--color-accent)]">
+                    {prevPost.title}
+                  </span>
+                </Link>
+              ) : (
+                <Surface className="hidden w-full cursor-not-allowed p-5 opacity-60 md:block">
+                  <span className="flex items-center gap-1 text-xs font-bold text-[var(--color-text-subtle)]">
+                    <ChevronLeft size={16} />
+                    이전 글 없음
+                  </span>
+                </Surface>
+              )}

-            {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-surface)] p-5 transition-colors hover:bg-[var(--color-surface-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} /></span>
-                <span className="line-clamp-1 w-full text-right font-bold text-[var(--color-text-muted)] transition-colors group-hover:text-[var(--color-accent)]">{nextPost.title}</span>
-              </Link>
-            ) : <div className="hidden w-full cursor-not-allowed flex-col items-end gap-1 rounded-lg border border-[var(--color-line)] bg-[var(--color-surface)] p-5 opacity-60 md:flex"><span className="flex items-center gap-1 text-xs font-bold text-[var(--color-text-subtle)]">다음 글 없음 <ChevronRight size={16} /></span></div>}
-          </nav>
+              {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)]">
+                  <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} />
+                  </span>
+                  <span className="line-clamp-1 w-full text-right font-bold text-[var(--color-text-muted)] transition-colors group-hover:text-[var(--color-accent)]">
+                    {nextPost.title}
+                  </span>
+                </Link>
+              ) : (
+                <Surface className="hidden w-full cursor-not-allowed flex-col items-end gap-1 p-5 opacity-60 md:flex">
+                  <span className="flex items-center gap-1 text-xs font-bold text-[var(--color-text-subtle)]">
+                    다음 글 없음
+                    <ChevronRight size={16} />
+                  </span>
+                </Surface>
+              )}
+            </nav>
+          </WindowSurface>

-          <CommentList postSlug={post.slug} />
+          <WindowSurface title="Comments" bodyClassName="p-5 md:p-6">
+            <CommentList postSlug={post.slug} />
+          </WindowSurface>
        </main>

-        <aside className="hidden w-[210px] shrink-0 xl:block">
-          <div className="sticky top-24">
-             <TOC content={post.content || ''} />
-          </div>
+        <aside className="hidden w-[220px] shrink-0 xl:block">
+          <WindowSurface title="Inspector" bodyClassName="p-4" className="sticky top-24">
+            <TOC content={post.content || ''} />
+          </WindowSurface>
        </aside>
-
      </div>
    </div>
  );
--- a/src/components/post/PostListItem.tsx
+++ b/src/components/post/PostListItem.tsx
@@ -1,8 +1,8 @@
 import Link from 'next/link';
 import { ChevronRight, Eye } from 'lucide-react';
 import { clsx } from 'clsx';
-import { Post } from '@/types';
 import StatusBadge from '@/components/ui/StatusBadge';
+import { Post } from '@/types';

 interface PostListItemProps {
  post: Post;
@@ -10,7 +10,8 @@ interface PostListItemProps {
 }

 const isNoticePost = (post: Post) => {
-  return post.categoryName === '공지' || post.categoryName.toLowerCase() === 'notice';
+  const categoryName = post.categoryName || '';
+  return categoryName === '공지' || categoryName === '怨듭?' || categoryName.toLowerCase() === 'notice';
 };

 const formatDate = (value: string) => {
--- a/src/components/theme/ThemeToggle.tsx
+++ b/src/components/theme/ThemeToggle.tsx
@@ -39,7 +39,7 @@ 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(--color-surface-strong)] text-[var(--color-text)] shadow-sm'
+                ? 'bg-[var(--window-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',
            )}
          >
--- a/src/components/ui/Surface.tsx
+++ b/src/components/ui/Surface.tsx
@@ -19,9 +19,11 @@ export default function Surface({
  return (
    <Component
      className={clsx(
-        'rounded-lg border border-[var(--color-line)] backdrop-blur-xl',
-        strong ? 'bg-[var(--color-surface-strong)] shadow-[var(--shadow-card)]' : 'bg-[var(--color-surface)] shadow-[var(--shadow-card)]',
-        interactive && 'transition duration-150 hover:border-black/15 hover:bg-[var(--color-surface-strong)] hover:shadow-[var(--shadow-control)] dark:hover:border-white/20',
+        'rounded-lg border border-[var(--window-border)] backdrop-blur-2xl',
+        strong
+          ? 'bg-[var(--window-bg-strong)] shadow-[var(--shadow-card)]'
+          : 'bg-[var(--window-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',
        className,
      )}
      {...props}
--- a/src/components/ui/WindowSurface.tsx
+++ b/src/components/ui/WindowSurface.tsx
@@ -0,0 +1,70 @@
+import { clsx } from 'clsx';
+import { HTMLAttributes, ReactNode } from 'react';
+
+type WindowSurfaceElement = 'div' | 'section' | 'article' | 'aside' | 'main';
+
+interface WindowSurfaceProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+  as?: WindowSurfaceElement;
+  title?: ReactNode;
+  subtitle?: ReactNode;
+  controls?: ReactNode;
+  showTrafficLights?: boolean;
+  bodyClassName?: string;
+}
+
+export default function WindowSurface({
+  as: Component = 'section',
+  title,
+  subtitle,
+  controls,
+  showTrafficLights = true,
+  className,
+  bodyClassName,
+  children,
+  ...props
+}: WindowSurfaceProps) {
+  const hasTitlebar = Boolean(title || subtitle || controls || showTrafficLights);
+
+  return (
+    <Component
+      className={clsx(
+        'overflow-hidden rounded-lg border border-[var(--window-border)] bg-[var(--window-bg)] shadow-[var(--shadow-window)] backdrop-blur-2xl',
+        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-w-0 items-center gap-3">
+            {showTrafficLights && (
+              <div className="flex shrink-0 items-center gap-1.5" aria-hidden="true">
+                <span className="h-3 w-3 rounded-full border border-black/10 bg-[#ff5f57]" />
+                <span className="h-3 w-3 rounded-full border border-black/10 bg-[#ffbd2e]" />
+                <span className="h-3 w-3 rounded-full border border-black/10 bg-[#28c840]" />
+              </div>
+            )}
+
+            {(title || subtitle) && (
+              <div className="min-w-0">
+                {title && (
+                  <div className="truncate text-sm font-semibold text-[var(--color-text)]">
+                    {title}
+                  </div>
+                )}
+                {subtitle && (
+                  <div className="truncate text-xs font-medium text-[var(--color-text-subtle)]">
+                    {subtitle}
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+
+          {controls && <div className="shrink-0">{controls}</div>}
+        </div>
+      )}
+
+      <div className={bodyClassName}>{children}</div>
+    </Component>
+  );
+}