강좌 수정 삭제 작업중1

src/app/admin/lessons/[id]/edit/page.tsx

@@ -0,0 +1,969 @@
+'use client';
+
+import { useState, useRef, useEffect, useMemo } from "react";
+import { useParams, useRouter } from "next/navigation";
+import AdminSidebar from "@/app/components/AdminSidebar";
+import DropdownIcon from "@/app/svgs/dropdownicon";
+import BackArrowSvg from "@/app/svgs/backarrow";
+import { getCourses, type Course } from "@/app/admin/courses/mockData";
+import CloseXOSvg from "@/app/svgs/closexo";
+import apiService from "@/app/lib/apiService";
+
+export default function LessonEditPage() {
+  const params = useParams();
+  const router = useRouter();
+  const [loading, setLoading] = useState(true);
+  const [isSaving, setIsSaving] = useState(false);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const [courses, setCourses] = useState<Course[]>([]);
+  const [showToast, setShowToast] = useState(false);
+  
+  // 폼 상태
+  const [selectedCourse, setSelectedCourse] = useState<string>("");
+  const [lessonName, setLessonName] = useState("");
+  const [learningGoal, setLearningGoal] = useState("");
+  const [courseVideoCount, setCourseVideoCount] = useState(0);
+  const [courseVideoFiles, setCourseVideoFiles] = useState<string[]>([]);
+  const [courseVideoFileObjects, setCourseVideoFileObjects] = useState<File[]>([]);
+  const [existingVideoFiles, setExistingVideoFiles] = useState<Array<{fileName: string, fileKey?: string, url?: string}>>([]);
+  const [vrContentCount, setVrContentCount] = useState(0);
+  const [vrContentFiles, setVrContentFiles] = useState<string[]>([]);
+  const [vrContentFileObjects, setVrContentFileObjects] = useState<File[]>([]);
+  const [existingVrFiles, setExistingVrFiles] = useState<Array<{fileName: string, fileKey?: string, url?: string}>>([]);
+  const [questionFileCount, setQuestionFileCount] = useState(0);
+  const [questionFileObject, setQuestionFileObject] = useState<File | null>(null);
+  const [existingQuestionFile, setExistingQuestionFile] = useState<{fileName: string, fileKey?: string} | null>(null);
+  
+  // 원본 데이터 저장 (변경사항 비교용)
+  const [originalData, setOriginalData] = useState<{
+    title?: string;
+    objective?: string;
+    videoUrl?: string;
+    webglUrl?: string;
+    csvUrl?: string;
+  } | null>(null);
+  
+  // 에러 상태
+  const [errors, setErrors] = useState<{
+    selectedCourse?: string;
+    lessonName?: string;
+    learningGoal?: string;
+  }>({});
+
+  // 교육과정 옵션
+  const courseOptions = useMemo(() => {
+    return courses.map(course => ({
+      id: course.id,
+      name: course.courseName,
+    }));
+  }, [courses]);
+
+  // 교육과정 목록 로드
+  useEffect(() => {
+    const loadCourses = async () => {
+      try {
+        const data = await getCourses();
+        setCourses(data);
+      } catch (error) {
+        console.error('교육과정 목록 로드 오류:', error);
+      }
+    };
+    loadCourses();
+  }, []);
+
+  // 강좌 데이터 로드
+  useEffect(() => {
+    const loadLecture = async () => {
+      if (!params?.id) return;
+
+      try {
+        setLoading(true);
+        
+        // sessionStorage에서 저장된 강좌 데이터 가져오기
+        let data: any = null;
+        const storedData = typeof window !== 'undefined' ? sessionStorage.getItem('selectedLecture') : null;
+        
+        if (storedData) {
+          try {
+            data = JSON.parse(storedData);
+          } catch (e) {
+            console.error('저장된 데이터 파싱 실패:', e);
+          }
+        }
+        
+        // sessionStorage에 데이터가 없으면 API에서 직접 가져오기
+        if (!data) {
+          try {
+            const response = await apiService.getLecture(params.id as string);
+            data = response.data;
+          } catch (err) {
+            console.error('강좌 조회 실패:', err);
+            // getLecture 실패 시 getLectures로 재시도
+            try {
+              const listResponse = await apiService.getLectures();
+              const lectures = Array.isArray(listResponse.data) 
+                ? listResponse.data 
+                : listResponse.data?.items || listResponse.data?.lectures || listResponse.data?.data || [];
+              
+              data = lectures.find((l: any) => String(l.id || l.lectureId) === params.id);
+            } catch (listErr) {
+              console.error('강좌 리스트 조회 실패:', listErr);
+            }
+          }
+        }
+
+        if (!data) {
+          throw new Error('강좌를 찾을 수 없습니다.');
+        }
+
+        // 원본 데이터 저장
+        const original = {
+          title: data.title || data.lectureName || '',
+          objective: data.objective || data.goal || '',
+          videoUrl: data.videoUrl || undefined,
+          webglUrl: data.webglUrl || data.vrUrl || undefined,
+          csvUrl: data.csvUrl || (data.csvKey ? `csv/${data.csvKey}` : undefined),
+        };
+        setOriginalData(original);
+
+        // 폼에 데이터 채우기
+        if (data.subjectId || data.subject_id) {
+          setSelectedCourse(String(data.subjectId || data.subject_id));
+        }
+        setLessonName(original.title);
+        setLearningGoal(original.objective);
+
+        // 기존 비디오 파일
+        if (data.videoUrl || data.videoKey) {
+          const videoFiles = [];
+          if (data.videoUrl) {
+            videoFiles.push({
+              fileName: data.videoFileName || '강좌영상.mp4',
+              fileKey: data.videoKey,
+              url: data.videoUrl,
+            });
+          }
+          if (data.videoFiles && Array.isArray(data.videoFiles)) {
+            data.videoFiles.forEach((vf: any) => {
+              videoFiles.push({
+                fileName: vf.fileName || vf.name || '강좌영상.mp4',
+                fileKey: vf.fileKey || vf.key,
+                url: vf.url || vf.videoUrl,
+              });
+            });
+          }
+          setExistingVideoFiles(videoFiles);
+          setCourseVideoCount(videoFiles.length);
+        }
+
+        // 기존 VR 파일
+        if (data.webglUrl || data.vrUrl || data.webglKey || data.vrKey) {
+          const vrFiles = [];
+          if (data.webglUrl || data.vrUrl) {
+            vrFiles.push({
+              fileName: data.vrFileName || data.webglFileName || 'VR_콘텐츠.zip',
+              fileKey: data.webglKey || data.vrKey,
+              url: data.webglUrl || data.vrUrl,
+            });
+          }
+          setExistingVrFiles(vrFiles);
+          setVrContentCount(vrFiles.length);
+        }
+
+        // 기존 평가 문제 파일
+        if (data.csvKey || data.csvUrl) {
+          setExistingQuestionFile({
+            fileName: '평가문제.csv',
+            fileKey: data.csvKey,
+          });
+          setQuestionFileCount(1);
+        }
+      } catch (err) {
+        console.error('강좌 로드 실패:', err);
+        
+        // 기본값 설정 (에러 발생 시에도 폼이 작동하도록)
+        const defaultOriginal = {
+          title: '',
+          objective: '',
+          videoUrl: undefined,
+          webglUrl: undefined,
+          csvUrl: undefined,
+        };
+        setOriginalData(defaultOriginal);
+        
+        alert('강좌를 불러오는데 실패했습니다. 페이지를 새로고침하거나 다시 시도해주세요.');
+        // 에러 발생 시에도 페이지는 유지 (사용자가 수동으로 데이터 입력 가능)
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadLecture();
+  }, [params?.id, router]);
+
+  // 외부 클릭 시 드롭다운 닫기
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setIsDropdownOpen(false);
+      }
+    };
+
+    if (isDropdownOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isDropdownOpen]);
+
+  // 토스트 자동 닫기
+  useEffect(() => {
+    if (showToast) {
+      const timer = setTimeout(() => {
+        setShowToast(false);
+      }, 3000); // 3초 후 자동 닫기
+
+      return () => clearTimeout(timer);
+    }
+  }, [showToast]);
+
+  const handleBackClick = () => {
+    router.push(`/admin/lessons/${params.id}`);
+  };
+
+  const handleSaveClick = async () => {
+    // 유효성 검사
+    const newErrors: {
+      selectedCourse?: string;
+      lessonName?: string;
+      learningGoal?: string;
+    } = {};
+
+    if (!selectedCourse) {
+      newErrors.selectedCourse = "교육과정을 선택해 주세요.";
+    }
+    if (!lessonName.trim()) {
+      newErrors.lessonName = "강좌명을 입력해 주세요.";
+    }
+    if (!learningGoal.trim()) {
+      newErrors.learningGoal = "학습 목표를 입력해 주세요.";
+    }
+
+    setErrors(newErrors);
+
+    if (Object.keys(newErrors).length > 0) {
+      return;
+    }
+
+    if (isSaving) return;
+
+    setIsSaving(true);
+
+    try {
+      if (!originalData) {
+        alert('데이터를 불러오는 중입니다. 잠시 후 다시 시도해주세요.');
+        return;
+      }
+
+      // 새로 업로드된 파일들 처리
+      let videoUrl: string | undefined;
+      let webglUrl: string | undefined;
+      let csvUrl: string | undefined;
+
+      // 강좌 영상 업로드 (새 파일이 있는 경우)
+      if (courseVideoFileObjects.length > 0) {
+        try {
+          const uploadResponse = await apiService.uploadFiles(courseVideoFileObjects);
+          // 다중 파일 업로드 응답 처리 (실제 API 응답 구조에 맞게 조정 필요)
+          if (uploadResponse.data && uploadResponse.data.length > 0) {
+            videoUrl = uploadResponse.data[0].url || uploadResponse.data[0].fileKey;
+          }
+        } catch (error) {
+          console.error('강좌 영상 업로드 실패:', error);
+          throw new Error('강좌 영상 업로드에 실패했습니다.');
+        }
+      } else if (existingVideoFiles.length > 0 && existingVideoFiles[0].url) {
+        // 기존 파일 URL 유지
+        videoUrl = existingVideoFiles[0].url;
+      }
+
+      // VR 콘텐츠 업로드 (새 파일이 있는 경우)
+      if (vrContentFileObjects.length > 0) {
+        try {
+          const uploadResponse = await apiService.uploadFiles(vrContentFileObjects);
+          if (uploadResponse.data && uploadResponse.data.length > 0) {
+            webglUrl = uploadResponse.data[0].url || uploadResponse.data[0].fileKey;
+          }
+        } catch (error) {
+          console.error('VR 콘텐츠 업로드 실패:', error);
+          throw new Error('VR 콘텐츠 업로드에 실패했습니다.');
+        }
+      } else if (existingVrFiles.length > 0 && existingVrFiles[0].url) {
+        // 기존 파일 URL 유지
+        webglUrl = existingVrFiles[0].url;
+      }
+
+      // 학습 평가 문제 업로드 (새 파일이 있는 경우)
+      if (questionFileObject) {
+        try {
+          const uploadResponse = await apiService.uploadFile(questionFileObject);
+          const fileKey = uploadResponse.data?.key || uploadResponse.data?.fileKey || uploadResponse.data?.csvKey;
+          if (fileKey) {
+            csvUrl = `csv/${fileKey}`;
+          } else if (uploadResponse.data?.url) {
+            csvUrl = uploadResponse.data.url;
+          }
+        } catch (error) {
+          console.error('학습 평가 문제 업로드 실패:', error);
+          throw new Error('학습 평가 문제 업로드에 실패했습니다.');
+        }
+      } else if (existingQuestionFile?.fileKey) {
+        // 기존 파일 URL 유지
+        csvUrl = `csv/${existingQuestionFile.fileKey}`;
+      } else if (originalData.csvUrl) {
+        // 원본 데이터의 csvUrl 유지
+        csvUrl = originalData.csvUrl;
+      }
+
+      // 현재 값들
+      const currentTitle = lessonName.trim();
+      const currentObjective = learningGoal.trim();
+
+      // 변경된 항목만 포함하는 request body 생성
+      const requestBody: {
+        title?: string;
+        objective?: string;
+        videoUrl?: string;
+        webglUrl?: string;
+        csvUrl?: string;
+      } = {};
+
+      // 변경된 항목만 추가
+      if (currentTitle !== originalData.title) {
+        requestBody.title = currentTitle;
+      }
+      if (currentObjective !== originalData.objective) {
+        requestBody.objective = currentObjective;
+      }
+      
+      // videoUrl 변경사항 체크 (원본에 있었는데 삭제된 경우도 포함)
+      const originalVideoUrl = originalData.videoUrl;
+      if (videoUrl !== originalVideoUrl) {
+        // 원본에 있었는데 현재 없는 경우 (삭제된 경우) 빈 문자열로 처리
+        if (originalVideoUrl && !videoUrl) {
+          requestBody.videoUrl = '';
+        } else if (videoUrl) {
+          requestBody.videoUrl = videoUrl;
+        }
+      }
+      
+      // webglUrl 변경사항 체크
+      const originalWebglUrl = originalData.webglUrl;
+      if (webglUrl !== originalWebglUrl) {
+        // 원본에 있었는데 현재 없는 경우 (삭제된 경우) 빈 문자열로 처리
+        if (originalWebglUrl && !webglUrl) {
+          requestBody.webglUrl = '';
+        } else if (webglUrl) {
+          requestBody.webglUrl = webglUrl;
+        }
+      }
+      
+      // csvUrl 변경사항 체크
+      const originalCsvUrl = originalData.csvUrl;
+      if (csvUrl !== originalCsvUrl) {
+        // 원본에 있었는데 현재 없는 경우 (삭제된 경우) 빈 문자열로 처리
+        if (originalCsvUrl && !csvUrl) {
+          requestBody.csvUrl = '';
+        } else if (csvUrl) {
+          requestBody.csvUrl = csvUrl;
+        }
+      }
+
+      // 변경사항이 없으면 알림
+      if (Object.keys(requestBody).length === 0) {
+        alert('변경된 내용이 없습니다.');
+        setIsSaving(false);
+        return;
+      }
+
+      // 강좌 수정 API 호출 (PATCH /lectures/{id})
+      await apiService.updateLecture(params.id as string, requestBody);
+
+      // 성공 시 토스트 표시
+      setShowToast(true);
+      
+      // 토스트 표시 후 상세 페이지로 이동
+      setTimeout(() => {
+        router.push(`/admin/lessons/${params.id}`);
+      }, 1500);
+    } catch (error) {
+      console.error('강좌 수정 실패:', error);
+      const errorMessage = error instanceof Error ? error.message : '강좌 수정 중 오류가 발생했습니다.';
+      alert(errorMessage);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex flex-col bg-white">
+        <div className="flex flex-1 min-h-0 justify-center">
+          <div className="w-[1440px] flex min-h-0">
+            <div className="flex">
+              <AdminSidebar />
+            </div>
+            <main className="w-[1120px] bg-white">
+              <div className="h-full flex flex-col px-8">
+                <div className="h-[100px] flex items-center">
+                  <div className="flex items-center gap-[12px]">
+                    <button
+                      type="button"
+                      onClick={handleBackClick}
+                      className="flex items-center justify-center size-[32px] cursor-pointer hover:opacity-80"
+                      aria-label="뒤로가기"
+                    >
+                      <BackArrowSvg width={32} height={32} />
+                    </button>
+                    <h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">
+                      강좌 수정
+                    </h1>
+                  </div>
+                </div>
+                <section className="px-8 pb-20">
+                  <div className="flex items-center justify-center py-20">
+                    <p className="text-[16px] text-[#8c95a1]">로딩 중...</p>
+                  </div>
+                </section>
+              </div>
+            </main>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen flex flex-col bg-white">
+      <div className="flex flex-1 min-h-0 justify-center">
+        <div className="w-[1440px] flex min-h-0">
+          <div className="flex">
+            <AdminSidebar />
+          </div>
+          <main className="w-[1120px] bg-white">
+            <div className="h-full flex flex-col px-8">
+              <div className="flex flex-col h-full">
+                {/* 헤더 */}
+                <div className="h-[100px] flex items-center">
+                  <div className="flex items-center gap-[12px]">
+                    <button
+                      type="button"
+                      onClick={handleBackClick}
+                      className="flex items-center justify-center size-[32px] cursor-pointer hover:opacity-80"
+                      aria-label="뒤로가기"
+                    >
+                      <BackArrowSvg width={32} height={32} />
+                    </button>
+                    <h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">
+                      강좌 수정
+                    </h1>
+                  </div>
+                </div>
+
+                {/* 폼 콘텐츠 */}
+                <div className="flex-1 overflow-y-auto pb-[80px] pt-[32px]">
+                  <div className="flex flex-col gap-[40px]">
+                    {/* 강좌 정보 */}
+                    <div className="flex flex-col gap-[8px]">
+                      <h2 className="text-[18px] font-bold leading-[1.5] text-[#1b2027]">
+                        강좌 정보
+                      </h2>
+                      <div className="flex flex-col gap-[24px]">
+                        {/* 교육 과정 */}
+                        <div className="flex flex-col gap-[8px] max-w-[480px]">
+                          <label className="text-[15px] font-semibold leading-[1.5] text-[#6c7682]">
+                            교육 과정
+                          </label>
+                          <div className="relative" ref={dropdownRef}>
+                            <button
+                              type="button"
+                              onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+                              className={`w-full h-[40px] px-[12px] py-[8px] border rounded-[8px] bg-white flex items-center justify-between focus:outline-none focus:shadow-[inset_0_0_0_1px_#333c47] cursor-pointer ${
+                                errors.selectedCourse ? 'border-[#e63946]' : 'border-[#dee1e6]'
+                              }`}
+                            >
+                              <span className={`text-[16px] font-normal leading-[1.5] flex-1 text-left ${
+                                selectedCourse ? 'text-[#1b2027]' : 'text-[#6c7682]'
+                              }`}>
+                                {selectedCourse 
+                                  ? courseOptions.find(c => c.id === selectedCourse)?.name 
+                                  : '교육과정을 선택해 주세요.'}
+                              </span>
+                              <DropdownIcon stroke="#8C95A1" className="shrink-0" />
+                            </button>
+                            {isDropdownOpen && (
+                              <div className="absolute top-full left-0 right-0 mt-1 bg-white border border-[#dee1e6] rounded-[8px] shadow-lg z-20 max-h-[200px] overflow-y-auto dropdown-scroll">
+                                {courseOptions.map((course, index) => (
+                                  <button
+                                    key={course.id}
+                                    type="button"
+                                    onClick={() => {
+                                      setSelectedCourse(course.id);
+                                      setIsDropdownOpen(false);
+                                      if (errors.selectedCourse) {
+                                        setErrors(prev => ({ ...prev, selectedCourse: undefined }));
+                                      }
+                                    }}
+                                    className={`w-full px-3 py-2 text-left text-[16px] font-normal leading-[1.5] hover:bg-[#f1f3f5] transition-colors cursor-pointer ${
+                                      selectedCourse === course.id
+                                        ? "bg-[#ecf0ff] text-[#1f2b91] font-semibold"
+                                        : "text-[#1b2027]"
+                                    } ${
+                                      index === 0 ? "rounded-t-[8px]" : ""
+                                    } ${
+                                      index === courseOptions.length - 1 ? "rounded-b-[8px]" : ""
+                                    }`}
+                                  >
+                                    {course.name}
+                                  </button>
+                                ))}
+                              </div>
+                            )}
+                          </div>
+                          {errors.selectedCourse && (
+                            <p className="text-[14px] font-normal leading-[1.5] text-[#e63946]">
+                              {errors.selectedCourse}
+                            </p>
+                          )}
+                        </div>
+
+                        {/* 강좌명 */}
+                        <div className="flex flex-col gap-[8px]">
+                          <label className="text-[15px] font-semibold leading-[1.5] text-[#6c7682]">
+                            강좌명
+                          </label>
+                          <input
+                            type="text"
+                            value={lessonName}
+                            onChange={(e) => {
+                              setLessonName(e.target.value);
+                              if (errors.lessonName) {
+                                setErrors(prev => ({ ...prev, lessonName: undefined }));
+                              }
+                            }}
+                            placeholder="강좌명을 입력해 주세요."
+                            className={`h-[40px] px-[12px] py-[8px] border rounded-[8px] bg-white text-[16px] font-normal leading-[1.5] text-[#1b2027] placeholder:text-[#b1b8c0] focus:outline-none focus:shadow-[inset_0_0_0_1px_#333c47] ${
+                              errors.lessonName ? 'border-[#e63946]' : 'border-[#dee1e6]'
+                            }`}
+                          />
+                          {errors.lessonName && (
+                            <p className="text-[14px] font-normal leading-[1.5] text-[#e63946]">
+                              {errors.lessonName}
+                            </p>
+                          )}
+                        </div>
+
+                        {/* 학습 목표 */}
+                        <div className="flex flex-col gap-[8px]">
+                          <label className="text-[15px] font-semibold leading-[1.5] text-[#6c7682]">
+                            학습 목표
+                          </label>
+                          <div className="relative">
+                            <textarea
+                              value={learningGoal}
+                              onChange={(e) => {
+                                if (e.target.value.length <= 1000) {
+                                  setLearningGoal(e.target.value);
+                                  if (errors.learningGoal) {
+                                    setErrors(prev => ({ ...prev, learningGoal: undefined }));
+                                  }
+                                }
+                              }}
+                              placeholder="내용을 입력해 주세요. (최대 1,000자)"
+                              className={`w-full h-[160px] px-[12px] py-[8px] border rounded-[8px] bg-white text-[16px] font-normal leading-[1.5] text-[#1b2027] placeholder:text-[#b1b8c0] focus:outline-none focus:shadow-[inset_0_0_0_1px_#333c47] resize-none ${
+                                errors.learningGoal ? 'border-[#e63946]' : 'border-[#dee1e6]'
+                              }`}
+                            />
+                            <div className="absolute bottom-[8px] right-[12px]">
+                              <p className="text-[13px] font-normal leading-[1.4] text-[#6c7682] text-right">
+                                {learningGoal.length}/1000
+                              </p>
+                            </div>
+                          </div>
+                          {errors.learningGoal && (
+                            <p className="text-[14px] font-normal leading-[1.5] text-[#e63946]">
+                              {errors.learningGoal}
+                            </p>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* 파일 첨부 */}
+                    <div className="flex flex-col gap-[8px]">
+                      <h2 className="text-[18px] font-bold leading-[1.5] text-[#1b2027]">
+                        파일 첨부
+                      </h2>
+                      <div className="flex flex-col gap-[24px]">
+                        {/* 강좌 영상 */}
+                        <div className="flex flex-col gap-[8px]">
+                          <div className="flex items-center justify-between h-[32px]">
+                            <div className="flex items-center gap-[8px]">
+                              <label className="text-[15px] font-semibold leading-[1.5] text-[#6c7682]">
+                                강좌 영상 ({existingVideoFiles.length + courseVideoFiles.length}/10)
+                              </label>
+                              <span className="text-[13px] font-normal leading-[1.4] text-[#8c95a1]">
+                                30MB 미만 파일
+                              </span>
+                            </div>
+                            <label className="h-[32px] w-[62px] px-[4px] py-[3px] border border-[#8c95a1] rounded-[6px] bg-white text-[13px] font-medium leading-[1.4] text-[#4c5561] whitespace-nowrap hover:bg-gray-50 transition-colors cursor-pointer flex items-center justify-center">
+                              <span>첨부</span>
+                              <input
+                                type="file"
+                                multiple
+                                accept=".mp4,video/mp4"
+                                className="hidden"
+                                onChange={async (e) => {
+                                  const files = e.target.files;
+                                  if (!files) return;
+
+                                  const MAX_SIZE = 30 * 1024 * 1024; // 30MB
+                                  const validFiles: File[] = [];
+                                  const oversizedFiles: string[] = [];
+                                  
+                                  Array.from(files).forEach((file) => {
+                                    if (!file.name.toLowerCase().endsWith('.mp4')) {
+                                      return;
+                                    }
+                                    if (file.size < MAX_SIZE) {
+                                      validFiles.push(file);
+                                    } else {
+                                      oversizedFiles.push(file.name);
+                                    }
+                                  });
+
+                                  if (oversizedFiles.length > 0) {
+                                    alert(`다음 파일은 30MB 미만이어야 합니다:\n${oversizedFiles.join('\n')}`);
+                                  }
+
+                                  if (existingVideoFiles.length + courseVideoFiles.length + validFiles.length > 10) {
+                                    alert('강좌 영상은 최대 10개까지 첨부할 수 있습니다.');
+                                    e.target.value = '';
+                                    return;
+                                  }
+
+                                  if (validFiles.length > 0) {
+                                    try {
+                                      await apiService.uploadFiles(validFiles);
+                                      setCourseVideoFiles(prev => [...prev, ...validFiles.map(f => f.name)]);
+                                      setCourseVideoFileObjects(prev => [...prev, ...validFiles]);
+                                      setCourseVideoCount(prev => prev + validFiles.length);
+                                    } catch (error) {
+                                      console.error('강좌 영상 업로드 실패:', error);
+                                      alert('파일 업로드에 실패했습니다. 다시 시도해주세요.');
+                                    }
+                                  }
+                                  e.target.value = '';
+                                }}
+                              />
+                            </label>
+                          </div>
+                          <div className="border border-[#dee1e6] rounded-[8px] bg-gray-50">
+                            {existingVideoFiles.length === 0 && courseVideoFiles.length === 0 ? (
+                              <div className="h-[64px] flex items-center justify-center">
+                                <p className="text-[14px] font-normal leading-[1.5] text-[#8c95a1] text-center">
+                                  강좌 주제별 영상 파일을 첨부해주세요.
+                                </p>
+                              </div>
+                            ) : (
+                              <div className="flex flex-col py-[12px]">
+                                {existingVideoFiles.map((file, index) => (
+                                  <div
+                                    key={`existing-${index}`}
+                                    className="h-[40px] px-[20px] py-[12px] flex items-center gap-[12px]"
+                                  >
+                                    <p className="flex-1 text-[15px] font-normal leading-[1.5] text-[#333c47]">
+                                      {file.fileName} (기존)
+                                    </p>
+                                    <button
+                                      type="button"
+                                      onClick={() => {
+                                        setExistingVideoFiles(prev => prev.filter((_, i) => i !== index));
+                                        setCourseVideoCount(prev => prev - 1);
+                                      }}
+                                      className="size-[16px] flex items-center justify-center cursor-pointer hover:opacity-70 transition-opacity shrink-0"
+                                      aria-label="파일 삭제"
+                                    >
+                                      <CloseXOSvg />
+                                    </button>
+                                  </div>
+                                ))}
+                                {courseVideoFiles.map((fileName, index) => (
+                                  <div
+                                    key={`new-${index}`}
+                                    className="h-[40px] px-[20px] py-[12px] flex items-center gap-[12px]"
+                                  >
+                                    <p className="flex-1 text-[15px] font-normal leading-[1.5] text-[#333c47]">
+                                      {fileName}
+                                    </p>
+                                    <button
+                                      type="button"
+                                      onClick={() => {
+                                        setCourseVideoFiles(prev => prev.filter((_, i) => i !== index));
+                                        setCourseVideoFileObjects(prev => prev.filter((_, i) => i !== index));
+                                        setCourseVideoCount(prev => prev - 1);
+                                      }}
+                                      className="size-[16px] flex items-center justify-center cursor-pointer hover:opacity-70 transition-opacity shrink-0"
+                                      aria-label="파일 삭제"
+                                    >
+                                      <CloseXOSvg />
+                                    </button>
+                                  </div>
+                                ))}
+                              </div>
+                            )}
+                          </div>
+                        </div>
+
+                        {/* VR 콘텐츠 */}
+                        <div className="flex flex-col gap-[8px]">
+                          <div className="flex items-center justify-between h-[32px]">
+                            <div className="flex items-center gap-[8px]">
+                              <label className="text-[15px] font-semibold leading-[1.5] text-[#6c7682]">
+                                VR 콘텐츠 ({existingVrFiles.length + vrContentFiles.length}/10)
+                              </label>
+                              <span className="text-[13px] font-normal leading-[1.4] text-[#8c95a1]">
+                                30MB 미만 파일
+                              </span>
+                            </div>
+                            <label className="h-[32px] w-[62px] px-[4px] py-[3px] border border-[#8c95a1] rounded-[6px] bg-white text-[13px] font-medium leading-[1.4] text-[#4c5561] whitespace-nowrap hover:bg-gray-50 transition-colors cursor-pointer flex items-center justify-center">
+                              <span>첨부</span>
+                              <input
+                                type="file"
+                                multiple
+                                accept=".zip,application/zip"
+                                className="hidden"
+                                onChange={async (e) => {
+                                  const files = e.target.files;
+                                  if (!files) return;
+
+                                  const MAX_SIZE = 30 * 1024 * 1024; // 30MB
+                                  const validFiles: File[] = [];
+                                  const oversizedFiles: string[] = [];
+                                  
+                                  Array.from(files).forEach((file) => {
+                                    if (!file.name.toLowerCase().endsWith('.zip')) {
+                                      return;
+                                    }
+                                    if (file.size < MAX_SIZE) {
+                                      validFiles.push(file);
+                                    } else {
+                                      oversizedFiles.push(file.name);
+                                    }
+                                  });
+
+                                  if (oversizedFiles.length > 0) {
+                                    alert(`다음 파일은 30MB 미만이어야 합니다:\n${oversizedFiles.join('\n')}`);
+                                  }
+
+                                  if (existingVrFiles.length + vrContentFiles.length + validFiles.length > 10) {
+                                    alert('VR 콘텐츠는 최대 10개까지 첨부할 수 있습니다.');
+                                    e.target.value = '';
+                                    return;
+                                  }
+
+                                  if (validFiles.length > 0) {
+                                    try {
+                                      await apiService.uploadFiles(validFiles);
+                                      setVrContentFiles(prev => [...prev, ...validFiles.map(f => f.name)]);
+                                      setVrContentFileObjects(prev => [...prev, ...validFiles]);
+                                      setVrContentCount(prev => prev + validFiles.length);
+                                    } catch (error) {
+                                      console.error('VR 콘텐츠 업로드 실패:', error);
+                                      alert('파일 업로드에 실패했습니다. 다시 시도해주세요.');
+                                    }
+                                  }
+                                  e.target.value = '';
+                                }}
+                              />
+                            </label>
+                          </div>
+                          <div className="border border-[#dee1e6] rounded-[8px] bg-gray-50">
+                            {existingVrFiles.length === 0 && vrContentFiles.length === 0 ? (
+                              <div className="h-[64px] flex items-center justify-center">
+                                <p className="text-[14px] font-normal leading-[1.5] text-[#8c95a1] text-center">
+                                  VR 학습 체험용 콘텐츠 파일을 첨부해주세요.
+                                </p>
+                              </div>
+                            ) : (
+                              <div className="flex flex-col py-[12px]">
+                                {existingVrFiles.map((file, index) => (
+                                  <div
+                                    key={`existing-vr-${index}`}
+                                    className="h-[40px] px-[20px] py-[12px] flex items-center gap-[12px]"
+                                  >
+                                    <p className="flex-1 text-[15px] font-normal leading-[1.5] text-[#333c47]">
+                                      {file.fileName} (기존)
+                                    </p>
+                                    <button
+                                      type="button"
+                                      onClick={() => {
+                                        setExistingVrFiles(prev => prev.filter((_, i) => i !== index));
+                                        setVrContentCount(prev => prev - 1);
+                                      }}
+                                      className="size-[16px] flex items-center justify-center cursor-pointer hover:opacity-70 transition-opacity shrink-0"
+                                      aria-label="파일 삭제"
+                                    >
+                                      <CloseXOSvg />
+                                    </button>
+                                  </div>
+                                ))}
+                                {vrContentFiles.map((fileName, index) => (
+                                  <div
+                                    key={`new-vr-${index}`}
+                                    className="h-[40px] px-[20px] py-[12px] flex items-center gap-[12px]"
+                                  >
+                                    <p className="flex-1 text-[15px] font-normal leading-[1.5] text-[#333c47]">
+                                      {fileName}
+                                    </p>
+                                    <button
+                                      type="button"
+                                      onClick={() => {
+                                        setVrContentFiles(prev => prev.filter((_, i) => i !== index));
+                                        setVrContentFileObjects(prev => prev.filter((_, i) => i !== index));
+                                        setVrContentCount(prev => prev - 1);
+                                      }}
+                                      className="size-[16px] flex items-center justify-center cursor-pointer hover:opacity-70 transition-opacity shrink-0"
+                                      aria-label="파일 삭제"
+                                    >
+                                      <CloseXOSvg />
+                                    </button>
+                                  </div>
+                                ))}
+                              </div>
+                            )}
+                          </div>
+                        </div>
+
+                        {/* 학습 평가 문제 */}
+                        <div className="flex flex-col gap-[8px]">
+                          <div className="flex items-center justify-between h-[32px]">
+                            <div className="flex items-center gap-[8px]">
+                              <label className="text-[15px] font-semibold leading-[1.5] text-[#6c7682]">
+                                학습 평가 문제
+                              </label>
+                              <span className="text-[13px] font-normal leading-[1.4] text-[#8c95a1]">
+                                CSV 파일 형식만 첨부 가능
+                              </span>
+                            </div>
+                            <div className="flex items-center gap-[8px]">
+                              <label className="h-[32px] w-[62px] px-[4px] py-[3px] border border-[#8c95a1] rounded-[6px] bg-white text-[13px] font-medium leading-[1.4] text-[#4c5561] whitespace-nowrap hover:bg-gray-50 transition-colors cursor-pointer flex items-center justify-center">
+                                <span>첨부</span>
+                                <input
+                                  type="file"
+                                  accept=".csv"
+                                  className="hidden"
+                                  onChange={async (e) => {
+                                    const files = e.target.files;
+                                    if (!files || files.length === 0) return;
+
+                                    const file = files[0];
+                                    if (file.name.toLowerCase().endsWith('.csv')) {
+                                      try {
+                                        await apiService.uploadFile(file);
+                                        setQuestionFileObject(file);
+                                        setQuestionFileCount(1);
+                                        setExistingQuestionFile(null);
+                                      } catch (error) {
+                                        console.error('학습 평가 문제 업로드 실패:', error);
+                                        alert('파일 업로드에 실패했습니다. 다시 시도해주세요.');
+                                      }
+                                    }
+                                  }}
+                                />
+                              </label>
+                            </div>
+                          </div>
+                          <div className="border border-[#dee1e6] rounded-[8px] bg-gray-50">
+                            {existingQuestionFile || questionFileObject ? (
+                              <div className="h-[64px] px-[20px] flex items-center gap-[12px]">
+                                <p className="flex-1 text-[15px] font-normal leading-[1.5] text-[#333c47]">
+                                  {existingQuestionFile ? `${existingQuestionFile.fileName} (기존)` : questionFileObject?.name}
+                                </p>
+                                <button
+                                  type="button"
+                                  onClick={() => {
+                                    setQuestionFileObject(null);
+                                    setExistingQuestionFile(null);
+                                    setQuestionFileCount(0);
+                                  }}
+                                  className="size-[16px] flex items-center justify-center cursor-pointer hover:opacity-70 transition-opacity shrink-0"
+                                  aria-label="파일 삭제"
+                                >
+                                  <CloseXOSvg />
+                                </button>
+                              </div>
+                            ) : (
+                              <div className="h-[64px] flex items-center justify-center">
+                                <p className="text-[14px] font-normal leading-[1.5] text-[#8c95a1] text-center">
+                                  학습 평가용 문항 파일을 첨부해주세요.
+                                </p>
+                              </div>
+                            )}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* 액션 버튼 */}
+                    <div className="flex items-center justify-end gap-[12px]">
+                      <button
+                        type="button"
+                        onClick={handleBackClick}
+                        className="h-[48px] px-[8px] rounded-[10px] bg-[#f1f3f5] text-[16px] font-semibold leading-[1.5] text-[#4c5561] min-w-[80px] hover:bg-[#e5e7eb] transition-colors cursor-pointer"
+                      >
+                        취소
+                      </button>
+                      <button
+                        type="button"
+                        onClick={handleSaveClick}
+                        disabled={isSaving || !originalData || loading}
+                        className="h-[48px] px-[16px] rounded-[10px] bg-[#1f2b91] text-[16px] font-semibold leading-[1.5] text-white hover:bg-[#1a2478] transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
+                      >
+                        {isSaving ? '저장 중...' : '저장하기'}
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </main>
+        </div>
+      </div>
+
+      {/* 강좌 수정 완료 토스트 */}
+      {showToast && (
+        <div className="fixed right-[60px] bottom-[60px] z-50">
+          <div className="bg-white border border-[#dee1e6] rounded-[8px] p-4 min-w-[360px] flex gap-[10px] items-center">
+            <div className="relative shrink-0 w-[16.667px] h-[16.667px]">
+              <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <circle cx="8.5" cy="8.5" r="8.5" fill="#384FBF"/>
+                <path d="M5.5 8.5L7.5 10.5L11.5 6.5" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+              </svg>
+            </div>
+            <p className="text-[15px] font-medium leading-[1.5] text-[#1b2027] text-nowrap">
+              강좌가 수정되었습니다.
+            </p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+

src/app/admin/lessons/[id]/page.tsx

@@ -2,29 +2,45 @@
 
 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 DownloadIcon from '@/app/svgs/downloadicon';
 import apiService from '@/app/lib/apiService';
 
-type Lesson = {
+type VideoFile = {
 	id: string;
-	title: string;
-	duration: string; // "12:46" 형식
-	state: "제출완료" | "제출대기";
-	action: "복습하기" | "이어서 수강하기" | "수강하기";
+	fileName: string;
+	fileSize: string;
+	fileKey?: string;
+	url?: string;
+};
+
+type VrFile = {
+	id: string;
+	fileName: string;
+	fileSize: string;
+	fileKey?: string;
+	url?: string;
+};
+
+type QuizQuestion = {
+	id: string;
+	number: number;
+	question: string;
+	correctAnswer: string;
+	wrongAnswer1: string;
+	wrongAnswer2: string;
+	wrongAnswer3: string;
 };
 
 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[];
+	courseName: string; // 교육 과정명
+	title: string; // 강좌명
+	goal: string; // 학습 목표 (여러 줄)
+	videoFiles: VideoFile[];
+	vrFiles: VrFile[];
+	quizData: QuizQuestion[];
 };
 
 export default function AdminCourseDetailPage() {
@@ -102,25 +118,91 @@ export default function AdminCourseDetailPage() {
 					}
 				}
 				
+				// 교육 과정명 가져오기
+				let courseName = '';
+				if (data.subjectId || data.subject_id) {
+					try {
+						const subjectsResponse = await apiService.getSubjects();
+						const subjects = Array.isArray(subjectsResponse.data) 
+							? subjectsResponse.data 
+							: subjectsResponse.data?.items || subjectsResponse.data?.subjects || [];
+						const subject = subjects.find((s: any) => 
+							String(s.id || s.subjectId) === String(data.subjectId || data.subject_id)
+						);
+						courseName = subject?.courseName || subject?.name || subject?.subjectName || '';
+					} catch (err) {
+						console.error('교육 과정명 조회 실패:', err);
+					}
+				}
+
+				// 학습 목표를 여러 줄로 분리
+				const goalLines = (data.objective || data.goal || '').split('\n').filter((line: string) => line.trim());
+
+				// 비디오 파일 목록 구성
+				const videoFiles: VideoFile[] = [];
+				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 파일 목록 구성
+				const vrFiles: VrFile[] = [];
+				if (data.webglUrl || data.vrUrl) {
+					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.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}',
+							});
+						});
+					}
+				}
+
 				// API 응답 구조에 맞게 데이터 매핑
 				const courseDetail: CourseDetail = {
 					id: String(data.id || params.id),
-					status: "수강 예정", // 관리자 페이지에서는 기본값
+					courseName: courseName || data.courseName || '교육 과정명',
 					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: "수강하기",
-						}
-					],
+					goal: goalLines.length > 0 ? goalLines.join('\n') : (data.objective || data.goal || ''),
+					videoFiles: videoFiles,
+					vrFiles: vrFiles,
+					quizData: quizData,
 				};
 
 				setCourse(courseDetail);
