1501 lines
71 KiB
TypeScript
1501 lines
71 KiB
TypeScript
'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";
|
|
import NoChangesModal from "@/app/admin/notices/NoChangesModal";
|
|
|
|
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 videoFileInputRef = useRef<HTMLInputElement>(null);
|
|
const vrFileInputRef = useRef<HTMLInputElement>(null);
|
|
const csvFileInputRef = useRef<HTMLInputElement>(null);
|
|
const [courses, setCourses] = useState<Course[]>([]);
|
|
|
|
// 폼 상태
|
|
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 [courseVideoFileKeys, setCourseVideoFileKeys] = useState<string[]>([]);
|
|
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 [vrContentFileKeys, setVrContentFileKeys] = useState<string[]>([]);
|
|
const [existingVrFiles, setExistingVrFiles] = useState<Array<{fileName: string, fileKey?: string, url?: string}>>([]);
|
|
const [questionFileCount, setQuestionFileCount] = useState(0);
|
|
const [questionFileObject, setQuestionFileObject] = useState<File | null>(null);
|
|
const [questionFileKey, setQuestionFileKey] = useState<string | null>(null);
|
|
const [existingQuestionFile, setExistingQuestionFile] = useState<{fileName: string, fileKey?: string} | null>(null);
|
|
const [csvData, setCsvData] = useState<string[][]>([]);
|
|
const [csvHeaders, setCsvHeaders] = useState<string[]>([]);
|
|
const [csvRows, setCsvRows] = useState<string[][]>([]);
|
|
|
|
// 파일 교체 확인 모달 상태
|
|
const [isFileReplaceModalOpen, setIsFileReplaceModalOpen] = useState(false);
|
|
const [pendingFiles, setPendingFiles] = useState<File[]>([]);
|
|
const [pendingFileType, setPendingFileType] = useState<'video' | 'vr' | 'csv' | null>(null);
|
|
|
|
// 변경사항 없음 모달 상태
|
|
const [isNoChangesModalOpen, setIsNoChangesModalOpen] = useState(false);
|
|
|
|
// 원본 데이터 저장 (변경사항 비교용)
|
|
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) {
|
|
const csvFileKey = data.csvKey || (data.csvUrl && data.csvUrl.startsWith('csv/') ? data.csvUrl.substring(4) : data.csvUrl);
|
|
|
|
setExistingQuestionFile({
|
|
fileName: data.csvFileName || data.csv_file_name || data.csvName || '평가문제.csv',
|
|
fileKey: csvFileKey,
|
|
});
|
|
setQuestionFileCount(1);
|
|
|
|
// CSV 파일 다운로드 및 파싱
|
|
if (data.csvUrl || data.csvKey) {
|
|
try {
|
|
const baseURL = process.env.NEXT_PUBLIC_API_BASE_URL || 'https://hrdi.coconutmeet.net';
|
|
const token = typeof window !== 'undefined' ? localStorage.getItem('token') : null;
|
|
|
|
let fileKey: string | null = null;
|
|
|
|
// csvUrl에서 fileKey 추출
|
|
if (data.csvUrl) {
|
|
// 전체 URL인 경우 fileKey 추출
|
|
if (data.csvUrl.startsWith('http://') || data.csvUrl.startsWith('https://')) {
|
|
// URL에서 /api/files/ 이후 부분을 fileKey로 사용
|
|
const filesIndex = data.csvUrl.indexOf('/api/files/');
|
|
if (filesIndex !== -1) {
|
|
const extractedKey = data.csvUrl.substring(filesIndex + '/api/files/'.length);
|
|
// URL 디코딩
|
|
fileKey = decodeURIComponent(extractedKey);
|
|
} else {
|
|
// URL에서 마지막 경로를 fileKey로 사용
|
|
const urlParts = data.csvUrl.split('/');
|
|
const lastPart = urlParts[urlParts.length - 1];
|
|
if (lastPart) {
|
|
fileKey = decodeURIComponent(lastPart);
|
|
}
|
|
}
|
|
} else if (data.csvUrl.startsWith('csv/')) {
|
|
// "csv/" 접두사 제거
|
|
fileKey = data.csvUrl.substring(4);
|
|
} else {
|
|
// 그 외의 경우 fileKey로 사용
|
|
fileKey = data.csvUrl;
|
|
}
|
|
} else if (data.csvKey) {
|
|
// csvKey가 있으면 fileKey로 사용
|
|
fileKey = data.csvKey;
|
|
}
|
|
|
|
if (!fileKey) {
|
|
return; // fileKey가 없으면 종료
|
|
}
|
|
|
|
// /api/files/{fileKey} 형태로 요청
|
|
const csvUrl = `${baseURL}/api/files/${encodeURIComponent(fileKey as string)}`;
|
|
|
|
const csvResponse = await fetch(csvUrl, {
|
|
method: 'GET',
|
|
headers: {
|
|
...(token && { Authorization: `Bearer ${token}` }),
|
|
},
|
|
});
|
|
|
|
// 404 에러는 파일이 없는 것으로 간주하고 조용히 처리
|
|
if (csvResponse.status === 404) {
|
|
console.warn('CSV 파일을 찾을 수 없습니다:', data.csvUrl || data.csvKey);
|
|
} else if (csvResponse.ok) {
|
|
const csvText = await csvResponse.text();
|
|
|
|
// CSV 파싱 함수
|
|
const parseCsv = (csvText: string): string[][] => {
|
|
const lines: string[][] = [];
|
|
let currentLine: string[] = [];
|
|
let currentField = '';
|
|
let inQuotes = false;
|
|
|
|
for (let i = 0; i < csvText.length; i++) {
|
|
const char = csvText[i];
|
|
const nextChar = csvText[i + 1];
|
|
|
|
if (char === '"') {
|
|
if (inQuotes && nextChar === '"') {
|
|
currentField += '"';
|
|
i++;
|
|
} else {
|
|
inQuotes = !inQuotes;
|
|
}
|
|
} else if (char === ',' && !inQuotes) {
|
|
currentLine.push(currentField.trim());
|
|
currentField = '';
|
|
} else if ((char === '\n' || char === '\r') && !inQuotes) {
|
|
if (char === '\r' && nextChar === '\n') {
|
|
i++;
|
|
}
|
|
if (currentField || currentLine.length > 0) {
|
|
currentLine.push(currentField.trim());
|
|
lines.push(currentLine);
|
|
currentLine = [];
|
|
currentField = '';
|
|
}
|
|
} else {
|
|
currentField += char;
|
|
}
|
|
}
|
|
|
|
if (currentField || currentLine.length > 0) {
|
|
currentLine.push(currentField.trim());
|
|
lines.push(currentLine);
|
|
}
|
|
|
|
return lines;
|
|
};
|
|
|
|
const parsed = parseCsv(csvText);
|
|
|
|
if (parsed.length > 0) {
|
|
const headers = parsed[0];
|
|
const rows = parsed.slice(1);
|
|
|
|
setCsvHeaders(headers);
|
|
setCsvRows(rows);
|
|
setCsvData(parsed);
|
|
}
|
|
} else if (!csvResponse.ok) {
|
|
console.error(`CSV 파일을 가져오는데 실패했습니다. (${csvResponse.status})`);
|
|
}
|
|
} catch (csvError) {
|
|
console.error('CSV 파일 파싱 실패:', csvError);
|
|
// CSV 파싱 실패해도 계속 진행
|
|
}
|
|
}
|
|
}
|
|
} 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]);
|
|
|
|
|
|
const handleBackClick = () => {
|
|
router.push(`/admin/lessons/${params.id}`);
|
|
};
|
|
|
|
// 파일 업로드 함수
|
|
const handleVideoFileUpload = async (validFiles: File[]) => {
|
|
try {
|
|
let fileKeys: string[] = [];
|
|
|
|
// 파일이 1개인 경우 uploadFile 사용
|
|
if (validFiles.length === 1) {
|
|
const uploadResponse = await apiService.uploadFile(validFiles[0]);
|
|
|
|
// 응답에서 fileKey 추출
|
|
const fileKey = uploadResponse.data?.fileKey
|
|
|| uploadResponse.data?.key
|
|
|| uploadResponse.data?.id
|
|
|| uploadResponse.data?.fileId;
|
|
|
|
if (fileKey) {
|
|
fileKeys = [fileKey];
|
|
} else {
|
|
throw new Error('파일 업로드는 완료되었지만 fileKey를 받지 못했습니다.');
|
|
}
|
|
} else {
|
|
// 파일이 2개 이상인 경우 uploadFiles 사용
|
|
const uploadResponse = await apiService.uploadFiles(validFiles);
|
|
|
|
// 응답에서 fileKey 배열 추출
|
|
if (uploadResponse.data?.results && Array.isArray(uploadResponse.data.results)) {
|
|
uploadResponse.data.results.forEach((result: any) => {
|
|
if (result.ok && result.fileKey) {
|
|
fileKeys.push(result.fileKey);
|
|
} else if (result.fileKey) {
|
|
fileKeys.push(result.fileKey);
|
|
}
|
|
});
|
|
} else if (Array.isArray(uploadResponse.data)) {
|
|
// 응답이 배열인 경우
|
|
fileKeys = uploadResponse.data.map((item: any) =>
|
|
item.fileKey || item.key || item.id || item.fileId
|
|
).filter(Boolean);
|
|
} else if (uploadResponse.data?.fileKeys && Array.isArray(uploadResponse.data.fileKeys)) {
|
|
fileKeys = uploadResponse.data.fileKeys;
|
|
}
|
|
}
|
|
|
|
if (fileKeys.length > 0) {
|
|
// 새로 첨부한 파일로 교체 (기존 새로 첨부한 파일은 삭제, 서버에 저장된 기존 파일은 유지)
|
|
setCourseVideoFiles(validFiles.map(f => f.name));
|
|
setCourseVideoFileObjects(validFiles);
|
|
setCourseVideoFileKeys(fileKeys);
|
|
setCourseVideoCount(existingVideoFiles.length + fileKeys.length);
|
|
} else {
|
|
throw new Error('파일 업로드는 완료되었지만 fileKey를 받지 못했습니다.');
|
|
}
|
|
} catch (error) {
|
|
console.error('강좌 영상 업로드 실패:', error);
|
|
alert('파일 업로드에 실패했습니다. 다시 시도해주세요.');
|
|
}
|
|
};
|
|
|
|
const handleVrFileUpload = async (validFiles: File[]) => {
|
|
try {
|
|
let fileKeys: string[] = [];
|
|
|
|
// 파일이 1개인 경우 uploadFile 사용
|
|
if (validFiles.length === 1) {
|
|
const uploadResponse = await apiService.uploadFile(validFiles[0]);
|
|
|
|
// 응답에서 fileKey 추출
|
|
const fileKey = uploadResponse.data?.fileKey
|
|
|| uploadResponse.data?.key
|
|
|| uploadResponse.data?.id
|
|
|| uploadResponse.data?.fileId;
|
|
|
|
if (fileKey) {
|
|
fileKeys = [fileKey];
|
|
} else {
|
|
throw new Error('파일 업로드는 완료되었지만 fileKey를 받지 못했습니다.');
|
|
}
|
|
} else {
|
|
// 파일이 2개 이상인 경우 uploadFiles 사용
|
|
const uploadResponse = await apiService.uploadFiles(validFiles);
|
|
|
|
// 응답에서 fileKey 배열 추출
|
|
if (uploadResponse.data?.results && Array.isArray(uploadResponse.data.results)) {
|
|
uploadResponse.data.results.forEach((result: any) => {
|
|
if (result.ok && result.fileKey) {
|
|
fileKeys.push(result.fileKey);
|
|
} else if (result.fileKey) {
|
|
fileKeys.push(result.fileKey);
|
|
}
|
|
});
|
|
} else if (Array.isArray(uploadResponse.data)) {
|
|
// 응답이 배열인 경우
|
|
fileKeys = uploadResponse.data.map((item: any) =>
|
|
item.fileKey || item.key || item.id || item.fileId
|
|
).filter(Boolean);
|
|
} else if (uploadResponse.data?.fileKeys && Array.isArray(uploadResponse.data.fileKeys)) {
|
|
fileKeys = uploadResponse.data.fileKeys;
|
|
}
|
|
}
|
|
|
|
if (fileKeys.length > 0) {
|
|
// 새로 첨부한 파일로 교체 (기존 새로 첨부한 파일은 삭제, 서버에 저장된 기존 파일은 유지)
|
|
setVrContentFiles(validFiles.map(f => f.name));
|
|
setVrContentFileObjects(validFiles);
|
|
setVrContentFileKeys(fileKeys);
|
|
setVrContentCount(existingVrFiles.length + fileKeys.length);
|
|
} else {
|
|
throw new Error('파일 업로드는 완료되었지만 fileKey를 받지 못했습니다.');
|
|
}
|
|
} catch (error) {
|
|
console.error('VR 콘텐츠 업로드 실패:', error);
|
|
alert('파일 업로드에 실패했습니다. 다시 시도해주세요.');
|
|
}
|
|
};
|
|
|
|
const handleCsvFileUpload = async (file: File) => {
|
|
try {
|
|
// CSV 파일 파싱 (Promise로 감싸서 파일 읽기 완료 대기)
|
|
const parseCsvFile = (): Promise<string[][]> => {
|
|
return new Promise((resolve, reject) => {
|
|
const reader = new FileReader();
|
|
|
|
reader.onload = (event) => {
|
|
const text = event.target?.result as string;
|
|
if (!text) {
|
|
reject(new Error('파일을 읽을 수 없습니다.'));
|
|
return;
|
|
}
|
|
|
|
try {
|
|
// CSV 파싱 함수
|
|
const parseCsv = (csvText: string): string[][] => {
|
|
const lines: string[][] = [];
|
|
let currentLine: string[] = [];
|
|
let currentField = '';
|
|
let inQuotes = false;
|
|
|
|
for (let i = 0; i < csvText.length; i++) {
|
|
const char = csvText[i];
|
|
const nextChar = csvText[i + 1];
|
|
|
|
if (char === '"') {
|
|
if (inQuotes && nextChar === '"') {
|
|
currentField += '"';
|
|
i++;
|
|
} else {
|
|
inQuotes = !inQuotes;
|
|
}
|
|
} else if (char === ',' && !inQuotes) {
|
|
currentLine.push(currentField.trim());
|
|
currentField = '';
|
|
} else if ((char === '\n' || char === '\r') && !inQuotes) {
|
|
if (char === '\r' && nextChar === '\n') {
|
|
i++;
|
|
}
|
|
if (currentField || currentLine.length > 0) {
|
|
currentLine.push(currentField.trim());
|
|
lines.push(currentLine);
|
|
currentLine = [];
|
|
currentField = '';
|
|
}
|
|
} else {
|
|
currentField += char;
|
|
}
|
|
}
|
|
|
|
if (currentField || currentLine.length > 0) {
|
|
currentLine.push(currentField.trim());
|
|
lines.push(currentLine);
|
|
}
|
|
|
|
return lines;
|
|
};
|
|
|
|
const parsed = parseCsv(text);
|
|
|
|
if (parsed.length === 0) {
|
|
reject(new Error('CSV 파일이 비어있습니다.'));
|
|
return;
|
|
}
|
|
|
|
resolve(parsed);
|
|
} catch (parseError) {
|
|
reject(new Error('CSV 파일을 읽는 중 오류가 발생했습니다.'));
|
|
}
|
|
};
|
|
|
|
reader.onerror = () => {
|
|
reject(new Error('파일을 읽는 중 오류가 발생했습니다.'));
|
|
};
|
|
|
|
reader.readAsText(file, 'UTF-8');
|
|
});
|
|
};
|
|
|
|
// CSV 파일 파싱
|
|
const parsed = await parseCsvFile();
|
|
|
|
// 첫 번째 줄을 헤더로 사용
|
|
const headers = parsed[0];
|
|
const rows = parsed.slice(1);
|
|
|
|
setCsvHeaders(headers);
|
|
setCsvRows(rows);
|
|
setCsvData(parsed);
|
|
|
|
// 단일 파일 업로드
|
|
const uploadResponse = await apiService.uploadFile(file);
|
|
|
|
// 응답에서 fileKey 추출
|
|
const fileKey = uploadResponse.data?.fileKey
|
|
|| uploadResponse.data?.key
|
|
|| uploadResponse.data?.id
|
|
|| uploadResponse.data?.fileId
|
|
|| uploadResponse.data?.imageKey
|
|
|| (uploadResponse.data?.data && (uploadResponse.data.data.key || uploadResponse.data.data.fileKey))
|
|
|| null;
|
|
|
|
if (fileKey) {
|
|
// 이전 파일 삭제하고 새 파일로 교체
|
|
setQuestionFileObject(file);
|
|
setQuestionFileKey(fileKey);
|
|
setQuestionFileCount(1);
|
|
setExistingQuestionFile(null);
|
|
} else {
|
|
throw new Error('파일 업로드는 완료되었지만 fileKey를 받지 못했습니다.');
|
|
}
|
|
} catch (error) {
|
|
console.error('학습 평가 문제 업로드 실패:', error);
|
|
const errorMessage = error instanceof Error ? error.message : '파일 업로드에 실패했습니다. 다시 시도해주세요.';
|
|
alert(errorMessage);
|
|
}
|
|
};
|
|
|
|
// 파일 교체 확인 모달 핸들러
|
|
const handleFileReplaceConfirm = () => {
|
|
if (!pendingFileType) return;
|
|
|
|
setIsFileReplaceModalOpen(false);
|
|
|
|
// 파일 선택 다이얼로그 열기
|
|
if (pendingFileType === 'video' && videoFileInputRef.current) {
|
|
videoFileInputRef.current.click();
|
|
} else if (pendingFileType === 'vr' && vrFileInputRef.current) {
|
|
vrFileInputRef.current.click();
|
|
} else if (pendingFileType === 'csv' && csvFileInputRef.current) {
|
|
csvFileInputRef.current.click();
|
|
}
|
|
|
|
setPendingFiles([]);
|
|
setPendingFileType(null);
|
|
};
|
|
|
|
const handleFileReplaceCancel = () => {
|
|
setIsFileReplaceModalOpen(false);
|
|
setPendingFiles([]);
|
|
setPendingFileType(null);
|
|
};
|
|
|
|
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;
|
|
}
|
|
|
|
// 이미 업로드된 fileKey 배열 사용
|
|
let videoUrl: string | undefined;
|
|
let webglUrl: string | undefined;
|
|
let csvUrl: string | undefined;
|
|
|
|
// 강좌 영상 fileKey (새로 업로드된 파일이 있는 경우)
|
|
if (courseVideoFileKeys.length > 0) {
|
|
videoUrl = courseVideoFileKeys[0]; // 첫 번째 fileKey 사용
|
|
// TODO: API가 배열을 받는 경우 courseVideoFileKeys 배열 전체를 저장해야 함
|
|
} else if (existingVideoFiles.length > 0 && existingVideoFiles[0].url) {
|
|
// 기존 파일 URL 유지
|
|
videoUrl = existingVideoFiles[0].url;
|
|
} else if (existingVideoFiles.length > 0 && existingVideoFiles[0].fileKey) {
|
|
// 기존 파일 fileKey 사용
|
|
videoUrl = existingVideoFiles[0].fileKey;
|
|
}
|
|
|
|
// VR 콘텐츠 fileKey (새로 업로드된 파일이 있는 경우)
|
|
if (vrContentFileKeys.length > 0) {
|
|
webglUrl = vrContentFileKeys[0]; // 첫 번째 fileKey 사용
|
|
// TODO: API가 배열을 받는 경우 vrContentFileKeys 배열 전체를 저장해야 함
|
|
} else if (existingVrFiles.length > 0 && existingVrFiles[0].url) {
|
|
// 기존 파일 URL 유지
|
|
webglUrl = existingVrFiles[0].url;
|
|
} else if (existingVrFiles.length > 0 && existingVrFiles[0].fileKey) {
|
|
// 기존 파일 fileKey 사용
|
|
webglUrl = existingVrFiles[0].fileKey;
|
|
}
|
|
|
|
// 학습 평가 문제 fileKey (새로 업로드된 파일이 있는 경우)
|
|
if (questionFileKey) {
|
|
csvUrl = questionFileKey;
|
|
} else if (existingQuestionFile?.fileKey) {
|
|
// 기존 파일 fileKey 사용
|
|
csvUrl = 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) {
|
|
setIsNoChangesModalOpen(true);
|
|
setIsSaving(false);
|
|
return;
|
|
}
|
|
|
|
// 강좌 수정 API 호출 (PATCH /lectures/{id})
|
|
await apiService.updateLecture(params.id as string, requestBody);
|
|
|
|
// 성공 시 강좌 리스트로 이동 (토스트는 리스트 페이지에서 표시)
|
|
router.push('/admin/lessons?updated=true');
|
|
} 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"
|
|
onClick={(e) => {
|
|
// 기존 파일이나 새로 첨부한 파일이 있으면 확인 모달 표시
|
|
if (existingVideoFiles.length > 0 || courseVideoFiles.length > 0 || courseVideoFileKeys.length > 0) {
|
|
e.preventDefault();
|
|
setPendingFiles([]);
|
|
setPendingFileType('video');
|
|
setIsFileReplaceModalOpen(true);
|
|
}
|
|
}}
|
|
>
|
|
<span>첨부</span>
|
|
<input
|
|
ref={videoFileInputRef}
|
|
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 MAX_COUNT = 10; // 최대 10개
|
|
const validFiles: File[] = [];
|
|
const oversizedFiles: string[] = [];
|
|
const invalidTypeFiles: string[] = [];
|
|
|
|
Array.from(files).forEach((file) => {
|
|
// mp4 파일인지 확인
|
|
if (!file.name.toLowerCase().endsWith('.mp4')) {
|
|
invalidTypeFiles.push(file.name);
|
|
return;
|
|
}
|
|
// 각 파일이 30MB 이하인지 검사
|
|
if (file.size <= MAX_SIZE) {
|
|
validFiles.push(file);
|
|
} else {
|
|
oversizedFiles.push(file.name);
|
|
}
|
|
});
|
|
|
|
// 파일 타입 오류
|
|
if (invalidTypeFiles.length > 0) {
|
|
alert(`다음 파일은 MP4 형식만 가능합니다:\n${invalidTypeFiles.join('\n')}`);
|
|
}
|
|
|
|
// 30MB 초과 파일이 있으면 알림
|
|
if (oversizedFiles.length > 0) {
|
|
alert(`다음 파일은 30MB 이하여야 합니다:\n${oversizedFiles.join('\n')}`);
|
|
}
|
|
|
|
// 파일 개수 제한 확인
|
|
const totalCount = existingVideoFiles.length + courseVideoFiles.length + validFiles.length;
|
|
if (totalCount > MAX_COUNT) {
|
|
const currentCount = existingVideoFiles.length + courseVideoFiles.length;
|
|
const availableCount = MAX_COUNT - currentCount;
|
|
alert(`강좌 영상은 최대 ${MAX_COUNT}개까지 첨부할 수 있습니다. (현재 ${currentCount}개, 추가 가능 ${availableCount > 0 ? availableCount : 0}개)`);
|
|
e.target.value = '';
|
|
return;
|
|
}
|
|
|
|
// 30MB 초과 파일이나 잘못된 타입 파일만 있는 경우 중단
|
|
if (validFiles.length === 0 && (oversizedFiles.length > 0 || invalidTypeFiles.length > 0)) {
|
|
e.target.value = '';
|
|
return;
|
|
}
|
|
|
|
if (validFiles.length > 0) {
|
|
// 기존 파일 삭제 후 새 파일 업로드
|
|
setExistingVideoFiles([]);
|
|
handleVideoFileUpload(validFiles);
|
|
}
|
|
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));
|
|
setCourseVideoFileKeys(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"
|
|
onClick={(e) => {
|
|
// 기존 파일이나 새로 첨부한 파일이 있으면 확인 모달 표시
|
|
if (existingVrFiles.length > 0 || vrContentFiles.length > 0 || vrContentFileKeys.length > 0) {
|
|
e.preventDefault();
|
|
setPendingFiles([]);
|
|
setPendingFileType('vr');
|
|
setIsFileReplaceModalOpen(true);
|
|
}
|
|
}}
|
|
>
|
|
<span>첨부</span>
|
|
<input
|
|
ref={vrFileInputRef}
|
|
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 MAX_COUNT = 10; // 최대 10개
|
|
const validFiles: File[] = [];
|
|
const oversizedFiles: string[] = [];
|
|
const invalidTypeFiles: string[] = [];
|
|
|
|
Array.from(files).forEach((file) => {
|
|
// zip 파일인지 확인
|
|
if (!file.name.toLowerCase().endsWith('.zip')) {
|
|
invalidTypeFiles.push(file.name);
|
|
return;
|
|
}
|
|
// 각 파일이 30MB 이하인지 검사
|
|
if (file.size <= MAX_SIZE) {
|
|
validFiles.push(file);
|
|
} else {
|
|
oversizedFiles.push(file.name);
|
|
}
|
|
});
|
|
|
|
// 파일 타입 오류
|
|
if (invalidTypeFiles.length > 0) {
|
|
alert(`다음 파일은 ZIP 형식만 가능합니다:\n${invalidTypeFiles.join('\n')}`);
|
|
}
|
|
|
|
// 30MB 초과 파일이 있으면 알림
|
|
if (oversizedFiles.length > 0) {
|
|
alert(`다음 파일은 30MB 이하여야 합니다:\n${oversizedFiles.join('\n')}`);
|
|
}
|
|
|
|
// 파일 개수 제한 확인
|
|
const totalCount = existingVrFiles.length + vrContentFiles.length + validFiles.length;
|
|
if (totalCount > MAX_COUNT) {
|
|
const currentCount = existingVrFiles.length + vrContentFiles.length;
|
|
const availableCount = MAX_COUNT - currentCount;
|
|
alert(`VR 콘텐츠는 최대 ${MAX_COUNT}개까지 첨부할 수 있습니다. (현재 ${currentCount}개, 추가 가능 ${availableCount > 0 ? availableCount : 0}개)`);
|
|
e.target.value = '';
|
|
return;
|
|
}
|
|
|
|
// 30MB 초과 파일이나 잘못된 타입 파일만 있는 경우 중단
|
|
if (validFiles.length === 0 && (oversizedFiles.length > 0 || invalidTypeFiles.length > 0)) {
|
|
e.target.value = '';
|
|
return;
|
|
}
|
|
|
|
if (validFiles.length > 0) {
|
|
// 기존 파일 삭제 후 새 파일 업로드
|
|
setExistingVrFiles([]);
|
|
handleVrFileUpload(validFiles);
|
|
}
|
|
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));
|
|
setVrContentFileKeys(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"
|
|
onClick={(e) => {
|
|
// 기존 파일이나 새로 첨부한 파일이 있으면 확인 모달 표시
|
|
if (questionFileObject || questionFileKey || existingQuestionFile) {
|
|
e.preventDefault();
|
|
setPendingFiles([]);
|
|
setPendingFileType('csv');
|
|
setIsFileReplaceModalOpen(true);
|
|
}
|
|
}}
|
|
>
|
|
<span>첨부</span>
|
|
<input
|
|
ref={csvFileInputRef}
|
|
type="file"
|
|
accept=".csv"
|
|
className="hidden"
|
|
onChange={async (e) => {
|
|
const files = e.target.files;
|
|
if (!files || files.length === 0) return;
|
|
|
|
const file = files[0];
|
|
|
|
// CSV 파일만 허용
|
|
if (!file.name.toLowerCase().endsWith('.csv')) {
|
|
alert('CSV 파일 형식만 첨부할 수 있습니다.');
|
|
e.target.value = '';
|
|
return;
|
|
}
|
|
|
|
// 기존 파일 삭제 후 새 파일 업로드
|
|
setExistingQuestionFile(null);
|
|
await handleCsvFileUpload(file);
|
|
e.target.value = '';
|
|
}}
|
|
/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div className="border border-[#dee1e6] rounded-[8px] bg-gray-50">
|
|
{csvData.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">
|
|
{/* 파일 정보 및 삭제 버튼 */}
|
|
{(existingQuestionFile || questionFileObject) && (
|
|
<div className="h-[40px] px-[20px] py-[12px] flex items-center gap-[12px] bg-white border-b border-[#dee1e6]">
|
|
<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);
|
|
setQuestionFileKey(null);
|
|
setExistingQuestionFile(null);
|
|
setQuestionFileCount(0);
|
|
setCsvData([]);
|
|
setCsvHeaders([]);
|
|
setCsvRows([]);
|
|
}}
|
|
className="size-[16px] flex items-center justify-center cursor-pointer hover:opacity-70 transition-opacity shrink-0"
|
|
aria-label="파일 삭제"
|
|
>
|
|
<CloseXOSvg />
|
|
</button>
|
|
</div>
|
|
)}
|
|
{/* CSV 표 */}
|
|
<div className="m-[24px] border border-[#dee1e6] border-solid relative bg-white max-h-[400px] overflow-y-auto csv-table-scroll">
|
|
<div className="content-stretch flex flex-col items-start justify-center relative size-full">
|
|
{/* 헤더 */}
|
|
<div className="bg-[#f1f8ff] content-stretch flex h-[48px] items-center overflow-clip relative shrink-0 w-full sticky top-0 z-10">
|
|
{csvHeaders.map((header, index) => {
|
|
const isLast = index === csvHeaders.length - 1;
|
|
return (
|
|
<div
|
|
key={index}
|
|
className={`border-[#dee1e6] ${
|
|
isLast ? '' : 'border-[0px_1px_0px_0px]'
|
|
} border-solid box-border content-stretch flex gap-[10px] h-full items-center justify-center px-[8px] py-[12px] relative shrink-0 ${
|
|
index === 0 ? 'w-[48px]' : index === 1 ? 'basis-0 grow min-h-px min-w-px' : 'w-[140px]'
|
|
}`}
|
|
>
|
|
<div className="flex flex-col font-['Pretendard:SemiBold',sans-serif] justify-center leading-[0] not-italic relative shrink-0 text-[#4c5561] text-[14px] text-nowrap">
|
|
<p className="leading-[1.5] whitespace-pre">{header || `열 ${index + 1}`}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* 데이터 행 */}
|
|
{csvRows.map((row, rowIndex) => (
|
|
<div
|
|
key={rowIndex}
|
|
className="border-[#dee1e6] border-[1px_0px_0px] border-solid h-[48px] relative shrink-0 w-full"
|
|
>
|
|
<div className="content-stretch flex h-[48px] items-start overflow-clip relative rounded-[inherit] w-full">
|
|
{csvHeaders.map((_, colIndex) => {
|
|
const isLast = colIndex === csvHeaders.length - 1;
|
|
const cellValue = row[colIndex] || '';
|
|
return (
|
|
<div
|
|
key={colIndex}
|
|
className={`border-[#dee1e6] ${
|
|
isLast ? '' : 'border-[0px_1px_0px_0px]'
|
|
} border-solid box-border content-stretch flex flex-col gap-[4px] items-center justify-center px-[8px] py-[12px] relative shrink-0 ${
|
|
colIndex === 0 ? 'w-[48px]' : colIndex === 1 ? 'basis-0 grow min-h-px min-w-px' : 'w-[140px]'
|
|
}`}
|
|
>
|
|
<p className="font-['Pretendard:Medium',sans-serif] leading-[1.5] not-italic relative shrink-0 text-[#1b2027] text-[15px] text-nowrap whitespace-pre">
|
|
{cellValue}
|
|
</p>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</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>
|
|
|
|
{/* 파일 교체 확인 모달 */}
|
|
{isFileReplaceModalOpen && (
|
|
<div className="fixed inset-0 z-[60] flex items-center justify-center">
|
|
<div
|
|
className="absolute inset-0 bg-black/40"
|
|
onClick={handleFileReplaceCancel}
|
|
aria-hidden="true"
|
|
/>
|
|
<div className="relative z-10 bg-white rounded-[8px] p-[24px] shadow-[0px_8px_20px_0px_rgba(0,0,0,0.06),0px_24px_60px_0px_rgba(0,0,0,0.12)] flex flex-col gap-[32px] items-end justify-end min-w-[500px]">
|
|
<div className="flex flex-col gap-[16px] items-start justify-center w-full">
|
|
<div className="flex gap-[8px] items-start w-full">
|
|
<p className="text-[18px] font-semibold leading-[1.5] text-[#333c47]">
|
|
이미 첨부된 파일이 있습니다.
|
|
</p>
|
|
</div>
|
|
<div className="flex gap-[8px] items-start w-full">
|
|
<div className="text-[15px] font-normal leading-[1.5] text-[#4c5561]">
|
|
<p className="mb-0">새 파일을 첨부하면 기존 파일이 삭제됩니다.</p>
|
|
<p>계속 진행하시겠습니까?</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-[8px] items-center justify-end shrink-0">
|
|
<button
|
|
type="button"
|
|
onClick={handleFileReplaceCancel}
|
|
className="bg-[#f1f3f5] h-[40px] rounded-[8px] px-[8px] flex items-center justify-center shrink-0 w-[80px] hover:bg-[#e9ecef] cursor-pointer transition-colors"
|
|
>
|
|
<p className="text-[16px] font-semibold leading-[1.5] text-[#4c5561] text-center whitespace-pre">
|
|
취소
|
|
</p>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={handleFileReplaceConfirm}
|
|
className="bg-[#1f2b91] h-[40px] rounded-[8px] px-[8px] flex items-center justify-center shrink-0 w-[80px] hover:bg-[#1a2478] cursor-pointer transition-colors"
|
|
>
|
|
<p className="text-[16px] font-semibold leading-[1.5] text-white text-center whitespace-pre">
|
|
확인
|
|
</p>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 변경사항 없음 모달 */}
|
|
<NoChangesModal
|
|
open={isNoChangesModalOpen}
|
|
onClose={() => setIsNoChangesModalOpen(false)}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|