[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/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/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>
   );
 }