Simplify macOS layout structure
All checks were successful
Deploy blog-frontend / build-and-deploy (push) Successful in 2m7s
All checks were successful
Deploy blog-frontend / build-and-deploy (push) Successful in 2m7s
This commit is contained in:
141
src/app/page.tsx
141
src/app/page.tsx
@@ -6,7 +6,6 @@ import {
|
||||
ChevronRight,
|
||||
Clock,
|
||||
FileText,
|
||||
FolderOpen,
|
||||
HardDrive,
|
||||
Search,
|
||||
TrendingUp,
|
||||
@@ -273,31 +272,6 @@ 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);
|
||||
|
||||
@@ -325,8 +299,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="Finder"
|
||||
subtitle="WYPark.local"
|
||||
title="WYPark"
|
||||
subtitle="블로그 라이브러리"
|
||||
controls={(
|
||||
<Link
|
||||
href="/archive"
|
||||
@@ -336,92 +310,41 @@ export default async function Home({ searchParams }: HomePageProps) {
|
||||
<Archive size={14} />
|
||||
</Link>
|
||||
)}
|
||||
bodyClassName="p-0"
|
||||
bodyClassName="space-y-6 p-4 md:p-6"
|
||||
>
|
||||
<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 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>
|
||||
<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>
|
||||
|
||||
<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 className="min-w-0">
|
||||
<p className="truncate text-sm font-bold text-[var(--color-text)]">최근 기록</p>
|
||||
<p className="truncate text-xs text-[var(--color-text-subtle)]">
|
||||
최신 글 {latestList.length.toLocaleString()}개 · 인기 글 {popularList.length.toLocaleString()}개
|
||||
</p>
|
||||
</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>
|
||||
<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>
|
||||
</WindowSurface>
|
||||
</main>
|
||||
);
|
||||
|
||||
@@ -1,14 +1,12 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { useEffect, 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';
|
||||
import { useAuthStore } from '@/store/authStore';
|
||||
|
||||
const defaultProfile = {
|
||||
githubUrl: 'https://github.com',
|
||||
@@ -51,7 +49,6 @@ const formatMenuTime = (date: Date | null) => {
|
||||
|
||||
export default function DesktopMenuBar() {
|
||||
const pathname = usePathname();
|
||||
const { isLoggedIn, role, _hasHydrated } = useAuthStore();
|
||||
const [now, setNow] = useState<Date | null>(null);
|
||||
|
||||
const { data: profile } = useQuery({
|
||||
@@ -73,21 +70,7 @@ export default function DesktopMenuBar() {
|
||||
|
||||
const githubUrl = profile?.githubUrl || defaultProfile.githubUrl;
|
||||
const email = profile?.email || defaultProfile.email;
|
||||
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 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)] xl:inline-flex';
|
||||
const systemIconClass = 'text-[var(--color-text-muted)]';
|
||||
|
||||
return (
|
||||
@@ -106,16 +89,7 @@ export default function DesktopMenuBar() {
|
||||
WYPark
|
||||
</Link>
|
||||
|
||||
<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">
|
||||
<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)] sm:flex">
|
||||
<Monitor size={14} />
|
||||
<span className="truncate text-[var(--color-text-muted)]">{getAppTitle(pathname)}</span>
|
||||
<ChevronRight size={13} />
|
||||
@@ -124,10 +98,10 @@ export default function DesktopMenuBar() {
|
||||
</div>
|
||||
|
||||
<div className="flex shrink-0 items-center gap-2">
|
||||
<a href={githubUrl} target="_blank" rel="noreferrer" className={clsx(menuLinkClass, 'hidden xl:inline-flex')}>
|
||||
<a href={githubUrl} target="_blank" rel="noreferrer" className={menuLinkClass}>
|
||||
GitHub
|
||||
</a>
|
||||
<a href={`mailto:${email}`} className={clsx(menuLinkClass, 'hidden xl:inline-flex')}>
|
||||
<a href={`mailto:${email}`} className={menuLinkClass}>
|
||||
Email
|
||||
</a>
|
||||
<Search size={15} className={systemIconClass} />
|
||||
|
||||
@@ -2,110 +2,11 @@
|
||||
|
||||
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();
|
||||
@@ -148,7 +49,6 @@ export default function DesktopShell({ children }: { children: ReactNode }) {
|
||||
onMobileOpenChange={setIsMobileSidebarOpen}
|
||||
/>
|
||||
<DesktopMenuBar />
|
||||
<DesktopShortcuts />
|
||||
<DesktopDock
|
||||
onOpenMobileMenu={() => setIsMobileSidebarOpen(true)}
|
||||
/>
|
||||
|
||||
@@ -10,11 +10,9 @@ import {
|
||||
ChevronRight,
|
||||
ChevronsLeft,
|
||||
ChevronsRight,
|
||||
Crown,
|
||||
FileQuestion,
|
||||
Folder,
|
||||
FolderOpen,
|
||||
Home,
|
||||
} from 'lucide-react';
|
||||
import { getCategories } from '@/api/category';
|
||||
import { getProfile } from '@/api/profile';
|
||||
@@ -180,39 +178,40 @@ 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: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',
|
||||
'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-4 md:top-14 md:z-40 md:h-[calc(100vh-9rem)] md:max-w-none md:translate-x-0 md:rounded-lg md:border',
|
||||
isDesktopCollapsed ? 'md:w-[4.5rem]' : 'md:w-72',
|
||||
isMobileOpen ? 'translate-x-0' : '-translate-x-full',
|
||||
)}
|
||||
>
|
||||
<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 className="flex h-12 shrink-0 items-center justify-between gap-3 border-b border-[var(--window-titlebar-border)] bg-[var(--window-titlebar)] px-4">
|
||||
<div className={clsx('min-w-0', isDesktopCollapsed && 'md:hidden')}>
|
||||
<p className="truncate text-sm font-bold text-[var(--color-text)]">라이브러리</p>
|
||||
<p className="truncate text-[11px] font-medium text-[var(--color-text-subtle)]">검색과 카테고리</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onDesktopCollapsedChange(!isDesktopCollapsed)}
|
||||
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"
|
||||
className="hidden h-8 w-8 shrink-0 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 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 shrink-0', isDesktopCollapsed ? 'px-5 pb-4 pt-5 md:px-3 md:pb-3 md:pt-4' : 'px-5 pb-4 pt-5')}>
|
||||
<Link
|
||||
href="/"
|
||||
onClick={closeSidebar}
|
||||
className={clsx(
|
||||
'flex min-w-0 items-center gap-3 rounded-lg border border-[var(--card-border)] bg-[var(--card-bg)] p-3 transition hover:bg-[var(--card-bg-strong)]',
|
||||
isDesktopCollapsed && 'md:justify-center md:border-transparent md:bg-transparent md:p-0 md:hover:bg-transparent',
|
||||
)}
|
||||
>
|
||||
<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:h-12 md:w-12' : 'mb-4 h-20 w-20',
|
||||
'relative shrink-0 overflow-hidden rounded-lg bg-black/[0.04] shadow-inner ring-1 ring-[var(--color-line)] transition-all dark:bg-white/10',
|
||||
isDesktopCollapsed ? 'h-12 w-12' : 'h-12 w-12',
|
||||
)}
|
||||
>
|
||||
{isProfileLoading ? (
|
||||
@@ -230,16 +229,16 @@ function SidebarContent({
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className={clsx(isDesktopCollapsed && 'md:hidden')}>
|
||||
<div className={clsx('min-w-0 text-left', isDesktopCollapsed && 'md:hidden')}>
|
||||
{isProfileLoading ? (
|
||||
<div className="flex flex-col items-center space-y-2">
|
||||
<div className="space-y-2">
|
||||
<div className="h-6 w-24 animate-pulse rounded bg-black/[0.06] dark:bg-white/10" />
|
||||
<div className="h-4 w-32 animate-pulse rounded bg-black/[0.04] dark:bg-white/10" />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<h2 className="text-lg font-bold tracking-normal text-[var(--color-text)]">{displayProfile.name}</h2>
|
||||
<p className="mt-1 whitespace-pre-line text-sm leading-relaxed text-[var(--color-text-muted)]">{displayProfile.bio}</p>
|
||||
<h2 className="truncate text-sm font-bold tracking-normal text-[var(--color-text)]">{displayProfile.name}</h2>
|
||||
<p className="mt-0.5 line-clamp-2 whitespace-pre-line text-xs leading-5 text-[var(--color-text-muted)]">{displayProfile.bio}</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
@@ -260,7 +259,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>
|
||||
|
||||
@@ -302,42 +301,9 @@ function SidebarContent({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<Link
|
||||
href="/play/chess"
|
||||
onClick={closeSidebar}
|
||||
className={clsx(
|
||||
'flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm transition-all',
|
||||
pathname === '/play/chess'
|
||||
? 'bg-[var(--color-accent-soft)] font-semibold text-[var(--color-accent)]'
|
||||
: 'text-[var(--color-text-muted)] hover:bg-[var(--card-bg)] hover:text-[var(--color-text)]',
|
||||
)}
|
||||
>
|
||||
<Crown size={16} />
|
||||
<span>체스</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={clsx('hidden flex-1 flex-col items-center gap-2 overflow-y-auto px-0 pb-4 pt-2 md:flex', !isDesktopCollapsed && 'md:hidden')}>
|
||||
<Link
|
||||
href="/"
|
||||
title="홈"
|
||||
aria-label="홈"
|
||||
className={clsx(
|
||||
'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(--card-bg-strong)] text-[var(--color-accent)]',
|
||||
)}
|
||||
>
|
||||
<Home size={18} />
|
||||
</Link>
|
||||
|
||||
<div className="my-1 h-px w-9 bg-[var(--color-line)]" />
|
||||
|
||||
{compactCategoryItems.map((category) => {
|
||||
const isActive = decodedPathname === `/category/${category.name}`;
|
||||
|
||||
@@ -368,20 +334,6 @@ function SidebarContent({
|
||||
>
|
||||
<FileQuestion size={18} />
|
||||
</Link>
|
||||
|
||||
<div className="my-1 h-px w-9 bg-[var(--color-line)]" />
|
||||
|
||||
<Link
|
||||
href="/play/chess"
|
||||
title="체스"
|
||||
aria-label="체스"
|
||||
className={clsx(
|
||||
'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(--card-bg-strong)] text-[var(--color-accent)]',
|
||||
)}
|
||||
>
|
||||
<Crown size={18} />
|
||||
</Link>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user