@@ -145,8 +227,18 @@ export default function AdminCourseDetailPage() {
 						</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 className="h-[100px] flex items-center justify-between px-8">
+									<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="px-8 pb-20">
 									<div className="flex items-center justify-center py-20">
@@ -171,8 +263,18 @@ export default function AdminCourseDetailPage() {
 						</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 className="h-[100px] flex items-center justify-between px-8">
+									<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="px-8 pb-20">
 									<div className="flex flex-col items-center justify-center py-20">
@@ -194,6 +296,36 @@ export default function AdminCourseDetailPage() {
 		);
 	}
 
+	const handleDownload = async (fileKey?: string, url?: string, fileName?: string) => {
+		if (url) {
+			// URL이 있으면 직접 다운로드
+			const link = document.createElement('a');
+			link.href = url;
+			link.download = fileName || 'download';
+			document.body.appendChild(link);
+			link.click();
+			document.body.removeChild(link);
+		} else if (fileKey) {
+			// fileKey가 있으면 API를 통해 다운로드
+			try {
+				const fileUrl = await apiService.getFile(fileKey);
+				if (fileUrl) {
+					const link = document.createElement('a');
+					link.href = fileUrl;
+					link.download = fileName || 'download';
+					document.body.appendChild(link);
+					link.click();
+					document.body.removeChild(link);
+				}
+			} catch (err) {
+				console.error('파일 다운로드 실패:', err);
+				alert('파일 다운로드에 실패했습니다.');
+			}
+		}
+	};
+
+	const goalLines = course.goal.split('\n').filter(line => line.trim());
+
 	return (
 		<div className="min-h-screen flex flex-col bg-white">
 			<div className="flex flex-1 min-h-0 justify-center">
@@ -204,9 +336,9 @@ export default function AdminCourseDetailPage() {
 					</div>
 					{/* 메인 콘텐츠 */}
 					<main className="w-[1120px] bg-white">
-						<div className="h-full flex flex-col px-8">
+						<div className="h-full flex flex-col">
 							{/* 헤더 */}
-							<div className="h-[100px] flex items-center">
+							<div className="h-[100px] flex items-center px-8">
 								<div className="flex items-center gap-[12px]">
 									<button
 										type="button"
@@ -217,100 +349,275 @@ export default function AdminCourseDetailPage() {
 										<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 className="flex flex-col gap-[40px] pb-20 pt-6 px-8">
+								{/* 강좌 정보 섹션 */}
+								<div className="flex flex-col gap-[8px]">
+									<div className="flex flex-col gap-[8px]">
+										<p className="text-[18px] font-bold leading-[1.5] text-[#333c47]">강좌 정보</p>
 									</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 className="flex flex-col gap-[24px]">
+										{/* 교육 과정명 */}
+										<div className="flex flex-col gap-[4px]">
+											<div className="w-[96px]">
+												<p className="text-[15px] font-semibold leading-[1.5] text-[#6c7682]">교육 과정명</p>
 											</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}
+											<div>
+												<p className="text-[16px] font-normal leading-[1.5] text-[#333c47]">{course.courseName}</p>
+											</div>
+										</div>
+
+										{/* 강좌명 */}
+										<div className="flex flex-col gap-[4px]">
+											<div className="w-[96px]">
+												<p className="text-[15px] font-semibold leading-[1.5] text-[#6c7682]">강좌명</p>
+											</div>
+											<div>
+												<p className="text-[16px] font-normal leading-[1.5] text-[#333c47]">{course.title}</p>
+											</div>
+										</div>
+
+										{/* 학습 목표 */}
+										<div className="flex flex-col gap-[4px]">
+											<div className="w-[96px]">
+												<p className="text-[15px] font-semibold leading-[1.5] text-[#6c7682]">학습 목표</p>
+											</div>
+											<div className="flex flex-col">
+												{goalLines.map((line, index) => (
+													<p key={index} className="text-[16px] font-normal leading-[1.5] text-[#333c47] mb-0">
+														{line}
 													</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 className="flex flex-col gap-[8px]">
+									<p className="text-[18px] font-bold leading-[1.5] text-[#1b2027]">파일 첨부</p>
+									
+									<div className="flex flex-col gap-[40px]">
+										{/* 강좌 영상 */}
+										<div className="flex flex-col gap-[8px]">
+											<div className="flex gap-[12px] h-[32px] items-center">
+												<div className="flex gap-[8px] items-center">
+													<p className="text-[15px] font-semibold leading-[1.5] text-[#6c7682]">강좌 영상</p>
 												</div>
 											</div>
-														<div className="flex items-center gap-2">
+											<div className="border border-[#dee1e6] rounded-[8px] bg-gray-50">
+												{course.videoFiles.length > 0 ? (
+													<div className="flex flex-col py-[12px]">
+														{course.videoFiles.map((video) => (
+															<div
+																key={video.id}
+																className="bg-white border border-[#dee1e6] rounded-[6px] h-[64px] flex items-center gap-[12px] px-[17px] mx-[12px] mb-[8px] last:mb-0"
+															>
+																<div className="size-[24px] shrink-0">
+																	<img src="/imgs/play.svg" alt="" className="size-full" />
+																</div>
+																<div className="flex-1 flex items-center gap-[8px] min-w-0">
+																	<p className="text-[15px] font-normal leading-[1.5] text-[#1b2027] truncate">
+																		{video.fileName}
+																	</p>
+																	<p className="text-[13px] font-normal leading-[1.4] text-[#8c95a1] shrink-0">
+																		{video.fileSize}
+																	</p>
+																</div>
 																<button
 																	type="button"
-																className={[
-																	"h-8 rounded-[6px] px-4 text-[14px] font-medium leading-[1.5]",
-																	"bg-white",
-																	submitBtnStyle,
-																].join(" ")}
+																	onClick={() => handleDownload(video.fileKey, video.url, video.fileName)}
+																	className="bg-white border border-[#8c95a1] h-[32px] rounded-[6px] px-4 flex items-center justify-center gap-[4px] shrink-0"
 																>
-																{isSubmitted ? "학습 제출 완료" : "학습 제출 하기"}
+																	<DownloadIcon className="size-[16px] text-[#4c5561]" />
+																	<p className="text-[13px] font-medium leading-[1.4] text-[#4c5561]">다운로드</p>
+																</button>
+															</div>
+														))}
+													</div>
+												) : (
+													<div className="h-[64px] flex items-center justify-center">
+														<p className="text-[14px] font-normal leading-[1.5] text-[#8c95a1] text-center">
+															등록된 강좌 영상이 없습니다.
+														</p>
+													</div>
+												)}
+											</div>
+										</div>
+
+										{/* VR 콘텐츠 */}
+										<div className="flex flex-col gap-[8px]">
+											<div className="flex gap-[12px] h-[32px] items-center">
+												<div className="flex gap-[8px] items-center">
+													<p className="text-[15px] font-semibold leading-[1.5] text-[#6c7682]">VR 콘텐츠</p>
+												</div>
+											</div>
+											<div className="border border-[#dee1e6] rounded-[8px] bg-gray-50">
+												{course.vrFiles.length > 0 ? (
+													<div className="flex flex-col py-[12px]">
+														{course.vrFiles.map((vr) => (
+															<div
+																key={vr.id}
+																className="bg-white border border-[#dee1e6] rounded-[6px] h-[64px] flex items-center gap-[12px] px-[17px] mx-[12px] mb-[8px] last:mb-0"
+															>
+																<div className="size-[24px] shrink-0">
+																	<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+																		<path d="M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8L14 2Z" stroke="#4c5561" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+																		<path d="M14 2V8H20" stroke="#4c5561" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+																	</svg>
+																</div>
+																<div className="flex-1 flex items-center gap-[8px] min-w-0">
+																	<p className="text-[15px] font-normal leading-[1.5] text-[#1b2027] truncate">
+																		{vr.fileName}
+																	</p>
+																	<p className="text-[13px] font-normal leading-[1.4] text-[#8c95a1] shrink-0">
+																		{vr.fileSize}
+																	</p>
+																</div>
+																<button
+																	type="button"
+																	onClick={() => handleDownload(vr.fileKey, vr.url, vr.fileName)}
+																	className="bg-white border border-[#8c95a1] h-[32px] rounded-[6px] px-4 flex items-center justify-center gap-[4px] shrink-0"
+																>
+																	<DownloadIcon className="size-[16px] text-[#4c5561]" />
+																	<p className="text-[13px] font-medium leading-[1.4] text-[#4c5561]">다운로드</p>
+																</button>
+															</div>
+														))}
+													</div>
+												) : (
+													<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>
+										</div>
+
+										{/* 학습 평가 문제 */}
+										<div className="flex flex-col gap-[8px]">
+											<div className="flex gap-[12px] h-[32px] items-center justify-between">
+												<div className="flex gap-[8px] items-center">
+													<p className="text-[15px] font-semibold leading-[1.5] text-[#6c7682]">학습 평가 문제</p>
+												</div>
+												{course.quizData.length > 0 && (
+													<button
+														type="button"
+														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]" />
+														<p className="text-[13px] font-medium leading-[1.4] text-[#4c5561]">다운로드</p>
+													</button>
+												)}
+											</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>
+															</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>
+												) : (
+													<div className="h-[64px] flex items-center justify-center">
+														<p className="text-[14px] font-normal leading-[1.5] text-[#8c95a1] text-center">
+															등록된 학습 평가 문제가 없습니다.
+														</p>
+													</div>
+												)}
+											</div>
+										</div>
+									</div>
+								</div>
+
+								{/* Footer 버튼 */}
+								<div className="flex gap-[12px] items-center justify-end">
+									<button
+										type="button"
+										className="bg-[#fef2f2] h-[48px] rounded-[10px] px-2 flex items-center justify-center min-w-[80px]"
+									>
+										<p className="text-[16px] font-semibold leading-[1.5] text-[#f64c4c]">삭제</p>
 									</button>
 									<button
 										type="button"
-																className={[
-																	"h-8 rounded-[6px] px-4 text-[14px] font-medium leading-[1.5]",
-																	rightBtnStyle,
-																].join(" ")}
+										onClick={async () => {
+											// 현재 강좌 데이터를 sessionStorage에 저장
+											if (course && params?.id) {
+												try {
+													// API에서 원본 강좌 데이터 가져오기
+													const response = await apiService.getLectures();
+													const lectures = Array.isArray(response.data) 
+														? response.data 
+														: response.data?.items || response.data?.lectures || response.data?.data || [];
+													const lectureData = lectures.find((l: any) => String(l.id || l.lectureId) === params.id);
+													
+													if (lectureData) {
+														// sessionStorage에 원본 데이터 저장
+														sessionStorage.setItem('selectedLecture', JSON.stringify(lectureData));
+													}
+													router.push(`/admin/lessons/${params.id}/edit`);
+												} catch (error) {
+													console.error('강좌 데이터 가져오기 실패:', error);
+													// 실패해도 수정 페이지로 이동
+													router.push(`/admin/lessons/${params.id}/edit`);
+												}
+											}
+										}}
+										className="bg-[#f1f3f5] h-[48px] rounded-[10px] px-4 flex items-center justify-center min-w-[114px] cursor-pointer hover:bg-[#e5e7eb] transition-colors"
 									>
-																{l.action}
+										<p className="text-[16px] font-semibold leading-normal text-normal">수정하기</p>
 									</button>
 								</div>
 							</div>
 						</div>
-											);
-										})}
-									</div>
-								</div>
-							</section>
-						</div>
 					</main>
 				</div>
 			</div>

src/app/admin/resources/mockData.ts

@@ -0,0 +1,37 @@
+export type Resource = {
+  id: number;
+  title: string;
+  date: string; // 게시일
+  views: number; // 조회수
+  writer: string; // 작성자
+  content?: string[]; // 본문 내용 (상세 페이지용)
+  hasAttachment?: boolean; // 첨부파일 여부
+};
+
+// TODO: 나중에 DB에서 가져오도록 변경
+export const MOCK_RESOURCES: Resource[] = [
+  {
+    id: 2,
+    title: '학습 자료 제목이 노출돼요',
+    date: '2025-09-10',
+    views: 1230,
+    writer: '문지호',
+    content: [
+      '학습 자료 관련 주요 내용을 안내드립니다.',
+      '학습 자료는 수강 기간 동안 언제든지 다운로드 가능합니다.',
+    ],
+  },
+  {
+    id: 1,
+    title: '📚 방사선학 학습 자료 모음',
+    date: '2025-06-28',
+    views: 594,
+    writer: '문지호',
+    hasAttachment: true,
+    content: [
+      '방사선학 강의에 필요한 학습 자료를 첨부합니다.',
+      '학습 자료는 강의 수강 시 참고하시기 바랍니다.',
+    ],
+  },
+];
+

src/app/admin/resources/page.tsx

@@ -1,21 +1,103 @@
 'use client';
 
-import { useState, useMemo } from "react";
+import { useState, useMemo, useRef, ChangeEvent } from "react";
 import AdminSidebar from "@/app/components/AdminSidebar";
 import ChevronDownSvg from "@/app/svgs/chevrondownsvg";
+import BackArrowSvg from "@/app/svgs/backarrow";
+import { MOCK_RESOURCES, type Resource } from "@/app/admin/resources/mockData";
+import apiService from "@/app/lib/apiService";
 
 export default function AdminResourcesPage() {
-  // TODO: 나중에 실제 데이터로 교체
-  const items: any[] = [];
+  const [resources, setResources] = useState<Resource[]>(MOCK_RESOURCES);
   const [currentPage, setCurrentPage] = useState(1);
+  const [isWritingMode, setIsWritingMode] = useState(false);
+  const [title, setTitle] = useState('');
+  const [content, setContent] = useState('');
+  const [attachedFile, setAttachedFile] = useState<File | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  
+  const totalCount = useMemo(() => resources.length, [resources]);
+  
+  const characterCount = useMemo(() => content.length, [content]);
+  
+  const handleBack = () => {
+    setIsWritingMode(false);
+    setTitle('');
+    setContent('');
+    setAttachedFile(null);
+  };
+  
+  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 {
+        // 단일 파일 업로드
+        await apiService.uploadFile(file);
+        setAttachedFile(file);
+      } catch (error) {
+        console.error('파일 업로드 실패:', error);
+        alert('파일 업로드에 실패했습니다. 다시 시도해주세요.');
+      }
+    }
+  };
+  
+  const handleSave = () => {
+    if (!title.trim()) {
+      alert('제목을 입력해주세요.');
+      return;
+    }
+    if (!content.trim()) {
+      alert('내용을 입력해주세요.');
+      return;
+    }
+    
+    // 새 학습 자료 추가
+    const newResource: Resource = {
+      id: resources.length > 0 ? Math.max(...resources.map(r => r.id)) + 1 : 1,
+      title: title.trim(),
+      date: new Date().toISOString().split('T')[0],
+      views: 0,
+      writer: '관리자', // TODO: 실제 작성자 정보 사용
+      content: content.split('\n'),
+      hasAttachment: attachedFile !== null,
+    };
+    
+    setResources([newResource, ...resources]);
+    handleBack();
+  };
+  
+  const handleCancel = () => {
+    if (title.trim() || content.trim() || attachedFile) {
+      if (confirm('작성 중인 내용이 있습니다. 정말 취소하시겠습니까?')) {
+        handleBack();
+      }
+    } else {
+      handleBack();
+    }
+  };
   
   const ITEMS_PER_PAGE = 10;
