관리자 페이지 헤더/뒤로가기/메뉴편집 단축 제거

- AdminLayout 상단 ADMIN/관리자/로그아웃 헤더 제거
- 뒤로가기 버튼 제거 (홈 헤더 로고로 이동 가능)
- AdminFeaturePage의 메뉴 정보 편집 단축 링크 제거
- 로그아웃은 관리자 홈 하단에 작게 배치

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
caadiq 2026-04-13 20:42:28 +09:00
parent 0fb325b815
commit 6e1df46852
3 changed files with 34 additions and 65 deletions

View file

@ -1,5 +1,5 @@
import { Suspense } from 'react'
import { useParams, Navigate, Link } from 'react-router-dom'
import { useParams, Link } from 'react-router-dom'
import { useQuery } from '@tanstack/react-query'
import { getAdminComponent } from '../registry'
import { api } from '../../api/client'
@ -8,7 +8,7 @@ export default function AdminFeaturePage() {
const { slug } = useParams()
const Component = getAdminComponent(slug)
// ( )
// ( )
const { data: menus = [] } = useQuery({
queryKey: ['admin', 'menus'],
queryFn: () => api('/api/admin/menus').catch(() => []),
@ -19,17 +19,9 @@ export default function AdminFeaturePage() {
return (
<div className="space-y-4">
{menu && (
<div className="flex items-center justify-between">
<div>
<h2 className="text-lg font-semibold">{menu.title}</h2>
<p className="text-sm text-gray-500 mt-0.5">{menu.description}</p>
</div>
<Link
to={`/admin/menus/${menu.id}`}
className="text-sm rounded-lg border border-white/10 hover:border-white/20 hover:bg-white/5 px-3 py-1.5 transition"
>
메뉴 정보 편집
</Link>
<div>
<h2 className="text-lg font-semibold">{menu.title}</h2>
<p className="text-sm text-gray-500 mt-0.5">{menu.description}</p>
</div>
)}
<div className="rounded-2xl border border-dashed border-white/10 bg-white/[0.02] p-12 text-center">
@ -38,30 +30,24 @@ export default function AdminFeaturePage() {
<p className="text-xs text-gray-600 mt-2 font-mono">
features/{slug}/{slug.split('-').map((s) => s[0].toUpperCase() + s.slice(1)).join('')}Admin.jsx
</p>
<Link
to={`/admin/menus/${menu?.id || ''}`}
className="inline-block mt-4 text-xs text-emerald-400 hover:text-emerald-300 transition"
>
메뉴 정보 편집
</Link>
</div>
</div>
)
}
return (
<div className="space-y-4">
{menu && (
<div className="flex items-center justify-end">
<Link
to={`/admin/menus/${menu.id}`}
className="text-sm rounded-lg border border-white/10 hover:border-white/20 hover:bg-white/5 px-3 py-1.5 transition"
>
메뉴 정보 편집
</Link>
</div>
)}
<Suspense fallback={
<div className="flex items-center justify-center pt-20">
<div className="w-6 h-6 border-2 border-emerald-500 border-t-transparent rounded-full animate-spin" />
</div>
}>
<Component />
</Suspense>
</div>
<Suspense fallback={
<div className="flex items-center justify-center pt-20">
<div className="w-6 h-6 border-2 border-emerald-500 border-t-transparent rounded-full animate-spin" />
</div>
}>
<Component />
</Suspense>
)
}

View file

@ -1,4 +1,4 @@
import { Link, useNavigate } from 'react-router-dom'
import { Link, useNavigate, useOutletContext } from 'react-router-dom'
import { useQuery } from '@tanstack/react-query'
import { api } from '../../api/client'
@ -60,6 +60,7 @@ function AddCard({ to, icon, label }) {
}
export default function AdminHome() {
const { handleLogout } = useOutletContext() || {}
const { data: menus = [], isLoading: loading } = useQuery({
queryKey: ['admin', 'menus'],
queryFn: () => api('/api/admin/menus').catch(() => []),
@ -120,6 +121,18 @@ export default function AdminHome() {
</Link>
</div>
</section>
{/* 로그아웃 */}
{handleLogout && (
<div className="pt-4 text-center">
<button
onClick={handleLogout}
className="text-xs text-gray-600 hover:text-red-400 transition"
>
관리자 로그아웃
</button>
</div>
)}
</div>
)
}

View file

@ -1,12 +1,10 @@
import { useSearchParams, Outlet, Navigate, Link, useLocation } from 'react-router-dom'
import { useSearchParams, Outlet, Navigate } from 'react-router-dom'
import { useQuery, useQueryClient } from '@tanstack/react-query'
import { api } from '../../api/client'
export default function AdminLayout() {
const queryClient = useQueryClient()
const [searchParams] = useSearchParams()
const location = useLocation()
const isRoot = location.pathname === '/admin' || location.pathname === '/admin/'
const keyFromUrl = searchParams.get('key')
const key = keyFromUrl || localStorage.getItem('maple-admin-key')
@ -45,33 +43,5 @@ export default function AdminLayout() {
return <Navigate to="/" replace />
}
return (
<div className="space-y-8">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
{!isRoot && (
<Link
to="/admin"
className="flex items-center justify-center w-9 h-9 rounded-lg border border-white/10 hover:border-white/20 hover:bg-white/5 text-gray-400 hover:text-white transition"
aria-label="뒤로"
>
</Link>
)}
<div>
<div className="text-xs font-medium text-emerald-400 uppercase tracking-wider mb-1">Admin</div>
<h1 className="text-2xl font-bold tracking-tight">관리자</h1>
</div>
</div>
<button
onClick={handleLogout}
className="text-sm text-gray-500 hover:text-gray-300 transition"
>
로그아웃
</button>
</div>
<Outlet />
</div>
)
return <Outlet context={{ handleLogout }} />
}