feat: 멤버 프로필 수정 페이지 구현
- 멤버 수정 페이지 추가 (AdminMemberEdit.jsx) - 커스텀 데이트픽커 적용 (앨범 폼과 동일) - 활동 상태 버튼 토글 (활동 중/탈퇴) - URL 라우터 멤버 이름 기반으로 변경 (/admin/members/:name/edit) - 백엔드 멤버 조회/수정 API 추가 (이름 기반) - 전 멤버 섹션 UI 개선 (배경 항상 표시, 포지션 제거)
This commit is contained in:
parent
97e63580e5
commit
20cb711795
5 changed files with 696 additions and 7 deletions
|
|
@ -907,4 +907,99 @@ router.delete(
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// ==================== 멤버 관리 API ====================
|
||||||
|
|
||||||
|
// 멤버 상세 조회 (이름으로)
|
||||||
|
router.get("/members/:name", authenticateToken, async (req, res) => {
|
||||||
|
try {
|
||||||
|
const memberName = decodeURIComponent(req.params.name);
|
||||||
|
const [members] = await pool.query("SELECT * FROM members WHERE name = ?", [
|
||||||
|
memberName,
|
||||||
|
]);
|
||||||
|
|
||||||
|
if (members.length === 0) {
|
||||||
|
return res.status(404).json({ error: "멤버를 찾을 수 없습니다." });
|
||||||
|
}
|
||||||
|
|
||||||
|
res.json(members[0]);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("멤버 조회 오류:", error);
|
||||||
|
res.status(500).json({ error: "멤버 조회 중 오류가 발생했습니다." });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 멤버 수정 (이름으로)
|
||||||
|
router.put(
|
||||||
|
"/members/:name",
|
||||||
|
authenticateToken,
|
||||||
|
upload.single("image"),
|
||||||
|
async (req, res) => {
|
||||||
|
try {
|
||||||
|
const memberName = decodeURIComponent(req.params.name);
|
||||||
|
const { name, birth_date, position, instagram, is_former } = req.body;
|
||||||
|
|
||||||
|
// 기존 멤버 확인
|
||||||
|
const [existing] = await pool.query(
|
||||||
|
"SELECT * FROM members WHERE name = ?",
|
||||||
|
[memberName]
|
||||||
|
);
|
||||||
|
if (existing.length === 0) {
|
||||||
|
return res.status(404).json({ error: "멤버를 찾을 수 없습니다." });
|
||||||
|
}
|
||||||
|
|
||||||
|
const memberId = existing[0].id;
|
||||||
|
|
||||||
|
let imageUrl = existing[0].image_url;
|
||||||
|
|
||||||
|
// 새 이미지 업로드
|
||||||
|
if (req.file) {
|
||||||
|
const webpBuffer = await sharp(req.file.buffer)
|
||||||
|
.webp({ quality: 90 })
|
||||||
|
.toBuffer();
|
||||||
|
|
||||||
|
const key = `member/${memberId}/profile.webp`;
|
||||||
|
|
||||||
|
await s3Client.send(
|
||||||
|
new PutObjectCommand({
|
||||||
|
Bucket: BUCKET,
|
||||||
|
Key: key,
|
||||||
|
Body: webpBuffer,
|
||||||
|
ContentType: "image/webp",
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
const publicUrl =
|
||||||
|
process.env.RUSTFS_PUBLIC_URL || process.env.RUSTFS_ENDPOINT;
|
||||||
|
imageUrl = `${publicUrl}/${BUCKET}/${key}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 멤버 업데이트
|
||||||
|
await pool.query(
|
||||||
|
`UPDATE members SET
|
||||||
|
name = ?,
|
||||||
|
birth_date = ?,
|
||||||
|
position = ?,
|
||||||
|
instagram = ?,
|
||||||
|
is_former = ?,
|
||||||
|
image_url = ?
|
||||||
|
WHERE id = ?`,
|
||||||
|
[
|
||||||
|
name,
|
||||||
|
birth_date || null,
|
||||||
|
position || null,
|
||||||
|
instagram || null,
|
||||||
|
is_former === "true" || is_former === true ? 1 : 0,
|
||||||
|
imageUrl,
|
||||||
|
memberId,
|
||||||
|
]
|
||||||
|
);
|
||||||
|
|
||||||
|
res.json({ message: "멤버 정보가 수정되었습니다." });
|
||||||
|
} catch (error) {
|
||||||
|
console.error("멤버 수정 오류:", error);
|
||||||
|
res.status(500).json({ error: "멤버 수정 중 오류가 발생했습니다." });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
export default router;
|
export default router;
|
||||||
|
|
|
||||||
|
|
@ -13,6 +13,7 @@ import PCSchedule from './pages/pc/Schedule';
|
||||||
import AdminLogin from './pages/pc/admin/AdminLogin';
|
import AdminLogin from './pages/pc/admin/AdminLogin';
|
||||||
import AdminDashboard from './pages/pc/admin/AdminDashboard';
|
import AdminDashboard from './pages/pc/admin/AdminDashboard';
|
||||||
import AdminMembers from './pages/pc/admin/AdminMembers';
|
import AdminMembers from './pages/pc/admin/AdminMembers';
|
||||||
|
import AdminMemberEdit from './pages/pc/admin/AdminMemberEdit';
|
||||||
import AdminAlbums from './pages/pc/admin/AdminAlbums';
|
import AdminAlbums from './pages/pc/admin/AdminAlbums';
|
||||||
import AdminAlbumForm from './pages/pc/admin/AdminAlbumForm';
|
import AdminAlbumForm from './pages/pc/admin/AdminAlbumForm';
|
||||||
import AdminAlbumPhotos from './pages/pc/admin/AdminAlbumPhotos';
|
import AdminAlbumPhotos from './pages/pc/admin/AdminAlbumPhotos';
|
||||||
|
|
@ -29,6 +30,7 @@ function App() {
|
||||||
<Route path="/admin" element={<AdminLogin />} />
|
<Route path="/admin" element={<AdminLogin />} />
|
||||||
<Route path="/admin/dashboard" element={<AdminDashboard />} />
|
<Route path="/admin/dashboard" element={<AdminDashboard />} />
|
||||||
<Route path="/admin/members" element={<AdminMembers />} />
|
<Route path="/admin/members" element={<AdminMembers />} />
|
||||||
|
<Route path="/admin/members/:name/edit" element={<AdminMemberEdit />} />
|
||||||
<Route path="/admin/albums" element={<AdminAlbums />} />
|
<Route path="/admin/albums" element={<AdminAlbums />} />
|
||||||
<Route path="/admin/albums/new" element={<AdminAlbumForm />} />
|
<Route path="/admin/albums/new" element={<AdminAlbumForm />} />
|
||||||
<Route path="/admin/albums/:id/edit" element={<AdminAlbumForm />} />
|
<Route path="/admin/albums/:id/edit" element={<AdminAlbumForm />} />
|
||||||
|
|
|
||||||
|
|
@ -127,7 +127,7 @@ function Members() {
|
||||||
initial={{ opacity: 0, x: -10 }}
|
initial={{ opacity: 0, x: -10 }}
|
||||||
animate={{ opacity: 1, x: 0 }}
|
animate={{ opacity: 1, x: 0 }}
|
||||||
transition={{ delay: 0.6 + index * 0.05 }}
|
transition={{ delay: 0.6 + index * 0.05 }}
|
||||||
className="group flex items-center gap-3 bg-gray-50 rounded-full pr-4 hover:bg-gray-100 transition-colors"
|
className="group flex items-center gap-3 bg-gray-100 rounded-full pr-4 hover:bg-gray-200 transition-colors"
|
||||||
>
|
>
|
||||||
{/* 작은 원형 이미지 */}
|
{/* 작은 원형 이미지 */}
|
||||||
<div className="w-12 h-12 rounded-full bg-gray-200 overflow-hidden flex-shrink-0">
|
<div className="w-12 h-12 rounded-full bg-gray-200 overflow-hidden flex-shrink-0">
|
||||||
|
|
@ -137,11 +137,8 @@ function Members() {
|
||||||
className="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-300"
|
className="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-300"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
{/* 이름과 포지션 */}
|
{/* 이름 */}
|
||||||
<div>
|
|
||||||
<p className="font-medium text-gray-600 text-sm">{member.name}</p>
|
<p className="font-medium text-gray-600 text-sm">{member.name}</p>
|
||||||
<p className="text-xs text-gray-400">{member.position || ''}</p>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
</motion.div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
595
frontend/src/pages/pc/admin/AdminMemberEdit.jsx
Normal file
595
frontend/src/pages/pc/admin/AdminMemberEdit.jsx
Normal file
|
|
@ -0,0 +1,595 @@
|
||||||
|
import { useState, useEffect, useRef } from 'react';
|
||||||
|
import { useNavigate, useParams, Link } from 'react-router-dom';
|
||||||
|
import { motion, AnimatePresence } from 'framer-motion';
|
||||||
|
import {
|
||||||
|
Save, Upload, LogOut,
|
||||||
|
Home, ChevronRight, ChevronLeft, ChevronDown, User, Instagram, Calendar, Briefcase
|
||||||
|
} from 'lucide-react';
|
||||||
|
import Toast from '../../../components/Toast';
|
||||||
|
|
||||||
|
// 커스텀 데이트픽커 컴포넌트
|
||||||
|
function CustomDatePicker({ value, onChange }) {
|
||||||
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
|
const [viewMode, setViewMode] = useState('days');
|
||||||
|
const [viewDate, setViewDate] = useState(() => {
|
||||||
|
if (value) return new Date(value);
|
||||||
|
return new Date();
|
||||||
|
});
|
||||||
|
const ref = useRef(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleClickOutside = (e) => {
|
||||||
|
if (ref.current && !ref.current.contains(e.target)) {
|
||||||
|
setIsOpen(false);
|
||||||
|
setViewMode('days');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
document.addEventListener('mousedown', handleClickOutside);
|
||||||
|
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const year = viewDate.getFullYear();
|
||||||
|
const month = viewDate.getMonth();
|
||||||
|
|
||||||
|
const firstDay = new Date(year, month, 1).getDay();
|
||||||
|
const daysInMonth = new Date(year, month + 1, 0).getDate();
|
||||||
|
|
||||||
|
const days = [];
|
||||||
|
for (let i = 0; i < firstDay; i++) {
|
||||||
|
days.push(null);
|
||||||
|
}
|
||||||
|
for (let i = 1; i <= daysInMonth; i++) {
|
||||||
|
days.push(i);
|
||||||
|
}
|
||||||
|
|
||||||
|
const startYear = Math.floor(year / 10) * 10 - 1;
|
||||||
|
const years = Array.from({ length: 12 }, (_, i) => startYear + i);
|
||||||
|
|
||||||
|
const prevMonth = () => setViewDate(new Date(year, month - 1, 1));
|
||||||
|
const nextMonth = () => setViewDate(new Date(year, month + 1, 1));
|
||||||
|
const prevYearRange = () => setViewDate(new Date(year - 10, month, 1));
|
||||||
|
const nextYearRange = () => setViewDate(new Date(year + 10, month, 1));
|
||||||
|
|
||||||
|
const selectDate = (day) => {
|
||||||
|
const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
|
||||||
|
onChange(dateStr);
|
||||||
|
setIsOpen(false);
|
||||||
|
setViewMode('days');
|
||||||
|
};
|
||||||
|
|
||||||
|
const selectYear = (y) => {
|
||||||
|
setViewDate(new Date(y, month, 1));
|
||||||
|
setViewMode('months');
|
||||||
|
};
|
||||||
|
|
||||||
|
const selectMonth = (m) => {
|
||||||
|
setViewDate(new Date(year, m, 1));
|
||||||
|
setViewMode('days');
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatDisplayDate = (dateStr) => {
|
||||||
|
if (!dateStr) return '';
|
||||||
|
const [y, m, d] = dateStr.split('-');
|
||||||
|
return `${y}년 ${parseInt(m)}월 ${parseInt(d)}일`;
|
||||||
|
};
|
||||||
|
|
||||||
|
const isSelected = (day) => {
|
||||||
|
if (!value || !day) return false;
|
||||||
|
const [y, m, d] = value.split('-');
|
||||||
|
return parseInt(y) === year && parseInt(m) === month + 1 && parseInt(d) === day;
|
||||||
|
};
|
||||||
|
|
||||||
|
const isToday = (day) => {
|
||||||
|
if (!day) return false;
|
||||||
|
const today = new Date();
|
||||||
|
return today.getFullYear() === year && today.getMonth() === month && today.getDate() === day;
|
||||||
|
};
|
||||||
|
|
||||||
|
const isCurrentYear = (y) => new Date().getFullYear() === y;
|
||||||
|
const isCurrentMonth = (m) => {
|
||||||
|
const today = new Date();
|
||||||
|
return today.getFullYear() === year && today.getMonth() === m;
|
||||||
|
};
|
||||||
|
|
||||||
|
const months = ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div ref={ref} className="relative">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setIsOpen(!isOpen)}
|
||||||
|
className="w-full px-4 py-3 border border-gray-200 rounded-xl bg-white flex items-center justify-between hover:border-gray-300 transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
|
||||||
|
>
|
||||||
|
<span className={value ? 'text-gray-900' : 'text-gray-400'}>
|
||||||
|
{value ? formatDisplayDate(value) : '날짜 선택'}
|
||||||
|
</span>
|
||||||
|
<Calendar size={18} className="text-gray-400" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<AnimatePresence>
|
||||||
|
{isOpen && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: -10 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
exit={{ opacity: 0, y: -10 }}
|
||||||
|
transition={{ duration: 0.15 }}
|
||||||
|
className="absolute z-50 mt-2 bg-white border border-gray-200 rounded-xl shadow-lg p-4 w-80"
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-between mb-4">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={viewMode === 'years' ? prevYearRange : prevMonth}
|
||||||
|
className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors"
|
||||||
|
>
|
||||||
|
<ChevronLeft size={20} className="text-gray-600" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setViewMode(viewMode === 'days' ? 'years' : 'days')}
|
||||||
|
className="font-medium text-gray-900 hover:text-primary transition-colors flex items-center gap-1"
|
||||||
|
>
|
||||||
|
{viewMode === 'years' ? `${years[0]} - ${years[years.length - 1]}` : `${year}년 ${month + 1}월`}
|
||||||
|
<ChevronDown size={16} className={`transition-transform ${viewMode !== 'days' ? 'rotate-180' : ''}`} />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={viewMode === 'years' ? nextYearRange : nextMonth}
|
||||||
|
className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors"
|
||||||
|
>
|
||||||
|
<ChevronRight size={20} className="text-gray-600" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<AnimatePresence mode="wait">
|
||||||
|
{viewMode === 'years' && (
|
||||||
|
<motion.div
|
||||||
|
key="years"
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
exit={{ opacity: 0 }}
|
||||||
|
transition={{ duration: 0.15 }}
|
||||||
|
>
|
||||||
|
<div className="text-center text-sm text-gray-500 mb-3">년도</div>
|
||||||
|
<div className="grid grid-cols-4 gap-2 mb-4">
|
||||||
|
{years.map((y) => (
|
||||||
|
<button
|
||||||
|
key={y}
|
||||||
|
type="button"
|
||||||
|
onClick={() => selectYear(y)}
|
||||||
|
className={`py-2 rounded-lg text-sm transition-colors ${year === y ? 'bg-primary text-white' : 'hover:bg-gray-100 text-gray-700'} ${isCurrentYear(y) && year !== y ? 'border border-primary text-primary' : ''}`}
|
||||||
|
>
|
||||||
|
{y}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="text-center text-sm text-gray-500 mb-3">월</div>
|
||||||
|
<div className="grid grid-cols-4 gap-2">
|
||||||
|
{months.map((m, i) => (
|
||||||
|
<button
|
||||||
|
key={m}
|
||||||
|
type="button"
|
||||||
|
onClick={() => selectMonth(i)}
|
||||||
|
className={`py-2 rounded-lg text-sm transition-colors ${month === i ? 'bg-primary text-white' : 'hover:bg-gray-100 text-gray-700'} ${isCurrentMonth(i) && month !== i ? 'border border-primary text-primary' : ''}`}
|
||||||
|
>
|
||||||
|
{m}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{viewMode === 'months' && (
|
||||||
|
<motion.div
|
||||||
|
key="months"
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
exit={{ opacity: 0 }}
|
||||||
|
transition={{ duration: 0.15 }}
|
||||||
|
>
|
||||||
|
<div className="text-center text-sm text-gray-500 mb-3">월 선택</div>
|
||||||
|
<div className="grid grid-cols-4 gap-2">
|
||||||
|
{months.map((m, i) => (
|
||||||
|
<button
|
||||||
|
key={m}
|
||||||
|
type="button"
|
||||||
|
onClick={() => selectMonth(i)}
|
||||||
|
className={`py-2.5 rounded-lg text-sm transition-colors ${month === i ? 'bg-primary text-white' : 'hover:bg-gray-100 text-gray-700'} ${isCurrentMonth(i) && month !== i ? 'border border-primary text-primary' : ''}`}
|
||||||
|
>
|
||||||
|
{m}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{viewMode === 'days' && (
|
||||||
|
<motion.div
|
||||||
|
key="days"
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
exit={{ opacity: 0 }}
|
||||||
|
transition={{ duration: 0.15 }}
|
||||||
|
>
|
||||||
|
<div className="grid grid-cols-7 gap-1 mb-2">
|
||||||
|
{['일', '월', '화', '수', '목', '금', '토'].map((d, i) => (
|
||||||
|
<div
|
||||||
|
key={d}
|
||||||
|
className={`text-center text-xs font-medium py-1 ${i === 0 ? 'text-red-400' : i === 6 ? 'text-blue-400' : 'text-gray-400'}`}
|
||||||
|
>
|
||||||
|
{d}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-7 gap-1">
|
||||||
|
{days.map((day, i) => (
|
||||||
|
<button
|
||||||
|
key={i}
|
||||||
|
type="button"
|
||||||
|
disabled={!day}
|
||||||
|
onClick={() => day && selectDate(day)}
|
||||||
|
className={`aspect-square rounded-lg text-sm flex items-center justify-center transition-colors ${!day ? '' : 'hover:bg-gray-100'} ${isSelected(day) ? 'bg-primary text-white hover:bg-primary-dark' : ''} ${isToday(day) && !isSelected(day) ? 'border border-primary text-primary' : ''} ${day && !isSelected(day) && !isToday(day) ? 'text-gray-700' : ''}`}
|
||||||
|
>
|
||||||
|
{day}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function AdminMemberEdit() {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const { name } = useParams();
|
||||||
|
const [user, setUser] = useState(null);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [saving, setSaving] = useState(false);
|
||||||
|
const [toast, setToast] = useState(null);
|
||||||
|
const [imagePreview, setImagePreview] = useState(null);
|
||||||
|
const [imageFile, setImageFile] = useState(null);
|
||||||
|
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
name: '',
|
||||||
|
birth_date: '',
|
||||||
|
position: '',
|
||||||
|
instagram: '',
|
||||||
|
is_former: false
|
||||||
|
});
|
||||||
|
|
||||||
|
// 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));
|
||||||
|
fetchMember();
|
||||||
|
}, [navigate, name]);
|
||||||
|
|
||||||
|
const fetchMember = async () => {
|
||||||
|
try {
|
||||||
|
const token = localStorage.getItem('adminToken');
|
||||||
|
const res = await fetch(`/api/admin/members/${encodeURIComponent(name)}`, {
|
||||||
|
headers: { Authorization: `Bearer ${token}` }
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!res.ok) throw new Error('멤버 조회 실패');
|
||||||
|
|
||||||
|
const data = await res.json();
|
||||||
|
setFormData({
|
||||||
|
name: data.name || '',
|
||||||
|
birth_date: data.birth_date ? data.birth_date.split('T')[0] : '',
|
||||||
|
position: data.position || '',
|
||||||
|
instagram: data.instagram || '',
|
||||||
|
is_former: !!data.is_former
|
||||||
|
});
|
||||||
|
setImagePreview(data.image_url);
|
||||||
|
setLoading(false);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('멤버 로드 오류:', error);
|
||||||
|
setToast({ message: '멤버 정보를 불러올 수 없습니다.', type: 'error' });
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleLogout = () => {
|
||||||
|
localStorage.removeItem('adminToken');
|
||||||
|
localStorage.removeItem('adminUser');
|
||||||
|
navigate('/admin');
|
||||||
|
};
|
||||||
|
|
||||||
|
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 handleSubmit = async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setSaving(true);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const token = localStorage.getItem('adminToken');
|
||||||
|
const formDataToSend = new FormData();
|
||||||
|
|
||||||
|
formDataToSend.append('name', formData.name);
|
||||||
|
formDataToSend.append('birth_date', formData.birth_date);
|
||||||
|
formDataToSend.append('position', formData.position);
|
||||||
|
formDataToSend.append('instagram', formData.instagram);
|
||||||
|
formDataToSend.append('is_former', formData.is_former);
|
||||||
|
|
||||||
|
if (imageFile) {
|
||||||
|
formDataToSend.append('image', imageFile);
|
||||||
|
}
|
||||||
|
|
||||||
|
const res = await fetch(`/api/admin/members/${encodeURIComponent(name)}`, {
|
||||||
|
method: 'PUT',
|
||||||
|
headers: { Authorization: `Bearer ${token}` },
|
||||||
|
body: formDataToSend
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!res.ok) throw new Error('수정 실패');
|
||||||
|
|
||||||
|
setToast({ message: '멤버 정보가 수정되었습니다.', type: 'success' });
|
||||||
|
setTimeout(() => navigate('/admin/members'), 1000);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('수정 오류:', error);
|
||||||
|
setToast({ message: '수정 중 오류가 발생했습니다.', type: 'error' });
|
||||||
|
} finally {
|
||||||
|
setSaving(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-50">
|
||||||
|
{/* Toast */}
|
||||||
|
<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>
|
||||||
|
|
||||||
|
{/* 메인 콘텐츠 */}
|
||||||
|
<main 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>
|
||||||
|
</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>
|
||||||
|
<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">
|
||||||
|
<Calendar size={16} className="inline mr-1" />
|
||||||
|
생년월일
|
||||||
|
</label>
|
||||||
|
<CustomDatePicker
|
||||||
|
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">
|
||||||
|
<Briefcase size={16} className="inline mr-1" />
|
||||||
|
포지션
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={formData.position}
|
||||||
|
onChange={(e) => setFormData({ ...formData, position: 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="메인보컬, 리드댄서 등"
|
||||||
|
/>
|
||||||
|
</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="@username"
|
||||||
|
/>
|
||||||
|
</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>
|
||||||
|
)}
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AdminMemberEdit;
|
||||||
|
|
@ -71,7 +71,7 @@ function AdminMembers() {
|
||||||
delay: index * 0.06
|
delay: index * 0.06
|
||||||
}}
|
}}
|
||||||
className={`relative rounded-2xl overflow-hidden shadow-sm hover:shadow-lg transition-all group cursor-pointer ${isFormer ? 'opacity-60' : ''}`}
|
className={`relative rounded-2xl overflow-hidden shadow-sm hover:shadow-lg transition-all group cursor-pointer ${isFormer ? 'opacity-60' : ''}`}
|
||||||
onClick={() => setToast({ message: '수정 기능은 준비 중입니다.', type: 'info' })}
|
onClick={() => navigate(`/admin/members/${encodeURIComponent(member.name)}/edit`)}
|
||||||
>
|
>
|
||||||
{/* 프로필 이미지 */}
|
{/* 프로필 이미지 */}
|
||||||
<div className={`aspect-[3/4] bg-gray-100 relative overflow-hidden ${isFormer ? 'grayscale' : ''}`}>
|
<div className={`aspect-[3/4] bg-gray-100 relative overflow-hidden ${isFormer ? 'grayscale' : ''}`}>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue