'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 { getCourses, type Course } 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 [courses, setCourses] = useState([]); const [currentUser, setCurrentUser] = useState("관리자"); // 등록 폼 상태 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); // 교육과정 목록 가져오기 useEffect(() => { async function fetchCourses() { try { const data = await getCourses(); setCourses(data); } catch (error) { console.error('교육과정 목록 로드 오류:', error); setCourses([]); } } fetchCourses(); }, []); // 현재 사용자 정보 가져오기 useEffect(() => { async function fetchCurrentUser() { try { const token = typeof window !== 'undefined' ? (localStorage.getItem('token') || document.cookie .split('; ') .find(row => row.startsWith('token=')) ?.split('=')[1]) : null; if (!token) { return; } const apiUrl = process.env.NEXT_PUBLIC_API_BASE_URL ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/auth/me` : 'https://hrdi.coconutmeet.net/auth/me'; const response = await fetch(apiUrl, { method: 'GET', headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}`, }, }); if (response.ok) { const data = await response.json(); if (data.name) { setCurrentUser(data.name); } } } catch (error) { console.error('사용자 정보 조회 오류:', error); } } fetchCurrentUser(); }, []); 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]); // 교육과정 옵션 const courseOptions = useMemo(() => courses.map(course => ({ id: course.id, name: course.courseName })) , [courses]); // 외부 클릭 시 드롭다운 닫기 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: currentUser, 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]" />
{/* 학습 목표 */}