Merge pull request #144 from geulDa/refactor/#135/web-app-accessibility

♻️Refactor & Update: CloudFront–S3 기반 영상 CDN 적용 및 접근 정책 개선

Author: skyblue1232

src/pages/main/videoPlay/index.tsx

@@ -48,6 +48,19 @@ export default function VideoPlayPage() {
       >
         영상 시청 이후 자동으로 넘어갑니다.
       </p>
+
+      <button
+        onClick={handleVideoEnd}
+        className="
+          mt-[0.4rem]
+          text-mint-700
+          text-body-lg
+          underline
+        "
+        aria-label="영상 스킵하고 다음으로 이동"
+      >
+        Skip
+      </button>
     </div>
   );
 }

src/shared/components/main/components/video/VideoPlayer.tsx

@@ -15,11 +15,12 @@ export default function VideoPlayer({ src, label, onEnd }: VideoPlayerProps) {
       {src ? (
         <video
           key={src}
-          src={src}
-          autoPlay
-          muted
-          playsInline
-          controls
+          src={src.trim()}
+          preload="auto"         // 초기 버퍼링 줄임
+          autoPlay               // 페이지 진입 즉시 재생
+          muted                  // iOS 자동재생 조건
+          playsInline            // 모바일 강제 전체화면 방지
+          controls={false}  
           onEnded={onEnd}
           className="w-full h-full rounded-[2rem] object-cover"
           aria-label={`${label} 영상`}

src/shared/constants/main/videoLocations.ts

@@ -3,52 +3,52 @@ import { VideoLocation } from "@/shared/types/main/videoLocation";
 export const VIDEO_LOCATIONS: VideoLocation[] = [
   {
     label: "부천아트벙커",
-    videoSrc: "https://geulda-ai-video-bucket.s3.ap-southeast-2.amazonaws.com/upload/video/artBunker.mp4",
+    videoSrc: "https://cdn.geulda.kr/upload/video/artBunker.mp4",
     description: "옛 방공호를 개조한 독특한 문화예술 공간입니다.",
   },
   {
     label: "다솔관",
-    videoSrc: "https://geulda-ai-video-bucket.s3.ap-southeast-2.amazonaws.com/upload/video/dasol.mp4",
+    videoSrc: "https://cdn.geulda.kr/upload/video/dasol.mp4",
     description: "학생들의 창의적인 활동과 휴식을 위한 복합 문화 공간입니다.",
   },
   {
     label: "부천 자유시장",
-    videoSrc: "https://geulda-ai-video-bucket.s3.ap-southeast-2.amazonaws.com/upload/video/jayuMarket.mp4",
+    videoSrc: "https://cdn.geulda.kr/upload/video/jayuMarket.mp4",
     description: "부천의 전통과 활기가 살아있는 재래시장입니다.",
   },
   {
     label: "한국 만화 박물관",
-    videoSrc: "https://geulda-ai-video-bucket.s3.ap-southeast-2.amazonaws.com/upload/video/manhwaMuseum.mp4",
+    videoSrc: "https://cdn.geulda.kr/upload/video/manhwaMuseum.mp4",
     description: "한국 만화의 역사와 문화를 한눈에 볼 수 있는 특별한 공간입니다.",
   },
   {
     label: "부천역 마루광장",
-    videoSrc: "https://geulda-ai-video-bucket.s3.ap-southeast-2.amazonaws.com/upload/video/maruSquare.mp4",
+    videoSrc: "https://cdn.geulda.kr/upload/video/maruSquare.mp4",
     description: "부천의 중심에서 만나는 열린 광장, 문화와 사람이 모이는 곳입니다.",
   },
   {
     label: "상동호수공원",
-    videoSrc: "https://geulda-ai-video-bucket.s3.ap-southeast-2.amazonaws.com/upload/video/sangdong.mp4",
+    videoSrc: "https://cdn.geulda.kr/upload/video/sangdong.mp4",
     description: "도심 속 자연을 즐길 수 있는 평화로운 호수 공원입니다.",
   },
   {
     label: "부천호수식물원 수피아",
-    videoSrc: "https://geulda-ai-video-bucket.s3.ap-southeast-2.amazonaws.com/upload/video/supia.mp4",
+    videoSrc: "https://cdn.geulda.kr/upload/video/supia.mp4",
     description: "다양한 식물과 함께하는 힐링 공간, 자연의 아름다움을 느껴보세요.",
   },
   {
     label: "원미산 진달래 동산",
-    videoSrc: "https://geulda-ai-video-bucket.s3.ap-southeast-2.amazonaws.com/upload/video/wonmisan.mp4",
+    videoSrc: "https://cdn.geulda.kr/upload/video/wonmisan.mp4",
     description: "봄이면 진달래가 만발하는 아름다운 산책로입니다.",
   },
   {
     label: "중앙도서관",
-    videoSrc: "https://geulda-ai-video-bucket.s3.ap-southeast-2.amazonaws.com/upload/video/centralLibrary.mp4",
+    videoSrc: "https://cdn.geulda.kr/upload/video/centralLibrary.mp4",
     description: "가톨릭대학교의 중앙도서관으로, 지식의 보물창고입니다.",
   },
   {
     label: "김수환관",
-    videoSrc: "https://geulda-ai-video-bucket.s3.ap-southeast-2.amazonaws.com/upload/video/soohwanKim.mp4",
+    videoSrc: "https://cdn.geulda.kr/upload/video/soohwanKim.mp4",
     description: "가톨릭대학교 부천캠퍼스의 상징적인 건물로, 학생들의 학습과 교류 공간입니다.",
   },
 ];