강좌 수정 삭제 작업중1
This commit is contained in:
969
src/app/admin/lessons/[id]/edit/page.tsx
Normal file
969
src/app/admin/lessons/[id]/edit/page.tsx
Normal file
@@ -0,0 +1,969 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useRef, useEffect, useMemo } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import AdminSidebar from "@/app/components/AdminSidebar";
|
||||
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";
|
||||
import apiService from "@/app/lib/apiService";
|
||||
|
||||
export default function LessonEditPage() {
|
||||
const params = useParams();
|
||||
const router = useRouter();
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
const [courses, setCourses] = useState<Course[]>([]);
|
||||
const [showToast, setShowToast] = useState(false);
|
||||
|
||||
// 폼 상태
|
||||
const [selectedCourse, setSelectedCourse] = useState<string>("");
|
||||
const [lessonName, setLessonName] = useState("");
|
||||
const [learningGoal, setLearningGoal] = useState("");
|
||||
const [courseVideoCount, setCourseVideoCount] = useState(0);
|
||||
const [courseVideoFiles, setCourseVideoFiles] = useState<string[]>([]);
|
||||
const [courseVideoFileObjects, setCourseVideoFileObjects] = useState<File[]>([]);
|
||||
const [existingVideoFiles, setExistingVideoFiles] = useState<Array<{fileName: string, fileKey?: string, url?: string}>>([]);
|
||||
const [vrContentCount, setVrContentCount] = useState(0);
|
||||
const [vrContentFiles, setVrContentFiles] = useState<string[]>([]);
|
||||
const [vrContentFileObjects, setVrContentFileObjects] = useState<File[]>([]);
|
||||
const [existingVrFiles, setExistingVrFiles] = useState<Array<{fileName: string, fileKey?: string, url?: string}>>([]);
|
||||
const [questionFileCount, setQuestionFileCount] = useState(0);
|
||||
const [questionFileObject, setQuestionFileObject] = useState<File | null>(null);
|
||||
const [existingQuestionFile, setExistingQuestionFile] = useState<{fileName: string, fileKey?: string} | null>(null);
|
||||
|
||||
// 원본 데이터 저장 (변경사항 비교용)
|
||||
const [originalData, setOriginalData] = useState<{
|
||||
title?: string;
|
||||
objective?: string;
|
||||
videoUrl?: string;
|
||||
webglUrl?: string;
|
||||
csvUrl?: string;
|
||||
} | null>(null);
|
||||
|
||||
// 에러 상태
|
||||
const [errors, setErrors] = useState<{
|
||||
selectedCourse?: string;
|
||||
lessonName?: string;
|
||||
learningGoal?: string;
|
||||
}>({});
|
||||
|
||||
// 교육과정 옵션
|
||||
const courseOptions = useMemo(() => {
|
||||
return courses.map(course => ({
|
||||
id: course.id,
|
||||
name: course.courseName,
|
||||
}));
|
||||
}, [courses]);
|
||||
|
||||
// 교육과정 목록 로드
|
||||
useEffect(() => {
|
||||
const loadCourses = async () => {
|
||||
try {
|
||||
const data = await getCourses();
|
||||
setCourses(data);
|
||||
} catch (error) {
|
||||
console.error('교육과정 목록 로드 오류:', error);
|
||||
}
|
||||
};
|
||||
loadCourses();
|
||||
}, []);
|
||||
|
||||
// 강좌 데이터 로드
|
||||
useEffect(() => {
|
||||
const loadLecture = async () => {
|
||||
if (!params?.id) return;
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
// sessionStorage에서 저장된 강좌 데이터 가져오기
|
||||
let data: any = null;
|
||||
const storedData = typeof window !== 'undefined' ? sessionStorage.getItem('selectedLecture') : null;
|
||||
|
||||
if (storedData) {
|
||||
try {
|
||||
data = JSON.parse(storedData);
|
||||
} catch (e) {
|
||||
console.error('저장된 데이터 파싱 실패:', e);
|
||||
}
|
||||
}
|
||||
|
||||
// sessionStorage에 데이터가 없으면 API에서 직접 가져오기
|
||||
if (!data) {
|
||||
try {
|
||||
const response = await apiService.getLecture(params.id as string);
|
||||
data = response.data;
|
||||
} catch (err) {
|
||||
console.error('강좌 조회 실패:', err);
|
||||
// getLecture 실패 시 getLectures로 재시도
|
||||
try {
|
||||
const listResponse = await apiService.getLectures();
|
||||
const lectures = Array.isArray(listResponse.data)
|
||||
? listResponse.data
|
||||
: listResponse.data?.items || listResponse.data?.lectures || listResponse.data?.data || [];
|
||||
|
||||
data = lectures.find((l: any) => String(l.id || l.lectureId) === params.id);
|
||||
} catch (listErr) {
|
||||
console.error('강좌 리스트 조회 실패:', listErr);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
throw new Error('강좌를 찾을 수 없습니다.');
|
||||
}
|
||||
|
||||
// 원본 데이터 저장
|
||||
const original = {
|
||||
title: data.title || data.lectureName || '',
|
||||
objective: data.objective || data.goal || '',
|
||||
videoUrl: data.videoUrl || undefined,
|
||||
webglUrl: data.webglUrl || data.vrUrl || undefined,
|
||||
csvUrl: data.csvUrl || (data.csvKey ? `csv/${data.csvKey}` : undefined),
|
||||
};
|
||||
setOriginalData(original);
|
||||
|
||||
// 폼에 데이터 채우기
|
||||
if (data.subjectId || data.subject_id) {
|
||||
setSelectedCourse(String(data.subjectId || data.subject_id));
|
||||
}
|
||||
setLessonName(original.title);
|
||||
setLearningGoal(original.objective);
|
||||
|
||||
// 기존 비디오 파일
|
||||
if (data.videoUrl || data.videoKey) {
|
||||
const videoFiles = [];
|
||||
if (data.videoUrl) {
|
||||
videoFiles.push({
|
||||
fileName: data.videoFileName || '강좌영상.mp4',
|
||||
fileKey: data.videoKey,
|
||||
url: data.videoUrl,
|
||||
});
|
||||
}
|
||||
if (data.videoFiles && Array.isArray(data.videoFiles)) {
|
||||
data.videoFiles.forEach((vf: any) => {
|
||||
videoFiles.push({
|
||||
fileName: vf.fileName || vf.name || '강좌영상.mp4',
|
||||
fileKey: vf.fileKey || vf.key,
|
||||
url: vf.url || vf.videoUrl,
|
||||
});
|
||||
});
|
||||
}
|
||||
setExistingVideoFiles(videoFiles);
|
||||
setCourseVideoCount(videoFiles.length);
|
||||
}
|
||||
|
||||
// 기존 VR 파일
|
||||
if (data.webglUrl || data.vrUrl || data.webglKey || data.vrKey) {
|
||||
const vrFiles = [];
|
||||
if (data.webglUrl || data.vrUrl) {
|
||||
vrFiles.push({
|
||||
fileName: data.vrFileName || data.webglFileName || 'VR_콘텐츠.zip',
|
||||
fileKey: data.webglKey || data.vrKey,
|
||||
url: data.webglUrl || data.vrUrl,
|
||||
});
|
||||
}
|
||||
setExistingVrFiles(vrFiles);
|
||||
setVrContentCount(vrFiles.length);
|
||||
}
|
||||
|
||||
// 기존 평가 문제 파일
|
||||
if (data.csvKey || data.csvUrl) {
|
||||
setExistingQuestionFile({
|
||||
fileName: '평가문제.csv',
|
||||
fileKey: data.csvKey,
|
||||
});
|
||||
setQuestionFileCount(1);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('강좌 로드 실패:', err);
|
||||
|
||||
// 기본값 설정 (에러 발생 시에도 폼이 작동하도록)
|
||||
const defaultOriginal = {
|
||||
title: '',
|
||||
objective: '',
|
||||
videoUrl: undefined,
|
||||
webglUrl: undefined,
|
||||
csvUrl: undefined,
|
||||
};
|
||||
setOriginalData(defaultOriginal);
|
||||
|
||||
alert('강좌를 불러오는데 실패했습니다. 페이지를 새로고침하거나 다시 시도해주세요.');
|
||||
// 에러 발생 시에도 페이지는 유지 (사용자가 수동으로 데이터 입력 가능)
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadLecture();
|
||||
}, [params?.id, router]);
|
||||
|
||||
// 외부 클릭 시 드롭다운 닫기
|
||||
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]);
|
||||
|
||||
// 토스트 자동 닫기
|
||||
useEffect(() => {
|
||||
if (showToast) {
|
||||
const timer = setTimeout(() => {
|
||||
setShowToast(false);
|
||||
}, 3000); // 3초 후 자동 닫기
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
}, [showToast]);
|
||||
|
||||
const handleBackClick = () => {
|
||||
router.push(`/admin/lessons/${params.id}`);
|
||||
};
|
||||
|
||||
const handleSaveClick = async () => {
|
||||
// 유효성 검사
|
||||
const newErrors: {
|
||||
selectedCourse?: string;
|
||||
lessonName?: string;
|
||||
learningGoal?: string;
|
||||
} = {};
|
||||
|
||||
if (!selectedCourse) {
|
||||
newErrors.selectedCourse = "교육과정을 선택해 주세요.";
|
||||
}
|
||||
if (!lessonName.trim()) {
|
||||
newErrors.lessonName = "강좌명을 입력해 주세요.";
|
||||
}
|
||||
if (!learningGoal.trim()) {
|
||||
newErrors.learningGoal = "학습 목표를 입력해 주세요.";
|
||||
}
|
||||
|
||||
setErrors(newErrors);
|
||||
|
||||
if (Object.keys(newErrors).length > 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (isSaving) return;
|
||||
|
||||
setIsSaving(true);
|
||||
|
||||
try {
|
||||
if (!originalData) {
|
||||
alert('데이터를 불러오는 중입니다. 잠시 후 다시 시도해주세요.');
|
||||
return;
|
||||
}
|
||||
|
||||
// 새로 업로드된 파일들 처리
|
||||
let videoUrl: string | undefined;
|
||||
let webglUrl: string | undefined;
|
||||
let csvUrl: string | undefined;
|
||||
|
||||
// 강좌 영상 업로드 (새 파일이 있는 경우)
|
||||
if (courseVideoFileObjects.length > 0) {
|
||||
try {
|
||||
const uploadResponse = await apiService.uploadFiles(courseVideoFileObjects);
|
||||
// 다중 파일 업로드 응답 처리 (실제 API 응답 구조에 맞게 조정 필요)
|
||||
if (uploadResponse.data && uploadResponse.data.length > 0) {
|
||||
videoUrl = uploadResponse.data[0].url || uploadResponse.data[0].fileKey;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('강좌 영상 업로드 실패:', error);
|
||||
throw new Error('강좌 영상 업로드에 실패했습니다.');
|
||||
}
|
||||
} else if (existingVideoFiles.length > 0 && existingVideoFiles[0].url) {
|
||||
// 기존 파일 URL 유지
|
||||
videoUrl = existingVideoFiles[0].url;
|
||||
}
|
||||
|
||||
// VR 콘텐츠 업로드 (새 파일이 있는 경우)
|
||||
if (vrContentFileObjects.length > 0) {
|
||||
try {
|
||||
const uploadResponse = await apiService.uploadFiles(vrContentFileObjects);
|
||||
if (uploadResponse.data && uploadResponse.data.length > 0) {
|
||||
webglUrl = uploadResponse.data[0].url || uploadResponse.data[0].fileKey;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('VR 콘텐츠 업로드 실패:', error);
|
||||
throw new Error('VR 콘텐츠 업로드에 실패했습니다.');
|
||||
}
|
||||
} else if (existingVrFiles.length > 0 && existingVrFiles[0].url) {
|
||||
// 기존 파일 URL 유지
|
||||
webglUrl = existingVrFiles[0].url;
|
||||
}
|
||||
|
||||
// 학습 평가 문제 업로드 (새 파일이 있는 경우)
|
||||
if (questionFileObject) {
|
||||
try {
|
||||
const uploadResponse = await apiService.uploadFile(questionFileObject);
|
||||
const fileKey = uploadResponse.data?.key || uploadResponse.data?.fileKey || uploadResponse.data?.csvKey;
|
||||
if (fileKey) {
|
||||
csvUrl = `csv/${fileKey}`;
|
||||
} else if (uploadResponse.data?.url) {
|
||||
csvUrl = uploadResponse.data.url;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('학습 평가 문제 업로드 실패:', error);
|
||||
throw new Error('학습 평가 문제 업로드에 실패했습니다.');
|
||||
}
|
||||
} else if (existingQuestionFile?.fileKey) {
|
||||
// 기존 파일 URL 유지
|
||||
csvUrl = `csv/${existingQuestionFile.fileKey}`;
|
||||
} else if (originalData.csvUrl) {
|
||||
// 원본 데이터의 csvUrl 유지
|
||||
csvUrl = originalData.csvUrl;
|
||||
}
|
||||
|
||||
// 현재 값들
|
||||
const currentTitle = lessonName.trim();
|
||||
const currentObjective = learningGoal.trim();
|
||||
|
||||
// 변경된 항목만 포함하는 request body 생성
|
||||
const requestBody: {
|
||||
title?: string;
|
||||
objective?: string;
|
||||
videoUrl?: string;
|
||||
webglUrl?: string;
|
||||
csvUrl?: string;
|
||||
} = {};
|
||||
|
||||
// 변경된 항목만 추가
|
||||
if (currentTitle !== originalData.title) {
|
||||
requestBody.title = currentTitle;
|
||||
}
|
||||
if (currentObjective !== originalData.objective) {
|
||||
requestBody.objective = currentObjective;
|
||||
}
|
||||
|
||||
// videoUrl 변경사항 체크 (원본에 있었는데 삭제된 경우도 포함)
|
||||
const originalVideoUrl = originalData.videoUrl;
|
||||
if (videoUrl !== originalVideoUrl) {
|
||||
// 원본에 있었는데 현재 없는 경우 (삭제된 경우) 빈 문자열로 처리
|
||||
if (originalVideoUrl && !videoUrl) {
|
||||
requestBody.videoUrl = '';
|
||||
} else if (videoUrl) {
|
||||
requestBody.videoUrl = videoUrl;
|
||||
}
|
||||
}
|
||||
|
||||
// webglUrl 변경사항 체크
|
||||
const originalWebglUrl = originalData.webglUrl;
|
||||
if (webglUrl !== originalWebglUrl) {
|
||||
// 원본에 있었는데 현재 없는 경우 (삭제된 경우) 빈 문자열로 처리
|
||||
if (originalWebglUrl && !webglUrl) {
|
||||
requestBody.webglUrl = '';
|
||||
} else if (webglUrl) {
|
||||
requestBody.webglUrl = webglUrl;
|
||||
}
|
||||
}
|
||||
|
||||
// csvUrl 변경사항 체크
|
||||
const originalCsvUrl = originalData.csvUrl;
|
||||
if (csvUrl !== originalCsvUrl) {
|
||||
// 원본에 있었는데 현재 없는 경우 (삭제된 경우) 빈 문자열로 처리
|
||||
if (originalCsvUrl && !csvUrl) {
|
||||
requestBody.csvUrl = '';
|
||||
} else if (csvUrl) {
|
||||
requestBody.csvUrl = csvUrl;
|
||||
}
|
||||
}
|
||||
|
||||
// 변경사항이 없으면 알림
|
||||
if (Object.keys(requestBody).length === 0) {
|
||||
alert('변경된 내용이 없습니다.');
|
||||
setIsSaving(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// 강좌 수정 API 호출 (PATCH /lectures/{id})
|
||||
await apiService.updateLecture(params.id as string, requestBody);
|
||||
|
||||
// 성공 시 토스트 표시
|
||||
setShowToast(true);
|
||||
|
||||
// 토스트 표시 후 상세 페이지로 이동
|
||||
setTimeout(() => {
|
||||
router.push(`/admin/lessons/${params.id}`);
|
||||
}, 1500);
|
||||
} catch (error) {
|
||||
console.error('강좌 수정 실패:', error);
|
||||
const errorMessage = error instanceof Error ? error.message : '강좌 수정 중 오류가 발생했습니다.';
|
||||
alert(errorMessage);
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col bg-white">
|
||||
<div className="flex flex-1 min-h-0 justify-center">
|
||||
<div className="w-[1440px] flex min-h-0">
|
||||
<div className="flex">
|
||||
<AdminSidebar />
|
||||
</div>
|
||||
<main className="w-[1120px] bg-white">
|
||||
<div className="h-full flex flex-col px-8">
|
||||
<div className="h-[100px] flex items-center">
|
||||
<div className="flex items-center gap-[12px]">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleBackClick}
|
||||
className="flex items-center justify-center size-[32px] cursor-pointer hover:opacity-80"
|
||||
aria-label="뒤로가기"
|
||||
>
|
||||
<BackArrowSvg width={32} height={32} />
|
||||
</button>
|
||||
<h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">
|
||||
강좌 수정
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
<section className="px-8 pb-20">
|
||||
<div className="flex items-center justify-center py-20">
|
||||
<p className="text-[16px] text-[#8c95a1]">로딩 중...</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col bg-white">
|
||||
<div className="flex flex-1 min-h-0 justify-center">
|
||||
<div className="w-[1440px] flex min-h-0">
|
||||
<div className="flex">
|
||||
<AdminSidebar />
|
||||
</div>
|
||||
<main className="w-[1120px] bg-white">
|
||||
<div className="h-full flex flex-col px-8">
|
||||
<div className="flex flex-col h-full">
|
||||
{/* 헤더 */}
|
||||
<div className="h-[100px] flex items-center">
|
||||
<div className="flex items-center gap-[12px]">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleBackClick}
|
||||
className="flex items-center justify-center size-[32px] cursor-pointer hover:opacity-80"
|
||||
aria-label="뒤로가기"
|
||||
>
|
||||
<BackArrowSvg width={32} height={32} />
|
||||
</button>
|
||||
<h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">
|
||||
강좌 수정
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 폼 콘텐츠 */}
|
||||
<div className="flex-1 overflow-y-auto pb-[80px] pt-[32px]">
|
||||
<div className="flex flex-col gap-[40px]">
|
||||
{/* 강좌 정보 */}
|
||||
<div className="flex flex-col gap-[8px]">
|
||||
<h2 className="text-[18px] font-bold leading-[1.5] text-[#1b2027]">
|
||||
강좌 정보
|
||||
</h2>
|
||||
<div className="flex flex-col gap-[24px]">
|
||||
{/* 교육 과정 */}
|
||||
<div className="flex flex-col gap-[8px] max-w-[480px]">
|
||||
<label className="text-[15px] font-semibold leading-[1.5] text-[#6c7682]">
|
||||
교육 과정
|
||||
</label>
|
||||
<div className="relative" ref={dropdownRef}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsDropdownOpen(!isDropdownOpen)}
|
||||
className={`w-full h-[40px] px-[12px] py-[8px] border rounded-[8px] bg-white flex items-center justify-between focus:outline-none focus:shadow-[inset_0_0_0_1px_#333c47] cursor-pointer ${
|
||||
errors.selectedCourse ? 'border-[#e63946]' : 'border-[#dee1e6]'
|
||||
}`}
|
||||
>
|
||||
<span className={`text-[16px] font-normal leading-[1.5] flex-1 text-left ${
|
||||
selectedCourse ? 'text-[#1b2027]' : 'text-[#6c7682]'
|
||||
}`}>
|
||||
{selectedCourse
|
||||
? courseOptions.find(c => c.id === selectedCourse)?.name
|
||||
: '교육과정을 선택해 주세요.'}
|
||||
</span>
|
||||
<DropdownIcon stroke="#8C95A1" className="shrink-0" />
|
||||
</button>
|
||||
{isDropdownOpen && (
|
||||
<div className="absolute top-full left-0 right-0 mt-1 bg-white border border-[#dee1e6] rounded-[8px] shadow-lg z-20 max-h-[200px] overflow-y-auto dropdown-scroll">
|
||||
{courseOptions.map((course, index) => (
|
||||
<button
|
||||
key={course.id}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setSelectedCourse(course.id);
|
||||
setIsDropdownOpen(false);
|
||||
if (errors.selectedCourse) {
|
||||
setErrors(prev => ({ ...prev, selectedCourse: undefined }));
|
||||
}
|
||||
}}
|
||||
className={`w-full px-3 py-2 text-left text-[16px] font-normal leading-[1.5] hover:bg-[#f1f3f5] transition-colors cursor-pointer ${
|
||||
selectedCourse === course.id
|
||||
? "bg-[#ecf0ff] text-[#1f2b91] font-semibold"
|
||||
: "text-[#1b2027]"
|
||||
} ${
|
||||
index === 0 ? "rounded-t-[8px]" : ""
|
||||
} ${
|
||||
index === courseOptions.length - 1 ? "rounded-b-[8px]" : ""
|
||||
}`}
|
||||
>
|
||||
{course.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{errors.selectedCourse && (
|
||||
<p className="text-[14px] font-normal leading-[1.5] text-[#e63946]">
|
||||
{errors.selectedCourse}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 강좌명 */}
|
||||
<div className="flex flex-col gap-[8px]">
|
||||
<label className="text-[15px] font-semibold leading-[1.5] text-[#6c7682]">
|
||||
강좌명
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={lessonName}
|
||||
onChange={(e) => {
|
||||
setLessonName(e.target.value);
|
||||
if (errors.lessonName) {
|
||||
setErrors(prev => ({ ...prev, lessonName: undefined }));
|
||||
}
|
||||
}}
|
||||
placeholder="강좌명을 입력해 주세요."
|
||||
className={`h-[40px] px-[12px] py-[8px] border 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] ${
|
||||
errors.lessonName ? 'border-[#e63946]' : 'border-[#dee1e6]'
|
||||
}`}
|
||||
/>
|
||||
{errors.lessonName && (
|
||||
<p className="text-[14px] font-normal leading-[1.5] text-[#e63946]">
|
||||
{errors.lessonName}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 학습 목표 */}
|
||||
<div className="flex flex-col gap-[8px]">
|
||||
<label className="text-[15px] font-semibold leading-[1.5] text-[#6c7682]">
|
||||
학습 목표
|
||||
</label>
|
||||
<div className="relative">
|
||||
<textarea
|
||||
value={learningGoal}
|
||||
onChange={(e) => {
|
||||
if (e.target.value.length <= 1000) {
|
||||
setLearningGoal(e.target.value);
|
||||
if (errors.learningGoal) {
|
||||
setErrors(prev => ({ ...prev, learningGoal: undefined }));
|
||||
}
|
||||
}
|
||||
}}
|
||||
placeholder="내용을 입력해 주세요. (최대 1,000자)"
|
||||
className={`w-full h-[160px] px-[12px] py-[8px] border 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 ${
|
||||
errors.learningGoal ? 'border-[#e63946]' : 'border-[#dee1e6]'
|
||||
}`}
|
||||
/>
|
||||
<div className="absolute bottom-[8px] right-[12px]">
|
||||
<p className="text-[13px] font-normal leading-[1.4] text-[#6c7682] text-right">
|
||||
{learningGoal.length}/1000
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{errors.learningGoal && (
|
||||
<p className="text-[14px] font-normal leading-[1.5] text-[#e63946]">
|
||||
{errors.learningGoal}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 파일 첨부 */}
|
||||
<div className="flex flex-col gap-[8px]">
|
||||
<h2 className="text-[18px] font-bold leading-[1.5] text-[#1b2027]">
|
||||
파일 첨부
|
||||
</h2>
|
||||
<div className="flex flex-col gap-[24px]">
|
||||
{/* 강좌 영상 */}
|
||||
<div className="flex flex-col gap-[8px]">
|
||||
<div className="flex items-center justify-between h-[32px]">
|
||||
<div className="flex items-center gap-[8px]">
|
||||
<label className="text-[15px] font-semibold leading-[1.5] text-[#6c7682]">
|
||||
강좌 영상 ({existingVideoFiles.length + courseVideoFiles.length}/10)
|
||||
</label>
|
||||
<span className="text-[13px] font-normal leading-[1.4] text-[#8c95a1]">
|
||||
30MB 미만 파일
|
||||
</span>
|
||||
</div>
|
||||
<label className="h-[32px] w-[62px] px-[4px] py-[3px] border border-[#8c95a1] rounded-[6px] bg-white text-[13px] font-medium leading-[1.4] text-[#4c5561] whitespace-nowrap hover:bg-gray-50 transition-colors cursor-pointer flex items-center justify-center">
|
||||
<span>첨부</span>
|
||||
<input
|
||||
type="file"
|
||||
multiple
|
||||
accept=".mp4,video/mp4"
|
||||
className="hidden"
|
||||
onChange={async (e) => {
|
||||
const files = e.target.files;
|
||||
if (!files) return;
|
||||
|
||||
const MAX_SIZE = 30 * 1024 * 1024; // 30MB
|
||||
const validFiles: File[] = [];
|
||||
const oversizedFiles: string[] = [];
|
||||
|
||||
Array.from(files).forEach((file) => {
|
||||
if (!file.name.toLowerCase().endsWith('.mp4')) {
|
||||
return;
|
||||
}
|
||||
if (file.size < MAX_SIZE) {
|
||||
validFiles.push(file);
|
||||
} else {
|
||||
oversizedFiles.push(file.name);
|
||||
}
|
||||
});
|
||||
|
||||
if (oversizedFiles.length > 0) {
|
||||
alert(`다음 파일은 30MB 미만이어야 합니다:\n${oversizedFiles.join('\n')}`);
|
||||
}
|
||||
|
||||
if (existingVideoFiles.length + courseVideoFiles.length + validFiles.length > 10) {
|
||||
alert('강좌 영상은 최대 10개까지 첨부할 수 있습니다.');
|
||||
e.target.value = '';
|
||||
return;
|
||||
}
|
||||
|
||||
if (validFiles.length > 0) {
|
||||
try {
|
||||
await apiService.uploadFiles(validFiles);
|
||||
setCourseVideoFiles(prev => [...prev, ...validFiles.map(f => f.name)]);
|
||||
setCourseVideoFileObjects(prev => [...prev, ...validFiles]);
|
||||
setCourseVideoCount(prev => prev + validFiles.length);
|
||||
} catch (error) {
|
||||
console.error('강좌 영상 업로드 실패:', error);
|
||||
alert('파일 업로드에 실패했습니다. 다시 시도해주세요.');
|
||||
}
|
||||
}
|
||||
e.target.value = '';
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div className="border border-[#dee1e6] rounded-[8px] bg-gray-50">
|
||||
{existingVideoFiles.length === 0 && courseVideoFiles.length === 0 ? (
|
||||
<div className="h-[64px] flex items-center justify-center">
|
||||
<p className="text-[14px] font-normal leading-[1.5] text-[#8c95a1] text-center">
|
||||
강좌 주제별 영상 파일을 첨부해주세요.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col py-[12px]">
|
||||
{existingVideoFiles.map((file, index) => (
|
||||
<div
|
||||
key={`existing-${index}`}
|
||||
className="h-[40px] px-[20px] py-[12px] flex items-center gap-[12px]"
|
||||
>
|
||||
<p className="flex-1 text-[15px] font-normal leading-[1.5] text-[#333c47]">
|
||||
{file.fileName} (기존)
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setExistingVideoFiles(prev => prev.filter((_, i) => i !== index));
|
||||
setCourseVideoCount(prev => prev - 1);
|
||||
}}
|
||||
className="size-[16px] flex items-center justify-center cursor-pointer hover:opacity-70 transition-opacity shrink-0"
|
||||
aria-label="파일 삭제"
|
||||
>
|
||||
<CloseXOSvg />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
{courseVideoFiles.map((fileName, index) => (
|
||||
<div
|
||||
key={`new-${index}`}
|
||||
className="h-[40px] px-[20px] py-[12px] flex items-center gap-[12px]"
|
||||
>
|
||||
<p className="flex-1 text-[15px] font-normal leading-[1.5] text-[#333c47]">
|
||||
{fileName}
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setCourseVideoFiles(prev => prev.filter((_, i) => i !== index));
|
||||
setCourseVideoFileObjects(prev => prev.filter((_, i) => i !== index));
|
||||
setCourseVideoCount(prev => prev - 1);
|
||||
}}
|
||||
className="size-[16px] flex items-center justify-center cursor-pointer hover:opacity-70 transition-opacity shrink-0"
|
||||
aria-label="파일 삭제"
|
||||
>
|
||||
<CloseXOSvg />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* VR 콘텐츠 */}
|
||||
<div className="flex flex-col gap-[8px]">
|
||||
<div className="flex items-center justify-between h-[32px]">
|
||||
<div className="flex items-center gap-[8px]">
|
||||
<label className="text-[15px] font-semibold leading-[1.5] text-[#6c7682]">
|
||||
VR 콘텐츠 ({existingVrFiles.length + vrContentFiles.length}/10)
|
||||
</label>
|
||||
<span className="text-[13px] font-normal leading-[1.4] text-[#8c95a1]">
|
||||
30MB 미만 파일
|
||||
</span>
|
||||
</div>
|
||||
<label className="h-[32px] w-[62px] px-[4px] py-[3px] border border-[#8c95a1] rounded-[6px] bg-white text-[13px] font-medium leading-[1.4] text-[#4c5561] whitespace-nowrap hover:bg-gray-50 transition-colors cursor-pointer flex items-center justify-center">
|
||||
<span>첨부</span>
|
||||
<input
|
||||
type="file"
|
||||
multiple
|
||||
accept=".zip,application/zip"
|
||||
className="hidden"
|
||||
onChange={async (e) => {
|
||||
const files = e.target.files;
|
||||
if (!files) return;
|
||||
|
||||
const MAX_SIZE = 30 * 1024 * 1024; // 30MB
|
||||
const validFiles: File[] = [];
|
||||
const oversizedFiles: string[] = [];
|
||||
|
||||
Array.from(files).forEach((file) => {
|
||||
if (!file.name.toLowerCase().endsWith('.zip')) {
|
||||
return;
|
||||
}
|
||||
if (file.size < MAX_SIZE) {
|
||||
validFiles.push(file);
|
||||
} else {
|
||||
oversizedFiles.push(file.name);
|
||||
}
|
||||
});
|
||||
|
||||
if (oversizedFiles.length > 0) {
|
||||
alert(`다음 파일은 30MB 미만이어야 합니다:\n${oversizedFiles.join('\n')}`);
|
||||
}
|
||||
|
||||
if (existingVrFiles.length + vrContentFiles.length + validFiles.length > 10) {
|
||||
alert('VR 콘텐츠는 최대 10개까지 첨부할 수 있습니다.');
|
||||
e.target.value = '';
|
||||
return;
|
||||
}
|
||||
|
||||
if (validFiles.length > 0) {
|
||||
try {
|
||||
await apiService.uploadFiles(validFiles);
|
||||
setVrContentFiles(prev => [...prev, ...validFiles.map(f => f.name)]);
|
||||
setVrContentFileObjects(prev => [...prev, ...validFiles]);
|
||||
setVrContentCount(prev => prev + validFiles.length);
|
||||
} catch (error) {
|
||||
console.error('VR 콘텐츠 업로드 실패:', error);
|
||||
alert('파일 업로드에 실패했습니다. 다시 시도해주세요.');
|
||||
}
|
||||
}
|
||||
e.target.value = '';
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div className="border border-[#dee1e6] rounded-[8px] bg-gray-50">
|
||||
{existingVrFiles.length === 0 && vrContentFiles.length === 0 ? (
|
||||
<div className="h-[64px] flex items-center justify-center">
|
||||
<p className="text-[14px] font-normal leading-[1.5] text-[#8c95a1] text-center">
|
||||
VR 학습 체험용 콘텐츠 파일을 첨부해주세요.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col py-[12px]">
|
||||
{existingVrFiles.map((file, index) => (
|
||||
<div
|
||||
key={`existing-vr-${index}`}
|
||||
className="h-[40px] px-[20px] py-[12px] flex items-center gap-[12px]"
|
||||
>
|
||||
<p className="flex-1 text-[15px] font-normal leading-[1.5] text-[#333c47]">
|
||||
{file.fileName} (기존)
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setExistingVrFiles(prev => prev.filter((_, i) => i !== index));
|
||||
setVrContentCount(prev => prev - 1);
|
||||
}}
|
||||
className="size-[16px] flex items-center justify-center cursor-pointer hover:opacity-70 transition-opacity shrink-0"
|
||||
aria-label="파일 삭제"
|
||||
>
|
||||
<CloseXOSvg />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
{vrContentFiles.map((fileName, index) => (
|
||||
<div
|
||||
key={`new-vr-${index}`}
|
||||
className="h-[40px] px-[20px] py-[12px] flex items-center gap-[12px]"
|
||||
>
|
||||
<p className="flex-1 text-[15px] font-normal leading-[1.5] text-[#333c47]">
|
||||
{fileName}
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setVrContentFiles(prev => prev.filter((_, i) => i !== index));
|
||||
setVrContentFileObjects(prev => prev.filter((_, i) => i !== index));
|
||||
setVrContentCount(prev => prev - 1);
|
||||
}}
|
||||
className="size-[16px] flex items-center justify-center cursor-pointer hover:opacity-70 transition-opacity shrink-0"
|
||||
aria-label="파일 삭제"
|
||||
>
|
||||
<CloseXOSvg />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 학습 평가 문제 */}
|
||||
<div className="flex flex-col gap-[8px]">
|
||||
<div className="flex items-center justify-between h-[32px]">
|
||||
<div className="flex items-center gap-[8px]">
|
||||
<label className="text-[15px] font-semibold leading-[1.5] text-[#6c7682]">
|
||||
학습 평가 문제
|
||||
</label>
|
||||
<span className="text-[13px] font-normal leading-[1.4] text-[#8c95a1]">
|
||||
CSV 파일 형식만 첨부 가능
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-[8px]">
|
||||
<label className="h-[32px] w-[62px] px-[4px] py-[3px] border border-[#8c95a1] rounded-[6px] bg-white text-[13px] font-medium leading-[1.4] text-[#4c5561] whitespace-nowrap hover:bg-gray-50 transition-colors cursor-pointer flex items-center justify-center">
|
||||
<span>첨부</span>
|
||||
<input
|
||||
type="file"
|
||||
accept=".csv"
|
||||
className="hidden"
|
||||
onChange={async (e) => {
|
||||
const files = e.target.files;
|
||||
if (!files || files.length === 0) return;
|
||||
|
||||
const file = files[0];
|
||||
if (file.name.toLowerCase().endsWith('.csv')) {
|
||||
try {
|
||||
await apiService.uploadFile(file);
|
||||
setQuestionFileObject(file);
|
||||
setQuestionFileCount(1);
|
||||
setExistingQuestionFile(null);
|
||||
} catch (error) {
|
||||
console.error('학습 평가 문제 업로드 실패:', error);
|
||||
alert('파일 업로드에 실패했습니다. 다시 시도해주세요.');
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border border-[#dee1e6] rounded-[8px] bg-gray-50">
|
||||
{existingQuestionFile || questionFileObject ? (
|
||||
<div className="h-[64px] px-[20px] flex items-center gap-[12px]">
|
||||
<p className="flex-1 text-[15px] font-normal leading-[1.5] text-[#333c47]">
|
||||
{existingQuestionFile ? `${existingQuestionFile.fileName} (기존)` : questionFileObject?.name}
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setQuestionFileObject(null);
|
||||
setExistingQuestionFile(null);
|
||||
setQuestionFileCount(0);
|
||||
}}
|
||||
className="size-[16px] flex items-center justify-center cursor-pointer hover:opacity-70 transition-opacity shrink-0"
|
||||
aria-label="파일 삭제"
|
||||
>
|
||||
<CloseXOSvg />
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-[64px] flex items-center justify-center">
|
||||
<p className="text-[14px] font-normal leading-[1.5] text-[#8c95a1] text-center">
|
||||
학습 평가용 문항 파일을 첨부해주세요.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 액션 버튼 */}
|
||||
<div className="flex items-center justify-end gap-[12px]">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleBackClick}
|
||||
className="h-[48px] px-[8px] rounded-[10px] bg-[#f1f3f5] text-[16px] font-semibold leading-[1.5] text-[#4c5561] min-w-[80px] hover:bg-[#e5e7eb] transition-colors cursor-pointer"
|
||||
>
|
||||
취소
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSaveClick}
|
||||
disabled={isSaving || !originalData || loading}
|
||||
className="h-[48px] px-[16px] rounded-[10px] bg-[#1f2b91] text-[16px] font-semibold leading-[1.5] text-white hover:bg-[#1a2478] transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{isSaving ? '저장 중...' : '저장하기'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 강좌 수정 완료 토스트 */}
|
||||
{showToast && (
|
||||
<div className="fixed right-[60px] bottom-[60px] z-50">
|
||||
<div className="bg-white border border-[#dee1e6] rounded-[8px] p-4 min-w-[360px] flex gap-[10px] items-center">
|
||||
<div className="relative shrink-0 w-[16.667px] h-[16.667px]">
|
||||
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="8.5" cy="8.5" r="8.5" fill="#384FBF"/>
|
||||
<path d="M5.5 8.5L7.5 10.5L11.5 6.5" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<p className="text-[15px] font-medium leading-[1.5] text-[#1b2027] text-nowrap">
|
||||
강좌가 수정되었습니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,29 +2,45 @@
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import Image from 'next/image';
|
||||
import AdminSidebar from '@/app/components/AdminSidebar';
|
||||
import BackArrowSvg from '@/app/svgs/backarrow';
|
||||
import DownloadIcon from '@/app/svgs/downloadicon';
|
||||
import apiService from '@/app/lib/apiService';
|
||||
|
||||
type Lesson = {
|
||||
type VideoFile = {
|
||||
id: string;
|
||||
title: string;
|
||||
duration: string; // "12:46" 형식
|
||||
state: "제출완료" | "제출대기";
|
||||
action: "복습하기" | "이어서 수강하기" | "수강하기";
|
||||
fileName: string;
|
||||
fileSize: string;
|
||||
fileKey?: string;
|
||||
url?: string;
|
||||
};
|
||||
|
||||
type VrFile = {
|
||||
id: string;
|
||||
fileName: string;
|
||||
fileSize: string;
|
||||
fileKey?: string;
|
||||
url?: string;
|
||||
};
|
||||
|
||||
type QuizQuestion = {
|
||||
id: string;
|
||||
number: number;
|
||||
question: string;
|
||||
correctAnswer: string;
|
||||
wrongAnswer1: string;
|
||||
wrongAnswer2: string;
|
||||
wrongAnswer3: string;
|
||||
};
|
||||
|
||||
type CourseDetail = {
|
||||
id: string;
|
||||
status: "수강 중" | "수강 예정" | "수강 완료";
|
||||
title: string;
|
||||
goal: string;
|
||||
method: string;
|
||||
summary: string; // VOD · 총 n강 · n시간 n분
|
||||
submitSummary: string; // 학습 제출 n/n
|
||||
thumbnail: string;
|
||||
lessons: Lesson[];
|
||||
courseName: string; // 교육 과정명
|
||||
title: string; // 강좌명
|
||||
goal: string; // 학습 목표 (여러 줄)
|
||||
videoFiles: VideoFile[];
|
||||
vrFiles: VrFile[];
|
||||
quizData: QuizQuestion[];
|
||||
};
|
||||
|
||||
export default function AdminCourseDetailPage() {
|
||||
@@ -102,25 +118,91 @@ export default function AdminCourseDetailPage() {
|
||||
}
|
||||
}
|
||||
|
||||
// 교육 과정명 가져오기
|
||||
let courseName = '';
|
||||
if (data.subjectId || data.subject_id) {
|
||||
try {
|
||||
const subjectsResponse = await apiService.getSubjects();
|
||||
const subjects = Array.isArray(subjectsResponse.data)
|
||||
? subjectsResponse.data
|
||||
: subjectsResponse.data?.items || subjectsResponse.data?.subjects || [];
|
||||
const subject = subjects.find((s: any) =>
|
||||
String(s.id || s.subjectId) === String(data.subjectId || data.subject_id)
|
||||
);
|
||||
courseName = subject?.courseName || subject?.name || subject?.subjectName || '';
|
||||
} catch (err) {
|
||||
console.error('교육 과정명 조회 실패:', err);
|
||||
}
|
||||
}
|
||||
|
||||
// 학습 목표를 여러 줄로 분리
|
||||
const goalLines = (data.objective || data.goal || '').split('\n').filter((line: string) => line.trim());
|
||||
|
||||
// 비디오 파일 목록 구성
|
||||
const videoFiles: VideoFile[] = [];
|
||||
if (data.videoUrl) {
|
||||
videoFiles.push({
|
||||
id: '1',
|
||||
fileName: data.videoFileName || '강좌영상.mp4',
|
||||
fileSize: '796.35 KB',
|
||||
fileKey: data.videoKey,
|
||||
url: data.videoUrl,
|
||||
});
|
||||
}
|
||||
// 여러 비디오 파일이 있는 경우 처리
|
||||
if (data.videoFiles && Array.isArray(data.videoFiles)) {
|
||||
data.videoFiles.forEach((vf: any, index: number) => {
|
||||
videoFiles.push({
|
||||
id: String(index + 1),
|
||||
fileName: vf.fileName || vf.name || `강좌영상_${index + 1}.mp4`,
|
||||
fileSize: vf.fileSize || '796.35 KB',
|
||||
fileKey: vf.fileKey || vf.key,
|
||||
url: vf.url || vf.videoUrl,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// VR 파일 목록 구성
|
||||
const vrFiles: VrFile[] = [];
|
||||
if (data.webglUrl || data.vrUrl) {
|
||||
vrFiles.push({
|
||||
id: '1',
|
||||
fileName: data.vrFileName || data.webglFileName || 'VR_콘텐츠.zip',
|
||||
fileSize: '796.35 KB',
|
||||
fileKey: data.webglKey || data.vrKey,
|
||||
url: data.webglUrl || data.vrUrl,
|
||||
});
|
||||
}
|
||||
|
||||
// 퀴즈 데이터 구성 (CSV 파일이 있으면 파싱, 없으면 빈 배열)
|
||||
const quizData: QuizQuestion[] = [];
|
||||
if (data.csvKey || data.quizData) {
|
||||
// 실제로는 CSV 파일을 파싱하거나 API에서 퀴즈 데이터를 가져와야 함
|
||||
// 여기서는 예시 데이터만 추가
|
||||
if (data.quizData && Array.isArray(data.quizData)) {
|
||||
data.quizData.forEach((q: any, index: number) => {
|
||||
quizData.push({
|
||||
id: String(q.id || index + 1),
|
||||
number: q.number || index + 1,
|
||||
question: q.question || '블라블라블라블라블라블라블라블라블라',
|
||||
correctAnswer: q.correctAnswer || q.correct_answer || '{정답}',
|
||||
wrongAnswer1: q.wrongAnswer1 || q.wrong_answer1 || '{오답1}',
|
||||
wrongAnswer2: q.wrongAnswer2 || q.wrong_answer2 || '{오답2}',
|
||||
wrongAnswer3: q.wrongAnswer3 || q.wrong_answer3 || '{오답3}',
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// API 응답 구조에 맞게 데이터 매핑
|
||||
const courseDetail: CourseDetail = {
|
||||
id: String(data.id || params.id),
|
||||
status: "수강 예정", // 관리자 페이지에서는 기본값
|
||||
courseName: courseName || data.courseName || '교육 과정명',
|
||||
title: data.title || data.lectureName || '',
|
||||
goal: data.objective || data.goal || '',
|
||||
method: data.method || '',
|
||||
summary: `VOD · 총 1강`,
|
||||
submitSummary: '',
|
||||
thumbnail: thumbnail,
|
||||
lessons: [
|
||||
{
|
||||
id: String(data.id || params.id),
|
||||
title: data.title || data.lectureName || '',
|
||||
duration: '00:00',
|
||||
state: "제출대기",
|
||||
action: "수강하기",
|
||||
}
|
||||
],
|
||||
goal: goalLines.length > 0 ? goalLines.join('\n') : (data.objective || data.goal || ''),
|
||||
videoFiles: videoFiles,
|
||||
vrFiles: vrFiles,
|
||||
quizData: quizData,
|
||||
};
|
||||
|
||||
setCourse(courseDetail);
|
||||
@@ -145,8 +227,18 @@ export default function AdminCourseDetailPage() {
|
||||
</div>
|
||||
<main className="w-[1120px] bg-white">
|
||||
<div className="h-full flex flex-col px-8">
|
||||
<div className="h-[100px] flex items-center">
|
||||
<h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">강좌 상세보기</h1>
|
||||
<div className="h-[100px] flex items-center justify-between px-8">
|
||||
<div className="flex items-center gap-[12px]">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => router.push('/admin/lessons')}
|
||||
className="flex items-center justify-center size-[32px] cursor-pointer hover:opacity-80"
|
||||
aria-label="뒤로가기"
|
||||
>
|
||||
<BackArrowSvg width={32} height={32} />
|
||||
</button>
|
||||
<h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">강좌 상세</h1>
|
||||
</div>
|
||||
</div>
|
||||
<section className="px-8 pb-20">
|
||||
<div className="flex items-center justify-center py-20">
|
||||
@@ -171,8 +263,18 @@ export default function AdminCourseDetailPage() {
|
||||
</div>
|
||||
<main className="w-[1120px] bg-white">
|
||||
<div className="h-full flex flex-col px-8">
|
||||
<div className="h-[100px] flex items-center">
|
||||
<h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">강좌 상세보기</h1>
|
||||
<div className="h-[100px] flex items-center justify-between px-8">
|
||||
<div className="flex items-center gap-[12px]">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => router.push('/admin/lessons')}
|
||||
className="flex items-center justify-center size-[32px] cursor-pointer hover:opacity-80"
|
||||
aria-label="뒤로가기"
|
||||
>
|
||||
<BackArrowSvg width={32} height={32} />
|
||||
</button>
|
||||
<h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">강좌 상세</h1>
|
||||
</div>
|
||||
</div>
|
||||
<section className="px-8 pb-20">
|
||||
<div className="flex flex-col items-center justify-center py-20">
|
||||
@@ -194,6 +296,36 @@ export default function AdminCourseDetailPage() {
|
||||
);
|
||||
}
|
||||
|
||||
const handleDownload = async (fileKey?: string, url?: string, fileName?: string) => {
|
||||
if (url) {
|
||||
// URL이 있으면 직접 다운로드
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = fileName || 'download';
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
} else if (fileKey) {
|
||||
// fileKey가 있으면 API를 통해 다운로드
|
||||
try {
|
||||
const fileUrl = await apiService.getFile(fileKey);
|
||||
if (fileUrl) {
|
||||
const link = document.createElement('a');
|
||||
link.href = fileUrl;
|
||||
link.download = fileName || 'download';
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('파일 다운로드 실패:', err);
|
||||
alert('파일 다운로드에 실패했습니다.');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const goalLines = course.goal.split('\n').filter(line => line.trim());
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col bg-white">
|
||||
<div className="flex flex-1 min-h-0 justify-center">
|
||||
@@ -204,9 +336,9 @@ export default function AdminCourseDetailPage() {
|
||||
</div>
|
||||
{/* 메인 콘텐츠 */}
|
||||
<main className="w-[1120px] bg-white">
|
||||
<div className="h-full flex flex-col px-8">
|
||||
<div className="h-full flex flex-col">
|
||||
{/* 헤더 */}
|
||||
<div className="h-[100px] flex items-center">
|
||||
<div className="h-[100px] flex items-center px-8">
|
||||
<div className="flex items-center gap-[12px]">
|
||||
<button
|
||||
type="button"
|
||||
@@ -217,99 +349,274 @@ export default function AdminCourseDetailPage() {
|
||||
<BackArrowSvg width={32} height={32} />
|
||||
</button>
|
||||
<h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">
|
||||
강좌 상세보기
|
||||
강좌 상세
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 콘텐츠 */}
|
||||
<section className="pb-20">
|
||||
<div className="rounded-[8px] bg-white px-8 pb-20 pt-6">
|
||||
{/* 상단 소개 카드 */}
|
||||
<div className="flex gap-6 rounded-[8px] bg-[#f8f9fa] p-6">
|
||||
<div className="relative h-[159px] w-[292px] overflow-hidden rounded">
|
||||
<Image
|
||||
src={course.thumbnail}
|
||||
alt={course.title}
|
||||
fill
|
||||
sizes="292px"
|
||||
className="object-cover"
|
||||
unoptimized
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex h-[27px] items-center gap-2">
|
||||
<span className="h-[20px] rounded-[4px] bg-[#e5f5ec] px-1.5 text-[13px] font-semibold leading-[1.4] text-[#0c9d61]">
|
||||
{course.status}
|
||||
</span>
|
||||
<h2 className="text-[18px] font-semibold leading-[1.5] text-[#333c47]">{course.title}</h2>
|
||||
</div>
|
||||
<div className="mt-3 space-y-1">
|
||||
<p className="text-[15px] leading-[1.5] text-[#333c47]">
|
||||
<span className="font-medium">학습 목표:</span> {course.goal}
|
||||
</p>
|
||||
<p className="text-[15px] leading-[1.5] text-[#333c47]">
|
||||
<span className="font-medium">학습 방법:</span> {course.method}
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-3 flex items-center gap-5 text-[13px] leading-[1.4] text-[#8c95a1]">
|
||||
<span>{course.summary}</span>
|
||||
{course.submitSummary && <span>{course.submitSummary}</span>}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-[40px] pb-20 pt-6 px-8">
|
||||
{/* 강좌 정보 섹션 */}
|
||||
<div className="flex flex-col gap-[8px]">
|
||||
<div className="flex flex-col gap-[8px]">
|
||||
<p className="text-[18px] font-bold leading-[1.5] text-[#333c47]">강좌 정보</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-[24px]">
|
||||
{/* 교육 과정명 */}
|
||||
<div className="flex flex-col gap-[4px]">
|
||||
<div className="w-[96px]">
|
||||
<p className="text-[15px] font-semibold leading-[1.5] text-[#6c7682]">교육 과정명</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-[16px] font-normal leading-[1.5] text-[#333c47]">{course.courseName}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 차시 리스트 */}
|
||||
<div className="mt-6 space-y-2">
|
||||
{course.lessons.map((l) => {
|
||||
const isSubmitted = l.state === "제출완료";
|
||||
const submitBtnStyle =
|
||||
l.state === "제출완료"
|
||||
? "border border-transparent text-[#384fbf]"
|
||||
: "border " + (l.action === "이어서 수강하기" || l.action === "수강하기" ? "border-[#b1b8c0]" : "border-[#8c95a1]");
|
||||
const rightBtnStyle =
|
||||
l.action === "이어서 수강하기"
|
||||
? "bg-[#ecf0ff] text-[#384fbf]"
|
||||
: l.action === "수강하기"
|
||||
? "bg-[#ecf0ff] text-[#384fbf]"
|
||||
: "bg-[#f1f3f5] text-[#4c5561]";
|
||||
return (
|
||||
<div key={l.id} className="rounded-[8px] border border-[#dee1e6] bg-white">
|
||||
<div className="flex items-center justify-between gap-4 rounded-[8px] px-6 py-4">
|
||||
<div className="min-w-0">
|
||||
<p className="text-[16px] font-semibold leading-[1.5] text-[#333c47]">{l.title}</p>
|
||||
<div className="mt-1 flex items-center gap-3">
|
||||
<p className="w-[40px] text-[13px] leading-[1.4] text-[#8c95a1]">{l.duration}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className={[
|
||||
"h-8 rounded-[6px] px-4 text-[14px] font-medium leading-[1.5]",
|
||||
"bg-white",
|
||||
submitBtnStyle,
|
||||
].join(" ")}
|
||||
>
|
||||
{isSubmitted ? "학습 제출 완료" : "학습 제출 하기"}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={[
|
||||
"h-8 rounded-[6px] px-4 text-[14px] font-medium leading-[1.5]",
|
||||
rightBtnStyle,
|
||||
].join(" ")}
|
||||
>
|
||||
{l.action}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{/* 강좌명 */}
|
||||
<div className="flex flex-col gap-[4px]">
|
||||
<div className="w-[96px]">
|
||||
<p className="text-[15px] font-semibold leading-[1.5] text-[#6c7682]">강좌명</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-[16px] font-normal leading-[1.5] text-[#333c47]">{course.title}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 학습 목표 */}
|
||||
<div className="flex flex-col gap-[4px]">
|
||||
<div className="w-[96px]">
|
||||
<p className="text-[15px] font-semibold leading-[1.5] text-[#6c7682]">학습 목표</p>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
{goalLines.map((line, index) => (
|
||||
<p key={index} className="text-[16px] font-normal leading-[1.5] text-[#333c47] mb-0">
|
||||
{line}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 파일 첨부 섹션 */}
|
||||
<div className="flex flex-col gap-[8px]">
|
||||
<p className="text-[18px] font-bold leading-[1.5] text-[#1b2027]">파일 첨부</p>
|
||||
|
||||
<div className="flex flex-col gap-[40px]">
|
||||
{/* 강좌 영상 */}
|
||||
<div className="flex flex-col gap-[8px]">
|
||||
<div className="flex gap-[12px] h-[32px] items-center">
|
||||
<div className="flex gap-[8px] items-center">
|
||||
<p className="text-[15px] font-semibold leading-[1.5] text-[#6c7682]">강좌 영상</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border border-[#dee1e6] rounded-[8px] bg-gray-50">
|
||||
{course.videoFiles.length > 0 ? (
|
||||
<div className="flex flex-col py-[12px]">
|
||||
{course.videoFiles.map((video) => (
|
||||
<div
|
||||
key={video.id}
|
||||
className="bg-white border border-[#dee1e6] rounded-[6px] h-[64px] flex items-center gap-[12px] px-[17px] mx-[12px] mb-[8px] last:mb-0"
|
||||
>
|
||||
<div className="size-[24px] shrink-0">
|
||||
<img src="/imgs/play.svg" alt="" className="size-full" />
|
||||
</div>
|
||||
<div className="flex-1 flex items-center gap-[8px] min-w-0">
|
||||
<p className="text-[15px] font-normal leading-[1.5] text-[#1b2027] truncate">
|
||||
{video.fileName}
|
||||
</p>
|
||||
<p className="text-[13px] font-normal leading-[1.4] text-[#8c95a1] shrink-0">
|
||||
{video.fileSize}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleDownload(video.fileKey, video.url, video.fileName)}
|
||||
className="bg-white border border-[#8c95a1] h-[32px] rounded-[6px] px-4 flex items-center justify-center gap-[4px] shrink-0"
|
||||
>
|
||||
<DownloadIcon className="size-[16px] text-[#4c5561]" />
|
||||
<p className="text-[13px] font-medium leading-[1.4] text-[#4c5561]">다운로드</p>
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-[64px] flex items-center justify-center">
|
||||
<p className="text-[14px] font-normal leading-[1.5] text-[#8c95a1] text-center">
|
||||
등록된 강좌 영상이 없습니다.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* VR 콘텐츠 */}
|
||||
<div className="flex flex-col gap-[8px]">
|
||||
<div className="flex gap-[12px] h-[32px] items-center">
|
||||
<div className="flex gap-[8px] items-center">
|
||||
<p className="text-[15px] font-semibold leading-[1.5] text-[#6c7682]">VR 콘텐츠</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border border-[#dee1e6] rounded-[8px] bg-gray-50">
|
||||
{course.vrFiles.length > 0 ? (
|
||||
<div className="flex flex-col py-[12px]">
|
||||
{course.vrFiles.map((vr) => (
|
||||
<div
|
||||
key={vr.id}
|
||||
className="bg-white border border-[#dee1e6] rounded-[6px] h-[64px] flex items-center gap-[12px] px-[17px] mx-[12px] mb-[8px] last:mb-0"
|
||||
>
|
||||
<div className="size-[24px] shrink-0">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8L14 2Z" stroke="#4c5561" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M14 2V8H20" stroke="#4c5561" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-1 flex items-center gap-[8px] min-w-0">
|
||||
<p className="text-[15px] font-normal leading-[1.5] text-[#1b2027] truncate">
|
||||
{vr.fileName}
|
||||
</p>
|
||||
<p className="text-[13px] font-normal leading-[1.4] text-[#8c95a1] shrink-0">
|
||||
{vr.fileSize}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleDownload(vr.fileKey, vr.url, vr.fileName)}
|
||||
className="bg-white border border-[#8c95a1] h-[32px] rounded-[6px] px-4 flex items-center justify-center gap-[4px] shrink-0"
|
||||
>
|
||||
<DownloadIcon className="size-[16px] text-[#4c5561]" />
|
||||
<p className="text-[13px] font-medium leading-[1.4] text-[#4c5561]">다운로드</p>
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-[64px] flex items-center justify-center">
|
||||
<p className="text-[14px] font-normal leading-[1.5] text-[#8c95a1] text-center">
|
||||
등록된 VR 콘텐츠가 없습니다.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 학습 평가 문제 */}
|
||||
<div className="flex flex-col gap-[8px]">
|
||||
<div className="flex gap-[12px] h-[32px] items-center justify-between">
|
||||
<div className="flex gap-[8px] items-center">
|
||||
<p className="text-[15px] font-semibold leading-[1.5] text-[#6c7682]">학습 평가 문제</p>
|
||||
</div>
|
||||
{course.quizData.length > 0 && (
|
||||
<button
|
||||
type="button"
|
||||
className="bg-white border border-[#8c95a1] h-[32px] rounded-[6px] px-4 flex items-center justify-center gap-[4px]"
|
||||
>
|
||||
<DownloadIcon className="size-[16px] text-[#4c5561]" />
|
||||
<p className="text-[13px] font-medium leading-[1.4] text-[#4c5561]">다운로드</p>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="border border-[#dee1e6] rounded-[8px] bg-gray-50">
|
||||
{course.quizData.length > 0 ? (
|
||||
<div className="p-6">
|
||||
<div className="bg-white border border-[#dee1e6] rounded-[8px] overflow-hidden">
|
||||
{/* 테이블 헤더 */}
|
||||
<div className="bg-[#f1f8ff] h-[48px] flex">
|
||||
<div className="w-[48px] border-r border-[#dee1e6] flex items-center justify-center px-2 py-3">
|
||||
<p className="text-[14px] font-semibold leading-[1.5] text-[#4c5561]">번호</p>
|
||||
</div>
|
||||
<div className="flex-1 border-r border-[#dee1e6] flex items-center px-2 py-3">
|
||||
<p className="text-[14px] font-semibold leading-[1.5] text-[#4c5561]">문제</p>
|
||||
</div>
|
||||
<div className="w-[140px] border-r border-[#dee1e6] flex items-center px-2 py-3">
|
||||
<p className="text-[14px] font-semibold leading-[1.5] text-[#4c5561]">정답</p>
|
||||
</div>
|
||||
<div className="w-[140px] border-r border-[#dee1e6] flex items-center px-2 py-3">
|
||||
<p className="text-[14px] font-semibold leading-[1.5] text-[#4c5561]">오답1</p>
|
||||
</div>
|
||||
<div className="w-[140px] border-r border-[#dee1e6] flex items-center px-2 py-3">
|
||||
<p className="text-[14px] font-semibold leading-[1.5] text-[#4c5561]">오답2</p>
|
||||
</div>
|
||||
<div className="w-[140px] flex items-center px-2 py-3">
|
||||
<p className="text-[14px] font-semibold leading-[1.5] text-[#4c5561]">오답3</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* 테이블 행 */}
|
||||
{course.quizData.map((quiz) => (
|
||||
<div key={quiz.id} className="border-t border-[#dee1e6] h-[48px] flex">
|
||||
<div className="w-[48px] border-r border-[#dee1e6] flex items-center justify-center px-2 py-3">
|
||||
<p className="text-[15px] font-medium leading-[1.5] text-[#1b2027]">{quiz.number}</p>
|
||||
</div>
|
||||
<div className="flex-1 border-r border-[#dee1e6] flex items-center px-2 py-3">
|
||||
<p className="text-[15px] font-medium leading-[1.5] text-[#1b2027] truncate">{quiz.question}</p>
|
||||
</div>
|
||||
<div className="w-[140px] border-r border-[#dee1e6] flex items-center px-2 py-3">
|
||||
<p className="text-[15px] font-medium leading-[1.5] text-[#1b2027] truncate">{quiz.correctAnswer}</p>
|
||||
</div>
|
||||
<div className="w-[140px] border-r border-[#dee1e6] flex items-center px-2 py-3">
|
||||
<p className="text-[15px] font-medium leading-[1.5] text-[#1b2027] truncate">{quiz.wrongAnswer1}</p>
|
||||
</div>
|
||||
<div className="w-[140px] border-r border-[#dee1e6] flex items-center px-2 py-3">
|
||||
<p className="text-[15px] font-medium leading-[1.5] text-[#1b2027] truncate">{quiz.wrongAnswer2}</p>
|
||||
</div>
|
||||
<div className="w-[140px] flex items-center px-2 py-3">
|
||||
<p className="text-[15px] font-medium leading-[1.5] text-[#1b2027] truncate">{quiz.wrongAnswer3}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-[64px] flex items-center justify-center">
|
||||
<p className="text-[14px] font-normal leading-[1.5] text-[#8c95a1] text-center">
|
||||
등록된 학습 평가 문제가 없습니다.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer 버튼 */}
|
||||
<div className="flex gap-[12px] items-center justify-end">
|
||||
<button
|
||||
type="button"
|
||||
className="bg-[#fef2f2] h-[48px] rounded-[10px] px-2 flex items-center justify-center min-w-[80px]"
|
||||
>
|
||||
<p className="text-[16px] font-semibold leading-[1.5] text-[#f64c4c]">삭제</p>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={async () => {
|
||||
// 현재 강좌 데이터를 sessionStorage에 저장
|
||||
if (course && params?.id) {
|
||||
try {
|
||||
// API에서 원본 강좌 데이터 가져오기
|
||||
const response = await apiService.getLectures();
|
||||
const lectures = Array.isArray(response.data)
|
||||
? response.data
|
||||
: response.data?.items || response.data?.lectures || response.data?.data || [];
|
||||
const lectureData = lectures.find((l: any) => String(l.id || l.lectureId) === params.id);
|
||||
|
||||
if (lectureData) {
|
||||
// sessionStorage에 원본 데이터 저장
|
||||
sessionStorage.setItem('selectedLecture', JSON.stringify(lectureData));
|
||||
}
|
||||
router.push(`/admin/lessons/${params.id}/edit`);
|
||||
} catch (error) {
|
||||
console.error('강좌 데이터 가져오기 실패:', error);
|
||||
// 실패해도 수정 페이지로 이동
|
||||
router.push(`/admin/lessons/${params.id}/edit`);
|
||||
}
|
||||
}
|
||||
}}
|
||||
className="bg-[#f1f3f5] h-[48px] rounded-[10px] px-4 flex items-center justify-center min-w-[114px] cursor-pointer hover:bg-[#e5e7eb] transition-colors"
|
||||
>
|
||||
<p className="text-[16px] font-semibold leading-normal text-normal">수정하기</p>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
37
src/app/admin/resources/mockData.ts
Normal file
37
src/app/admin/resources/mockData.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
export type Resource = {
|
||||
id: number;
|
||||
title: string;
|
||||
date: string; // 게시일
|
||||
views: number; // 조회수
|
||||
writer: string; // 작성자
|
||||
content?: string[]; // 본문 내용 (상세 페이지용)
|
||||
hasAttachment?: boolean; // 첨부파일 여부
|
||||
};
|
||||
|
||||
// TODO: 나중에 DB에서 가져오도록 변경
|
||||
export const MOCK_RESOURCES: Resource[] = [
|
||||
{
|
||||
id: 2,
|
||||
title: '학습 자료 제목이 노출돼요',
|
||||
date: '2025-09-10',
|
||||
views: 1230,
|
||||
writer: '문지호',
|
||||
content: [
|
||||
'학습 자료 관련 주요 내용을 안내드립니다.',
|
||||
'학습 자료는 수강 기간 동안 언제든지 다운로드 가능합니다.',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: '📚 방사선학 학습 자료 모음',
|
||||
date: '2025-06-28',
|
||||
views: 594,
|
||||
writer: '문지호',
|
||||
hasAttachment: true,
|
||||
content: [
|
||||
'방사선학 강의에 필요한 학습 자료를 첨부합니다.',
|
||||
'학습 자료는 강의 수강 시 참고하시기 바랍니다.',
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
@@ -1,21 +1,103 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useMemo } from "react";
|
||||
import { useState, useMemo, useRef, ChangeEvent } from "react";
|
||||
import AdminSidebar from "@/app/components/AdminSidebar";
|
||||
import ChevronDownSvg from "@/app/svgs/chevrondownsvg";
|
||||
import BackArrowSvg from "@/app/svgs/backarrow";
|
||||
import { MOCK_RESOURCES, type Resource } from "@/app/admin/resources/mockData";
|
||||
import apiService from "@/app/lib/apiService";
|
||||
|
||||
export default function AdminResourcesPage() {
|
||||
// TODO: 나중에 실제 데이터로 교체
|
||||
const items: any[] = [];
|
||||
const [resources, setResources] = useState<Resource[]>(MOCK_RESOURCES);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [isWritingMode, setIsWritingMode] = useState(false);
|
||||
const [title, setTitle] = useState('');
|
||||
const [content, setContent] = useState('');
|
||||
const [attachedFile, setAttachedFile] = useState<File | null>(null);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const totalCount = useMemo(() => resources.length, [resources]);
|
||||
|
||||
const characterCount = useMemo(() => content.length, [content]);
|
||||
|
||||
const handleBack = () => {
|
||||
setIsWritingMode(false);
|
||||
setTitle('');
|
||||
setContent('');
|
||||
setAttachedFile(null);
|
||||
};
|
||||
|
||||
const handleFileAttach = () => {
|
||||
fileInputRef.current?.click();
|
||||
};
|
||||
|
||||
const handleFileChange = async (e: ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (file) {
|
||||
if (file.size > 30 * 1024 * 1024) {
|
||||
alert('30MB 미만의 파일만 첨부할 수 있습니다.');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
// 단일 파일 업로드
|
||||
await apiService.uploadFile(file);
|
||||
setAttachedFile(file);
|
||||
} catch (error) {
|
||||
console.error('파일 업로드 실패:', error);
|
||||
alert('파일 업로드에 실패했습니다. 다시 시도해주세요.');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
if (!title.trim()) {
|
||||
alert('제목을 입력해주세요.');
|
||||
return;
|
||||
}
|
||||
if (!content.trim()) {
|
||||
alert('내용을 입력해주세요.');
|
||||
return;
|
||||
}
|
||||
|
||||
// 새 학습 자료 추가
|
||||
const newResource: Resource = {
|
||||
id: resources.length > 0 ? Math.max(...resources.map(r => r.id)) + 1 : 1,
|
||||
title: title.trim(),
|
||||
date: new Date().toISOString().split('T')[0],
|
||||
views: 0,
|
||||
writer: '관리자', // TODO: 실제 작성자 정보 사용
|
||||
content: content.split('\n'),
|
||||
hasAttachment: attachedFile !== null,
|
||||
};
|
||||
|
||||
setResources([newResource, ...resources]);
|
||||
handleBack();
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
if (title.trim() || content.trim() || attachedFile) {
|
||||
if (confirm('작성 중인 내용이 있습니다. 정말 취소하시겠습니까?')) {
|
||||
handleBack();
|
||||
}
|
||||
} else {
|
||||
handleBack();
|
||||
}
|
||||
};
|
||||
|
||||
const ITEMS_PER_PAGE = 10;
|
||||
const totalPages = Math.ceil(items.length / ITEMS_PER_PAGE);
|
||||
const paginatedItems = useMemo(() => {
|
||||
const sortedResources = useMemo(() => {
|
||||
return [...resources].sort((a, b) => {
|
||||
// 생성일 내림차순 정렬 (최신 날짜가 먼저)
|
||||
return b.date.localeCompare(a.date);
|
||||
});
|
||||
}, [resources]);
|
||||
|
||||
const totalPages = Math.ceil(sortedResources.length / ITEMS_PER_PAGE);
|
||||
const paginatedResources = useMemo(() => {
|
||||
const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
|
||||
const endIndex = startIndex + ITEMS_PER_PAGE;
|
||||
return items.slice(startIndex, endIndex);
|
||||
}, [items, currentPage]);
|
||||
return sortedResources.slice(startIndex, endIndex);
|
||||
}, [sortedResources, currentPage]);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col bg-white">
|
||||
@@ -30,27 +112,219 @@ export default function AdminResourcesPage() {
|
||||
{/* 메인 콘텐츠 */}
|
||||
<main className="w-[1120px] bg-white">
|
||||
<div className="h-full flex flex-col px-8">
|
||||
{/* 제목 영역 */}
|
||||
<div className="h-[100px] flex items-center">
|
||||
<h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">
|
||||
학습 자료실
|
||||
</h1>
|
||||
</div>
|
||||
{isWritingMode ? (
|
||||
<>
|
||||
{/* 작성 모드 헤더 */}
|
||||
<div className="h-[100px] flex items-center">
|
||||
<div className="flex gap-3 items-center">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleBack}
|
||||
className="flex items-center justify-center w-8 h-8 cursor-pointer"
|
||||
aria-label="뒤로가기"
|
||||
>
|
||||
<BackArrowSvg width={32} height={32} />
|
||||
</button>
|
||||
<h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">
|
||||
학습 자료 작성
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 콘텐츠 영역 */}
|
||||
<div className="flex-1 pt-8 flex flex-col">
|
||||
{items.length === 0 ? (
|
||||
{/* 작성 폼 */}
|
||||
<div className="flex-1 flex flex-col gap-10 pb-20 pt-8 w-full">
|
||||
<div className="flex flex-col gap-6 w-full">
|
||||
{/* 제목 입력 */}
|
||||
<div className="flex flex-col gap-2 items-start justify-center w-full">
|
||||
<label className="text-[15px] font-semibold leading-[1.5] text-[#6c7682] w-[100px]">
|
||||
제목
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
placeholder="제목을 입력해 주세요."
|
||||
className="w-full h-[40px] px-3 py-2 rounded-[8px] border border-[#dee1e6] 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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 내용 입력 */}
|
||||
<div className="flex flex-col gap-2 items-start justify-center w-full">
|
||||
<label className="text-[15px] font-semibold leading-[1.5] text-[#6c7682] w-[100px]">
|
||||
내용
|
||||
</label>
|
||||
<div className="relative w-full">
|
||||
<textarea
|
||||
value={content}
|
||||
onChange={(e) => {
|
||||
const newContent = e.target.value;
|
||||
if (newContent.length <= 1000) {
|
||||
setContent(newContent);
|
||||
}
|
||||
}}
|
||||
placeholder="내용을 입력해 주세요. (최대 1,000자 이내)"
|
||||
className="w-full h-[320px] px-3 py-2 rounded-[8px] border border-[#dee1e6] bg-white text-[16px] font-normal leading-[1.5] text-[#1b2027] placeholder:text-[#b1b8c0] resize-none focus:outline-none focus:ring-2 focus:ring-[#1f2b91] focus:border-transparent"
|
||||
/>
|
||||
<div className="absolute bottom-3 right-3">
|
||||
<p className="text-[13px] font-normal leading-[1.4] text-[#6c7682] text-right">
|
||||
{characterCount}/1000
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 첨부 파일 */}
|
||||
<div className="flex flex-col gap-2 items-start justify-center w-full">
|
||||
<div className="flex items-center justify-between h-8 w-full">
|
||||
<div className="flex items-center gap-3 flex-1 min-w-0">
|
||||
<label className="text-[15px] font-semibold leading-[1.5] text-[#6c7682] whitespace-nowrap">
|
||||
첨부 파일{' '}
|
||||
<span className="font-normal">
|
||||
({attachedFile ? 1 : 0}/1)
|
||||
</span>
|
||||
</label>
|
||||
<p className="text-[13px] font-normal leading-[1.4] text-[#8c95a1] whitespace-nowrap">
|
||||
30MB 미만 파일
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleFileAttach}
|
||||
className="h-[32px] w-[62px] px-[4px] py-[3px] rounded-[6px] border border-[#8c95a1] bg-white flex items-center justify-center cursor-pointer hover:bg-gray-50 transition-colors shrink-0"
|
||||
>
|
||||
<span className="text-[13px] font-medium leading-[1.4] text-[#4c5561] whitespace-nowrap">
|
||||
첨부
|
||||
</span>
|
||||
</button>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
onChange={handleFileChange}
|
||||
className="hidden"
|
||||
accept="*/*"
|
||||
/>
|
||||
</div>
|
||||
<div className="h-16 w-full rounded-[8px] border border-[#dee1e6] bg-gray-50 flex items-center justify-center">
|
||||
{attachedFile ? (
|
||||
<p className="text-[14px] font-normal leading-[1.5] text-[#1b2027]">
|
||||
{attachedFile.name}
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-[14px] font-normal leading-[1.5] text-[#8c95a1] text-center">
|
||||
파일을 첨부해주세요.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 액션 버튼 */}
|
||||
<div className="flex gap-3 items-center justify-end shrink-0 w-full">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleCancel}
|
||||
className="h-12 px-8 rounded-[10px] bg-[#f1f3f5] text-[16px] font-semibold leading-[1.5] text-[#4c5561] whitespace-nowrap hover:bg-[#e5e8eb] transition-colors cursor-pointer"
|
||||
>
|
||||
취소
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSave}
|
||||
className="h-12 px-4 rounded-[10px] bg-[#1f2b91] text-[16px] font-semibold leading-[1.5] text-white whitespace-nowrap hover:bg-[#1a2478] transition-colors cursor-pointer"
|
||||
>
|
||||
저장하기
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{/* 제목 영역 */}
|
||||
<div className="h-[100px] flex items-center">
|
||||
<h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">
|
||||
학습 자료실
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* 헤더 영역 (제목과 콘텐츠 사이) */}
|
||||
<div className="pt-2 pb-4 flex items-center justify-between">
|
||||
<p className="text-[15px] font-medium leading-[1.5] text-[#333c47] whitespace-nowrap">
|
||||
총 {totalCount}건
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsWritingMode(true)}
|
||||
className="h-[40px] px-4 rounded-[8px] bg-[#1f2b91] text-[16px] font-semibold leading-[1.5] text-white whitespace-nowrap hover:bg-[#1a2478] transition-colors cursor-pointer"
|
||||
>
|
||||
등록하기
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 콘텐츠 영역 */}
|
||||
<div className="flex-1 pt-2 flex flex-col">
|
||||
{resources.length === 0 ? (
|
||||
<div className="rounded-lg border border-[#dee1e6] bg-white min-h-[400px] flex items-center justify-center">
|
||||
<p className="text-[16px] font-medium leading-[1.5] text-[#333c47]">
|
||||
현재 관리할 수 있는 항목이 없습니다.
|
||||
등록된 학습 자료가 없습니다.
|
||||
<br />
|
||||
학습 자료를 등록해주세요.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* TODO: 테이블 또는 리스트를 여기에 추가 */}
|
||||
<div className="rounded-[8px]">
|
||||
<div className="w-full rounded-[8px] border border-[#dee1e6] overflow-visible">
|
||||
<table className="min-w-full border-collapse">
|
||||
<colgroup>
|
||||
<col style={{ width: 80 }} />
|
||||
<col />
|
||||
<col style={{ width: 140 }} />
|
||||
<col style={{ width: 120 }} />
|
||||
<col style={{ width: 120 }} />
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr className="h-12 bg-gray-50 text-left">
|
||||
<th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">번호</th>
|
||||
<th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">제목</th>
|
||||
<th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">게시일</th>
|
||||
<th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">조회수</th>
|
||||
<th className="px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">작성자</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{paginatedResources.map((resource, index) => {
|
||||
// 번호는 전체 목록에서의 순서 (정렬된 목록 기준)
|
||||
const resourceNumber = sortedResources.length - (currentPage - 1) * ITEMS_PER_PAGE - index;
|
||||
return (
|
||||
<tr
|
||||
key={resource.id}
|
||||
className="h-12 hover:bg-[#F5F7FF] transition-colors"
|
||||
>
|
||||
<td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap text-center">
|
||||
{resourceNumber}
|
||||
</td>
|
||||
<td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027]">
|
||||
{resource.title}
|
||||
</td>
|
||||
<td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
|
||||
{resource.date}
|
||||
</td>
|
||||
<td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
|
||||
{resource.views.toLocaleString()}
|
||||
</td>
|
||||
<td className="border-t border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
|
||||
{resource.writer}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 페이지네이션 - 10개 초과일 때만 표시 */}
|
||||
{items.length > ITEMS_PER_PAGE && (() => {
|
||||
{resources.length > ITEMS_PER_PAGE && (() => {
|
||||
// 페이지 번호를 10단위로 표시
|
||||
const pageGroup = Math.floor((currentPage - 1) / 10);
|
||||
const startPage = pageGroup * 10 + 1;
|
||||
@@ -134,7 +408,9 @@ export default function AdminResourcesPage() {
|
||||
})()}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
@@ -390,6 +390,24 @@ class ApiService {
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 강좌(lecture) 수정
|
||||
*/
|
||||
async updateLecture(lectureId: string | number, lectureData: {
|
||||
subjectId?: number;
|
||||
title?: string;
|
||||
objective?: string;
|
||||
videoUrl?: string;
|
||||
webglUrl?: string;
|
||||
csvKey?: string;
|
||||
csvUrl?: string;
|
||||
}) {
|
||||
return this.request(`/lectures/${lectureId}`, {
|
||||
method: 'PATCH',
|
||||
body: lectureData,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 리소스 조회
|
||||
*/
|
||||
|
||||
@@ -159,7 +159,8 @@ export default function LoginPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen w-full flex flex-col items-center justify-between">
|
||||
<>
|
||||
<div className="min-h-screen w-full flex flex-col items-center pt-[180px]">
|
||||
|
||||
<LoginErrorModal
|
||||
open={isLoginErrorOpen}
|
||||
@@ -321,9 +322,10 @@ export default function LoginPage() {
|
||||
</form>
|
||||
</div>
|
||||
<div></div>
|
||||
<p className="text-center py-[40px] text-[15px] text-basic-text">
|
||||
Copyright ⓒ 2025 XL LMS. All rights reserved
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-center py-[40px] text-[15px] text-basic-text">
|
||||
Copyright ⓒ 2025 XL LMS. All rights reserved
|
||||
</p>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
25
src/app/svgs/downloadicon.tsx
Normal file
25
src/app/svgs/downloadicon.tsx
Normal file
@@ -0,0 +1,25 @@
|
||||
import React from "react";
|
||||
|
||||
type DownloadIconProps = React.SVGProps<SVGSVGElement>;
|
||||
|
||||
export default function DownloadIcon(props: DownloadIconProps) {
|
||||
return (
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M12 3v12m0 0l-4-4m4 4l4-4M5 21h14"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user