Merge pull request #18 from TeamBNBN/fe/lectureheader

[Front-End] lectureheader 추가

frontend/src/components/Footer/Footer.module.css

@@ -18,6 +18,7 @@
   font-size: 14px;
   line-height: 1.4;
   font-weight: 400;
+  box-sizing: border-box;
 }
 
 .title {

frontend/src/components/Header/Header.module.css

@@ -23,6 +23,7 @@
   line-height: 1.4;
   font-weight: 700;
   color: var(--text-color);
+  box-sizing: border-box;
 }
 
 .group {

frontend/src/components/LectureHeader/LectureHeader.jsx

@@ -0,0 +1,38 @@
+import styles from './LectureHeader.module.css';
+
+export default function LectureHeader({ img, title, tutorImg, tutor, isLive }) {
+  return (
+    <div className={styles.wrapper}>
+      <header className={styles.header}>
+        <img
+          src={img}
+          alt="강의 이미지"
+          className={styles.thumbnail}
+        />
+        <div className={styles.info}>
+          <h1 className={styles.title}>{title}</h1>
+          <div className={styles.desc}>
+            <div className={styles.tutor}>
+              <img
+                src={tutorImg}
+                alt="강사 사진"
+                className={styles.tutorImg}
+              />
+              <div>{tutor}</div>
+            </div>
+            <div>
+              {isLive ? (
+                <button
+                  type="button"
+                  className={styles.liveButton}
+                >
+                  실시간 강의 입장하기
+                </button>
+              ) : null}
+            </div>
+          </div>
+        </div>
+      </header>
+    </div>
+  );
+}

frontend/src/components/LectureHeader/LectureHeader.module.css

@@ -0,0 +1,72 @@
+.wrapper {
+  width: 100%;
+  background-color: var(--background);
+  border-bottom: 1px solid var(--border-color);
+  margin: 20px 0 40px;
+}
+
+.header {
+  display: flex;
+  justify-content: stretch;
+  align-items: center;
+  gap: 40px;
+  width: 100%;
+  max-width: 1320px;
+  padding: 0 40px;
+  margin: 0 auto 40px;
+  box-sizing: border-box;
+}
+
+.thumbnail {
+  flex-shrink: 0;
+  width: 160px;
+  height: 160px;
+  border-radius: 16px;
+  border: 1px solid var(--border-color);
+}
+
+.info {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.title {
+  font-size: 36px;
+  line-height: 1.2;
+  font-weight: 900;
+  margin: 0;
+}
+
+.desc {
+  display: flex;
+  justify-content: space-between;
+}
+
+.tutor {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.tutorImg {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  border: 1px solid var(--border-color);
+}
+
+.liveButton {
+  padding: 12px 16px;
+  text-align: center;
+  font-size: 16px;
+  line-height: 1.4;
+  font-family: inherit;
+  font-weight: 700;
+  border-radius: 8px;
+  cursor: pointer;
+  background-color: var(--error-color);
+  border: 1px solid var(--error-border);
+  color: var(--on-error);
+}

frontend/src/index.css

@@ -124,6 +124,17 @@
   --warning-color: var(--yellow500);
   --info-color: var(--blue500);
 
+  --on-primary: var(--whiteOpacity800);
+  --on-error: var(--whiteOpacity800);
+  --on-success: var(--whiteOpacity800);
+  --on-warning: var(--whiteOpacity800);
+  --on-info: var(--whiteOpacity800);
+
+  --error-border: var(--red700);
+  --success-border: var(--green700);
+  --warning-border: var(--yellow700);
+  --info-border: var(--blue700);
+
   /* shadow */
   --shadow: 2px 4px 12px var(--greyOpacity200);
   --shadow-hard: 2px 4px 16px var(--greyOpacity300);