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-19 23:36:05 +09:00
parent 33d738f7d0
commit 24f17b1dd1
8 changed files with 691 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,11 +5,21 @@ 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 { MOCK_COURSES } from "@/app/admin/courses/mockData";
import { MOCK_COURSES, MOCK_CURRENT_USER } from "@/app/admin/courses/mockData";
import CloseXOSvg from "@/app/svgs/closexo";
type Lesson = {
id: string;
courseName: string; // 교육과정명
lessonName: string; // 강좌명
attachments: string; // 첨부파일 (예: "강좌영상 3개, VR콘텐츠 2개, 평가문제 1개")
questionCount: number; // 학습 평가 문제 수
createdBy: string; // 등록자
createdAt: string; // 등록일
};
export default function AdminLessonsPage() {
// TODO: 나중에 실제 데이터로 교체
const items: any[] = [];
const [lessons, setLessons] = useState<Lesson[]>([]);
const [currentPage, setCurrentPage] = useState(1);
const [isRegistrationMode, setIsRegistrationMode] = useState(false);
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
@@ -20,17 +30,27 @@ export default function AdminLessonsPage() {
const [lessonName, setLessonName] = useState("");
const [learningGoal, setLearningGoal] = useState("");
const [courseVideoCount, setCourseVideoCount] = useState(0);
const [courseVideoFiles, setCourseVideoFiles] = useState<string[]>([]);
const [vrContentCount, setVrContentCount] = useState(0);
const [vrContentFiles, setVrContentFiles] = useState<string[]>([]);
const [questionFileCount, setQuestionFileCount] = useState(0);
const totalCount = useMemo(() => items.length, [items]);
const totalCount = useMemo(() => lessons.length, [lessons]);
const ITEMS_PER_PAGE = 10;
const totalPages = Math.ceil(items.length / ITEMS_PER_PAGE);
const paginatedItems = useMemo(() => {
const sortedLessons = useMemo(() => {
return [...lessons].sort((a, b) => {
// 생성일 내림차순 정렬 (최신 날짜가 먼저)
return b.createdAt.localeCompare(a.createdAt);
});
}, [lessons]);
const totalPages = Math.ceil(sortedLessons.length / ITEMS_PER_PAGE);
const paginatedLessons = useMemo(() => {
const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
const endIndex = startIndex + ITEMS_PER_PAGE;
return items.slice(startIndex, endIndex);
}, [items, currentPage]);
return sortedLessons.slice(startIndex, endIndex);
}, [sortedLessons, currentPage]);
// 교육과정 옵션 - mockData에서 가져오기
const courseOptions = useMemo(() =>
@@ -67,13 +87,67 @@ export default function AdminLessonsPage() {
setLessonName("");
setLearningGoal("");
setCourseVideoCount(0);
setCourseVideoFiles([]);
setVrContentCount(0);
setVrContentFiles([]);
setQuestionFileCount(0);
};
const handleRegisterClick = () => {
setIsRegistrationMode(true);
};
const handleSaveClick = () => {
// 유효성 검사
if (!selectedCourse || !lessonName) {
// TODO: 에러 메시지 표시
return;
}
// 첨부파일 정보 문자열 생성
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 || '';
// 새 강좌 생성
const newLesson: Lesson = {
id: String(Date.now()),
courseName,
lessonName,
attachments,
questionCount: questionFileCount,
createdBy: MOCK_CURRENT_USER,
createdAt: new Date().toISOString().split('T')[0],
};
// 강좌 목록에 추가
setLessons(prev => [...prev, newLesson]);
// 등록 모드 종료 및 폼 초기화
setIsRegistrationMode(false);
setSelectedCourse("");
setLessonName("");
setLearningGoal("");
setCourseVideoCount(0);
setCourseVideoFiles([]);
setVrContentCount(0);
setVrContentFiles([]);
setQuestionFileCount(0);
};
return (
<div className="min-h-screen flex flex-col bg-white">
{/* 메인 레이아웃 */}
@@ -124,7 +198,7 @@ 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:ring-2 focus:ring-[#1f2b91] focus:border-transparent cursor-pointer"
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"
>
<span className={`text-[16px] font-normal leading-[1.5] flex-1 text-left ${
selectedCourse ? 'text-[#1b2027]' : 'text-[#6c7682]'
@@ -173,7 +247,7 @@ export default function AdminLessonsPage() {
value={lessonName}
onChange={(e) => setLessonName(e.target.value)}
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:ring-2 focus:ring-[#1f2b91] focus:border-transparent"
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]"
/>
</div>
@@ -191,7 +265,7 @@ export default function AdminLessonsPage() {
}
}}
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:ring-2 focus:ring-[#1f2b91] focus:border-transparent resize-none"
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"
/>
<div className="absolute bottom-[8px] right-[12px]">
<p className="text-[13px] font-normal leading-[1.4] text-[#6c7682] text-right">
@@ -220,17 +294,68 @@ export default function AdminLessonsPage() {
30MB 미만 파일
</span>
</div>
<button
type="button"
className="h-[32px] 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"
>
첨부
</button>
<label className="h-[32px] w-[62px] px-[4px] py-[3px] border border-[#8c95a1] rounded-[6px] bg-white text-[13px] font-medium leading-[1.4] text-[#4c5561] whitespace-nowrap hover:bg-gray-50 transition-colors cursor-pointer flex items-center justify-center">
<span>첨부</span>
<input
type="file"
multiple
accept=".mp4,video/mp4"
className="hidden"
onChange={(e) => {
const files = e.target.files;
if (!files) return;
const MAX_SIZE = 30 * 1024 * 1024; // 30MB
const mp4Files: string[] = [];
Array.from(files).forEach((file) => {
// mp4 파일이고 30MB 이하인 파일만 필터링
if (file.name.toLowerCase().endsWith('.mp4') && file.size <= MAX_SIZE) {
mp4Files.push(file.name);
}
});
if (courseVideoCount + mp4Files.length <= 10) {
setCourseVideoFiles(prev => [...prev, ...mp4Files]);
setCourseVideoCount(prev => prev + mp4Files.length);
}
// input 초기화 (같은 파일 다시 선택 가능하도록)
e.target.value = '';
}}
/>
</label>
</div>
<div className="h-[64px] border border-[#dee1e6] rounded-[8px] bg-gray-50 flex items-center justify-center">
<p className="text-[14px] font-normal leading-[1.5] text-[#8c95a1] text-center">
강좌 주제별 영상 파일을 첨부해주세요.
</p>
<div className="border border-[#dee1e6] rounded-[8px] bg-gray-50">
{courseVideoFiles.length === 0 ? (
<div className="h-[64px] flex items-center justify-center">
<p className="text-[14px] font-normal leading-[1.5] text-[#8c95a1] text-center">
강좌 주제별 영상 파일을 첨부해주세요.
</p>
</div>
) : (
<div className="flex flex-col py-[12px]">
{courseVideoFiles.map((fileName, index) => (
<div
key={index}
className="h-[40px] px-[20px] py-[12px] flex items-center gap-[12px]"
>
<p className="flex-1 text-[15px] font-normal leading-[1.5] text-[#333c47]">
{fileName}
</p>
<button
type="button"
onClick={() => {
setCourseVideoFiles(prev => prev.filter((_, i) => i !== index));
setCourseVideoCount(prev => prev - 1);
}}
className="size-[16px] flex items-center justify-center cursor-pointer hover:opacity-70 transition-opacity shrink-0"
aria-label="파일 삭제"
>
<CloseXOSvg />
</button>
</div>
))}
</div>
)}
</div>
</div>
@@ -239,23 +364,74 @@ export default function AdminLessonsPage() {
<div className="flex items-center justify-between h-[32px]">
<div className="flex items-center gap-[8px]">
<label className="text-[15px] font-semibold leading-[1.5] text-[#6c7682]">
VR 콘텐츠 <span className="font-normal">({vrContentCount}/10)</span>
VR 콘텐츠 ({vrContentCount}/10)
</label>
<span className="text-[13px] font-normal leading-[1.4] text-[#8c95a1]">
30MB 미만 파일
</span>
</div>
<button
type="button"
className="h-[32px] 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"
>
첨부
</button>
<label className="h-[32px] w-[62px] px-[4px] py-[3px] border border-[#8c95a1] rounded-[6px] bg-white text-[13px] font-medium leading-[1.4] text-[#4c5561] whitespace-nowrap hover:bg-gray-50 transition-colors cursor-pointer flex items-center justify-center">
<span>첨부</span>
<input
type="file"
multiple
accept=".zip,application/zip"
className="hidden"
onChange={(e) => {
const files = e.target.files;
if (!files) return;
const MAX_SIZE = 30 * 1024 * 1024; // 30MB
const zipFiles: string[] = [];
Array.from(files).forEach((file) => {
// zip 파일이고 30MB 이하인 파일만 필터링
if (file.name.toLowerCase().endsWith('.zip') && file.size <= MAX_SIZE) {
zipFiles.push(file.name);
}
});
if (vrContentCount + zipFiles.length <= 10) {
setVrContentFiles(prev => [...prev, ...zipFiles]);
setVrContentCount(prev => prev + zipFiles.length);
}
// input 초기화 (같은 파일 다시 선택 가능하도록)
e.target.value = '';
}}
/>
</label>
</div>
<div className="h-[64px] border border-[#dee1e6] rounded-[8px] bg-gray-50 flex items-center justify-center">
<p className="text-[14px] font-normal leading-[1.5] text-[#8c95a1] text-center">
VR 학습 체험용 콘텐츠 파일을 첨부해주세요.
</p>
<div className="border border-[#dee1e6] rounded-[8px] bg-gray-50">
{vrContentFiles.length === 0 ? (
<div className="h-[64px] flex items-center justify-center">
<p className="text-[14px] font-normal leading-[1.5] text-[#8c95a1] text-center">
VR 학습 체험용 콘텐츠 파일을 첨부해주세요.
</p>
</div>
) : (
<div className="flex flex-col py-[12px]">
{vrContentFiles.map((fileName, index) => (
<div
key={index}
className="h-[40px] px-[20px] py-[12px] flex items-center gap-[12px]"
>
<p className="flex-1 text-[15px] font-normal leading-[1.5] text-[#333c47]">
{fileName}
</p>
<button
type="button"
onClick={() => {
setVrContentFiles(prev => prev.filter((_, i) => i !== index));
setVrContentCount(prev => prev - 1);
}}
className="size-[16px] flex items-center justify-center cursor-pointer hover:opacity-70 transition-opacity shrink-0"
aria-label="파일 삭제"
>
<CloseXOSvg />
</button>
</div>
))}
</div>
)}
</div>
</div>
@@ -277,12 +453,24 @@ export default function AdminLessonsPage() {
>
다운로드
</button>
<button
type="button"
className="h-[32px] 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"
>
첨부
</button>
<label className="h-[32px] w-[62px] px-[4px] py-[3px] border border-[#8c95a1] rounded-[6px] bg-white text-[13px] font-medium leading-[1.4] text-[#4c5561] whitespace-nowrap hover:bg-gray-50 transition-colors cursor-pointer flex items-center justify-center">
<span>첨부</span>
<input
type="file"
accept=".csv"
className="hidden"
onChange={(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);
}
}}
/>
</label>
</div>
</div>
<div className="h-[64px] border border-[#dee1e6] rounded-[8px] bg-gray-50 flex items-center justify-center">
@@ -295,7 +483,7 @@ export default function AdminLessonsPage() {
</div>
{/* 액션 버튼 */}
<div className="flex items-center justify-center gap-[12px]">
<div className="flex items-center justify-end gap-[12px]">
<button
type="button"
onClick={handleBackClick}
@@ -305,6 +493,7 @@ export default function AdminLessonsPage() {
</button>
<button
type="button"
onClick={handleSaveClick}
className="h-[48px] px-[16px] rounded-[10px] bg-[#1f2b91] text-[16px] font-semibold leading-[1.5] text-white hover:bg-[#1a2478] transition-colors cursor-pointer"
>
저장하기
@@ -339,20 +528,72 @@ export default function AdminLessonsPage() {
{/* 콘텐츠 영역 */}
<div className="flex-1 pt-2 flex flex-col">
{items.length === 0 ? (
{lessons.length === 0 ? (
<div className="rounded-lg border border-[#dee1e6] bg-white min-h-[400px] flex items-center justify-center">
<p className="text-[16px] font-medium leading-[1.5] text-[#333c47]">
등록된 강좌가 없습니다.
<br />
강좌를 등록해주세요.
<span className="block text-center">
등록된 강좌가 없습니다.
<br />
강좌를 등록해주세요.
</span>
</p>
</div>
) : (
<>
{/* TODO: 테이블 또는 리스트를 여기에 추가 */}
<div className="rounded-[8px]">
<div className="w-full rounded-[8px] border border-[#dee1e6] overflow-visible">
<table className="min-w-full border-collapse">
<colgroup>
<col />
<col />
<col />
<col style={{ width: 140 }} />
<col style={{ width: 120 }} />
<col style={{ width: 120 }} />
</colgroup>
<thead>
<tr className="h-12 bg-gray-50 text-left">
<th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">교육과정명</th>
<th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">강좌명</th>
<th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">첨부파일</th>
<th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">학습 평가 문제 수</th>
<th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">등록자</th>
<th className="px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">등록일</th>
</tr>
</thead>
<tbody>
{paginatedLessons.map((lesson) => (
<tr
key={lesson.id}
className="h-12 hover:bg-[#F5F7FF] transition-colors"
>
<td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
{lesson.courseName}
</td>
<td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
{lesson.lessonName}
</td>
<td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027]">
{lesson.attachments}
</td>
<td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
{lesson.questionCount}개
</td>
<td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
{lesson.createdBy}
</td>
<td className="border-t border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
{lesson.createdAt}
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
{/* 페이지네이션 - 10개 초과일 때만 표시 */}
{items.length > ITEMS_PER_PAGE && (() => {
{lessons.length > ITEMS_PER_PAGE && (() => {
// 페이지 번호를 10단위로 표시
const pageGroup = Math.floor((currentPage - 1) / 10);
const startPage = pageGroup * 10 + 1;