♻️Refactor & Update: CloudFront–S3 기반 영상 CDN 적용 및 접근 정책 개선#144
♻️Refactor & Update: CloudFront–S3 기반 영상 CDN 적용 및 접근 정책 개선#144skyblue1232 merged 3 commits intodevelopfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Walkthrough
Changes
Sequence Diagram(s)sequenceDiagram
participant User as 사용자
participant Page as VideoPlay 페이지
participant Player as VideoPlayer
participant Router as 라우터
User->>Page: 페이지 진입
Page->>Player: videoSrc 전달
Player->>Player: src.trim(), preload/autoPlay 설정
Player-->>User: 비디오 재생 시작 (자동)
alt 유저가 끝까지 재생
Player->>Page: onEnd 이벤트
Page->>Router: handleVideoEnd() 호출 -> HiddenReward / PostCard 라우팅
else 유저가 Skip 버튼 클릭
User->>Page: Skip 클릭
Page->>Page: handleVideoEnd() 호출
Page->>Router: HiddenReward / PostCard 라우팅
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 분
Possibly related issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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. Comment |
|
🏷️ Labeler has automatically applied labels based on your PR title, branch name, or commit message. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/shared/constants/main/videoLocations.ts (1)
3-54: CDN 베이스 URL을 상수로 추출하는 것을 권장합니다.현재 CDN 베이스 URL(
https://cdn.geulda.kr/upload/video/)이 10개의 항목에 반복되고 있습니다. 이를 별도 상수로 추출하면 다음과 같은 이점이 있습니다:
- 향후 CDN 도메인 변경 시 한 곳만 수정
- 환경별(dev/staging/prod) 설정 관리 용이
- 유지보수성 향상
다음과 같이 리팩토링을 적용하세요:
import { VideoLocation } from "@/shared/types/main/videoLocation"; +const CDN_VIDEO_BASE_URL = "https://cdn.geulda.kr/upload/video/"; + export const VIDEO_LOCATIONS: VideoLocation[] = [ { label: "부천아트벙커", - videoSrc: "https://cdn.geulda.kr/upload/video/artBunker.mp4", + videoSrc: `${CDN_VIDEO_BASE_URL}artBunker.mp4`, description: "옛 방공호를 개조한 독특한 문화예술 공간입니다.", }, { label: "다솔관", - videoSrc: "https://cdn.geulda.kr/upload/video/dasol.mp4", + videoSrc: `${CDN_VIDEO_BASE_URL}dasol.mp4`, description: "학생들의 창의적인 활동과 휴식을 위한 복합 문화 공간입니다.", }, // ... 나머지 항목도 동일하게 적용 ];더 나아가 환경 변수를 활용한 구성도 고려해볼 수 있습니다:
const CDN_VIDEO_BASE_URL = process.env.NEXT_PUBLIC_CDN_VIDEO_URL || "https://cdn.geulda.kr/upload/video/";
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/shared/constants/main/videoLocations.ts(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build-and-deploy
🔇 Additional comments (2)
src/shared/constants/main/videoLocations.ts (2)
6-51: 일관된 CDN URL 마이그레이션 적용을 확인했습니다.모든 동영상 소스가 일관된 형식으로 CloudFront CDN URL로 변경되었습니다:
- HTTPS 프로토콜 사용 ✓
- 통일된 경로 구조 (
/upload/video/) ✓- 설명적인 파일명 사용 ✓
이 변경으로 동영상 로딩 성능과 캐싱 효율이 개선될 것으로 기대됩니다.
6-51: CDN URL 검증 완료 - 모든 URL 정상 작동 확인됨검증 결과 모든 10개 동영상 파일이 새로운 CDN에서 정상적으로 접근 가능합니다:
- ✓ 모든 URL HTTP 200 상태 반환
- ✓ Content-Type 헤더 정상 설정 (video/mp4)
단, Cache-Control 헤더가 비어있는 상태로, 이는 CDN 측 캐싱 최적화 설정 문제입니다. 이는 videoLocations.ts 파일의 코드 이슈가 아니며, CloudFront/CDN 구성 단계에서 별도로 검토가 필요합니다.
skyblue1232
changed the title
skyblue1232
changed the title
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/pages/main/videoPlay/index.tsx (1)
52-63: Skip 버튼 type 속성 추가를 권장합니다.Skip 버튼이 정상적으로 작동하지만, 명시적으로
type="button"을 추가하여 form 제출 등의 예상치 못한 동작을 방지하는 것이 좋습니다.다음 diff를 적용하세요:
<button + type="button" onClick={handleVideoEnd} className=" mt-[0.4rem] text-mint-700 text-body-lg underline " aria-label="영상 스킵하고 다음으로 이동" > Skip </button>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/pages/main/videoPlay/index.tsx(1 hunks)src/shared/components/main/components/video/VideoPlayer.tsx(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build-and-deploy
🔇 Additional comments (2)
src/shared/components/main/components/video/VideoPlayer.tsx (2)
18-18: src.trim() 호출 시 빈 문자열 처리를 확인하세요.src가 공백만 포함된 문자열인 경우
trim()이 빈 문자열을 반환하여 video 요소가 유효하지 않은 src를 가질 수 있습니다. 현재 15번 라인의 조건문이{src ? ...}로 체크하지만, 공백 문자열은 truthy로 평가됩니다.다음 개선을 고려하세요:
- src={src.trim()} + src={src?.trim() || ''}또는 조건문을 더 엄격하게 수정:
- {src ? ( + {src?.trim() ? (
19-23: 동영상 자동 재생 및 컨트롤 제거에 대한 접근성 고려 사항을 확인하세요.현재 설정(
autoPlay,muted,controls={false})은 기술적으로 올바르지만, 다음 접근성 및 UX 문제를 고려해야 합니다:
- 사용자 제어 부족: 네이티브 컨트롤이 비활성화되어 사용자가 일시정지, 탐색, 볼륨 조절을 할 수 없습니다.
- 자동 재생 정책: WCAG 2.1 가이드라인에서는 자동 재생되는 미디어에 대해 사용자가 일시정지/중지할 수 있는 메커니즘을 권장합니다.
- 음소거 상태: 영구적으로 음소거된 상태로 재생되며 사용자가 오디오를 활성화할 방법이 없습니다.
Skip 버튼이 추가되었지만, 일시정지/재생 기능도 고려해보세요.
접근성 요구사항을 충족하는지 확인하고, 필요시 다음 개선을 검토하세요:
- 커스텀 재생/일시정지 버튼 추가
- 음소거 해제 옵션 제공
- 또는 controls를 true로 설정하고 사용자 제어 허용
skyblue1232
changed the title
skyblue1232
changed the title
1 participant
🔥 작업 내용
cdn.geulda.kr을 CloudFront Distribution과 연결/upload/video/폴더로 mp4 리소스 전용 디렉터리 생성s3:GetObject권한을 CloudFront 및 퍼블릭에 적절히 부여Content-Type: video/mp4메타데이터 적용public, max-age=31536000) 추가https://cdn.geulda.kr/upload/video/...로 전면 변경playsInline) 등 모바일 UX 안정성 확보⚡ 적용 방법 요약
/upload/video폴더에 업로드https://cdn.geulda.kr/upload/video/파일명.mp4
🤔 추후 작업 사항
🔗 이슈
PR Point (To Reviewer)
/upload/video) 설정이 올바른지 확인 부탁드립니다.📸 피그마 스크린샷 or 기능 GIF
(캡처 첨부)
Summary by CodeRabbit
릴리스 노트