-
+
fromis_9
@@ -139,21 +226,21 @@ function AdminDashboard() {
빠른 통계
diff --git a/frontend/src/pages/pc/admin/AdminMembers.jsx b/frontend/src/pages/pc/admin/AdminMembers.jsx
new file mode 100644
index 0000000..3ef7a40
--- /dev/null
+++ b/frontend/src/pages/pc/admin/AdminMembers.jsx
@@ -0,0 +1,212 @@
+import { useState, useEffect } from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import { motion } from 'framer-motion';
+import {
+ Edit2, LogOut,
+ Home, ChevronRight, Users, User
+} from 'lucide-react';
+import Toast from '../../../components/Toast';
+
+function AdminMembers() {
+ const navigate = useNavigate();
+ const [members, setMembers] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [user, setUser] = useState(null);
+ const [toast, setToast] = useState(null);
+
+ // Toast 자동 숨김
+ useEffect(() => {
+ if (toast) {
+ const timer = setTimeout(() => setToast(null), 3000);
+ return () => clearTimeout(timer);
+ }
+ }, [toast]);
+
+ useEffect(() => {
+ // 로그인 확인
+ const token = localStorage.getItem('adminToken');
+ const userData = localStorage.getItem('adminUser');
+
+ if (!token || !userData) {
+ navigate('/admin');
+ return;
+ }
+
+ setUser(JSON.parse(userData));
+ fetchMembers();
+ }, [navigate]);
+
+ const fetchMembers = () => {
+ fetch('/api/members')
+ .then(res => res.json())
+ .then(data => {
+ setMembers(data);
+ setLoading(false);
+ })
+ .catch(error => {
+ console.error('멤버 로드 오류:', error);
+ setLoading(false);
+ });
+ };
+
+ 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);
+
+ // 멤버 카드 컴포넌트
+ const MemberCard = ({ member, index, isFormer = false }) => (
+
setToast({ message: '수정 기능은 준비 중입니다.', type: 'info' })}
+ >
+ {/* 프로필 이미지 */}
+
+ {member.image_url ? (
+

+ ) : (
+
+
+
+ )}
+
+ {/* 이름 오버레이 - 하단 그라데이션 */}
+
+
+
{member.name}
+
+
+ {/* 수정 버튼 오버레이 */}
+
+
+
+ );
+
+ return (
+
+ {/* Toast */}
+
setToast(null)} />
+
+ {/* 헤더 */}
+
+
+ {/* 메인 콘텐츠 */}
+
+ {/* 브레드크럼 */}
+
+
+
+
+
+ 멤버 관리
+
+
+ {/* 타이틀 */}
+
+
멤버 관리
+
멤버 정보 및 프로필을 관리합니다
+
+
+ {/* 멤버 목록 */}
+ {loading ? (
+
+ ) : (
+
+ {/* 활동 멤버 */}
+
+
+
+
현재 멤버
+
+ {activeMembers.length}
+
+
+
+ {/* 5열 그리드 */}
+
+ {activeMembers.map((member, index) => (
+
+ ))}
+
+
+
+ {/* 탈퇴 멤버 */}
+ {formerMembers.length > 0 && (
+
+
+
+
이전 멤버
+
+ {formerMembers.length}
+
+
+
+ {/* 5열 그리드 (탈퇴 멤버용 - 4명이면 4개만 표시) */}
+
+ {formerMembers.map((member, index) => (
+
+ ))}
+
+
+ )}
+
+ {members.length === 0 && (
+
+ 등록된 멤버가 없습니다.
+
+ )}
+
+ )}
+
+
+ );
+}
+
+export default AdminMembers;