diff --git a/LOG.md b/LOG.md index 6c62f8c..3bc0818 100644 --- a/LOG.md +++ b/LOG.md @@ -7,6 +7,7 @@ - Smoothed the desktop Dock hide/show interaction by separating hover-open, closing, and fully-collapsed states; the Dock now keeps the expanded hit area during the closing animation so re-entering mid-collapse reverses smoothly. - Changed the desktop Dock's default state to pinned/open and added distinct soft pastel tones to Dock buttons, including stronger visual treatment for pin/unpin and auth actions. - 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. - 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. @@ -14,6 +15,7 @@ - Validation: `npm run lint` passed and `npm run build` passed. In-app browser verification on a local `next start` server confirmed the desktop Dock starts as a small bottom tab, uses 560ms transitions for tab/panel geometry, and expands into the larger Dock hit area when opened. - Validation: `npm run lint` passed and `npm run build` passed. In-app browser verification on a local `next start` server confirmed the Dock opens by default and Home/Archive/Chess/Login/Signup/Pin buttons render distinct pastel colors. - 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. - 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 6bd7cf4..b7c820d 100644 --- a/src/components/layout/DesktopDock.tsx +++ b/src/components/layout/DesktopDock.tsx @@ -77,7 +77,7 @@ const createDockTone = ( }); const dockToneStyles: Record = { - home: createDockTone('rgba(232, 248, 239, 0.58)', 'rgba(220, 244, 232, 0.74)', 'rgba(211, 239, 224, 0.82)', 'rgba(65, 151, 106, 0.16)', 'rgba(65, 151, 106, 0.24)', '#5b8f72', '#377458', 'rgba(65, 151, 106, 0.16)'), + home: createDockTone('rgba(255, 255, 255, 0.78)', 'rgba(255, 255, 255, 0.92)', 'rgba(255, 255, 255, 0.98)', 'rgba(148, 163, 184, 0.16)', 'rgba(148, 163, 184, 0.26)', '#687386', '#334155', 'rgba(148, 163, 184, 0.18)'), archive: createDockTone('rgba(239, 235, 255, 0.56)', 'rgba(231, 226, 250, 0.72)', 'rgba(224, 217, 246, 0.8)', 'rgba(111, 92, 176, 0.15)', 'rgba(111, 92, 176, 0.23)', '#7a6d9f', '#5f5289', 'rgba(111, 92, 176, 0.15)'), chess: createDockTone('rgba(255, 247, 222, 0.62)', 'rgba(255, 240, 207, 0.78)', 'rgba(252, 234, 194, 0.84)', 'rgba(164, 122, 36, 0.16)', 'rgba(164, 122, 36, 0.24)', '#8a7a4b', '#6f5d2e', 'rgba(164, 122, 36, 0.15)'), admin: createDockTone('rgba(232, 244, 255, 0.6)', 'rgba(220, 238, 252, 0.76)', 'rgba(209, 232, 247, 0.84)', 'rgba(60, 129, 181, 0.16)', 'rgba(60, 129, 181, 0.25)', '#5f86a8', '#3d6f98', 'rgba(60, 129, 181, 0.15)'), @@ -105,6 +105,7 @@ export default function DesktopDock({ isSidebarCollapsed, onOpenMobileMenu }: De const dockZoneRef = useRef(null); const dockLeaveTimerRef = useRef(null); const dockCollapseTimerRef = useRef(null); + const pinToggleStartedByPointerRef = useRef(false); const isAdmin = _hasHydrated && isLoggedIn && role?.includes('ADMIN'); const isDockOpen = isPinned || isDockHovered || isDockFocused; const isDockRangeExpanded = isDockOpen || isDockClosing; @@ -168,14 +169,45 @@ export default function DesktopDock({ isSidebarCollapsed, onOpenMobileMenu }: De }, []); const handlePinnedChange = () => { - setIsPinned((previous) => { - const nextValue = !previous; - window.localStorage.setItem(DOCK_PINNED_STORAGE_KEY, String(nextValue)); - clearDockTimers(); + const nextValue = !isPinned; + const startedByPointer = pinToggleStartedByPointerRef.current; + const isPointerInsideDock = dockZoneRef.current?.matches(':hover') ?? false; + + pinToggleStartedByPointerRef.current = false; + window.localStorage.setItem(DOCK_PINNED_STORAGE_KEY, String(nextValue)); + clearDockTimers(); + setIsPinned(nextValue); + + if (nextValue) { setIsDockClosing(false); - setIsDockHovered(!nextValue); - return nextValue; - }); + setIsDockHovered(false); + return; + } + + if (startedByPointer) { + setIsDockFocused(false); + + if ( + document.activeElement instanceof HTMLElement && + dockZoneRef.current?.contains(document.activeElement) + ) { + document.activeElement.blur(); + } + } + + if (isPointerInsideDock) { + setIsDockClosing(false); + setIsDockHovered(true); + return; + } + + if (!isDockFocused || startedByPointer) { + startDockCollapse(); + return; + } + + setIsDockHovered(false); + setIsDockClosing(false); }; const handleDockZoneFocus = () => { @@ -462,6 +494,9 @@ export default function DesktopDock({ isSidebarCollapsed, onOpenMobileMenu }: De title={isPinned ? 'Dock 고정 해제' : 'Dock 고정'} aria-label={isPinned ? 'Dock 고정 해제' : 'Dock 고정'} aria-pressed={isPinned} + onPointerDown={() => { + pinToggleStartedByPointerRef.current = true; + }} 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)]',