pwy9679/blog-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

.
All checks were successful
Deploy blog-frontend / build-and-deploy (push) Successful in 2m7s
Details

Browse Source
This commit is contained in:
박원엽
2026-06-02 15:07:00 +09:00
parent a56e95e6de
commit 895b19d284
3 changed files with 16 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
LOG.md
View File

@@ -6,12 +6,14 @@
- Reworked the Dock so mobile uses it as the primary navigation hub, while desktop keeps a folded Dock that expands on hover/focus and includes a pin toggle. - Reworked the Dock so mobile uses it as the primary navigation hub, while desktop keeps a folded Dock that expands on hover/focus and includes a pin toggle.
- 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. - 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. - 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.
- 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. - 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. - 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. - Rebuilt the chess page with safer viewport-aware board sizing, quieter puzzle panels, and enough layout clearance for the Dock.
- Validation: `npm run lint` passed and `npm run build` passed. In-app browser verification on a local `next start` server confirmed no horizontal overflow on `/`, `/archive`, and `/play/chess` at mobile width, mobile Dock-centered navigation opens the sidebar panel without overflow, desktop CSS loads, the mobile Dock is hidden on desktop, and the desktop Dock starts folded with a pin control. The live chess board itself could not be verified because the local backend chess API was unavailable, so `/play/chess` rendered the error state. - Validation: `npm run lint` passed and `npm run build` passed. In-app browser verification on a local `next start` server confirmed no horizontal overflow on `/`, `/archive`, and `/play/chess` at mobile width, mobile Dock-centered navigation opens the sidebar panel without overflow, desktop CSS loads, the mobile Dock is hidden on desktop, and the desktop Dock starts folded with a pin control. The live chess board itself could not be verified because the local backend chess API was unavailable, so `/play/chess` rendered the error state.
- 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 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 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.
- 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. - 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 ## 2026-05-29

4
src/app/globals.css
View File

@@ -42,8 +42,8 @@
--control-border: rgba(39, 54, 82, 0.12); --control-border: rgba(39, 54, 82, 0.12);
--menubar-bg: rgba(255, 255, 255, 0.5); --menubar-bg: rgba(255, 255, 255, 0.5);
--menubar-border: rgba(255, 255, 255, 0.7); --menubar-border: rgba(255, 255, 255, 0.7);
--dock-bg: rgba(255, 255, 255, 0.54); --dock-bg: rgba(255, 255, 255, 0.86);
--dock-border: rgba(255, 255, 255, 0.72); --dock-border: rgba(255, 255, 255, 0.92);
--sidebar-bg: rgba(255, 255, 255, 0.48); --sidebar-bg: rgba(255, 255, 255, 0.48);
--sidebar-border: rgba(255, 255, 255, 0.6); --sidebar-border: rgba(255, 255, 255, 0.6);
--color-surface: var(--card-bg); --color-surface: var(--card-bg);

24
src/components/layout/DesktopDock.tsx
View File

