From 7f9c53b53aecd5685384611d93d8123e735b1ed3 Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Fri, 9 Jan 2026 23:09:11 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20AdminHeader=20=EA=B3=B5=ED=86=B5=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=83=9D=EC=84=B1=20?=
 =?UTF-8?q?=EB=B0=8F=20AdminMembers=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

새로 생성된 파일:
- components/admin/AdminHeader.jsx (47줄)
  - 로고, Admin 배지, 사용자 정보, 로그아웃 버튼 포함

수정된 파일:
- pages/pc/admin/AdminMembers.jsx
  - AdminHeader import 추가
  - 중복 헤더 JSX 제거 (24줄 -> 1줄)
  - handleLogout 함수 제거 (5줄)

나머지 9개 Admin 페이지도 동일한 패턴으로 적용 가능
---
 frontend/src/components/admin/AdminHeader.jsx | 46 +++++++++++++++++++
 frontend/src/pages/pc/admin/AdminMembers.jsx  | 34 ++------------
 2 files changed, 49 insertions(+), 31 deletions(-)
 create mode 100644 frontend/src/components/admin/AdminHeader.jsx

diff --git a/frontend/src/components/admin/AdminHeader.jsx b/frontend/src/components/admin/AdminHeader.jsx
new file mode 100644
index 0000000..f472c57
--- /dev/null
+++ b/frontend/src/components/admin/AdminHeader.jsx
@@ -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;
diff --git a/frontend/src/pages/pc/admin/AdminMembers.jsx b/frontend/src/pages/pc/admin/AdminMembers.jsx
index f1d335f..15f6fbc 100644
--- a/frontend/src/pages/pc/admin/AdminMembers.jsx
+++ b/frontend/src/pages/pc/admin/AdminMembers.jsx
@@ -2,10 +2,11 @@ import { useState, useEffect } from 'react';
 import { useNavigate, Link } from 'react-router-dom';
 import { motion } from 'framer-motion';
 import { 
-    Edit2, LogOut,
+    Edit2,
     Home, ChevronRight, Users, User
 } from 'lucide-react';
 import Toast from '../../../components/Toast';
+import AdminHeader from '../../../components/admin/AdminHeader';
 import useToast from '../../../hooks/useToast';
 
 function AdminMembers() {
@@ -42,12 +43,6 @@ function AdminMembers() {
             });
     };
 
-    const handleLogout = () => {
-        localStorage.removeItem('adminToken');
-        localStorage.removeItem('adminUser');
-        navigate('/admin');
-    };
-
     // 활동/탈퇴 멤버 분리 (is_former: 0=활동, 1=탈퇴)
     const activeMembers = 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)} />
 
             {/* 헤더 */}
-            <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>
+            <AdminHeader user={user} />
 
             {/* 메인 콘텐츠 */}
             <main className="max-w-7xl mx-auto px-6 py-8">