diff --git a/LOG.md b/LOG.md index c1bd707..f605ac1 100644 --- a/LOG.md +++ b/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. diff --git a/src/app/page.tsx b/src/app/page.tsx index 0a5eba4..269bdce 100644 --- a/src/app/page.tsx +++ b/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 ( - - {icon} - {label} - - {meta} - - - ); -} - export default async function Home({ searchParams }: HomePageProps) { const keyword = await getSearchKeyword(searchParams); @@ -325,8 +299,8 @@ export default async function Home({ searchParams }: HomePageProps) {

{SITE_NAME}

)} - bodyClassName="p-0" + bodyClassName="space-y-6 p-4 md:p-6" > -
- - -
-
-
-
- -
-
-

WYPark HD

-

- 최근 글 {latestList.length.toLocaleString()}개 · 인기 글 {popularList.length.toLocaleString()}개 -

-
-
- - {new Intl.DateTimeFormat('ko-KR', { dateStyle: 'medium' }).format(new Date())} - -
- - - -
- } - posts={latestList} - featured - /> - } - posts={popularList} - isPopular - /> -
+ + {new Intl.DateTimeFormat('ko-KR', { dateStyle: 'medium' }).format(new Date())} +
+ + + +
+ } + posts={latestList} + featured + /> + } + posts={popularList} + isPopular + /> +
); diff --git a/src/components/layout/DesktopMenuBar.tsx b/src/components/layout/DesktopMenuBar.tsx index 8ec6f62..5d2bacd 100644 --- a/src/components/layout/DesktopMenuBar.tsx +++ b/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(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 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 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 systemIconClass = 'text-[var(--color-text-muted)]'; return ( @@ -106,16 +89,7 @@ export default function DesktopMenuBar() { WYPark -
- {menuItems.map((item) => ( - - {item.label} - - ))} -
- - -
+
{getAppTitle(pathname)} @@ -124,10 +98,10 @@ export default function DesktopMenuBar() {
- + GitHub - + Email diff --git a/src/components/layout/DesktopShell.tsx b/src/components/layout/DesktopShell.tsx index cb3a3be..3e84037 100644 --- a/src/components/layout/DesktopShell.tsx +++ b/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 = { - 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 ( -
- {shortcuts.map((shortcut) => { - const Icon = shortcut.icon; - const toneClass = shortcutToneClass[shortcut.tone] ?? shortcutToneClass.blue; - - return ( - - - - - - {shortcut.label} - - {shortcut.caption} - - ); - })} -
- ); -} export default function DesktopShell({ children }: { children: ReactNode }) { const pathname = usePathname(); @@ -148,7 +49,6 @@ export default function DesktopShell({ children }: { children: ReactNode }) { onMobileOpenChange={setIsMobileSidebarOpen} /> - setIsMobileSidebarOpen(true)} /> diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx index ea25e23..8866d88 100644 --- a/src/components/layout/Sidebar.tsx +++ b/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({