Merge pull request #30 from TeamBNBN/fe/lecturePages

[Front-End] feat: 강의 정보 페이지 추가

frontend/src/components/LectureHeader/LectureHeader.jsx

@@ -1,6 +1,6 @@
 import styles from './LectureHeader.module.css';
 
-export default function LectureHeader({ img, title, tutorImg, tutor, isLive }) {
+export default function LectureHeader({ img, title, tutorImg, tutor, isLive = false }) {
   return (
     <div className={styles.wrapper}>
       <header className={styles.header}>

frontend/src/pages/LectureInfo/LectureInfoPage.jsx

@@ -0,0 +1,60 @@
+import styles from './LectureInfoPage.module.css';
+import ClassInfo from '../../components/ClassInfo/ClassInfo';
+import { MaxWidthLayout } from '../../components/Layout';
+import LectureHeader from '../../components/LectureHeader/LectureHeader';
+
+export default function LectureInfoPage() {
+  const lectureData = {
+    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: '정보처리기사 실기에 관심이 많은 사람',
+      },
+    ],
+  };
+
+  return (
+    <>
+      <LectureHeader
+        title={lectureData.title}
+        img={lectureData.img}
+        tutor={lectureData.tutor}
+        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>
+          ))}
+        </main>
+        <aside>
+          <ClassInfo
+            classTerm={lectureData.term}
+            classTime={lectureData.time}
+          />
+        </aside>
+      </MaxWidthLayout>
+    </>
+  );
+}

frontend/src/pages/LectureInfo/LectureInfoPage.module.css

@@ -0,0 +1,21 @@
+.group {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 40px;
+
+  & > h2 {
+    font-size: 24px;
+    line-height: 1.2;
+    font-weight: 700;
+    margin: 0;
+  }
+
+  & > p {
+    white-space: pre-wrap;
+    font-size: 16px;
+    line-height: 1.4;
+    font-weight: 400;
+    margin: 0;
+  }
+}