[FE] 비디오 트랜스 코딩 및 스타일 변경 #226
Conversation
…y in NodeVideo component; refetch video data during upload/transcoding
…e; Add Progress field to the nodefile interface
…ness; comment out maxWidth in CourseItem
Walkthrough이 변경사항은 비디오 노드의 업로드 및 트랜스코딩 상태를 실시간으로 반영하기 위해 3초마다 폴링(refetch) 기능을 추가하고, 다양한 비디오 상태에 따라 상세한 UI 피드백(진행률, 메시지, 버튼 등)을 제공하도록 NodeGroupPage와 관련 컴포넌트들을 수정합니다. 또한, 이미지 프리뷰 스타일, 마크다운 렌더링, 코스 리스트 레이아웃 등 UI 개선이 포함되어 있습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant NodeGroupPage
participant Server
User->>NodeGroupPage: 페이지 진입/로드
NodeGroupPage->>Server: 노드 그룹 데이터 fetch
Server-->>NodeGroupPage: 노드 데이터 반환
alt 비디오 노드 상태가 "UPLOADED" 또는 "TRANSCODING"인 경우
loop 3초마다
NodeGroupPage->>Server: refetch (폴링)
Server-->>NodeGroupPage: 최신 노드 데이터 반환
NodeGroupPage->>User: 상태별 UI 업데이트(진행률, 메시지 등)
end
end
User->>NodeGroupPage: (필요시) 비디오 업로드/변경 시도
Possibly related PRs
Suggested reviewers
Poem
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
src/main/front/src/components/NodeGroupPage/MarkdownViwer.tsx (1)
1-1: 파일명 오타 수정 필요파일명이
MarkdownViwer.tsx로 되어 있습니다.MarkdownViewer.tsx로 수정해주세요.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
src/main/front/src/admin-club/pages/AdminCourseNodeGroup/AdminCourseDetailNodeGroupPage.tsx(1 hunks)src/main/front/src/admin-club/pages/AdminCourseNodeGroup/NodeVideo.tsx(2 hunks)src/main/front/src/components/NodeGroupPage/ImagePreviewWithDownload.tsx(1 hunks)src/main/front/src/components/NodeGroupPage/MarkdownViwer.tsx(1 hunks)src/main/front/src/components/course/CourseItem.tsx(1 hunks)src/main/front/src/components/course/CourseList.tsx(2 hunks)src/main/front/src/pages/NodeGroupPage.tsx(3 hunks)src/main/front/src/types/nodeGroupData.types.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
src/main/front/src/components/course/CourseList.tsx (1)
src/main/front/src/admin-club/components/AdminProgramEdit.tsx (1)
CourseItem(33-42)
🪛 Biome (1.9.4)
src/main/front/src/components/NodeGroupPage/MarkdownViwer.tsx
[error] 19-19: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
src/main/front/src/pages/NodeGroupPage.tsx
[error] 139-139: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.
(lint/correctness/useJsxKeyInIterable)
🔇 Additional comments (9)
src/main/front/src/types/nodeGroupData.types.ts (1)
18-18: 진행률 추적을 위한 속성 추가가 적절합니다.
progress속성을 선택적으로 추가하여 기존 코드와의 호환성을 유지하면서 비디오 트랜스코딩 진행률 추적 기능을 지원할 수 있게 되었습니다.src/main/front/src/components/course/CourseItem.tsx (1)
26-26: 반응형 레이아웃을 위한 너비 제약 제거가 적절합니다.고정
maxWidth제거로 Card 컴포넌트가 그리드 시스템에서 더 유연하게 동작할 수 있게 되었습니다.src/main/front/src/components/NodeGroupPage/ImagePreviewWithDownload.tsx (1)
40-40: 이미지 표시 방식 개선이 적절합니다.
objectFit: "contain"으로 변경하여 이미지가 잘리지 않고 전체 내용을 볼 수 있게 되었습니다. 프리뷰 기능에서는 이미지 전체를 보는 것이 더 사용자 친화적입니다.src/main/front/src/admin-club/pages/AdminCourseNodeGroup/AdminCourseDetailNodeGroupPage.tsx (1)
181-196: 비디오 트랜스코딩 상태 실시간 업데이트 로직이 잘 구현되었습니다.업로드 중이거나 트랜스코딩 중인 비디오 노드가 있을 때만 3초마다 폴링하여 효율적이며, 적절한 cleanup 처리로 메모리 누수를 방지했습니다. 의존성 배열과 조건부 실행 로직도 올바르게 구현되었습니다.
src/main/front/src/components/course/CourseList.tsx (1)
23-25:Details
✅ Verification successful
Grid 컴포넌트의
sizeprop 유효성 확인 필요MUI Grid의 표준 API는
xs,sm,md,lg속성을 사용합니다.sizeprop이 프로젝트에서 사용 중인 MUI 버전에서 지원되는지 확인이 필요합니다.
🌐 Web query:
MUI Grid v2 size prop 지원 여부💡 Result:
MUI Grid v2의 size prop 지원 여부
MUI(Grid v2)에서는 size prop을 공식적으로 지원합니다.
주요 내용 요약
**Grid v1 (GridLegacy)**에서는 각 breakpoint에 맞춰
xs,sm,md,lg,xl등 별도의 prop을 사용했습니다.
예:<Grid xs={12} sm={6} />Grid v2부터는 각 breakpoint별 그리드 크기를 모두
sizeprop의 객체로 지정합니다.
예:<Grid size={{ xs: 12, sm: 6 }} />
만약 모든 breakpoint에서 동일한 값을 쓸 경우<Grid size={6} />과 같이 단일 값 사용도 가능합니다[1].size prop은
xs,sm,md,lg,xl값을 객체 형태로 한 번에 전달해 반응형 레이아웃을 손쉽게 구현할 수 있습니다[1][5].size prop에
"grow"값을 주면 해당 그리드 아이템이 남은 공간을 모두 차지하도록 동작합니다[1].기존 방식 (
xs,sm등 직접 지정)은 더 이상 권장되지 않으며, v7부터는 codemod를 통해 자동 변환이 가능합니다[1].예시 코드
// Grid v1 (GridLegacy) <Grid xs={12} sm={6} /> // Grid v2 <Grid size={{ xs: 12, sm: 6 }} /> <Grid size={6} /> // 모든 breakpoint에 6 <Grid size="grow" /> // 남은 공간 모두 차지기타 참고 사항
sizeprop 이외에도spacing,columns,offset,rowSpacing,columnSpacing등 다양한 style prop을 breakpoint별로 객체 형태로 지원합니다[2].- 그리드 항목을 나눠주는 크기 컨트롤 방식이 통합되어, 코드 가독성과 유지보수성이 향상되었습니다[1][5].
결론:
MUI Grid v2는sizeprop을 완벽하게 지원하며, 각 breakpoint별로 객체 형태로 column span(열 수)을 지정할 수 있습니다. 기존(legacy) 방식은 더 이상 권장되지 않습니다[1][5].Citations:
- 1: https://mui.com/material-ui/migration/upgrade-to-grid-v2/
- 2: https://mui.com/material-ui/react-grid/
- 3: https://kombai.com/mui/grid/
- 4: https://v5.mui.com/material-ui/react-grid2/
- 5: https://themewagon.com/blog/material-ui-grid-system-mui-grid-v2-for-responsive-design/
- 6: https://v5.mui.com/material-ui/react-grid/
- 7: mui/material-ui#42761
MUI Grid v2의
sizeprop 지원 확인 완료검증 결과, MUI Grid v2에서는
sizeprop을 공식적으로 지원하므로 현재 코드(<Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>)는 올바르게 사용된 것입니다. 추가 수정 없이 그대로 유지해도 무방합니다.src/main/front/src/admin-club/pages/AdminCourseNodeGroup/NodeVideo.tsx (2)
19-41: 비디오 업로드 조건 변경 확인파일 존재 여부 체크로 변경된 로직이 적절합니다.
🧰 Tools
🪛 Biome (1.9.4)
[error] 26-27: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
43-126: 비디오 상태별 UI 처리 구현 우수트랜스코딩 진행률 표시와 각 상태별 메시지 처리가 체계적으로 잘 구현되었습니다.
src/main/front/src/pages/NodeGroupPage.tsx (2)
69-83: 비디오 트랜스코딩 폴링 구현 우수3초 간격 폴링과 cleanup 처리가 적절하게 구현되었습니다.
266-383: 비디오 상태별 렌더링 로직 구현 우수각 비디오 상태(TRANSCODING, UPLOADED, PENDING 등)에 대한 UI 피드백이 체계적으로 잘 구현되었습니다. 진행률 표시와 상태 메시지가 사용자에게 명확한 정보를 제공합니다.
…handling in NextButton
…nd CoursePage components for better user feedback
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/main/front/src/components/NodeGroupPage/NextButton.tsx (1)
71-100: Dialog 구현이 잘 되어있으나 스타일링 개선을 고려해보세요.Material-UI Dialog가 적절히 구현되었고 사용자 친화적인 메시지를 제공합니다. 다만 다음 개선사항들을 고려해볼 수 있습니다:
- 버튼의 인라인 스타일을 CSS 클래스나 styled-components로 분리
- 일관된 컬러 테마 적용 (닫기 버튼도 primary 또는 secondary 컬러 사용)
스타일링 개선을 위한 제안:
- <button - onClick={handleClick} - style={{ padding: "8px 16px", marginTop: "20px" }} - > - NEXT - </button> + <Button + onClick={handleClick} + variant="contained" + color="primary" + sx={{ padding: "8px 16px", marginTop: "20px" }} + > + NEXT + </Button>- <Button onClick={() => setOpenModal(false)} color="inherit"> + <Button onClick={() => setOpenModal(false)} color="secondary">src/main/front/src/pages/CoursePage.tsx (1)
135-136: 디버그 코드 제거 필요필터링된 프로그램을 콘솔에 출력하는
console.log가 남아있습니다. 프로덕션 배포 전에 제거해야 합니다.const filteredPrograms = currentProgram(programs ?? []); - console.log(filteredPrograms);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
src/main/front/src/admin-club/pages/AdminProgramListPage.tsx(1 hunks)src/main/front/src/components/ClubPage/ClubBadge.tsx(2 hunks)src/main/front/src/components/ClubPage/ClubRunningProgramBanner.tsx(1 hunks)src/main/front/src/components/NodeGroupPage/NextButton.tsx(3 hunks)src/main/front/src/pages/CoursePage.tsx(4 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
src/main/front/src/pages/CoursePage.tsx (2)
src/main/front/src/tools/api.ts (1)
fetchBe(8-94)src/main/front/src/utils/currentProgram.ts (1)
currentProgram(4-13)
🔇 Additional comments (9)
src/main/front/src/components/NodeGroupPage/NextButton.tsx (4)
1-1: 필요한 import 구문이 적절히 추가되었습니다.
useStateHook과 Material-UI Dialog 관련 컴포넌트들이 올바르게 추가되어 모달 기능 구현에 필요한 의존성이 충족되었습니다.Also applies to: 4-11
24-24: 모달 상태 관리가 적절히 구현되었습니다.
useState를 사용한 모달 열기/닫기 상태 관리가 올바르게 추가되었습니다.
54-54: Alert에서 모달로의 변경이 UX를 크게 개선했습니다.기존의 브라우저 alert 대신 Material-UI Dialog를 사용하여 더 세련되고 일관된 사용자 인터페이스를 제공합니다.
62-68: 네비게이션 로직이 잘 구현되었습니다.URL 파라미터 존재 여부에 따른 적절한 fallback 처리가 포함되어 있어 robust한 네비게이션을 제공합니다.
src/main/front/src/admin-club/pages/AdminProgramListPage.tsx (1)
128-128: URL 구조 일관성 개선이 좋습니다프로그램 보기 링크에서
program.id대신program.slug을 사용하도록 변경한 것이 좋습니다. 이는 편집 링크(라인 139)와 일관성을 유지하며, 더 의미있는 URL 구조를 제공합니다.src/main/front/src/components/ClubPage/ClubRunningProgramBanner.tsx (1)
70-80: 사용자 피드백 개선이 훌륭합니다진행 중인 프로그램이 없거나 사용자가 참여하지 않을 때 명확한 시각적 피드백을 제공하는 것이 좋습니다. 빨간색 배경과 적절한 메시지로 사용자에게 상황을 명확히 전달합니다.
src/main/front/src/components/ClubPage/ClubBadge.tsx (1)
8-9: 컴포넌트 유연성 향상이 좋습니다
noEmoji와backgroundprops 추가로 컴포넌트의 재사용성이 크게 향상되었습니다. 이를 통해 다양한 상황에서 적절한 스타일링이 가능해졌습니다.Also applies to: 25-25, 51-53
src/main/front/src/pages/CoursePage.tsx (2)
36-39: 클럽 프로그램 데이터 조회 추가가 적절합니다사용자의 프로그램 참여 상태를 확인하기 위한 클럽 프로그램 데이터 조회가 잘 구현되었습니다. 기존 쿼리 패턴을 일관되게 따르고 있습니다.
233-266: 진도 표시 조건부 렌더링이 사용자 경험을 개선합니다사용자가 참여 중인 프로그램이 없을 때 적절한 메시지를 표시하고, 그렇지 않을 경우 진도 정보를 표시하는 조건부 렌더링이 잘 구현되었습니다. 이는 사용자에게 명확한 상태 정보를 제공합니다.
…Courses component and update SectionList to pass these props
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
src/main/front/src/admin-club/pages/AdminCourseDetailPage/SectionList.tsx(1 hunks)src/main/front/src/admin-club/pages/AdminCourseDetailPage/components/SectionCourses.tsx(4 hunks)src/main/front/src/admin-club/pages/AdminCourseNodeGroup/AdminCourseDetailNodeGroupPage.tsx(1 hunks)src/main/front/src/admin-club/pages/AdminCoursePage.tsx(3 hunks)src/main/front/src/components/course/CourseList.tsx(2 hunks)src/main/front/src/pages/CoursePage.tsx(6 hunks)src/main/front/src/pages/NodeGroupPage.tsx(3 hunks)
✅ Files skipped from review due to trivial changes (1)
- src/main/front/src/admin-club/pages/AdminCourseDetailPage/SectionList.tsx
🚧 Files skipped from review as they are similar to previous changes (4)
- src/main/front/src/admin-club/pages/AdminCourseNodeGroup/AdminCourseDetailNodeGroupPage.tsx
- src/main/front/src/components/course/CourseList.tsx
- src/main/front/src/pages/CoursePage.tsx
- src/main/front/src/pages/NodeGroupPage.tsx
🔇 Additional comments (6)
src/main/front/src/admin-club/pages/AdminCoursePage.tsx (3)
58-58: 반응형 레이아웃 개선이 잘 적용되었습니다.maxWidth 제약을 제거하여 컨테이너가 사용 가능한 화면 공간을 더 효과적으로 활용할 수 있게 되었습니다. 다른 컴포넌트의 레이아웃 개선과 일관성 있는 변경사항입니다.
84-84: Grid 컨테이너의 명시적 너비 설정이 적절합니다.
sx={{ width: "100%" }}를 통해 Grid가 전체 너비를 차지하도록 명시적으로 설정한 것은 레이아웃의 예측 가능성을 높이는 좋은 방법입니다.
93-187: 다이얼로그 컴포넌트 구조 개선이 훌륭합니다.Dialog 컴포넌트를 Paper 컴포넌트 외부로 이동시킨 것은 다음과 같은 장점을 제공합니다:
- Material-UI 모범 사례를 따름
- z-index 및 overflow 관련 잠재적 문제 방지
- 컴포넌트 트리의 적절한 레벨에서 렌더링
- 접근성 및 포털 렌더링 개선
다이얼로그의 모든 기능과 콘텐츠가 그대로 유지되면서 구조적으로만 개선된 점이 매우 좋습니다.
src/main/front/src/admin-club/pages/AdminCourseDetailPage/components/SectionCourses.tsx (3)
24-26: 인터페이스 확장이 적절합니다.네비게이션 기능을 위한 새로운 프로퍼티들이 올바르게 정의되었습니다. 선택적 프로퍼티와 필수 프로퍼티의 구분이 적절합니다.
61-63: 프로퍼티 구조분해가 올바르게 구현되었습니다.선택적 프로퍼티에 대한 기본값 설정이 적절하며, URL 생성 시 undefined 값 사용을 방지합니다.
127-127: 툴팁 텍스트 수정이 적절합니다."노드 그룹 수정"으로 변경된 것이 버튼의 실제 기능을 더 정확하게 반영합니다.
src/main/front/src/admin-club/pages/AdminCourseDetailPage/components/SectionCourses.tsx
Show resolved
Hide resolved
1 participant
✅ PR 체크리스트
📌 관련 이슈
✨ 작업 내용
🔎 세부 설명
🧪 테스트
➕ 기타
Summary by CodeRabbit