Merge pull request #306 from KW-ClassLog/Feat/#302/presentation-page-markup

✨ Feat/#302 강의중 화면 마크업

Author: mumminn

frontend/app/teacher/lecture-detail/[lectureId]/_components/LectureHeader/LectureHeader.tsx

@@ -9,6 +9,8 @@ import MakeQuizModal from "@/components/Modal/MakeQuizModal/MakeQuizModal";
 import { FetchLectureDetailResult } from "@/types/lectures/fetchLectureDetailTypes";
 import { fetchLectureDetail } from "@/api/lectures/fetchLectureDetail";
 import { useLectureDetail } from "../LectureDetailContext";
+import { useRouter } from "next/navigation";
+import { ROUTES } from "@/constants/routes";
 
 export default function LectureHeader() {
   const { lectureId, setClassId, refreshKey } = useLectureDetail();
@@ -17,6 +19,8 @@ export default function LectureHeader() {
   const [showQuizModal, setShowQuizModal] = useState(false);
   const [loading, setLoading] = useState(true);
 
+  const router = useRouter();
+
   const fetchData = useCallback(async () => {
     try {
       setLoading(true);
@@ -43,8 +47,7 @@ export default function LectureHeader() {
   }, [lectureId, setClassId, fetchData, refreshKey]);
 
   const handleStartLecture = () => {
-    // TODO: 강의 시작 로직 구현
-    console.log("강의 시작");
+    router.push(ROUTES.teacherLectureLive(lectureId));
   };
 
   const handleQuizModalClose = () => {

frontend/app/teacher/lecture-live/[lectureId]/_components/Chating/ChatingButton/ChatingButton.module.scss

@@ -0,0 +1,17 @@
+@import "@/styles/variables";
+
+.wrap {
+  position: relative;
+  display: inline-flex;
+}
+
+.badge {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #ef4444;
+  box-shadow: 0 0 0 2px #fff;
+}

frontend/app/teacher/lecture-live/[lectureId]/_components/Chating/ChatingButton/ChatingButton.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import IconButton from "@/components/Button/IconButton/IconButton";
+import { MessageCircleMore } from "lucide-react";
+import { useLive } from "../../LectureLiveProvider";
+import styles from "./ChatingButton.module.scss";
+
+export default function ChatingButton({
+  className,
+  onPress,
+}: {
+  className?: string;
+  onPress?: () => void;
+}) {
+  const { panels, togglePanel } = useLive();
+  const isOpen = panels.chat;
+  const [unread, setUnread] = useState(false);
+
+  useEffect(() => {
+    if (isOpen) setUnread(false);
+  }, [isOpen]);
+
+  useEffect(() => {
+    const onNew = () => {
+      if (!isOpen) setUnread(true);
+    };
+    window.addEventListener("live:chat:new", onNew as EventListener);
+    return () => window.removeEventListener("live:chat:new", onNew as EventListener);
+  }, [isOpen]);
+
+  const onClick = () => {
+    onPress?.();
+    togglePanel("chat");
+  };
+
+  return (
+    <span className={`${styles.wrap} ${className ?? ""}`}>
+      <IconButton
+        ariaLabel="채팅"
+        onClick={onClick}
+        icon={<MessageCircleMore data-active={isOpen} />}
+      />
+      {unread && !isOpen && <i className={styles.badge} aria-hidden />}
+    </span>
+  );
+}

frontend/app/teacher/lecture-live/[lectureId]/_components/Chating/ChatingPanel/ChatingPanel.module.scss

@@ -0,0 +1,60 @@
+@import "@/styles/variables";
+
+.wrap {
+  height: 100%;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+}
+
+.header {
+  padding: $spacing-sm $spacing-sm 0 $spacing-sm;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.headerTitle {
+  font-size: $font-size-lg;
+  font-weight: $font-weight-medium;
+  color: $color-neutral-1;
+}
+
+.closeBtn :global(button) {
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: 8px;
+
+  &:hover { background: $color-neutral-7; }
+}
+
+.body {
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  padding: $spacing-sm;
+  gap: $spacing-xs;
+}
+
+.row {
+  display: flex;
+}
+
+.teacher { justify-content: flex-end; }
+.student { justify-content: flex-start; }
+
+.inputRow {
+  padding: $spacing-sm;
+  border-top: 1px solid $color-neutral-7;
+
+  :global(.inputBox) {
+    padding-right: 6px;
+  }
+}
+
+.inputRow :global(.iconRight) {
+  display: inline-flex;
+  align-items: center;
+}

frontend/app/teacher/lecture-live/[lectureId]/_components/Chating/ChatingPanel/ChatingPanel.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import styles from "./ChatingPanel.module.scss";
+import IconButton from "@/components/Button/IconButton/IconButton";
+import { X, SendHorizontal } from "lucide-react";
+import { useLive } from "../../LectureLiveProvider";
+import ChatBox from "@/components/ChatBox/ChatBox";
+import BasicInput from "@/components/Input/BasicInput/BasicInput";
+
+type Msg = {
+  id: string;
+  text: string;
+  role: "teacher" | "student";
+  ts?: number;
+};
+
+export default function ChatPanel() {
+  const { togglePanel } = useLive();
+
+  const [msgs, setMsgs] = useState<Msg[]>([
+    { id: "seed1", text: "질문이요~", role: "student", ts: Date.now()},
+  ]);
+  const [text, setText] = useState("");
+
+  const bodyRef = useRef<HTMLDivElement>(null);
+
+  const closeChat = () => togglePanel("chat");
+
+  const send = () => {
+    const t = text.trim();
+    if (!t) return;
+    setMsgs((m) => [
+      ...m,
+      { id: String(Date.now()), text: t, role: "teacher", ts: Date.now() },
+    ]);
+    setText("");
+  };
+
+  const onSubmit: React.FormEventHandler = (e) => {
+    e.preventDefault();
+    send();
+  };
+
+  useEffect(() => {
+    const el = bodyRef.current;
+    if (!el) return;
+    el.scrollTop = el.scrollHeight;
+  }, [msgs]);
+
+  const pad = (n: number) => n.toString().padStart(2, "0");
+  const fmt = (ts: number) => {
+    const d = new Date(ts);
+    const yy = pad(d.getFullYear() % 100);
+    const MM = pad(d.getMonth() + 1);
+    const dd = pad(d.getDate());
+    const hh = pad(d.getHours());
+    const mm = pad(d.getMinutes());
+    const ss = pad(d.getSeconds());
+    return `${yy}.${MM}.${dd} ${hh}:${mm}:${ss}`;
+  };
+
+  return (
+    <div className={styles.wrap}>
+      <div className={styles.header}>
+        <span className={styles.headerTitle}>Question</span>
+        <div className={styles.closeBtn}>
+          <IconButton ariaLabel="채팅 닫기" onClick={closeChat} icon={<X />} />
+        </div>
+      </div>
+
+      <div ref={bodyRef} className={styles.body}>
+        {msgs.map((m) => {
+          const tsText = m.ts ? fmt(m.ts) : "";
+          return (
+            <div
+              key={m.id}
+              className={`${styles.row} ${
+                m.role === "teacher" ? styles.teacher : styles.student
+              }`}
+            >
+              <ChatBox
+                isAnonymous={true}
+                nickname=""
+                profilePicture=""
+                message={m.text}
+                timestamp={tsText}
+                variant={m.role === "teacher" ? "teacher" : "student"}
+              />
+            </div>
+          );
+        })}
+      </div>
+
+      <form className={styles.inputRow} onSubmit={onSubmit}>
+        <BasicInput
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          placeholder="답변 입력하기"
+          iconRight={
+            <IconButton
+              ariaLabel="전송"
+              onClick={send}
+              icon={<SendHorizontal size={18} color="#9AA4B2" />}
+            />
+          }
+        />
+      </form>
+    </div>
+  );
+}

frontend/app/teacher/lecture-live/[lectureId]/_components/DocumentSideButton/DocumentSideButton.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import IconButton from "@/components/Button/IconButton/IconButton";
+import { PanelLeft, PanelLeftDashed } from "lucide-react";
+import { useLive } from "../LectureLiveProvider";
+
+export type DocumentSideButtonProps = {
+  open: boolean;
+  onToggle: () => void;
+  ariaLabelOpen?: string;
+  ariaLabelClose?: string;
+  disabled?: boolean;
+};
+
+export default function DocumentSideButton({
+  open,
+  onToggle,
+  ariaLabelOpen = "슬라이드 패널 열기",
+  ariaLabelClose = "슬라이드 패널 닫기",
+  disabled = false,
+}: DocumentSideButtonProps) {
+  const label = open ? ariaLabelClose : ariaLabelOpen;
+
+  return (
+    <IconButton
+      ariaLabel={label}
+      onClick={onToggle}
+      disabled={disabled}
+      icon={open ? <PanelLeft /> : <PanelLeftDashed />}
+    />
+  );
+}
+
+export function DocumentSideButtonConnected() {
+  const { panels, togglePanel } = useLive();
+  return (
+    <DocumentSideButton
+      open={panels.files}
+      onToggle={() => togglePanel("files")}
+    />
+  );
+}

frontend/app/teacher/lecture-live/[lectureId]/_components/LectureLiveHeader/LectureLiveHeader.module.scss

@@ -0,0 +1,48 @@
+@import "@/styles/variables";
+
+.container {
+    width: 100%;
+    background: $color-white;
+    border-bottom: 1px solid $color-neutral-7;
+}
+
+.inner {
+    height: auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 3px $spacing-md;
+}
+
+.left {
+    display: flex;
+    align-items: center;
+    gap: $spacing-xs;
+}
+
+.divider {
+    width: 1px;
+    height: 20px;
+    background: $color-neutral-7;
+    margin: 0 $spacing-xs;
+}
+
+
+.left svg[data-active="true"] {
+    color: $color-blue;
+    stroke: $color-blue;
+}
+
+
+.endBtn {
+    align-self: center;           
+    height: auto !important;    
+    min-height: 0 !important;
+    line-height: 2;               
+    padding-block: 3px !important; 
+}
+
+.docBtnZ {
+    position: relative;
+    z-index: 2000;
+  }