'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_NOTICES, type Notice } from "@/app/admin/notices/mockData"; export default function AdminNoticesPage() { const [notices, setNotices] = useState(MOCK_NOTICES); 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(() => notices.length, [notices]); const characterCount = useMemo(() => content.length, [content]); const handleBack = () => { setIsWritingMode(false); setTitle(''); setContent(''); setAttachedFile(null); }; const handleFileAttach = () => { fileInputRef.current?.click(); }; const handleFileChange = (e: ChangeEvent) => { const file = e.target.files?.[0]; if (file) { if (file.size > 30 * 1024 * 1024) { alert('30MB 미만의 파일만 첨부할 수 있습니다.'); return; } setAttachedFile(file); } }; const handleSave = () => { if (!title.trim()) { alert('제목을 입력해주세요.'); return; } if (!content.trim()) { alert('내용을 입력해주세요.'); return; } // 새 공지사항 추가 const newNotice: Notice = { id: notices.length > 0 ? Math.max(...notices.map(n => n.id)) + 1 : 1, title: title.trim(), date: new Date().toISOString().split('T')[0], views: 0, writer: '관리자', // TODO: 실제 작성자 정보 사용 content: content.split('\n'), hasAttachment: attachedFile !== null, }; setNotices([newNotice, ...notices]); handleBack(); }; const handleCancel = () => { if (title.trim() || content.trim() || attachedFile) { if (confirm('작성 중인 내용이 있습니다. 정말 취소하시겠습니까?')) { handleBack(); } } else { handleBack(); } }; const ITEMS_PER_PAGE = 10; const sortedNotices = useMemo(() => { return [...notices].sort((a, b) => { // 생성일 내림차순 정렬 (최신 날짜가 먼저) return b.date.localeCompare(a.date); }); }, [notices]); const totalPages = Math.ceil(sortedNotices.length / ITEMS_PER_PAGE); const paginatedNotices = useMemo(() => { const startIndex = (currentPage - 1) * ITEMS_PER_PAGE; const endIndex = startIndex + ITEMS_PER_PAGE; return sortedNotices.slice(startIndex, endIndex); }, [sortedNotices, 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" />
{/* 내용 입력 */}