+
등록된 교육과정이 없습니다. 과목을 등록해주세요. diff --git a/src/app/admin/lessons/page.tsx b/src/app/admin/lessons/page.tsx index e43b52d..91d8b1e 100644 --- a/src/app/admin/lessons/page.tsx +++ b/src/app/admin/lessons/page.tsx @@ -5,11 +5,21 @@ 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"; +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() { - // TODO: 나중에 실제 데이터로 교체 - const items: any[] = []; + const [lessons, setLessons] = useState([]); const [currentPage, setCurrentPage] = useState(1); const [isRegistrationMode, setIsRegistrationMode] = useState(false); const [isDropdownOpen, setIsDropdownOpen] = useState(false); @@ -20,17 +30,27 @@ export default function AdminLessonsPage() { 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(() => items.length, [items]); + const totalCount = useMemo(() => lessons.length, [lessons]); const ITEMS_PER_PAGE = 10; - const totalPages = Math.ceil(items.length / ITEMS_PER_PAGE); - const paginatedItems = useMemo(() => { + 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 items.slice(startIndex, endIndex); - }, [items, currentPage]); + return sortedLessons.slice(startIndex, endIndex); + }, [sortedLessons, currentPage]); // 교육과정 옵션 - mockData에서 가져오기 const courseOptions = useMemo(() => @@ -67,13 +87,67 @@ export default function AdminLessonsPage() { 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 ( {/* 메인 레이아웃 */} @@ -124,7 +198,7 @@ export default function AdminLessonsPage() { setIsDropdownOpen(!isDropdownOpen)} - className="w-full h-[40px] px-[12px] py-[8px] border border-[#dee1e6] rounded-[8px] bg-white flex items-center justify-between focus:outline-none focus:ring-2 focus:ring-[#1f2b91] focus:border-transparent cursor-pointer" + className="w-full h-[40px] px-[12px] py-[8px] border border-[#dee1e6] rounded-[8px] bg-white flex items-center justify-between focus:outline-none focus:shadow-[inset_0_0_0_1px_#333c47] cursor-pointer" > 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" + 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]" /> @@ -191,7 +265,7 @@ export default function AdminLessonsPage() { } }} placeholder="내용을 입력해 주세요. (최대 1,000자)" - className="w-full h-[160px] 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 resize-none" + className="w-full h-[160px] 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] resize-none" /> @@ -220,17 +294,68 @@ export default function AdminLessonsPage() { 30MB 미만 파일 - - 첨부 - + + 첨부 + { + const files = e.target.files; + if (!files) return; + + const MAX_SIZE = 30 * 1024 * 1024; // 30MB + const mp4Files: string[] = []; + Array.from(files).forEach((file) => { + // mp4 파일이고 30MB 이하인 파일만 필터링 + if (file.name.toLowerCase().endsWith('.mp4') && file.size <= MAX_SIZE) { + mp4Files.push(file.name); + } + }); + + if (courseVideoCount + mp4Files.length <= 10) { + setCourseVideoFiles(prev => [...prev, ...mp4Files]); + setCourseVideoCount(prev => prev + mp4Files.length); + } + // input 초기화 (같은 파일 다시 선택 가능하도록) + e.target.value = ''; + }} + /> +
@@ -220,17 +294,68 @@ export default function AdminLessonsPage() { 30MB 미만 파일
- 강좌 주제별 영상 파일을 첨부해주세요. -
+ 강좌 주제별 영상 파일을 첨부해주세요. +
+ {fileName} +
- VR 학습 체험용 콘텐츠 파일을 첨부해주세요. -
+ VR 학습 체험용 콘텐츠 파일을 첨부해주세요. +
- 등록된 강좌가 없습니다. - - 강좌를 등록해주세요. + + 등록된 강좌가 없습니다. + + 강좌를 등록해주세요. +