.

2026-05-29 10:29:46 +09:00
parent 7f9bc1f83b
commit 7535fb6ac6
16 changed files with 385 additions and 1060 deletions
--- a/src/components/admin/AdminRouteShell.tsx
+++ b/src/components/admin/AdminRouteShell.tsx
@@ -57,7 +57,7 @@ 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">
+    <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"
--- a/src/components/chess/ChessPuzzleClient.tsx
+++ b/src/components/chess/ChessPuzzleClient.tsx
@@ -101,7 +101,7 @@ function PageHeader() {

 function LoadingState() {
  return (
-    <main className="mx-auto flex w-full max-w-6xl flex-col gap-6 px-3 py-6 md:px-6">
+    <main className="mx-auto flex w-full flex-col gap-6 px-0 py-4 md:w-[78vw] md:max-w-[1280px] md:py-6">
      <PageHeader />
      <section className="grid items-start gap-5 lg:grid-cols-[minmax(0,1fr)_21rem]">
        <WindowSurface title="Board" bodyClassName="p-3 md:p-5">
@@ -129,7 +129,7 @@ function LoadingState() {

 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">
+    <main className="mx-auto flex w-full flex-col gap-6 px-0 py-4 md:w-[78vw] md:max-w-[1280px] md:py-6">
      <PageHeader />
      <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} />
@@ -263,7 +263,7 @@ function ChessPuzzleBoard({ puzzle }: { puzzle: ChessPuzzle }) {
  };

  return (
-    <main className="mx-auto flex w-full max-w-6xl flex-col gap-6 px-3 py-6 md:px-6">
+    <main className="mx-auto flex w-full flex-col gap-6 px-0 py-4 md:w-[78vw] md:max-w-[1280px] md:py-6">
      <PageHeader />

      <section className="grid items-start gap-5 lg:grid-cols-[minmax(0,1fr)_21rem]">
--- a/src/components/layout/DesktopDock.tsx
+++ b/src/components/layout/DesktopDock.tsx
@@ -1,37 +1,54 @@
 'use client';

 import Link from 'next/link';
-import { usePathname } from 'next/navigation';
+import { usePathname, useRouter } from 'next/navigation';
 import { clsx } from 'clsx';
-import { Archive, Crown, Home, LogIn, PenLine, Settings } from 'lucide-react';
+import { Archive, Crown, Home, LogIn, LogOut, PenLine, Settings, UserPlus } from 'lucide-react';
 import { useAuthStore } from '@/store/authStore';

+interface DesktopDockProps {
+  isSidebarCollapsed: boolean;
+}
+
 type DockItem = {
-  href: string;
+  key: string;
+  href?: string;
  label: string;
  icon: typeof Home;
-  isActive: (pathname: string) => boolean;
+  isActive?: (pathname: string) => boolean;
+  onClick?: () => void;
 };

-export default function DesktopDock() {
+export default function DesktopDock({ isSidebarCollapsed }: DesktopDockProps) {
  const pathname = usePathname();
-  const { isLoggedIn, role, _hasHydrated } = useAuthStore();
+  const router = useRouter();
+  const { isLoggedIn, role, logout, _hasHydrated } = useAuthStore();
  const isAdmin = _hasHydrated && isLoggedIn && role?.includes('ADMIN');

+  const handleLogout = () => {
+    if (confirm('로그아웃 하시겠습니까?')) {
+      logout();
+      router.push('/');
+    }
+  };
+
  const items: DockItem[] = [
    {
+      key: 'home',
      href: '/',
      label: '홈',
      icon: Home,
      isActive: (currentPath) => currentPath === '/',
    },
    {
+      key: 'archive',
      href: '/archive',
      label: '아카이브',
      icon: Archive,
      isActive: (currentPath) => currentPath.startsWith('/archive'),
    },
    {
+      key: 'chess',
      href: '/play/chess',
      label: '체스',
      icon: Crown,
@@ -39,62 +56,114 @@ export default function DesktopDock() {
    },
  ];

-  if (isAdmin) {
+  if (_hasHydrated && isAdmin) {
    items.push(
      {
+        key: 'admin',
        href: '/admin',
        label: '관리자',
        icon: Settings,
        isActive: (currentPath) => currentPath === '/admin',
      },
      {
+        key: 'write',
        href: '/admin/posts/new',
        label: '글쓰기',
        icon: PenLine,
        isActive: (currentPath) => currentPath.startsWith('/admin/posts/new'),
      },
+      {
+        key: 'logout',
+        label: '로그아웃',
+        icon: LogOut,
+        onClick: handleLogout,
+      },
    );
-  } else {
+  } else if (_hasHydrated && isLoggedIn) {
    items.push({
-      href: '/login',
-      label: '로그인',
-      icon: LogIn,
-      isActive: (currentPath) => currentPath.startsWith('/login'),
+      key: 'logout',
+      label: '로그아웃',
+      icon: LogOut,
+      onClick: handleLogout,
    });
+  } else if (_hasHydrated) {
+    items.push(
+      {
+        key: 'login',
+        href: '/login',
+        label: '로그인',
+        icon: LogIn,
+        isActive: (currentPath) => currentPath.startsWith('/login'),
+      },
+      {
+        key: 'signup',
+        href: '/signup',
+        label: '회원가입',
+        icon: UserPlus,
+        isActive: (currentPath) => currentPath.startsWith('/signup'),
+      },
+    );
  }

+  const renderItem = (item: DockItem) => {
+    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',
+      active && 'bg-[var(--window-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">
+          {item.label}
+        </span>
+        {active && (
+          <span className="absolute -bottom-1 h-1 w-1 rounded-full bg-[var(--color-accent)]" />
+        )}
+      </>
+    );
+
+    if (item.href) {
+      return (
+        <Link
+          key={item.key}
+          href={item.href}
+          title={item.label}
+          aria-label={item.label}
+          aria-current={active ? 'page' : undefined}
+          className={itemClass}
+        >
+          {content}
+        </Link>
+      );
+    }
+
+    return (
+      <button
+        key={item.key}
+        type="button"
+        title={item.label}
+        aria-label={item.label}
+        onClick={item.onClick}
+        className={itemClass}
+      >
+        {content}
+      </button>
+    );
+  };
+
  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)]"
+      className={clsx(
+        'fixed bottom-3 left-1/2 z-40 -translate-x-1/2 transition-[left] duration-300 ease-out md:bottom-5',
+        isSidebarCollapsed ? 'md:left-[calc(50%+2.5rem)]' : '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 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">
+        {items.map(renderItem)}
      </div>
    </nav>
  );
--- a/src/components/layout/DesktopMenuBar.tsx
+++ b/src/components/layout/DesktopMenuBar.tsx
@@ -1,12 +1,27 @@
 'use client';

-import { useEffect, useRef, useState } from 'react';
 import Link from 'next/link';
-import { usePathname, useRouter } from 'next/navigation';
+import { usePathname } from 'next/navigation';
+import { useQuery } from '@tanstack/react-query';
 import { clsx } from 'clsx';
-import { LogOut, Menu, PenLine, Settings, User, UserPlus, X } from 'lucide-react';
+import { Github, Mail } from 'lucide-react';
+import { getProfile } from '@/api/profile';
 import ThemeToggle from '@/components/theme/ThemeToggle';
-import { useAuthStore } from '@/store/authStore';
+
+interface DesktopMenuBarProps {
+  isSidebarCollapsed: boolean;
+}
+
+const defaultProfile = {
+  githubUrl: 'https://github.com',
+  email: 'user@example.com',
+};
+
+const getCategoryTitle = (pathname: string) => {
+  const encodedName = pathname.split('/category/')[1]?.split('/')[0] || '';
+  const decodedName = decodeURIComponent(encodedName);
+  return decodedName === 'uncategorized' ? '미분류' : decodedName;
+};

 const getAppTitle = (pathname: string) => {
  if (pathname.startsWith('/admin/posts/new')) return 'Write';
@@ -16,7 +31,7 @@ const getAppTitle = (pathname: string) => {
  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('/category')) return getCategoryTitle(pathname);
  if (pathname.startsWith('/posts')) return 'Reader';
  if (pathname.startsWith('/play/chess')) return 'Chess';
  if (pathname.startsWith('/login')) return 'Login';
@@ -24,138 +39,57 @@ const getAppTitle = (pathname: string) => {
  return 'Desktop';
 };

-export default function DesktopMenuBar() {
-  const router = useRouter();
+export default function DesktopMenuBar({ isSidebarCollapsed }: DesktopMenuBarProps) {
  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 { data: profile } = useQuery({
+    queryKey: ['profile'],
+    queryFn: getProfile,
+    retry: 0,
+  });

-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') setIsMenuOpen(false);
-    };
+  const githubUrl = profile?.githubUrl || defaultProfile.githubUrl;
+  const email = profile?.email || defaultProfile.email;

-    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 =
+  const linkClass =
    '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"
+      className={clsx(
+        'fixed left-16 right-3 top-3 z-40 transition-[left] duration-300 ease-out md:right-6',
+        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 min-w-0 items-center gap-4">
+        <div className="flex min-w-0 items-center gap-3">
          <Link href="/" className="shrink-0 text-sm font-bold text-[var(--color-text)]">
-            WYPark OS
+            WYPark
          </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 className="flex shrink-0 items-center gap-2">
+          <div className="hidden items-center gap-2 md:flex">
+            <a
+              href={githubUrl}
+              target="_blank"
+              rel="noreferrer"
+              className={linkClass}
+            >
+              <Github size={15} />
+              <span>GitHub</span>
+            </a>
+            <a href={`mailto:${email}`} className={linkClass}>
+              <Mail size={15} />
+              <span>Email</span>
+            </a>
+          </div>
+          <ThemeToggle />
+        </div>
      </div>
    </div>
  );
--- a/src/components/layout/DesktopShell.tsx
+++ b/src/components/layout/DesktopShell.tsx
@@ -0,0 +1,50 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import type { ReactNode } from 'react';
+import { clsx } from 'clsx';
+import DesktopDock from '@/components/layout/DesktopDock';
+import DesktopMenuBar from '@/components/layout/DesktopMenuBar';
+import Sidebar from '@/components/layout/Sidebar';
+
+export default function DesktopShell({ children }: { children: ReactNode }) {
+  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
+
+  useEffect(() => {
+    const savedValue = window.localStorage.getItem('sidebar-collapsed');
+    if (!savedValue) return undefined;
+
+    const frameId = window.requestAnimationFrame(() => {
+      setIsSidebarCollapsed(savedValue === 'true');
+    });
+
+    return () => window.cancelAnimationFrame(frameId);
+  }, []);
+
+  const handleSidebarCollapsedChange = (nextValue: boolean) => {
+    setIsSidebarCollapsed(nextValue);
+    window.localStorage.setItem('sidebar-collapsed', String(nextValue));
+  };
+
+  return (
+    <div className="min-h-screen">
+      <Sidebar
+        isDesktopCollapsed={isSidebarCollapsed}
+        onDesktopCollapsedChange={handleSidebarCollapsedChange}
+      />
+      <DesktopMenuBar isSidebarCollapsed={isSidebarCollapsed} />
+      <DesktopDock isSidebarCollapsed={isSidebarCollapsed} />
+
+      <main
+        className={clsx(
+          'relative w-full flex-1 transition-[margin] duration-300 ease-out',
+          isSidebarCollapsed ? 'md:ml-20' : 'md:ml-72',
+        )}
+      >
+        <div className="mx-auto w-full px-4 pb-28 pt-20 md:px-6 md:pb-32 md:pt-24 lg:px-8">
+          {children}
+        </div>
+      </main>
+    </div>
+  );
+}
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -7,13 +7,15 @@ import Image from 'next/image';
 import { useQuery } from '@tanstack/react-query';
 import { clsx } from 'clsx';
 import {
-  Archive,
  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
  Crown,
  FileQuestion,
  Folder,
  FolderOpen,
  Github,
+  Home,
  Mail,
  Menu,
  X,
@@ -23,6 +25,11 @@ import { getProfile } from '@/api/profile';
 import PostSearch from '@/components/post/PostSearch';
 import { Category, Profile } from '@/types';

+interface SidebarProps {
+  isDesktopCollapsed: boolean;
+  onDesktopCollapsedChange: (nextValue: boolean) => void;
+}
+
 interface CategoryItemProps {
  category: Category;
  depth: number;
@@ -32,7 +39,7 @@ interface CategoryItemProps {

 const defaultProfile: Profile = {
  name: 'Dev Park',
-  bio: '개발자',
+  bio: '개발 기록과 실험을 모아두는 공간입니다.',
  imageUrl: 'https://api.dicebear.com/7.x/notionists/svg?seed=Felix',
  githubUrl: 'https://github.com',
  email: 'user@example.com',
@@ -68,7 +75,7 @@ function CategoryItem({ category, depth, onNavigate, pathname }: CategoryItemPro
        className={clsx(
          '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)]'
+            ? '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',
        )}
        style={{ marginLeft: `${depth * 8}px` }}
@@ -118,7 +125,10 @@ function CategoryItem({ category, depth, onNavigate, pathname }: CategoryItemPro
  );
 }

-function SidebarContent() {
+function SidebarContent({
+  isDesktopCollapsed,
+  onDesktopCollapsedChange,
+}: SidebarProps) {
  const [isOpen, setIsOpen] = useState(false);

  const pathname = usePathname();
@@ -140,6 +150,7 @@ function SidebarContent() {
  });

  const displayProfile = profile ? { ...defaultProfile, ...profile } : defaultProfile;
+  const decodedPathname = decodeURIComponent(pathname);

  const closeSidebar = () => setIsOpen(false);

@@ -155,6 +166,8 @@ function SidebarContent() {
    closeSidebar();
  };

+  const compactCategoryItems = sortedCategories?.slice(0, 8) ?? [];
+
  return (
    <>
      <button
@@ -178,19 +191,34 @@ 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 duration-300 ease-out',
-          isOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0',
+          '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',
+          isDesktopCollapsed ? 'md:w-20' : 'md:w-72',
+          isOpen ? 'translate-x-0' : '-translate-x-full',
        )}
      >
-        <div className="shrink-0 px-6 pb-5 pt-8 text-center">
-          <Link href="/" onClick={closeSidebar} className="block transition-opacity hover:opacity-80">
-            <div className="relative mx-auto mb-4 h-20 w-20 overflow-hidden rounded-full bg-black/[0.04] shadow-inner ring-1 ring-[var(--color-line)] dark:bg-white/10">
+        <div className={clsx('relative shrink-0 text-center', isDesktopCollapsed ? 'px-6 pb-5 pt-8 md:px-3 md:pb-4 md:pt-5' : 'px-6 pb-5 pt-8')}>
+          <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"
+            aria-label={isDesktopCollapsed ? '사이드바 펼치기' : '사이드바 접기'}
+          >
+            {isDesktopCollapsed ? <ChevronsRight size={16} /> : <ChevronsLeft size={16} />}
+          </button>
+
+          <Link href="/" onClick={closeSidebar} className="block transition-opacity hover:opacity-85">
+            <div
+              className={clsx(
+                'relative mx-auto overflow-hidden rounded-2xl bg-black/[0.04] shadow-inner ring-1 ring-[var(--color-line)] transition-all dark:bg-white/10',
+                isDesktopCollapsed ? 'mb-4 h-20 w-20 md:mb-0 md:mt-8 md:h-12 md:w-12' : 'mb-4 h-20 w-20',
+              )}
+            >
              {isProfileLoading ? (
                <div className="h-full w-full animate-pulse bg-black/[0.06] dark:bg-white/10" />
              ) : (
                <Image
                  src={displayProfile.imageUrl || defaultProfile.imageUrl!}
-                  alt="Profile"
+                  alt="프로필"
                  fill
                  sizes="96px"
                  className="object-cover"
@@ -200,22 +228,24 @@ function SidebarContent() {
              )}
            </div>

-            {isProfileLoading ? (
-              <div className="flex flex-col items-center space-y-2">
-                <div className="h-6 w-24 animate-pulse rounded bg-black/[0.06] dark:bg-white/10" />
-                <div className="h-4 w-32 animate-pulse rounded bg-black/[0.04] dark:bg-white/10" />
-              </div>
-            ) : (
-              <>
-                <h2 className="text-lg font-bold tracking-normal text-[var(--color-text)]">{displayProfile.name}</h2>
-                <p className="mt-1 whitespace-pre-line text-sm leading-relaxed text-[var(--color-text-muted)]">{displayProfile.bio}</p>
-              </>
-            )}
+            <div className={clsx(isDesktopCollapsed && 'md:hidden')}>
+              {isProfileLoading ? (
+                <div className="flex flex-col items-center space-y-2">
+                  <div className="h-6 w-24 animate-pulse rounded bg-black/[0.06] dark:bg-white/10" />
+                  <div className="h-4 w-32 animate-pulse rounded bg-black/[0.04] dark:bg-white/10" />
+                </div>
+              ) : (
+                <>
+                  <h2 className="text-lg font-bold tracking-normal text-[var(--color-text)]">{displayProfile.name}</h2>
+                  <p className="mt-1 whitespace-pre-line text-sm leading-relaxed text-[var(--color-text-muted)]">{displayProfile.bio}</p>
+                </>
+              )}
+            </div>
          </Link>
        </div>

        <nav className="flex min-h-0 flex-1 flex-col px-4 py-2">
-          <div className="flex h-full flex-col">
+          <div className={clsx('flex h-full flex-col', isDesktopCollapsed && 'md:hidden')}>
            <div className="shrink-0 space-y-1">
              <div id="blog-search" className="mb-5 mt-2 px-1">
                <PostSearch
@@ -225,26 +255,10 @@ function SidebarContent() {
                />
              </div>

-              <div className="mb-4">
-                <Link
-                  href="/archive"
-                  onClick={closeSidebar}
-                  className={clsx(
-                    'flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm transition-all',
-                    pathname === '/archive'
-                      ? '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',
-                  )}
-                >
-                  <Archive size={16} />
-                  <span>아카이브</span>
-                </Link>
-              </div>
-
              <div className="mb-4 border-t border-[var(--color-line)]" />

              <div className="mb-3 flex h-8 items-center justify-between px-3">
-                <p className="text-xs font-semibold uppercase text-[var(--color-text-subtle)]">카테고리</p>
+                <p className="text-xs font-semibold uppercase tracking-normal text-[var(--color-text-subtle)]">카테고리</p>
              </div>
            </div>

@@ -288,7 +302,7 @@ function SidebarContent() {

            <div className="-mx-2 mt-3 shrink-0 border-t border-[var(--color-line)] px-2 pt-3">
              <div className="mb-2 flex h-8 items-center px-3">
-                <p className="text-xs font-semibold uppercase text-[var(--color-text-subtle)]">기타</p>
+                <p className="text-xs font-semibold uppercase tracking-normal text-[var(--color-text-subtle)]">앱</p>
              </div>

              <Link
@@ -306,16 +320,83 @@ function SidebarContent() {
              </Link>
            </div>
          </div>
+
+          <div className={clsx('hidden flex-1 flex-col items-center gap-2 overflow-y-auto px-0 pb-4 pt-2 md:flex', !isDesktopCollapsed && 'md:hidden')}>
+            <Link
+              href="/"
+              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)]',
+                pathname === '/' && 'bg-[var(--window-bg-strong)] text-[var(--color-accent)]',
+              )}
+            >
+              <Home size={18} />
+            </Link>
+
+            <div className="my-1 h-px w-9 bg-[var(--color-line)]" />
+
+            {compactCategoryItems.map((category) => {
+              const isActive = decodedPathname === `/category/${category.name}`;
+
+              return (
+                <Link
+                  key={category.id}
+                  href={`/category/${category.name}`}
+                  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)]',
+                    isActive && 'bg-[var(--window-bg-strong)] text-[var(--color-accent)]',
+                  )}
+                >
+                  <Folder size={18} />
+                </Link>
+              );
+            })}
+
+            <Link
+              href="/category/uncategorized"
+              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)]',
+                pathname === '/category/uncategorized' && 'bg-[var(--window-bg-strong)] text-[var(--color-accent)]',
+              )}
+            >
+              <FileQuestion size={18} />
+            </Link>
+
+            <div className="my-1 h-px w-9 bg-[var(--color-line)]" />
+
+            <Link
+              href="/play/chess"
+              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)]',
+                pathname === '/play/chess' && 'bg-[var(--window-bg-strong)] text-[var(--color-accent)]',
+              )}
+            >
+              <Crown size={18} />
+            </Link>
+          </div>
        </nav>

-        <div className="shrink-0 border-t border-[var(--color-line)] bg-[var(--window-titlebar)] p-5">
-          <div className="flex justify-center gap-3">
+        <div
+          className={clsx(
+            'shrink-0 border-t border-[var(--color-line)] bg-[var(--window-titlebar)] p-5',
+            isDesktopCollapsed && 'md:px-3 md:py-4',
+          )}
+        >
+          <div className={clsx('flex justify-center gap-3', isDesktopCollapsed && 'md:flex-col md:items-center')}>
            <a
              href={displayProfile.githubUrl || '#'}
              target="_blank"
              rel="noreferrer"
              className="rounded-full border border-[var(--color-line)] bg-[var(--color-control)] p-2.5 text-[var(--color-text-muted)] shadow-[var(--shadow-control)] transition-all hover:bg-[var(--color-text)] hover:text-white dark:hover:bg-white dark:hover:text-black"
              aria-label="GitHub"
+              title="GitHub"
            >
              <Github size={18} />
            </a>
@@ -323,11 +404,12 @@ function SidebarContent() {
              href={`mailto:${displayProfile.email}`}
              className="rounded-full border border-[var(--color-line)] bg-[var(--color-control)] p-2.5 text-[var(--color-text-muted)] shadow-[var(--shadow-control)] transition-all hover:bg-[var(--color-accent)] hover:text-white"
              aria-label="이메일"
+              title="이메일"
            >
              <Mail size={18} />
            </a>
          </div>
-          <p className="mt-4 text-center text-[10px] font-light text-[var(--color-text-subtle)]">
+          <p className={clsx('mt-4 text-center text-[10px] font-light text-[var(--color-text-subtle)]', isDesktopCollapsed && 'md:hidden')}>
            © {new Date().getFullYear()} {displayProfile.name}
          </p>
        </div>
@@ -336,10 +418,19 @@ function SidebarContent() {
  );
 }

-export default function Sidebar() {
+export default function Sidebar(props: SidebarProps) {
  return (
-    <Suspense fallback={<div className="h-screen w-72 border-r border-[var(--window-border)] bg-[var(--sidebar-bg)]" />}>
-      <SidebarContent />
+    <Suspense
+      fallback={(
+        <div
+          className={clsx(
+            'h-screen border-r border-[var(--window-border)] bg-[var(--sidebar-bg)]',
+            props.isDesktopCollapsed ? 'w-20' : 'w-72',
+          )}
+        />
+      )}
+    >
+      <SidebarContent {...props} />
    </Suspense>
  );
 }
--- a/src/components/post/PostCard.tsx
+++ b/src/components/post/PostCard.tsx
@@ -41,7 +41,7 @@ export default function PostCard({ post }: { post: Post }) {
      <Surface
        as="article"
        interactive
-        className="flex h-full flex-col p-5 shadow-none"
+        className="flex h-full min-h-52 flex-col p-5 shadow-none"
      >
        <div className="mb-4 flex items-center justify-between gap-3">
          <StatusBadge tone={isNotice ? 'danger' : 'neutral'} className="shrink-0">
--- a/src/components/post/PostDetailClient.tsx
+++ b/src/components/post/PostDetailClient.tsx
@@ -65,7 +65,7 @@ export default function PostDetailClient({ slug, initialPost }: PostDetailClient
    const isAuthError = errorStatus === 401 || errorStatus === 403;

    return (
-      <WindowSurface className="mx-auto max-w-4xl" bodyClassName="px-4 py-20 text-center">
+      <WindowSurface className="mx-auto md:w-[70vw] md:max-w-[980px]" bodyClassName="px-4 py-20 text-center">
        <div className="mb-4 flex justify-center">
          <AlertCircle className="text-[var(--color-text-subtle)]" size={64} />
        </div>
@@ -90,13 +90,13 @@ export default function PostDetailClient({ slug, initialPost }: PostDetailClient
  const nextPost = post.nextPost;

  return (
-    <div className="mx-auto max-w-6xl px-1 py-4 md:px-3 md:py-6">
+    <div className="mx-auto w-full px-0 py-4 md:w-[78vw] md:max-w-[1280px] 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-6 xl:grid-cols-[minmax(0,780px)_220px] xl:justify-center xl:gap-8">
+      <div className="relative grid gap-6 xl:grid-cols-[minmax(0,900px)_250px] xl:justify-center xl:gap-8">
        <main className="min-w-0 space-y-6">
          <WindowSurface
            as="article"
--- a/src/components/ui/WindowSurface.tsx
+++ b/src/components/ui/WindowSurface.tsx
@@ -28,7 +28,7 @@ export default function WindowSurface({
  return (
    <Component
      className={clsx(
-        '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-2xl',
        className,
      )}
      {...props}