Simplify macOS layout structure

LOG.md

@@ -1,5 +1,13 @@
 # Work Log
 
+## 2026-06-07
+
+- Simplified the macOS-inspired layout by removing duplicated navigation surfaces: the desktop shortcut icon layer, the home page's inner Finder sidebar, and app navigation links from the system menu bar.
+- Reworked the global sidebar into a cleaner library panel focused on profile, search, and categories, with a quieter compact profile row and no duplicated app shortcuts.
+- Kept app-level movement in the Dock, category/search movement in the sidebar, and current-context/status information in the menu bar so each shell area has a clearer role.
+- Validation: `npm run lint` passed and `npm run build` passed. In-app browser verification on `http://localhost:3112/` confirmed no horizontal overflow, no desktop shortcut duplicates, the simplified home window, the Korean sidebar header, and no browser console warnings/errors. The local backend remained unavailable, so the home page showed empty post states.
+- Recommended next task: test the simplified sidebar with real production categories and long category names, then tune category row spacing if the populated tree feels too dense.
+
 ## 2026-06-06
 
 - Reworked the macOS-inspired shell into a fuller desktop illusion: full-width system menu bar, floating Finder-style sidebar window, viewport-centered Dock, desktop wallpaper layers, and desktop shortcut icons for major destinations.

src/app/page.tsx

