공지사항 삭제등록 등11
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useMemo, useEffect } from "react";
|
||||
import { useState, useMemo, useEffect, useRef } from "react";
|
||||
import AdminSidebar from "@/app/components/AdminSidebar";
|
||||
import CourseRegistrationModal from "./CourseRegistrationModal";
|
||||
import ChevronDownSvg from "@/app/svgs/chevrondownsvg";
|
||||
@@ -31,6 +31,8 @@ export default function AdminCoursesPage() {
|
||||
const [editingCourse, setEditingCourse] = useState<Course | null>(null);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [showToast, setShowToast] = useState(false);
|
||||
const prevModalOpenRef = useRef(false);
|
||||
const shouldRefreshRef = useRef(false);
|
||||
|
||||
// API에서 과목 리스트 가져오기
|
||||
useEffect(() => {
|
||||
@@ -70,35 +72,9 @@ export default function AdminCoursesPage() {
|
||||
}, [sortedCourses, currentPage]);
|
||||
|
||||
const handleSaveCourse = async (courseName: string, instructorName: string) => {
|
||||
if (editingCourse) {
|
||||
// 수정 모드 - TODO: API 호출로 변경 필요
|
||||
setCourses(prev => prev.map(course =>
|
||||
course.id === editingCourse.id
|
||||
? { ...course, courseName, instructorName }
|
||||
: course
|
||||
));
|
||||
} else {
|
||||
// 등록 모드 - TODO: API 호출로 변경 필요
|
||||
const newCourse: Course = {
|
||||
id: String(Date.now()),
|
||||
courseName,
|
||||
instructorName,
|
||||
createdAt: new Date().toISOString().split('T')[0],
|
||||
createdBy: '', // API에서 받아오도록 변경 필요
|
||||
hasLessons: false, // 기본값: 미포함
|
||||
};
|
||||
setCourses(prev => [...prev, newCourse]);
|
||||
}
|
||||
shouldRefreshRef.current = true; // 새로고침 플래그 설정
|
||||
setIsModalOpen(false);
|
||||
setEditingCourse(null);
|
||||
|
||||
// 저장 후 리스트 새로고침
|
||||
try {
|
||||
const data = await getCourses();
|
||||
setCourses(data);
|
||||
} catch (error) {
|
||||
console.error('과목 리스트 새로고침 오류:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRowClick = (course: Course) => {
|
||||
@@ -117,25 +93,38 @@ export default function AdminCoursesPage() {
|
||||
};
|
||||
|
||||
const handleDeleteCourse = async () => {
|
||||
if (editingCourse) {
|
||||
// TODO: API 호출로 삭제 처리 필요
|
||||
setCourses(prev => prev.filter(course => course.id !== editingCourse.id));
|
||||
setEditingCourse(null);
|
||||
setShowToast(true);
|
||||
setTimeout(() => {
|
||||
setShowToast(false);
|
||||
}, 3000);
|
||||
|
||||
// 삭제 후 리스트 새로고침
|
||||
try {
|
||||
const data = await getCourses();
|
||||
setCourses(data);
|
||||
} catch (error) {
|
||||
console.error('과목 리스트 새로고침 오류:', error);
|
||||
}
|
||||
}
|
||||
shouldRefreshRef.current = true; // 새로고침 플래그 설정
|
||||
setEditingCourse(null);
|
||||
setShowToast(true);
|
||||
setTimeout(() => {
|
||||
setShowToast(false);
|
||||
}, 3000);
|
||||
};
|
||||
|
||||
// 모달이 닫힌 후 리스트 새로고침
|
||||
useEffect(() => {
|
||||
// 모달이 열렸다가 닫힐 때, 그리고 새로고침 플래그가 설정되어 있을 때만 새로고침
|
||||
if (prevModalOpenRef.current && !isModalOpen && shouldRefreshRef.current) {
|
||||
shouldRefreshRef.current = false; // 플래그 리셋
|
||||
|
||||
async function refreshList() {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const data = await getCourses();
|
||||
console.log('📋 [AdminCoursesPage] 새로고침된 데이터:', data);
|
||||
console.log('📋 [AdminCoursesPage] 새로고침된 데이터 개수:', data.length);
|
||||
setCourses(data);
|
||||
} catch (error) {
|
||||
console.error('과목 리스트 새로고침 오류:', error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}
|
||||
refreshList();
|
||||
}
|
||||
prevModalOpenRef.current = isModalOpen;
|
||||
}, [isModalOpen]);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col bg-white">
|
||||
{/* 메인 레이아웃 */}
|
||||
|
||||
@@ -16,6 +16,9 @@ export default function LessonEditPage() {
|
||||
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 [showToast, setShowToast] = useState(false);
|
||||
|
||||
@@ -184,11 +187,134 @@ export default function LessonEditPage() {
|
||||
|
||||
// 기존 평가 문제 파일
|
||||
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: data.csvKey,
|
||||
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);
|
||||
@@ -365,82 +491,94 @@ export default function LessonEditPage() {
|
||||
|
||||
const handleCsvFileUpload = async (file: File) => {
|
||||
try {
|
||||
// CSV 파일 파싱
|
||||
const reader = new FileReader();
|
||||
reader.onload = (event) => {
|
||||
const text = event.target?.result as string;
|
||||
if (!text) return;
|
||||
// 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;
|
||||
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];
|
||||
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 (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);
|
||||
currentLine = [];
|
||||
currentField = '';
|
||||
}
|
||||
} else {
|
||||
currentField += char;
|
||||
|
||||
return lines;
|
||||
};
|
||||
|
||||
const parsed = parseCsv(text);
|
||||
|
||||
if (parsed.length === 0) {
|
||||
reject(new Error('CSV 파일이 비어있습니다.'));
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (currentField || currentLine.length > 0) {
|
||||
currentLine.push(currentField.trim());
|
||||
lines.push(currentLine);
|
||||
resolve(parsed);
|
||||
} catch (parseError) {
|
||||
reject(new Error('CSV 파일을 읽는 중 오류가 발생했습니다.'));
|
||||
}
|
||||
|
||||
return lines;
|
||||
};
|
||||
|
||||
const parsed = parseCsv(text);
|
||||
|
||||
if (parsed.length === 0) {
|
||||
alert('CSV 파일이 비어있습니다.');
|
||||
return;
|
||||
}
|
||||
reader.onerror = () => {
|
||||
reject(new Error('파일을 읽는 중 오류가 발생했습니다.'));
|
||||
};
|
||||
|
||||
// 첫 번째 줄을 헤더로 사용
|
||||
const headers = parsed[0];
|
||||
const rows = parsed.slice(1);
|
||||
|
||||
setCsvHeaders(headers);
|
||||
setCsvRows(rows);
|
||||
setCsvData(parsed);
|
||||
} catch (parseError) {
|
||||
console.error('CSV 파싱 오류:', parseError);
|
||||
alert('CSV 파일을 읽는 중 오류가 발생했습니다.');
|
||||
}
|
||||
reader.readAsText(file, 'UTF-8');
|
||||
});
|
||||
};
|
||||
|
||||
reader.onerror = () => {
|
||||
alert('파일을 읽는 중 오류가 발생했습니다.');
|
||||
};
|
||||
// CSV 파일 파싱
|
||||
const parsed = await parseCsvFile();
|
||||
|
||||
// 첫 번째 줄을 헤더로 사용
|
||||
const headers = parsed[0];
|
||||
const rows = parsed.slice(1);
|
||||
|
||||
reader.readAsText(file, 'UTF-8');
|
||||
setCsvHeaders(headers);
|
||||
setCsvRows(rows);
|
||||
setCsvData(parsed);
|
||||
|
||||
// 단일 파일 업로드
|
||||
const uploadResponse = await apiService.uploadFile(file);
|
||||
@@ -465,22 +603,24 @@ export default function LessonEditPage() {
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('학습 평가 문제 업로드 실패:', error);
|
||||
alert('파일 업로드에 실패했습니다. 다시 시도해주세요.');
|
||||
const errorMessage = error instanceof Error ? error.message : '파일 업로드에 실패했습니다. 다시 시도해주세요.';
|
||||
alert(errorMessage);
|
||||
}
|
||||
};
|
||||
|
||||
// 파일 교체 확인 모달 핸들러
|
||||
const handleFileReplaceConfirm = async () => {
|
||||
if (!pendingFiles.length || !pendingFileType) return;
|
||||
const handleFileReplaceConfirm = () => {
|
||||
if (!pendingFileType) return;
|
||||
|
||||
setIsFileReplaceModalOpen(false);
|
||||
|
||||
if (pendingFileType === 'video') {
|
||||
await handleVideoFileUpload(pendingFiles);
|
||||
} else if (pendingFileType === 'vr') {
|
||||
await handleVrFileUpload(pendingFiles);
|
||||
} else if (pendingFileType === 'csv' && pendingFiles.length > 0) {
|
||||
await handleCsvFileUpload(pendingFiles[0]);
|
||||
// 파일 선택 다이얼로그 열기
|
||||
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([]);
|
||||
@@ -634,9 +774,9 @@ export default function LessonEditPage() {
|
||||
// 성공 시 토스트 표시
|
||||
setShowToast(true);
|
||||
|
||||
// 토스트 표시 후 상세 페이지로 이동
|
||||
// 토스트 표시 후 상세 페이지로 이동 (새로고침하여 최신 데이터 표시)
|
||||
setTimeout(() => {
|
||||
router.push(`/admin/lessons/${params.id}`);
|
||||
router.push(`/admin/lessons/${params.id}?refresh=${Date.now()}`);
|
||||
}, 1500);
|
||||
} catch (error) {
|
||||
console.error('강좌 수정 실패:', error);
|
||||
@@ -858,9 +998,21 @@ export default function LessonEditPage() {
|
||||
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">
|
||||
<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"
|
||||
@@ -916,16 +1068,8 @@ export default function LessonEditPage() {
|
||||
}
|
||||
|
||||
if (validFiles.length > 0) {
|
||||
// 새로 첨부한 파일이 있으면 확인 모달 표시
|
||||
if (courseVideoFiles.length > 0 || courseVideoFileKeys.length > 0) {
|
||||
setPendingFiles(validFiles);
|
||||
setPendingFileType('video');
|
||||
setIsFileReplaceModalOpen(true);
|
||||
e.target.value = '';
|
||||
return;
|
||||
}
|
||||
|
||||
// 새로 첨부한 파일이 없으면 바로 업로드
|
||||
// 기존 파일 삭제 후 새 파일 업로드
|
||||
setExistingVideoFiles([]);
|
||||
handleVideoFileUpload(validFiles);
|
||||
}
|
||||
e.target.value = '';
|
||||
@@ -948,7 +1092,7 @@ export default function LessonEditPage() {
|
||||
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} (기존)
|
||||
{file.fileName}
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
@@ -1002,9 +1146,21 @@ export default function LessonEditPage() {
|
||||
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">
|
||||
<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"
|
||||
@@ -1060,16 +1216,8 @@ export default function LessonEditPage() {
|
||||
}
|
||||
|
||||
if (validFiles.length > 0) {
|
||||
// 새로 첨부한 파일이 있으면 확인 모달 표시
|
||||
if (vrContentFiles.length > 0 || vrContentFileKeys.length > 0) {
|
||||
setPendingFiles(validFiles);
|
||||
setPendingFileType('vr');
|
||||
setIsFileReplaceModalOpen(true);
|
||||
e.target.value = '';
|
||||
return;
|
||||
}
|
||||
|
||||
// 새로 첨부한 파일이 없으면 바로 업로드
|
||||
// 기존 파일 삭제 후 새 파일 업로드
|
||||
setExistingVrFiles([]);
|
||||
handleVrFileUpload(validFiles);
|
||||
}
|
||||
e.target.value = '';
|
||||
@@ -1092,7 +1240,7 @@ export default function LessonEditPage() {
|
||||
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} (기존)
|
||||
{file.fileName}
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
@@ -1147,9 +1295,21 @@ export default function LessonEditPage() {
|
||||
</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">
|
||||
<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"
|
||||
@@ -1166,100 +1326,9 @@ export default function LessonEditPage() {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// CSV 파일 파싱
|
||||
const reader = new FileReader();
|
||||
reader.onload = (event) => {
|
||||
const text = event.target?.result as string;
|
||||
if (!text) 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) {
|
||||
alert('CSV 파일이 비어있습니다.');
|
||||
return;
|
||||
}
|
||||
|
||||
// 첫 번째 줄을 헤더로 사용
|
||||
const headers = parsed[0];
|
||||
const rows = parsed.slice(1);
|
||||
|
||||
setCsvHeaders(headers);
|
||||
setCsvRows(rows);
|
||||
setCsvData(parsed);
|
||||
} catch (parseError) {
|
||||
console.error('CSV 파싱 오류:', parseError);
|
||||
alert('CSV 파일을 읽는 중 오류가 발생했습니다.');
|
||||
}
|
||||
};
|
||||
|
||||
reader.onerror = () => {
|
||||
alert('파일을 읽는 중 오류가 발생했습니다.');
|
||||
};
|
||||
|
||||
reader.readAsText(file, 'UTF-8');
|
||||
|
||||
// 기존 파일이 있으면 확인 모달 표시
|
||||
if (questionFileObject || questionFileKey) {
|
||||
setPendingFiles([file]);
|
||||
setPendingFileType('csv');
|
||||
setIsFileReplaceModalOpen(true);
|
||||
e.target.value = '';
|
||||
return;
|
||||
}
|
||||
|
||||
// 기존 파일이 없으면 바로 업로드
|
||||
await handleCsvFileUpload(file);
|
||||
} catch (error) {
|
||||
console.error('학습 평가 문제 업로드 실패:', error);
|
||||
alert('파일 업로드에 실패했습니다. 다시 시도해주세요.');
|
||||
}
|
||||
// input 초기화 (같은 파일 다시 선택 가능하도록)
|
||||
// 기존 파일 삭제 후 새 파일 업로드
|
||||
setExistingQuestionFile(null);
|
||||
await handleCsvFileUpload(file);
|
||||
e.target.value = '';
|
||||
}}
|
||||
/>
|
||||
@@ -1279,7 +1348,7 @@ export default function LessonEditPage() {
|
||||
{(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}
|
||||
{existingQuestionFile ? existingQuestionFile.fileName : questionFileObject?.name}
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { useParams, useRouter, useSearchParams } from 'next/navigation';
|
||||
import AdminSidebar from '@/app/components/AdminSidebar';
|
||||
import BackArrowSvg from '@/app/svgs/backarrow';
|
||||
import DownloadIcon from '@/app/svgs/downloadicon';
|
||||
@@ -42,11 +42,14 @@ type CourseDetail = {
|
||||
videoFiles: VideoFile[];
|
||||
vrFiles: VrFile[];
|
||||
quizData: QuizQuestion[];
|
||||
csvKey?: string;
|
||||
csvUrl?: string;
|
||||
};
|
||||
|
||||
export default function AdminCourseDetailPage() {
|
||||
const params = useParams();
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const [course, setCourse] = useState<CourseDetail | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
@@ -164,23 +167,99 @@ export default function AdminCourseDetailPage() {
|
||||
|
||||
// fileKey 배열이 있으면 각각에 대해 파일 조회 API 호출
|
||||
if (videoFileKeys.length > 0) {
|
||||
// fileKey와 fileName 매핑 생성
|
||||
const videoFileMap = new Map<string, string>();
|
||||
if (data.videoFiles && Array.isArray(data.videoFiles)) {
|
||||
data.videoFiles.forEach((vf: any) => {
|
||||
const key = vf.fileKey || vf.key;
|
||||
if (key && (vf.fileName || vf.name)) {
|
||||
videoFileMap.set(key, vf.fileName || vf.name);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const videoFilePromises = videoFileKeys.map(async (fileKey, index) => {
|
||||
try {
|
||||
const fileUrl = await apiService.getFile(fileKey);
|
||||
return {
|
||||
id: String(index + 1),
|
||||
fileName: data.videoFiles?.[index]?.fileName || data.videoFiles?.[index]?.name || `강좌영상_${index + 1}.mp4`,
|
||||
fileSize: data.videoFiles?.[index]?.fileSize || '796.35 KB',
|
||||
fileKey: fileKey,
|
||||
url: fileUrl || undefined,
|
||||
};
|
||||
// 먼저 data에서 파일명 정보 확인 (fileKey로 매핑된 파일명 우선)
|
||||
let fileName = videoFileMap.get(fileKey)
|
||||
|| data.videoFiles?.[index]?.fileName
|
||||
|| data.videoFiles?.[index]?.name
|
||||
|| data.videoFileName
|
||||
|| `강좌영상_${index + 1}.mp4`;
|
||||
|
||||
// 파일 정보 가져오기 (크기, 파일명 등)
|
||||
const baseURL = process.env.NEXT_PUBLIC_API_BASE_URL || 'https://hrdi.coconutmeet.net';
|
||||
const token = typeof window !== 'undefined' ? localStorage.getItem('token') : null;
|
||||
const fileUrl = `${baseURL}/api/files/${encodeURIComponent(fileKey)}`;
|
||||
|
||||
const response = await fetch(fileUrl, {
|
||||
method: 'HEAD',
|
||||
headers: {
|
||||
...(token && { Authorization: `Bearer ${token}` }),
|
||||
},
|
||||
});
|
||||
|
||||
let fileSize = '0 KB';
|
||||
|
||||
if (response.ok) {
|
||||
// Content-Disposition 헤더에서 파일명 추출 (data에 없을 경우에만)
|
||||
if (!data.videoFiles?.[index]?.fileName && !data.videoFiles?.[index]?.name) {
|
||||
const contentDisposition = response.headers.get('Content-Disposition');
|
||||
if (contentDisposition) {
|
||||
const fileNameMatch = contentDisposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
|
||||
if (fileNameMatch && fileNameMatch[1]) {
|
||||
fileName = decodeURIComponent(fileNameMatch[1].replace(/['"]/g, ''));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Content-Length 헤더에서 파일 크기 추출
|
||||
const contentLength = response.headers.get('Content-Length');
|
||||
if (contentLength) {
|
||||
const sizeInBytes = parseInt(contentLength, 10);
|
||||
if (sizeInBytes > 0) {
|
||||
if (sizeInBytes < 1024) {
|
||||
fileSize = `${sizeInBytes} B`;
|
||||
} else if (sizeInBytes < 1024 * 1024) {
|
||||
fileSize = `${(sizeInBytes / 1024).toFixed(2)} KB`;
|
||||
} else {
|
||||
fileSize = `${(sizeInBytes / (1024 * 1024)).toFixed(2)} MB`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 실제 파일 URL 가져오기
|
||||
const blobUrl = await apiService.getFile(fileKey);
|
||||
|
||||
return {
|
||||
id: String(index + 1),
|
||||
fileName: fileName,
|
||||
fileSize: fileSize,
|
||||
fileKey: fileKey,
|
||||
url: blobUrl || undefined,
|
||||
};
|
||||
} else {
|
||||
// HEAD 요청 실패 시 파일명은 data에서 가져온 값 사용
|
||||
return {
|
||||
id: String(index + 1),
|
||||
fileName: fileName,
|
||||
fileSize: fileSize,
|
||||
fileKey: fileKey,
|
||||
url: undefined,
|
||||
};
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(`비디오 파일 ${index + 1} 조회 실패:`, err);
|
||||
// 조회 실패해도 fileKey는 저장
|
||||
// 조회 실패해도 fileKey는 저장, 파일명은 data에서 가져온 값 사용
|
||||
const fallbackFileName = data.videoFiles?.[index]?.fileName
|
||||
|| data.videoFiles?.[index]?.name
|
||||
|| data.videoFileName
|
||||
|| `강좌영상_${index + 1}.mp4`;
|
||||
|
||||
return {
|
||||
id: String(index + 1),
|
||||
fileName: data.videoFiles?.[index]?.fileName || data.videoFiles?.[index]?.name || `강좌영상_${index + 1}.mp4`,
|
||||
fileSize: data.videoFiles?.[index]?.fileSize || '796.35 KB',
|
||||
fileName: fallbackFileName,
|
||||
fileSize: '0 KB',
|
||||
fileKey: fileKey,
|
||||
url: undefined,
|
||||
};
|
||||
@@ -189,29 +268,6 @@ export default function AdminCourseDetailPage() {
|
||||
|
||||
const resolvedVideoFiles = await Promise.all(videoFilePromises);
|
||||
videoFiles.push(...resolvedVideoFiles);
|
||||
} else {
|
||||
// fileKey 배열이 없으면 기존 방식대로 처리
|
||||
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 파일 목록 구성 - fileKey 배열에서 파일 조회
|
||||
@@ -255,23 +311,101 @@ export default function AdminCourseDetailPage() {
|
||||
|
||||
// fileKey 배열이 있으면 각각에 대해 파일 조회 API 호출
|
||||
if (vrFileKeys.length > 0) {
|
||||
// fileKey와 fileName 매핑 생성
|
||||
const vrFileMap = new Map<string, string>();
|
||||
if (data.webglFiles && Array.isArray(data.webglFiles)) {
|
||||
data.webglFiles.forEach((vf: any) => {
|
||||
const key = vf.fileKey || vf.key;
|
||||
if (key && (vf.fileName || vf.name)) {
|
||||
vrFileMap.set(key, vf.fileName || vf.name);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const vrFilePromises = vrFileKeys.map(async (fileKey, index) => {
|
||||
try {
|
||||
const fileUrl = await apiService.getFile(fileKey);
|
||||
return {
|
||||
id: String(index + 1),
|
||||
fileName: data.webglFiles?.[index]?.fileName || data.webglFiles?.[index]?.name || data.vrFileName || data.webglFileName || `VR_콘텐츠_${index + 1}.zip`,
|
||||
fileSize: data.webglFiles?.[index]?.fileSize || '796.35 KB',
|
||||
fileKey: fileKey,
|
||||
url: fileUrl || undefined,
|
||||
};
|
||||
// 먼저 data에서 파일명 정보 확인 (fileKey로 매핑된 파일명 우선)
|
||||
let fileName = vrFileMap.get(fileKey)
|
||||
|| data.webglFiles?.[index]?.fileName
|
||||
|| data.webglFiles?.[index]?.name
|
||||
|| data.vrFileName
|
||||
|| data.webglFileName
|
||||
|| `VR_콘텐츠_${index + 1}.zip`;
|
||||
|
||||
// 파일 정보 가져오기 (크기, 파일명 등)
|
||||
const baseURL = process.env.NEXT_PUBLIC_API_BASE_URL || 'https://hrdi.coconutmeet.net';
|
||||
const token = typeof window !== 'undefined' ? localStorage.getItem('token') : null;
|
||||
const fileUrl = `${baseURL}/api/files/${encodeURIComponent(fileKey)}`;
|
||||
|
||||
const response = await fetch(fileUrl, {
|
||||
method: 'HEAD',
|
||||
headers: {
|
||||
...(token && { Authorization: `Bearer ${token}` }),
|
||||
},
|
||||
});
|
||||
|
||||
let fileSize = '0 KB';
|
||||
|
||||
if (response.ok) {
|
||||
// Content-Disposition 헤더에서 파일명 추출 (data에 없을 경우에만)
|
||||
if (!data.webglFiles?.[index]?.fileName && !data.webglFiles?.[index]?.name) {
|
||||
const contentDisposition = response.headers.get('Content-Disposition');
|
||||
if (contentDisposition) {
|
||||
const fileNameMatch = contentDisposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
|
||||
if (fileNameMatch && fileNameMatch[1]) {
|
||||
fileName = decodeURIComponent(fileNameMatch[1].replace(/['"]/g, ''));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Content-Length 헤더에서 파일 크기 추출
|
||||
const contentLength = response.headers.get('Content-Length');
|
||||
if (contentLength) {
|
||||
const sizeInBytes = parseInt(contentLength, 10);
|
||||
if (sizeInBytes > 0) {
|
||||
if (sizeInBytes < 1024) {
|
||||
fileSize = `${sizeInBytes} B`;
|
||||
} else if (sizeInBytes < 1024 * 1024) {
|
||||
fileSize = `${(sizeInBytes / 1024).toFixed(2)} KB`;
|
||||
} else {
|
||||
fileSize = `${(sizeInBytes / (1024 * 1024)).toFixed(2)} MB`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 실제 파일 URL 가져오기
|
||||
const blobUrl = await apiService.getFile(fileKey);
|
||||
|
||||
return {
|
||||
id: String(index + 1),
|
||||
fileName: fileName,
|
||||
fileSize: fileSize,
|
||||
fileKey: fileKey,
|
||||
url: blobUrl || undefined,
|
||||
};
|
||||
} else {
|
||||
// HEAD 요청 실패 시 파일명은 data에서 가져온 값 사용
|
||||
return {
|
||||
id: String(index + 1),
|
||||
fileName: fileName,
|
||||
fileSize: fileSize,
|
||||
fileKey: fileKey,
|
||||
url: undefined,
|
||||
};
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(`VR 파일 ${index + 1} 조회 실패:`, err);
|
||||
// 조회 실패해도 fileKey는 저장
|
||||
// 조회 실패해도 fileKey는 저장, 파일명은 data에서 가져온 값 사용
|
||||
const fallbackFileName = data.webglFiles?.[index]?.fileName
|
||||
|| data.webglFiles?.[index]?.name
|
||||
|| data.vrFileName
|
||||
|| data.webglFileName
|
||||
|| `VR_콘텐츠_${index + 1}.zip`;
|
||||
|
||||
return {
|
||||
id: String(index + 1),
|
||||
fileName: data.webglFiles?.[index]?.fileName || data.webglFiles?.[index]?.name || data.vrFileName || data.webglFileName || `VR_콘텐츠_${index + 1}.zip`,
|
||||
fileSize: data.webglFiles?.[index]?.fileSize || '796.35 KB',
|
||||
fileName: fallbackFileName,
|
||||
fileSize: '0 KB',
|
||||
fileKey: fileKey,
|
||||
url: undefined,
|
||||
};
|
||||
@@ -280,34 +414,153 @@ export default function AdminCourseDetailPage() {
|
||||
|
||||
const resolvedVrFiles = await Promise.all(vrFilePromises);
|
||||
vrFiles.push(...resolvedVrFiles);
|
||||
} else if (data.webglUrl || data.vrUrl) {
|
||||
// fileKey 배열이 없고 webglUrl이 있으면 기존 방식대로 처리
|
||||
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.csvKey || data.csvUrl || data.quizData) {
|
||||
// quizData가 이미 배열로 제공되는 경우
|
||||
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}',
|
||||
question: q.question || '',
|
||||
correctAnswer: q.correctAnswer || q.correct_answer || '',
|
||||
wrongAnswer1: q.wrongAnswer1 || q.wrong_answer1 || '',
|
||||
wrongAnswer2: q.wrongAnswer2 || q.wrong_answer2 || '',
|
||||
wrongAnswer3: q.wrongAnswer3 || q.wrong_answer3 || '',
|
||||
});
|
||||
});
|
||||
} else {
|
||||
// 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 rows = parsed.slice(1);
|
||||
|
||||
rows.forEach((row, index) => {
|
||||
if (row.length >= 5) {
|
||||
quizData.push({
|
||||
id: String(index + 1),
|
||||
number: index + 1,
|
||||
question: row[0] || '',
|
||||
correctAnswer: row[1] || '',
|
||||
wrongAnswer1: row[2] || '',
|
||||
wrongAnswer2: row[3] || '',
|
||||
wrongAnswer3: row[4] || '',
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
} else if (!csvResponse.ok) {
|
||||
console.error(`CSV 파일을 가져오는데 실패했습니다. (${csvResponse.status})`);
|
||||
}
|
||||
} catch (csvError) {
|
||||
console.error('CSV 파일 파싱 실패:', csvError);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -320,6 +573,8 @@ export default function AdminCourseDetailPage() {
|
||||
videoFiles: videoFiles,
|
||||
vrFiles: vrFiles,
|
||||
quizData: quizData,
|
||||
csvKey: data.csvKey,
|
||||
csvUrl: data.csvUrl,
|
||||
};
|
||||
|
||||
setCourse(courseDetail);
|
||||
@@ -332,7 +587,14 @@ export default function AdminCourseDetailPage() {
|
||||
};
|
||||
|
||||
fetchCourse();
|
||||
}, [params?.id]);
|
||||
}, [params?.id, searchParams]);
|
||||
|
||||
// refresh 쿼리 파라미터가 있으면 URL에서 제거
|
||||
useEffect(() => {
|
||||
if (searchParams.get('refresh')) {
|
||||
router.replace(`/admin/lessons/${params.id}`);
|
||||
}
|
||||
}, [searchParams, params?.id, router]);
|
||||
|
||||
// 토스트 자동 닫기
|
||||
useEffect(() => {
|
||||
@@ -451,6 +713,56 @@ export default function AdminCourseDetailPage() {
|
||||
}
|
||||
};
|
||||
|
||||
const handleCsvDownload = async () => {
|
||||
if (!course) return;
|
||||
|
||||
try {
|
||||
let fileKey: string | null = null;
|
||||
|
||||
// csvUrl에서 fileKey 추출
|
||||
if (course.csvUrl) {
|
||||
// 전체 URL인 경우 fileKey 추출
|
||||
if (course.csvUrl.startsWith('http://') || course.csvUrl.startsWith('https://')) {
|
||||
// URL에서 /api/files/ 이후 부분을 fileKey로 사용
|
||||
const filesIndex = course.csvUrl.indexOf('/api/files/');
|
||||
if (filesIndex !== -1) {
|
||||
const extractedKey = course.csvUrl.substring(filesIndex + '/api/files/'.length);
|
||||
// URL 디코딩
|
||||
fileKey = decodeURIComponent(extractedKey);
|
||||
} else {
|
||||
// URL에서 마지막 경로를 fileKey로 사용
|
||||
const urlParts = course.csvUrl.split('/');
|
||||
const lastPart = urlParts[urlParts.length - 1];
|
||||
if (lastPart) {
|
||||
fileKey = decodeURIComponent(lastPart);
|
||||
}
|
||||
}
|
||||
} else if (course.csvUrl.startsWith('csv/')) {
|
||||
// "csv/" 접두사 제거
|
||||
fileKey = course.csvUrl.substring(4);
|
||||
} else {
|
||||
// 그 외의 경우 fileKey로 사용
|
||||
fileKey = course.csvUrl;
|
||||
}
|
||||
} else if (course.csvKey) {
|
||||
// csvKey가 있으면 fileKey로 사용
|
||||
fileKey = course.csvKey;
|
||||
}
|
||||
|
||||
if (!fileKey) {
|
||||
alert('CSV 파일을 찾을 수 없습니다.');
|
||||
return;
|
||||
}
|
||||
|
||||
// CSV 파일 다운로드
|
||||
const fileName = `${course.title || 'quiz'}_문제.csv`;
|
||||
await handleDownload(fileKey, undefined, fileName);
|
||||
} catch (err) {
|
||||
console.error('CSV 파일 다운로드 실패:', err);
|
||||
alert('CSV 파일 다운로드에 실패했습니다.');
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteClick = () => {
|
||||
setIsDeleteModalOpen(true);
|
||||
};
|
||||
@@ -668,6 +980,7 @@ export default function AdminCourseDetailPage() {
|
||||
{course.quizData.length > 0 && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleCsvDownload}
|
||||
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]" />
|
||||
@@ -677,52 +990,56 @@ export default function AdminCourseDetailPage() {
|
||||
</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 className="flex flex-col">
|
||||
<div className="m-[24px] border border-[#dee1e6] border-solid relative bg-white max-h-[400px] overflow-y-auto">
|
||||
<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 shrink-0 w-full sticky top-0 z-10">
|
||||
<div className="w-[48px] border-r border-[#dee1e6] flex items-center justify-center px-2 py-3 shrink-0">
|
||||
<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 shrink-0">
|
||||
<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 shrink-0">
|
||||
<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 shrink-0">
|
||||
<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 shrink-0">
|
||||
<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 shrink-0">
|
||||
<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 relative shrink-0 w-full">
|
||||
<div className="content-stretch flex h-[48px] items-start overflow-clip relative rounded-[inherit] w-full">
|
||||
<div className="w-[48px] border-r border-[#dee1e6] flex items-center justify-center px-2 py-3 shrink-0">
|
||||
<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 shrink-0">
|
||||
<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 shrink-0">
|
||||
<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 shrink-0">
|
||||
<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 shrink-0">
|
||||
<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 shrink-0">
|
||||
<p className="text-[15px] font-medium leading-[1.5] text-[#1b2027] truncate">{quiz.wrongAnswer3}</p>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
) : (
|
||||
|
||||
@@ -63,20 +63,209 @@ export default function AdminLessonsPage() {
|
||||
learningGoal?: string;
|
||||
}>({});
|
||||
|
||||
// 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;
|
||||
};
|
||||
|
||||
// CSV 파일에서 행 개수 가져오기
|
||||
const getCsvRowCount = async (lecture: any): Promise<number> => {
|
||||
if (!lecture.csvUrl && !lecture.csvKey) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
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 (lecture.csvUrl) {
|
||||
// 전체 URL인 경우 fileKey 추출
|
||||
if (lecture.csvUrl.startsWith('http://') || lecture.csvUrl.startsWith('https://')) {
|
||||
// URL에서 /api/files/ 이후 부분을 fileKey로 사용
|
||||
const filesIndex = lecture.csvUrl.indexOf('/api/files/');
|
||||
if (filesIndex !== -1) {
|
||||
fileKey = lecture.csvUrl.substring(filesIndex + '/api/files/'.length);
|
||||
// URL 디코딩
|
||||
fileKey = decodeURIComponent(fileKey);
|
||||
} else {
|
||||
// URL에서 마지막 경로를 fileKey로 사용
|
||||
const urlParts = lecture.csvUrl.split('/');
|
||||
fileKey = urlParts[urlParts.length - 1];
|
||||
fileKey = decodeURIComponent(fileKey);
|
||||
}
|
||||
} else if (lecture.csvUrl.startsWith('csv/')) {
|
||||
// "csv/" 접두사 제거
|
||||
fileKey = lecture.csvUrl.substring(4);
|
||||
} else {
|
||||
// 그 외의 경우 fileKey로 사용
|
||||
fileKey = lecture.csvUrl;
|
||||
}
|
||||
} else if (lecture.csvKey) {
|
||||
// csvKey가 있으면 fileKey로 사용
|
||||
fileKey = lecture.csvKey;
|
||||
}
|
||||
|
||||
if (!fileKey) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
// /api/files/{fileKey} 형태로 요청
|
||||
const csvUrl = `${baseURL}/api/files/${encodeURIComponent(fileKey)}`;
|
||||
|
||||
const csvResponse = await fetch(csvUrl, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
...(token && { Authorization: `Bearer ${token}` }),
|
||||
},
|
||||
});
|
||||
|
||||
if (csvResponse.ok) {
|
||||
const csvText = await csvResponse.text();
|
||||
const parsed = parseCsv(csvText);
|
||||
// 헤더를 제외한 행 개수 반환
|
||||
return parsed.length > 0 ? parsed.length - 1 : 0;
|
||||
} else {
|
||||
console.warn(`CSV 파일 다운로드 실패: ${csvResponse.status} - ${csvUrl}`);
|
||||
return 0;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('CSV 파일 파싱 실패:', error, lecture);
|
||||
return 0;
|
||||
}
|
||||
};
|
||||
|
||||
// 교육과정명 매핑 함수
|
||||
const mapCourseNames = useCallback((lectures: any[]) => {
|
||||
const fetchedLessons: Lesson[] = lectures.map((lecture: any) => {
|
||||
const mapCourseNames = useCallback(async (lectures: any[]) => {
|
||||
// 먼저 기본 정보로 강좌 목록 생성
|
||||
const initialLessons: Lesson[] = lectures.map((lecture: any) => {
|
||||
// 첨부파일 정보 구성
|
||||
const attachmentParts: string[] = [];
|
||||
|
||||
// 강좌 영상 개수 계산
|
||||
if (lecture.videoUrl) {
|
||||
if (Array.isArray(lecture.videoUrl)) {
|
||||
const count = lecture.videoUrl.length;
|
||||
if (count > 0) {
|
||||
attachmentParts.push(`강좌영상 ${count}개`);
|
||||
}
|
||||
} else if (typeof lecture.videoUrl === 'string') {
|
||||
attachmentParts.push('강좌영상 1개');
|
||||
}
|
||||
} else if (lecture.videoKeys && Array.isArray(lecture.videoKeys)) {
|
||||
const count = lecture.videoKeys.length;
|
||||
if (count > 0) {
|
||||
attachmentParts.push(`강좌영상 ${count}개`);
|
||||
}
|
||||
} else if (lecture.videoFileKeys && Array.isArray(lecture.videoFileKeys)) {
|
||||
const count = lecture.videoFileKeys.length;
|
||||
if (count > 0) {
|
||||
attachmentParts.push(`강좌영상 ${count}개`);
|
||||
}
|
||||
} else if (lecture.videoFiles && Array.isArray(lecture.videoFiles)) {
|
||||
const count = lecture.videoFiles.length;
|
||||
if (count > 0) {
|
||||
attachmentParts.push(`강좌영상 ${count}개`);
|
||||
}
|
||||
} else if (lecture.videoKey) {
|
||||
attachmentParts.push('강좌영상 1개');
|
||||
}
|
||||
|
||||
// VR 콘텐츠 개수 계산
|
||||
if (lecture.webglUrl) {
|
||||
if (Array.isArray(lecture.webglUrl)) {
|
||||
const count = lecture.webglUrl.length;
|
||||
if (count > 0) {
|
||||
attachmentParts.push(`VR콘텐츠 ${count}개`);
|
||||
}
|
||||
} else if (typeof lecture.webglUrl === 'string') {
|
||||
attachmentParts.push('VR콘텐츠 1개');
|
||||
}
|
||||
} else if (lecture.vrUrl) {
|
||||
if (Array.isArray(lecture.vrUrl)) {
|
||||
const count = lecture.vrUrl.length;
|
||||
if (count > 0) {
|
||||
attachmentParts.push(`VR콘텐츠 ${count}개`);
|
||||
}
|
||||
} else if (typeof lecture.vrUrl === 'string') {
|
||||
attachmentParts.push('VR콘텐츠 1개');
|
||||
}
|
||||
} else if (lecture.webglKeys && Array.isArray(lecture.webglKeys)) {
|
||||
const count = lecture.webglKeys.length;
|
||||
if (count > 0) {
|
||||
attachmentParts.push(`VR콘텐츠 ${count}개`);
|
||||
}
|
||||
} else if (lecture.vrKeys && Array.isArray(lecture.vrKeys)) {
|
||||
const count = lecture.vrKeys.length;
|
||||
if (count > 0) {
|
||||
attachmentParts.push(`VR콘텐츠 ${count}개`);
|
||||
}
|
||||
} else if (lecture.webglFileKeys && Array.isArray(lecture.webglFileKeys)) {
|
||||
const count = lecture.webglFileKeys.length;
|
||||
if (count > 0) {
|
||||
attachmentParts.push(`VR콘텐츠 ${count}개`);
|
||||
}
|
||||
} else if (lecture.vrFileKeys && Array.isArray(lecture.vrFileKeys)) {
|
||||
const count = lecture.vrFileKeys.length;
|
||||
if (count > 0) {
|
||||
attachmentParts.push(`VR콘텐츠 ${count}개`);
|
||||
}
|
||||
} else if (lecture.webglFiles && Array.isArray(lecture.webglFiles)) {
|
||||
const count = lecture.webglFiles.length;
|
||||
if (count > 0) {
|
||||
attachmentParts.push(`VR콘텐츠 ${count}개`);
|
||||
}
|
||||
} else if (lecture.webglKey || lecture.vrKey) {
|
||||
attachmentParts.push('VR콘텐츠 1개');
|
||||
}
|
||||
if (lecture.csvKey) {
|
||||
attachmentParts.push('평가문제 1개');
|
||||
|
||||
// 학습 평가 문제 개수는 나중에 업데이트
|
||||
// csvUrl이 전체 URL이든 상대 경로든 모두 체크
|
||||
if (lecture.csvUrl || lecture.csvKey) {
|
||||
attachmentParts.push('평가문제 확인 중...');
|
||||
}
|
||||
|
||||
const attachments = attachmentParts.length > 0
|
||||
? attachmentParts.join(', ')
|
||||
: '없음';
|
||||
@@ -99,14 +288,46 @@ export default function AdminLessonsPage() {
|
||||
courseName,
|
||||
lessonName: lecture.title || lecture.lessonName || '',
|
||||
attachments,
|
||||
questionCount: lecture.csvKey ? 1 : 0,
|
||||
questionCount: 0, // 초기값은 0, 나중에 업데이트
|
||||
createdBy: lecture.createdBy || lecture.instructorName || '관리자',
|
||||
createdAt: lecture.createdAt
|
||||
? new Date(lecture.createdAt).toISOString().split('T')[0]
|
||||
: new Date().toISOString().split('T')[0],
|
||||
};
|
||||
});
|
||||
setLessons(fetchedLessons);
|
||||
|
||||
// 초기 목록 설정
|
||||
setLessons(initialLessons);
|
||||
|
||||
// CSV 파일 행 개수 병렬로 가져오기
|
||||
const csvRowCounts = await Promise.all(
|
||||
lectures.map(lecture => getCsvRowCount(lecture))
|
||||
);
|
||||
|
||||
// CSV 행 개수로 업데이트
|
||||
const updatedLessons = initialLessons.map((lesson, index) => {
|
||||
const lecture = lectures[index];
|
||||
const rowCount = csvRowCounts[index];
|
||||
|
||||
// 첨부파일 정보 업데이트
|
||||
let attachments = lesson.attachments;
|
||||
if (lecture.csvUrl || lecture.csvKey) {
|
||||
if (rowCount > 0) {
|
||||
attachments = attachments.replace('평가문제 확인 중...', `평가문제 ${rowCount}개`);
|
||||
} else {
|
||||
// CSV 파일이 있지만 다운로드 실패하거나 행이 없는 경우에도 표시
|
||||
attachments = attachments.replace('평가문제 확인 중...', '평가문제 1개');
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
...lesson,
|
||||
attachments,
|
||||
questionCount: rowCount,
|
||||
};
|
||||
});
|
||||
|
||||
setLessons(updatedLessons);
|
||||
}, [courses]);
|
||||
|
||||
// 교육과정 목록 가져오기
|
||||
@@ -123,32 +344,57 @@ export default function AdminLessonsPage() {
|
||||
fetchCourses();
|
||||
}, []);
|
||||
|
||||
// 강좌 리스트 조회 함수
|
||||
const fetchLectures = useCallback(async () => {
|
||||
try {
|
||||
const response = await apiService.getLectures();
|
||||
if (response.data && Array.isArray(response.data)) {
|
||||
// 원본 데이터 저장
|
||||
rawLecturesRef.current = response.data;
|
||||
// 교육과정명 매핑 함수 호출
|
||||
await mapCourseNames(response.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('강좌 리스트 조회 오류:', error);
|
||||
setLessons([]);
|
||||
rawLecturesRef.current = [];
|
||||
}
|
||||
}, [mapCourseNames]);
|
||||
|
||||
// 강좌 리스트 조회
|
||||
useEffect(() => {
|
||||
async function fetchLectures() {
|
||||
try {
|
||||
const response = await apiService.getLectures();
|
||||
if (response.data && Array.isArray(response.data)) {
|
||||
// 원본 데이터 저장
|
||||
rawLecturesRef.current = response.data;
|
||||
// 교육과정명 매핑 함수 호출
|
||||
mapCourseNames(response.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('강좌 리스트 조회 오류:', error);
|
||||
setLessons([]);
|
||||
rawLecturesRef.current = [];
|
||||
}
|
||||
}
|
||||
|
||||
fetchLectures();
|
||||
}, [mapCourseNames]);
|
||||
}, [fetchLectures]);
|
||||
|
||||
// 페이지 포커스 및 가시성 변경 시 리스트 새로고침
|
||||
useEffect(() => {
|
||||
const handleFocus = () => {
|
||||
fetchLectures();
|
||||
};
|
||||
|
||||
const handleVisibilityChange = () => {
|
||||
if (!document.hidden) {
|
||||
fetchLectures();
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('focus', handleFocus);
|
||||
document.addEventListener('visibilitychange', handleVisibilityChange);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('focus', handleFocus);
|
||||
document.removeEventListener('visibilitychange', handleVisibilityChange);
|
||||
};
|
||||
}, [fetchLectures]);
|
||||
|
||||
// 교육과정 목록이 로드되면 강좌 리스트의 교육과정명 업데이트
|
||||
useEffect(() => {
|
||||
if (rawLecturesRef.current.length > 0) {
|
||||
mapCourseNames(rawLecturesRef.current);
|
||||
}
|
||||
const updateLectures = async () => {
|
||||
if (rawLecturesRef.current.length > 0) {
|
||||
await mapCourseNames(rawLecturesRef.current);
|
||||
}
|
||||
};
|
||||
updateLectures();
|
||||
}, [mapCourseNames]);
|
||||
|
||||
// 현재 사용자 정보 가져오기
|
||||
@@ -527,16 +773,20 @@ export default function AdminLessonsPage() {
|
||||
const vrFileKeys = vrContentFileKeys;
|
||||
const csvFileKey = questionFileKey;
|
||||
|
||||
// 강좌 영상 fileKey 배열 (모든 fileKey를 배열로 저장)
|
||||
let videoUrl: string[] | undefined;
|
||||
if (videoFileKeys.length > 0) {
|
||||
videoUrl = videoFileKeys; // 모든 fileKey를 배열로 저장
|
||||
// 강좌 영상 fileKey (단일 파일은 문자열, 다중 파일은 배열)
|
||||
let videoUrl: string | string[] | undefined;
|
||||
if (videoFileKeys.length === 1) {
|
||||
videoUrl = videoFileKeys[0]; // 단일 파일은 문자열로
|
||||
} else if (videoFileKeys.length > 1) {
|
||||
videoUrl = videoFileKeys; // 다중 파일은 배열로
|
||||
}
|
||||
|
||||
// VR 콘텐츠 fileKey 배열 (모든 fileKey를 배열로 저장)
|
||||
let webglUrl: string[] | undefined;
|
||||
if (vrFileKeys.length > 0) {
|
||||
webglUrl = vrFileKeys; // 모든 fileKey를 배열로 저장
|
||||
// VR 콘텐츠 fileKey (단일 파일은 문자열, 다중 파일은 배열)
|
||||
let webglUrl: string | string[] | undefined;
|
||||
if (vrFileKeys.length === 1) {
|
||||
webglUrl = vrFileKeys[0]; // 단일 파일은 문자열로
|
||||
} else if (vrFileKeys.length > 1) {
|
||||
webglUrl = vrFileKeys; // 다중 파일은 배열로
|
||||
}
|
||||
|
||||
// 학습 평가 문제 fileKey
|
||||
@@ -560,10 +810,10 @@ export default function AdminLessonsPage() {
|
||||
};
|
||||
|
||||
// 선택적 필드 추가
|
||||
if (videoUrl && videoUrl.length > 0) {
|
||||
if (videoUrl) {
|
||||
requestBody.videoUrl = videoUrl;
|
||||
}
|
||||
if (webglUrl && webglUrl.length > 0) {
|
||||
if (webglUrl) {
|
||||
requestBody.webglUrl = webglUrl;
|
||||
}
|
||||
if (csvKey) {
|
||||
|
||||
65
src/app/admin/notices/NoticeCancelModal.tsx
Normal file
65
src/app/admin/notices/NoticeCancelModal.tsx
Normal file
@@ -0,0 +1,65 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
|
||||
type NoticeCancelModalProps = {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
onConfirm: () => void;
|
||||
};
|
||||
|
||||
/**
|
||||
* 공지사항 작성 취소 확인 모달
|
||||
*/
|
||||
export default function NoticeCancelModal({
|
||||
open,
|
||||
onClose,
|
||||
onConfirm,
|
||||
}: NoticeCancelModalProps) {
|
||||
if (!open) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-[60] flex items-center justify-center">
|
||||
<div
|
||||
className="absolute inset-0 bg-black/40"
|
||||
onClick={onClose}
|
||||
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 w-[400px]">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-[8px] items-center justify-end shrink-0">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
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={onConfirm}
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
70
src/app/admin/notices/NoticeDeleteModal.tsx
Normal file
70
src/app/admin/notices/NoticeDeleteModal.tsx
Normal file
@@ -0,0 +1,70 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
|
||||
type NoticeDeleteModalProps = {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
onConfirm: () => void;
|
||||
isDeleting?: boolean;
|
||||
};
|
||||
|
||||
/**
|
||||
* 공지사항 삭제 확인 모달
|
||||
*/
|
||||
export default function NoticeDeleteModal({
|
||||
open,
|
||||
onClose,
|
||||
onConfirm,
|
||||
isDeleting = false,
|
||||
}: NoticeDeleteModalProps) {
|
||||
if (!open) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-[60] flex items-center justify-center">
|
||||
<div
|
||||
className="absolute inset-0 bg-black/40"
|
||||
onClick={onClose}
|
||||
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 w-[400px]">
|
||||
<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={onClose}
|
||||
disabled={isDeleting}
|
||||
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 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<p className="text-[16px] font-semibold leading-[1.5] text-[#4c5561] text-center whitespace-pre">
|
||||
취소
|
||||
</p>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onConfirm}
|
||||
disabled={isDeleting}
|
||||
className="bg-[#f64c4c] h-[40px] rounded-[8px] px-[8px] flex items-center justify-center shrink-0 w-[80px] hover:bg-[#e63939] cursor-pointer transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<p className="text-[16px] font-semibold leading-[1.5] text-white text-center whitespace-pre">
|
||||
{isDeleting ? '삭제 중...' : '삭제'}
|
||||
</p>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
441
src/app/admin/notices/[id]/edit/page.tsx
Normal file
441
src/app/admin/notices/[id]/edit/page.tsx
Normal file
@@ -0,0 +1,441 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useMemo, useRef, ChangeEvent, useEffect } from "react";
|
||||
import { useRouter, useParams } from "next/navigation";
|
||||
import AdminSidebar from "@/app/components/AdminSidebar";
|
||||
import BackArrowSvg from "@/app/svgs/backarrow";
|
||||
import CloseXOSvg from "@/app/svgs/closexo";
|
||||
import apiService from "@/app/lib/apiService";
|
||||
import NoticeValidationModal from "@/app/admin/notices/NoticeValidationModal";
|
||||
import NoticeCancelModal from "@/app/admin/notices/NoticeCancelModal";
|
||||
|
||||
type Attachment = {
|
||||
name: string;
|
||||
size: string;
|
||||
url?: string;
|
||||
fileKey?: string;
|
||||
};
|
||||
|
||||
export default function AdminNoticeEditPage() {
|
||||
const params = useParams();
|
||||
const router = useRouter();
|
||||
const [title, setTitle] = useState('');
|
||||
const [content, setContent] = useState('');
|
||||
const [attachedFile, setAttachedFile] = useState<File | null>(null);
|
||||
const [fileKey, setFileKey] = useState<string | null>(null);
|
||||
const [existingAttachment, setExistingAttachment] = useState<Attachment | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [isLoadingData, setIsLoadingData] = useState(true);
|
||||
const [isValidationModalOpen, setIsValidationModalOpen] = useState(false);
|
||||
const [isCancelModalOpen, setIsCancelModalOpen] = useState(false);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const characterCount = useMemo(() => content.length, [content]);
|
||||
|
||||
// 공지사항 데이터 로드
|
||||
useEffect(() => {
|
||||
async function fetchNotice() {
|
||||
if (!params?.id) {
|
||||
setIsLoadingData(false);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setIsLoadingData(true);
|
||||
const response = await apiService.getNotice(params.id);
|
||||
const data = response.data;
|
||||
|
||||
// 제목 설정
|
||||
setTitle(data.title || '');
|
||||
|
||||
// 내용 설정 (배열이면 join, 문자열이면 그대로)
|
||||
if (data.content) {
|
||||
if (Array.isArray(data.content)) {
|
||||
setContent(data.content.join('\n'));
|
||||
} else if (typeof data.content === 'string') {
|
||||
setContent(data.content);
|
||||
} else {
|
||||
setContent(String(data.content));
|
||||
}
|
||||
}
|
||||
|
||||
// 기존 첨부파일 정보 설정
|
||||
if (data.attachments && Array.isArray(data.attachments) && data.attachments.length > 0) {
|
||||
const att = data.attachments[0];
|
||||
setExistingAttachment({
|
||||
name: att.name || att.fileName || att.filename || '첨부파일',
|
||||
size: att.size || att.fileSize || '',
|
||||
url: att.url || att.downloadUrl,
|
||||
fileKey: att.fileKey || att.key || att.fileId,
|
||||
});
|
||||
// 기존 파일이 있으면 fileKey도 설정
|
||||
if (att.fileKey || att.key || att.fileId) {
|
||||
setFileKey(att.fileKey || att.key || att.fileId);
|
||||
}
|
||||
} else if (data.attachment) {
|
||||
// 단일 첨부파일인 경우
|
||||
setExistingAttachment({
|
||||
name: data.attachment.name || data.attachment.fileName || data.attachment.filename || '첨부파일',
|
||||
size: data.attachment.size || data.attachment.fileSize || '',
|
||||
url: data.attachment.url || data.attachment.downloadUrl,
|
||||
fileKey: data.attachment.fileKey || data.attachment.key || data.attachment.fileId,
|
||||
});
|
||||
if (data.attachment.fileKey || data.attachment.key || data.attachment.fileId) {
|
||||
setFileKey(data.attachment.fileKey || data.attachment.key || data.attachment.fileId);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('공지사항 조회 오류:', error);
|
||||
alert('공지사항을 불러오는 중 오류가 발생했습니다.');
|
||||
router.push('/admin/notices');
|
||||
} finally {
|
||||
setIsLoadingData(false);
|
||||
}
|
||||
}
|
||||
|
||||
fetchNotice();
|
||||
}, [params?.id, router]);
|
||||
|
||||
const handleBack = () => {
|
||||
router.push(`/admin/notices/${params.id}`);
|
||||
};
|
||||
|
||||
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 {
|
||||
setIsLoading(true);
|
||||
// 단일 파일 업로드
|
||||
const uploadResponse = await apiService.uploadFile(file);
|
||||
|
||||
// 응답에서 fileKey 추출
|
||||
let extractedFileKey: string | null = null;
|
||||
if (uploadResponse.data?.fileKey) {
|
||||
extractedFileKey = uploadResponse.data.fileKey;
|
||||
} else if (uploadResponse.data?.key) {
|
||||
extractedFileKey = uploadResponse.data.key;
|
||||
} else if (uploadResponse.data?.id) {
|
||||
extractedFileKey = uploadResponse.data.id;
|
||||
} else if (uploadResponse.data?.imageKey) {
|
||||
extractedFileKey = uploadResponse.data.imageKey;
|
||||
} else if (uploadResponse.data?.fileId) {
|
||||
extractedFileKey = uploadResponse.data.fileId;
|
||||
} else if (uploadResponse.data?.data && (uploadResponse.data.data.key || uploadResponse.data.data.fileKey)) {
|
||||
extractedFileKey = uploadResponse.data.data.key || uploadResponse.data.data.fileKey;
|
||||
} else if (uploadResponse.data?.results && Array.isArray(uploadResponse.data.results) && uploadResponse.data.results.length > 0) {
|
||||
const result = uploadResponse.data.results[0];
|
||||
if (result.ok && result.fileKey) {
|
||||
extractedFileKey = result.fileKey;
|
||||
}
|
||||
}
|
||||
|
||||
if (extractedFileKey) {
|
||||
setFileKey(extractedFileKey);
|
||||
setAttachedFile(file);
|
||||
// 새 파일을 업로드하면 기존 파일 정보 제거
|
||||
setExistingAttachment(null);
|
||||
} else {
|
||||
throw new Error('파일 키를 받아오지 못했습니다.');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('파일 업로드 실패:', error);
|
||||
alert('파일 업로드에 실패했습니다. 다시 시도해주세요.');
|
||||
setAttachedFile(null);
|
||||
setFileKey(null);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
// 파일 입력 초기화
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.value = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleFileRemove = () => {
|
||||
setAttachedFile(null);
|
||||
setExistingAttachment(null);
|
||||
setFileKey(null);
|
||||
// 파일 입력 초기화
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.value = '';
|
||||
}
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!title.trim() || !content.trim()) {
|
||||
setIsValidationModalOpen(true);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!params?.id) {
|
||||
alert('공지사항 ID를 찾을 수 없습니다.');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setIsLoading(true);
|
||||
|
||||
// 공지사항 수정 API 호출
|
||||
const noticeData: any = {
|
||||
title: title.trim(),
|
||||
content: content.trim(),
|
||||
};
|
||||
|
||||
// fileKey와 파일 정보가 있으면 attachments 배열로 포함
|
||||
if (fileKey) {
|
||||
if (attachedFile) {
|
||||
// 새로 업로드한 파일
|
||||
noticeData.attachments = [
|
||||
{
|
||||
fileKey: fileKey,
|
||||
filename: attachedFile.name,
|
||||
mimeType: attachedFile.type || 'application/octet-stream',
|
||||
size: attachedFile.size,
|
||||
},
|
||||
];
|
||||
} else if (existingAttachment && existingAttachment.fileKey) {
|
||||
// 기존 파일 유지
|
||||
noticeData.attachments = [
|
||||
{
|
||||
fileKey: existingAttachment.fileKey,
|
||||
filename: existingAttachment.name,
|
||||
},
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
await apiService.updateNotice(params.id, noticeData);
|
||||
|
||||
alert('공지사항이 수정되었습니다.');
|
||||
router.push(`/admin/notices/${params.id}`);
|
||||
} catch (error) {
|
||||
console.error('공지사항 수정 실패:', error);
|
||||
alert('공지사항 수정에 실패했습니다. 다시 시도해주세요.');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
if (title.trim() || content.trim() || attachedFile || fileKey) {
|
||||
setIsCancelModalOpen(true);
|
||||
} else {
|
||||
handleBack();
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancelConfirm = () => {
|
||||
setIsCancelModalOpen(false);
|
||||
handleBack();
|
||||
};
|
||||
|
||||
if (isLoadingData) {
|
||||
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">
|
||||
<div className="h-[100px] flex items-center justify-center px-[32px]">
|
||||
<p className="text-[16px] font-medium text-[#333c47]">로딩 중...</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<NoticeValidationModal
|
||||
open={isValidationModalOpen}
|
||||
onClose={() => setIsValidationModalOpen(false)}
|
||||
/>
|
||||
<NoticeCancelModal
|
||||
open={isCancelModalOpen}
|
||||
onClose={() => setIsCancelModalOpen(false)}
|
||||
onConfirm={handleCancelConfirm}
|
||||
/>
|
||||
<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 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 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 || existingAttachment) ? 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}
|
||||
disabled={isLoading}
|
||||
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 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<span className="text-[13px] font-medium leading-[1.4] text-[#4c5561] whitespace-nowrap">
|
||||
{isLoading ? '업로드 중...' : '첨부'}
|
||||
</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-between px-4">
|
||||
{attachedFile ? (
|
||||
<>
|
||||
<p className="text-[14px] font-normal leading-[1.5] text-[#1b2027] flex-1 min-w-0 truncate">
|
||||
{attachedFile.name}
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleFileRemove}
|
||||
className="flex items-center justify-center w-6 h-6 cursor-pointer hover:opacity-70 transition-opacity shrink-0 ml-2"
|
||||
aria-label="파일 삭제"
|
||||
>
|
||||
<CloseXOSvg />
|
||||
</button>
|
||||
</>
|
||||
) : existingAttachment ? (
|
||||
<>
|
||||
<p className="text-[14px] font-normal leading-[1.5] text-[#1b2027] flex-1 min-w-0 truncate">
|
||||
{existingAttachment.name}
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleFileRemove}
|
||||
className="flex items-center justify-center w-6 h-6 cursor-pointer hover:opacity-70 transition-opacity shrink-0 ml-2"
|
||||
aria-label="파일 삭제"
|
||||
>
|
||||
<CloseXOSvg />
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<p className="text-[14px] font-normal leading-[1.5] text-[#8c95a1] text-center w-full">
|
||||
파일을 첨부해주세요.
|
||||
</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}
|
||||
disabled={isLoading}
|
||||
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 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{isLoading ? '저장 중...' : '저장하기'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -9,6 +9,7 @@ import DownloadIcon from '@/app/svgs/downloadicon';
|
||||
import PaperClipSvg from '@/app/svgs/paperclipsvg';
|
||||
import apiService from '@/app/lib/apiService';
|
||||
import type { Notice } from '@/app/admin/notices/mockData';
|
||||
import NoticeDeleteModal from '@/app/admin/notices/NoticeDeleteModal';
|
||||
|
||||
type Attachment = {
|
||||
name: string;
|
||||
@@ -25,6 +26,8 @@ export default function AdminNoticeDetailPage() {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [isDeleting, setIsDeleting] = useState(false);
|
||||
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
||||
const [showToast, setShowToast] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchNotice() {
|
||||
@@ -57,7 +60,7 @@ export default function AdminNoticeDetailPage() {
|
||||
// 첨부파일 정보 처리
|
||||
if (data.attachments && Array.isArray(data.attachments)) {
|
||||
setAttachments(data.attachments.map((att: any) => ({
|
||||
name: att.name || att.fileName || '',
|
||||
name: att.name || att.fileName || att.filename || '',
|
||||
size: att.size || att.fileSize || '',
|
||||
url: att.url || att.downloadUrl,
|
||||
fileKey: att.fileKey || att.key || att.fileId,
|
||||
@@ -65,7 +68,7 @@ export default function AdminNoticeDetailPage() {
|
||||
} else if (transformedNotice.hasAttachment && data.attachment) {
|
||||
// 단일 첨부파일인 경우
|
||||
setAttachments([{
|
||||
name: data.attachment.name || data.attachment.fileName || '첨부파일',
|
||||
name: data.attachment.name || data.attachment.fileName || data.attachment.filename || '첨부파일',
|
||||
size: data.attachment.size || data.attachment.fileSize || '',
|
||||
url: data.attachment.url || data.attachment.downloadUrl,
|
||||
fileKey: data.attachment.fileKey || data.attachment.key || data.attachment.fileId,
|
||||
@@ -88,6 +91,16 @@ export default function AdminNoticeDetailPage() {
|
||||
fetchNotice();
|
||||
}, [params?.id]);
|
||||
|
||||
// 토스트 자동 닫기
|
||||
useEffect(() => {
|
||||
if (showToast) {
|
||||
const timer = setTimeout(() => {
|
||||
setShowToast(false);
|
||||
}, 3000);
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
}, [showToast]);
|
||||
|
||||
const handleDownload = async (fileKey?: string, url?: string, fileName?: string) => {
|
||||
if (url) {
|
||||
// URL이 있으면 직접 다운로드
|
||||
@@ -299,34 +312,12 @@ export default function AdminNoticeDetailPage() {
|
||||
<div className="flex items-center justify-end gap-[12px]">
|
||||
<button
|
||||
type="button"
|
||||
onClick={async () => {
|
||||
if (!confirm('정말 삭제하시겠습니까?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!params?.id) {
|
||||
alert('공지사항 ID를 찾을 수 없습니다.');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setIsDeleting(true);
|
||||
await apiService.deleteNotice(params.id);
|
||||
alert('공지사항이 삭제되었습니다.');
|
||||
router.push('/admin/notices');
|
||||
} catch (err) {
|
||||
console.error('공지사항 삭제 오류:', err);
|
||||
const errorMessage = err instanceof Error ? err.message : '공지사항 삭제에 실패했습니다.';
|
||||
alert(errorMessage);
|
||||
} finally {
|
||||
setIsDeleting(false);
|
||||
}
|
||||
}}
|
||||
onClick={() => setIsDeleteModalOpen(true)}
|
||||
disabled={isDeleting}
|
||||
className="bg-[#FEF2F2] h-[48px] rounded-[10px] px-[8px] shrink-0 min-w-[80px] flex items-center justify-center hover:bg-[#FEE2E2] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<span className="text-[16px] font-semibold leading-[1.5] text-[#F64C4C] text-center">
|
||||
{isDeleting ? '삭제 중...' : '삭제'}
|
||||
삭제
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
@@ -344,6 +335,55 @@ export default function AdminNoticeDetailPage() {
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 삭제 확인 모달 */}
|
||||
<NoticeDeleteModal
|
||||
open={isDeleteModalOpen}
|
||||
onClose={() => setIsDeleteModalOpen(false)}
|
||||
onConfirm={async () => {
|
||||
if (!params?.id) {
|
||||
alert('공지사항 ID를 찾을 수 없습니다.');
|
||||
setIsDeleteModalOpen(false);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setIsDeleting(true);
|
||||
await apiService.deleteNotice(params.id);
|
||||
setIsDeleteModalOpen(false);
|
||||
setShowToast(true);
|
||||
// 토스트 표시 후 목록 페이지로 이동
|
||||
setTimeout(() => {
|
||||
router.push('/admin/notices');
|
||||
}, 1500);
|
||||
} catch (err) {
|
||||
console.error('공지사항 삭제 오류:', err);
|
||||
const errorMessage = err instanceof Error ? err.message : '공지사항 삭제에 실패했습니다.';
|
||||
alert(errorMessage);
|
||||
setIsDeleteModalOpen(false);
|
||||
} finally {
|
||||
setIsDeleting(false);
|
||||
}
|
||||
}}
|
||||
isDeleting={isDeleting}
|
||||
/>
|
||||
|
||||
{/* 삭제 완료 토스트 */}
|
||||
{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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -8,6 +8,7 @@ import BackArrowSvg from "@/app/svgs/backarrow";
|
||||
import { type Notice } from "@/app/admin/notices/mockData";
|
||||
import apiService from "@/app/lib/apiService";
|
||||
import NoticeValidationModal from "@/app/admin/notices/NoticeValidationModal";
|
||||
import NoticeCancelModal from "@/app/admin/notices/NoticeCancelModal";
|
||||
|
||||
export default function AdminNoticesPage() {
|
||||
const router = useRouter();
|
||||
@@ -20,6 +21,7 @@ export default function AdminNoticesPage() {
|
||||
const [fileKey, setFileKey] = useState<string | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [isValidationModalOpen, setIsValidationModalOpen] = useState(false);
|
||||
const [isCancelModalOpen, setIsCancelModalOpen] = useState(false);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
// 날짜를 yyyy-mm-dd 형식으로 포맷팅
|
||||
@@ -223,13 +225,16 @@ export default function AdminNoticesPage() {
|
||||
|
||||
const handleCancel = () => {
|
||||
if (title.trim() || content.trim() || attachedFile || fileKey) {
|
||||
if (confirm('작성 중인 내용이 있습니다. 정말 취소하시겠습니까?')) {
|
||||
handleBack();
|
||||
}
|
||||
setIsCancelModalOpen(true);
|
||||
} else {
|
||||
handleBack();
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancelConfirm = () => {
|
||||
setIsCancelModalOpen(false);
|
||||
handleBack();
|
||||
};
|
||||
|
||||
const ITEMS_PER_PAGE = 10;
|
||||
const sortedNotices = useMemo(() => {
|
||||
@@ -252,6 +257,11 @@ export default function AdminNoticesPage() {
|
||||
open={isValidationModalOpen}
|
||||
onClose={() => setIsValidationModalOpen(false)}
|
||||
/>
|
||||
<NoticeCancelModal
|
||||
open={isCancelModalOpen}
|
||||
onClose={() => setIsCancelModalOpen(false)}
|
||||
onConfirm={handleCancelConfirm}
|
||||
/>
|
||||
<div className="min-h-screen flex flex-col bg-white">
|
||||
{/* 메인 레이아웃 */}
|
||||
<div className="flex flex-1 min-h-0 justify-center">
|
||||
@@ -357,13 +367,13 @@ export default function AdminNoticesPage() {
|
||||
accept="*/*"
|
||||
/>
|
||||
</div>
|
||||
<div className="h-16 w-full rounded-[8px] border border-[#dee1e6] bg-gray-50 flex items-center justify-center">
|
||||
<div className="h-16 w-full rounded-[8px] border border-[#dee1e6] bg-gray-50 flex items-center px-4">
|
||||
{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 className="text-[14px] font-normal leading-[1.5] text-[#8c95a1] text-center w-full">
|
||||
파일을 첨부해주세요.
|
||||
</p>
|
||||
)}
|
||||
|
||||
@@ -679,7 +679,7 @@ class ApiService {
|
||||
}
|
||||
|
||||
/**
|
||||
* 파일 다운로드 (이미지 URL 가져오기)
|
||||
* 파일 다운로드
|
||||
* @param fileKey 파일 키
|
||||
* @returns 파일 URL (Blob URL), 파일이 없으면 null 반환
|
||||
*/
|
||||
|
||||
Reference in New Issue
Block a user