feat: useLectureInfo 추가 및 적용

frontend/src/hooks/api/useLectureInfo.js

@@ -0,0 +1,10 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+import instance from '../../utils/axios/instance';
+import { API_URL } from '../../constants';
+
+export function useLectureInfo(lectureId) {
+  return useSuspenseQuery({
+    queryKey: ['lecturelist', lectureId],
+    queryFn: () => instance.get(`${API_URL}/lecture/${lectureId}`),
+  });
+}

frontend/src/pages/LectureInfoPage/LectureInfoPage.jsx

@@ -2,58 +2,40 @@ import styles from './LectureInfoPage.module.css';
 import ClassInfo from '../../components/ClassInfo/ClassInfo';
 import { MaxWidthLayout } from '../../components/Layout';
 import LectureHeader from '../../components/LectureHeader/LectureHeader';
+import { useLectureInfo } from '../../hooks/api/useLectureInfo';
+import { useParams } from 'react-router-dom';
 
 export default function LectureInfoPage() {
-  const { data: lectureData } = {
-    data: {
-      title: '정보처리기사 실기 완전정복',
-      img: '',
-      tutor: '이재용',
-      tutorImg: '',
-      term: '2021.07.01 ~ 2021.12.31',
-      time: '매주 화, 목 19:00 ~ 21:00',
-      description: [
-        {
-          title: '수업소개',
-          content: '이 코스는 정보처리기사 실기에 대한 완전정복을 목표로 합니다.',
-        },
-        {
-          title: '커리큘럼',
-          content:
-            '1. 데이터베이스\n2. 소프트웨어 공학\n3. 운영체제\n4. 네트워크\n5. 데이터통신\n6. 전자계산기\n7. 알고리즘\n8. 프로그래밍 언어\n9. 시스템 소프트웨어\n10. 정보시스템 개발 관리',
-        },
-        {
-          title: '이런 사람이 들으면 좋아요',
-          content: '정보처리기사 실기에 관심이 많은 사람',
-        },
-      ],
-    },
-  };
+  const { lectureId } = useParams();
+  const { data } = useLectureInfo(lectureId);
+  const lectureData = data?.data;
+  const startDate = new Date(lectureData.startDate).toLocaleDateString();
+  const endDate = new Date(lectureData.endDate).toLocaleDateString();
 
   return (
     <>
       <LectureHeader
         title={lectureData.title}
-        img={lectureData.img}
-        tutor={lectureData.tutor}
+        img={lectureData.image}
+        tutor={lectureData.teachername}
         tutorImg={lectureData.tutorImg}
       />
       <MaxWidthLayout hasSideBar>
         <main>
-          {lectureData.description.map((section) => (
-            <div
-              key={section.title}
-              className={styles.group}
-            >
-              <h2>{section.title}</h2>
-              <p>{section.content}</p>
-            </div>
-          ))}
+          <div className={styles.group}>
+            <h2>수업소개</h2>
+            <p>{lectureData.description}</p>
+          </div>
+          <div className={styles.group}>
+            <h2>커리큘럼</h2>
+            <p>{lectureData.plan}</p>
+          </div>
         </main>
         <aside>
+          {/* TODO: 수업시간 제거 또는 데이터 수정 */}
           <ClassInfo
-            classTerm={lectureData.term}
-            classTime={lectureData.time}
+            classTerm={`${startDate} ~ ${endDate}`}
+            classTime={lectureData.classTime}
           />
         </aside>
       </MaxWidthLayout>

frontend/src/pages/StudentHomePage/StudentHomePage.jsx

@@ -12,7 +12,6 @@ export default function StudentHomePage() {
     ],
   };
 
-  // const { data } = useLectures();
   const { data } = useLectures();
   const allClasses = data?.data;