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

src/main/front/src/admin-club/pages/AdminCourseDetailPage/SectionList.tsx

@@ -334,6 +334,9 @@ const SectionList: React.FC<SectionListProps> = ({
                                 <SectionCourses
                                   title={group.title}
                                   description={section.description}
+                                  nodeGroupId={group.id}
+                                  clubSlug={club}
+                                  courseSlug={courseSlug}
                                   nodes={
                                     Array.isArray(group.nodes)
                                       ? group.nodes.map((node: any) => {

src/main/front/src/admin-club/pages/AdminCourseDetailPage/components/SectionCourses.tsx

@@ -21,6 +21,9 @@ export interface Node {
 export interface SectionCoursesProps {
   title: string;
   description: string;
+  clubSlug?: string;
+  courseSlug?: string;
+  nodeGroupId: string;
   nodes: Node[];
   onMove?: () => void;
   onDelete?: () => void;
@@ -55,6 +58,9 @@ const SectionCourses: React.FC<SectionCoursesProps> = ({
   onMoveDown,
   disableMoveUp,
   disableMoveDown,
+  clubSlug = "",
+  courseSlug = "",
+  nodeGroupId,
 }) => {
   return (
     <Paper
@@ -75,7 +81,17 @@ const SectionCourses: React.FC<SectionCoursesProps> = ({
         justifyContent="space-between"
         mb={0.2}
       >
-        <Typography variant="subtitle1" fontWeight={600}>
+        <Typography
+          variant="subtitle1"
+          fontWeight={600}
+          onClick={() => {
+            window.open(
+              `/club/${clubSlug}/course/${courseSlug}/nodegroup/${nodeGroupId}`,
+              "_blank"
+            );
+          }}
+          sx={{ cursor: "pointer", "&:hover": { textDecoration: "underline" } }}
+        >
           {title}
         </Typography>
         <Box display="flex" alignItems="center" gap={0.5}>
@@ -108,12 +124,13 @@ const SectionCourses: React.FC<SectionCoursesProps> = ({
             </Tooltip>
           )}
           {onMove && (
-            <Tooltip title="노드 그룹 이동">
+            <Tooltip title="노드 그룹 수정">
               <IconButton size="small" sx={{ color: "#fff" }} onClick={onMove}>
                 <EditIcon fontSize="small" />
               </IconButton>
             </Tooltip>
           )}
+
           {onDelete && (
             <Tooltip title="노드 그룹 삭제">
               <IconButton

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 || "");
@@ -385,12 +402,6 @@ function AdminCourseNodeGroupPage() {
                           >
                             <ArrowDownwardIcon fontSize="small" />
                           </Button>
-                          <Box mt={1}>
-                            <EditIcon
-                              fontSize="small"
-                              sx={{ color: "#fff", cursor: "grab" }}
-                            />
-                          </Box>
                         </Box>
                       </Box>
                       <NodeRenderer node={node} refetch={refetch} />

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} />