@@ -6,7 +6,6 @@ import {
   ChevronRight,
   Clock,
   FileText,
-  FolderOpen,
   HardDrive,
   Search,
   TrendingUp,
@@ -273,31 +272,6 @@ function PostListPanel({
   );
 }
 
-function FinderLocation({
-  href,
-  icon,
-  label,
-  meta,
-}: {
-  href: string;
-  icon: ReactNode;
-  label: string;
-  meta: string;
-}) {
-  return (
-    <Link
-      href={href}
-      className="group flex min-w-0 items-center gap-2 rounded-lg px-2.5 py-2 text-sm font-semibold text-[var(--color-text-muted)] transition hover:bg-[var(--card-bg-strong)] hover:text-[var(--color-text)]"
-    >
-      <span className="shrink-0 text-[var(--color-accent)]">{icon}</span>
-      <span className="min-w-0 flex-1 truncate">{label}</span>
-      <span className="shrink-0 text-xs font-medium tabular-nums text-[var(--color-text-subtle)] group-hover:text-[var(--color-text-muted)]">
-        {meta}
-      </span>
-    </Link>
-  );
-}
-
 export default async function Home({ searchParams }: HomePageProps) {
   const keyword = await getSearchKeyword(searchParams);
 
@@ -325,8 +299,8 @@ export default async function Home({ searchParams }: HomePageProps) {
     <main className="mx-auto min-w-0 max-w-[1180px] px-0 py-3 md:py-6">
       <h1 className="sr-only">{SITE_NAME}</h1>
       <WindowSurface
-        title="Finder"
+        title="WYPark"
-        subtitle="WYPark.local"
+        subtitle="블로그 라이브러리"
         controls={(
           <Link
             href="/archive"
@@ -336,66 +310,17 @@ export default async function Home({ searchParams }: HomePageProps) {
             <Archive size={14} />
           </Link>
         )}
-        bodyClassName="p-0"
+        bodyClassName="space-y-6 p-4 md:p-6"
       >
-        <div className="grid min-w-0 lg:grid-cols-[14rem_minmax(0,1fr)]">
-          <aside className="hidden min-w-0 border-r border-[var(--color-line)] bg-[var(--window-titlebar)] p-4 lg:block">
-            <div className="mb-4 flex items-center gap-2 px-2 text-xs font-bold uppercase tracking-normal text-[var(--color-text-subtle)]">
-              <HardDrive size={14} />
-              위치
-            </div>
-            <nav className="space-y-1" aria-label="Finder 위치">
-              <FinderLocation
-                href="/"
-                icon={<FolderOpen size={16} />}
-                label="최근 글"
-                meta={latestList.length.toString()}
-              />
-              <FinderLocation
-                href="/archive"
-                icon={<Archive size={16} />}
-                label="아카이브"
-                meta="All"
-              />
-              <FinderLocation
-                href="/play/chess"
-                icon={<TrendingUp size={16} />}
-                label="체스"
-                meta="App"
-              />
-            </nav>
-
-            <div className="mt-7 border-t border-[var(--color-line)] pt-4">
-              <div className="mb-3 px-2 text-xs font-bold uppercase tracking-normal text-[var(--color-text-subtle)]">
-                스마트 폴더
-              </div>
-              <div className="space-y-1">
-                <FinderLocation
-                  href="/"
-                  icon={<Clock size={16} />}
-                  label="오늘의 기록"
-                  meta={notices.length.toString()}
-                />
-                <FinderLocation
-                  href="/archive"
-                  icon={<FileText size={16} />}
-                  label="모든 문서"
-                  meta="Blog"
-                />
-              </div>
-            </div>
-          </aside>
-
-          <div className="min-w-0 space-y-6 p-4 md:p-6">
         <div className="flex min-w-0 flex-col justify-between gap-3 rounded-lg border border-[var(--card-border)] bg-[var(--card-bg)] px-4 py-3 md:flex-row md:items-center">
           <div className="flex min-w-0 items-center gap-3">
             <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border border-[var(--card-border)] bg-[var(--card-bg-strong)] text-[var(--color-accent)] shadow-[var(--shadow-control)]">
               <HardDrive size={20} />
             </div>
             <div className="min-w-0">
-                  <p className="truncate text-sm font-bold text-[var(--color-text)]">WYPark HD</p>
+              <p className="truncate text-sm font-bold text-[var(--color-text)]">최근 기록</p>
               <p className="truncate text-xs text-[var(--color-text-subtle)]">
-                    최근 글 {latestList.length.toLocaleString()}개 · 인기 글 {popularList.length.toLocaleString()}개
+                최신 글 {latestList.length.toLocaleString()}개 · 인기 글 {popularList.length.toLocaleString()}개
               </p>
             </div>
           </div>
@@ -420,8 +345,6 @@ export default async function Home({ searchParams }: HomePageProps) {
             isPopular
           />
         </section>
-          </div>
-        </div>
       </WindowSurface>
     </main>
   );

src/components/layout/DesktopMenuBar.tsx

@@ -1,14 +1,12 @@
 'use client';
 
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useState } from 'react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { useQuery } from '@tanstack/react-query';
-import { clsx } from 'clsx';
 import { BatteryMedium, ChevronRight, Command, Monitor, Search, Wifi } from 'lucide-react';
 import { getProfile } from '@/api/profile';
 import ThemeToggle from '@/components/theme/ThemeToggle';
-import { useAuthStore } from '@/store/authStore';
 
 const defaultProfile = {
   githubUrl: 'https://github.com',
@@ -51,7 +49,6 @@ const formatMenuTime = (date: Date | null) => {
 
 export default function DesktopMenuBar() {
   const pathname = usePathname();
-  const { isLoggedIn, role, _hasHydrated } = useAuthStore();
   const [now, setNow] = useState<Date | null>(null);
 
   const { data: profile } = useQuery({
@@ -73,21 +70,7 @@ export default function DesktopMenuBar() {
 
   const githubUrl = profile?.githubUrl || defaultProfile.githubUrl;
   const email = profile?.email || defaultProfile.email;
-  const isAdmin = _hasHydrated && isLoggedIn && role?.includes('ADMIN');
+  const menuLinkClass = 'hidden rounded px-2 py-1 text-xs font-semibold text-[var(--color-text-muted)] transition hover:bg-[var(--card-bg)] hover:text-[var(--color-text)] xl:inline-flex';
-  const menuItems = useMemo(() => {
-    const items = [
-      { href: '/', label: '홈' },
-      { href: '/archive', label: '아카이브' },
-      { href: '/play/chess', label: '체스' },
-    ];
-
-    if (isAdmin) {
-      items.push({ href: '/admin', label: '관리자' }, { href: '/admin/posts/new', label: '새 글' });
-    }
-
-    return items;
-  }, [isAdmin]);
-  const menuLinkClass = 'hidden rounded px-2 py-1 text-xs font-semibold text-[var(--color-text-muted)] transition hover:bg-[var(--card-bg)] hover:text-[var(--color-text)] lg:inline-flex';
   const systemIconClass = 'text-[var(--color-text-muted)]';
 
   return (
@@ -106,16 +89,7 @@ export default function DesktopMenuBar() {
             WYPark
           </Link>
 
-          <div className="hidden min-w-0 items-center gap-1 sm:flex">
+          <div className="hidden min-w-0 items-center gap-1.5 rounded px-2 py-1 text-xs font-semibold text-[var(--color-text-subtle)] sm:flex">
-            {menuItems.map((item) => (
-              <Link key={item.href} href={item.href} className={menuLinkClass}>
-                {item.label}
-              </Link>
-            ))}
-          </div>
-
-          <span className="mx-1 hidden h-4 w-px bg-[var(--color-line)] xl:block" />
-          <div className="hidden min-w-0 items-center gap-1.5 rounded px-2 py-1 text-xs font-semibold text-[var(--color-text-subtle)] xl:flex">
             <Monitor size={14} />
             <span className="truncate text-[var(--color-text-muted)]">{getAppTitle(pathname)}</span>
             <ChevronRight size={13} />
@@ -124,10 +98,10 @@ export default function DesktopMenuBar() {
         </div>
 
         <div className="flex shrink-0 items-center gap-2">
-          <a href={githubUrl} target="_blank" rel="noreferrer" className={clsx(menuLinkClass, 'hidden xl:inline-flex')}>
+          <a href={githubUrl} target="_blank" rel="noreferrer" className={menuLinkClass}>
             GitHub
           </a>
-          <a href={`mailto:${email}`} className={clsx(menuLinkClass, 'hidden xl:inline-flex')}>
+          <a href={`mailto:${email}`} className={menuLinkClass}>
             Email
           </a>
           <Search size={15} className={systemIconClass} />

src/components/layout/DesktopShell.tsx

@@ -2,110 +2,11 @@
 
 import { useEffect, useState } from 'react';
 import type { ReactNode } from 'react';
-import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { clsx } from 'clsx';
-import type { LucideIcon } from 'lucide-react';
-import { Archive, Crown, Home, PenLine, Settings } from 'lucide-react';
 import DesktopDock from '@/components/layout/DesktopDock';
 import DesktopMenuBar from '@/components/layout/DesktopMenuBar';
 import Sidebar from '@/components/layout/Sidebar';
-import { useAuthStore } from '@/store/authStore';
-
-type DesktopShortcut = {
-  href: string;
-  label: string;
-  caption: string;
-  icon: LucideIcon;
-  tone: string;
-};
-
-const shortcutToneClass: Record<string, string> = {
-  blue: 'from-sky-300/70 to-blue-500/80 text-white',
-  violet: 'from-violet-300/70 to-indigo-500/80 text-white',
-  amber: 'from-amber-200/80 to-orange-400/80 text-white',
-  slate: 'from-slate-200/75 to-slate-500/75 text-white',
-  rose: 'from-rose-200/80 to-rose-500/75 text-white',
-};
-
-function DesktopShortcuts() {
-  const { isLoggedIn, role, _hasHydrated } = useAuthStore();
-  const isAdmin = _hasHydrated && isLoggedIn && role?.includes('ADMIN');
-
-  const shortcuts: DesktopShortcut[] = [
-    {
-      href: '/',
-      label: 'WYPark',
-      caption: 'Home',
-      icon: Home,
-      tone: 'blue',
-    },
-    {
-      href: '/archive',
-      label: 'Archive',
-      caption: 'Posts',
-      icon: Archive,
-      tone: 'violet',
-    },
-    {
-      href: '/play/chess',
-      label: 'Chess',
-      caption: 'Puzzle',
-      icon: Crown,
-      tone: 'amber',
-    },
-  ];
-
-  if (isAdmin) {
-    shortcuts.push(
-      {
-        href: '/admin',
-        label: 'Console',
-        caption: 'Admin',
-        icon: Settings,
-        tone: 'slate',
-      },
-      {
-        href: '/admin/posts/new',
-        label: 'Write',
-        caption: 'Editor',
-        icon: PenLine,
-        tone: 'rose',
-      },
-    );
-  }
-
-  return (
-    <div className="pointer-events-none fixed right-5 top-16 z-30 hidden w-24 flex-col gap-4 2xl:flex">
-      {shortcuts.map((shortcut) => {
-        const Icon = shortcut.icon;
-        const toneClass = shortcutToneClass[shortcut.tone] ?? shortcutToneClass.blue;
-
-        return (
-          <Link
-            key={shortcut.href}
-            href={shortcut.href}
-            className="pointer-events-auto group flex min-w-0 flex-col items-center gap-1.5 rounded-lg px-1.5 py-2 text-center text-[var(--color-text)] outline-none transition hover:bg-[var(--desktop-icon-bg-hover)] focus-visible:bg-[var(--desktop-icon-bg-hover)]"
-            title={shortcut.label}
-          >
-            <span
-              className={clsx(
-                'flex h-12 w-12 items-center justify-center rounded-xl border border-[var(--desktop-icon-border)] bg-gradient-to-br shadow-[var(--shadow-control)] ring-1 ring-white/20 transition group-hover:-translate-y-0.5',
-                toneClass,
-              )}
-            >
-              <Icon size={23} strokeWidth={2.15} />
-            </span>
-            <span className="w-full truncate rounded bg-black/10 px-1 text-[11px] font-semibold leading-4 text-white shadow-sm backdrop-blur-sm dark:bg-black/30">
-              {shortcut.label}
-            </span>
-            <span className="sr-only">{shortcut.caption}</span>
-          </Link>
-        );
-      })}
-    </div>
-  );
-}
 
 export default function DesktopShell({ children }: { children: ReactNode }) {
   const pathname = usePathname();
@@ -148,7 +49,6 @@ export default function DesktopShell({ children }: { children: ReactNode }) {
         onMobileOpenChange={setIsMobileSidebarOpen}
       />
       <DesktopMenuBar />
-      <DesktopShortcuts />
       <DesktopDock
         onOpenMobileMenu={() => setIsMobileSidebarOpen(true)}
       />

src/components/layout/Sidebar.tsx

@@ -10,11 +10,9 @@ import {
   ChevronRight,
   ChevronsLeft,
   ChevronsRight,
-  Crown,
   FileQuestion,
   Folder,
   FolderOpen,
-  Home,
 } from 'lucide-react';
 import { getCategories } from '@/api/category';
 import { getProfile } from '@/api/profile';
@@ -180,39 +178,40 @@ function SidebarContent({
 
       <aside
         className={clsx(
-          'fixed left-0 top-0 z-[60] flex h-screen w-72 max-w-[calc(100vw-1.5rem)] 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:left-3 md:top-12 md:z-40 md:h-[calc(100vh-8rem)] md:max-w-none md:translate-x-0 md:rounded-lg md:border',
+          'fixed left-0 top-0 z-[60] flex h-screen w-72 max-w-[calc(100vw-1.5rem)] 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:left-4 md:top-14 md:z-40 md:h-[calc(100vh-9rem)] md:max-w-none md:translate-x-0 md:rounded-lg md:border',
-          isDesktopCollapsed ? 'md:w-20' : 'md:w-72',
+          isDesktopCollapsed ? 'md:w-[4.5rem]' : 'md:w-72',
           isMobileOpen ? 'translate-x-0' : '-translate-x-full',
         )}
       >
-        <div className="flex h-11 shrink-0 items-center justify-between gap-3 border-b border-[var(--window-titlebar-border)] bg-[var(--window-titlebar)] px-4">
+        <div className="flex h-12 shrink-0 items-center justify-between gap-3 border-b border-[var(--window-titlebar-border)] bg-[var(--window-titlebar)] px-4">
-          <div className={clsx('flex min-w-0 items-center gap-3', isDesktopCollapsed && 'md:hidden')}>
+          <div className={clsx('min-w-0', isDesktopCollapsed && 'md:hidden')}>
-            <div className="flex shrink-0 items-center gap-1.5" aria-hidden="true">
+            <p className="truncate text-sm font-bold text-[var(--color-text)]">라이브러리</p>
-              <span className="h-3 w-3 rounded-full border border-black/10 bg-[#ff5f57]" />
+            <p className="truncate text-[11px] font-medium text-[var(--color-text-subtle)]">검색과 카테고리</p>
-              <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>
-            <span className={clsx('truncate text-sm font-semibold text-[var(--color-text)]', isDesktopCollapsed && 'md:hidden')}>
-              Finder
-            </span>
           </div>
 
           <button
             type="button"
             onClick={() => onDesktopCollapsedChange(!isDesktopCollapsed)}
-            className="hidden h-7 w-7 shrink-0 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"
+            className="hidden h-8 w-8 shrink-0 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 hover:bg-[var(--card-bg-strong)] hover:text-[var(--color-text)] md:flex"
             aria-label={isDesktopCollapsed ? '사이드바 펼치기' : '사이드바 접기'}
           >
             {isDesktopCollapsed ? <ChevronsRight size={16} /> : <ChevronsLeft size={16} />}
           </button>
         </div>
 
-        <div className={clsx('relative shrink-0 text-center', isDesktopCollapsed ? 'px-6 pb-5 pt-6 md:px-3 md:pb-4 md:pt-4' : 'px-6 pb-5 pt-6')}>
+        <div className={clsx('relative shrink-0', isDesktopCollapsed ? 'px-5 pb-4 pt-5 md:px-3 md:pb-3 md:pt-4' : 'px-5 pb-4 pt-5')}>
-          <Link href="/" onClick={closeSidebar} className="block transition-opacity hover:opacity-85">
+          <Link
+            href="/"
+            onClick={closeSidebar}
+            className={clsx(
+              'flex min-w-0 items-center gap-3 rounded-lg border border-[var(--card-border)] bg-[var(--card-bg)] p-3 transition hover:bg-[var(--card-bg-strong)]',
+              isDesktopCollapsed && 'md:justify-center md:border-transparent md:bg-transparent md:p-0 md:hover:bg-transparent',
+            )}
+          >
             <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',
+                'relative shrink-0 overflow-hidden rounded-lg 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:h-12 md:w-12' : 'mb-4 h-20 w-20',
+                isDesktopCollapsed ? 'h-12 w-12' : 'h-12 w-12',
               )}
             >
               {isProfileLoading ? (
@@ -230,16 +229,16 @@ function SidebarContent({
               )}
             </div>
 
-            <div className={clsx(isDesktopCollapsed && 'md:hidden')}>
+            <div className={clsx('min-w-0 text-left', isDesktopCollapsed && 'md:hidden')}>
               {isProfileLoading ? (
-                <div className="flex flex-col items-center space-y-2">
+                <div className="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>
+                  <h2 className="truncate text-sm 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>
+                  <p className="mt-0.5 line-clamp-2 whitespace-pre-line text-xs leading-5 text-[var(--color-text-muted)]">{displayProfile.bio}</p>
                 </>
               )}
             </div>
@@ -260,7 +259,7 @@ function SidebarContent({
               <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 tracking-normal text-[var(--color-text-subtle)]">폴더</p>
+                <p className="text-xs font-semibold uppercase tracking-normal text-[var(--color-text-subtle)]">카테고리</p>
               </div>
             </div>
 
@@ -302,42 +301,9 @@ function SidebarContent({
               </div>
             </div>
 
-            <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 tracking-normal text-[var(--color-text-subtle)]">응용 프로그램</p>
-              </div>
-
-              <Link
-                href="/play/chess"
-                onClick={closeSidebar}
-                className={clsx(
-                  '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-[var(--card-bg)] hover:text-[var(--color-text)]',
-                )}
-              >
-                <Crown size={16} />
-                <span>체스</span>
-              </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(--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(--card-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}`;
 
@@ -368,20 +334,6 @@ function SidebarContent({
             >
               <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(--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(--card-bg-strong)] text-[var(--color-accent)]',
-              )}
-            >
-              <Crown size={18} />
-            </Link>
           </div>
         </nav>