[V0_FILE]typescriptreact:file="lms-admin-layout.tsx" isFixed="true" isQuickEdit="true" "use client" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Progress } from "@/components/ui/progress" import { BookOpen, Users, GraduationCap, BarChart3, Settings, Bell, Search, Plus, TrendingUp, DollarSign, Clock, Award, MessageSquare, FileText, Video, Calendar, Download, Filter, } from "lucide-react" import { useState } from "react" export default function Component() { const sidebarItems = [ { id: "dashboard", label: "대시보드", icon: BarChart3 }, { id: "courses", label: "코스 관리", icon: BookOpen }, { id: "users", label: "사용자 관리", icon: Users }, { id: "instructors", label: "강사 관리", icon: GraduationCap }, { id: "content", label: "콘텐츠 관리", icon: FileText }, { id: "assessments", label: "평가 관리", icon: Award }, { id: "communications", label: "커뮤니케이션", icon: MessageSquare }, { id: "reports", label: "리포트", icon: TrendingUp }, { id: "payments", label: "결제 관리", icon: DollarSign }, { id: "settings", label: "시스템 설정", icon: Settings }, ] const [activeTab, setActiveTab] = useState("dashboard") const renderDashboard = () => (

{/* 통계 카드 */}

총 학생 수

2,847

+12.5% 지난 달 대비

활성 코스

156

+8 이번 주 신규

월 매출

₩45,231,000

+20.1% 지난 달 대비

완료율

78.5%

+2.3% 평균 완료율

{/* 최근 활동 및 인기 코스 */}

최근 등록 학생 지난 7일간 신규 등록한 학생들 {[ { name: "김민수", email: "minsu@example.com", date: "2시간 전", course: "React 마스터클래스" }, { name: "이지영", email: "jiyoung@example.com", date: "4시간 전", course: "Python 기초" }, { name: "박준호", email: "junho@example.com", date: "6시간 전", course: "UI/UX 디자인" }, { name: "최서연", email: "seoyeon@example.com", date: "1일 전", course: "데이터 분석" }, ].map((student, index) => (

{student.name[0]}

{student.name}

{student.course}

{student.date}

))} 인기 코스 이번 달 가장 많이 수강한 코스 {[ { title: "React 마스터클래스", students: 342, progress: 85, revenue: "₩12,500,000" }, { title: "Python 데이터 분석", students: 298, progress: 72, revenue: "₩8,900,000" }, { title: "UI/UX 디자인 기초", students: 256, progress: 68, revenue: "₩7,680,000" }, { title: "Node.js 백엔드", students: 189, progress: 45, revenue: "₩5,670,000" }, ].map((course, index) => (

{course.title}

{course.students}명

진행률 {course.progress}% {course.revenue}

))}

) const renderCourses = () => (

코스 관리

모든 강의 코스를 관리하고 모니터링하세요

{[ { title: "React 마스터클래스", instructor: "김개발", students: 342, status: "활성", progress: 85, category: "프로그래밍", duration: "12주", price: "₩150,000", }, { title: "Python 데이터 분석", instructor: "이데이터", students: 298, status: "활성", progress: 72, category: "데이터 사이언스", duration: "8주", price: "₩120,000", }, { title: "UI/UX 디자인 기초", instructor: "박디자인", students: 256, status: "활성", progress: 68, category: "디자인", duration: "6주", price: "₩90,000", }, { title: "Node.js 백엔드", instructor: "최서버", students: 189, status: "준비중", progress: 45, category: "프로그래밍", duration: "10주", price: "₩180,000", }, ].map((course, index) => (

{course.status} {course.category}

{course.title} 강사: {course.instructor}

{course.students}명 {course.duration}

진행률 {course.progress}%

{course.price}

))}

) const renderUsers = () => (

사용자 관리

학생 및 관리자 계정을 관리하세요

전체 사용자

2,847

활성 사용자 2,654명

이번 달 신규

156

+12.5% 증가

활성 세션

423

현재 온라인

최근 사용자 활동

{[ { name: "김민수", email: "minsu@example.com", role: "학생", lastActive: "2분 전", status: "온라인" }, { name: "이지영", email: "jiyoung@example.com", role: "학생", lastActive: "15분 전", status: "오프라인" }, { name: "박준호", email: "junho@example.com", role: "강사", lastActive: "1시간 전", status: "오프라인" }, { name: "최서연", email: "seoyeon@example.com", role: "학생", lastActive: "3시간 전", status: "오프라인", }, ].map((user, index) => (

{user.name[0]}

{user.name}

{user.email}

{user.role}

{user.lastActive}

{user.status}

))}

) const renderContent = () => { const activeTab = "content" return (

콘텐츠 관리

학습 자료와 미디어 파일을 관리하세요

비디오 강의

문서 자료

892

PDF, DOC 등

퀴즈/시험

156

활성 평가

과제

진행 중

최근 업로드된 콘텐츠

{[ { name: "React Hooks 심화 강의.mp4", type: "비디오", size: "245MB", course: "React 마스터클래스", date: "2시간 전", }, { name: "Python 기초 문법 정리.pdf", type: "문서", size: "2.1MB", course: "Python 기초", date: "4시간 전", }, { name: "UI 디자인 원칙 퀴즈", type: "퀴즈", size: "15문항", course: "UI/UX 디자인", date: "6시간 전" }, { name: "데이터베이스 설계 과제", type: "과제", size: "제출 기한", course: "데이터베이스", date: "1일 전", }, ].map((content, index) => (

{content.type === "비디오" &&

{content.name}

{content.course}

{content.type}

{content.size}

{content.date}

))}

) } const renderCurrentTab = () => { switch (activeTab) { case "dashboard": return renderDashboard() case "courses": return renderCourses() case "users": return renderUsers() case "content": return renderContent() default: return (

개발 중

이 섹션은 현재 개발 중입니다.

) } } return (

{/* 사이드바 */}

EduAdmin

LMS 관리 시스템

{/* 메인 콘텐츠 */}

{/* 헤더 */}

관리자

{/* 메인 콘텐츠 영역 */}

{renderCurrentTab()}

) }