refactor: AdminHeader 공통 컴포넌트 생성 및 AdminMembers 적용
새로 생성된 파일: - components/admin/AdminHeader.jsx (47줄) - 로고, Admin 배지, 사용자 정보, 로그아웃 버튼 포함 수정된 파일: - pages/pc/admin/AdminMembers.jsx - AdminHeader import 추가 - 중복 헤더 JSX 제거 (24줄 -> 1줄) - handleLogout 함수 제거 (5줄) 나머지 9개 Admin 페이지도 동일한 패턴으로 적용 가능
This commit is contained in:
parent
07a0c30f0f
commit
7f9c53b53a
2 changed files with 49 additions and 31 deletions
46
frontend/src/components/admin/AdminHeader.jsx
Normal file
46
frontend/src/components/admin/AdminHeader.jsx
Normal file
|
|
@ -0,0 +1,46 @@
|
||||||
|
/**
|
||||||
|
* AdminHeader 컴포넌트
|
||||||
|
* 모든 Admin 페이지에서 공통으로 사용하는 헤더
|
||||||
|
* 로고, Admin 배지, 사용자 정보, 로그아웃 버튼 포함
|
||||||
|
*/
|
||||||
|
import { useNavigate, Link } from 'react-router-dom';
|
||||||
|
import { LogOut } from 'lucide-react';
|
||||||
|
|
||||||
|
function AdminHeader({ user }) {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
const handleLogout = () => {
|
||||||
|
localStorage.removeItem('adminToken');
|
||||||
|
localStorage.removeItem('adminUser');
|
||||||
|
navigate('/admin');
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<header className="bg-white shadow-sm border-b border-gray-100">
|
||||||
|
<div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<Link to="/admin/dashboard" className="text-2xl font-bold text-primary hover:opacity-80 transition-opacity">
|
||||||
|
fromis_9
|
||||||
|
</Link>
|
||||||
|
<span className="px-3 py-1 bg-primary/10 text-primary text-sm font-medium rounded-full">
|
||||||
|
Admin
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<span className="text-gray-500 text-sm">
|
||||||
|
안녕하세요, <span className="text-gray-900 font-medium">{user?.username}</span>님
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
onClick={handleLogout}
|
||||||
|
className="flex items-center gap-2 px-4 py-2 text-gray-500 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
|
||||||
|
>
|
||||||
|
<LogOut size={18} />
|
||||||
|
<span>로그아웃</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AdminHeader;
|
||||||
|
|
@ -2,10 +2,11 @@ import { useState, useEffect } from 'react';
|
||||||
import { useNavigate, Link } from 'react-router-dom';
|
import { useNavigate, Link } from 'react-router-dom';
|
||||||
import { motion } from 'framer-motion';
|
import { motion } from 'framer-motion';
|
||||||
import {
|
import {
|
||||||
Edit2, LogOut,
|
Edit2,
|
||||||
Home, ChevronRight, Users, User
|
Home, ChevronRight, Users, User
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
import Toast from '../../../components/Toast';
|
import Toast from '../../../components/Toast';
|
||||||
|
import AdminHeader from '../../../components/admin/AdminHeader';
|
||||||
import useToast from '../../../hooks/useToast';
|
import useToast from '../../../hooks/useToast';
|
||||||
|
|
||||||
function AdminMembers() {
|
function AdminMembers() {
|
||||||
|
|
@ -42,12 +43,6 @@ function AdminMembers() {
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleLogout = () => {
|
|
||||||
localStorage.removeItem('adminToken');
|
|
||||||
localStorage.removeItem('adminUser');
|
|
||||||
navigate('/admin');
|
|
||||||
};
|
|
||||||
|
|
||||||
// 활동/탈퇴 멤버 분리 (is_former: 0=활동, 1=탈퇴)
|
// 활동/탈퇴 멤버 분리 (is_former: 0=활동, 1=탈퇴)
|
||||||
const activeMembers = members.filter(m => !m.is_former);
|
const activeMembers = members.filter(m => !m.is_former);
|
||||||
const formerMembers = members.filter(m => m.is_former);
|
const formerMembers = members.filter(m => m.is_former);
|
||||||
|
|
@ -103,30 +98,7 @@ function AdminMembers() {
|
||||||
<Toast toast={toast} onClose={() => setToast(null)} />
|
<Toast toast={toast} onClose={() => setToast(null)} />
|
||||||
|
|
||||||
{/* 헤더 */}
|
{/* 헤더 */}
|
||||||
<header className="bg-white shadow-sm border-b border-gray-100">
|
<AdminHeader user={user} />
|
||||||
<div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
|
|
||||||
<div className="flex items-center gap-4">
|
|
||||||
<Link to="/admin/dashboard" className="text-2xl font-bold text-primary hover:opacity-80 transition-opacity">
|
|
||||||
fromis_9
|
|
||||||
</Link>
|
|
||||||
<span className="px-3 py-1 bg-primary/10 text-primary text-sm font-medium rounded-full">
|
|
||||||
Admin
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-4">
|
|
||||||
<span className="text-gray-500 text-sm">
|
|
||||||
안녕하세요, <span className="text-gray-900 font-medium">{user?.username}</span>님
|
|
||||||
</span>
|
|
||||||
<button
|
|
||||||
onClick={handleLogout}
|
|
||||||
className="flex items-center gap-2 px-4 py-2 text-gray-500 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
|
|
||||||
>
|
|
||||||
<LogOut size={18} />
|
|
||||||
<span>로그아웃</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
{/* 메인 콘텐츠 */}
|
{/* 메인 콘텐츠 */}
|
||||||
<main className="max-w-7xl mx-auto px-6 py-8">
|
<main className="max-w-7xl mx-auto px-6 py-8">
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue