From 3fe1b0e6d58a6f1dfd8959e6a2601fdb817a9633 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EC=9B=90=EC=97=BD?= Date: Tue, 2 Jun 2026 16:40:39 +0900 Subject: [PATCH] . --- LOG.md | 2 ++ src/components/layout/DesktopDock.tsx | 28 +++++++++++++-------------- 2 files changed, 16 insertions(+), 14 deletions(-) diff --git a/LOG.md b/LOG.md index 0ed2cab..fed43d4 100644 --- a/LOG.md +++ b/LOG.md @@ -9,6 +9,7 @@ - Softened the Dock button palette to quieter pastel tones and made the light-mode Dock bar read as a cleaner white glass surface. - Fixed the Dock pin toggle so mouse-based unpinning no longer leaves button focus holding the Dock open, and changed the Dock Home button to a white neutral tone. - Reworked the Dock material away from cute pastel tiles into a more macOS-like neutral frosted glass texture with translucent white glass buttons. +- Corrected the Dock button direction so only Home stays white, while the other actions keep subtle pastel tints with a translucent macOS-style glass material. - Rebalanced the home page around latest posts with popular posts as a supporting panel, converted the post detail page into a quieter reader surface, and hardened Markdown/code/table wrapping against mobile overflow. - Added a client-side archive explorer with year, month, category, and compact/comfort density controls over the existing server-fetched post list. - Rebuilt the chess page with safer viewport-aware board sizing, quieter puzzle panels, and enough layout clearance for the Dock. @@ -18,6 +19,7 @@ - Validation: `npm run lint` passed and `npm run build` passed. In-app browser verification on `http://localhost:3106/` confirmed the light-mode Dock bar renders as a cleaner white glass surface and the Dock button colors use quieter pastel tones. - Validation: `npm run lint` passed and `npm run build` passed. In-app browser verification on `http://localhost:3107/` confirmed the Dock Home button renders white and mouse-based unpinning collapses the Dock after the pointer leaves. - Validation: `npm run lint` passed and `npm run build` passed. In-app browser verification on `http://localhost:3108/` confirmed the Dock uses neutral translucent glass material, with non-home buttons rendering as subtle white glass rather than pastel color tiles. +- Validation: `npm run lint` passed and `npm run build` passed. In-app browser verification on `http://localhost:3109/` confirmed Home stays white while the other Dock buttons keep pastel-tinted translucent glass backgrounds with button-level blur. - Recommended next task: run a browser pass against a reachable backend API, especially one real post detail route and the populated chess puzzle board, then tune any remaining content-specific long-title or board-height edge cases. ## 2026-05-29 diff --git a/src/components/layout/DesktopDock.tsx b/src/components/layout/DesktopDock.tsx index 8815011..216e8bd 100644 --- a/src/components/layout/DesktopDock.tsx +++ b/src/components/layout/DesktopDock.tsx @@ -100,16 +100,16 @@ const homeDockTone = createDockTone( const dockToneStyles: Record = { home: homeDockTone, - archive: dockGlassTone, - chess: dockGlassTone, - admin: dockGlassTone, - write: dockGlassTone, - login: dockGlassTone, - signup: dockGlassTone, - logout: dockGlassTone, - pin: dockGlassTone, - menu: dockGlassTone, - more: dockGlassTone, + archive: createDockTone('rgba(222, 216, 255, 0.34)', 'rgba(222, 216, 255, 0.48)', 'rgba(222, 216, 255, 0.58)', 'rgba(255, 255, 255, 0.2)', 'rgba(151, 132, 214, 0.3)', '#6f668f', '#514274', 'rgba(151, 132, 214, 0.18)'), + chess: createDockTone('rgba(255, 229, 162, 0.34)', 'rgba(255, 229, 162, 0.48)', 'rgba(255, 229, 162, 0.58)', 'rgba(255, 255, 255, 0.22)', 'rgba(184, 134, 42, 0.3)', '#7b6d4a', '#665125', 'rgba(184, 134, 42, 0.17)'), + admin: createDockTone('rgba(192, 226, 255, 0.34)', 'rgba(192, 226, 255, 0.48)', 'rgba(192, 226, 255, 0.58)', 'rgba(255, 255, 255, 0.21)', 'rgba(81, 145, 195, 0.3)', '#627f96', '#3f6686', 'rgba(81, 145, 195, 0.17)'), + write: createDockTone('rgba(255, 209, 184, 0.34)', 'rgba(255, 209, 184, 0.48)', 'rgba(255, 209, 184, 0.58)', 'rgba(255, 255, 255, 0.22)', 'rgba(187, 106, 70, 0.3)', '#8c705f', '#724d38', 'rgba(187, 106, 70, 0.17)'), + login: createDockTone('rgba(190, 236, 238, 0.34)', 'rgba(190, 236, 238, 0.48)', 'rgba(190, 236, 238, 0.58)', 'rgba(255, 255, 255, 0.21)', 'rgba(68, 150, 158, 0.3)', '#63898c', '#446d72', 'rgba(68, 150, 158, 0.17)'), + signup: createDockTone('rgba(237, 207, 250, 0.34)', 'rgba(237, 207, 250, 0.48)', 'rgba(237, 207, 250, 0.58)', 'rgba(255, 255, 255, 0.21)', 'rgba(153, 91, 176, 0.3)', '#846c8e', '#684a78', 'rgba(153, 91, 176, 0.17)'), + logout: createDockTone('rgba(255, 207, 216, 0.34)', 'rgba(255, 207, 216, 0.48)', 'rgba(255, 207, 216, 0.58)', 'rgba(255, 255, 255, 0.22)', 'rgba(188, 84, 99, 0.3)', '#8f6970', '#714850', 'rgba(188, 84, 99, 0.17)'), + pin: createDockTone('rgba(255, 219, 170, 0.36)', 'rgba(255, 219, 170, 0.5)', 'rgba(255, 219, 170, 0.6)', 'rgba(255, 255, 255, 0.22)', 'rgba(184, 118, 44, 0.32)', '#8a704e', '#6b4f2d', 'rgba(184, 118, 44, 0.18)'), + menu: createDockTone('rgba(213, 234, 203, 0.34)', 'rgba(213, 234, 203, 0.48)', 'rgba(213, 234, 203, 0.58)', 'rgba(255, 255, 255, 0.21)', 'rgba(98, 143, 80, 0.3)', '#6f8366', '#526f44', 'rgba(98, 143, 80, 0.17)'), + more: createDockTone('rgba(210, 228, 255, 0.34)', 'rgba(210, 228, 255, 0.48)', 'rgba(210, 228, 255, 0.58)', 'rgba(255, 255, 255, 0.21)', 'rgba(86, 126, 183, 0.3)', '#6d7f98', '#4f688d', 'rgba(86, 126, 183, 0.17)'), default: dockGlassTone, }; @@ -361,7 +361,7 @@ export default function DesktopDock({ isSidebarCollapsed, onOpenMobileMenu }: De const active = item.isActive?.(pathname) ?? false; const toneStyle = getDockToneStyle(item.key); const itemClass = clsx( - 'group/item relative flex h-12 w-12 items-center justify-center rounded-lg border border-[var(--dock-item-border)] bg-[var(--dock-item-bg)] text-[var(--dock-item-fg)] shadow-[var(--shadow-control)] transition duration-150 hover:-translate-y-1 hover:border-[var(--dock-item-border-hover)] hover:bg-[var(--dock-item-bg-hover)] hover:text-[var(--dock-item-fg-strong)] focus-visible:-translate-y-1', + 'group/item relative flex h-12 w-12 items-center justify-center rounded-lg border border-[var(--dock-item-border)] bg-[var(--dock-item-bg)] text-[var(--dock-item-fg)] shadow-[var(--shadow-control)] backdrop-blur-[18px] transition duration-150 hover:-translate-y-1 hover:border-[var(--dock-item-border-hover)] hover:bg-[var(--dock-item-bg-hover)] hover:text-[var(--dock-item-fg-strong)] focus-visible:-translate-y-1', active && 'border-[var(--dock-item-border-hover)] bg-[var(--dock-item-bg-active)] text-[var(--dock-item-fg-strong)] ring-1 ring-[var(--dock-item-ring)]', ); @@ -413,7 +413,7 @@ export default function DesktopDock({ isSidebarCollapsed, onOpenMobileMenu }: De const active = activeOverride ?? item.isActive?.(pathname) ?? false; const toneStyle = getDockToneStyle(item.key); const itemClass = clsx( - 'flex h-12 min-w-0 flex-1 flex-col items-center justify-center gap-0.5 rounded-lg border border-[var(--dock-item-border)] bg-[var(--dock-item-bg)] px-1 text-[10px] font-semibold leading-none text-[var(--dock-item-fg)] shadow-[var(--shadow-control)] transition-colors', + 'flex h-12 min-w-0 flex-1 flex-col items-center justify-center gap-0.5 rounded-lg border border-[var(--dock-item-border)] bg-[var(--dock-item-bg)] px-1 text-[10px] font-semibold leading-none text-[var(--dock-item-fg)] shadow-[var(--shadow-control)] backdrop-blur-[18px] transition-colors', 'hover:border-[var(--dock-item-border-hover)] hover:bg-[var(--dock-item-bg-hover)] hover:text-[var(--dock-item-fg-strong)] focus-visible:bg-[var(--dock-item-bg-active)]', active && 'border-[var(--dock-item-border-hover)] bg-[var(--dock-item-bg-active)] text-[var(--dock-item-fg-strong)] ring-1 ring-[var(--dock-item-ring)]', ); @@ -521,7 +521,7 @@ export default function DesktopDock({ isSidebarCollapsed, onOpenMobileMenu }: De }} onClick={handlePinnedChange} className={clsx( - 'group/item relative ml-1 flex h-12 w-12 items-center justify-center rounded-lg border border-[var(--dock-item-border-hover)] bg-[var(--dock-item-bg-active)] text-[var(--dock-item-fg-strong)] shadow-[var(--shadow-control)] ring-1 ring-[var(--dock-item-ring)] transition duration-150 hover:-translate-y-1 hover:bg-[var(--dock-item-bg-hover)]', + 'group/item relative ml-1 flex h-12 w-12 items-center justify-center rounded-lg border border-[var(--dock-item-border-hover)] bg-[var(--dock-item-bg-active)] text-[var(--dock-item-fg-strong)] shadow-[var(--shadow-control)] ring-1 ring-[var(--dock-item-ring)] backdrop-blur-[18px] transition duration-150 hover:-translate-y-1 hover:bg-[var(--dock-item-bg-hover)]', isPinned && 'shadow-[var(--shadow-dock)]', )} style={getDockToneStyle('pin')} @@ -550,7 +550,7 @@ export default function DesktopDock({ isSidebarCollapsed, onOpenMobileMenu }: De const active = item.isActive?.(pathname) ?? false; const toneStyle = getDockToneStyle(item.key); const className = clsx( - 'inline-flex h-10 min-w-0 items-center justify-center gap-2 rounded-lg border border-[var(--dock-item-border)] bg-[var(--dock-item-bg)] px-3 text-sm font-semibold text-[var(--dock-item-fg)] shadow-[var(--shadow-control)] transition-colors hover:border-[var(--dock-item-border-hover)] hover:bg-[var(--dock-item-bg-hover)] hover:text-[var(--dock-item-fg-strong)]', + 'inline-flex h-10 min-w-0 items-center justify-center gap-2 rounded-lg border border-[var(--dock-item-border)] bg-[var(--dock-item-bg)] px-3 text-sm font-semibold text-[var(--dock-item-fg)] shadow-[var(--shadow-control)] backdrop-blur-[18px] transition-colors hover:border-[var(--dock-item-border-hover)] hover:bg-[var(--dock-item-bg-hover)] hover:text-[var(--dock-item-fg-strong)]', active && 'border-[var(--dock-item-border-hover)] bg-[var(--dock-item-bg-active)] text-[var(--dock-item-fg-strong)] ring-1 ring-[var(--dock-item-ring)]', );