[FE] 비디오 트랜스 코딩 및 스타일 변경

src/main/front/src/admin-club/pages/AdminCourseNodeGroup/AdminCourseDetailNodeGroupPage.tsx

@@ -178,6 +178,23 @@ function AdminCourseNodeGroupPage() {
     enabled: !!nodeGroupId,
   });
 
+  // 비디오 노드 중 업로드/트랜스코딩 상태가 있으면 3초마다 refetch
+  React.useEffect(() => {
+    if (!data || !Array.isArray(data.nodes)) return;
+    const hasUploadingVideo = data.nodes.some(
+      (node: any) =>
+        node.type === "VIDEO" &&
+        node.data?.file?.status &&
+        ["UPLOADED", "TRANSCODING"].includes(node.data.file.status)
+    );
+    if (!hasUploadingVideo) return;
+
+    const interval = setInterval(() => {
+      refetch && refetch();
+    }, 3000);
+    return () => clearInterval(interval);
+  }, [data, refetch]);
+
   // 노드 그룹 제목 수정 상태
   const [editingTitle, setEditingTitle] = useState(false);
   const [title, setTitle] = useState(data?.title || "");

src/main/front/src/admin-club/pages/AdminCourseNodeGroup/NodeVideo.tsx

@@ -16,7 +16,7 @@ const NodeVideo: React.FC<NodeVideoProps> = ({ node, refetch }) => {
   const [editing, setEditing] = React.useState(false);
 
   // 파일이 없거나, 수정 버튼을 누르면 업로드 UI 노출
-  if (!node?.data?.file?.playlist || editing) {
+  if (!node?.data?.file || editing) {
     return (
       <Box my={2}>
         <FileUploadBox
@@ -40,6 +40,91 @@ const NodeVideo: React.FC<NodeVideoProps> = ({ node, refetch }) => {
     );
   }
 
+  // 상태별 분기 처리
+  const status = node.data.file.status;
+  const progress = node.data.file.progress;
+
+  if (status === "TRANSCODING") {
+    return (
+      <Box my={2}>
+        <Typography color="primary" fontWeight={600} mb={1}>
+          비디오 트랜스코딩 중...
+        </Typography>
+        <Box display="flex" alignItems="center" gap={1}>
+          <Box width={120}>
+            <Box
+              sx={{
+                height: 8,
+                background: "#eee",
+                borderRadius: 4,
+                overflow: "hidden",
+              }}
+            >
+              <Box
+                sx={{
+                  width: `${progress || 0}%`,
+                  height: "100%",
+                  background: "#1976d2",
+                  transition: "width 0.3s",
+                }}
+              />
+            </Box>
+          </Box>
+          <Typography fontSize={14} color="text.secondary">
+            {progress != null ? `${progress}%` : "진행률 계산 중..."}
+          </Typography>
+        </Box>
+        <Typography variant="body2" color="text.secondary" mt={1}>
+          트랜스코딩이 완료되면 영상이 표시됩니다.
+        </Typography>
+        <Button sx={{ mt: 2 }} size="small" variant="outlined" disabled>
+          비디오 변경 (트랜스코딩 중)
+        </Button>
+      </Box>
+    );
+  }
+
+  if (status !== "TRANSCODE_COMPLETED") {
+    // 실패, 업로드 중, 대기 등 기타 상태
+    let message = "";
+    switch (status) {
+      case "PENDING":
+        message = "비디오 업로드 대기 중입니다.";
+        break;
+      case "UPLOADING":
+        message = "비디오 업로드 중입니다.";
+        break;
+      case "UPLOADED":
+        message =
+          "비디오 업로드가 완료되었습니다. 트랜스코딩을 기다리는 중입니다.";
+        break;
+      case "TRANSCODE_FAILED":
+        message = "비디오 트랜스코딩에 실패했습니다. 다시 업로드해 주세요.";
+        break;
+      default:
+        message = `비디오 상태: ${status}`;
+    }
+    return (
+      <Box my={2}>
+        <Typography
+          color={status === "TRANSCODE_FAILED" ? "error" : "primary"}
+          fontWeight={600}
+          mb={1}
+        >
+          {message}
+        </Typography>
+        <Button
+          sx={{ mt: 2 }}
+          size="small"
+          variant="outlined"
+          onClick={() => setEditing(true)}
+        >
+          비디오 변경
+        </Button>
+      </Box>
+    );
+  }
+
   return (
     <Box my={2}>
       <VideoPlayer src={node.data.file.playlist} />

src/main/front/src/admin-club/pages/AdminProgramListPage.tsx

@@ -125,7 +125,7 @@ function AdminProgramListPage() {
                         edge="end"
                         aria-label="view"
                         component={RouterLink}
-                        to={`/club/${club}/program/${program.id}`}
+                        to={`/club/${club}/program/${program.slug}`}
                         target="_blank"
                         rel="noopener noreferrer"
                       >

src/main/front/src/components/ClubPage/ClubBadge.tsx

@@ -5,17 +5,24 @@ import EmojiEventsIcon from "@mui/icons-material/EmojiEvents";
 export interface ClubBadgeProps {
   text: string;
   hoverable?: boolean;
+  noEmoji?: boolean;
+  background?: React.CSSProperties["background"];
 }
 
-const ClubBadge: React.FC<ClubBadgeProps> = ({ text, hoverable }) => {
+const ClubBadge: React.FC<ClubBadgeProps> = ({
+  text,
+  hoverable,
+  noEmoji,
+  background,
+}) => {
   return (
     <Paper
       elevation={2}
       sx={{
         display: "inline-flex",
         alignItems: "center",
         gap: 1,
-        background: "rgba(250, 250, 250, 0.14)",
+        background: background || "rgba(250, 250, 250, 0.14)",
         color: "#fff",
         borderRadius: 2,
         mt: 1,
@@ -41,7 +48,9 @@ const ClubBadge: React.FC<ClubBadgeProps> = ({ text, hoverable }) => {
           : {}),
       }}
     >
-      <EmojiEventsIcon sx={{ fontSize: 18, mr: 0.5, color: "#ffd700" }} />
+      {!noEmoji && (
+        <EmojiEventsIcon sx={{ fontSize: 18, mr: 0.5, color: "#ffd700" }} />
+      )}
       <Typography
         component="span"
         sx={{ fontWeight: 500, fontSize: 15, color: "inherit" }}

src/main/front/src/components/ClubPage/ClubRunningProgramBanner.tsx

@@ -67,6 +67,17 @@ function ClubRunningProgramBanner({
 
   return (
     <>
+      {(filteredPrograms.length === 0 ||
+        filteredPrograms.every((p) => p.isParticipant === "0")) && (
+        <Link to={`/club/${club}`} style={{ textDecoration: "none" }}>
+          <ClubBadge
+            hoverable
+            background="rgba(247, 91, 91, 0.14)"
+            noEmoji
+            text="‼️ 진행 중인 프로그램이 없습니다. 진도 확인이 되지 않습니다."
+          />
+        </Link>
+      )}
       <Box mt={0.5} {...props}>
         {filteredPrograms.map((program: any) => {
           const isParticipant = program.isParticipant === "1";

src/main/front/src/components/NodeGroupPage/ImagePreviewWithDownload.tsx

@@ -37,7 +37,7 @@ const ImagePreviewWithDownload: React.FC<Props> = ({ src, filename }) => {
             height: "100%",
             width: "100%",
             borderRadius: "12px",
-            objectFit: "cover",
+            objectFit: "contain",
           }}
         />
 

src/main/front/src/components/NodeGroupPage/MarkdownViwer.tsx

@@ -11,21 +11,40 @@ const MarkdownViewer: React.FC<MarkdownViewerProps> = ({ content }) => {
     <Box
       p={2}
       //   bgcolor="#fdfdfd"
-      border="1px solid #ccc"
+      // border="1px solid #ccc"
       borderRadius={2}
-      sx={{ overflow: "auto", maxHeight: "100%" }}
+      sx={{ overflow: "auto", maxHeight: "100%", width: "100%" }}
     >
       <ReactMarkdown
         children={content}
         components={{
           h1: ({ ...props }) => (
-            <Typography variant="h4" gutterBottom {...props} />
+            <Typography
+              variant="h4"
+              sx={{ my: 3, fontWeight: "bolder" }}
+              {...props}
+            />
           ),
           h2: ({ ...props }) => (
-            <Typography variant="h5" gutterBottom {...props} />
+            <Typography
+              variant="h5"
+              sx={{ my: 3, fontWeight: "bolder" }}
+              {...props}
+            />
+          ),
+          h3: ({ ...props }) => (
+            <Typography
+              variant="h6"
+              sx={{ my: 3, fontWeight: "bolder" }}
+              {...props}
+            />
           ),
           p: ({ ...props }) => (
-            <Typography variant="body1" paragraph {...props} />
+            <Typography
+              variant="body1"
+              sx={{ lineHeight: 1.75, wordBreak: "keep-all" }}
+              {...props}
+            />
           ),
           li: ({ ...props }) => (
             <li>

src/main/front/src/components/NodeGroupPage/NextButton.tsx

@@ -1,6 +1,14 @@
-import React from "react";
+import React, { useState } from "react";
 import { useNavigate, useParams } from "react-router";
 import { useFetchBe } from "../../tools/api";
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+  Typography,
+} from "@mui/material";
 
 type NextNodeGroupButtonProps = {
   currentNodeGroupId: string;
@@ -9,18 +17,17 @@ type NextNodeGroupButtonProps = {
 function NextNodeGroupButton({ currentNodeGroupId }: NextNodeGroupButtonProps) {
   const navigate = useNavigate();
   const fetchBe = useFetchBe();
-
   const { club, course_name } = useParams<{
     club: string;
     course_name: string;
   }>();
+  const [openModal, setOpenModal] = useState(false);
 
   const fetchNextNodeGroup = async (nodeGroupId: string) => {
     try {
       const response = await fetchBe(
         `/v1/node-group/next?nodeGroupId=${nodeGroupId}`
       );
-      console.log("return: " + response);
       return response;
     } catch (error) {
       console.error("다음 노드그룹 요청 실패:", error);
@@ -44,21 +51,53 @@ function NextNodeGroupButton({ currentNodeGroupId }: NextNodeGroupButtonProps) {
           `/club/${club}/course/${course_name}/nodegroup/${next.nodeGroupId}`
         );
       } else {
-        alert("마지막 노드 그룹입니다.");
+        setOpenModal(true);
       }
     } catch (error) {
       console.error("노드 그룹 이동 중 오류:", error);
       alert("이동 중 오류가 발생했습니다.");
     }
   };
 
+  const handleGoToCourse = () => {
+    if (club && course_name) {
+      navigate(`/club/${club}/course/${course_name}`);
+    } else {
+      navigate("/club");
+    }
+  };
+
   return (
-    <button
-      onClick={handleClick}
-      style={{ padding: "8px 16px", marginTop: "20px" }}
-    >
-      NEXT
-    </button>
+    <>
+      <button
+        onClick={handleClick}
+        style={{ padding: "8px 16px", marginTop: "20px" }}
+      >
+        NEXT
+      </button>
+      <Dialog open={openModal} onClose={() => setOpenModal(false)}>
+        <DialogTitle>마지막 강의입니다</DialogTitle>
+        <DialogContent>
+          <Typography>
+            이 코스의 모든 강의를 완료했습니다.
+            <br />
+            코스 페이지로 돌아가시겠습니까?
+          </Typography>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setOpenModal(false)} color="inherit">
+            닫기
+          </Button>
+          <Button
+            onClick={handleGoToCourse}
+            variant="contained"
+            color="primary"
+          >
+            코스로 이동
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
   );
 }
 

src/main/front/src/components/course/CourseItem.tsx

@@ -23,7 +23,7 @@ const CourseItem: React.FC<CourseItemProps> = ({
       component={Link}
       to={url}
       sx={{
-        maxWidth: 345,
+        // maxWidth: 345,
         position: "relative",
         overflow: "hidden",
         transition:

src/main/front/src/components/course/CourseList.tsx

@@ -1,6 +1,7 @@
 import { Box } from "@mui/system";
 import CourseItem from "./CourseItem";
 import { useParams } from "react-router";
+import { Grid } from "@mui/material";
 
 export interface CourseListProps {
   courses?: Array<{
@@ -17,17 +18,21 @@ function CourseList({ courses }: CourseListProps) {
   const { club } = useParams<{ club: string }>();
   if (!courses || courses.length === 0) return <Box>No courses available</Box>;
   return (
-    <Box sx={{ display: "flex", gap: 2 }}>
+    <Grid container spacing={2}>
       {courses?.map((course, idx) => (
-        <CourseItem
+        <Grid
           key={`course-${course?.id}`}
-          name={course.title}
-          picture={course.pictureUrl}
-          progress={course.progress}
-          url={course.url || `/club/${club}/course/${course.slug}`}
-        />
+          size={{ xs: 12, sm: 6, md: 4, lg: 3 }}
+        >
+          <CourseItem
+            name={course.title}
+            picture={course.pictureUrl}
+            progress={course.progress}
+            url={course.url || `/club/${club}/course/${course.slug}`}
+          />
+        </Grid>
       ))}
-    </Box>
+    </Grid>
   );
 }