✨ Feat/#305 강의상세 페이지 연동 완료

backend/src/main/java/org/example/backend/domain/quiz/converter/QuizConverter.java

@@ -20,27 +20,31 @@ public class QuizConverter {
     private final OptionRepository optionRepository;
 
     public QuizListResponseDTO toQuizListResponseDTO(UUID lectureId, List<Quiz> quizList) {
-        List<QuizListResponseDTO.QuizDTO> quizDTOs = quizList.stream().map(quiz -> {
-            List<OptionResponseDTO> options = new ArrayList<>();
-            if (quiz.getType() == QuizType.MULTIPLE_CHOICE) {
-                options = optionRepository.findByQuizId(quiz.getId())
-                        .stream()
-                        .map(option -> new OptionResponseDTO(
-                                option.getId(),
-                                option.getOptionOrder(),
-                                option.getText()
-                        ))
-                        .toList();
-            }
-            return new QuizListResponseDTO.QuizDTO(
-                    quiz.getId(),
-                    quiz.getQuizOrder(),
-                    quiz.getQuiz(),
-                    quiz.getSolution(),
-                    QuizResultStudentConverter.toCamelCase(quiz.getType()),
-                    options
-            );
-        }).toList();
+        List<QuizListResponseDTO.QuizDTO> quizDTOs = quizList.stream()
+                .sorted((q1, q2) -> Integer.compare(q1.getQuizOrder(), q2.getQuizOrder()))
+                .map(quiz -> {
+                    List<OptionResponseDTO> options = new ArrayList<>();
+                    if (quiz.getType() == QuizType.MULTIPLE_CHOICE) {
+                        options = optionRepository.findByQuizId(quiz.getId())
+                                .stream()
+                                .map(option -> new OptionResponseDTO(
+                                        option.getId(),
+                                        option.getOptionOrder(),
+                                        option.getText()
+                                ))
+                                .sorted((o1, o2) -> Integer.compare(o1.getOptionOrder(), o2.getOptionOrder()))
+                                .toList();
+                    }
+                    return new QuizListResponseDTO.QuizDTO(
+                            quiz.getId(),
+                            quiz.getQuizOrder(),
+                            quiz.getQuiz(),
+                            quiz.getSolution(),
+                            QuizResultStudentConverter.toCamelCase(quiz.getType()),
+                            options
+                    );
+                })
+                .toList();
 
         return new QuizListResponseDTO(lectureId, quizDTOs);
     }

frontend/api/classes/fetchClassNameByLectureId.ts

@@ -0,0 +1,20 @@
+import { axiosInstance } from "@/api/axiosInstance";
+import axios from "axios";
+import { ENDPOINTS } from "@/constants/endpoints";
+import { ApiResponse } from "@/types/apiResponseTypes";
+import { FetchClassNameByLectureIdResult } from "@/types/classes/fetchClassNameByLectureIdTypes";
+
+export async function fetchClassNameByLectureId(lectureId: string) {
+  try {
+    const response = await axiosInstance.get<
+      ApiResponse<FetchClassNameByLectureIdResult>
+    >(ENDPOINTS.LECTURES.GET_CLASS_NAME(lectureId));
+    return response.data;
+  } catch (error: unknown) {
+    if (axios.isAxiosError(error) && error.response) {
+      return error.response
+        .data as ApiResponse<FetchClassNameByLectureIdResult>;
+    }
+    throw error;
+  }
+}

frontend/api/lectures/fetchStudentLectureDetail.ts

@@ -0,0 +1,20 @@
+import { axiosInstance } from "@/api/axiosInstance";
+import axios from "axios";
+import { ENDPOINTS } from "@/constants/endpoints";
+import { ApiResponse } from "@/types/apiResponseTypes";
+import { FetchStudentLectureDetailResult } from "@/types/lectures/fetchStudentLectureDetailTypes";
+
+export async function fetchStudentLectureDetail(lectureId: string) {
+  try {
+    const response = await axiosInstance.get<
+      ApiResponse<FetchStudentLectureDetailResult>
+    >(ENDPOINTS.LECTURES.GET_STUDENT_LECTURE_DETAIL(lectureId));
+    return response.data;
+  } catch (error: unknown) {
+    if (axios.isAxiosError(error) && error.response) {
+      return error.response
+        .data as ApiResponse<FetchStudentLectureDetailResult>;
+    }
+    throw error;
+  }
+}

frontend/api/quizzes/fetchQuizList.ts

@@ -0,0 +1,19 @@
+import axios from "axios";
+import { axiosInstance } from "@/api/axiosInstance";
+import { ENDPOINTS } from "@/constants/endpoints";
+import { ApiResponse } from "@/types/apiResponseTypes";
+import { fetchQuizListResult } from "@/types/quizzes/fetchQuizListTypes";
+
+export async function fetchQuizList(lectureId: string) {
+  try {
+    const response = await axiosInstance.get<ApiResponse<fetchQuizListResult>>(
+      ENDPOINTS.QUIZZES.GET(lectureId)
+    );
+    return response.data;
+  } catch (error: unknown) {
+    if (axios.isAxiosError(error) && error.response) {
+      return error.response.data as ApiResponse<fetchQuizListResult>;
+    }
+    throw error;
+  }
+}

frontend/api/quizzes/getMyQuizResult.ts

@@ -0,0 +1,19 @@
+import axios from "axios";
+import { axiosInstance } from "@/api/axiosInstance";
+import { ENDPOINTS } from "@/constants/endpoints";
+import { ApiResponse } from "@/types/apiResponseTypes";
+import { getMyQuizResultResult } from "@/types/quizzes/getMyQuizResultTypes";
+
+export async function getMyQuizResult(lectureId: string) {
+  try {
+    const response = await axiosInstance.get<
+      ApiResponse<getMyQuizResultResult>
+    >(ENDPOINTS.QUIZZES.GET_RESULT(lectureId));
+    return response.data;
+  } catch (error: unknown) {
+    if (axios.isAxiosError(error) && error.response) {
+      return error.response.data as ApiResponse<getMyQuizResultResult>;
+    }
+    throw error;
+  }
+}

frontend/api/quizzes/submitQuiz.ts

@@ -0,0 +1,23 @@
+import axios from "axios";
+import { axiosInstance } from "@/api/axiosInstance";
+import { ENDPOINTS } from "@/constants/endpoints";
+import { ApiResponse } from "@/types/apiResponseTypes";
+import {
+  SubmitQuizRequest,
+  SubmitQuizResult,
+} from "@/types/quizzes/submitQuizTypes";
+
+export async function submitQuiz(data: SubmitQuizRequest) {
+  try {
+    const response = await axiosInstance.post<
+      ApiResponse<SubmitQuizResult | null>
+    >(ENDPOINTS.QUIZZES.SUBMIT, data);
+
+    return response.data;
+  } catch (error: unknown) {
+    if (axios.isAxiosError(error) && error.response) {
+      return error.response.data as ApiResponse<SubmitQuizResult | null>;
+    }
+    throw error;
+  }
+}

frontend/app/student/class-detail/[classId]/_components/LectureNote/LectureNote.module.scss

@@ -24,11 +24,7 @@
   border: 1px solid $color-neutral-7;
   border-radius: $radius-md;
   background-color: $color-white;
-  cursor: pointer;
   transition: background-color 0.3s ease;
-  &:hover {
-    background-color: $color-skyblue;
-  }
 }
 
 .fileItem > :first-child {

frontend/app/student/class-detail/[classId]/_components/LectureNote/LectureNote.tsx

@@ -4,6 +4,10 @@ import { useParams } from "next/navigation";
 import { fetchLectureNotesByClass } from "@/api/lectures/fetchLectureNotesByClass";
 import FileDisplay from "@/components/FileDisplay/FileDisplay";
 import LoadingSpinner from "@/components/LoadingSpinner/LoadingSpinner";
+import IconButton from "@/components/Button/IconButton/IconButton";
+import { Download } from "lucide-react";
+import { FetchLectureNoteByLectureIdResult } from "@/types/lectures/fetchLectureNoteByLectureIdTypes";
+import { downloadFileWithErrorHandling } from "@/utils/downloadUtils";
 
 interface LectureNote {
   lectureNoteId: string;
@@ -44,24 +48,28 @@ export default function LectureNote() {
     );
   }
 
-  const handleNoteClick = (lectureNoteUrl: string) => {
-    window.open(lectureNoteUrl, "_blank");
+  const handleDownload = async (note: FetchLectureNoteByLectureIdResult) => {
+    await downloadFileWithErrorHandling(
+      note.lectureNoteUrl,
+      note.lectureNoteName || "강의자료"
+    );
   };
 
   return (
     <div className={styles.container}>
       {lectureNotes.length > 0 ? (
         <div className={styles.fileList}>
           {lectureNotes.map((note) => (
-            <div
-              key={note.lectureNoteId}
-              className={styles.fileItem}
-              onClick={() => handleNoteClick(note.lectureNoteUrl)}
-            >
-              <FileDisplay fileName={note.lectureNoteName} />
-              <div className={styles.fileInfo}>
-                <span className={styles.fileSize}>{note.fileSize}</span>
-              </div>
+            <div key={note.lectureNoteId} className={styles.fileItem}>
+              <FileDisplay
+                fileName={note.lectureNoteName}
+                size={note.fileSize}
+              />
+              <IconButton
+                icon={<Download />}
+                onClick={() => handleDownload(note)}
+                ariaLabel={"강의자료 다운로드"}
+              />
             </div>
           ))}
         </div>

frontend/app/student/class/_components/ClassListSection/ClassListSection.tsx

@@ -86,20 +86,24 @@ export default function ClassListSection() {
             <div className={styles.classHeader}>
               <div className={styles.classTitle}>
                 <span className={styles.className}>{classItem.className}</span>
-                <span className={styles.teacherName}>박재성</span>
+                <span className={styles.teacherName}>
+                  {classItem.professorName}
+                </span>
               </div>
               <ChevronRight size={20} className={styles.arrowIcon} />
             </div>
 
             <div className={styles.classDetails}>
               <div className={styles.detailItem}>
                 <Clock size={16} />
-                <span>월 (10:15~11:45)/수 (12:00~13:15)</span>
+                <span>{classItem.classDate}</span>
               </div>
 
               <div className={styles.detailItem}>
                 <Calendar size={16} />
-                <span>2024.03.04 ~ 2025.06.13</span>
+                <span>
+                  {classItem.startDate} ~ {classItem.endDate}
+                </span>
               </div>
             </div>
           </div>

frontend/app/student/layout.tsx

@@ -9,13 +9,15 @@ import BackWithTitleHeader from "@/components/Header/Student/BackWithTitleHeader
 import TitleHeader from "@/components/Header/Student/TitleHeader/TitleHeader";
 
 import Navigation from "@/components/Navigation/Navigation";
+import { useClassTitleStore } from "@/store/useClassTitleStore";
 
 export default function StudentLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
   const pathname = usePathname();
+  const { classTitle } = useClassTitleStore();
 
   // 현재 경로에 해당하는 라우트 설정 찾기
   const currentRoute = Object.values(STUDENT_ROUTE_CONFIG).find((config) => {
@@ -38,7 +40,9 @@ export default function StudentLayout({
       case StudentHeaderType.TITLE:
         return <TitleHeader title={currentRoute.title || ""} />;
       case StudentHeaderType.BACK_WITH_TITLE:
-        return <BackWithTitleHeader title={currentRoute.title || ""} />;
+        return (
+          <BackWithTitleHeader title={currentRoute.title || classTitle || ""} />
+        );
       case StudentHeaderType.BACK_WITH_PROFILE:
         return <BackWithProfileHeader />;
       default:

frontend/app/student/lecture-detail/[lectureId]/_components/LecrureRecordSection/LecrureRecordSection.module.scss

@@ -0,0 +1,36 @@
+.recordSection {
+  height: 100%;
+}
+
+.card {
+  background: white;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin-bottom: 16px;
+}
+
+.title {
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 16px;
+  color: #333;
+}
+
+.audioItem {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.audioName {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.audioPlayer {
+  width: 100%;
+  height: 40px;
+}