feat: 관리자 간단한 페이지 마이그레이션 (Phase 3)
- AdminDashboard 페이지 추가 - AdminMembers 페이지 추가 - AdminMemberEdit 페이지 추가 - useToast 훅 추가 - App.jsx에 관리자 라우트 추가 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
d9ea716089
commit
f64f6cee00
7 changed files with 786 additions and 6 deletions
|
|
@ -485,11 +485,12 @@ frontend-temp/src/
|
||||||
- [x] 관리자 라우트 설정 (App.jsx)
|
- [x] 관리자 라우트 설정 (App.jsx)
|
||||||
- [x] AdminLogin 페이지 마이그레이션
|
- [x] AdminLogin 페이지 마이그레이션
|
||||||
|
|
||||||
### 3단계: 간단한 페이지
|
### 3단계: 간단한 페이지 ✅
|
||||||
- [ ] AdminLogin 마이그레이션
|
- [x] AdminLogin 마이그레이션 (2단계에서 완료)
|
||||||
- [ ] AdminDashboard 마이그레이션
|
- [x] AdminDashboard 마이그레이션
|
||||||
- [ ] AdminMembers 마이그레이션
|
- [x] AdminMembers 마이그레이션
|
||||||
- [ ] AdminMemberEdit 마이그레이션
|
- [x] AdminMemberEdit 마이그레이션
|
||||||
|
- [x] useToast 훅 추가
|
||||||
|
|
||||||
### 4단계: 앨범 관리
|
### 4단계: 앨범 관리
|
||||||
- [ ] AdminAlbums 마이그레이션
|
- [ ] AdminAlbums 마이그레이션
|
||||||
|
|
|
||||||
|
|
@ -25,6 +25,9 @@ import PCNotFound from '@/pages/pc/public/common/NotFound';
|
||||||
|
|
||||||
// PC 관리자 페이지
|
// PC 관리자 페이지
|
||||||
import AdminLogin from '@/pages/pc/admin/Login';
|
import AdminLogin from '@/pages/pc/admin/Login';
|
||||||
|
import AdminDashboard from '@/pages/pc/admin/Dashboard';
|
||||||
|
import AdminMembers from '@/pages/pc/admin/Members';
|
||||||
|
import AdminMemberEdit from '@/pages/pc/admin/MemberEdit';
|
||||||
|
|
||||||
// Mobile 페이지
|
// Mobile 페이지
|
||||||
import MobileHome from '@/pages/mobile/home/Home';
|
import MobileHome from '@/pages/mobile/home/Home';
|
||||||
|
|
@ -62,8 +65,11 @@ function App() {
|
||||||
<BrowserView>
|
<BrowserView>
|
||||||
<PCWrapper>
|
<PCWrapper>
|
||||||
<Routes>
|
<Routes>
|
||||||
{/* 관리자 페이지 (레이아웃 없음) */}
|
{/* 관리자 페이지 (자체 레이아웃 사용) */}
|
||||||
<Route path="/admin" element={<AdminLogin />} />
|
<Route path="/admin" element={<AdminLogin />} />
|
||||||
|
<Route path="/admin/dashboard" element={<AdminDashboard />} />
|
||||||
|
<Route path="/admin/members" element={<AdminMembers />} />
|
||||||
|
<Route path="/admin/members/:name/edit" element={<AdminMemberEdit />} />
|
||||||
|
|
||||||
{/* 일반 페이지 (레이아웃 포함) */}
|
{/* 일반 페이지 (레이아웃 포함) */}
|
||||||
<Route
|
<Route
|
||||||
|
|
|
||||||
|
|
@ -26,3 +26,6 @@ export { useCalendar } from './useCalendar';
|
||||||
|
|
||||||
// 라이트박스
|
// 라이트박스
|
||||||
export { useLightbox } from './useLightbox';
|
export { useLightbox } from './useLightbox';
|
||||||
|
|
||||||
|
// 토스트
|
||||||
|
export { default as useToast } from './useToast';
|
||||||
|
|
|
||||||
44
frontend-temp/src/hooks/common/useToast.js
Normal file
44
frontend-temp/src/hooks/common/useToast.js
Normal file
|
|
@ -0,0 +1,44 @@
|
||||||
|
/**
|
||||||
|
* Toast 상태 관리 커스텀 훅
|
||||||
|
* 자동 숨김 타이머 및 상태 관리를 제공
|
||||||
|
*/
|
||||||
|
import { useState, useEffect, useCallback } from 'react';
|
||||||
|
|
||||||
|
function useToast(duration = 3000) {
|
||||||
|
const [toast, setToast] = useState(null);
|
||||||
|
|
||||||
|
// Toast 자동 숨김
|
||||||
|
useEffect(() => {
|
||||||
|
if (toast) {
|
||||||
|
const timer = setTimeout(() => setToast(null), duration);
|
||||||
|
return () => clearTimeout(timer);
|
||||||
|
}
|
||||||
|
}, [toast, duration]);
|
||||||
|
|
||||||
|
// Toast 표시 함수
|
||||||
|
const showToast = useCallback((message, type = 'info') => {
|
||||||
|
setToast({ message, type });
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// 편의 메서드
|
||||||
|
const showSuccess = useCallback((message) => showToast(message, 'success'), [showToast]);
|
||||||
|
const showError = useCallback((message) => showToast(message, 'error'), [showToast]);
|
||||||
|
const showWarning = useCallback((message) => showToast(message, 'warning'), [showToast]);
|
||||||
|
const showInfo = useCallback((message) => showToast(message, 'info'), [showToast]);
|
||||||
|
|
||||||
|
// Toast 숨김 함수
|
||||||
|
const hideToast = useCallback(() => setToast(null), []);
|
||||||
|
|
||||||
|
return {
|
||||||
|
toast,
|
||||||
|
setToast,
|
||||||
|
showToast,
|
||||||
|
showSuccess,
|
||||||
|
showError,
|
||||||
|
showWarning,
|
||||||
|
showInfo,
|
||||||
|
hideToast,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export default useToast;
|
||||||
169
frontend-temp/src/pages/pc/admin/Dashboard.jsx
Normal file
169
frontend-temp/src/pages/pc/admin/Dashboard.jsx
Normal file
|
|
@ -0,0 +1,169 @@
|
||||||
|
/**
|
||||||
|
* 관리자 대시보드 페이지
|
||||||
|
*/
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import { useQuery } from '@tanstack/react-query';
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
import { Disc3, Calendar, Users, Home, ChevronRight } from 'lucide-react';
|
||||||
|
import { AdminLayout } from '@/components/pc/admin';
|
||||||
|
import { useAdminAuth } from '@/hooks/pc/admin';
|
||||||
|
import { adminStatsApi } from '@/api/pc/admin';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 슬롯머신 스타일 롤링 숫자 컴포넌트
|
||||||
|
*/
|
||||||
|
function AnimatedNumber({ value }) {
|
||||||
|
const formatted = value.toLocaleString();
|
||||||
|
const chars = formatted.split('');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<span className="inline-flex overflow-hidden">
|
||||||
|
{chars.map((char, i) => {
|
||||||
|
if (char === ',') {
|
||||||
|
return (
|
||||||
|
<motion.span
|
||||||
|
key={i}
|
||||||
|
className="h-[1.2em] flex items-center"
|
||||||
|
initial={{ y: '100%', opacity: 0 }}
|
||||||
|
animate={{ y: 0, opacity: 1 }}
|
||||||
|
transition={{ type: 'tween', ease: 'easeOut', duration: 0.8, delay: i * 0.15 }}
|
||||||
|
>
|
||||||
|
,
|
||||||
|
</motion.span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<span key={i} className="relative h-[1.2em] overflow-hidden">
|
||||||
|
<motion.span
|
||||||
|
className="flex flex-col"
|
||||||
|
initial={{ y: '100%' }}
|
||||||
|
animate={{ y: `-${parseInt(char) * 10}%` }}
|
||||||
|
transition={{ type: 'tween', ease: 'easeOut', duration: 0.8, delay: i * 0.15 }}
|
||||||
|
>
|
||||||
|
{[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((n) => (
|
||||||
|
<span key={n} className="h-[1.2em] flex items-center justify-center">
|
||||||
|
{n}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</motion.span>
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function AdminDashboard() {
|
||||||
|
const { user, isAuthenticated } = useAdminAuth();
|
||||||
|
|
||||||
|
// 통계 조회
|
||||||
|
const { data: stats = { members: 0, albums: 0, photos: 0, schedules: 0 } } = useQuery({
|
||||||
|
queryKey: ['admin', 'stats'],
|
||||||
|
queryFn: adminStatsApi.getStats,
|
||||||
|
enabled: isAuthenticated,
|
||||||
|
staleTime: 30 * 1000,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 메뉴 아이템
|
||||||
|
const menuItems = [
|
||||||
|
{
|
||||||
|
icon: Users,
|
||||||
|
label: '멤버 관리',
|
||||||
|
description: '멤버 정보 및 프로필 관리',
|
||||||
|
path: '/admin/members',
|
||||||
|
color: 'bg-primary',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Disc3,
|
||||||
|
label: '앨범 관리',
|
||||||
|
description: '앨범, 트랙, 사진 업로드 및 관리',
|
||||||
|
path: '/admin/albums',
|
||||||
|
color: 'bg-purple-500',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Calendar,
|
||||||
|
label: '일정 관리',
|
||||||
|
description: '일정 추가 및 관리',
|
||||||
|
path: '/admin/schedules',
|
||||||
|
color: 'bg-blue-500',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AdminLayout user={user}>
|
||||||
|
<div className="max-w-7xl mx-auto px-6 py-8">
|
||||||
|
{/* 브레드크럼 */}
|
||||||
|
<div className="flex items-center gap-2 text-sm text-gray-400 mb-8">
|
||||||
|
<Home size={16} />
|
||||||
|
<ChevronRight size={14} />
|
||||||
|
<span className="text-gray-700">관리자 대시보드</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 타이틀 */}
|
||||||
|
<div className="mb-8">
|
||||||
|
<h1 className="text-3xl font-bold text-gray-900 mb-2">관리자 대시보드</h1>
|
||||||
|
<p className="text-gray-500">fromis_9 팬사이트를 관리하세요</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 메뉴 그리드 */}
|
||||||
|
<div className="grid grid-cols-3 gap-6">
|
||||||
|
{menuItems.map((item, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={item.label}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: index * 0.1 }}
|
||||||
|
>
|
||||||
|
<Link
|
||||||
|
to={item.path}
|
||||||
|
className="block bg-white rounded-2xl p-6 border border-gray-100 shadow-sm hover:shadow-lg hover:border-gray-200 transition-all group"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={`w-12 h-12 ${item.color} rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform`}
|
||||||
|
>
|
||||||
|
<item.icon size={24} className="text-white" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-bold text-gray-900 mb-2">{item.label}</h3>
|
||||||
|
<p className="text-gray-500 text-sm">{item.description}</p>
|
||||||
|
</Link>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 빠른 통계 */}
|
||||||
|
<div className="mt-12">
|
||||||
|
<h2 className="text-xl font-bold text-gray-900 mb-6">빠른 통계</h2>
|
||||||
|
<div className="grid grid-cols-4 gap-6">
|
||||||
|
<div className="bg-white rounded-xl p-6 border border-gray-100 shadow-sm">
|
||||||
|
<p className="text-3xl font-bold text-primary mb-1">
|
||||||
|
<AnimatedNumber value={stats.members} />
|
||||||
|
</p>
|
||||||
|
<p className="text-gray-500 text-sm">멤버</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white rounded-xl p-6 border border-gray-100 shadow-sm">
|
||||||
|
<p className="text-3xl font-bold text-primary mb-1">
|
||||||
|
<AnimatedNumber value={stats.albums} />
|
||||||
|
</p>
|
||||||
|
<p className="text-gray-500 text-sm">총 앨범</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white rounded-xl p-6 border border-gray-100 shadow-sm">
|
||||||
|
<p className="text-3xl font-bold text-primary mb-1">
|
||||||
|
<AnimatedNumber value={stats.photos} />
|
||||||
|
</p>
|
||||||
|
<p className="text-gray-500 text-sm">총 사진</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white rounded-xl p-6 border border-gray-100 shadow-sm">
|
||||||
|
<p className="text-3xl font-bold text-primary mb-1">
|
||||||
|
<AnimatedNumber value={stats.schedules} />
|
||||||
|
</p>
|
||||||
|
<p className="text-gray-500 text-sm">총 일정</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</AdminLayout>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AdminDashboard;
|
||||||
377
frontend-temp/src/pages/pc/admin/MemberEdit.jsx
Normal file
377
frontend-temp/src/pages/pc/admin/MemberEdit.jsx
Normal file
|
|
@ -0,0 +1,377 @@
|
||||||
|
/**
|
||||||
|
* 관리자 멤버 수정 페이지
|
||||||
|
*/
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { useNavigate, useParams, Link } from 'react-router-dom';
|
||||||
|
import { useQuery, useQueryClient } from '@tanstack/react-query';
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
import { Save, Upload, X, Home, ChevronRight, User, Instagram, Calendar, Tag } from 'lucide-react';
|
||||||
|
import { Toast } from '@/components/common';
|
||||||
|
import { AdminLayout, DatePicker } from '@/components/pc/admin';
|
||||||
|
import { useAdminAuth } from '@/hooks/pc/admin';
|
||||||
|
import { useToast } from '@/hooks/common';
|
||||||
|
import { adminMemberApi } from '@/api/pc/admin';
|
||||||
|
import { fetchFormData } from '@/api/common/client';
|
||||||
|
|
||||||
|
function AdminMemberEdit() {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
const { name } = useParams();
|
||||||
|
const { user, isAuthenticated } = useAdminAuth();
|
||||||
|
const { toast, setToast } = useToast();
|
||||||
|
|
||||||
|
const [saving, setSaving] = useState(false);
|
||||||
|
const [imagePreview, setImagePreview] = useState(null);
|
||||||
|
const [imageFile, setImageFile] = useState(null);
|
||||||
|
const [nicknameInput, setNicknameInput] = useState('');
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
name: '',
|
||||||
|
name_en: '',
|
||||||
|
birth_date: '',
|
||||||
|
instagram: '',
|
||||||
|
is_former: false,
|
||||||
|
nicknames: [],
|
||||||
|
});
|
||||||
|
|
||||||
|
// 멤버 상세 조회
|
||||||
|
const {
|
||||||
|
data: memberData,
|
||||||
|
isLoading: loading,
|
||||||
|
isError,
|
||||||
|
} = useQuery({
|
||||||
|
queryKey: ['admin', 'member', name],
|
||||||
|
queryFn: () => adminMemberApi.getMember(encodeURIComponent(name)),
|
||||||
|
enabled: isAuthenticated,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 데이터 로드 시 폼에 반영
|
||||||
|
useEffect(() => {
|
||||||
|
if (memberData) {
|
||||||
|
const birthDate = memberData.birth_date ? memberData.birth_date.split('T')[0] : '';
|
||||||
|
setFormData({
|
||||||
|
name: memberData.name || '',
|
||||||
|
name_en: memberData.name_en || '',
|
||||||
|
birth_date: birthDate,
|
||||||
|
instagram: memberData.instagram || '',
|
||||||
|
is_former: !!memberData.is_former,
|
||||||
|
nicknames: memberData.nicknames || [],
|
||||||
|
});
|
||||||
|
setImagePreview(memberData.image_url);
|
||||||
|
}
|
||||||
|
}, [memberData]);
|
||||||
|
|
||||||
|
// 에러 처리
|
||||||
|
useEffect(() => {
|
||||||
|
if (isError) {
|
||||||
|
setToast({ message: '멤버 정보를 불러오는데 실패했습니다.', type: 'error' });
|
||||||
|
}
|
||||||
|
}, [isError, setToast]);
|
||||||
|
|
||||||
|
const handleImageChange = (e) => {
|
||||||
|
const file = e.target.files[0];
|
||||||
|
if (file) {
|
||||||
|
setImageFile(file);
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.onloadend = () => setImagePreview(reader.result);
|
||||||
|
reader.readAsDataURL(file);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 별명 추가
|
||||||
|
const handleAddNickname = () => {
|
||||||
|
const trimmed = nicknameInput.trim();
|
||||||
|
if (trimmed && !formData.nicknames.includes(trimmed)) {
|
||||||
|
setFormData({
|
||||||
|
...formData,
|
||||||
|
nicknames: [...formData.nicknames, trimmed],
|
||||||
|
});
|
||||||
|
setNicknameInput('');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 별명 삭제
|
||||||
|
const handleRemoveNickname = (nickname) => {
|
||||||
|
setFormData({
|
||||||
|
...formData,
|
||||||
|
nicknames: formData.nicknames.filter((n) => n !== nickname),
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// Enter 키로 별명 추가
|
||||||
|
const handleNicknameKeyDown = (e) => {
|
||||||
|
if (e.key === 'Enter') {
|
||||||
|
e.preventDefault();
|
||||||
|
handleAddNickname();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setSaving(true);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const form = new FormData();
|
||||||
|
form.append('name', formData.name);
|
||||||
|
form.append('name_en', formData.name_en);
|
||||||
|
form.append('birth_date', formData.birth_date);
|
||||||
|
form.append('instagram', formData.instagram);
|
||||||
|
form.append('is_former', formData.is_former ? '1' : '0');
|
||||||
|
form.append('nicknames', JSON.stringify(formData.nicknames));
|
||||||
|
|
||||||
|
if (imageFile) {
|
||||||
|
form.append('image', imageFile);
|
||||||
|
}
|
||||||
|
|
||||||
|
await fetchFormData(`/members/${encodeURIComponent(name)}`, form, 'PUT');
|
||||||
|
|
||||||
|
// 목록 캐시 무효화
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['admin', 'members'] });
|
||||||
|
|
||||||
|
// 목록 페이지로 이동하면서 토스트 메시지 전달
|
||||||
|
navigate('/admin/members', {
|
||||||
|
state: { toast: { message: '멤버 정보가 수정되었습니다.', type: 'success' } },
|
||||||
|
});
|
||||||
|
} catch (err) {
|
||||||
|
setToast({ message: err.message || '멤버 수정에 실패했습니다.', type: 'error' });
|
||||||
|
} finally {
|
||||||
|
setSaving(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AdminLayout user={user}>
|
||||||
|
<Toast toast={toast} onClose={() => setToast(null)} />
|
||||||
|
|
||||||
|
<div className="max-w-4xl mx-auto px-6 py-8">
|
||||||
|
{/* 브레드크럼 */}
|
||||||
|
<div className="flex items-center gap-2 text-sm text-gray-400 mb-8">
|
||||||
|
<Link to="/admin/dashboard" className="hover:text-primary transition-colors">
|
||||||
|
<Home size={16} />
|
||||||
|
</Link>
|
||||||
|
<ChevronRight size={14} />
|
||||||
|
<Link to="/admin/members" className="hover:text-primary transition-colors">
|
||||||
|
멤버 관리
|
||||||
|
</Link>
|
||||||
|
<ChevronRight size={14} />
|
||||||
|
<span className="text-gray-700">멤버 수정</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 타이틀 */}
|
||||||
|
<div className="mb-8">
|
||||||
|
<h1 className="text-3xl font-bold text-gray-900 mb-2">멤버 수정</h1>
|
||||||
|
<p className="text-gray-500">멤버 정보를 수정합니다</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{loading ? (
|
||||||
|
<div className="flex justify-center items-center py-20">
|
||||||
|
<div className="animate-spin rounded-full h-12 w-12 border-4 border-primary border-t-transparent" />
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<motion.form
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
onSubmit={handleSubmit}
|
||||||
|
className="bg-white rounded-2xl p-8 border border-gray-100 shadow-sm"
|
||||||
|
>
|
||||||
|
<div className="grid grid-cols-3 gap-8">
|
||||||
|
{/* 이미지 업로드 영역 */}
|
||||||
|
<div className="col-span-1">
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-3">프로필 사진</label>
|
||||||
|
<div
|
||||||
|
className="aspect-[3/4] rounded-2xl border-2 border-dashed border-gray-200 overflow-hidden relative group cursor-pointer hover:border-primary transition-colors"
|
||||||
|
onClick={() => document.getElementById('imageInput').click()}
|
||||||
|
>
|
||||||
|
{imagePreview ? (
|
||||||
|
<>
|
||||||
|
<img
|
||||||
|
src={imagePreview}
|
||||||
|
alt="프로필 미리보기"
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
<div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
|
||||||
|
<div className="text-white text-center">
|
||||||
|
<Upload size={32} className="mx-auto mb-2" />
|
||||||
|
<span className="text-sm">변경</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<div className="w-full h-full flex flex-col items-center justify-center text-gray-400">
|
||||||
|
<User size={48} className="mb-2" />
|
||||||
|
<span className="text-sm">클릭하여 업로드</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
id="imageInput"
|
||||||
|
type="file"
|
||||||
|
accept="image/*"
|
||||||
|
onChange={handleImageChange}
|
||||||
|
className="hidden"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 입력 폼 영역 */}
|
||||||
|
<div className="col-span-2 space-y-6">
|
||||||
|
{/* 이름 */}
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
<User size={16} className="inline mr-1" />
|
||||||
|
이름 *
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={formData.name}
|
||||||
|
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||||
|
required
|
||||||
|
className="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
|
||||||
|
placeholder="멤버 이름"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
영문 이름
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={formData.name_en}
|
||||||
|
onChange={(e) => setFormData({ ...formData, name_en: e.target.value })}
|
||||||
|
className="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
|
||||||
|
placeholder="ENGLISH NAME"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 생년월일 */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
<Calendar size={16} className="inline mr-1" />
|
||||||
|
생년월일
|
||||||
|
</label>
|
||||||
|
<DatePicker
|
||||||
|
value={formData.birth_date}
|
||||||
|
onChange={(date) => setFormData({ ...formData, birth_date: date })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 인스타그램 */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
<Instagram size={16} className="inline mr-1" />
|
||||||
|
인스타그램
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={formData.instagram}
|
||||||
|
onChange={(e) => setFormData({ ...formData, instagram: e.target.value })}
|
||||||
|
className="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
|
||||||
|
placeholder="https://www.instagram.com/username"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 별명 */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
<Tag size={16} className="inline mr-1" />
|
||||||
|
별명
|
||||||
|
</label>
|
||||||
|
<div className="space-y-3">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={nicknameInput}
|
||||||
|
onChange={(e) => setNicknameInput(e.target.value)}
|
||||||
|
onKeyDown={handleNicknameKeyDown}
|
||||||
|
className="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
|
||||||
|
placeholder="별명을 입력하고 Enter"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{formData.nicknames.length > 0 && (
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{formData.nicknames.map((nickname, index) => (
|
||||||
|
<span
|
||||||
|
key={index}
|
||||||
|
className="inline-flex items-center gap-1 px-3 py-1.5 bg-primary/10 text-primary rounded-full text-sm"
|
||||||
|
>
|
||||||
|
{nickname}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => handleRemoveNickname(nickname)}
|
||||||
|
className="hover:bg-primary/20 rounded-full p-0.5 transition-colors"
|
||||||
|
>
|
||||||
|
<X size={14} />
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<p className="mt-2 text-xs text-gray-400">별명은 일정 검색 시 사용됩니다</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 활동 상태 */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-2">활동 상태</label>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setFormData({ ...formData, is_former: false })}
|
||||||
|
className={`px-4 py-2 rounded-lg font-medium transition-colors ${
|
||||||
|
!formData.is_former
|
||||||
|
? 'bg-primary text-white'
|
||||||
|
: 'bg-gray-100 text-gray-500 hover:bg-gray-200'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
활동 중
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setFormData({ ...formData, is_former: true })}
|
||||||
|
className={`px-4 py-2 rounded-lg font-medium transition-colors ${
|
||||||
|
formData.is_former
|
||||||
|
? 'bg-gray-600 text-white'
|
||||||
|
: 'bg-gray-100 text-gray-500 hover:bg-gray-200'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
탈퇴
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 버튼 영역 */}
|
||||||
|
<div className="flex justify-end gap-3 mt-8 pt-6 border-t border-gray-100">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => navigate('/admin/members')}
|
||||||
|
className="px-6 py-3 text-gray-600 hover:bg-gray-100 rounded-xl transition-colors"
|
||||||
|
>
|
||||||
|
취소
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={saving}
|
||||||
|
className="flex items-center gap-2 px-6 py-3 bg-primary text-white rounded-xl hover:bg-primary-dark transition-colors disabled:opacity-50"
|
||||||
|
>
|
||||||
|
{saving ? (
|
||||||
|
<>
|
||||||
|
<span className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
|
||||||
|
저장 중...
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Save size={18} />
|
||||||
|
저장
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</motion.form>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</AdminLayout>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AdminMemberEdit;
|
||||||
180
frontend-temp/src/pages/pc/admin/Members.jsx
Normal file
180
frontend-temp/src/pages/pc/admin/Members.jsx
Normal file
|
|
@ -0,0 +1,180 @@
|
||||||
|
/**
|
||||||
|
* 관리자 멤버 목록 페이지
|
||||||
|
*/
|
||||||
|
import { useEffect } from 'react';
|
||||||
|
import { useNavigate, useLocation, Link } from 'react-router-dom';
|
||||||
|
import { useQuery } from '@tanstack/react-query';
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
import { Edit2, Home, ChevronRight, Users, User } from 'lucide-react';
|
||||||
|
import { Toast } from '@/components/common';
|
||||||
|
import { AdminLayout } from '@/components/pc/admin';
|
||||||
|
import { useAdminAuth } from '@/hooks/pc/admin';
|
||||||
|
import { useToast } from '@/hooks/common';
|
||||||
|
import { adminMemberApi } from '@/api/pc/admin';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 멤버 카드 컴포넌트
|
||||||
|
*/
|
||||||
|
function MemberCard({ member, index, isFormer = false, onClick }) {
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, scale: 0.9 }}
|
||||||
|
animate={{ opacity: 1, scale: 1 }}
|
||||||
|
transition={{ type: 'tween', ease: 'easeOut', duration: 0.35, delay: index * 0.06 }}
|
||||||
|
className={`relative rounded-2xl overflow-hidden shadow-sm hover:shadow-lg transition-all group cursor-pointer ${isFormer ? 'opacity-60' : ''}`}
|
||||||
|
onClick={onClick}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={`aspect-[3/4] bg-gray-100 relative overflow-hidden ${isFormer ? 'grayscale' : ''}`}
|
||||||
|
>
|
||||||
|
{member.image_url ? (
|
||||||
|
<img
|
||||||
|
src={member.image_url}
|
||||||
|
alt={member.name}
|
||||||
|
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="w-full h-full flex items-center justify-center bg-gradient-to-b from-gray-100 to-gray-200">
|
||||||
|
<User size={48} className="text-gray-300" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-black/70 via-black/30 to-transparent" />
|
||||||
|
<div className="absolute bottom-0 left-0 right-0 p-4">
|
||||||
|
<h3 className="text-lg font-bold text-white drop-shadow-lg">{member.name}</h3>
|
||||||
|
</div>
|
||||||
|
<div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors flex items-center justify-center opacity-0 group-hover:opacity-100">
|
||||||
|
<div className="px-4 py-2 bg-white/90 backdrop-blur-sm text-gray-900 rounded-lg font-medium flex items-center gap-2 shadow-lg">
|
||||||
|
<Edit2 size={16} />
|
||||||
|
수정
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function AdminMembers() {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const location = useLocation();
|
||||||
|
const { user, isAuthenticated } = useAdminAuth();
|
||||||
|
const { toast, setToast } = useToast();
|
||||||
|
|
||||||
|
// 다른 페이지에서 전달된 토스트 메시지 처리
|
||||||
|
useEffect(() => {
|
||||||
|
if (location.state?.toast) {
|
||||||
|
setToast(location.state.toast);
|
||||||
|
window.history.replaceState({}, '');
|
||||||
|
}
|
||||||
|
}, [location.state, setToast]);
|
||||||
|
|
||||||
|
// 멤버 목록 조회
|
||||||
|
const {
|
||||||
|
data: members = [],
|
||||||
|
isLoading: loading,
|
||||||
|
isError,
|
||||||
|
} = useQuery({
|
||||||
|
queryKey: ['admin', 'members'],
|
||||||
|
queryFn: adminMemberApi.getMembers,
|
||||||
|
enabled: isAuthenticated,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 에러 처리
|
||||||
|
useEffect(() => {
|
||||||
|
if (isError) {
|
||||||
|
setToast({ message: '멤버 목록을 불러오는데 실패했습니다.', type: 'error' });
|
||||||
|
}
|
||||||
|
}, [isError, setToast]);
|
||||||
|
|
||||||
|
// 활동/탈퇴 멤버 분리
|
||||||
|
const activeMembers = members.filter((m) => !m.is_former);
|
||||||
|
const formerMembers = members.filter((m) => m.is_former);
|
||||||
|
|
||||||
|
const handleMemberClick = (memberName) => {
|
||||||
|
navigate(`/admin/members/${encodeURIComponent(memberName)}/edit`);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AdminLayout user={user}>
|
||||||
|
<Toast toast={toast} onClose={() => setToast(null)} />
|
||||||
|
|
||||||
|
<div className="max-w-7xl mx-auto px-6 py-8">
|
||||||
|
{/* 브레드크럼 */}
|
||||||
|
<div className="flex items-center gap-2 text-sm text-gray-400 mb-8">
|
||||||
|
<Link to="/admin/dashboard" className="hover:text-primary transition-colors">
|
||||||
|
<Home size={16} />
|
||||||
|
</Link>
|
||||||
|
<ChevronRight size={14} />
|
||||||
|
<span className="text-gray-700">멤버 관리</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 타이틀 */}
|
||||||
|
<div className="mb-8">
|
||||||
|
<h1 className="text-3xl font-bold text-gray-900 mb-2">멤버 관리</h1>
|
||||||
|
<p className="text-gray-500">멤버 정보 및 프로필을 관리합니다</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 멤버 목록 */}
|
||||||
|
{loading ? (
|
||||||
|
<div className="flex justify-center items-center py-20">
|
||||||
|
<div className="animate-spin rounded-full h-12 w-12 border-4 border-primary border-t-transparent" />
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-12">
|
||||||
|
{/* 활동 멤버 */}
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-2 mb-6">
|
||||||
|
<Users size={20} className="text-primary" />
|
||||||
|
<h2 className="text-xl font-bold text-gray-900">현재 멤버</h2>
|
||||||
|
<span className="px-2 py-0.5 bg-primary/10 text-primary text-sm font-medium rounded-full">
|
||||||
|
{activeMembers.length}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-5 gap-5">
|
||||||
|
{activeMembers.map((member, index) => (
|
||||||
|
<MemberCard
|
||||||
|
key={member.id}
|
||||||
|
member={member}
|
||||||
|
index={index}
|
||||||
|
onClick={() => handleMemberClick(member.name)}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 탈퇴 멤버 */}
|
||||||
|
{formerMembers.length > 0 && (
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-2 mb-6">
|
||||||
|
<User size={20} className="text-gray-400" />
|
||||||
|
<h2 className="text-xl font-bold text-gray-500">이전 멤버</h2>
|
||||||
|
<span className="px-2 py-0.5 bg-gray-100 text-gray-500 text-sm font-medium rounded-full">
|
||||||
|
{formerMembers.length}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-5 gap-5">
|
||||||
|
{formerMembers.map((member, index) => (
|
||||||
|
<MemberCard
|
||||||
|
key={member.id}
|
||||||
|
member={member}
|
||||||
|
index={index}
|
||||||
|
isFormer
|
||||||
|
onClick={() => handleMemberClick(member.name)}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{members.length === 0 && (
|
||||||
|
<div className="text-center py-12 text-gray-500">등록된 멤버가 없습니다.</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</AdminLayout>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AdminMembers;
|
||||||
Loading…
Add table
Reference in a new issue