'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 } from "@/app/admin/courses/mockData"; export default function AdminLessonsPage() { // TODO: 나중에 실제 데이터로 교체 const items: any[] = []; 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 [vrContentCount, setVrContentCount] = useState(0); const totalCount = useMemo(() => items.length, [items]); const ITEMS_PER_PAGE = 10; const totalPages = Math.ceil(items.length / ITEMS_PER_PAGE); const paginatedItems = useMemo(() => { const startIndex = (currentPage - 1) * ITEMS_PER_PAGE; const endIndex = startIndex + ITEMS_PER_PAGE; return items.slice(startIndex, endIndex); }, [items, 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); setVrContentCount(0); }; const handleRegisterClick = () => { setIsRegistrationMode(true); }; 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:ring-2 focus:ring-[#1f2b91] focus:border-transparent" />
{/* 학습 목표 */}