Skip to content

Commit 04a4be1

Browse files
authored
Merge pull request #144 from geulDa/refactor/#135/web-app-accessibility
♻️Refactor & Update: CloudFront–S3 기반 영상 CDN 적용 및 접근 정책 개선
2 parents 457bece + ddd4044 commit 04a4be1

File tree

3 files changed

+29
-15
lines changed

3 files changed

+29
-15
lines changed

src/pages/main/videoPlay/index.tsx

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,19 @@ export default function VideoPlayPage() {
4848
>
4949
영상 시청 이후 자동으로 넘어갑니다.
5050
</p>
51+
52+
<button
53+
onClick={handleVideoEnd}
54+
className="
55+
mt-[0.4rem]
56+
text-mint-700
57+
text-body-lg
58+
underline
59+
"
60+
aria-label="영상 스킵하고 다음으로 이동"
61+
>
62+
Skip
63+
</button>
5164
</div>
5265
);
5366
}

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

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,12 @@ export default function VideoPlayer({ src, label, onEnd }: VideoPlayerProps) {
1515
{src ? (
1616
<video
1717
key={src}
18-
src={src}
19-
autoPlay
20-
muted
21-
playsInline
22-
controls
18+
src={src.trim()}
19+
preload="auto" // 초기 버퍼링 줄임
20+
autoPlay // 페이지 진입 즉시 재생
21+
muted // iOS 자동재생 조건
22+
playsInline // 모바일 강제 전체화면 방지
23+
controls={false}
2324
onEnded={onEnd}
2425
className="w-full h-full rounded-[2rem] object-cover"
2526
aria-label={`${label} 영상`}

src/shared/constants/main/videoLocations.ts

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,52 +3,52 @@ import { VideoLocation } from "@/shared/types/main/videoLocation";
33
export const VIDEO_LOCATIONS: VideoLocation[] = [
44
{
55
label: "부천아트벙커",
6-
videoSrc: "https://geulda-ai-video-bucket.s3.ap-southeast-2.amazonaws.com/upload/video/artBunker.mp4",
6+
videoSrc: "https://cdn.geulda.kr/upload/video/artBunker.mp4",
77
description: "옛 방공호를 개조한 독특한 문화예술 공간입니다.",
88
},
99
{
1010
label: "다솔관",
11-
videoSrc: "https://geulda-ai-video-bucket.s3.ap-southeast-2.amazonaws.com/upload/video/dasol.mp4",
11+
videoSrc: "https://cdn.geulda.kr/upload/video/dasol.mp4",
1212
description: "학생들의 창의적인 활동과 휴식을 위한 복합 문화 공간입니다.",
1313
},
1414
{
1515
label: "부천 자유시장",
16-
videoSrc: "https://geulda-ai-video-bucket.s3.ap-southeast-2.amazonaws.com/upload/video/jayuMarket.mp4",
16+
videoSrc: "https://cdn.geulda.kr/upload/video/jayuMarket.mp4",
1717
description: "부천의 전통과 활기가 살아있는 재래시장입니다.",
1818
},
1919
{
2020
label: "한국 만화 박물관",
21-
videoSrc: "https://geulda-ai-video-bucket.s3.ap-southeast-2.amazonaws.com/upload/video/manhwaMuseum.mp4",
21+
videoSrc: "https://cdn.geulda.kr/upload/video/manhwaMuseum.mp4",
2222
description: "한국 만화의 역사와 문화를 한눈에 볼 수 있는 특별한 공간입니다.",
2323
},
2424
{
2525
label: "부천역 마루광장",
26-
videoSrc: "https://geulda-ai-video-bucket.s3.ap-southeast-2.amazonaws.com/upload/video/maruSquare.mp4",
26+
videoSrc: "https://cdn.geulda.kr/upload/video/maruSquare.mp4",
2727
description: "부천의 중심에서 만나는 열린 광장, 문화와 사람이 모이는 곳입니다.",
2828
},
2929
{
3030
label: "상동호수공원",
31-
videoSrc: "https://geulda-ai-video-bucket.s3.ap-southeast-2.amazonaws.com/upload/video/sangdong.mp4",
31+
videoSrc: "https://cdn.geulda.kr/upload/video/sangdong.mp4",
3232
description: "도심 속 자연을 즐길 수 있는 평화로운 호수 공원입니다.",
3333
},
3434
{
3535
label: "부천호수식물원 수피아",
36-
videoSrc: "https://geulda-ai-video-bucket.s3.ap-southeast-2.amazonaws.com/upload/video/supia.mp4",
36+
videoSrc: "https://cdn.geulda.kr/upload/video/supia.mp4",
3737
description: "다양한 식물과 함께하는 힐링 공간, 자연의 아름다움을 느껴보세요.",
3838
},
3939
{
4040
label: "원미산 진달래 동산",
41-
videoSrc: "https://geulda-ai-video-bucket.s3.ap-southeast-2.amazonaws.com/upload/video/wonmisan.mp4",
41+
videoSrc: "https://cdn.geulda.kr/upload/video/wonmisan.mp4",
4242
description: "봄이면 진달래가 만발하는 아름다운 산책로입니다.",
4343
},
4444
{
4545
label: "중앙도서관",
46-
videoSrc: "https://geulda-ai-video-bucket.s3.ap-southeast-2.amazonaws.com/upload/video/centralLibrary.mp4",
46+
videoSrc: "https://cdn.geulda.kr/upload/video/centralLibrary.mp4",
4747
description: "가톨릭대학교의 중앙도서관으로, 지식의 보물창고입니다.",
4848
},
4949
{
5050
label: "김수환관",
51-
videoSrc: "https://geulda-ai-video-bucket.s3.ap-southeast-2.amazonaws.com/upload/video/soohwanKim.mp4",
51+
videoSrc: "https://cdn.geulda.kr/upload/video/soohwanKim.mp4",
5252
description: "가톨릭대학교 부천캠퍼스의 상징적인 건물로, 학생들의 학습과 교류 공간입니다.",
5353
},
5454
];

0 commit comments

Comments
 (0)