'use client'; import { useState, useMemo, useRef, ChangeEvent } from "react"; import AdminSidebar from "@/app/components/AdminSidebar"; import ChevronDownSvg from "@/app/svgs/chevrondownsvg"; import BackArrowSvg from "@/app/svgs/backarrow"; import { MOCK_RESOURCES, type Resource } from "@/app/admin/resources/mockData"; import apiService from "@/app/lib/apiService"; export default function AdminResourcesPage() { const [resources, setResources] = useState(MOCK_RESOURCES); const [currentPage, setCurrentPage] = useState(1); const [isWritingMode, setIsWritingMode] = useState(false); const [title, setTitle] = useState(''); const [content, setContent] = useState(''); const [attachedFile, setAttachedFile] = useState(null); const fileInputRef = useRef(null); const totalCount = useMemo(() => resources.length, [resources]); const characterCount = useMemo(() => content.length, [content]); const handleBack = () => { setIsWritingMode(false); setTitle(''); setContent(''); setAttachedFile(null); }; const handleFileAttach = () => { fileInputRef.current?.click(); }; const handleFileChange = async (e: ChangeEvent) => { const file = e.target.files?.[0]; if (file) { if (file.size > 30 * 1024 * 1024) { alert('30MB 미만의 파일만 첨부할 수 있습니다.'); return; } try { // 단일 파일 업로드 await apiService.uploadFile(file); setAttachedFile(file); } catch (error) { console.error('파일 업로드 실패:', error); alert('파일 업로드에 실패했습니다. 다시 시도해주세요.'); } } }; const handleSave = () => { if (!title.trim()) { alert('제목을 입력해주세요.'); return; } if (!content.trim()) { alert('내용을 입력해주세요.'); return; } // 새 학습 자료 추가 const newResource: Resource = { id: resources.length > 0 ? Math.max(...resources.map(r => r.id)) + 1 : 1, title: title.trim(), date: new Date().toISOString().split('T')[0], views: 0, writer: '관리자', // TODO: 실제 작성자 정보 사용 content: content.split('\n'), hasAttachment: attachedFile !== null, }; setResources([newResource, ...resources]); handleBack(); }; const handleCancel = () => { if (title.trim() || content.trim() || attachedFile) { if (confirm('작성 중인 내용이 있습니다. 정말 취소하시겠습니까?')) { handleBack(); } } else { handleBack(); } }; const ITEMS_PER_PAGE = 10; const sortedResources = useMemo(() => { return [...resources].sort((a, b) => { // 생성일 내림차순 정렬 (최신 날짜가 먼저) return b.date.localeCompare(a.date); }); }, [resources]); const totalPages = Math.ceil(sortedResources.length / ITEMS_PER_PAGE); const paginatedResources = useMemo(() => { const startIndex = (currentPage - 1) * ITEMS_PER_PAGE; const endIndex = startIndex + ITEMS_PER_PAGE; return sortedResources.slice(startIndex, endIndex); }, [sortedResources, currentPage]); return (
{/* 메인 레이아웃 */}
{/* 사이드바 */}
{/* 메인 콘텐츠 */}
{isWritingMode ? ( <> {/* 작성 모드 헤더 */}

학습 자료 작성

{/* 작성 폼 */}
{/* 제목 입력 */}
setTitle(e.target.value)} placeholder="제목을 입력해 주세요." className="w-full h-[40px] px-3 py-2 rounded-[8px] border border-[#dee1e6] bg-white text-[16px] font-normal leading-[1.5] text-[#1b2027] placeholder:text-[#b1b8c0] focus:outline-none focus:ring-2 focus:ring-[#1f2b91] focus:border-transparent" />
{/* 내용 입력 */}