Video

LinkMarry · Jan 18, 2025 · 7581ab6 · 7581ab6
1 parent 3f5e037
commit 7581ab6
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 31 deletions.
diff --git a/src/component/VoidInput.ts b/src/component/VoidInput.ts
@@ -0,0 +1,9 @@
+import styled from "styled-components";
+
+const voidInput = styled.input`
+    display: none;
+    width: 0;
+    height: 0;
+`;
+
+export default voidInput;
diff --git a/src/component/template/component/VideoTemplate.tsx b/src/component/template/component/VideoTemplate.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useRef} from 'react';
 import Video from "@remote/value/Video";
 import {Column} from "@designsystem/component/flexLayout";
 import Text from "@designsystem/component/text";
@@ -14,16 +14,21 @@ function VideoTemplate(
         video
     }: VideoTemplateProps
 ) {
+    const isYoutubeUrl = video.videoUrl.startsWith('https://www.youtube.com');
     return (
         <S.container>
             <Column gap={12} $alignItems="center">
                 <Text size={20} weight={300} color={colors.g600}>VIDEO</Text>
                 <Text size={16} weight={300} color={colors.g600}>{video.videoTitle}</Text>
             </Column>
-            <S.iframe
-                height={250} title={video.videoTitle}
-                // src={'https://www.youtube.com/embed/le4s2kMQWP4'}
-            ></S.iframe>
+            {isYoutubeUrl ? (
+                <S.iframe
+                    height={250} title={video.videoTitle}
+                    src={video.videoUrl}
+                ></S.iframe>
+            ) : (
+                <video src={video.videoUrl} controls={true}></video>
+            )}
         </S.container>
     );
 }

diff --git a/src/page/invitation/design/option/BaseMusicOption.tsx b/src/page/invitation/design/option/BaseMusicOption.tsx
@@ -12,6 +12,7 @@ import BaseMusic from "@remote/value/BaseMusic";
 import fileApi from "@remote/api/FileApi";
 import Music, {getMusicName} from "@remote/value/Music";
 import LoadingOverlay from "@src/component/LoadingOverlay";
+import VoidInput from "@src/component/VoidInput";
 
 type SelectMode = 'select' | 'direct';
 const selectModeRecord: Record<SelectMode, string> = {
@@ -82,7 +83,7 @@ function BaseMusicOption(
             await audio.play();
         }
     }
