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

Polish macOS layer styling
All checks were successful
Deploy blog-frontend / build-and-deploy (push) Successful in 2m10s
Details

Browse Source
This commit is contained in:
박원엽
2026-05-29 14:18:02 +09:00
parent 8e854a1afa
commit b371200515
23 changed files with 200 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
LOG.md
View File

@@ -2,6 +2,11 @@
## 2026-05-29 ## 2026-05-29
- Added a category post-list page size control with 9/18/27 options, defaulting to 9 and persisting the user's choice in `localStorage` under `categoryPageSize`.
- Wired the selected category page size into the React Query key and `getPostsByCategory` request size, resetting to page 1 when the size changes while preserving search behavior.
- Adjusted the category page toolbar so search, page-size controls, and grid/list controls stack cleanly on narrow screens and align in one row on desktop.
- Validation: `npm run lint` passed and `npm run build` passed. Static verification confirms the category query uses `pageSize` and the page-size selector persists to `localStorage`; interactive browser verification was skipped because no local browser/Playwright automation runtime is available in this environment.
- Recommended next task: verify the category toolbar in a real browser after deploy, especially mobile widths and the 18/27 page-size transitions.
- Investigated Google Search Console crawlability concerns for the live site. - Investigated Google Search Console crawlability concerns for the live site.
- Checked live `robots.txt`, `sitemap.xml`, homepage, sample post pages, and backend post API with a Googlebot user agent; public post URLs in the sitemap returned 200 with no `X-Robots-Tag` or meta robots block. - Checked live `robots.txt`, `sitemap.xml`, homepage, sample post pages, and backend post API with a Googlebot user agent; public post URLs in the sitemap returned 200 with no `X-Robots-Tag` or meta robots block.
- Confirmed the non-www production host `blog.wypark.me` is the relevant host; its home/archive initial HTML currently contains no `/posts/` links because public lists are client-side rendered. - Confirmed the non-www production host `blog.wypark.me` is the relevant host; its home/archive initial HTML currently contains no `/posts/` links because public lists are client-side rendered.
@@ -23,3 +28,7 @@
- Validation: `npm run lint` passed, `npm run build` passed. The build logged a sitemap fetch warning because the backend API at the local default was not reachable, but the command completed successfully. - Validation: `npm run lint` passed, `npm run build` passed. The build logged a sitemap fetch warning because the backend API at the local default was not reachable, but the command completed successfully.
- Browser verification: previously started this app on `http://localhost:3100` because ports 3000 and 3001 were already occupied; confirmed desktop background gradients, menu bar, Dock, and window surfaces on `/`, `/archive`, and `/login`. For this follow-up, the dev/standalone server started successfully in foreground but exited when launched as a background non-interactive process, so browser verification was skipped after lint/build passed. - Browser verification: previously started this app on `http://localhost:3100` because ports 3000 and 3001 were already occupied; confirmed desktop background gradients, menu bar, Dock, and window surfaces on `/`, `/archive`, and `/login`. For this follow-up, the dev/standalone server started successfully in foreground but exited when launched as a background non-interactive process, so browser verification was skipped after lint/build passed.
- Recommended next task: review the remaining older Korean strings in admin/editor flows and normalize any mojibake that predates this redesign. - Recommended next task: review the remaining older Korean strings in admin/editor flows and normalize any mojibake that predates this redesign.
- Unified the macOS-inspired layer system by splitting window, card, control, sidebar, menu bar, and Dock border/shadow/blur tokens, with stronger dark-mode card separation.
- Applied the layer tokens across shared surfaces, the menu bar, Dock, sidebar controls, search/toggles, home dashboard panels, reader navigation cards, and admin dashboard/editor panels.
- Validation: `npm run lint` passed, `npm run build` passed, and in-app browser verification on `http://localhost:3100/` confirmed distinct light/dark computed border, shadow, and backdrop blur values for the menu bar, main window, internal cards, and Dock.
- Recommended next task: do a visual pass on lower-traffic admin list/modal screens and convert any remaining ad hoc hover fills to the shared card/control tokens.

4
src/app/admin/page.tsx
View File

