This commit is contained in:
wypark
@@ -34,8 +34,8 @@ export default async function ArchivePage() {
|
||||
return (
|
||||
<main className="mx-auto min-w-0 max-w-[1180px] px-0 py-3 md:py-6">
|
||||
<WindowSurface
|
||||
title="Archive"
|
||||
subtitle={`${totalPosts.toLocaleString()} posts`}
|
||||
title="Finder"
|
||||
subtitle={`Archive · ${totalPosts.toLocaleString()} posts`}
|
||||
bodyClassName="p-4 md:p-7"
|
||||
>
|
||||
<div className="mb-7 min-w-0 border-b border-[var(--color-line)] pb-6 text-center md:text-left">
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
import { use, useState } from 'react';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { clsx } from 'clsx';
|
||||
import { ChevronLeft, ChevronRight, LayoutGrid, List, Loader2, Search as SearchIcon } from 'lucide-react';
|
||||
import { ChevronLeft, ChevronRight, FolderOpen, LayoutGrid, List, Loader2, Search as SearchIcon } from 'lucide-react';
|
||||
import { getPostsByCategory } from '@/api/posts';
|
||||
import PostCard from '@/components/post/PostCard';
|
||||
import PostListItem from '@/components/post/PostListItem';
|
||||
@@ -112,12 +112,16 @@ export default function CategoryPage({ params }: { params: Promise<{ id: string
|
||||
return (
|
||||
<main className="mx-auto w-full px-0 py-4 md:w-[78vw] md:max-w-[1280px] md:py-6">
|
||||
<WindowSurface
|
||||
title={apiCategoryName}
|
||||
title="Finder"
|
||||
subtitle={apiCategoryName}
|
||||
bodyClassName="p-5 md:p-6"
|
||||
>
|
||||
<div className="mb-8 flex flex-col justify-between gap-4 border-b border-[var(--color-line)] pb-5 md:flex-row md:items-center">
|
||||
<h1 className="flex shrink-0 items-baseline gap-2 text-2xl font-bold tracking-normal text-[var(--color-text)]">
|
||||
{apiCategoryName}
|
||||
<h1 className="flex min-w-0 items-center gap-3 text-2xl font-bold tracking-normal text-[var(--color-text)]">
|
||||
<span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border border-[var(--card-border)] bg-[var(--card-bg-strong)] text-[var(--color-accent)] shadow-[var(--shadow-control)]">
|
||||
<FolderOpen size={20} />
|
||||
</span>
|
||||
<span className="min-w-0 truncate">{apiCategoryName}</span>
|
||||
<span className="text-lg font-normal text-[var(--color-text-subtle)]">글 목록</span>
|
||||
</h1>
|
||||
|
||||
|
||||
@@ -24,28 +24,34 @@
|
||||
Consolas,
|
||||
"Liberation Mono",
|
||||
monospace;
|
||||
--color-page: #f7f4fb;
|
||||
--color-page: #edf4ff;
|
||||
--desktop-bg:
|
||||
linear-gradient(135deg, rgba(255, 232, 238, 0.78) 0%, rgba(255, 232, 238, 0) 36%),
|
||||
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(180deg, #fbf8ff 0%, #eef5ff 100%);
|
||||
--window-bg: rgba(255, 255, 255, 0.6);
|
||||
--window-bg-strong: rgba(255, 255, 255, 0.8);
|
||||
--window-titlebar: rgba(255, 255, 255, 0.5);
|
||||
--window-border: rgba(255, 255, 255, 0.68);
|
||||
linear-gradient(118deg, rgba(95, 174, 255, 0.22) 0%, rgba(95, 174, 255, 0) 35%),
|
||||
linear-gradient(152deg, rgba(255, 158, 194, 0.2) 10%, rgba(255, 158, 194, 0) 48%),
|
||||
linear-gradient(46deg, rgba(124, 220, 185, 0.18) 46%, rgba(124, 220, 185, 0) 82%),
|
||||
linear-gradient(180deg, #f9fcff 0%, #eaf3ff 48%, #f8f2ff 100%);
|
||||
--desktop-sheen:
|
||||
linear-gradient(120deg, rgba(255, 255, 255, 0.48) 0 1px, transparent 1px 100%),
|
||||
repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 18px);
|
||||
--desktop-icon-bg: rgba(255, 255, 255, 0.44);
|
||||
--desktop-icon-bg-hover: rgba(255, 255, 255, 0.64);
|
||||
--desktop-icon-border: rgba(255, 255, 255, 0.62);
|
||||
--window-bg: rgba(255, 255, 255, 0.66);
|
||||
--window-bg-strong: rgba(255, 255, 255, 0.86);
|
||||
--window-titlebar: rgba(255, 255, 255, 0.58);
|
||||
--window-border: rgba(255, 255, 255, 0.74);
|
||||
--window-titlebar-border: rgba(39, 54, 82, 0.1);
|
||||
--card-bg: rgba(255, 255, 255, 0.46);
|
||||
--card-bg-strong: rgba(255, 255, 255, 0.68);
|
||||
--card-border: rgba(39, 54, 82, 0.11);
|
||||
--card-border-hover: rgba(39, 54, 82, 0.18);
|
||||
--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(248, 250, 252, 0.46);
|
||||
--dock-border: rgba(255, 255, 255, 0.62);
|
||||
--sidebar-bg: rgba(255, 255, 255, 0.48);
|
||||
--sidebar-border: rgba(255, 255, 255, 0.6);
|
||||
--menubar-bg: rgba(255, 255, 255, 0.58);
|
||||
--menubar-border: rgba(255, 255, 255, 0.72);
|
||||
--dock-bg: rgba(248, 250, 252, 0.54);
|
||||
--dock-border: rgba(255, 255, 255, 0.68);
|
||||
--sidebar-bg: rgba(255, 255, 255, 0.58);
|
||||
--sidebar-border: rgba(255, 255, 255, 0.68);
|
||||
--color-surface: var(--card-bg);
|
||||
--color-surface-strong: var(--card-bg-strong);
|
||||
--color-control: rgba(255, 255, 255, 0.56);
|
||||
@@ -57,9 +63,9 @@
|
||||
--color-accent-hover: #0071e3;
|
||||
--color-accent-soft: rgba(0, 102, 204, 0.1);
|
||||
--color-danger-soft: rgba(255, 59, 48, 0.1);
|
||||
--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-sidebar: 16px 0 42px rgba(70, 92, 130, 0.12), -1px 0 0 rgba(255, 255, 255, 0.46) inset;
|
||||
--shadow-menubar: 0 16px 40px rgba(70, 92, 130, 0.12), 0 1px 0 rgba(255, 255, 255, 0.58) inset;
|
||||
--shadow-window: 0 34px 96px rgba(47, 74, 112, 0.22), 0 16px 34px rgba(47, 74, 112, 0.1), 0 1px 0 rgba(255, 255, 255, 0.8) inset;
|
||||
--shadow-sidebar: 18px 20px 64px rgba(47, 74, 112, 0.16), 0 1px 0 rgba(255, 255, 255, 0.56) inset;
|
||||
--shadow-menubar: 0 12px 32px rgba(47, 74, 112, 0.13), 0 1px 0 rgba(255, 255, 255, 0.62) inset;
|
||||
--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 28px 78px rgba(15, 23, 42, 0.18), 0 12px 32px rgba(15, 23, 42, 0.12), 0 1px 0 rgba(255, 255, 255, 0.68) inset, 0 -1px 0 rgba(15, 23, 42, 0.06) inset;
|
||||
@@ -78,15 +84,21 @@
|
||||
}
|
||||
|
||||
html[data-theme="dark"] {
|
||||
--color-page: #11131d;
|
||||
--color-page: #0c101a;
|
||||
--desktop-bg:
|
||||
linear-gradient(135deg, rgba(88, 56, 104, 0.42) 0%, rgba(88, 56, 104, 0) 38%),
|
||||
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(180deg, #131620 0%, #07090f 100%);
|
||||
--window-bg: rgba(28, 31, 42, 0.68);
|
||||
--window-bg-strong: rgba(39, 42, 56, 0.84);
|
||||
--window-titlebar: rgba(255, 255, 255, 0.075);
|
||||
linear-gradient(118deg, rgba(44, 128, 204, 0.34) 0%, rgba(44, 128, 204, 0) 38%),
|
||||
linear-gradient(150deg, rgba(125, 66, 139, 0.3) 12%, rgba(125, 66, 139, 0) 55%),
|
||||
linear-gradient(46deg, rgba(30, 118, 89, 0.26) 46%, rgba(30, 118, 89, 0) 84%),
|
||||
linear-gradient(180deg, #111827 0%, #080b12 100%);
|
||||
--desktop-sheen:
|
||||
linear-gradient(120deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 100%),
|
||||
repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 18px);
|
||||
--desktop-icon-bg: rgba(22, 25, 34, 0.5);
|
||||
--desktop-icon-bg-hover: rgba(40, 44, 58, 0.72);
|
||||
--desktop-icon-border: rgba(255, 255, 255, 0.16);
|
||||
--window-bg: rgba(25, 29, 40, 0.72);
|
||||
--window-bg-strong: rgba(39, 43, 58, 0.88);
|
||||
--window-titlebar: rgba(255, 255, 255, 0.09);
|
||||
--window-border: rgba(255, 255, 255, 0.18);
|
||||
--window-titlebar-border: rgba(255, 255, 255, 0.13);
|
||||
--card-bg: rgba(43, 46, 60, 0.5);
|
||||
@@ -94,9 +106,9 @@ html[data-theme="dark"] {
|
||||
--card-border: rgba(255, 255, 255, 0.14);
|
||||
--card-border-hover: rgba(255, 255, 255, 0.22);
|
||||
--control-border: rgba(255, 255, 255, 0.13);
|
||||
--menubar-bg: rgba(24, 27, 38, 0.62);
|
||||
--menubar-bg: rgba(14, 17, 26, 0.68);
|
||||
--menubar-border: rgba(255, 255, 255, 0.16);
|
||||
--dock-bg: rgba(18, 20, 28, 0.46);
|
||||
--dock-bg: rgba(18, 20, 28, 0.56);
|
||||
--dock-border: rgba(255, 255, 255, 0.16);
|
||||
--sidebar-bg: rgba(21, 24, 34, 0.64);
|
||||
--sidebar-border: rgba(255, 255, 255, 0.14);
|
||||
@@ -145,6 +157,68 @@ body {
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
.desktop-shell {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
min-height: 100vh;
|
||||
background: var(--desktop-bg);
|
||||
}
|
||||
|
||||
.desktop-shell::before,
|
||||
.desktop-shell::after {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.desktop-shell::before {
|
||||
z-index: 0;
|
||||
background:
|
||||
var(--desktop-sheen),
|
||||
radial-gradient(ellipse at 20% 15%, rgba(255, 255, 255, 0.42), transparent 42%),
|
||||
var(--desktop-bg);
|
||||
}
|
||||
|
||||
.desktop-shell::after {
|
||||
z-index: 0;
|
||||
background-image:
|
||||
repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 3px),
|
||||
linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.18));
|
||||
opacity: 0.32;
|
||||
mix-blend-mode: soft-light;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .desktop-shell::after {
|
||||
opacity: 0.22;
|
||||
}
|
||||
|
||||
.window-surface {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.window-surface::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent 22rem),
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.18), transparent 28%);
|
||||
opacity: 0.52;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .window-surface::before {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 22rem),
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.05), transparent 28%);
|
||||
opacity: 0.72;
|
||||
}
|
||||
|
||||
.window-surface > * {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
pre,
|
||||
code,
|
||||
table {
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
import { Suspense, useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import { Loader2 } from 'lucide-react';
|
||||
import { Loader2, LockKeyhole, UserRound } from 'lucide-react';
|
||||
import { login } from '@/api/auth';
|
||||
import WindowSurface from '@/components/ui/WindowSurface';
|
||||
import { useAuthStore } from '@/store/authStore';
|
||||
@@ -61,12 +61,15 @@ function LoginForm() {
|
||||
return (
|
||||
<div className="flex min-h-[calc(100vh-14rem)] items-center justify-center px-1 py-8">
|
||||
<WindowSurface
|
||||
title="Login"
|
||||
title="Login Window"
|
||||
subtitle="WYPark OS"
|
||||
className="w-full max-w-md"
|
||||
bodyClassName="p-8"
|
||||
>
|
||||
<div className="mb-8 text-center">
|
||||
<div className="mx-auto mb-4 flex h-20 w-20 items-center justify-center rounded-2xl border border-[var(--card-border)] bg-[var(--card-bg-strong)] text-[var(--color-accent)] shadow-[var(--shadow-card)]">
|
||||
<UserRound size={34} strokeWidth={1.9} />
|
||||
</div>
|
||||
<h1 className="text-3xl font-bold text-[var(--color-text)]">로그인</h1>
|
||||
<p className="mt-2 text-[var(--color-text-muted)]">블로그 데스크톱으로 다시 들어갑니다.</p>
|
||||
</div>
|
||||
@@ -103,7 +106,7 @@ function LoginForm() {
|
||||
disabled={loading}
|
||||
className="flex w-full items-center justify-center gap-2 rounded-lg bg-[var(--color-accent)] py-3 font-bold text-white transition-colors hover:bg-[var(--color-accent-hover)] disabled:cursor-not-allowed disabled:opacity-60"
|
||||
>
|
||||
{loading && <Loader2 className="animate-spin" size={20} />}
|
||||
{loading ? <Loader2 className="animate-spin" size={20} /> : <LockKeyhole size={18} />}
|
||||
로그인
|
||||
</button>
|
||||
</form>
|
||||
|
||||
184
src/app/page.tsx
184
src/app/page.tsx
@@ -5,6 +5,9 @@ import {
|
||||
Archive,
|
||||
ChevronRight,
|
||||
Clock,
|
||||
FileText,
|
||||
FolderOpen,
|
||||
HardDrive,
|
||||
Search,
|
||||
TrendingUp,
|
||||
} from 'lucide-react';
|
||||
@@ -96,32 +99,38 @@ function SearchResults({
|
||||
|
||||
return (
|
||||
<WindowSurface
|
||||
title="Search"
|
||||
title="Spotlight"
|
||||
subtitle={`"${keyword}"`}
|
||||
bodyClassName="p-4 md:p-6"
|
||||
bodyClassName="p-0"
|
||||
className="animate-in fade-in slide-in-from-bottom-2 duration-300"
|
||||
>
|
||||
<div className="mb-6 flex min-w-0 flex-col gap-2 border-b border-[var(--color-line)] pb-5">
|
||||
<div className="flex min-w-0 items-center gap-2 text-[var(--color-accent)]">
|
||||
<Search size={22} className="shrink-0" />
|
||||
<h1 className="min-w-0 break-words text-2xl font-bold tracking-normal text-[var(--color-text)]">
|
||||
검색 결과
|
||||
</h1>
|
||||
<div className="border-b border-[var(--color-line)] bg-[var(--window-titlebar)] px-4 py-4 md:px-6">
|
||||
<div className="flex min-w-0 items-center gap-3">
|
||||
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border border-[var(--card-border)] bg-[var(--card-bg-strong)] text-[var(--color-accent)] shadow-[var(--shadow-control)]">
|
||||
<Search size={20} />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<h1 className="min-w-0 break-words text-2xl font-bold tracking-normal text-[var(--color-text)]">
|
||||
검색 결과
|
||||
</h1>
|
||||
<p className="break-words text-sm text-[var(--color-text-muted)]">
|
||||
검색어 <span className="font-semibold text-[var(--color-text)]">{keyword}</span>에 대한 글 {searchTotalElements.toLocaleString()}건
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="break-words text-sm text-[var(--color-text-muted)]">
|
||||
검색어 <span className="font-semibold text-[var(--color-text)]">{keyword}</span>에 대한 글 {searchTotalElements.toLocaleString()}건
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{searchResults.length > 0 ? (
|
||||
<div className="divide-y divide-[var(--color-line)]">
|
||||
{searchResults.map((post) => (
|
||||
<CompactPostRow key={post.id} post={post} />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<EmptyState title="검색 결과가 없습니다." description="다른 키워드로 다시 찾아보세요." />
|
||||
)}
|
||||
<div className="p-4 md:p-6">
|
||||
{searchResults.length > 0 ? (
|
||||
<div className="divide-y divide-[var(--color-line)] rounded-lg border border-[var(--card-border)] bg-[var(--card-bg)] px-2">
|
||||
{searchResults.map((post) => (
|
||||
<CompactPostRow key={post.id} post={post} />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<EmptyState title="검색 결과가 없습니다." description="다른 키워드로 다시 찾아보세요." />
|
||||
)}
|
||||
</div>
|
||||
</WindowSurface>
|
||||
);
|
||||
}
|
||||
@@ -180,6 +189,11 @@ function CompactPostRow({
|
||||
{rank}
|
||||
</span>
|
||||
)}
|
||||
{rank === undefined && (
|
||||
<span className="mt-1 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-[var(--card-border)] bg-[var(--card-bg-strong)] text-[var(--color-accent)] shadow-[var(--shadow-control)]">
|
||||
<FileText size={17} />
|
||||
</span>
|
||||
)}
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="mb-1.5 flex min-w-0 flex-wrap items-center gap-2">
|
||||
<StatusBadge tone={isNoticePost(post) ? 'danger' : 'neutral'} className="shrink-0">
|
||||
@@ -226,7 +240,7 @@ function PostListPanel({
|
||||
featured?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<Surface as="section" strong className="min-w-0 overflow-hidden">
|
||||
<Surface as="section" strong className="min-w-0 overflow-hidden shadow-none">
|
||||
<div className="flex min-h-12 min-w-0 items-center justify-between gap-3 border-b border-[var(--window-titlebar-border)] bg-[var(--window-titlebar)] px-4 py-3 md:px-5">
|
||||
<h2 className="flex min-w-0 items-center gap-2 text-sm font-bold text-[var(--color-text)]">
|
||||
{icon}
|
||||
@@ -259,6 +273,31 @@ function PostListPanel({
|
||||
);
|
||||
}
|
||||
|
||||
function FinderLocation({
|
||||
href,
|
||||
icon,
|
||||
label,
|
||||
meta,
|
||||
}: {
|
||||
href: string;
|
||||
icon: ReactNode;
|
||||
label: string;
|
||||
meta: string;
|
||||
}) {
|
||||
return (
|
||||
<Link
|
||||
href={href}
|
||||
className="group flex min-w-0 items-center gap-2 rounded-lg px-2.5 py-2 text-sm font-semibold text-[var(--color-text-muted)] transition hover:bg-[var(--card-bg-strong)] hover:text-[var(--color-text)]"
|
||||
>
|
||||
<span className="shrink-0 text-[var(--color-accent)]">{icon}</span>
|
||||
<span className="min-w-0 flex-1 truncate">{label}</span>
|
||||
<span className="shrink-0 text-xs font-medium tabular-nums text-[var(--color-text-subtle)] group-hover:text-[var(--color-text-muted)]">
|
||||
{meta}
|
||||
</span>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
export default async function Home({ searchParams }: HomePageProps) {
|
||||
const keyword = await getSearchKeyword(searchParams);
|
||||
|
||||
@@ -286,7 +325,8 @@ export default async function Home({ searchParams }: HomePageProps) {
|
||||
<main className="mx-auto min-w-0 max-w-[1180px] px-0 py-3 md:py-6">
|
||||
<h1 className="sr-only">{SITE_NAME}</h1>
|
||||
<WindowSurface
|
||||
title="WYPark"
|
||||
title="Finder"
|
||||
subtitle="WYPark.local"
|
||||
controls={(
|
||||
<Link
|
||||
href="/archive"
|
||||
@@ -296,24 +336,92 @@ export default async function Home({ searchParams }: HomePageProps) {
|
||||
<Archive size={14} />
|
||||
</Link>
|
||||
)}
|
||||
bodyClassName="space-y-6 p-4 md:p-6"
|
||||
bodyClassName="p-0"
|
||||
>
|
||||
<NoticeStrip notices={notices} />
|
||||
<div className="grid min-w-0 lg:grid-cols-[14rem_minmax(0,1fr)]">
|
||||
<aside className="hidden min-w-0 border-r border-[var(--color-line)] bg-[var(--window-titlebar)] p-4 lg:block">
|
||||
<div className="mb-4 flex items-center gap-2 px-2 text-xs font-bold uppercase tracking-normal text-[var(--color-text-subtle)]">
|
||||
<HardDrive size={14} />
|
||||
위치
|
||||
</div>
|
||||
<nav className="space-y-1" aria-label="Finder 위치">
|
||||
<FinderLocation
|
||||
href="/"
|
||||
icon={<FolderOpen size={16} />}
|
||||
label="최근 글"
|
||||
meta={latestList.length.toString()}
|
||||
/>
|
||||
<FinderLocation
|
||||
href="/archive"
|
||||
icon={<Archive size={16} />}
|
||||
label="아카이브"
|
||||
meta="All"
|
||||
/>
|
||||
<FinderLocation
|
||||
href="/play/chess"
|
||||
icon={<TrendingUp size={16} />}
|
||||
label="체스"
|
||||
meta="App"
|
||||
/>
|
||||
</nav>
|
||||
|
||||
<section className="grid min-w-0 gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(280px,360px)]">
|
||||
<PostListPanel
|
||||
title="최신 글"
|
||||
icon={<Clock size={18} className="shrink-0 text-[var(--color-accent)]" />}
|
||||
posts={latestList}
|
||||
featured
|
||||
/>
|
||||
<PostListPanel
|
||||
title="인기 글"
|
||||
icon={<TrendingUp size={18} className="shrink-0 text-[var(--color-accent)]" />}
|
||||
posts={popularList}
|
||||
isPopular
|
||||
/>
|
||||
</section>
|
||||
<div className="mt-7 border-t border-[var(--color-line)] pt-4">
|
||||
<div className="mb-3 px-2 text-xs font-bold uppercase tracking-normal text-[var(--color-text-subtle)]">
|
||||
스마트 폴더
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<FinderLocation
|
||||
href="/"
|
||||
icon={<Clock size={16} />}
|
||||
label="오늘의 기록"
|
||||
meta={notices.length.toString()}
|
||||
/>
|
||||
<FinderLocation
|
||||
href="/archive"
|
||||
icon={<FileText size={16} />}
|
||||
label="모든 문서"
|
||||
meta="Blog"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div className="min-w-0 space-y-6 p-4 md:p-6">
|
||||
<div className="flex min-w-0 flex-col justify-between gap-3 rounded-lg border border-[var(--card-border)] bg-[var(--card-bg)] px-4 py-3 md:flex-row md:items-center">
|
||||
<div className="flex min-w-0 items-center gap-3">
|
||||
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border border-[var(--card-border)] bg-[var(--card-bg-strong)] text-[var(--color-accent)] shadow-[var(--shadow-control)]">
|
||||
<HardDrive size={20} />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="truncate text-sm font-bold text-[var(--color-text)]">WYPark HD</p>
|
||||
<p className="truncate text-xs text-[var(--color-text-subtle)]">
|
||||
최근 글 {latestList.length.toLocaleString()}개 · 인기 글 {popularList.length.toLocaleString()}개
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-xs font-semibold tabular-nums text-[var(--color-text-subtle)]">
|
||||
{new Intl.DateTimeFormat('ko-KR', { dateStyle: 'medium' }).format(new Date())}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<NoticeStrip notices={notices} />
|
||||
|
||||
<section className="grid min-w-0 gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(280px,360px)]">
|
||||
<PostListPanel
|
||||
title="최신 글"
|
||||
icon={<Clock size={18} className="shrink-0 text-[var(--color-accent)]" />}
|
||||
posts={latestList}
|
||||
featured
|
||||
/>
|
||||
<PostListPanel
|
||||
title="인기 글"
|
||||
icon={<TrendingUp size={18} className="shrink-0 text-[var(--color-accent)]" />}
|
||||
posts={popularList}
|
||||
isPopular
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</WindowSurface>
|
||||
</main>
|
||||
);
|
||||
|
||||
@@ -4,6 +4,7 @@ import { useState } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import Link from 'next/link';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { MailCheck, UserPlus } from 'lucide-react';
|
||||
import { signup, verifyEmail } from '@/api/auth';
|
||||
import WindowSurface from '@/components/ui/WindowSurface';
|
||||
import { SignupRequest } from '@/types';
|
||||
@@ -74,12 +75,15 @@ export default function SignupPage() {
|
||||
return (
|
||||
<div className="flex min-h-[calc(100vh-14rem)] items-center justify-center px-1 py-8">
|
||||
<WindowSurface
|
||||
title="Signup"
|
||||
title="Account Setup"
|
||||
subtitle={step === 'FORM' ? 'Create account' : registeredEmail}
|
||||
className="w-full max-w-md"
|
||||
bodyClassName="p-8"
|
||||
>
|
||||
<div className="mb-8 text-center">
|
||||
<div className="mx-auto mb-4 flex h-20 w-20 items-center justify-center rounded-2xl border border-[var(--card-border)] bg-[var(--card-bg-strong)] text-[var(--color-accent)] shadow-[var(--shadow-card)]">
|
||||
{step === 'FORM' ? <UserPlus size={34} strokeWidth={1.9} /> : <MailCheck size={34} strokeWidth={1.9} />}
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-[var(--color-text)]">회원가입</h1>
|
||||
<p className="mt-2 text-sm text-[var(--color-text-muted)]">
|
||||
{step === 'FORM' ? '블로그 OS 계정을 만듭니다.' : '이메일로 전송된 6자리 코드를 입력하세요.'}
|
||||
|
||||
@@ -58,7 +58,7 @@ export default function AdminRouteShell({ children }: { children: React.ReactNod
|
||||
|
||||
return (
|
||||
<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="System Settings" subtitle="Admin Console" bodyClassName="p-2">
|
||||
<nav
|
||||
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="관리자 메뉴"
|
||||
|
||||
@@ -23,7 +23,6 @@ import ThemeToggle from '@/components/theme/ThemeToggle';
|
||||
import { useAuthStore } from '@/store/authStore';
|
||||
|
||||
interface DesktopDockProps {
|
||||
isSidebarCollapsed: boolean;
|
||||
onOpenMobileMenu: () => void;
|
||||
}
|
||||
|
||||
@@ -115,7 +114,7 @@ const dockToneStyles: Record<string, DockToneStyle> = {
|
||||
|
||||
const getDockToneStyle = (key: string) => dockToneStyles[key] ?? dockToneStyles.default;
|
||||
|
||||
export default function DesktopDock({ isSidebarCollapsed, onOpenMobileMenu }: DesktopDockProps) {
|
||||
export default function DesktopDock({ onOpenMobileMenu }: DesktopDockProps) {
|
||||
const pathname = usePathname();
|
||||
const router = useRouter();
|
||||
const { isLoggedIn, role, logout, _hasHydrated } = useAuthStore();
|
||||
@@ -493,9 +492,7 @@ export default function DesktopDock({ isSidebarCollapsed, onOpenMobileMenu }: De
|
||||
<nav
|
||||
aria-label="빠른 실행 Dock"
|
||||
className={clsx(
|
||||
'fixed bottom-0 left-1/2 z-40 hidden -translate-x-1/2 md:block',
|
||||
'transition-[left] duration-300 ease-out',
|
||||
isSidebarCollapsed ? 'md:left-[calc(50%+2.5rem)]' : 'md:left-[calc(50%+9rem)]',
|
||||
'fixed bottom-1 left-1/2 z-50 hidden -translate-x-1/2 md:block',
|
||||
)}
|
||||
>
|
||||
<div
|
||||
@@ -508,7 +505,7 @@ export default function DesktopDock({ isSidebarCollapsed, onOpenMobileMenu }: De
|
||||
'relative flex items-end justify-center transition-[width,height,padding] duration-[560ms] ease-[cubic-bezier(0.22,1,0.36,1)]',
|
||||
isDockRangeExpanded
|
||||
? 'h-32 w-[min(calc(100vw-2rem),56rem)] px-8 pb-7 pt-12'
|
||||
: 'h-12 w-16 px-0 pb-0 pt-0',
|
||||
: 'h-14 w-16 px-0 pb-0 pt-0',
|
||||
)}
|
||||
>
|
||||
<button
|
||||
@@ -518,7 +515,7 @@ export default function DesktopDock({ isSidebarCollapsed, onOpenMobileMenu }: De
|
||||
onMouseEnter={expandDock}
|
||||
onFocus={handleDockHandleFocus}
|
||||
className={clsx(
|
||||
'absolute bottom-0 left-1/2 z-10 flex h-9 w-12 -translate-x-1/2 items-start justify-center rounded-t-lg border border-b-0 border-[var(--dock-item-border-hover)] bg-[var(--dock-item-bg-active)] pt-1.5 text-[var(--dock-item-fg-strong)] shadow-[var(--shadow-control)] backdrop-blur-[22px]',
|
||||
'absolute bottom-0 left-1/2 z-10 flex h-10 w-12 -translate-x-1/2 items-start justify-center rounded-t-lg border border-b-0 border-[var(--dock-item-border-hover)] bg-[var(--dock-item-bg-active)] pt-1.5 text-[var(--dock-item-fg-strong)] shadow-[var(--shadow-control)] backdrop-blur-[22px]',
|
||||
'transition-[transform,opacity,width,height] duration-[560ms] ease-[cubic-bezier(0.22,1,0.36,1)] hover:bg-[var(--dock-item-bg-hover)] focus-visible:bg-[var(--dock-item-bg-hover)]',
|
||||
isDockRangeExpanded
|
||||
? 'pointer-events-none translate-y-5 scale-75 opacity-0'
|
||||
@@ -532,7 +529,7 @@ export default function DesktopDock({ isSidebarCollapsed, onOpenMobileMenu }: De
|
||||
<div
|
||||
data-dock-panel="true"
|
||||
className={clsx(
|
||||
'flex max-w-[calc(100vw-2rem)] origin-bottom items-end gap-2 overflow-visible rounded-lg border border-[var(--dock-border)] bg-[var(--dock-bg)] px-2 py-2 shadow-[var(--shadow-dock)] backdrop-blur-[30px]',
|
||||
'flex max-w-[calc(100vw-2rem)] origin-bottom items-end gap-2 overflow-visible rounded-xl border border-[var(--dock-border)] bg-[var(--dock-bg)] px-2 py-2 shadow-[var(--shadow-dock)] backdrop-blur-[30px]',
|
||||
'transition-[transform,opacity,filter] duration-[560ms] ease-[cubic-bezier(0.22,1,0.36,1)]',
|
||||
isDockOpen
|
||||
? 'pointer-events-auto translate-y-0 scale-x-100 scale-y-100 opacity-100 blur-0'
|
||||
|
||||
@@ -1,15 +1,14 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { clsx } from 'clsx';
|
||||
import { BatteryMedium, ChevronRight, Command, Monitor, Search, Wifi } from 'lucide-react';
|
||||
import { getProfile } from '@/api/profile';
|
||||
import ThemeToggle from '@/components/theme/ThemeToggle';
|
||||
|
||||
interface DesktopMenuBarProps {
|
||||
isSidebarCollapsed: boolean;
|
||||
}
|
||||
import { useAuthStore } from '@/store/authStore';
|
||||
|
||||
const defaultProfile = {
|
||||
githubUrl: 'https://github.com',
|
||||
@@ -24,11 +23,11 @@ const getCategoryTitle = (pathname: string) => {
|
||||
|
||||
const getAppTitle = (pathname: string) => {
|
||||
if (pathname.startsWith('/admin/posts/new')) return 'Write';
|
||||
if (pathname.startsWith('/admin/posts')) return 'Posts';
|
||||
if (pathname.startsWith('/admin/comments')) return 'Comments';
|
||||
if (pathname.startsWith('/admin/categories')) return 'Categories';
|
||||
if (pathname.startsWith('/admin/profile')) return 'Profile';
|
||||
if (pathname.startsWith('/admin')) return 'Dashboard';
|
||||
if (pathname.startsWith('/admin/posts')) return 'Post Manager';
|
||||
if (pathname.startsWith('/admin/comments')) return 'Comment Center';
|
||||
if (pathname.startsWith('/admin/categories')) return 'Category Studio';
|
||||
if (pathname.startsWith('/admin/profile')) return 'Profile Panel';
|
||||
if (pathname.startsWith('/admin')) return 'Admin Console';
|
||||
if (pathname.startsWith('/archive')) return 'Archive';
|
||||
if (pathname.startsWith('/category')) return getCategoryTitle(pathname);
|
||||
if (pathname.startsWith('/posts')) return 'Reader';
|
||||
@@ -38,8 +37,22 @@ const getAppTitle = (pathname: string) => {
|
||||
return '홈';
|
||||
};
|
||||
|
||||
export default function DesktopMenuBar({ isSidebarCollapsed }: DesktopMenuBarProps) {
|
||||
const formatMenuTime = (date: Date | null) => {
|
||||
if (!date) return '';
|
||||
|
||||
return new Intl.DateTimeFormat('ko-KR', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
weekday: 'short',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
}).format(date);
|
||||
};
|
||||
|
||||
export default function DesktopMenuBar() {
|
||||
const pathname = usePathname();
|
||||
const { isLoggedIn, role, _hasHydrated } = useAuthStore();
|
||||
const [now, setNow] = useState<Date | null>(null);
|
||||
|
||||
const { data: profile } = useQuery({
|
||||
queryKey: ['profile'],
|
||||
@@ -47,37 +60,86 @@ export default function DesktopMenuBar({ isSidebarCollapsed }: DesktopMenuBarPro
|
||||
retry: 0,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const updateTime = () => setNow(new Date());
|
||||
const frameId = window.requestAnimationFrame(updateTime);
|
||||
const timerId = window.setInterval(updateTime, 60_000);
|
||||
|
||||
return () => {
|
||||
window.cancelAnimationFrame(frameId);
|
||||
window.clearInterval(timerId);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const githubUrl = profile?.githubUrl || defaultProfile.githubUrl;
|
||||
const email = profile?.email || defaultProfile.email;
|
||||
const menuLinkClass = 'text-xs font-semibold text-[var(--color-text-subtle)] transition hover:text-[var(--color-text)]';
|
||||
const isAdmin = _hasHydrated && isLoggedIn && role?.includes('ADMIN');
|
||||
const menuItems = useMemo(() => {
|
||||
const items = [
|
||||
{ href: '/', label: '홈' },
|
||||
{ href: '/archive', label: '아카이브' },
|
||||
{ href: '/play/chess', label: '체스' },
|
||||
];
|
||||
|
||||
if (isAdmin) {
|
||||
items.push({ href: '/admin', label: '관리자' }, { href: '/admin/posts/new', label: '새 글' });
|
||||
}
|
||||
|
||||
return items;
|
||||
}, [isAdmin]);
|
||||
const menuLinkClass = 'hidden rounded px-2 py-1 text-xs font-semibold text-[var(--color-text-muted)] transition hover:bg-[var(--card-bg)] hover:text-[var(--color-text)] lg:inline-flex';
|
||||
const systemIconClass = 'text-[var(--color-text-muted)]';
|
||||
|
||||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
'fixed right-6 top-3 z-40 hidden transition-[left] duration-300 ease-out md:block',
|
||||
isSidebarCollapsed ? 'md:left-24' : 'md:left-[19rem]',
|
||||
)}
|
||||
className="fixed inset-x-0 top-0 z-[70] hidden h-10 border-b border-[var(--menubar-border)] bg-[var(--menubar-bg)] px-3 shadow-[var(--shadow-menubar)] backdrop-blur-[28px] md:block"
|
||||
role="menubar"
|
||||
aria-label="시스템 메뉴 막대"
|
||||
>
|
||||
<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">
|
||||
<Link href="/" className="shrink-0 text-sm font-bold text-[var(--color-text)]">
|
||||
<div className="flex h-full min-w-0 items-center justify-between gap-3">
|
||||
<div className="flex min-w-0 items-center gap-1">
|
||||
<Link
|
||||
href="/"
|
||||
className="mr-1 inline-flex h-7 shrink-0 items-center gap-1.5 rounded px-2 text-sm font-bold text-[var(--color-text)] transition hover:bg-[var(--card-bg)]"
|
||||
>
|
||||
<Command size={15} strokeWidth={2.4} />
|
||||
WYPark
|
||||
</Link>
|
||||
<span className="hidden h-4 w-px bg-[var(--color-line)] sm:block" />
|
||||
<span className="truncate text-sm font-semibold text-[var(--color-text-muted)]">
|
||||
{getAppTitle(pathname)}
|
||||
</span>
|
||||
<div className="hidden items-center gap-3 md:flex">
|
||||
<a href={githubUrl} target="_blank" rel="noreferrer" className={menuLinkClass}>
|
||||
GitHub
|
||||
</a>
|
||||
<a href={`mailto:${email}`} className={menuLinkClass}>
|
||||
Email
|
||||
</a>
|
||||
|
||||
<div className="hidden min-w-0 items-center gap-1 sm:flex">
|
||||
{menuItems.map((item) => (
|
||||
<Link key={item.href} href={item.href} className={menuLinkClass}>
|
||||
{item.label}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<span className="mx-1 hidden h-4 w-px bg-[var(--color-line)] xl:block" />
|
||||
<div className="hidden min-w-0 items-center gap-1.5 rounded px-2 py-1 text-xs font-semibold text-[var(--color-text-subtle)] xl:flex">
|
||||
<Monitor size={14} />
|
||||
<span className="truncate text-[var(--color-text-muted)]">{getAppTitle(pathname)}</span>
|
||||
<ChevronRight size={13} />
|
||||
<span className="truncate">{profile?.name || 'WYPark'}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ThemeToggle />
|
||||
<div className="flex shrink-0 items-center gap-2">
|
||||
<a href={githubUrl} target="_blank" rel="noreferrer" className={clsx(menuLinkClass, 'hidden xl:inline-flex')}>
|
||||
GitHub
|
||||
</a>
|
||||
<a href={`mailto:${email}`} className={clsx(menuLinkClass, 'hidden xl:inline-flex')}>
|
||||
Email
|
||||
</a>
|
||||
<Search size={15} className={systemIconClass} />
|
||||
<Wifi size={15} className={systemIconClass} />
|
||||
<BatteryMedium size={17} className={systemIconClass} />
|
||||
<span className="hidden min-w-[8.5rem] text-right text-xs font-semibold tabular-nums text-[var(--color-text-muted)] lg:block">
|
||||
{formatMenuTime(now)}
|
||||
</span>
|
||||
<div className="scale-[0.88]">
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -2,11 +2,110 @@
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import type { ReactNode } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { clsx } from 'clsx';
|
||||
import type { LucideIcon } from 'lucide-react';
|
||||
import { Archive, Crown, Home, PenLine, Settings } from 'lucide-react';
|
||||
import DesktopDock from '@/components/layout/DesktopDock';
|
||||
import DesktopMenuBar from '@/components/layout/DesktopMenuBar';
|
||||
import Sidebar from '@/components/layout/Sidebar';
|
||||
import { useAuthStore } from '@/store/authStore';
|
||||
|
||||
type DesktopShortcut = {
|
||||
href: string;
|
||||
label: string;
|
||||
caption: string;
|
||||
icon: LucideIcon;
|
||||
tone: string;
|
||||
};
|
||||
|
||||
const shortcutToneClass: Record<string, string> = {
|
||||
blue: 'from-sky-300/70 to-blue-500/80 text-white',
|
||||
violet: 'from-violet-300/70 to-indigo-500/80 text-white',
|
||||
amber: 'from-amber-200/80 to-orange-400/80 text-white',
|
||||
slate: 'from-slate-200/75 to-slate-500/75 text-white',
|
||||
rose: 'from-rose-200/80 to-rose-500/75 text-white',
|
||||
};
|
||||
|
||||
function DesktopShortcuts() {
|
||||
const { isLoggedIn, role, _hasHydrated } = useAuthStore();
|
||||
const isAdmin = _hasHydrated && isLoggedIn && role?.includes('ADMIN');
|
||||
|
||||
const shortcuts: DesktopShortcut[] = [
|
||||
{
|
||||
href: '/',
|
||||
label: 'WYPark',
|
||||
caption: 'Home',
|
||||
icon: Home,
|
||||
tone: 'blue',
|
||||
},
|
||||
{
|
||||
href: '/archive',
|
||||
label: 'Archive',
|
||||
caption: 'Posts',
|
||||
icon: Archive,
|
||||
tone: 'violet',
|
||||
},
|
||||
{
|
||||
href: '/play/chess',
|
||||
label: 'Chess',
|
||||
caption: 'Puzzle',
|
||||
icon: Crown,
|
||||
tone: 'amber',
|
||||
},
|
||||
];
|
||||
|
||||
if (isAdmin) {
|
||||
shortcuts.push(
|
||||
{
|
||||
href: '/admin',
|
||||
label: 'Console',
|
||||
caption: 'Admin',
|
||||
icon: Settings,
|
||||
tone: 'slate',
|
||||
},
|
||||
{
|
||||
href: '/admin/posts/new',
|
||||
label: 'Write',
|
||||
caption: 'Editor',
|
||||
icon: PenLine,
|
||||
tone: 'rose',
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="pointer-events-none fixed right-5 top-16 z-30 hidden w-24 flex-col gap-4 2xl:flex">
|
||||
{shortcuts.map((shortcut) => {
|
||||
const Icon = shortcut.icon;
|
||||
const toneClass = shortcutToneClass[shortcut.tone] ?? shortcutToneClass.blue;
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={shortcut.href}
|
||||
href={shortcut.href}
|
||||
className="pointer-events-auto group flex min-w-0 flex-col items-center gap-1.5 rounded-lg px-1.5 py-2 text-center text-[var(--color-text)] outline-none transition hover:bg-[var(--desktop-icon-bg-hover)] focus-visible:bg-[var(--desktop-icon-bg-hover)]"
|
||||
title={shortcut.label}
|
||||
>
|
||||
<span
|
||||
className={clsx(
|
||||
'flex h-12 w-12 items-center justify-center rounded-xl border border-[var(--desktop-icon-border)] bg-gradient-to-br shadow-[var(--shadow-control)] ring-1 ring-white/20 transition group-hover:-translate-y-0.5',
|
||||
toneClass,
|
||||
)}
|
||||
>
|
||||
<Icon size={23} strokeWidth={2.15} />
|
||||
</span>
|
||||
<span className="w-full truncate rounded bg-black/10 px-1 text-[11px] font-semibold leading-4 text-white shadow-sm backdrop-blur-sm dark:bg-black/30">
|
||||
{shortcut.label}
|
||||
</span>
|
||||
<span className="sr-only">{shortcut.caption}</span>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function DesktopShell({ children }: { children: ReactNode }) {
|
||||
const pathname = usePathname();
|
||||
@@ -41,30 +140,30 @@ export default function DesktopShell({ children }: { children: ReactNode }) {
|
||||
const isChessRoute = pathname.startsWith('/play/chess');
|
||||
|
||||
return (
|
||||
<div className="min-h-screen overflow-x-clip">
|
||||
<div className="desktop-shell min-h-screen overflow-x-clip">
|
||||
<Sidebar
|
||||
isDesktopCollapsed={isSidebarCollapsed}
|
||||
isMobileOpen={isMobileSidebarOpen}
|
||||
onDesktopCollapsedChange={handleSidebarCollapsedChange}
|
||||
onMobileOpenChange={setIsMobileSidebarOpen}
|
||||
/>
|
||||
<DesktopMenuBar isSidebarCollapsed={isSidebarCollapsed} />
|
||||
<DesktopMenuBar />
|
||||
<DesktopShortcuts />
|
||||
<DesktopDock
|
||||
isSidebarCollapsed={isSidebarCollapsed}
|
||||
onOpenMobileMenu={() => setIsMobileSidebarOpen(true)}
|
||||
/>
|
||||
|
||||
<main
|
||||
className={clsx(
|
||||
'relative min-w-0 max-w-full flex-1 overflow-x-clip transition-[margin,width] duration-300 ease-out',
|
||||
'relative z-10 min-w-0 max-w-full flex-1 overflow-x-clip transition-[margin,width] duration-300 ease-out',
|
||||
isSidebarCollapsed
|
||||
? 'md:ml-20 md:w-[calc(100%-5rem)]'
|
||||
: 'md:ml-72 md:w-[calc(100%-18rem)]',
|
||||
? 'md:ml-[7rem] md:w-[calc(100%-7rem)]'
|
||||
: 'md:ml-[20rem] md:w-[calc(100%-20rem)]',
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={clsx(
|
||||
'mx-auto min-w-0 max-w-full px-3 pt-16 md:px-6 md:pt-24 lg:px-8',
|
||||
'mx-auto min-w-0 max-w-full px-3 pt-14 md:px-6 md:pt-16 lg:px-8',
|
||||
isChessRoute ? 'pb-44 md:pb-40' : isReaderRoute ? 'pb-44 md:pb-36' : 'pb-36 md:pb-32',
|
||||
)}
|
||||
>
|
||||
|
||||
@@ -180,26 +180,39 @@ function SidebarContent({
|
||||
|
||||
<aside
|
||||
className={clsx(
|
||||
'fixed left-0 top-0 z-[60] flex h-screen w-72 max-w-[calc(100vw-1.5rem)] 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:z-40 md:max-w-none md:translate-x-0',
|
||||
'fixed left-0 top-0 z-[60] flex h-screen w-72 max-w-[calc(100vw-1.5rem)] 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:left-3 md:top-12 md:z-40 md:h-[calc(100vh-8rem)] md:max-w-none md:translate-x-0 md:rounded-lg md:border',
|
||||
isDesktopCollapsed ? 'md:w-20' : 'md:w-72',
|
||||
isMobileOpen ? 'translate-x-0' : '-translate-x-full',
|
||||
)}
|
||||
>
|
||||
<div className={clsx('relative shrink-0 text-center', isDesktopCollapsed ? 'px-6 pb-5 pt-8 md:px-3 md:pb-4 md:pt-5' : 'px-6 pb-5 pt-8')}>
|
||||
<div className="flex h-11 shrink-0 items-center justify-between gap-3 border-b border-[var(--window-titlebar-border)] bg-[var(--window-titlebar)] px-4">
|
||||
<div className={clsx('flex min-w-0 items-center gap-3', isDesktopCollapsed && 'md:hidden')}>
|
||||
<div className="flex shrink-0 items-center gap-1.5" aria-hidden="true">
|
||||
<span className="h-3 w-3 rounded-full border border-black/10 bg-[#ff5f57]" />
|
||||
<span className="h-3 w-3 rounded-full border border-black/10 bg-[#ffbd2e]" />
|
||||
<span className="h-3 w-3 rounded-full border border-black/10 bg-[#28c840]" />
|
||||
</div>
|
||||
<span className={clsx('truncate text-sm font-semibold text-[var(--color-text)]', isDesktopCollapsed && 'md:hidden')}>
|
||||
Finder
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onDesktopCollapsedChange(!isDesktopCollapsed)}
|
||||
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"
|
||||
className="hidden h-7 w-7 shrink-0 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 ? '사이드바 펼치기' : '사이드바 접기'}
|
||||
>
|
||||
{isDesktopCollapsed ? <ChevronsRight size={16} /> : <ChevronsLeft size={16} />}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className={clsx('relative shrink-0 text-center', isDesktopCollapsed ? 'px-6 pb-5 pt-6 md:px-3 md:pb-4 md:pt-4' : 'px-6 pb-5 pt-6')}>
|
||||
<Link href="/" onClick={closeSidebar} className="block transition-opacity hover:opacity-85">
|
||||
<div
|
||||
className={clsx(
|
||||
'relative mx-auto overflow-hidden rounded-2xl bg-black/[0.04] shadow-inner ring-1 ring-[var(--color-line)] transition-all dark:bg-white/10',
|
||||
isDesktopCollapsed ? 'mb-4 h-20 w-20 md:mb-0 md:mt-8 md:h-12 md:w-12' : 'mb-4 h-20 w-20',
|
||||
isDesktopCollapsed ? 'mb-4 h-20 w-20 md:mb-0 md:h-12 md:w-12' : 'mb-4 h-20 w-20',
|
||||
)}
|
||||
>
|
||||
{isProfileLoading ? (
|
||||
@@ -247,7 +260,7 @@ function SidebarContent({
|
||||
<div className="mb-4 border-t border-[var(--color-line)]" />
|
||||
|
||||
<div className="mb-3 flex h-8 items-center justify-between px-3">
|
||||
<p className="text-xs font-semibold uppercase tracking-normal text-[var(--color-text-subtle)]">카테고리</p>
|
||||
<p className="text-xs font-semibold uppercase tracking-normal text-[var(--color-text-subtle)]">폴더</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -291,7 +304,7 @@ function SidebarContent({
|
||||
|
||||
<div className="-mx-2 mt-3 shrink-0 border-t border-[var(--color-line)] px-2 pt-3">
|
||||
<div className="mb-2 flex h-8 items-center px-3">
|
||||
<p className="text-xs font-semibold uppercase tracking-normal text-[var(--color-text-subtle)]">앱</p>
|
||||
<p className="text-xs font-semibold uppercase tracking-normal text-[var(--color-text-subtle)]">응용 프로그램</p>
|
||||
</div>
|
||||
|
||||
<Link
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { clsx } from 'clsx';
|
||||
import { Calendar, ChevronRight, Rows3, SlidersHorizontal } from 'lucide-react';
|
||||
import { Calendar, ChevronRight, FileText, Rows3, SlidersHorizontal } from 'lucide-react';
|
||||
import EmptyState from '@/components/ui/EmptyState';
|
||||
import StatusBadge from '@/components/ui/StatusBadge';
|
||||
import Surface from '@/components/ui/Surface';
|
||||
@@ -218,6 +218,9 @@ export default function ArchiveExplorer({ posts }: ArchiveExplorerProps) {
|
||||
className="group/item block min-w-0"
|
||||
>
|
||||
<Surface interactive className={clsx('flex min-w-0 items-center justify-between gap-3 shadow-none', isCompact ? 'p-3' : 'p-4')}>
|
||||
<span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-[var(--card-border)] bg-[var(--card-bg-strong)] text-[var(--color-accent)] shadow-[var(--shadow-control)]">
|
||||
<FileText size={17} />
|
||||
</span>
|
||||
<div className="min-w-0 flex-1">
|
||||
<h4 className="line-clamp-2 break-words text-sm font-semibold text-[var(--color-text)] transition-colors group-hover/item:text-[var(--color-accent)] md:text-base">
|
||||
{post.title}
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
import Link from 'next/link';
|
||||
import { FileText } from 'lucide-react';
|
||||
import StatusBadge from '@/components/ui/StatusBadge';
|
||||
import Surface from '@/components/ui/Surface';
|
||||
import { Post } from '@/types';
|
||||
|
||||
const isNoticePost = (post: Post) => {
|
||||
const categoryName = post.categoryName || '';
|
||||
return categoryName === '공지' || categoryName === '怨듭?' || categoryName.toLowerCase() === 'notice';
|
||||
return categoryName === '공지' || categoryName.toLowerCase() === 'notice';
|
||||
};
|
||||
|
||||
const formatDate = (value: string) => {
|
||||
@@ -44,9 +45,14 @@ export default function PostCard({ post }: { post: Post }) {
|
||||
className="flex h-full min-h-52 flex-col p-5 shadow-none"
|
||||
>
|
||||
<div className="mb-4 flex items-center justify-between gap-3">
|
||||
<StatusBadge tone={isNotice ? 'danger' : 'neutral'} className="shrink-0">
|
||||
{post.categoryName || '미분류'}
|
||||
</StatusBadge>
|
||||
<div className="flex min-w-0 items-center gap-2">
|
||||
<span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-[var(--card-border)] bg-[var(--card-bg-strong)] text-[var(--color-accent)] shadow-[var(--shadow-control)]">
|
||||
<FileText size={17} />
|
||||
</span>
|
||||
<StatusBadge tone={isNotice ? 'danger' : 'neutral'} className="shrink-0">
|
||||
{post.categoryName || '미분류'}
|
||||
</StatusBadge>
|
||||
</div>
|
||||
<time className="text-xs font-medium text-[var(--color-text-subtle)]">
|
||||
{formatDate(post.createdAt)}
|
||||
</time>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { AlertCircle, ArrowLeft, Calendar, ChevronLeft, ChevronRight, Loader2, User } from 'lucide-react';
|
||||
import { AlertCircle, ArrowLeft, Calendar, ChevronLeft, ChevronRight, Loader2, Monitor, User } from 'lucide-react';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import { useRouter } from 'next/navigation';
|
||||
@@ -91,14 +91,26 @@ export default function PostDetailClient({ slug, initialPost }: PostDetailClient
|
||||
|
||||
return (
|
||||
<div className="mx-auto min-w-0 max-w-[1120px] px-0 py-3 md:py-6">
|
||||
<Link href="/" className="mb-5 inline-flex items-center gap-1 text-sm font-medium text-[var(--color-text-muted)] transition-colors hover:text-[var(--color-accent)]">
|
||||
<Link href="/" className="mb-5 inline-flex items-center gap-1 rounded-lg border border-[var(--card-border)] bg-[var(--card-bg)] px-3 py-2 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-accent)]">
|
||||
<ArrowLeft size={18} />
|
||||
<span>목록으로</span>
|
||||
<span>Finder로</span>
|
||||
</Link>
|
||||
|
||||
<div className="relative grid min-w-0 gap-6 xl:grid-cols-[minmax(0,820px)_220px] xl:justify-center xl:gap-8">
|
||||
<main className="min-w-0 space-y-6">
|
||||
<Surface as="article" strong className="mx-auto w-full max-w-[820px] px-5 py-7 md:px-10 md:py-10">
|
||||
<WindowSurface
|
||||
as="article"
|
||||
title="Reader"
|
||||
subtitle={post.categoryName || '미분류'}
|
||||
className="mx-auto w-full max-w-[820px]"
|
||||
bodyClassName="px-5 py-7 md:px-10 md:py-10"
|
||||
controls={(
|
||||
<div className="hidden items-center gap-1.5 text-xs font-semibold text-[var(--color-text-subtle)] sm:flex">
|
||||
<Monitor size={14} />
|
||||
<span className="max-w-44 truncate">{post.slug}</span>
|
||||
</div>
|
||||
)}
|
||||
>
|
||||
<header className="mb-9 border-b border-[var(--color-line)] pb-7">
|
||||
<StatusBadge tone="neutral" className="mb-5">
|
||||
{post.categoryName || '미분류'}
|
||||
@@ -134,7 +146,7 @@ export default function PostDetailClient({ slug, initialPost }: PostDetailClient
|
||||
<div className="prose prose-base min-w-0 max-w-none break-words prose-headings:font-bold prose-headings:tracking-normal prose-headings:text-[var(--color-text)] prose-p:text-[var(--color-text)] prose-p:leading-8 prose-strong:text-[var(--color-text)] prose-li:text-[var(--color-text-muted)] prose-li:leading-8 prose-a:text-[var(--color-accent)] prose-hr:border-[var(--color-line)] prose-pre:max-w-full prose-pre:overflow-x-auto prose-pre:bg-[#1e1e1e] prose-pre:text-gray-100 md:prose-lg [overflow-wrap:anywhere]">
|
||||
<MarkdownRenderer content={post.content || ''} />
|
||||
</div>
|
||||
</Surface>
|
||||
</WindowSurface>
|
||||
|
||||
<WindowSurface title="Navigation" showTrafficLights={false} className="mx-auto max-w-[820px]" bodyClassName="p-4 md:p-5">
|
||||
<nav className="grid min-w-0 grid-cols-1 gap-4 md:grid-cols-2">
|
||||
@@ -184,7 +196,7 @@ export default function PostDetailClient({ slug, initialPost }: PostDetailClient
|
||||
</main>
|
||||
|
||||
<aside className="hidden w-[220px] shrink-0 xl:block">
|
||||
<WindowSurface title="목차" showTrafficLights={false} bodyClassName="p-4" className="sticky top-24 shadow-[var(--shadow-card)]">
|
||||
<WindowSurface title="목차" showTrafficLights={false} bodyClassName="p-4" className="sticky top-16 shadow-[var(--shadow-card)]">
|
||||
<TOC content={post.content || ''} />
|
||||
</WindowSurface>
|
||||
</aside>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import Link from 'next/link';
|
||||
import { ChevronRight, Eye } from 'lucide-react';
|
||||
import { ChevronRight, Eye, FileText } from 'lucide-react';
|
||||
import { clsx } from 'clsx';
|
||||
import StatusBadge from '@/components/ui/StatusBadge';
|
||||
import { Post } from '@/types';
|
||||
@@ -11,7 +11,7 @@ interface PostListItemProps {
|
||||
|
||||
const isNoticePost = (post: Post) => {
|
||||
const categoryName = post.categoryName || '';
|
||||
return categoryName === '공지' || categoryName === '怨듭?' || categoryName.toLowerCase() === 'notice';
|
||||
return categoryName === '공지' || categoryName.toLowerCase() === 'notice';
|
||||
};
|
||||
|
||||
const formatDate = (value: string) => {
|
||||
@@ -37,6 +37,9 @@ export default function PostListItem({ post, showViews = false }: PostListItemPr
|
||||
)}
|
||||
>
|
||||
<div className="flex min-w-0 flex-1 items-center gap-3">
|
||||
<span className="hidden h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-[var(--card-border)] bg-[var(--card-bg-strong)] text-[var(--color-accent)] shadow-[var(--shadow-control)] sm:flex">
|
||||
<FileText size={17} />
|
||||
</span>
|
||||
<StatusBadge tone={isNotice ? 'danger' : 'neutral'} className="hidden shrink-0 sm:inline-flex">
|
||||
{post.categoryName || '미분류'}
|
||||
</StatusBadge>
|
||||
|
||||
@@ -19,7 +19,7 @@ export default function Surface({
|
||||
return (
|
||||
<Component
|
||||
className={clsx(
|
||||
'rounded-lg border border-[var(--card-border)] backdrop-blur-[18px]',
|
||||
'rounded-lg border border-[var(--card-border)] backdrop-blur-[20px]',
|
||||
strong
|
||||
? 'bg-[var(--card-bg-strong)] shadow-[var(--shadow-card)]'
|
||||
: 'bg-[var(--card-bg)] shadow-[var(--shadow-card)]',
|
||||
|
||||
@@ -28,13 +28,13 @@ export default function WindowSurface({
|
||||
return (
|
||||
<Component
|
||||
className={clsx(
|
||||
'w-full overflow-hidden rounded-lg border border-[var(--window-border)] bg-[var(--window-bg)] shadow-[var(--shadow-window)] backdrop-blur-[28px]',
|
||||
'window-surface w-full overflow-hidden rounded-lg border border-[var(--window-border)] bg-[var(--window-bg)] shadow-[var(--shadow-window)] backdrop-blur-[30px]',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{hasTitlebar && (
|
||||
<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-h-11 items-center justify-between gap-4 border-b border-[var(--window-titlebar-border)] bg-[var(--window-titlebar)] px-4 py-2.5 backdrop-blur-[28px]">
|
||||
<div className="flex min-w-0 items-center gap-3">
|
||||
{showTrafficLights && (
|
||||
<div className="flex shrink-0 items-center gap-1.5" aria-hidden="true">
|
||||
|
||||
Reference in New Issue
Block a user