-  const totalPages = Math.ceil(items.length / ITEMS_PER_PAGE);
-  const paginatedItems = useMemo(() => {
+  const sortedResources = useMemo(() => {
+    return [...resources].sort((a, b) => {
+      // 생성일 내림차순 정렬 (최신 날짜가 먼저)
+      return b.date.localeCompare(a.date);
+    });
+  }, [resources]);
+  
+  const totalPages = Math.ceil(sortedResources.length / ITEMS_PER_PAGE);
+  const paginatedResources = useMemo(() => {
     const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
     const endIndex = startIndex + ITEMS_PER_PAGE;
-    return items.slice(startIndex, endIndex);
-  }, [items, currentPage]);
+    return sortedResources.slice(startIndex, endIndex);
+  }, [sortedResources, currentPage]);
 
   return (
     <div className="min-h-screen flex flex-col bg-white">
@@ -30,6 +112,133 @@ export default function AdminResourcesPage() {
           {/* 메인 콘텐츠 */}
           <main className="w-[1120px] bg-white">
             <div className="h-full flex flex-col px-8">
+              {isWritingMode ? (
+                <>
+                  {/* 작성 모드 헤더 */}
+                  <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 ? 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}
+                            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"
+                          >
+                            <span className="text-[13px] font-medium leading-[1.4] text-[#4c5561] whitespace-nowrap">
+                              첨부
+                            </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-center">
+                          {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>
+                          )}
+                        </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}
+                        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"
+                      >
+                        저장하기
+                      </button>
+                    </div>
+                  </div>
+                </>
+              ) : (
+                <>
                   {/* 제목 영역 */}
                   <div className="h-[100px] flex items-center">
                     <h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">
@@ -37,20 +246,85 @@ export default function AdminResourcesPage() {
                     </h1>
                   </div>
 
+                  {/* 헤더 영역 (제목과 콘텐츠 사이) */}
+                  <div className="pt-2 pb-4 flex items-center justify-between">
+                    <p className="text-[15px] font-medium leading-[1.5] text-[#333c47] whitespace-nowrap">
+                      총 {totalCount}건
+                    </p>
+                    <button
+                      type="button"
+                      onClick={() => setIsWritingMode(true)}
+                      className="h-[40px] px-4 rounded-[8px] bg-[#1f2b91] text-[16px] font-semibold leading-[1.5] text-white whitespace-nowrap hover:bg-[#1a2478] transition-colors cursor-pointer"
+                    >
+                      등록하기
+                    </button>
+                  </div>
+
                   {/* 콘텐츠 영역 */}
-              <div className="flex-1 pt-8 flex flex-col">
-                {items.length === 0 ? (
+                  <div className="flex-1 pt-2 flex flex-col">
+                {resources.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 />
+                      학습 자료를 등록해주세요.
                     </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 style={{ width: 80 }} />
+                            <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="px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">작성자</th>
+                            </tr>
+                          </thead>
+                          <tbody>
+                            {paginatedResources.map((resource, index) => {
+                              // 번호는 전체 목록에서의 순서 (정렬된 목록 기준)
+                              const resourceNumber = sortedResources.length - (currentPage - 1) * ITEMS_PER_PAGE - index;
+                              return (
+                                <tr
+                                  key={resource.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 text-center">
+                                    {resourceNumber}
+                                  </td>
+                                  <td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027]">
+                                    {resource.title}
+                                  </td>
+                                  <td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
+                                    {resource.date}
+                                  </td>
+                                  <td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
+                                    {resource.views.toLocaleString()}
+                                  </td>
+                                  <td className="border-t border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
+                                    {resource.writer}
+                                  </td>
+                                </tr>
+                              );
+                            })}
+                          </tbody>
+                        </table>
+                      </div>
+                    </div>
                     
                     {/* 페이지네이션 - 10개 초과일 때만 표시 */}
-                    {items.length > ITEMS_PER_PAGE && (() => {
+                    {resources.length > ITEMS_PER_PAGE && (() => {
                       // 페이지 번호를 10단위로 표시
                       const pageGroup = Math.floor((currentPage - 1) / 10);
                       const startPage = pageGroup * 10 + 1;
@@ -135,6 +409,8 @@ export default function AdminResourcesPage() {
                   </>
                 )}
                   </div>
+                </>
+              )}
             </div>
           </main>
         </div>

src/app/lib/apiService.ts

@@ -390,6 +390,24 @@ class ApiService {
         });
     }
 
+    /**
+     * 강좌(lecture) 수정
+     */
+    async updateLecture(lectureId: string | number, lectureData: {
+        subjectId?: number;
+        title?: string;
+        objective?: string;
+        videoUrl?: string;
+        webglUrl?: string;
+        csvKey?: string;
+        csvUrl?: string;
+    }) {
+        return this.request(`/lectures/${lectureId}`, {
+            method: 'PATCH',
+            body: lectureData,
+        });
+    }
+
     /**
      * 리소스 조회
      */

src/app/login/page.tsx

@@ -159,7 +159,8 @@ export default function LoginPage() {
 	}
 
 	return (
-		<div className="min-h-screen w-full flex flex-col items-center justify-between">
+		<>
+			<div className="min-h-screen w-full flex flex-col items-center pt-[180px]">
 
 			<LoginErrorModal
 				open={isLoginErrorOpen}
@@ -321,9 +322,10 @@ export default function LoginPage() {
 				</form>
 			</div>
 			<div></div>
+		</div>
 		<p className="text-center py-[40px] text-[15px] text-basic-text">
 			Copyright ⓒ 2025 XL LMS. All rights reserved
 		</p>
-		</div>
+		</>
 	);
 }

src/app/svgs/downloadicon.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+type DownloadIconProps = React.SVGProps<SVGSVGElement>;
+
+export default function DownloadIcon(props: DownloadIconProps) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M12 3v12m0 0l-4-4m4 4l4-4M5 21h14"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+