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

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

Browse Source
This commit is contained in:
wypark
2026-06-07 00:14:52 +09:00
parent eb2e713b24
commit b466fa98c9
5 changed files with 68 additions and 311 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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} />