'use client'; import { useState, useMemo, useRef, useEffect } from "react"; import AdminSidebar from "@/app/components/AdminSidebar"; import ChevronDownSvg from "@/app/svgs/chevrondownsvg"; import DropdownIcon from "@/app/svgs/dropdownicon"; import BackArrowSvg from "@/app/svgs/backarrow"; import { MOCK_COURSES, MOCK_CURRENT_USER } from "@/app/admin/courses/mockData"; import CloseXOSvg from "@/app/svgs/closexo"; type Lesson = { id: string; courseName: string; // 교육과정명 lessonName: string; // 강좌명 attachments: string; // 첨부파일 (예: "강좌영상 3개, VR콘텐츠 2개, 평가문제 1개") questionCount: number; // 학습 평가 문제 수 createdBy: string; // 등록자 createdAt: string; // 등록일 }; export default function AdminLessonsPage() { const [lessons, setLessons] = useState([]); const [currentPage, setCurrentPage] = useState(1); const [isRegistrationMode, setIsRegistrationMode] = useState(false); const [isDropdownOpen, setIsDropdownOpen] = useState(false); const dropdownRef = useRef(null); // 등록 폼 상태 const [selectedCourse, setSelectedCourse] = useState(""); const [lessonName, setLessonName] = useState(""); const [learningGoal, setLearningGoal] = useState(""); const [courseVideoCount, setCourseVideoCount] = useState(0); const [courseVideoFiles, setCourseVideoFiles] = useState([]); const [vrContentCount, setVrContentCount] = useState(0); const [vrContentFiles, setVrContentFiles] = useState([]); const [questionFileCount, setQuestionFileCount] = useState(0); const totalCount = useMemo(() => lessons.length, [lessons]); const ITEMS_PER_PAGE = 10; const sortedLessons = useMemo(() => { return [...lessons].sort((a, b) => { // 생성일 내림차순 정렬 (최신 날짜가 먼저) return b.createdAt.localeCompare(a.createdAt); }); }, [lessons]); const totalPages = Math.ceil(sortedLessons.length / ITEMS_PER_PAGE); const paginatedLessons = useMemo(() => { const startIndex = (currentPage - 1) * ITEMS_PER_PAGE; const endIndex = startIndex + ITEMS_PER_PAGE; return sortedLessons.slice(startIndex, endIndex); }, [sortedLessons, currentPage]); // 교육과정 옵션 - mockData에서 가져오기 const courseOptions = useMemo(() => MOCK_COURSES.map(course => ({ id: course.id, name: course.courseName })) , []); // 외부 클릭 시 드롭다운 닫기 useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if ( dropdownRef.current && !dropdownRef.current.contains(event.target as Node) ) { setIsDropdownOpen(false); } }; if (isDropdownOpen) { document.addEventListener("mousedown", handleClickOutside); } return () => { document.removeEventListener("mousedown", handleClickOutside); }; }, [isDropdownOpen]); const handleBackClick = () => { setIsRegistrationMode(false); // 폼 초기화 setSelectedCourse(""); setLessonName(""); setLearningGoal(""); setCourseVideoCount(0); setCourseVideoFiles([]); setVrContentCount(0); setVrContentFiles([]); setQuestionFileCount(0); }; const handleRegisterClick = () => { setIsRegistrationMode(true); }; const handleSaveClick = () => { // 유효성 검사 if (!selectedCourse || !lessonName) { // TODO: 에러 메시지 표시 return; } // 첨부파일 정보 문자열 생성 const attachmentParts: string[] = []; if (courseVideoCount > 0) { attachmentParts.push(`강좌영상 ${courseVideoCount}개`); } if (vrContentCount > 0) { attachmentParts.push(`VR콘텐츠 ${vrContentCount}개`); } if (questionFileCount > 0) { attachmentParts.push(`평가문제 ${questionFileCount}개`); } const attachments = attachmentParts.length > 0 ? attachmentParts.join(', ') : '없음'; // 교육과정명 가져오기 const courseName = courseOptions.find(c => c.id === selectedCourse)?.name || ''; // 새 강좌 생성 const newLesson: Lesson = { id: String(Date.now()), courseName, lessonName, attachments, questionCount: questionFileCount, createdBy: MOCK_CURRENT_USER, createdAt: new Date().toISOString().split('T')[0], }; // 강좌 목록에 추가 setLessons(prev => [...prev, newLesson]); // 등록 모드 종료 및 폼 초기화 setIsRegistrationMode(false); setSelectedCourse(""); setLessonName(""); setLearningGoal(""); setCourseVideoCount(0); setCourseVideoFiles([]); setVrContentCount(0); setVrContentFiles([]); setQuestionFileCount(0); }; return (
{/* 메인 레이아웃 */}
{/* 사이드바 */}
{/* 메인 콘텐츠 */}
{isRegistrationMode ? ( /* 등록 모드 */
{/* 헤더 */}

강좌 등록

{/* 폼 콘텐츠 */}
{/* 강좌 정보 */}

강좌 정보

{/* 교육 과정 */}
{isDropdownOpen && (
{courseOptions.map((course, index) => ( ))}
)}
{/* 강좌명 */}
setLessonName(e.target.value)} placeholder="강좌명을 입력해 주세요." className="h-[40px] px-[12px] py-[8px] border border-[#dee1e6] rounded-[8px] bg-white text-[16px] font-normal leading-[1.5] text-[#1b2027] placeholder:text-[#b1b8c0] focus:outline-none focus:shadow-[inset_0_0_0_1px_#333c47]" />
{/* 학습 목표 */}