@@ -77,18 +77,18 @@ const createDockTone = (
}); });
const dockToneStyles: Record<string, DockToneStyle> = { const dockToneStyles: Record<string, DockToneStyle> = {
home: createDockTone('rgba(215, 246, 231, 0.78)', 'rgba(197, 238, 219, 0.92)', 'rgba(183, 231, 208, 0.96)', 'rgba(66, 178, 126, 0.28)', 'rgba(45, 153, 102, 0.44)', '#287653', '#135c3c', 'rgba(45, 153, 102, 0.26)'), 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)'),
archive: createDockTone('rgba(230, 224, 255, 0.78)', 'rgba(218, 210, 250, 0.92)', 'rgba(207, 196, 246, 0.96)', 'rgba(126, 100, 214, 0.28)', 'rgba(105, 78, 190, 0.44)', '#63509b', '#4f3d86', 'rgba(105, 78, 190, 0.24)'), 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, 239, 190, 0.82)', 'rgba(255, 231, 161, 0.94)', 'rgba(250, 220, 133, 0.96)', 'rgba(195, 145, 34, 0.28)', 'rgba(170, 119, 18, 0.42)', '#7a5a12', '#654706', 'rgba(170, 119, 18, 0.24)'), 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(211, 236, 255, 0.8)', 'rgba(190, 226, 252, 0.94)', 'rgba(173, 215, 247, 0.96)', 'rgba(62, 145, 205, 0.3)', 'rgba(36, 119, 181, 0.46)', '#2c6f9d', '#155a86', 'rgba(36, 119, 181, 0.25)'), 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)'),
write: createDockTone('rgba(255, 225, 207, 0.82)', 'rgba(255, 212, 189, 0.94)', 'rgba(250, 198, 169, 0.96)', 'rgba(205, 110, 68, 0.3)', 'rgba(181, 88, 48, 0.44)', '#995333', '#7d3e20', 'rgba(181, 88, 48, 0.24)'), write: createDockTone('rgba(255, 239, 229, 0.62)', 'rgba(255, 230, 215, 0.78)', 'rgba(251, 221, 203, 0.84)', 'rgba(177, 94, 58, 0.16)', 'rgba(177, 94, 58, 0.24)', '#9a755f', '#7e5843', 'rgba(177, 94, 58, 0.15)'),
login: createDockTone('rgba(211, 244, 246, 0.8)', 'rgba(190, 234, 238, 0.94)', 'rgba(170, 225, 230, 0.96)', 'rgba(53, 163, 172, 0.3)', 'rgba(28, 136, 146, 0.45)', '#237984', '#12626c', 'rgba(28, 136, 146, 0.24)'), login: createDockTone('rgba(230, 248, 249, 0.58)', 'rgba(218, 241, 244, 0.74)', 'rgba(205, 235, 239, 0.82)', 'rgba(47, 139, 148, 0.16)', 'rgba(47, 139, 148, 0.24)', '#5f9298', '#3d7880', 'rgba(47, 139, 148, 0.15)'),
signup: createDockTone('rgba(245, 223, 255, 0.8)', 'rgba(238, 207, 252, 0.94)', 'rgba(228, 190, 244, 0.96)', 'rgba(166, 93, 191, 0.3)', 'rgba(139, 68, 166, 0.44)', '#814b93', '#6b347f', 'rgba(139, 68, 166, 0.24)'), signup: createDockTone('rgba(249, 235, 255, 0.58)', 'rgba(243, 225, 251, 0.74)', 'rgba(236, 216, 246, 0.82)', 'rgba(139, 75, 160, 0.16)', 'rgba(139, 75, 160, 0.24)', '#94739f', '#795586', 'rgba(139, 75, 160, 0.15)'),
logout: createDockTone('rgba(255, 224, 229, 0.82)', 'rgba(255, 207, 216, 0.94)', 'rgba(250, 190, 202, 0.96)', 'rgba(204, 82, 98, 0.3)', 'rgba(179, 58, 76, 0.46)', '#9b4250', '#81303d', 'rgba(179, 58, 76, 0.24)'), logout: createDockTone('rgba(255, 237, 240, 0.62)', 'rgba(255, 226, 231, 0.78)', 'rgba(249, 216, 223, 0.84)', 'rgba(173, 70, 86, 0.16)', 'rgba(173, 70, 86, 0.25)', '#9a6870', '#7e4b55', 'rgba(173, 70, 86, 0.15)'),
pin: createDockTone('rgba(255, 231, 196, 0.9)', 'rgba(255, 219, 170, 0.98)', 'rgba(250, 204, 137, 1)', 'rgba(205, 132, 48, 0.38)', 'rgba(177, 101, 22, 0.58)', '#90571f', '#713f10', 'rgba(177, 101, 22, 0.3)'), pin: createDockTone('rgba(255, 244, 226, 0.72)', 'rgba(255, 235, 210, 0.86)', 'rgba(250, 227, 197, 0.92)', 'rgba(181, 115, 45, 0.2)', 'rgba(181, 115, 45, 0.32)', '#957049', '#765530', 'rgba(181, 115, 45, 0.18)'),
menu: createDockTone('rgba(223, 241, 215, 0.82)', 'rgba(207, 231, 197, 0.94)', 'rgba(190, 218, 178, 0.96)', 'rgba(105, 157, 88, 0.3)', 'rgba(82, 134, 66, 0.45)', '#557a43', '#3f6630', 'rgba(82, 134, 66, 0.24)'), menu: createDockTone('rgba(238, 247, 232, 0.58)', 'rgba(228, 241, 221, 0.74)', 'rgba(219, 235, 211, 0.82)', 'rgba(91, 140, 75, 0.16)', 'rgba(91, 140, 75, 0.24)', '#728c64', '#58734a', 'rgba(91, 140, 75, 0.15)'),
more: createDockTone('rgba(221, 235, 255, 0.82)', 'rgba(204, 224, 252, 0.94)', 'rgba(185, 211, 245, 0.96)', 'rgba(89, 137, 205, 0.3)', 'rgba(67, 112, 181, 0.45)', '#4f6f9a', '#395a86', 'rgba(67, 112, 181, 0.24)'), more: createDockTone('rgba(235, 243, 255, 0.6)', 'rgba(225, 236, 252, 0.76)', 'rgba(214, 228, 246, 0.84)', 'rgba(76, 118, 178, 0.16)', 'rgba(76, 118, 178, 0.24)', '#6e86a8', '#526d91', 'rgba(76, 118, 178, 0.15)'),
default: createDockTone('rgba(239, 241, 246, 0.78)', 'rgba(226, 230, 238, 0.94)', 'rgba(214, 220, 232, 0.96)', 'rgba(110, 122, 145, 0.24)', 'rgba(86, 99, 124, 0.38)', '#626d82', '#47566f', 'rgba(86, 99, 124, 0.2)'), default: createDockTone('rgba(246, 247, 250, 0.58)', 'rgba(237, 240, 246, 0.76)', 'rgba(228, 233, 242, 0.84)', 'rgba(98, 110, 132, 0.14)', 'rgba(98, 110, 132, 0.22)', '#747d8d', '#596578', 'rgba(98, 110, 132, 0.14)'),
}; };
const getDockToneStyle = (key: string) => dockToneStyles[key] ?? dockToneStyles.default; const getDockToneStyle = (key: string) => dockToneStyles[key] ?? dockToneStyles.default;