970 lines
46 KiB
TypeScript
970 lines
46 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";
|
||
|
|
|
||
|
|
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>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|