motaju/xrlms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

교육과정, 강의등록 완료1

Browse Source
This commit is contained in:
wallace
2025-11-28 19:52:32 +09:00
parent adae8b130b
commit 7db3b7732c
12 changed files with 1382 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
prisma.config.ts
View File

@@ -1,13 +0,0 @@
import { defineConfig, env } from "prisma/config";
import "dotenv/config";
export default defineConfig({
schema: "prisma/schema.prisma",
migrations: {
path: "prisma/migrations",
},
engine: "classic",
datasource: {
url: env("DATABASE_URL"),
},
});

329
src/app/admin/courses/CourseRegistrationModal.tsx
View File

@@ -6,6 +6,7 @@ import DropdownIcon from "@/app/svgs/dropdownicon";
import CloseXOSvg from "@/app/svgs/closexo";
import { type UserRow } from "@/app/admin/id/mockData";
import { type Course } from "./mockData";
import apiService from "@/app/lib/apiService";
type Props = {
open: boolean;
@@ -25,6 +26,8 @@ export default function CourseRegistrationModal({ open, onClose, onSave, onDelet
const [previewUrl, setPreviewUrl] = useState<string | null>(null);
const [isDragging, setIsDragging] = useState(false);
const [isSaving, setIsSaving] = useState(false);
const [isDeleting, setIsDeleting] = useState(false);
const [isImageDeleted, setIsImageDeleted] = useState(false);
const dropdownRef = useRef<HTMLDivElement>(null);
const modalRef = useRef<HTMLDivElement>(null);
const fileInputRef = useRef<HTMLInputElement>(null);
@@ -138,12 +141,47 @@ export default function CourseRegistrationModal({ open, onClose, onSave, onDelet
return instructors.find(inst => inst.id === instructorId);
}, [instructors, instructorId]);
// previewUrl 변경 시 이전 Blob URL 정리
useEffect(() => {
return () => {
if (previewUrl && previewUrl.startsWith('blob:')) {
URL.revokeObjectURL(previewUrl);
}
};
}, [previewUrl]);
// 수정 모드일 때 기존 데이터 채우기
useEffect(() => {
if (open && editingCourse) {
setCourseName(editingCourse.courseName);
// 수정 모드일 때 강사 목록 자동 로드
loadInstructors();
// 수정 모드일 때 이미지 로드
if (editingCourse.imageKey) {
setIsImageDeleted(false); // 초기화
setSelectedImage(null); // 새 이미지 선택 초기화
const loadImage = async () => {
try {
const imageUrl = await apiService.getFile(editingCourse.imageKey!);
// 이미지가 있으면 previewUrl 설정, 없으면 null
if (imageUrl) {
setPreviewUrl(imageUrl);
} else {
setPreviewUrl(null);
}
} catch (error) {
console.error('이미지 로드 오류:', error);
// 이미지 로드 실패 시 null로 설정
setPreviewUrl(null);
}
};
loadImage();
} else {
setIsImageDeleted(false); // 초기화
setSelectedImage(null); // 새 이미지 선택 초기화
setPreviewUrl(null); // 이미지가 없으면 명시적으로 null 설정
}
} else if (!open) {
setCourseName("");
setInstructorId("");
@@ -153,6 +191,7 @@ export default function CourseRegistrationModal({ open, onClose, onSave, onDelet
setSelectedImage(null);
setPreviewUrl(null);
setIsDragging(false);
setIsImageDeleted(false);
setInstructors([]); // 모달 닫을 때 강사 목록 초기화
}
}, [open, editingCourse]);
@@ -224,106 +263,24 @@ export default function CourseRegistrationModal({ open, onClose, onSave, onDelet
});
try {
// 토큰 가져오기
const token = localStorage.getItem('token') || document.cookie
.split('; ')
.find(row => row.startsWith('token='))
?.split('=')[1];
// API base URL 설정
const baseUrl = process.env.NEXT_PUBLIC_API_BASE_URL
? process.env.NEXT_PUBLIC_API_BASE_URL
: 'https://hrdi.coconutmeet.net';
let imageKey: string | null = null;
// 이미지가 있으면 먼저 업로드하여 imageKey 받기
// 새 이미지가 선택된 경우 업로드
if (selectedImage) {
try {
// 이미지 업로드 API 호출 - 일반적인 엔드포인트 경로 시도
const possibleEndpoints = [
`${baseUrl}/admin/files/upload`,
`${baseUrl}/admin/files`,
`${baseUrl}/admin/upload`,
`${baseUrl}/admin/images/upload`,
`${baseUrl}/admin/images`,
`${baseUrl}/files/upload`,
`${baseUrl}/files`,
`${baseUrl}/upload`,
`${baseUrl}/api/files/upload`,
`${baseUrl}/api/upload`,
`${baseUrl}/api/files`,
];
const uploadResponse = await apiService.uploadFile(selectedImage);
let uploadResponse: Response | null = null;
let lastError: Error | null = null;
let uploadSuccess = false;
let lastStatusCode: number | null = null;
// 여러 엔드포인트를 시도
for (const uploadUrl of possibleEndpoints) {
try {
// 각 시도마다 새로운 FormData 생성 (FormData는 한 번만 사용 가능)
const formData = new FormData();
formData.append('file', selectedImage);
// 일부 API는 'image' 필드명을 사용할 수 있음
formData.append('image', selectedImage);
uploadResponse = await fetch(uploadUrl, {
method: 'POST',
headers: {
...(token && { Authorization: `Bearer ${token}` }),
// Content-Type은 FormData 사용 시 자동으로 설정되므로 명시하지 않음
},
body: formData,
});
lastStatusCode = uploadResponse.status;
if (uploadResponse.ok) {
const uploadData = await uploadResponse.json();
// 응답에서 imageKey 추출 (실제 응답 구조에 맞게 수정 필요)
imageKey = uploadData.imageKey || uploadData.key || uploadData.id || uploadData.fileKey || uploadData.fileId || uploadData.data?.key || uploadData.data?.imageKey || null;
uploadSuccess = true;
break; // 성공하면 루프 종료
} else if (uploadResponse.status !== 404) {
// 404가 아닌 다른 에러면 해당 엔드포인트가 맞을 수 있으므로 에러 정보 저장
try {
const errorData = await uploadResponse.json();
lastError = new Error(
errorData.message || errorData.error || `이미지 업로드 실패: ${uploadResponse.status} ${uploadResponse.statusText}`
);
} catch {
lastError = new Error(`이미지 업로드 실패: ${uploadResponse.status} ${uploadResponse.statusText}`);
}
// 401, 403 같은 인증/권한 오류는 더 이상 시도하지 않음
if (uploadResponse.status === 401 || uploadResponse.status === 403) {
break;
}
}
} catch (fetchError) {
// 네트워크 에러 등은 무시하고 다음 엔드포인트 시도
if (!lastError) {
lastError = fetchError instanceof Error ? fetchError : new Error('네트워크 오류가 발생했습니다.');
}
continue;
}
}
if (!uploadSuccess) {
// 모든 엔드포인트가 404를 반환한 경우와 다른 오류를 구분
if (lastStatusCode === 404 || !lastStatusCode) {
console.warn('이미지 업로드 엔드포인트를 찾을 수 없습니다. 이미지 없이 계속 진행합니다.');
} else {
const errorMessage = lastError?.message || '이미지 업로드에 실패했습니다.';
console.error('이미지 업로드 실패:', errorMessage);
}
// 이미지 업로드 실패 시 사용자에게 알림 (경고 수준)
setErrors((prev) => ({
...prev,
image: '이미지 업로드에 실패했습니다. 이미지 없이 계속 진행됩니다.',
}));
// 이미지 업로드 실패해도 계속 진행 (선택사항)
// 응답에서 imageKey 추출
// apiService.uploadFile은 ApiResponse<T> 형태로 반환하므로 uploadResponse.data가 실제 응답 데이터
if (uploadResponse.data) {
// 다양한 가능한 응답 구조 확인
imageKey = uploadResponse.data.imageKey
|| uploadResponse.data.key
|| uploadResponse.data.id
|| uploadResponse.data.fileKey
|| uploadResponse.data.fileId
|| (uploadResponse.data.data && (uploadResponse.data.data.imageKey || uploadResponse.data.data.key))
|| null;
}
} catch (uploadError) {
const errorMessage = uploadError instanceof Error ? uploadError.message : '이미지 업로드 중 오류가 발생했습니다.';
@@ -336,54 +293,117 @@ export default function CourseRegistrationModal({ open, onClose, onSave, onDelet
}
}
// /subjects API 호출
const token = localStorage.getItem('token') || document.cookie
.split('; ')
.find(row => row.startsWith('token='))
?.split('=')[1];
const baseUrl = process.env.NEXT_PUBLIC_API_BASE_URL
? process.env.NEXT_PUBLIC_API_BASE_URL
: 'https://hrdi.coconutmeet.net';
const requestBody: {
title: string;
instructor: string;
imageKey?: string | null;
imageKey?: string;
} = {
title: courseName.trim(),
instructor: selectedInstructor.name,
};
if (imageKey) {
requestBody.imageKey = imageKey;
}
const response = await fetch(`${baseUrl}/subjects`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
...(token && { Authorization: `Bearer ${token}` }),
},
body: JSON.stringify(requestBody),
});
if (!response.ok) {
let errorMessage = `과목 등록 실패 (${response.status})`;
try {
const errorData = await response.json();
if (errorData.error) {
errorMessage = errorData.error;
} else if (errorData.message) {
errorMessage = errorData.message;
}
} catch (parseError) {
// JSON 파싱 실패 시 기본 메시지 사용
// imageKey 처리: 수정 모드에서는 항상 명시적으로 설정
if (editingCourse && editingCourse.id) {
// 수정 모드: 이미지가 삭제된 경우 "null" 문자열, 새 이미지가 있으면 값, 기존 이미지 유지 시 기존 값, 없으면 "null"
if (isImageDeleted) {
// 이미지가 삭제된 경우 무조건 "null" 문자열로 설정
requestBody.imageKey = "null";
} else if (imageKey) {
// 새 이미지가 업로드된 경우
requestBody.imageKey = imageKey;
} else if (editingCourse.imageKey) {
// 기존 이미지를 유지하는 경우
requestBody.imageKey = editingCourse.imageKey;
} else {
// 이미지가 없는 경우 "null" 문자열로 명시적으로 설정
requestBody.imageKey = "null";
}
} else {
// 등록 모드: 새 이미지가 있으면 값, 없으면 undefined (선택사항)
if (imageKey) {
requestBody.imageKey = imageKey;
}
console.error('과목 등록 실패:', errorMessage);
setErrors({ submit: errorMessage });
setIsSaving(false);
return;
}
// 성공 시 onSave 콜백 호출
if (onSave && selectedInstructor) {
onSave(courseName.trim(), selectedInstructor.name);
// 수정 모드인지 등록 모드인지 확인
if (editingCourse && editingCourse.id) {
// 수정 모드: PUT /subjects/{id}
try {
await apiService.updateSubject(editingCourse.id, requestBody);
// 성공 시 onSave 콜백 호출 및 모달 닫기
if (onSave && selectedInstructor) {
onSave(courseName.trim(), selectedInstructor.name);
}
onClose(); // 모달 닫기
} catch (updateError) {
const errorMessage = updateError instanceof Error ? updateError.message : '과목 수정 중 오류가 발생했습니다.';
console.error('과목 수정 실패:', errorMessage);
setErrors({ submit: errorMessage });
setIsSaving(false);
return;
}
} else {
// 등록 모드: POST /subjects
const response = await fetch(`${baseUrl}/subjects`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
...(token && { Authorization: `Bearer ${token}` }),
},
body: JSON.stringify(requestBody),
});
if (!response.ok) {
let errorMessage = `과목 등록 실패 (${response.status})`;
try {
const errorData = await response.json();
if (errorData.error) {
errorMessage = errorData.error;
} else if (errorData.message) {
errorMessage = errorData.message;
}
} catch (parseError) {
// JSON 파싱 실패 시 기본 메시지 사용
}
console.error('과목 등록 실패:', errorMessage);
setErrors({ submit: errorMessage });
setIsSaving(false);
return;
}
// 응답에서 id 추출하여 저장
try {
const responseData = await response.json();
// 응답에서 id 추출 (다양한 가능한 필드명 확인)
const subjectId = responseData.id
|| responseData.data?.id
|| responseData.subjectId
|| responseData.data?.subjectId
|| null;
} catch (parseError) {
// 응답 파싱 실패 시 무시
}
// 성공 시 onSave 콜백 호출 및 모달 닫기
if (onSave && selectedInstructor) {
onSave(courseName.trim(), selectedInstructor.name);
}
onClose(); // 모달 닫기
}
} catch (error) {
const errorMessage = error instanceof Error ? error.message : '네트워크 오류가 발생했습니다.';
console.error('과목 등록 오류:', errorMessage);
console.error('과목 저장 오류:', errorMessage);
setErrors({ submit: errorMessage });
} finally {
setIsSaving(false);
@@ -396,11 +416,37 @@ export default function CourseRegistrationModal({ open, onClose, onSave, onDelet
};
// 삭제 확인 핸들러
const handleDeleteConfirm = () => {
if (onDelete) {
onDelete();
const handleDeleteConfirm = async () => {
if (!editingCourse || !editingCourse.id) {
console.error('삭제할 교육과정 정보가 없습니다.');
setErrors({ submit: '삭제할 교육과정 정보가 없습니다.' });
return;
}
if (isDeleting) return; // 이미 삭제 중이면 중복 호출 방지
setIsDeleting(true);
setErrors((prev) => {
const next = { ...prev };
delete next.submit;
return next;
});
try {
await apiService.deleteSubject(editingCourse.id);
// 성공 시 모달 닫기 및 콜백 호출
setIsDeleteConfirmOpen(false);
if (onDelete) {
onDelete();
}
onClose();
} catch (error) {
const errorMessage = error instanceof Error ? error.message : '교육과정 삭제 중 오류가 발생했습니다.';
console.error('교육과정 삭제 실패:', errorMessage);
setErrors({ submit: errorMessage });
} finally {
setIsDeleting(false);
}
};
@@ -434,12 +480,18 @@ export default function CourseRegistrationModal({ open, onClose, onSave, onDelet
}
setSelectedImage(file);
setIsImageDeleted(false); // 새 이미지 선택 시 삭제 상태 해제
setErrors((prev) => {
const next = { ...prev };
delete next.image;
return next;
});
// 기존 previewUrl이 Blob URL인 경우 메모리 해제
if (previewUrl && previewUrl.startsWith('blob:')) {
URL.revokeObjectURL(previewUrl);
}
// 미리보기 URL 생성
const reader = new FileReader();
reader.onloadend = () => {
@@ -491,7 +543,12 @@ export default function CourseRegistrationModal({ open, onClose, onSave, onDelet
const handleRemoveImage = (e: React.MouseEvent) => {
e.stopPropagation();
setSelectedImage(null);
// previewUrl이 Blob URL인 경우 메모리 해제
if (previewUrl && previewUrl.startsWith('blob:')) {
URL.revokeObjectURL(previewUrl);
}
setPreviewUrl(null);
setIsImageDeleted(true); // 이미지 삭제 상태 설정
if (fileInputRef.current) {
fileInputRef.current.value = "";
}
@@ -800,6 +857,9 @@ export default function CourseRegistrationModal({ open, onClose, onSave, onDelet
<br />
정말 삭제하시겠습니까?
</p>
{errors.submit && (
<p className="text-[var(--color-error)] text-[13px] leading-tight">{errors.submit}</p>
)}
</div>
<div className="flex gap-2 items-center justify-end">
<button
@@ -812,9 +872,10 @@ export default function CourseRegistrationModal({ open, onClose, onSave, onDelet
<button
type="button"
onClick={handleDeleteConfirm}
className="h-[40px] px-4 rounded-[8px] bg-[#fef2f2] text-[16px] font-semibold leading-normal text-[var(--color-error)] hover:bg-[#fae6e6] cursor-pointer transition-colors"
disabled={isDeleting}
className="h-[40px] px-4 rounded-[8px] bg-[#fef2f2] text-[16px] font-semibold leading-normal text-[var(--color-error)] hover:bg-[#fae6e6] cursor-pointer transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
>
삭제하기
{isDeleting ? '삭제 중...' : '삭제하기'}
</button>
</div>
</div>

52
src/app/admin/courses/mockData.ts
View File

@@ -7,39 +7,71 @@ export type Course = {
createdAt: string; // 생성일 (YYYY-MM-DD)
createdBy: string; // 등록자
hasLessons: boolean; // 강좌포함여부
imageKey?: string; // 이미지 키
};
// 과목 리스트 조회 API
export async function getCourses(): Promise<Course[]> {
try {
const response = await apiService.getSubjects();
const data = response.data;
// 교육과정과 강좌 리스트를 동시에 가져오기
const [subjectsResponse, lecturesResponse] = await Promise.all([
apiService.getSubjects(),
apiService.getLectures().catch(() => ({ data: [] })), // 강좌 리스트 조회 실패 시 빈 배열 반환
]);
const subjectsData = subjectsResponse.data;
const lecturesData = lecturesResponse.data || [];
// 디버깅: API 응답 구조 확인
console.log('🔍 [getCourses] API 원본 응답:', data);
console.log('🔍 [getCourses] 응답 타입:', Array.isArray(data) ? '배열' : typeof data);
console.log('🔍 [getCourses] API 원본 응답:', subjectsData);
console.log('🔍 [getCourses] 응답 타입:', Array.isArray(subjectsData) ? '배열' : typeof subjectsData);
console.log('🔍 [getCourses] 강좌 리스트:', lecturesData);
// API 응답이 배열이 아닌 경우 처리 (예: { items: [...] } 형태)
let coursesArray: any[] = [];
if (Array.isArray(data)) {
coursesArray = data;
} else if (data && typeof data === 'object') {
if (Array.isArray(subjectsData)) {
coursesArray = subjectsData;
} else if (subjectsData && typeof subjectsData === 'object') {
// 더 많은 가능한 필드명 확인
coursesArray = data.items || data.courses || data.data || data.list || data.subjects || data.subjectList || [];
coursesArray = subjectsData.items || subjectsData.courses || subjectsData.data || subjectsData.list || subjectsData.subjects || subjectsData.subjectList || [];
}
// 강좌 리스트가 배열이 아닌 경우 처리
let lecturesArray: any[] = [];
if (Array.isArray(lecturesData)) {
lecturesArray = lecturesData;
} else if (lecturesData && typeof lecturesData === 'object') {
lecturesArray = lecturesData.items || lecturesData.lectures || lecturesData.data || lecturesData.list || [];
}
console.log('🔍 [getCourses] 변환 전 배열:', coursesArray);
console.log('🔍 [getCourses] 배열 길이:', coursesArray.length);
console.log('🔍 [getCourses] 강좌 배열 길이:', lecturesArray.length);
// 각 교육과정에 대해 강좌가 있는지 확인하기 위한 Set 생성
const courseIdsWithLessons = new Set<string>();
lecturesArray.forEach((lecture: any) => {
const subjectId = String(lecture.subjectId || lecture.subject_id || '');
if (subjectId) {
courseIdsWithLessons.add(subjectId);
}
});
console.log('🔍 [getCourses] 강좌가 있는 교육과정 ID:', Array.from(courseIdsWithLessons));
// API 응답 데이터를 Course 형식으로 변환
const transformedCourses: Course[] = coursesArray.map((item: any) => {
const courseId = String(item.id || item.subjectId || item.subject_id || '');
const hasLessons = courseIdsWithLessons.has(courseId);
const transformed = {
id: String(item.id || item.subjectId || item.subject_id || ''),
id: courseId,
courseName: item.courseName || item.name || item.subjectName || item.subject_name || item.title || '',
instructorName: item.instructorName || item.instructor || item.instructor_name || item.teacherName || '',
createdAt: item.createdAt || item.createdDate || item.created_date || item.createdAt || '',
createdBy: item.createdBy || item.creator || item.created_by || item.creatorName || '',
hasLessons: item.hasLessons !== undefined ? item.hasLessons : (item.has_lessons !== undefined ? item.has_lessons : false),
hasLessons: hasLessons,
imageKey: item.imageKey || item.image_key || item.fileKey || item.file_key || undefined,
};
console.log('🔍 [getCourses] 변환된 항목:', transformed);
return transformed;

20
src/app/admin/courses/page.tsx
View File

@@ -6,6 +6,24 @@ import CourseRegistrationModal from "./CourseRegistrationModal";
import ChevronDownSvg from "@/app/svgs/chevrondownsvg";
import { getCourses, type Course } from "./mockData";
// 날짜를 yyyy-mm-dd 형식으로 변환하는 함수
const formatDate = (dateString: string): string => {
if (!dateString) return '';
try {
const date = new Date(dateString);
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
return `${year}-${month}-${day}`;
} catch {
// 이미 yyyy-mm-dd 형식이거나 파싱 실패 시 원본 반환
if (dateString.includes('T')) {
return dateString.split('T')[0];
}
return dateString;
}
};
export default function AdminCoursesPage() {
const [courses, setCourses] = useState<Course[]>([]);
const [isLoading, setIsLoading] = useState(true);
@@ -199,7 +217,7 @@ export default function AdminCoursesPage() {
{course.instructorName}
</td>
<td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
{course.createdAt}
{formatDate(course.createdAt)}
</td>
<td className="border-t border-[#dee1e6] px-4 text-left text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
{course.hasLessons ? (

320
src/app/admin/lessons/[id]/page.tsx Normal file
View File

@@ -0,0 +1,320 @@
'use client';
import { useEffect, useState } from 'react';
import { useParams, useRouter } from 'next/navigation';
import Image from 'next/image';
import AdminSidebar from '@/app/components/AdminSidebar';
import BackArrowSvg from '@/app/svgs/backarrow';
import apiService from '@/app/lib/apiService';
type Lesson = {
id: string;
title: string;
duration: string; // "12:46" 형식
state: "제출완료" | "제출대기";
action: "복습하기" | "이어서 수강하기" | "수강하기";
};
type CourseDetail = {
id: string;
status: "수강 중" | "수강 예정" | "수강 완료";
title: string;
goal: string;
method: string;
summary: string; // VOD · 총 n강 · n시간 n분
submitSummary: string; // 학습 제출 n/n
thumbnail: string;
lessons: Lesson[];
};
export default function AdminCourseDetailPage() {
const params = useParams();
const router = useRouter();
const [course, setCourse] = useState<CourseDetail | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
const fetchCourse = async () => {
if (!params?.id) return;
try {
setLoading(true);
setError(null);
// sessionStorage에서 저장된 강좌 데이터 가져오기
let data: any = null;
const storedData = typeof window !== 'undefined' ? sessionStorage.getItem('selectedLecture') : null;
if (storedData) {
try {
data = JSON.parse(storedData);
// 사용 후 삭제
sessionStorage.removeItem('selectedLecture');
} catch (e) {
console.error('저장된 데이터 파싱 실패:', e);
}
}
// sessionStorage에 데이터가 없으면 강좌 리스트에서 찾기
if (!data) {
try {
const response = await apiService.getLectures();
const lectures = Array.isArray(response.data)
? response.data
: response.data?.items || response.data?.lectures || response.data?.data || [];
data = lectures.find((l: any) => String(l.id || l.lectureId) === params.id);
} catch (err) {
console.error('강좌 리스트 조회 실패:', err);
}
}
if (!data) {
throw new Error('강좌를 찾을 수 없습니다.');
}
// 첨부파일 정보 구성
const attachmentParts: string[] = [];
if (data.videoUrl) {
attachmentParts.push('강좌영상 1개');
}
if (data.webglUrl) {
attachmentParts.push('VR콘텐츠 1개');
}
if (data.csvKey) {
attachmentParts.push('평가문제 1개');
}
const attachments = attachmentParts.length > 0
? attachmentParts.join(', ')
: '없음';
// 썸네일 이미지 가져오기
let thumbnail = '/imgs/talk.png';
if (data.imageKey) {
try {
const imageUrl = await apiService.getFile(data.imageKey);
if (imageUrl) {
thumbnail = imageUrl;
}
} catch (err) {
console.error('이미지 로드 실패:', err);
}
}
// API 응답 구조에 맞게 데이터 매핑
const courseDetail: CourseDetail = {
id: String(data.id || params.id),
status: "수강 예정", // 관리자 페이지에서는 기본값
title: data.title || data.lectureName || '',
goal: data.objective || data.goal || '',
method: data.method || '',
summary: `VOD · 총 1강`,
submitSummary: '',
thumbnail: thumbnail,
lessons: [
{
id: String(data.id || params.id),
title: data.title || data.lectureName || '',
duration: '00:00',
state: "제출대기",
action: "수강하기",
}
],
};
setCourse(courseDetail);
} catch (err) {
console.error('강좌 조회 실패:', err);
setError(err instanceof Error ? err.message : '강좌를 불러오는데 실패했습니다.');
} finally {
setLoading(false);
}
};
fetchCourse();
}, [params?.id]);
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">
<h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">강좌 상세보기</h1>
</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>
);
}
if (error || !course) {
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">
<h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">강좌 상세보기</h1>
</div>
<section className="px-8 pb-20">
<div className="flex flex-col items-center justify-center py-20">
<p className="text-[16px] text-red-500 mb-4">{error || '강좌를 찾을 수 없습니다.'}</p>
<button
type="button"
onClick={() => router.push('/admin/lessons')}
className="px-4 py-2 rounded-[6px] bg-[#1f2b91] text-white text-[14px] font-medium"
>
강좌 목록으로 돌아가기
</button>
</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="h-[100px] flex items-center">
<div className="flex items-center gap-[12px]">
<button
type="button"
onClick={() => router.push('/admin/lessons')}
className="flex items-center justify-center size-[32px] cursor-pointer hover:opacity-80"
aria-label="뒤로가기"
>
<BackArrowSvg width={32} height={32} />
</button>
<h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">
강좌 상세보기
</h1>
</div>
</div>
{/* 콘텐츠 */}
<section className="pb-20">
<div className="rounded-[8px] bg-white px-8 pb-20 pt-6">
{/* 상단 소개 카드 */}
<div className="flex gap-6 rounded-[8px] bg-[#f8f9fa] p-6">
<div className="relative h-[159px] w-[292px] overflow-hidden rounded">
<Image
src={course.thumbnail}
alt={course.title}
fill
sizes="292px"
className="object-cover"
unoptimized
/>
</div>
<div className="flex-1">
<div className="flex h-[27px] items-center gap-2">
<span className="h-[20px] rounded-[4px] bg-[#e5f5ec] px-1.5 text-[13px] font-semibold leading-[1.4] text-[#0c9d61]">
{course.status}
</span>
<h2 className="text-[18px] font-semibold leading-[1.5] text-[#333c47]">{course.title}</h2>
</div>
<div className="mt-3 space-y-1">
<p className="text-[15px] leading-[1.5] text-[#333c47]">
<span className="font-medium">학습 목표:</span> {course.goal}
</p>
<p className="text-[15px] leading-[1.5] text-[#333c47]">
<span className="font-medium">학습 방법:</span> {course.method}
</p>
</div>
<div className="mt-3 flex items-center gap-5 text-[13px] leading-[1.4] text-[#8c95a1]">
<span>{course.summary}</span>
{course.submitSummary && <span>{course.submitSummary}</span>}
</div>
</div>
</div>
{/* 차시 리스트 */}
<div className="mt-6 space-y-2">
{course.lessons.map((l) => {
const isSubmitted = l.state === "제출완료";
const submitBtnStyle =
l.state === "제출완료"
? "border border-transparent text-[#384fbf]"
: "border " + (l.action === "이어서 수강하기" || l.action === "수강하기" ? "border-[#b1b8c0]" : "border-[#8c95a1]");
const rightBtnStyle =
l.action === "이어서 수강하기"
? "bg-[#ecf0ff] text-[#384fbf]"
: l.action === "수강하기"
? "bg-[#ecf0ff] text-[#384fbf]"
: "bg-[#f1f3f5] text-[#4c5561]";
return (
<div key={l.id} className="rounded-[8px] border border-[#dee1e6] bg-white">
<div className="flex items-center justify-between gap-4 rounded-[8px] px-6 py-4">
<div className="min-w-0">
<p className="text-[16px] font-semibold leading-[1.5] text-[#333c47]">{l.title}</p>
<div className="mt-1 flex items-center gap-3">
<p className="w-[40px] text-[13px] leading-[1.4] text-[#8c95a1]">{l.duration}</p>
</div>
</div>
<div className="flex items-center gap-2">
<button
type="button"
className={[
"h-8 rounded-[6px] px-4 text-[14px] font-medium leading-[1.5]",
"bg-white",
submitBtnStyle,
].join(" ")}
>
{isSubmitted ? "학습 제출 완료" : "학습 제출 하기"}
</button>
<button
type="button"
className={[
"h-8 rounded-[6px] px-4 text-[14px] font-medium leading-[1.5]",
rightBtnStyle,
].join(" ")}
>
{l.action}
</button>
</div>
</div>
</div>
);
})}
</div>
</div>
</section>
</div>
</main>
</div>
</div>
</div>
);
}

512
src/app/admin/lessons/page.tsx
View File

@@ -1,12 +1,14 @@
'use client';
import { useState, useMemo, useRef, useEffect } from "react";
import { useState, useMemo, useRef, useEffect, useCallback } from "react";
import { useRouter } from "next/navigation";
import AdminSidebar from "@/app/components/AdminSidebar";
import ChevronDownSvg from "@/app/svgs/chevrondownsvg";
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";
type Lesson = {
id: string;
@@ -19,6 +21,7 @@ type Lesson = {
};
export default function AdminLessonsPage() {
const router = useRouter();
const [lessons, setLessons] = useState<Lesson[]>([]);
const [currentPage, setCurrentPage] = useState(1);
const [isRegistrationMode, setIsRegistrationMode] = useState(false);
@@ -26,6 +29,8 @@ export default function AdminLessonsPage() {
const dropdownRef = useRef<HTMLDivElement>(null);
const [courses, setCourses] = useState<Course[]>([]);
const [currentUser, setCurrentUser] = useState<string>("관리자");
const [showToast, setShowToast] = useState(false);
const rawLecturesRef = useRef<any[]>([]); // 원본 강좌 데이터 저장
// 등록 폼 상태
const [selectedCourse, setSelectedCourse] = useState<string>("");
@@ -33,9 +38,65 @@ export default function AdminLessonsPage() {
const [learningGoal, setLearningGoal] = useState("");
const [courseVideoCount, setCourseVideoCount] = useState(0);
const [courseVideoFiles, setCourseVideoFiles] = useState<string[]>([]);
const [courseVideoFileObjects, setCourseVideoFileObjects] = useState<File[]>([]);
const [vrContentCount, setVrContentCount] = useState(0);
const [vrContentFiles, setVrContentFiles] = useState<string[]>([]);
const [vrContentFileObjects, setVrContentFileObjects] = useState<File[]>([]);
const [questionFileCount, setQuestionFileCount] = useState(0);
const [questionFileObject, setQuestionFileObject] = useState<File | null>(null);
// 에러 상태
const [errors, setErrors] = useState<{
selectedCourse?: string;
lessonName?: string;
learningGoal?: string;
}>({});
// 교육과정명 매핑 함수
const mapCourseNames = useCallback((lectures: any[]) => {
const fetchedLessons: Lesson[] = lectures.map((lecture: any) => {
// 첨부파일 정보 구성
const attachmentParts: string[] = [];
if (lecture.videoUrl) {
attachmentParts.push('강좌영상 1개');
}
if (lecture.webglUrl) {
attachmentParts.push('VR콘텐츠 1개');
}
if (lecture.csvKey) {
attachmentParts.push('평가문제 1개');
}
const attachments = attachmentParts.length > 0
? attachmentParts.join(', ')
: '없음';
// subjectId로 교육과정명 찾기
const subjectId = lecture.subjectId || lecture.subject_id;
let courseName = '';
if (subjectId && courses.length > 0) {
const foundCourse = courses.find(course => course.id === String(subjectId));
courseName = foundCourse?.courseName || '';
}
// 교육과정명을 찾지 못한 경우 fallback
if (!courseName) {
courseName = lecture.subjectName || lecture.courseName || '';
}
return {
id: String(lecture.id || lecture.lectureId || ''),
courseName,
lessonName: lecture.title || lecture.lessonName || '',
attachments,
questionCount: lecture.csvKey ? 1 : 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);
}, [courses]);
// 교육과정 목록 가져오기
useEffect(() => {
@@ -51,6 +112,34 @@ export default function AdminLessonsPage() {
fetchCourses();
}, []);
// 강좌 리스트 조회
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]);
// 교육과정 목록이 로드되면 강좌 리스트의 교육과정명 업데이트
useEffect(() => {
if (rawLecturesRef.current.length > 0) {
mapCourseNames(rawLecturesRef.current);
}
}, [mapCourseNames]);
// 현재 사용자 정보 가져오기
useEffect(() => {
async function fetchCurrentUser() {
@@ -144,66 +233,215 @@ export default function AdminLessonsPage() {
setLearningGoal("");
setCourseVideoCount(0);
setCourseVideoFiles([]);
setCourseVideoFileObjects([]);
setVrContentCount(0);
setVrContentFiles([]);
setVrContentFileObjects([]);
setQuestionFileCount(0);
setQuestionFileObject(null);
setErrors({});
};
const handleRegisterClick = () => {
setIsRegistrationMode(true);
};
const handleSaveClick = () => {
const handleSaveClick = async () => {
// 유효성 검사
if (!selectedCourse || !lessonName) {
// TODO: 에러 메시지 표시
const newErrors: {
selectedCourse?: string;
lessonName?: string;
learningGoal?: string;
} = {};
if (!selectedCourse) {
newErrors.selectedCourse = "교육과정을 선택해 주세요.";
}
if (!lessonName.trim()) {
newErrors.lessonName = "강좌명을 입력해 주세요.";
}
if (!learningGoal.trim()) {
newErrors.learningGoal = "내용을 입력해 주세요.";
}
// 에러가 있으면 표시하고 중단
if (Object.keys(newErrors).length > 0) {
setErrors(newErrors);
return;
}
// 첨부파일 정보 문자열 생성
const attachmentParts: string[] = [];
if (courseVideoCount > 0) {
attachmentParts.push(`강좌영상 ${courseVideoCount}개`);
// 에러 초기화
setErrors({});
try {
// 파일 업로드 및 키 추출
let videoUrl: string | undefined;
let webglUrl: string | undefined;
let csvKey: string | undefined;
// 강좌 영상 업로드 (첫 번째 파일만 사용)
if (courseVideoFileObjects.length > 0) {
try {
const uploadResponse = await apiService.uploadFile(courseVideoFileObjects[0]);
if (uploadResponse.data) {
const fileKey = uploadResponse.data.key
|| uploadResponse.data.fileKey
|| uploadResponse.data.id
|| uploadResponse.data.imageKey
|| uploadResponse.data.fileId
|| (uploadResponse.data.data && (uploadResponse.data.data.key || uploadResponse.data.data.fileKey))
|| null;
if (fileKey) {
videoUrl = fileKey;
}
}
} catch (error) {
console.error('강좌 영상 업로드 실패:', error);
}
}
// VR 콘텐츠 업로드 (첫 번째 파일만 사용)
if (vrContentFileObjects.length > 0) {
try {
const uploadResponse = await apiService.uploadFile(vrContentFileObjects[0]);
if (uploadResponse.data) {
const fileKey = uploadResponse.data.key
|| uploadResponse.data.fileKey
|| uploadResponse.data.id
|| uploadResponse.data.imageKey
|| uploadResponse.data.fileId
|| (uploadResponse.data.data && (uploadResponse.data.data.key || uploadResponse.data.data.fileKey))
|| null;
if (fileKey) {
webglUrl = fileKey;
}
}
} catch (error) {
console.error('VR 콘텐츠 업로드 실패:', error);
}
}
// 학습 평가 문제 업로드
if (questionFileObject) {
try {
const uploadResponse = await apiService.uploadFile(questionFileObject);
if (uploadResponse.data) {
const fileKey = uploadResponse.data.key
|| uploadResponse.data.fileKey
|| uploadResponse.data.id
|| uploadResponse.data.imageKey
|| uploadResponse.data.fileId
|| (uploadResponse.data.data && (uploadResponse.data.data.key || uploadResponse.data.data.fileKey))
|| null;
if (fileKey) {
csvKey = fileKey;
}
}
} catch (error) {
console.error('학습 평가 문제 업로드 실패:', error);
}
}
// API 요청 body 구성
const requestBody: {
subjectId: number;
title: string;
objective: string;
videoUrl?: string;
webglUrl?: string;
csvKey?: string;
} = {
subjectId: Number(selectedCourse),
title: lessonName.trim(),
objective: learningGoal.trim(),
};
// 선택적 필드 추가
if (videoUrl) {
requestBody.videoUrl = videoUrl;
}
if (webglUrl) {
requestBody.webglUrl = webglUrl;
}
if (csvKey) {
requestBody.csvKey = csvKey;
}
// 강좌 등록 API 호출
const response = await apiService.createLecture(requestBody);
// 응답에서 id 추출 및 저장
const lectureId = response.data?.id;
if (!lectureId) {
throw new Error('강좌 등록 응답에서 ID를 받지 못했습니다.');
}
// 첨부파일 정보 문자열 생성
const attachmentParts: string[] = [];
if (courseVideoCount > 0) {
attachmentParts.push(`강좌영상 ${courseVideoCount}개`);
}
if (vrContentCount > 0) {
attachmentParts.push(`VR콘텐츠 ${vrContentCount}개`);
}
if (questionFileCount > 0) {
attachmentParts.push(`평가문제 ${questionFileCount}개`);
}
const attachments = attachmentParts.length > 0
? attachmentParts.join(', ')
: '없음';
// 교육과정명 가져오기
const courseName = courseOptions.find(c => c.id === selectedCourse)?.name || '';
// 새 강좌 생성 (API 응답의 id 사용)
const newLesson: Lesson = {
id: String(lectureId),
courseName,
lessonName,
attachments,
questionCount: questionFileCount,
createdBy: currentUser,
createdAt: new Date().toISOString().split('T')[0],
};
// 강좌 목록에 추가
setLessons(prev => [...prev, newLesson]);
// 등록 모드 종료 및 폼 초기화
setIsRegistrationMode(false);
setSelectedCourse("");
setLessonName("");
setLearningGoal("");
setCourseVideoCount(0);
setCourseVideoFiles([]);
setCourseVideoFileObjects([]);
setVrContentCount(0);
setVrContentFiles([]);
setVrContentFileObjects([]);
setQuestionFileCount(0);
setQuestionFileObject(null);
// 토스트 팝업 표시
setShowToast(true);
} catch (error) {
console.error('강좌 등록 실패:', error);
const errorMessage = error instanceof Error ? error.message : '강좌 등록 중 오류가 발생했습니다.';
alert(errorMessage);
}
if (vrContentCount > 0) {
attachmentParts.push(`VR콘텐츠 ${vrContentCount}개`);
}
if (questionFileCount > 0) {
attachmentParts.push(`평가문제 ${questionFileCount}개`);
}
const attachments = attachmentParts.length > 0
? attachmentParts.join(', ')
: '없음';
// 교육과정명 가져오기
const courseName = courseOptions.find(c => c.id === selectedCourse)?.name || '';
// 새 강좌 생성
const newLesson: Lesson = {
id: String(Date.now()),
courseName,
lessonName,
attachments,
questionCount: questionFileCount,
createdBy: currentUser,
createdAt: new Date().toISOString().split('T')[0],
};
// 강좌 목록에 추가
setLessons(prev => [...prev, newLesson]);
// 등록 모드 종료 및 폼 초기화
setIsRegistrationMode(false);
setSelectedCourse("");
setLessonName("");
setLearningGoal("");
setCourseVideoCount(0);
setCourseVideoFiles([]);
setVrContentCount(0);
setVrContentFiles([]);
setQuestionFileCount(0);
};
// 토스트 자동 닫기
useEffect(() => {
if (showToast) {
const timer = setTimeout(() => {
setShowToast(false);
}, 3000); // 3초 후 자동 닫기
return () => clearTimeout(timer);
}
}, [showToast]);
return (
<div className="min-h-screen flex flex-col bg-white">
{/* 메인 레이아웃 */}
@@ -254,7 +492,9 @@ export default function AdminLessonsPage() {
<button
type="button"
onClick={() => setIsDropdownOpen(!isDropdownOpen)}
className="w-full h-[40px] px-[12px] py-[8px] border border-[#dee1e6] rounded-[8px] bg-white flex items-center justify-between focus:outline-none focus:shadow-[inset_0_0_0_1px_#333c47] cursor-pointer"
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]'
@@ -266,7 +506,7 @@ export default function AdminLessonsPage() {
<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">
<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}
@@ -274,6 +514,10 @@ export default function AdminLessonsPage() {
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
@@ -291,6 +535,11 @@ export default function AdminLessonsPage() {
</div>
)}
</div>
{errors.selectedCourse && (
<p className="text-[14px] font-normal leading-[1.5] text-[#e63946]">
{errors.selectedCourse}
</p>
)}
</div>
{/* 강좌명 */}
@@ -301,10 +550,23 @@ export default function AdminLessonsPage() {
<input
type="text"
value={lessonName}
onChange={(e) => setLessonName(e.target.value)}
onChange={(e) => {
setLessonName(e.target.value);
// 에러 초기화
if (errors.lessonName) {
setErrors(prev => ({ ...prev, lessonName: undefined }));
}
}}
placeholder="강좌명을 입력해 주세요."
className="h-[40px] px-[12px] py-[8px] border border-[#dee1e6] 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]"
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>
{/* 학습 목표 */}
@@ -318,10 +580,16 @@ export default function AdminLessonsPage() {
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 border-[#dee1e6] 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"
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">
@@ -329,6 +597,11 @@ export default function AdminLessonsPage() {
</p>
</div>
</div>
{errors.learningGoal && (
<p className="text-[14px] font-normal leading-[1.5] text-[#e63946]">
{errors.learningGoal}
</p>
)}
</div>
</div>
</div>
@@ -357,22 +630,50 @@ export default function AdminLessonsPage() {
multiple
accept=".mp4,video/mp4"
className="hidden"
onChange={(e) => {
onChange={async (e) => {
const files = e.target.files;
if (!files) return;
const MAX_SIZE = 30 * 1024 * 1024; // 30MB
const mp4Files: string[] = [];
const validFiles: File[] = [];
const oversizedFiles: string[] = [];
Array.from(files).forEach((file) => {
// mp4 파일이고 30MB 이하인 파일만 필터링
if (file.name.toLowerCase().endsWith('.mp4') && file.size <= MAX_SIZE) {
mp4Files.push(file.name);
// mp4 파일인지 확인
if (!file.name.toLowerCase().endsWith('.mp4')) {
return;
}
// 각 파일이 30MB 미만인지 검사
if (file.size < MAX_SIZE) {
validFiles.push(file);
} else {
oversizedFiles.push(file.name);
}
});
if (courseVideoCount + mp4Files.length <= 10) {
setCourseVideoFiles(prev => [...prev, ...mp4Files]);
setCourseVideoCount(prev => prev + mp4Files.length);
// 30MB 이상인 파일이 있으면 알림
if (oversizedFiles.length > 0) {
alert(`다음 파일은 30MB 미만이어야 합니다:\n${oversizedFiles.join('\n')}`);
}
// 파일 개수 제한 확인
if (courseVideoCount + 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('파일 업로드에 실패했습니다. 다시 시도해주세요.');
}
}
// input 초기화 (같은 파일 다시 선택 가능하도록)
e.target.value = '';
@@ -401,6 +702,7 @@ export default function AdminLessonsPage() {
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"
@@ -433,22 +735,50 @@ export default function AdminLessonsPage() {
multiple
accept=".zip,application/zip"
className="hidden"
onChange={(e) => {
onChange={async (e) => {
const files = e.target.files;
if (!files) return;
const MAX_SIZE = 30 * 1024 * 1024; // 30MB
const zipFiles: string[] = [];
const validFiles: File[] = [];
const oversizedFiles: string[] = [];
Array.from(files).forEach((file) => {
// zip 파일이고 30MB 이하인 파일만 필터링
if (file.name.toLowerCase().endsWith('.zip') && file.size <= MAX_SIZE) {
zipFiles.push(file.name);
// zip 파일인지 확인
if (!file.name.toLowerCase().endsWith('.zip')) {
return;
}
// 각 파일이 30MB 미만인지 검사
if (file.size < MAX_SIZE) {
validFiles.push(file);
} else {
oversizedFiles.push(file.name);
}
});
if (vrContentCount + zipFiles.length <= 10) {
setVrContentFiles(prev => [...prev, ...zipFiles]);
setVrContentCount(prev => prev + zipFiles.length);
// 30MB 이상인 파일이 있으면 알림
if (oversizedFiles.length > 0) {
alert(`다음 파일은 30MB 미만이어야 합니다:\n${oversizedFiles.join('\n')}`);
}
// 파일 개수 제한 확인
if (vrContentCount + 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('파일 업로드에 실패했습니다. 다시 시도해주세요.');
}
}
// input 초기화 (같은 파일 다시 선택 가능하도록)
e.target.value = '';
@@ -477,6 +807,7 @@ export default function AdminLessonsPage() {
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"
@@ -515,14 +846,22 @@ export default function AdminLessonsPage() {
type="file"
accept=".csv"
className="hidden"
onChange={(e) => {
onChange={async (e) => {
const files = e.target.files;
if (!files || files.length === 0) return;
const file = files[0];
// CSV 파일만 허용
if (file.name.toLowerCase().endsWith('.csv')) {
setQuestionFileCount(1);
try {
// 단일 파일 업로드
await apiService.uploadFile(file);
setQuestionFileObject(file);
setQuestionFileCount(1);
} catch (error) {
console.error('학습 평가 문제 업로드 실패:', error);
alert('파일 업로드에 실패했습니다. 다시 시도해주세요.');
}
}
}}
/>
@@ -618,10 +957,23 @@ export default function AdminLessonsPage() {
</tr>
</thead>
<tbody>
{paginatedLessons.map((lesson) => (
{paginatedLessons.map((lesson) => {
// 원본 강좌 데이터 찾기
const rawLecture = rawLecturesRef.current.find(
(l: any) => String(l.id || l.lectureId) === lesson.id
);
return (
<tr
key={lesson.id}
className="h-12 hover:bg-[#F5F7FF] transition-colors"
onClick={() => {
// 원본 데이터를 sessionStorage에 저장
if (rawLecture) {
sessionStorage.setItem('selectedLecture', JSON.stringify(rawLecture));
}
router.push(`/admin/lessons/${lesson.id}`);
}}
className="h-12 hover:bg-[#F5F7FF] transition-colors cursor-pointer"
>
<td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
{lesson.courseName}
@@ -642,7 +994,8 @@ export default function AdminLessonsPage() {
{lesson.createdAt}
</td>
</tr>
))}
);
})}
</tbody>
</table>
</div>
@@ -740,6 +1093,23 @@ export default function AdminLessonsPage() {
</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>
);
}

12
src/app/admin/notices/page.tsx
View File

@@ -5,6 +5,7 @@ import AdminSidebar from "@/app/components/AdminSidebar";
import ChevronDownSvg from "@/app/svgs/chevrondownsvg";
import BackArrowSvg from "@/app/svgs/backarrow";
import { MOCK_NOTICES, type Notice } from "@/app/admin/notices/mockData";
import apiService from "@/app/lib/apiService";
export default function AdminNoticesPage() {
const [notices, setNotices] = useState<Notice[]>(MOCK_NOTICES);
@@ -30,14 +31,21 @@ export default function AdminNoticesPage() {
fileInputRef.current?.click();
};
const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
const handleFileChange = async (e: ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0];
if (file) {
if (file.size > 30 * 1024 * 1024) {
alert('30MB 미만의 파일만 첨부할 수 있습니다.');
return;
}
setAttachedFile(file);
try {
// 단일 파일 업로드
await apiService.uploadFile(file);
setAttachedFile(file);
} catch (error) {
console.error('파일 업로드 실패:', error);
alert('파일 업로드에 실패했습니다. 다시 시도해주세요.');
}
}
};

212
src/app/course-list/[id]/page.tsx Normal file
View File

@@ -0,0 +1,212 @@
'use client';
import { useEffect, useState } from 'react';
import { useParams, useRouter } from 'next/navigation';
import Image from 'next/image';
import apiService from '../../lib/apiService';
type Lesson = {
id: string;
title: string;
duration: string; // "12:46" 형식
state: "제출완료" | "제출대기";
action: "복습하기" | "이어서 수강하기" | "수강하기";
};
type CourseDetail = {
id: string;
status: "수강 중" | "수강 예정" | "수강 완료";
title: string;
goal: string;
method: string;
summary: string; // VOD · 총 n강 · n시간 n분
submitSummary: string; // 학습 제출 n/n
thumbnail: string;
lessons: Lesson[];
};
export default function CourseDetailPage() {
const params = useParams();
const router = useRouter();
const [course, setCourse] = useState<CourseDetail | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
const fetchCourse = async () => {
if (!params?.id) return;
try {
setLoading(true);
setError(null);
const response = await apiService.getLecture(params.id as string);
// API 응답 데이터를 CourseDetail 타입으로 변환
const data = response.data;
// API 응답 구조에 맞게 데이터 매핑
// 실제 API 응답 구조에 따라 조정 필요
const courseDetail: CourseDetail = {
id: String(data.id || params.id),
status: data.status || "수강 예정",
title: data.title || data.lectureName || '',
goal: data.objective || data.goal || '',
method: data.method || '',
summary: data.summary || `VOD · 총 ${data.lessons?.length || 0}강`,
submitSummary: data.submitSummary || '',
thumbnail: data.thumbnail || data.imageKey || data.imageUrl || '/imgs/talk.png',
lessons: (data.lessons || []).map((lesson: any, index: number) => ({
id: String(lesson.id || lesson.lessonId || index + 1),
title: `${index + 1}. ${lesson.title || lesson.lessonName || ''}`,
duration: lesson.duration || '00:00',
state: lesson.isCompleted ? "제출완료" : "제출대기",
action: lesson.isCompleted ? "복습하기" : (index === 0 ? "수강하기" : "이어서 수강하기"),
})),
};
setCourse(courseDetail);
} catch (err) {
console.error('강좌 조회 실패:', err);
setError(err instanceof Error ? err.message : '강좌를 불러오는데 실패했습니다.');
} finally {
setLoading(false);
}
};
fetchCourse();
}, [params?.id]);
if (loading) {
return (
<main className="flex w-full flex-col">
<div className="flex h-[100px] items-center px-8">
<h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">교육 과정 상세보기</h1>
</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>
</main>
);
}
if (error || !course) {
return (
<main className="flex w-full flex-col">
<div className="flex h-[100px] items-center px-8">
<h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">교육 과정 상세보기</h1>
</div>
<section className="px-8 pb-20">
<div className="flex flex-col items-center justify-center py-20">
<p className="text-[16px] text-red-500 mb-4">{error || '강좌를 찾을 수 없습니다.'}</p>
<button
type="button"
onClick={() => router.push('/course-list')}
className="px-4 py-2 rounded-[6px] bg-primary text-white text-[14px] font-medium"
>
강좌 목록으로 돌아가기
</button>
</div>
</section>
</main>
);
}
return (
<main className="flex w-full flex-col">
<div className="flex h-[100px] items-center px-8">
<h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">교육 과정 상세보기</h1>
</div>
<section className="px-8 pb-20">
<div className="rounded-[8px] bg-white px-8 pb-20 pt-6">
{/* 상단 소개 카드 */}
<div className="flex gap-6 rounded-[8px] bg-[#f8f9fa] p-6">
<div className="relative h-[159px] w-[292px] overflow-hidden rounded">
<Image
src={course.thumbnail}
alt={course.title}
fill
sizes="292px"
className="object-cover"
unoptimized
/>
</div>
<div className="flex-1">
<div className="flex h-[27px] items-center gap-2">
<span className="h-[20px] rounded-[4px] bg-[#e5f5ec] px-1.5 text-[13px] font-semibold leading-[1.4] text-[#0c9d61]">
{course.status}
</span>
<h2 className="text-[18px] font-semibold leading-[1.5] text-[#333c47]">{course.title}</h2>
</div>
<div className="mt-3 space-y-1">
<p className="text-[15px] leading-[1.5] text-[#333c47]">
<span className="font-medium">학습 목표:</span> {course.goal}
</p>
<p className="text-[15px] leading-[1.5] text-[#333c47]">
<span className="font-medium">학습 방법:</span> {course.method}
</p>
</div>
<div className="mt-3 flex items-center gap-5 text-[13px] leading-[1.4] text-[#8c95a1]">
<span>{course.summary}</span>
{course.submitSummary && <span>{course.submitSummary}</span>}
</div>
</div>
</div>
{/* 차시 리스트 */}
<div className="mt-6 space-y-2">
{course.lessons.map((l) => {
const isSubmitted = l.state === "제출완료";
const submitBtnStyle =
l.state === "제출완료"
? "border border-transparent text-[#384fbf]"
: "border " + (l.action === "이어서 수강하기" || l.action === "수강하기" ? "border-[#b1b8c0]" : "border-[#8c95a1]");
const rightBtnStyle =
l.action === "이어서 수강하기"
? "bg-[#ecf0ff] text-[#384fbf]"
: l.action === "수강하기"
? "bg-[#ecf0ff] text-[#384fbf]"
: "bg-[#f1f3f5] text-[#4c5561]";
return (
<div key={l.id} className="rounded-[8px] border border-[#dee1e6] bg-white">
<div className="flex items-center justify-between gap-4 rounded-[8px] px-6 py-4">
<div className="min-w-0">
<p className="text-[16px] font-semibold leading-[1.5] text-[#333c47]">{l.title}</p>
<div className="mt-1 flex items-center gap-3">
<p className="w-[40px] text-[13px] leading-[1.4] text-[#8c95a1]">{l.duration}</p>
</div>
</div>
<div className="flex items-center gap-2">
<button
type="button"
className={[
"h-8 rounded-[6px] px-4 text-[14px] font-medium leading-[1.5]",
"bg-white",
submitBtnStyle,
].join(" ")}
>
{isSubmitted ? "학습 제출 완료" : "학습 제출 하기"}
</button>
<button
type="button"
className={[
"h-8 rounded-[6px] px-4 text-[14px] font-medium leading-[1.5]",
rightBtnStyle,
].join(" ")}
>
{l.action}
</button>
</div>
</div>
</div>
);
})}
</div>
</div>
</section>
</main>
);
}

5
src/app/course-list/page.tsx
View File

@@ -1,6 +1,7 @@
'use client';
import { useMemo, useState } from 'react';
import { useRouter } from 'next/navigation';
import ChevronDownSvg from '../svgs/chevrondownsvg';
// 피그마 선택 컴포넌트의 구조/스타일(타이포/여백/색상)을 반영한 리스트 UI
@@ -27,6 +28,7 @@ type Course = { id: string; title: string; image: string; inProgress?: boolean }
export default function CourseListPage() {
const ITEMS_PER_PAGE = 20;
const [page, setPage] = useState(1);
const router = useRouter();
const base: Omit<Course, 'id'>[] = [
{ title: '원자로 운전 및 계통', image: imgThumbA, inProgress: true },
@@ -75,7 +77,8 @@ export default function CourseListPage() {
{pagedCourses.map((c) => (
<article
key={c.id}
className="flex h-[260px] w-[249.6px] flex-col gap-[16px] rounded-[8px] bg-white"
onClick={() => router.push(`/course-list/${c.id}`)}
className="flex h-[260px] w-[249.6px] flex-col gap-[16px] rounded-[8px] bg-white cursor-pointer hover:shadow-lg transition-shadow"
>
{/* 섬네일 */}
<div className="relative h-[166.4px] w-full overflow-clip rounded-[8px]">

23
src/app/globals.css
View File

@@ -61,3 +61,26 @@ button {
button:hover {
cursor: pointer;
}
/* 드롭다운 스크롤바 스타일 - 배경 없애기 */
.dropdown-scroll {
scrollbar-width: thin;
scrollbar-color: transparent transparent;
}
.dropdown-scroll::-webkit-scrollbar {
width: 6px;
}
.dropdown-scroll::-webkit-scrollbar-track {
background: transparent;
}
.dropdown-scroll::-webkit-scrollbar-thumb {
background-color: transparent;
border-radius: 3px;
}
.dropdown-scroll:hover::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.2);
}

123
src/app/lib/apiService.ts
View File

@@ -46,10 +46,13 @@ class ApiService {
/**
* 기본 헤더 생성
*/
private getDefaultHeaders(): Record<string, string> {
const headers: Record<string, string> = {
'Content-Type': 'application/json',
};
private getDefaultHeaders(isFormData: boolean = false): Record<string, string> {
const headers: Record<string, string> = {};
// FormData인 경우 Content-Type을 설정하지 않음 (브라우저가 자동으로 설정)
if (!isFormData) {
headers['Content-Type'] = 'application/json';
}
const token = this.getToken();
if (token) {
@@ -98,16 +101,20 @@ class ApiService {
const url = endpoint.startsWith('http') ? endpoint : `${this.baseURL}${endpoint}`;
// FormData 여부 확인
const isFormData = body instanceof FormData;
const requestOptions: RequestInit = {
method,
headers: {
...this.getDefaultHeaders(),
...this.getDefaultHeaders(isFormData),
...headers,
},
};
if (body && method !== 'GET') {
requestOptions.body = JSON.stringify(body);
// FormData인 경우 그대로 사용, 아닌 경우 JSON으로 변환
requestOptions.body = isFormData ? body : JSON.stringify(body);
}
try {
@@ -277,11 +284,12 @@ class ApiService {
* 과목 수정
*/
async updateSubject(subjectId: string, subjectData: {
courseName: string;
instructorName: string;
title: string;
instructor: string;
imageKey?: string | null;
}) {
return this.request(`/subjects/${subjectId}`, {
method: 'PUT',
method: 'PATCH',
body: subjectData,
});
}
@@ -347,12 +355,109 @@ class ApiService {
return this.request('/lessons');
}
/**
* 강좌 리스트 조회
*/
async getLectures() {
return this.request('/lectures', {
method: 'GET',
});
}
/**
* 특정 강좌 조회
*/
async getLecture(id: string | number) {
return this.request(`/lectures/${id}`, {
method: 'GET',
});
}
/**
* 강좌(lecture) 생성
*/
async createLecture(lectureData: {
subjectId: number;
title: string;
objective: string;
videoUrl?: string;
webglUrl?: string;
csvKey?: string;
}) {
return this.request('/lectures', {
method: 'POST',
body: lectureData,
});
}
/**
* 리소스 조회
*/
async getResources() {
return this.request('/resources');
}
// ===== 파일 업로드 관련 API =====
/**
* 단일 파일 업로드
* @param file 업로드할 파일 (File 객체 또는 Blob)
*/
async uploadFile(file: File | Blob) {
const formData = new FormData();
formData.append('file', file);
return this.request('/uploads-api/file', {
method: 'POST',
body: formData,
});
}
/**
* 다중 파일 업로드
* @param files 업로드할 파일 배열 (File[] 또는 Blob[])
*/
async uploadFiles(files: (File | Blob)[]) {
const formData = new FormData();
files.forEach((file, index) => {
formData.append('files', file);
});
return this.request('/uploads-api/files', {
method: 'POST',
body: formData,
});
}
/**
* 파일 다운로드 (이미지 URL 가져오기)
* @param fileKey 파일 키
* @returns 파일 URL (Blob URL), 파일이 없으면 null 반환
*/
async getFile(fileKey: string): Promise<string | null> {
const url = `${this.baseURL}/api/files/${fileKey}`;
const token = this.getToken();
const response = await fetch(url, {
method: 'GET',
headers: {
...(token && { Authorization: `Bearer ${token}` }),
},
});
// 404 에러는 이미지가 없는 것으로 간주하고 null 반환
if (response.status === 404) {
return null;
}
if (!response.ok) {
throw new Error(`파일을 가져오는데 실패했습니다. (${response.status})`);
}
// 이미지 파일이므로 Blob으로 변환하여 URL 생성
const blob = await response.blob();
return URL.createObjectURL(blob);
}
}
// 기본 API 서비스 인스턴스 생성

2
src/app/login/page.tsx
View File

@@ -8,7 +8,7 @@ import LoginCheckboxActiveSvg from "@/app/svgs/logincheckboxactivesvg";
import LoginCheckboxInactiveSvg from "@/app/svgs/logincheckboxinactivesvg";
import LoginInputSvg from "@/app/svgs/inputformx";
import LoginErrorModal from "./LoginErrorModal";
import LoginOption from "@/app/login/LoginOption";
import LoginOption from "@/app/login/loginoption";
import apiService from "@/app/lib/apiService";
export default function LoginPage() {