-    
+
     const onClickPlayCustomMusic = async () => {
         const audio = audioRef.current;
         if (!audio) return;
@@ -133,7 +134,7 @@ function BaseMusicOption(
                                     <Text type={'caption1'} color={colors.g400}>음원 파일 추가</Text>
                                     <Text type={'caption1'} color={colors.g400}>최대 20MB MP3 파일만 가능</Text>
                                 </Column>
-                                <S.voidInput
+                                <VoidInput
                                     id={'choose-audio'}
                                     ref={imageFieldRef}
                                     onChange={uploadAudio}
@@ -189,14 +190,11 @@ function BaseMusicOption(
                 <HorizontalDivider/>
                 <Row gap={12} $alignItems={'center'}>
                     <OptionLabel label={'효과'}/>
-                    <Row gap={12} $alignItems={'center'}>
-                        <Checkbox
-                            checked={baseMusic.effect}
-                            onChange={checked => onChange({...baseMusic, effect: checked})}
-                            label={'자동 재생'}
-                        />
-                        <Text type={'caption1'} color={colors.g300}>브라우저</Text> {/* TODO: Fix dummy text */}
-                    </Row>
+                    <Checkbox
+                        checked={baseMusic.effect}
+                        onChange={checked => onChange({...baseMusic, effect: checked})}
+                        label={'자동 재생'}
+                    />
                 </Row>
             </Column>
         </S.container>
@@ -219,12 +217,6 @@ const S = {
         border-radius: 8px;
         padding: 30px 0;
     `,
-    voidInput: styled.input`
-        display: none;
-        width: 0;
-        height: 0;
-    `,
-
 }
 
 export default BaseMusicOption;
diff --git a/src/page/invitation/design/option/GalleryOption.tsx b/src/page/invitation/design/option/GalleryOption.tsx
@@ -10,6 +10,7 @@ import fileApi from "@remote/api/FileApi";
 import Text from "@designsystem/component/text";
 import LoadingOverlay from "@src/component/LoadingOverlay";
 import {DragDropContext, Draggable, Droppable, DropResult} from "react-beautiful-dnd";
+import VoidInput from "@src/component/VoidInput";
 
 interface GalleryOptionProps {
     imgList: string[];
@@ -72,7 +73,7 @@ function GalleryOption(
                                             <S.addImageContainer htmlFor={'choose-image'}>
                                                 <Icon type={IconType.AddLine} tint={colors.g600} size={24}/>
                                             </S.addImageContainer>
-                                            <S.voidInput
+                                            <VoidInput
                                                 id={'choose-image'}
                                                 ref={imageFieldRef}
                                                 onChange={uploadFiles}
@@ -159,11 +160,6 @@ const S = {
         justify-content: center;
         align-items: center;
     `,
-    voidInput: styled.input`
-        display: none;
-        width: 0;
-        height: 0;
-    `,
     image: styled.img`
         display: flex;
         width: 128px;

diff --git a/src/page/invitation/design/option/VideoOption.tsx b/src/page/invitation/design/option/VideoOption.tsx
@@ -1,11 +1,13 @@
-import React from 'react';
+import React, {ChangeEvent, useRef, useState} from 'react';
 import styled from "styled-components";
 import {Column, Row} from "@designsystem/component/flexLayout";
 import OptionLabel from "@page/invitation/design/component/OptionLabel";
 import OptionTextField from "@page/invitation/design/component/OptionTextField";
 import Button from "@designsystem/component/button";
 import {IconType} from "@designsystem/foundation/icon";
 import Video from "@remote/value/Video";
+import VoidInput from "@src/component/VoidInput";
+import fileApi from "@remote/api/FileApi";
 
 interface VideoOptionProps {
     video: Video;
@@ -18,6 +20,39 @@ function VideoOption(
         onChange
     }: VideoOptionProps
 ) {
+    const [isFetching, setIsFetching] = useState(false);
+    const videoFieldRef = useRef<HTMLInputElement>(null);
+
+    const onChangeVideoUrl = (value: string) => {
+        if (value === '') {
+            onChange({...video, videoUrl: value});
+            return;
+        }
+
+        const urlPattern = /(?:https?:\/\/)?(?:www\.|m\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
+        // const urlPattern = /(?:https?:\/\/)?(?:www\.|m\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/)([\\w-]{11})/;
+        const match = value.match(urlPattern);
+
+        if (match && match[1]) {
+            const videoID = match[1];
+            onChange({...video, videoUrl: `https://www.youtube.com/embed/${videoID}`});
+        }
+    };
+
+    const uploadVideo = async (event: ChangeEvent<HTMLInputElement>) => {
+        const files = event.target.files;
+        if (!files) return;
+
+        const file = files[0];
+        if (!file) return;
+
+        setIsFetching(true);
+        const {data} = await fileApi.upload(file);
+
+        onChange({...video, videoUrl: data.url});
+        setIsFetching(false);
+    };
+
     return (
         <S.container>
             <Column gap={16}>
@@ -37,13 +72,27 @@ function VideoOption(
                     <OptionLabel label={'URL'}/>
                     <OptionTextField fieldProps={{
                         value: video.videoUrl,
-                        onChange: event => onChange({...video, videoUrl: event.target.value})
+                        onChange: event => onChangeVideoUrl(event.target.value)
                     }} placeholder={'유튜브 링크'} width={264}/>
                 </Row>
                 <Row gap={12}>
                     <OptionLabel label={'파일'}/>
                     {/* TODO */}
-                    <Button text={'파일 업로드'} leadingIcon={IconType.AddLine} role={'assistive'} style={{width: 264}}/>
+                    <label htmlFor={'choose-video'}>
+                        <Button
+                            text={'파일 업로드'}
+                            leadingIcon={IconType.AddLine}
+                            role={'assistive'}
+                            style={{width: 264, pointerEvents: 'none'}}
+                        />
+                    </label>
+                    <VoidInput
+                        id={'choose-video'}
+                        ref={videoFieldRef}
+                        onChange={uploadVideo}
+                        type={'file'}
+                        accept={'video/*'}
+                    />
                 </Row>
             </Column>
         </S.container>

diff --git a/src/page/mypage/MyPage.tsx b/src/page/mypage/MyPage.tsx
@@ -133,7 +133,7 @@ function MyPage() {
                                     <Text
                                         type={'p5'} color={colors.g500}
                                         style={{width: 122}}
-                                    >member.email</Text>
+                                    >{member.email}</Text>
                                 </Row>
                             </Column>
                         </Column>