@@ -93,7 +93,7 @@ function RecentPostRow({ post }: { post: Post }) {
return ( return (
<Link <Link
href={`/posts/${post.slug}`} href={`/posts/${post.slug}`}
className="group flex items-center justify-between gap-4 rounded-lg px-3 py-3 transition hover:bg-black/[0.03] dark:hover:bg-white/10" className="group flex items-center justify-between gap-4 rounded-lg px-3 py-3 transition hover:bg-[var(--card-bg)]"
> >
<div className="min-w-0"> <div className="min-w-0">
<p className="truncate text-sm font-semibold text-[var(--color-text)] transition group-hover:text-[var(--color-accent)]">{post.title}</p> <p className="truncate text-sm font-semibold text-[var(--color-text)] transition group-hover:text-[var(--color-accent)]">{post.title}</p>
@@ -123,7 +123,7 @@ function RecentCommentRow({ comment }: { comment: AdminComment }) {
return ( return (
<Link <Link
href={`/posts/${comment.postSlug}`} href={`/posts/${comment.postSlug}`}
className="flex items-center gap-3 rounded-lg px-3 py-3 transition hover:bg-black/[0.03] dark:hover:bg-white/10" className="flex items-center gap-3 rounded-lg px-3 py-3 transition hover:bg-[var(--card-bg)]"
> >
{content} {content}
</Link> </Link>

55
src/app/category/[id]/page.tsx
View File

@@ -9,10 +9,23 @@ import PostCard from '@/components/post/PostCard';
import PostListItem from '@/components/post/PostListItem'; import PostListItem from '@/components/post/PostListItem';
import PostSearch from '@/components/post/PostSearch'; import PostSearch from '@/components/post/PostSearch';
import EmptyState from '@/components/ui/EmptyState'; import EmptyState from '@/components/ui/EmptyState';
import SegmentedControl from '@/components/ui/SegmentedControl';
import Surface from '@/components/ui/Surface'; import Surface from '@/components/ui/Surface';
import WindowSurface from '@/components/ui/WindowSurface'; import WindowSurface from '@/components/ui/WindowSurface';
const PAGE_SIZE = 10; const PAGE_SIZE_OPTIONS = [
{ label: '9개', value: '9' },
{ label: '18개', value: '18' },
{ label: '27개', value: '27' },
] as const;
const DEFAULT_PAGE_SIZE = '9';
const CATEGORY_PAGE_SIZE_STORAGE_KEY = 'categoryPageSize';
type PageSizeOption = (typeof PAGE_SIZE_OPTIONS)[number]['value'];
const isPageSizeOption = (value: string | null): value is PageSizeOption => {
return PAGE_SIZE_OPTIONS.some((option) => option.value === value);
};
const isNoticeCategoryName = (categoryName: string) => { const isNoticeCategoryName = (categoryName: string) => {
const normalizedName = categoryName.toLowerCase(); const normalizedName = categoryName.toLowerCase();
@@ -27,6 +40,12 @@ export default function CategoryPage({ params }: { params: Promise<{ id: string
const [page, setPage] = useState(0); const [page, setPage] = useState(0);
const [keyword, setKeyword] = useState(''); const [keyword, setKeyword] = useState('');
const [pageSize, setPageSize] = useState<PageSizeOption>(() => {
if (typeof window === 'undefined') return DEFAULT_PAGE_SIZE;
const savedSize = localStorage.getItem(CATEGORY_PAGE_SIZE_STORAGE_KEY);
return isPageSizeOption(savedSize) ? savedSize : DEFAULT_PAGE_SIZE;
});
const [viewMode, setViewMode] = useState<'grid' | 'list'>(() => { const [viewMode, setViewMode] = useState<'grid' | 'list'>(() => {
if (isNoticeCategory || typeof window === 'undefined') return isNoticeCategory ? 'list' : 'grid'; if (isNoticeCategory || typeof window === 'undefined') return isNoticeCategory ? 'list' : 'grid';
@@ -47,9 +66,15 @@ export default function CategoryPage({ params }: { params: Promise<{ id: string
setPage(0); setPage(0);
}; };
const handlePageSizeChange = (nextSize: PageSizeOption) => {
setPage(0);
setPageSize(nextSize);
localStorage.setItem(CATEGORY_PAGE_SIZE_STORAGE_KEY, nextSize);
};
const { data: postsData, isLoading, error, isPlaceholderData } = useQuery({ const { data: postsData, isLoading, error, isPlaceholderData } = useQuery({
queryKey: ['posts', 'category', apiCategoryName, page, keyword], queryKey: ['posts', 'category', apiCategoryName, page, pageSize, keyword],
queryFn: () => getPostsByCategory(apiCategoryName, page, PAGE_SIZE, keyword), queryFn: () => getPostsByCategory(apiCategoryName, page, Number(pageSize), keyword),
placeholderData: (previousData) => previousData, placeholderData: (previousData) => previousData,
}); });
@@ -96,22 +121,30 @@ export default function CategoryPage({ params }: { params: Promise<{ id: string
<span className="text-lg font-normal text-[var(--color-text-subtle)]">글 목록</span> <span className="text-lg font-normal text-[var(--color-text-subtle)]">글 목록</span>
</h1> </h1>
<div className="flex w-full items-center gap-3 md:w-auto"> <div className="flex w-full flex-col gap-3 md:w-auto md:flex-row md:items-center">
<PostSearch <PostSearch
onSearch={handleSearch} onSearch={handleSearch}
placeholder={`${apiCategoryName} 검색`} placeholder={`${apiCategoryName} 검색`}
className="w-full md:w-64" className="w-full md:w-64"
/> />
<div className="flex shrink-0 items-center gap-1 rounded-full border border-[var(--color-line)] bg-[var(--color-control)] p-1 shadow-[var(--shadow-control)] backdrop-blur-xl"> <SegmentedControl
ariaLabel="페이지당 게시글 수"
options={PAGE_SIZE_OPTIONS}
value={pageSize}
onChange={handlePageSizeChange}
className="justify-center"
/>
<div className="flex shrink-0 items-center gap-1 rounded-full border border-[var(--control-border)] bg-[var(--color-control)] p-1 shadow-[var(--shadow-control)] backdrop-blur-[18px]">
<button <button
type="button" type="button"
onClick={() => handleViewModeChange('grid')} onClick={() => handleViewModeChange('grid')}
className={clsx( className={clsx(
'rounded-full p-2 transition-all duration-150', 'rounded-full p-2 transition-all duration-150',
activeViewMode === 'grid' activeViewMode === 'grid'
? 'bg-[var(--window-bg-strong)] text-[var(--color-accent)] shadow-sm' ? 'bg-[var(--card-bg-strong)] text-[var(--color-accent)] shadow-sm'
: 'text-[var(--color-text-subtle)] hover:bg-black/[0.04] hover:text-[var(--color-text)] dark:hover:bg-white/10', : 'text-[var(--color-text-subtle)] hover:bg-[var(--card-bg)] hover:text-[var(--color-text)]',
)} )}
title="카드로 보기" title="카드로 보기"
aria-label="카드로 보기" aria-label="카드로 보기"
@@ -125,8 +158,8 @@ export default function CategoryPage({ params }: { params: Promise<{ id: string
className={clsx( className={clsx(
'rounded-full p-2 transition-all duration-150', 'rounded-full p-2 transition-all duration-150',
activeViewMode === 'list' activeViewMode === 'list'
? 'bg-[var(--window-bg-strong)] text-[var(--color-accent)] shadow-sm' ? 'bg-[var(--card-bg-strong)] text-[var(--color-accent)] shadow-sm'
: 'text-[var(--color-text-subtle)] hover:bg-black/[0.04] hover:text-[var(--color-text)] dark:hover:bg-white/10', : 'text-[var(--color-text-subtle)] hover:bg-[var(--card-bg)] hover:text-[var(--color-text)]',
)} )}
title="리스트로 보기" title="리스트로 보기"
aria-label="리스트로 보기" aria-label="리스트로 보기"
@@ -173,7 +206,7 @@ export default function CategoryPage({ params }: { params: Promise<{ id: string
type="button" type="button"
onClick={handlePrevPage} onClick={handlePrevPage}
disabled={page === 0} disabled={page === 0}
className="rounded-full p-2 text-[var(--color-text-muted)] transition-colors hover:bg-black/[0.04] hover:text-[var(--color-text)] disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent dark:hover:bg-white/10" className="rounded-full p-2 text-[var(--color-text-muted)] transition-colors hover:bg-[var(--card-bg)] hover:text-[var(--color-text)] disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent"
aria-label="이전 페이지" aria-label="이전 페이지"
> >
<ChevronLeft size={24} /> <ChevronLeft size={24} />
@@ -187,7 +220,7 @@ export default function CategoryPage({ params }: { params: Promise<{ id: string
type="button" type="button"
onClick={handleNextPage} onClick={handleNextPage}
disabled={isLast || isPlaceholderData} disabled={isLast || isPlaceholderData}
className="rounded-full p-2 text-[var(--color-text-muted)] transition-colors hover:bg-black/[0.04] hover:text-[var(--color-text)] disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent dark:hover:bg-white/10" className="rounded-full p-2 text-[var(--color-text-muted)] transition-colors hover:bg-[var(--card-bg)] hover:text-[var(--color-text)] disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent"
aria-label="다음 페이지" aria-label="다음 페이지"
> >
<ChevronRight size={24} /> <ChevronRight size={24} />

120
src/app/globals.css
View File

@@ -30,16 +30,25 @@
linear-gradient(155deg, rgba(218, 235, 255, 0.86) 6%, rgba(218, 235, 255, 0) 50%), linear-gradient(155deg, rgba(218, 235, 255, 0.86) 6%, rgba(218, 235, 255, 0) 50%),
linear-gradient(42deg, rgba(222, 251, 236, 0.74) 48%, rgba(222, 251, 236, 0) 88%), linear-gradient(42deg, rgba(222, 251, 236, 0.74) 48%, rgba(222, 251, 236, 0) 88%),
linear-gradient(180deg, #fbf8ff 0%, #eef5ff 100%); linear-gradient(180deg, #fbf8ff 0%, #eef5ff 100%);
--window-bg: rgba(255, 255, 255, 0.58); --window-bg: rgba(255, 255, 255, 0.6);
--window-bg-strong: rgba(255, 255, 255, 0.78); --window-bg-strong: rgba(255, 255, 255, 0.8);
--window-titlebar: rgba(255, 255, 255, 0.5); --window-titlebar: rgba(255, 255, 255, 0.5);
--window-border: rgba(255, 255, 255, 0.62); --window-border: rgba(255, 255, 255, 0.68);
--menubar-bg: rgba(255, 255, 255, 0.48); --window-titlebar-border: rgba(39, 54, 82, 0.1);
--dock-bg: rgba(255, 255, 255, 0.5); --card-bg: rgba(255, 255, 255, 0.46);
--sidebar-bg: rgba(255, 255, 255, 0.46); --card-bg-strong: rgba(255, 255, 255, 0.68);
--color-surface: rgba(255, 255, 255, 0.58); --card-border: rgba(39, 54, 82, 0.11);
--color-surface-strong: rgba(255, 255, 255, 0.82); --card-border-hover: rgba(39, 54, 82, 0.18);
--color-control: rgba(255, 255, 255, 0.54); --control-border: rgba(39, 54, 82, 0.12);
--menubar-bg: rgba(255, 255, 255, 0.5);
--menubar-border: rgba(255, 255, 255, 0.7);
--dock-bg: rgba(255, 255, 255, 0.54);
--dock-border: rgba(255, 255, 255, 0.72);
--sidebar-bg: rgba(255, 255, 255, 0.48);
--sidebar-border: rgba(255, 255, 255, 0.6);
--color-surface: var(--card-bg);
--color-surface-strong: var(--card-bg-strong);
--color-control: rgba(255, 255, 255, 0.56);
--color-line: rgba(39, 54, 82, 0.13); --color-line: rgba(39, 54, 82, 0.13);
--color-text: #1d1d1f; --color-text: #1d1d1f;
--color-text-muted: #62646d; --color-text-muted: #62646d;
@@ -48,10 +57,13 @@
--color-accent-hover: #0071e3; --color-accent-hover: #0071e3;
--color-accent-soft: rgba(0, 102, 204, 0.1); --color-accent-soft: rgba(0, 102, 204, 0.1);
--color-danger-soft: rgba(255, 59, 48, 0.1); --color-danger-soft: rgba(255, 59, 48, 0.1);
--shadow-window: 0 26px 80px rgba(70, 92, 130, 0.16), 0 1px 0 rgba(255, 255, 255, 0.7) inset; --shadow-window: 0 28px 80px rgba(70, 92, 130, 0.18), 0 10px 28px rgba(70, 92, 130, 0.08), 0 1px 0 rgba(255, 255, 255, 0.72) inset;
--shadow-panel: 0 22px 56px rgba(70, 92, 130, 0.13); --shadow-sidebar: 16px 0 42px rgba(70, 92, 130, 0.12), -1px 0 0 rgba(255, 255, 255, 0.46) inset;
--shadow-card: 0 10px 30px rgba(70, 92, 130, 0.08); --shadow-menubar: 0 16px 40px rgba(70, 92, 130, 0.12), 0 1px 0 rgba(255, 255, 255, 0.58) inset;
--shadow-control: 0 12px 26px rgba(70, 92, 130, 0.1); --shadow-panel: var(--shadow-sidebar);
--shadow-card: 0 14px 34px rgba(70, 92, 130, 0.09), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
--shadow-dock: 0 22px 58px rgba(70, 92, 130, 0.18), 0 8px 18px rgba(70, 92, 130, 0.1), 0 1px 0 rgba(255, 255, 255, 0.68) inset;
--shadow-control: 0 12px 26px rgba(70, 92, 130, 0.1), 0 1px 0 rgba(255, 255, 255, 0.46) inset;
--focus-ring: 0 0 0 4px rgba(0, 102, 204, 0.14); --focus-ring: 0 0 0 4px rgba(0, 102, 204, 0.14);
--background: var(--color-page); --background: var(--color-page);
--foreground: var(--color-text); --foreground: var(--color-text);
@@ -72,17 +84,26 @@ html[data-theme="dark"] {
linear-gradient(150deg, rgba(43, 73, 110, 0.5) 10%, rgba(43, 73, 110, 0) 54%), linear-gradient(150deg, rgba(43, 73, 110, 0.5) 10%, rgba(43, 73, 110, 0) 54%),
linear-gradient(42deg, rgba(38, 91, 72, 0.38) 48%, rgba(38, 91, 72, 0) 88%), linear-gradient(42deg, rgba(38, 91, 72, 0.38) 48%, rgba(38, 91, 72, 0) 88%),
linear-gradient(180deg, #131620 0%, #07090f 100%); linear-gradient(180deg, #131620 0%, #07090f 100%);
--window-bg: rgba(27, 29, 39, 0.64); --window-bg: rgba(28, 31, 42, 0.68);
--window-bg-strong: rgba(34, 36, 48, 0.82); --window-bg-strong: rgba(39, 42, 56, 0.84);
--window-titlebar: rgba(255, 255, 255, 0.06); --window-titlebar: rgba(255, 255, 255, 0.075);
--window-border: rgba(255, 255, 255, 0.14); --window-border: rgba(255, 255, 255, 0.18);
--menubar-bg: rgba(24, 26, 36, 0.58); --window-titlebar-border: rgba(255, 255, 255, 0.13);
--dock-bg: rgba(24, 26, 36, 0.62); --card-bg: rgba(43, 46, 60, 0.5);
--sidebar-bg: rgba(22, 24, 33, 0.56); --card-bg-strong: rgba(52, 55, 70, 0.66);
--color-surface: rgba(27, 29, 39, 0.64); --card-border: rgba(255, 255, 255, 0.14);
--color-surface-strong: rgba(34, 36, 48, 0.82); --card-border-hover: rgba(255, 255, 255, 0.22);
--color-control: rgba(255, 255, 255, 0.08); --control-border: rgba(255, 255, 255, 0.13);
--color-line: rgba(255, 255, 255, 0.12); --menubar-bg: rgba(24, 27, 38, 0.62);
--menubar-border: rgba(255, 255, 255, 0.16);
--dock-bg: rgba(27, 30, 42, 0.66);
--dock-border: rgba(255, 255, 255, 0.18);
--sidebar-bg: rgba(21, 24, 34, 0.64);
--sidebar-border: rgba(255, 255, 255, 0.14);
--color-surface: var(--card-bg);
--color-surface-strong: var(--card-bg-strong);
--color-control: rgba(255, 255, 255, 0.085);
--color-line: rgba(255, 255, 255, 0.13);
--color-text: #f5f5f7; --color-text: #f5f5f7;
--color-text-muted: #b2b5bf; --color-text-muted: #b2b5bf;
--color-text-subtle: #8f939f; --color-text-subtle: #8f939f;
@@ -90,10 +111,13 @@ html[data-theme="dark"] {
--color-accent-hover: #46a6ff; --color-accent-hover: #46a6ff;
--color-accent-soft: rgba(41, 151, 255, 0.16); --color-accent-soft: rgba(41, 151, 255, 0.16);
--color-danger-soft: rgba(255, 69, 58, 0.16); --color-danger-soft: rgba(255, 69, 58, 0.16);
--shadow-window: 0 30px 90px rgba(0, 0, 0, 0.44), 0 1px 0 rgba(255, 255, 255, 0.08) inset; --shadow-window: 0 32px 100px rgba(0, 0, 0, 0.54), 0 14px 36px rgba(0, 0, 0, 0.28), 0 1px 0 rgba(255, 255, 255, 0.1) inset;
--shadow-panel: 0 24px 60px rgba(0, 0, 0, 0.36); --shadow-sidebar: 18px 0 46px rgba(0, 0, 0, 0.38), -1px 0 0 rgba(255, 255, 255, 0.08) inset;
--shadow-card: 0 10px 30px rgba(0, 0, 0, 0.24); --shadow-menubar: 0 18px 46px rgba(0, 0, 0, 0.32), 0 1px 0 rgba(255, 255, 255, 0.09) inset;
--shadow-control: 0 14px 30px rgba(0, 0, 0, 0.26); --shadow-panel: var(--shadow-sidebar);
--shadow-card: 0 16px 34px rgba(0, 0, 0, 0.32), 0 1px 0 rgba(255, 255, 255, 0.08) inset;
--shadow-dock: 0 26px 68px rgba(0, 0, 0, 0.44), 0 10px 24px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.12) inset;
--shadow-control: 0 14px 30px rgba(0, 0, 0, 0.28), 0 1px 0 rgba(255, 255, 255, 0.08) inset;
--focus-ring: 0 0 0 4px rgba(41, 151, 255, 0.18); --focus-ring: 0 0 0 4px rgba(41, 151, 255, 0.18);
--background: var(--color-page); --background: var(--color-page);
--foreground: var(--color-text); --foreground: var(--color-text);
@@ -221,7 +245,7 @@ samp,
.hover\:bg-gray-100:hover, .hover\:bg-gray-100:hover,
.hover\:bg-gray-200:hover, .hover\:bg-gray-200:hover,
.focus\:bg-white:focus { .focus\:bg-white:focus {
background-color: rgba(255, 255, 255, 0.58); background-color: var(--card-bg-strong);
} }
.hover\:bg-blue-50:hover { .hover\:bg-blue-50:hover {
@@ -264,16 +288,16 @@ input:not([type="checkbox"]):not([type="radio"]),
textarea, textarea,
select { select {
background-color: var(--color-control); background-color: var(--color-control);
border-color: var(--color-line); border-color: var(--control-border);
color: var(--color-text); color: var(--color-text);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.42) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.42) inset;
backdrop-filter: blur(20px); backdrop-filter: blur(18px);
} }
input:not([type="checkbox"]):not([type="radio"]):focus, input:not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus, textarea:focus,
select:focus { select:focus {
background-color: var(--window-bg-strong); background-color: var(--card-bg-strong);
border-color: var(--color-accent); border-color: var(--color-accent);
} }
@@ -330,7 +354,7 @@ html[data-theme="dark"] .hover\:bg-gray-50:hover,
html[data-theme="dark"] .hover\:bg-gray-100:hover, html[data-theme="dark"] .hover\:bg-gray-100:hover,
html[data-theme="dark"] .hover\:bg-gray-200:hover, html[data-theme="dark"] .hover\:bg-gray-200:hover,
html[data-theme="dark"] .focus\:bg-white:focus { html[data-theme="dark"] .focus\:bg-white:focus {
background-color: rgba(255, 255, 255, 0.11); background-color: var(--card-bg-strong);
} }
html[data-theme="dark"] .hover\:bg-blue-50:hover { html[data-theme="dark"] .hover\:bg-blue-50:hover {
@@ -351,44 +375,45 @@ html[data-theme="dark"] .disabled\:bg-gray-400:disabled {
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]), html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] textarea, html[data-theme="dark"] textarea,
html[data-theme="dark"] select { html[data-theme="dark"] select {
background-color: rgba(255, 255, 255, 0.08); background-color: var(--color-control);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset;
} }
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):focus, html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):focus,
html[data-theme="dark"] textarea:focus, html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus { html[data-theme="dark"] select:focus {
background-color: rgba(255, 255, 255, 0.11); background-color: var(--card-bg-strong);
} }
.w-md-editor { .w-md-editor {
border-radius: 0.5rem !important; border-radius: 0.5rem !important;
border-color: var(--color-line) !important; border-color: var(--card-border) !important;
background-color: var(--window-bg-strong) !important; background-color: var(--card-bg-strong) !important;
box-shadow: var(--shadow-card); box-shadow: var(--shadow-card);
backdrop-filter: blur(24px); backdrop-filter: blur(20px);
} }
.w-md-editor-toolbar { .w-md-editor-toolbar {
border-radius: 0.5rem 0.5rem 0 0 !important; border-radius: 0.5rem 0.5rem 0 0 !important;
border-color: var(--color-line) !important; border-color: var(--window-titlebar-border) !important;
background-color: var(--window-titlebar) !important; background-color: var(--window-titlebar) !important;
} }
html[data-theme="dark"] .w-md-editor { html[data-theme="dark"] .w-md-editor {
background-color: var(--window-bg-strong) !important; background-color: var(--card-bg-strong) !important;
border-color: var(--color-line) !important; border-color: var(--card-border) !important;
} }
html[data-theme="dark"] .w-md-editor-toolbar { html[data-theme="dark"] .w-md-editor-toolbar {
background-color: var(--window-titlebar) !important; background-color: var(--window-titlebar) !important;
border-color: var(--color-line) !important; border-color: var(--window-titlebar-border) !important;
} }
.wy-editor-shell { .wy-editor-shell {
--color-canvas-default: transparent; --color-canvas-default: transparent;
--color-canvas-subtle: transparent; --color-canvas-subtle: transparent;
--color-border-default: var(--color-line); --color-border-default: var(--card-border);
--color-border-muted: var(--color-line); --color-border-muted: var(--card-border);
--color-fg-default: var(--color-text); --color-fg-default: var(--color-text);
--color-fg-muted: var(--color-text-muted); --color-fg-muted: var(--color-text-muted);
--color-accent-fg: var(--color-accent); --color-accent-fg: var(--color-accent);
@@ -399,14 +424,15 @@ html[data-theme="dark"] .w-md-editor-toolbar {
min-height: 520px; min-height: 520px;
overflow: hidden; overflow: hidden;
border-radius: 0.5rem !important; border-radius: 0.5rem !important;
border: 1px solid var(--color-line) !important; border: 1px solid var(--card-border) !important;
background-color: var(--window-bg-strong) !important; background-color: var(--card-bg-strong) !important;
color: var(--color-text) !important; color: var(--color-text) !important;
box-shadow: var(--shadow-card) !important; box-shadow: var(--shadow-card) !important;
backdrop-filter: blur(20px);
} }
.wy-editor-shell .w-md-editor-toolbar { .wy-editor-shell .w-md-editor-toolbar {
border-color: var(--color-line) !important; border-color: var(--window-titlebar-border) !important;
background-color: var(--window-titlebar) !important; background-color: var(--window-titlebar) !important;
} }

13
src/app/page.tsx
View File

@@ -170,7 +170,7 @@ function CompactPostRow({
return ( return (
<Link <Link
href={`/posts/${post.slug}`} href={`/posts/${post.slug}`}
className="group flex items-start justify-between gap-4 rounded-lg px-1 py-4 transition duration-150 hover:bg-black/[0.025] hover:px-3 dark:hover:bg-white/[0.07]" className="group flex items-start justify-between gap-4 rounded-lg px-1 py-4 transition duration-150 hover:bg-[var(--card-bg)] hover:px-3"
> >
{rank !== undefined && ( {rank !== undefined && (
<span className="mt-1 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-[var(--color-accent-soft)] text-xs font-bold tabular-nums text-[var(--color-accent)]"> <span className="mt-1 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-[var(--color-accent-soft)] text-xs font-bold tabular-nums text-[var(--color-accent)]">
@@ -217,13 +217,8 @@ function PostListPanel({
isPopular?: boolean; isPopular?: boolean;
}) { }) {
return ( return (
<WindowSurface <Surface as="section" strong className="overflow-hidden">
as="section" <div className="flex min-h-12 items-center justify-between gap-3 border-b border-[var(--window-titlebar-border)] bg-[var(--window-titlebar)] px-5 py-3">
showTrafficLights={false}
className="shadow-none"
bodyClassName="overflow-hidden"
>
<div className="flex min-h-12 items-center justify-between gap-3 border-b border-[var(--color-line)] bg-white/[0.16] px-5 py-3 dark:bg-white/[0.04]">
<h2 className="flex min-w-0 items-center gap-2 text-sm font-bold text-[var(--color-text)]"> <h2 className="flex min-w-0 items-center gap-2 text-sm font-bold text-[var(--color-text)]">
{icon} {icon}
<span className="truncate">{title}</span> <span className="truncate">{title}</span>
@@ -250,7 +245,7 @@ function PostListPanel({
<EmptyState title={isPopular ? '인기 글을 집계 중입니다.' : '아직 공개된 글이 없습니다.'} className="min-h-72" /> <EmptyState title={isPopular ? '인기 글을 집계 중입니다.' : '아직 공개된 글이 없습니다.'} className="min-h-72" />
)} )}
</div> </div>
</WindowSurface> </Surface>
); );
} }

26
src/components/admin/AdminPostEditor.tsx
View File

@@ -111,7 +111,7 @@ function CategoryOptions({
{categories.map((category) => ( {categories.map((category) => (
<div key={category.id}> <div key={category.id}>
<label <label
className="flex cursor-pointer items-center gap-2 rounded-lg px-3 py-2 text-sm text-[var(--color-text-muted)] transition hover:bg-black/[0.04] hover:text-[var(--color-text)] dark:hover:bg-white/10" className="flex cursor-pointer items-center gap-2 rounded-lg px-3 py-2 text-sm text-[var(--color-text-muted)] transition hover:bg-[var(--card-bg)] hover:text-[var(--color-text)]"
style={{ marginLeft: `${depth * 10}px` }} style={{ marginLeft: `${depth * 10}px` }}
> >
<input <input
@@ -167,7 +167,7 @@ function DraftLoadDialog({
<button <button
type="button" type="button"
onClick={onCancel} onClick={onCancel}
className="inline-flex items-center justify-center rounded-full border border-[var(--color-line)] bg-[var(--color-control)] px-4 py-2 text-sm font-semibold text-[var(--color-text-muted)] transition hover:bg-[var(--window-bg-strong)] hover:text-[var(--color-text)]" className="inline-flex items-center justify-center rounded-full border border-[var(--control-border)] bg-[var(--color-control)] px-4 py-2 text-sm font-semibold text-[var(--color-text-muted)] transition hover:bg-[var(--card-bg-strong)] hover:text-[var(--color-text)]"
> >
취소 취소
</button> </button>
@@ -479,7 +479,7 @@ export default function AdminPostEditor({ editSlug }: AdminPostEditorProps) {
<button <button
type="button" type="button"
onClick={() => router.push('/admin/posts')} onClick={() => router.push('/admin/posts')}
className="inline-flex h-8 items-center gap-2 rounded-full border border-[var(--color-line)] bg-[var(--color-control)] px-3 text-xs font-semibold text-[var(--color-text-muted)] shadow-[var(--shadow-control)] transition hover:bg-[var(--window-bg-strong)] hover:text-[var(--color-text)]" className="inline-flex h-8 items-center gap-2 rounded-full border border-[var(--control-border)] bg-[var(--color-control)] px-3 text-xs font-semibold text-[var(--color-text-muted)] shadow-[var(--shadow-control)] transition hover:bg-[var(--card-bg-strong)] hover:text-[var(--color-text)]"
> >
<ArrowLeft size={14} /> <ArrowLeft size={14} />
목록 목록
@@ -502,7 +502,7 @@ export default function AdminPostEditor({ editSlug }: AdminPostEditorProps) {
<button <button
type="button" type="button"
onClick={handleTempSave} onClick={handleTempSave}
className="inline-flex h-9 items-center gap-2 rounded-full border border-[var(--color-line)] bg-[var(--color-control)] px-4 text-sm font-semibold text-[var(--color-text-muted)] shadow-[var(--shadow-control)] transition hover:bg-[var(--window-bg-strong)] hover:text-[var(--color-text)]" className="inline-flex h-9 items-center gap-2 rounded-full border border-[var(--control-border)] bg-[var(--color-control)] px-4 text-sm font-semibold text-[var(--color-text-muted)] shadow-[var(--shadow-control)] transition hover:bg-[var(--card-bg-strong)] hover:text-[var(--color-text)]"
> >
<FileText size={16} /> <FileText size={16} />
임시저장 임시저장
@@ -527,7 +527,7 @@ export default function AdminPostEditor({ editSlug }: AdminPostEditorProps) {
value={title} value={title}
onChange={(event) => setTitle(event.target.value)} onChange={(event) => setTitle(event.target.value)}
placeholder="제목을 입력하세요" placeholder="제목을 입력하세요"
className="mb-5 w-full rounded-lg border border-[var(--color-line)] bg-[var(--color-control)] px-4 py-3 text-2xl font-bold tracking-normal text-[var(--color-text)] outline-none transition placeholder:text-[var(--color-text-subtle)] focus:border-[var(--color-accent)] md:text-3xl" className="mb-5 w-full rounded-lg border border-[var(--control-border)] bg-[var(--color-control)] px-4 py-3 text-2xl font-bold tracking-normal text-[var(--color-text)] outline-none transition placeholder:text-[var(--color-text-subtle)] focus:border-[var(--color-accent)] md:text-3xl"
/> />
<div className="wy-editor-shell" data-color-mode={resolvedTheme}> <div className="wy-editor-shell" data-color-mode={resolvedTheme}>
@@ -558,15 +558,15 @@ export default function AdminPostEditor({ editSlug }: AdminPostEditorProps) {
발행 상태 발행 상태
</h2> </h2>
<div className="mt-4 grid grid-cols-3 gap-2 text-center"> <div className="mt-4 grid grid-cols-3 gap-2 text-center">
<div className="rounded-lg border border-[var(--color-line)] bg-[var(--color-control)] p-3"> <div className="rounded-lg border border-[var(--card-border)] bg-[var(--card-bg)] p-3 shadow-[var(--shadow-card)]">
<p className="text-lg font-bold tabular-nums text-[var(--color-text)]">{contentLength.toLocaleString()}</p> <p className="text-lg font-bold tabular-nums text-[var(--color-text)]">{contentLength.toLocaleString()}</p>
<p className="text-[10px] font-semibold text-[var(--color-text-subtle)]">글자</p> <p className="text-[10px] font-semibold text-[var(--color-text-subtle)]">글자</p>
</div> </div>
<div className="rounded-lg border border-[var(--color-line)] bg-[var(--color-control)] p-3"> <div className="rounded-lg border border-[var(--card-border)] bg-[var(--card-bg)] p-3 shadow-[var(--shadow-card)]">
<p className="text-lg font-bold tabular-nums text-[var(--color-text)]">{wordCount.toLocaleString()}</p> <p className="text-lg font-bold tabular-nums text-[var(--color-text)]">{wordCount.toLocaleString()}</p>
<p className="text-[10px] font-semibold text-[var(--color-text-subtle)]">단어</p> <p className="text-[10px] font-semibold text-[var(--color-text-subtle)]">단어</p>
</div> </div>
<div className="rounded-lg border border-[var(--color-line)] bg-[var(--color-control)] p-3"> <div className="rounded-lg border border-[var(--card-border)] bg-[var(--card-bg)] p-3 shadow-[var(--shadow-card)]">
<p className="text-lg font-bold tabular-nums text-[var(--color-text)]">{readingMinutes}</p> <p className="text-lg font-bold tabular-nums text-[var(--color-text)]">{readingMinutes}</p>
<p className="text-[10px] font-semibold text-[var(--color-text-subtle)]">분</p> <p className="text-[10px] font-semibold text-[var(--color-text-subtle)]">분</p>
</div> </div>
@@ -581,7 +581,7 @@ export default function AdminPostEditor({ editSlug }: AdminPostEditorProps) {
<Folder size={17} /> <Folder size={17} />
카테고리 카테고리
</h2> </h2>
<div className="max-h-64 overflow-y-auto rounded-lg border border-[var(--color-line)] bg-[var(--color-control)] p-2"> <div className="max-h-64 overflow-y-auto rounded-lg border border-[var(--card-border)] bg-[var(--card-bg)] p-2 shadow-[var(--shadow-card)]">
{categories.length > 0 ? ( {categories.length > 0 ? (
<CategoryOptions categories={categories} selectedId={categoryId} onSelect={setCategoryId} /> <CategoryOptions categories={categories} selectedId={categoryId} onSelect={setCategoryId} />
) : ( ) : (
@@ -602,7 +602,7 @@ export default function AdminPostEditor({ editSlug }: AdminPostEditorProps) {
value={tags} value={tags}
onChange={(event) => setTags(event.target.value)} onChange={(event) => setTags(event.target.value)}
placeholder="react, nextjs, essay" placeholder="react, nextjs, essay"
className="w-full rounded-lg border border-[var(--color-line)] bg-[var(--color-control)] px-3 py-2 text-sm text-[var(--color-text)] outline-none transition placeholder:text-[var(--color-text-subtle)] focus:border-[var(--color-accent)]" className="w-full rounded-lg border border-[var(--control-border)] bg-[var(--color-control)] px-3 py-2 text-sm text-[var(--color-text)] outline-none transition placeholder:text-[var(--color-text-subtle)] focus:border-[var(--color-accent)]"
/> />
<p className="mt-2 text-xs text-[var(--color-text-subtle)]">쉼표로 구분해서 입력하세요.</p> <p className="mt-2 text-xs text-[var(--color-text-subtle)]">쉼표로 구분해서 입력하세요.</p>
</Surface> </Surface>
@@ -613,7 +613,7 @@ export default function AdminPostEditor({ editSlug }: AdminPostEditorProps) {
이미지 이미지
</h2> </h2>
<label <label
className={`flex min-h-28 w-full cursor-pointer flex-col items-center justify-center rounded-lg border border-dashed border-[var(--color-line)] bg-[var(--color-control)] p-4 text-center transition hover:border-[var(--color-accent)] hover:bg-[var(--window-bg-strong)] ${isUploading ? 'cursor-wait opacity-60' : ''}`} className={`flex min-h-28 w-full cursor-pointer flex-col items-center justify-center rounded-lg border border-dashed border-[var(--card-border)] bg-[var(--card-bg)] p-4 text-center shadow-[var(--shadow-card)] transition hover:border-[var(--color-accent)] hover:bg-[var(--card-bg-strong)] ${isUploading ? 'cursor-wait opacity-60' : ''}`}
> >
<UploadCloud className="mb-2 h-7 w-7 text-[var(--color-text-subtle)]" /> <UploadCloud className="mb-2 h-7 w-7 text-[var(--color-text-subtle)]" />
<span className="text-sm font-semibold text-[var(--color-text)]"> <span className="text-sm font-semibold text-[var(--color-text)]">
@@ -641,7 +641,7 @@ export default function AdminPostEditor({ editSlug }: AdminPostEditorProps) {
<button <button
type="button" type="button"
onClick={() => setShowDraftList((previous) => !previous)} onClick={() => setShowDraftList((previous) => !previous)}
className="rounded-full border border-[var(--color-line)] bg-[var(--color-control)] px-2.5 py-1 text-xs font-bold text-[var(--color-text-muted)] transition hover:bg-[var(--window-bg-strong)] hover:text-[var(--color-text)]" className="rounded-full border border-[var(--control-border)] bg-[var(--color-control)] px-2.5 py-1 text-xs font-bold text-[var(--color-text-muted)] transition hover:bg-[var(--card-bg-strong)] hover:text-[var(--color-text)]"
> >
{drafts.length}/10 {drafts.length}/10
</button> </button>
@@ -656,7 +656,7 @@ export default function AdminPostEditor({ editSlug }: AdminPostEditorProps) {
) : ( ) : (
<ul className="space-y-1"> <ul className="space-y-1">
{drafts.map((draft) => ( {drafts.map((draft) => (
<li key={draft.id} className="group rounded-lg px-3 py-2 transition hover:bg-black/[0.04] dark:hover:bg-white/10"> <li key={draft.id} className="group rounded-lg px-3 py-2 transition hover:bg-[var(--card-bg)]">
<div className="flex items-start justify-between gap-2"> <div className="flex items-start justify-between gap-2">
<button type="button" onClick={() => handleLoadDraft(draft)} className="min-w-0 flex-1 text-left"> <button type="button" onClick={() => handleLoadDraft(draft)} className="min-w-0 flex-1 text-left">
<p className="line-clamp-1 text-sm font-semibold text-[var(--color-text)]">{draft.title}</p> <p className="line-clamp-1 text-sm font-semibold text-[var(--color-text)]">{draft.title}</p>

6
src/components/admin/AdminRouteShell.tsx
View File

@@ -60,7 +60,7 @@ export default function AdminRouteShell({ children }: { children: React.ReactNod
<div className="mx-auto w-full space-y-6 px-0 py-4 md:w-[80vw] md:max-w-[1400px] md:py-6"> <div className="mx-auto w-full space-y-6 px-0 py-4 md:w-[80vw] md:max-w-[1400px] md:py-6">
<WindowSurface title="Admin Console" subtitle="Operations toolbar" bodyClassName="p-2"> <WindowSurface title="Admin Console" subtitle="Operations toolbar" bodyClassName="p-2">
<nav <nav
className="flex gap-2 overflow-x-auto rounded-lg bg-[var(--color-control)] p-1 backdrop-blur-xl" className="flex gap-2 overflow-x-auto rounded-lg border border-[var(--card-border)] bg-[var(--card-bg)] p-1 shadow-[var(--shadow-card)] backdrop-blur-[18px]"
aria-label="관리자 메뉴" aria-label="관리자 메뉴"
> >
{navItems.map((item) => { {navItems.map((item) => {
@@ -74,8 +74,8 @@ export default function AdminRouteShell({ children }: { children: React.ReactNod
className={clsx( className={clsx(
'inline-flex h-9 shrink-0 items-center gap-2 rounded-lg px-4 text-sm font-semibold transition', 'inline-flex h-9 shrink-0 items-center gap-2 rounded-lg px-4 text-sm font-semibold transition',
isActive isActive
? 'bg-[var(--window-bg-strong)] text-[var(--color-text)] shadow-sm' ? 'bg-[var(--card-bg-strong)] text-[var(--color-text)] shadow-sm'
: 'text-[var(--color-text-muted)] hover:bg-black/[0.04] hover:text-[var(--color-text)] dark:hover:bg-white/10', : 'text-[var(--color-text-muted)] hover:bg-[var(--card-bg-strong)] hover:text-[var(--color-text)]',
)} )}
> >
<Icon size={16} /> <Icon size={16} />

2
src/components/admin/dashboard/AdminDashboardActionCenter.tsx
View File

@@ -50,7 +50,7 @@ export default function AdminDashboardActionCenter({
<Link <Link
key={item.label} key={item.label}
href={item.href} href={item.href}
className="flex items-center justify-between gap-4 rounded-lg px-3 py-3 transition hover:bg-black/[0.03] dark:hover:bg-white/10" className="flex items-center justify-between gap-4 rounded-lg px-3 py-3 transition hover:bg-[var(--card-bg)]"
> >
<span className="flex items-center gap-3 text-sm font-semibold text-[var(--color-text-muted)]"> <span className="flex items-center gap-3 text-sm font-semibold text-[var(--color-text-muted)]">
<Icon size={16} /> <Icon size={16} />

6
src/components/admin/dashboard/AdminDashboardCategoryHealth.tsx
View File

@@ -34,9 +34,9 @@ export default function AdminDashboardCategoryHealth({
</div> </div>
{categoryStats.length > 0 ? ( {categoryStats.length > 0 ? (
<div className="overflow-x-auto rounded-lg border border-[var(--color-line)]"> <div className="overflow-x-auto rounded-lg border border-[var(--card-border)] bg-[var(--card-bg)] shadow-[var(--shadow-card)]">
<div className="min-w-[680px]"> <div className="min-w-[680px]">
<div className="grid grid-cols-[1.2fr_0.6fr_0.7fr_0.9fr_auto] gap-3 bg-black/[0.03] px-4 py-3 text-xs font-bold text-[var(--color-text-subtle)] dark:bg-white/10"> <div className="grid grid-cols-[1.2fr_0.6fr_0.7fr_0.9fr_auto] gap-3 bg-[var(--window-titlebar)] px-4 py-3 text-xs font-bold text-[var(--color-text-subtle)]">
<span>카테고리</span> <span>카테고리</span>
<span>글</span> <span>글</span>
<span>최근 조회</span> <span>최근 조회</span>
@@ -47,7 +47,7 @@ export default function AdminDashboardCategoryHealth({
<Link <Link
key={category.id} key={category.id}
href={`/category/${category.name}`} href={`/category/${category.name}`}
className="grid grid-cols-[1.2fr_0.6fr_0.7fr_0.9fr_auto] gap-3 border-t border-[var(--color-line)] px-4 py-3 text-sm transition hover:bg-black/[0.03] dark:hover:bg-white/10" className="grid grid-cols-[1.2fr_0.6fr_0.7fr_0.9fr_auto] gap-3 border-t border-[var(--card-border)] px-4 py-3 text-sm transition hover:bg-[var(--card-bg-strong)]"
> >
<span className="truncate font-semibold text-[var(--color-text)]">{category.name}</span> <span className="truncate font-semibold text-[var(--color-text)]">{category.name}</span>
<span className="text-[var(--color-text-muted)]">{category.postCount.toLocaleString()}</span> <span className="text-[var(--color-text-muted)]">{category.postCount.toLocaleString()}</span>

2
src/components/admin/dashboard/AdminDashboardPostPerformance.tsx
View File

@@ -16,7 +16,7 @@ function PostStatRow({ post, isFallback }: { post: DashboardPostStat; isFallback
return ( return (
<Link <Link
href={`/posts/${post.slug}`} href={`/posts/${post.slug}`}
className="group flex items-start justify-between gap-4 rounded-lg px-3 py-3 transition hover:bg-black/[0.03] dark:hover:bg-white/10" className="group flex items-start justify-between gap-4 rounded-lg px-3 py-3 transition hover:bg-[var(--card-bg)]"
> >
<div className="min-w-0"> <div className="min-w-0">
<div className="mb-1 flex items-center gap-2"> <div className="mb-1 flex items-center gap-2">

2
src/components/comment/CommentItem.tsx
View File

@@ -163,7 +163,7 @@ export default function CommentItem({ comment, postSlug, depth = 0 }: CommentIte
</button> </button>
<button <button
onClick={() => { setIsDeleting(false); setGuestPassword(''); }} onClick={() => { setIsDeleting(false); setGuestPassword(''); }}
className="rounded-full p-1 text-[var(--color-text-subtle)] hover:bg-black/[0.06] dark:hover:bg-white/10" className="rounded-full p-1 text-[var(--color-text-subtle)] hover:bg-[var(--card-bg)]"
> >
<X size={14} /> <X size={14} />
</button> </button>

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

@@ -109,14 +109,14 @@ export default function DesktopDock({ isSidebarCollapsed }: DesktopDockProps) {
const Icon = item.icon; const Icon = item.icon;
const active = item.isActive?.(pathname) ?? false; const active = item.isActive?.(pathname) ?? false;
const itemClass = clsx( const itemClass = clsx(
'group relative flex h-10 w-10 items-center justify-center rounded-lg border border-white/20 bg-[var(--color-control)] text-[var(--color-text-muted)] shadow-[var(--shadow-control)] transition duration-150 hover:-translate-y-1 hover:bg-[var(--window-bg-strong)] hover:text-[var(--color-text)] focus-visible:-translate-y-1 sm:h-12 sm:w-12', 'group relative flex h-10 w-10 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 duration-150 hover:-translate-y-1 hover:bg-[var(--card-bg-strong)] hover:text-[var(--color-text)] focus-visible:-translate-y-1 sm:h-12 sm:w-12',
active && 'bg-[var(--window-bg-strong)] text-[var(--color-accent)] ring-1 ring-[var(--color-accent-soft)]', active && 'bg-[var(--card-bg-strong)] text-[var(--color-accent)] ring-1 ring-[var(--color-accent-soft)]',
); );
const content = ( const content = (
<> <>
<Icon size={20} strokeWidth={2.1} /> <Icon size={20} strokeWidth={2.1} />
<span className="pointer-events-none absolute -top-9 hidden whitespace-nowrap rounded-full border border-[var(--color-line)] bg-[var(--window-bg-strong)] px-2.5 py-1 text-xs font-semibold text-[var(--color-text)] opacity-0 shadow-[var(--shadow-control)] backdrop-blur-xl transition group-hover:opacity-100 sm:block"> <span className="pointer-events-none absolute -top-9 hidden whitespace-nowrap rounded-full border border-[var(--card-border)] bg-[var(--card-bg-strong)] px-2.5 py-1 text-xs font-semibold text-[var(--color-text)] opacity-0 shadow-[var(--shadow-control)] backdrop-blur-[18px] transition group-hover:opacity-100 sm:block">
{item.label} {item.label}
</span> </span>
{active && ( {active && (
@@ -162,7 +162,7 @@ export default function DesktopDock({ isSidebarCollapsed }: DesktopDockProps) {
isSidebarCollapsed ? 'md:left-[calc(50%+2.5rem)]' : 'md:left-[calc(50%+9rem)]', isSidebarCollapsed ? 'md:left-[calc(50%+2.5rem)]' : 'md:left-[calc(50%+9rem)]',
)} )}
> >
<div className="flex max-w-[calc(100vw-1rem)] items-end gap-1.5 overflow-x-auto rounded-lg border border-[var(--window-border)] bg-[var(--dock-bg)] px-2 py-2 shadow-[var(--shadow-window)] backdrop-blur-2xl sm:gap-2"> <div className="flex max-w-[calc(100vw-1rem)] items-end gap-1.5 overflow-x-auto rounded-lg border border-[var(--dock-border)] bg-[var(--dock-bg)] px-2 py-2 shadow-[var(--shadow-dock)] backdrop-blur-[30px] sm:gap-2">
{items.map(renderItem)} {items.map(renderItem)}
</div> </div>
</nav> </nav>

2
src/components/layout/DesktopMenuBar.tsx
View File

@@ -58,7 +58,7 @@ export default function DesktopMenuBar({ isSidebarCollapsed }: DesktopMenuBarPro
isSidebarCollapsed ? 'md:left-24' : 'md:left-[19rem]', isSidebarCollapsed ? 'md:left-24' : 'md:left-[19rem]',
)} )}
> >
<div className="flex h-11 items-center justify-between gap-3 rounded-lg border border-[var(--window-border)] bg-[var(--menubar-bg)] px-3 shadow-[var(--shadow-control)] backdrop-blur-2xl"> <div className="flex h-11 items-center justify-between gap-3 rounded-lg border border-[var(--menubar-border)] bg-[var(--menubar-bg)] px-3 shadow-[var(--shadow-menubar)] backdrop-blur-[24px]">
<div className="flex min-w-0 items-center gap-3"> <div className="flex min-w-0 items-center gap-3">
<Link href="/" className="shrink-0 text-sm font-bold text-[var(--color-text)]"> <Link href="/" className="shrink-0 text-sm font-bold text-[var(--color-text)]">
WYPark WYPark

32
src/components/layout/Sidebar.tsx
View File

@@ -74,7 +74,7 @@ function CategoryItem({ category, depth, onNavigate, pathname }: CategoryItemPro
'flex items-center justify-between rounded-lg px-3 py-2 text-sm transition-all', 'flex items-center justify-between rounded-lg px-3 py-2 text-sm transition-all',
isActive isActive
? 'bg-[var(--color-accent-soft)] font-semibold text-[var(--color-accent)] shadow-sm' ? 'bg-[var(--color-accent-soft)] font-semibold text-[var(--color-accent)] shadow-sm'
: 'text-[var(--color-text-muted)] hover:bg-black/[0.04] hover:text-[var(--color-text)] dark:hover:bg-white/10', : 'text-[var(--color-text-muted)] hover:bg-[var(--card-bg)] hover:text-[var(--color-text)]',
)} )}
style={{ marginLeft: `${depth * 8}px` }} style={{ marginLeft: `${depth * 8}px` }}
> >
@@ -95,7 +95,7 @@ function CategoryItem({ category, depth, onNavigate, pathname }: CategoryItemPro
event.stopPropagation(); event.stopPropagation();
setIsExpanded((previous) => !previous); setIsExpanded((previous) => !previous);
}} }}
className="ml-1 rounded-full p-1 transition-colors hover:bg-black/[0.06] dark:hover:bg-white/10" className="ml-1 rounded-full p-1 transition-colors hover:bg-[var(--card-bg)]"
aria-label={isChildrenVisible ? `${category.name} 접기` : `${category.name} 펼치기`} aria-label={isChildrenVisible ? `${category.name} 접기` : `${category.name} 펼치기`}
> >
<ChevronRight <ChevronRight
@@ -171,7 +171,7 @@ function SidebarContent({
<button <button
type="button" type="button"
onClick={() => setIsOpen((previous) => !previous)} onClick={() => setIsOpen((previous) => !previous)}
className="fixed left-4 top-4 z-50 rounded-full border border-[var(--color-line)] bg-[var(--color-control)] p-2 shadow-[var(--shadow-control)] backdrop-blur-xl transition-colors hover:bg-[var(--color-surface-strong)] md:hidden" className="fixed left-4 top-4 z-50 rounded-full border border-[var(--control-border)] bg-[var(--color-control)] p-2 shadow-[var(--shadow-control)] backdrop-blur-[18px] transition-colors hover:bg-[var(--card-bg-strong)] md:hidden"
aria-label={isOpen ? '사이드바 닫기' : '사이드바 열기'} aria-label={isOpen ? '사이드바 닫기' : '사이드바 열기'}
> >
{isOpen ? <X size={20} /> : <Menu size={20} />} {isOpen ? <X size={20} /> : <Menu size={20} />}
@@ -189,7 +189,7 @@ function SidebarContent({
<aside <aside
className={clsx( className={clsx(
'fixed left-0 top-0 z-40 flex h-screen w-72 flex-col overflow-hidden border-r border-[var(--window-border)] bg-[var(--sidebar-bg)] shadow-[var(--shadow-panel)] backdrop-blur-2xl transition-[transform,width] duration-300 ease-out md:translate-x-0', 'fixed left-0 top-0 z-40 flex h-screen w-72 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:translate-x-0',
isDesktopCollapsed ? 'md:w-20' : 'md:w-72', isDesktopCollapsed ? 'md:w-20' : 'md:w-72',
isOpen ? 'translate-x-0' : '-translate-x-full', isOpen ? 'translate-x-0' : '-translate-x-full',
)} )}
@@ -198,7 +198,7 @@ function SidebarContent({
<button <button
type="button" type="button"
onClick={() => onDesktopCollapsedChange(!isDesktopCollapsed)} onClick={() => onDesktopCollapsedChange(!isDesktopCollapsed)}
className="absolute right-3 top-3 hidden h-8 w-8 items-center justify-center rounded-full border border-[var(--color-line)] bg-[var(--color-control)] text-[var(--color-text-muted)] shadow-[var(--shadow-control)] transition hover:bg-[var(--window-bg-strong)] hover:text-[var(--color-text)] md:flex" className="absolute right-3 top-3 hidden h-8 w-8 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"
aria-label={isDesktopCollapsed ? '사이드바 펼치기' : '사이드바 접기'} aria-label={isDesktopCollapsed ? '사이드바 펼치기' : '사이드바 접기'}
> >
{isDesktopCollapsed ? <ChevronsRight size={16} /> : <ChevronsLeft size={16} />} {isDesktopCollapsed ? <ChevronsRight size={16} /> : <ChevronsLeft size={16} />}
@@ -288,7 +288,7 @@ function SidebarContent({
'flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm transition-all', 'flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm transition-all',
pathname === '/category/uncategorized' pathname === '/category/uncategorized'
? 'bg-[var(--color-accent-soft)] font-semibold text-[var(--color-accent)]' ? 'bg-[var(--color-accent-soft)] font-semibold text-[var(--color-accent)]'
: 'text-[var(--color-text-muted)] hover:bg-black/[0.04] hover:text-[var(--color-text)] dark:hover:bg-white/10', : 'text-[var(--color-text-muted)] hover:bg-[var(--card-bg)] hover:text-[var(--color-text)]',
)} )}
> >
<FileQuestion size={16} /> <FileQuestion size={16} />
@@ -310,7 +310,7 @@ function SidebarContent({
'flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm transition-all', 'flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm transition-all',
pathname === '/play/chess' pathname === '/play/chess'
? 'bg-[var(--color-accent-soft)] font-semibold text-[var(--color-accent)]' ? 'bg-[var(--color-accent-soft)] font-semibold text-[var(--color-accent)]'
: 'text-[var(--color-text-muted)] hover:bg-black/[0.04] hover:text-[var(--color-text)] dark:hover:bg-white/10', : 'text-[var(--color-text-muted)] hover:bg-[var(--card-bg)] hover:text-[var(--color-text)]',
)} )}
> >
<Crown size={16} /> <Crown size={16} />
@@ -325,8 +325,8 @@ function SidebarContent({
title="홈" title="홈"
aria-label="홈" aria-label="홈"
className={clsx( className={clsx(
'flex h-11 w-11 items-center justify-center rounded-xl border border-[var(--color-line)] bg-[var(--color-control)] text-[var(--color-text-muted)] shadow-[var(--shadow-control)] transition hover:bg-[var(--window-bg-strong)] hover:text-[var(--color-text)]', '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(--window-bg-strong)] text-[var(--color-accent)]', pathname === '/' && 'bg-[var(--card-bg-strong)] text-[var(--color-accent)]',
)} )}
> >
<Home size={18} /> <Home size={18} />
@@ -344,8 +344,8 @@ function SidebarContent({
title={category.name} title={category.name}
aria-label={category.name} aria-label={category.name}
className={clsx( className={clsx(
'flex h-11 w-11 items-center justify-center rounded-xl border border-[var(--color-line)] bg-[var(--color-control)] text-[var(--color-text-muted)] shadow-[var(--shadow-control)] transition hover:bg-[var(--window-bg-strong)] hover:text-[var(--color-text)]', '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)]',
isActive && 'bg-[var(--window-bg-strong)] text-[var(--color-accent)]', isActive && 'bg-[var(--card-bg-strong)] text-[var(--color-accent)]',
)} )}
> >
<Folder size={18} /> <Folder size={18} />
@@ -358,8 +358,8 @@ function SidebarContent({
title="미분류" title="미분류"
aria-label="미분류" aria-label="미분류"
className={clsx( className={clsx(
'flex h-11 w-11 items-center justify-center rounded-xl border border-[var(--color-line)] bg-[var(--color-control)] text-[var(--color-text-muted)] shadow-[var(--shadow-control)] transition hover:bg-[var(--window-bg-strong)] hover:text-[var(--color-text)]', '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 === '/category/uncategorized' && 'bg-[var(--window-bg-strong)] text-[var(--color-accent)]', pathname === '/category/uncategorized' && 'bg-[var(--card-bg-strong)] text-[var(--color-accent)]',
)} )}
> >
<FileQuestion size={18} /> <FileQuestion size={18} />
@@ -372,8 +372,8 @@ function SidebarContent({
title="체스" title="체스"
aria-label="체스" aria-label="체스"
className={clsx( className={clsx(
'flex h-11 w-11 items-center justify-center rounded-xl border border-[var(--color-line)] bg-[var(--color-control)] text-[var(--color-text-muted)] shadow-[var(--shadow-control)] transition hover:bg-[var(--window-bg-strong)] hover:text-[var(--color-text)]', '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(--window-bg-strong)] text-[var(--color-accent)]', pathname === '/play/chess' && 'bg-[var(--card-bg-strong)] text-[var(--color-accent)]',
)} )}
> >
<Crown size={18} /> <Crown size={18} />
@@ -402,7 +402,7 @@ export default function Sidebar(props: SidebarProps) {
fallback={( fallback={(
<div <div
className={clsx( className={clsx(
'h-screen border-r border-[var(--window-border)] bg-[var(--sidebar-bg)]', 'h-screen border-r border-[var(--sidebar-border)] bg-[var(--sidebar-bg)]',
props.isDesktopCollapsed ? 'w-20' : 'w-72', props.isDesktopCollapsed ? 'w-20' : 'w-72',
)} )}
/> />

10
src/components/layout/TopHeader.tsx
View File

@@ -49,7 +49,7 @@ export default function TopHeader() {
}; };
const quietActionClass = const quietActionClass =
'flex h-9 shrink-0 items-center gap-2 rounded-full border border-[var(--color-line)] bg-[var(--color-control)] px-3 text-sm font-semibold text-[var(--color-text-muted)] shadow-[var(--shadow-control)] backdrop-blur-2xl transition-colors hover:bg-[var(--color-surface-strong)] hover:text-[var(--color-text)]'; 'flex h-9 shrink-0 items-center gap-2 rounded-full border border-[var(--control-border)] bg-[var(--color-control)] px-3 text-sm font-semibold text-[var(--color-text-muted)] shadow-[var(--shadow-control)] backdrop-blur-[18px] transition-colors hover:bg-[var(--card-bg-strong)] hover:text-[var(--color-text)]';
return ( return (
<div <div
@@ -65,7 +65,7 @@ export default function TopHeader() {
].join(' ')} ].join(' ')}
aria-hidden={!isMenuOpen} aria-hidden={!isMenuOpen}
> >
<div className="flex min-w-max items-center gap-2 rounded-full border border-[var(--color-line)] bg-[var(--color-surface)]/85 p-1.5 shadow-[var(--shadow-control)] backdrop-blur-2xl"> <div className="flex min-w-max items-center gap-2 rounded-full border border-[var(--control-border)] bg-[var(--card-bg)] p-1.5 shadow-[var(--shadow-control)] backdrop-blur-[18px]">
<ThemeToggle /> <ThemeToggle />
{_hasHydrated && ( {_hasHydrated && (
@@ -96,7 +96,7 @@ export default function TopHeader() {
<button <button
type="button" type="button"
onClick={handleLogout} onClick={handleLogout}
className="flex h-9 shrink-0 items-center gap-2 rounded-full border border-[var(--color-line)] bg-[var(--color-control)] px-3 text-sm font-medium text-[var(--color-text-muted)] shadow-[var(--shadow-control)] backdrop-blur-2xl transition-colors hover:bg-[var(--color-surface-strong)] hover:text-red-500" className="flex h-9 shrink-0 items-center gap-2 rounded-full border border-[var(--control-border)] bg-[var(--color-control)] px-3 text-sm font-medium text-[var(--color-text-muted)] shadow-[var(--shadow-control)] backdrop-blur-[18px] transition-colors hover:bg-[var(--card-bg-strong)] hover:text-red-500"
> >
<LogOut size={16} /> <LogOut size={16} />
<span className="hidden sm:inline">로그아웃</span> <span className="hidden sm:inline">로그아웃</span>
@@ -116,7 +116,7 @@ export default function TopHeader() {
<Link <Link
href="/signup" href="/signup"
onClick={closeMenu} onClick={closeMenu}
className="flex h-9 shrink-0 items-center gap-2 rounded-full border border-[var(--color-line)] bg-[var(--color-control)] px-3 text-sm font-semibold text-[var(--color-text)] shadow-[var(--shadow-control)] backdrop-blur-2xl transition-all hover:bg-[var(--color-surface-strong)]" className="flex h-9 shrink-0 items-center gap-2 rounded-full border border-[var(--control-border)] bg-[var(--color-control)] px-3 text-sm font-semibold text-[var(--color-text)] shadow-[var(--shadow-control)] backdrop-blur-[18px] transition-all hover:bg-[var(--card-bg-strong)]"
> >
<UserPlus size={16} /> <UserPlus size={16} />
<span className="hidden sm:inline">회원가입</span> <span className="hidden sm:inline">회원가입</span>
@@ -132,7 +132,7 @@ export default function TopHeader() {
aria-label={isMenuOpen ? '상단 메뉴 닫기' : '상단 메뉴 열기'} aria-label={isMenuOpen ? '상단 메뉴 닫기' : '상단 메뉴 열기'}
aria-expanded={isMenuOpen} aria-expanded={isMenuOpen}
onClick={() => setIsMenuOpen((previous) => !previous)} onClick={() => setIsMenuOpen((previous) => !previous)}
className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-[var(--color-line)] bg-[var(--color-control)] text-[var(--color-text)] shadow-[var(--shadow-control)] backdrop-blur-2xl transition-colors hover:bg-[var(--color-surface-strong)]" className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-[var(--control-border)] bg-[var(--color-control)] text-[var(--color-text)] shadow-[var(--shadow-control)] backdrop-blur-[18px] transition-colors hover:bg-[var(--card-bg-strong)]"
> >
{isMenuOpen ? <X size={18} /> : <Menu size={18} />} {isMenuOpen ? <X size={18} /> : <Menu size={18} />}
</button> </button>

6
src/components/post/PostDetailClient.tsx
View File

@@ -78,7 +78,7 @@ export default function PostDetailClient({ slug, initialPost }: PostDetailClient
<button <button
type="button" type="button"
onClick={() => router.push('/')} onClick={() => router.push('/')}
className="rounded-lg border border-[var(--color-line)] bg-[var(--color-control)] px-5 py-2.5 font-semibold text-[var(--color-text-muted)] transition-colors hover:bg-[var(--window-bg-strong)]" className="rounded-lg border border-[var(--control-border)] bg-[var(--color-control)] px-5 py-2.5 font-semibold text-[var(--color-text-muted)] transition-colors hover:bg-[var(--card-bg-strong)]"
> >
메인으로 메인으로
</button> </button>
@@ -144,7 +144,7 @@ export default function PostDetailClient({ slug, initialPost }: PostDetailClient
<WindowSurface title="Navigation" bodyClassName="p-4 md:p-5"> <WindowSurface title="Navigation" bodyClassName="p-4 md:p-5">
<nav className="grid grid-cols-1 gap-4 md:grid-cols-2"> <nav className="grid grid-cols-1 gap-4 md:grid-cols-2">
{prevPost ? ( {prevPost ? (
<Link href={`/posts/${prevPost.slug}`} className="group flex w-full flex-col items-start gap-1 rounded-lg border border-[var(--color-line)] bg-[var(--color-control)] p-5 transition-colors hover:bg-[var(--window-bg-strong)]"> <Link href={`/posts/${prevPost.slug}`} className="group flex w-full flex-col items-start gap-1 rounded-lg border border-[var(--card-border)] bg-[var(--card-bg)] p-5 shadow-[var(--shadow-card)] transition-colors hover:bg-[var(--card-bg-strong)]">
<span className="flex items-center gap-1 text-xs font-bold text-[var(--color-text-subtle)] transition-colors group-hover:text-[var(--color-accent)]"> <span className="flex items-center gap-1 text-xs font-bold text-[var(--color-text-subtle)] transition-colors group-hover:text-[var(--color-accent)]">
<ChevronLeft size={16} /> <ChevronLeft size={16} />
이전 글 이전 글
@@ -163,7 +163,7 @@ export default function PostDetailClient({ slug, initialPost }: PostDetailClient
)} )}
{nextPost ? ( {nextPost ? (
<Link href={`/posts/${nextPost.slug}`} className="group flex w-full flex-col items-end gap-1 rounded-lg border border-[var(--color-line)] bg-[var(--color-control)] p-5 transition-colors hover:bg-[var(--window-bg-strong)]"> <Link href={`/posts/${nextPost.slug}`} className="group flex w-full flex-col items-end gap-1 rounded-lg border border-[var(--card-border)] bg-[var(--card-bg)] p-5 shadow-[var(--shadow-card)] transition-colors hover:bg-[var(--card-bg-strong)]">
<span className="flex items-center gap-1 text-xs font-bold text-[var(--color-text-subtle)] transition-colors group-hover:text-[var(--color-accent)]"> <span className="flex items-center gap-1 text-xs font-bold text-[var(--color-text-subtle)] transition-colors group-hover:text-[var(--color-accent)]">
다음 글 다음 글
<ChevronRight size={16} /> <ChevronRight size={16} />

2
src/components/post/PostListItem.tsx
View File

@@ -33,7 +33,7 @@ export default function PostListItem({ post, showViews = false }: PostListItemPr
<div <div
className={clsx( className={clsx(
'flex items-center justify-between gap-4 rounded-lg px-3 py-4 transition duration-150', 'flex items-center justify-between gap-4 rounded-lg px-3 py-4 transition duration-150',
isNotice ? 'hover:bg-red-500/[0.06]' : 'hover:bg-black/[0.03] dark:hover:bg-white/10', isNotice ? 'hover:bg-red-500/[0.06]' : 'hover:bg-[var(--card-bg)]',
)} )}
> >
<div className="flex min-w-0 flex-1 items-center gap-3"> <div className="flex min-w-0 flex-1 items-center gap-3">

4
src/components/post/PostSearch.tsx
View File

@@ -48,7 +48,7 @@ export default function PostSearch({
onChange={(e) => setKeyword(e.target.value)} onChange={(e) => setKeyword(e.target.value)}
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
placeholder={placeholder} placeholder={placeholder}
className="w-full rounded-full border border-[var(--color-line)] bg-[var(--color-control)] py-2.5 pl-10 pr-10 text-sm text-[var(--color-text)] shadow-[var(--shadow-control)] outline-none transition-all placeholder:text-[var(--color-text-subtle)] focus:border-[var(--color-accent)] focus:bg-[var(--color-surface-strong)]" className="w-full rounded-full border border-[var(--control-border)] bg-[var(--color-control)] py-2.5 pl-10 pr-10 text-sm text-[var(--color-text)] shadow-[var(--shadow-control)] outline-none transition-all placeholder:text-[var(--color-text-subtle)] focus:border-[var(--color-accent)] focus:bg-[var(--card-bg-strong)]"
/> />
<Search <Search
className="absolute left-3.5 top-1/2 -translate-y-1/2 cursor-pointer text-[var(--color-text-subtle)] transition-colors hover:text-[var(--color-accent)]" className="absolute left-3.5 top-1/2 -translate-y-1/2 cursor-pointer text-[var(--color-text-subtle)] transition-colors hover:text-[var(--color-accent)]"
@@ -58,7 +58,7 @@ export default function PostSearch({
{keyword && ( {keyword && (
<button <button
onClick={handleClear} onClick={handleClear}
className="absolute right-3 top-1/2 -translate-y-1/2 rounded-full p-1 text-[var(--color-text-subtle)] transition-colors hover:bg-black/[0.06] hover:text-[var(--color-text)] dark:hover:bg-white/10" className="absolute right-3 top-1/2 -translate-y-1/2 rounded-full p-1 text-[var(--color-text-subtle)] transition-colors hover:bg-[var(--card-bg)] hover:text-[var(--color-text)]"
aria-label="검색어 지우기" aria-label="검색어 지우기"
> >
<X size={14} /> <X size={14} />

6
src/components/theme/ThemeToggle.tsx
View File

@@ -20,7 +20,7 @@ export default function ThemeToggle() {
return ( return (
<div <div
className="inline-flex h-9 shrink-0 items-center rounded-full border border-[var(--color-line)] bg-[var(--color-control)] p-1 shadow-[var(--shadow-control)] backdrop-blur-2xl" className="inline-flex h-9 shrink-0 items-center rounded-full border border-[var(--control-border)] bg-[var(--color-control)] p-1 shadow-[var(--shadow-control)] backdrop-blur-[18px]"
role="group" role="group"
aria-label="화면 테마" aria-label="화면 테마"
> >
@@ -39,8 +39,8 @@ export default function ThemeToggle() {
className={clsx( className={clsx(
'inline-flex h-7 w-7 items-center justify-center rounded-full text-xs font-semibold transition duration-150 sm:w-8', 'inline-flex h-7 w-7 items-center justify-center rounded-full text-xs font-semibold transition duration-150 sm:w-8',
isSelected isSelected
? 'bg-[var(--window-bg-strong)] text-[var(--color-text)] shadow-sm' ? 'bg-[var(--card-bg-strong)] text-[var(--color-text)] shadow-sm'
: 'text-[var(--color-text-subtle)] hover:bg-black/[0.04] hover:text-[var(--color-text)] dark:hover:bg-white/10', : 'text-[var(--color-text-subtle)] hover:bg-[var(--card-bg)] hover:text-[var(--color-text)]',
)} )}
> >
<Icon size={15} strokeWidth={2.2} /> <Icon size={15} strokeWidth={2.2} />

2
src/components/ui/EmptyState.tsx
View File

@@ -17,7 +17,7 @@ export default function EmptyState({
return ( return (
<div <div
className={clsx( className={clsx(
'flex min-h-36 flex-col items-center justify-center rounded-lg border border-dashed border-[var(--color-line)] bg-[var(--color-surface)] px-5 py-10 text-center', 'flex min-h-36 flex-col items-center justify-center rounded-lg border border-dashed border-[var(--card-border)] bg-[var(--card-bg)] px-5 py-10 text-center shadow-[var(--shadow-card)] backdrop-blur-[18px]',
className, className,
)} )}
> >

8
src/components/ui/SegmentedControl.tsx
View File

@@ -7,7 +7,7 @@ export interface SegmentedControlOption<T extends string> {
interface SegmentedControlProps<T extends string> { interface SegmentedControlProps<T extends string> {
ariaLabel: string; ariaLabel: string;
options: SegmentedControlOption<T>[]; options: readonly SegmentedControlOption<T>[];
value: T; value: T;
onChange: (value: T) => void; onChange: (value: T) => void;
className?: string; className?: string;
@@ -23,7 +23,7 @@ export default function SegmentedControl<T extends string>({
return ( return (
<div <div
className={clsx( className={clsx(
'inline-flex h-9 rounded-full border border-[var(--color-line)] bg-[var(--color-control)] p-1 shadow-[var(--shadow-control)] backdrop-blur-xl', 'inline-flex h-9 rounded-full border border-[var(--control-border)] bg-[var(--color-control)] p-1 shadow-[var(--shadow-control)] backdrop-blur-[18px]',
className, className,
)} )}
role="group" role="group"
@@ -41,8 +41,8 @@ export default function SegmentedControl<T extends string>({
className={clsx( className={clsx(
'min-w-14 rounded-full px-3 text-sm font-semibold transition duration-150', 'min-w-14 rounded-full px-3 text-sm font-semibold transition duration-150',
isSelected isSelected
? 'bg-[var(--color-surface-strong)] text-[var(--color-text)] shadow-sm' ? 'bg-[var(--card-bg-strong)] text-[var(--color-text)] shadow-sm'
: 'text-[var(--color-text-muted)] hover:bg-black/[0.04] hover:text-[var(--color-text)] dark:hover:bg-white/10', : 'text-[var(--color-text-muted)] hover:bg-[var(--card-bg)] hover:text-[var(--color-text)]',
)} )}
> >
{option.label} {option.label}

8
src/components/ui/Surface.tsx
View File

@@ -19,11 +19,11 @@ export default function Surface({
return ( return (
<Component <Component
className={clsx( className={clsx(
'rounded-lg border border-[var(--window-border)] backdrop-blur-2xl', 'rounded-lg border border-[var(--card-border)] backdrop-blur-[18px]',
strong strong
? 'bg-[var(--window-bg-strong)] shadow-[var(--shadow-card)]' ? 'bg-[var(--card-bg-strong)] shadow-[var(--shadow-card)]'
: 'bg-[var(--window-bg)] shadow-[var(--shadow-card)]', : 'bg-[var(--card-bg)] shadow-[var(--shadow-card)]',
interactive && 'transition duration-150 hover:-translate-y-0.5 hover:border-black/15 hover:bg-[var(--window-bg-strong)] hover:shadow-[var(--shadow-control)] dark:hover:border-white/20', interactive && 'transition duration-150 hover:-translate-y-0.5 hover:border-[var(--card-border-hover)] hover:bg-[var(--card-bg-strong)] hover:shadow-[var(--shadow-control)]',
className, className,
)} )}
{...props} {...props}

4
src/components/ui/WindowSurface.tsx
View File

@@ -28,13 +28,13 @@ export default function WindowSurface({
return ( return (
<Component <Component
className={clsx( className={clsx(
'w-full overflow-hidden rounded-lg border border-[var(--window-border)] bg-[var(--window-bg)] shadow-[var(--shadow-window)] backdrop-blur-2xl', 'w-full overflow-hidden rounded-lg border border-[var(--window-border)] bg-[var(--window-bg)] shadow-[var(--shadow-window)] backdrop-blur-[28px]',
className, className,
)} )}
{...props} {...props}
> >
{hasTitlebar && ( {hasTitlebar && (
<div className="flex min-h-11 items-center justify-between gap-4 border-b border-[var(--color-line)] bg-[var(--window-titlebar)] px-4 py-2.5"> <div className="flex min-h-11 items-center justify-between gap-4 border-b border-[var(--window-titlebar-border)] bg-[var(--window-titlebar)] px-4 py-2.5">
<div className="flex min-w-0 items-center gap-3"> <div className="flex min-w-0 items-center gap-3">
{showTrafficLights && ( {showTrafficLights && (
<div className="flex shrink-0 items-center gap-1.5" aria-hidden="true"> <div className="flex shrink-0 items-center gap-1.5" aria-hidden="true">