diff --git a/src/pages/auto/components/button/InitBtn.tsx b/src/pages/auto/components/button/InitBtn.tsx new file mode 100644 index 0000000..b4f8714 --- /dev/null +++ b/src/pages/auto/components/button/InitBtn.tsx @@ -0,0 +1,25 @@ +import { Button } from '@/components'; + +import { useProcessContext } from '@/pages/auto/provider'; + +const InitBtn = () => { + const { setProcessState } = useProcessContext(); + + const handleInit = () => { + const userConfirmed = window.confirm( + '초기화하면 모든 데이터가 삭제됩니다. 계속하시겠습니까?' + ); + + if (userConfirmed) { + setProcessState('initial'); + } + }; + + return ( + + ); +}; + +export default InitBtn; diff --git a/src/pages/auto/components/button/index.tsx b/src/pages/auto/components/button/index.tsx new file mode 100644 index 0000000..d25ab48 --- /dev/null +++ b/src/pages/auto/components/button/index.tsx @@ -0,0 +1 @@ +export { default as InitBtn } from './InitBtn'; diff --git a/src/pages/auto/components/final/ConvertShorts.tsx b/src/pages/auto/components/final/ConvertShorts.tsx index bb8c3f2..a77dcd9 100644 --- a/src/pages/auto/components/final/ConvertShorts.tsx +++ b/src/pages/auto/components/final/ConvertShorts.tsx @@ -2,16 +2,31 @@ import { useEffect, useState } from 'react'; import styled from 'styled-components'; -import { LazyLoadImg } from '@/components'; - import { fetchSelectHighlight } from '@/pages/auto/apis'; import type { fetchSelectHighlightResponseProps } from '@/pages/auto/apis'; +import { ShortsVideo } from '@/pages/auto/components'; + +const categoryMap: Record = { + 0: '음악', + 1: '여행', + 2: '게임', + 3: '스포츠', + 4: '음식', +}; -import conver_img from '@/assets/convert_img.png'; +type ConvertShortsProps = { + onSelectVideo: ( + index: number, + url: string, + title: string, + category_id: number + ) => void; +}; -const ConvertShorts = () => { +const ConvertShorts = ({ onSelectVideo }: ConvertShortsProps) => { const [response, setResponse] = useState(null); + const [selectedIndex, setSelectedIndex] = useState(null); const taskId = sessionStorage.getItem('task_id'); // taskId가 있을 때만 API 요청 @@ -31,24 +46,44 @@ const ConvertShorts = () => { fetchData(); }, [taskId]); + const categoryId = response?.dto?.categoryId; + const categoryName = categoryMap[categoryId ?? -1] || 'Unknown'; + const title = response?.dto?.title; + + const urls = response?.urls ?? []; + + const handleVideoClick = ( + index: number, + url: string, + title: string, + categoryId: number + ) => { + setSelectedIndex(index); + onSelectVideo(index, url, title, categoryId); + }; + return ( - - + + {urls.length > 0 ? ( + urls.map(([index, url]) => ( + + handleVideoClick(index, url, title ?? '', categoryId ?? -1) + } + /> + )) + ) : ( + No videos found + )} + {response?.dto?.title} - 5JoSama - Fashion - - - Keywords - - 쇼핑 - 패션 - 쇼핑몰 - 옷 - + {categoryName} @@ -57,11 +92,19 @@ const ConvertShorts = () => { export default ConvertShorts; +const IFrameCardWrapper = styled.div` + display: flex; + gap: 10px; + width: 100%; + height: auto; + overflow: auto; + margin-bottom: 20px; +`; + const ShortContainer = styled.div` display: flex; - justify-content: left; + flex-direction: column; width: 100%; - gap: 63px; `; const TextContainer = styled.div<{ gap?: string }>` diff --git a/src/pages/auto/components/final/FinalView.tsx b/src/pages/auto/components/final/FinalView.tsx index 515e57d..f94b8e0 100644 --- a/src/pages/auto/components/final/FinalView.tsx +++ b/src/pages/auto/components/final/FinalView.tsx @@ -1,34 +1,87 @@ +import { useState } from 'react'; + import styled from 'styled-components'; import { Button } from '@/components'; -import { useProcessContext } from '@/pages/auto/provider'; +import { fetchVideoExtract, postHighlightSelection } from '@/pages/auto/apis'; +import { InitBtn } from '@/pages/auto/components'; import ConvertShorts from './ConvertShorts'; const FinalView = () => { - const { setProcessState } = useProcessContext(); + const [selectedIndex, setSelectedIndex] = useState(null); + const [selectedUrl, setSelectedUrl] = useState(null); + const [categoryId, setCategoryId] = useState(null); + const [titles, setTitle] = useState(null); - const handleInit = () => { - const userConfirmed = window.confirm( - '초기화하면 모든 데이터가 삭제됩니다. 계속하시겠습니까?' - ); + const handleSelectVideo = ( + index: number, + url: string, + title: string, + category_id: number + ) => { + setSelectedIndex(index); + setSelectedUrl(url); + setCategoryId(category_id); + setTitle(title); + }; - if (userConfirmed) { - setProcessState('initial'); + const handleUpload = async () => { + if (selectedIndex === null || !selectedUrl) { + alert('비디오를 선택해주세요.'); + return; + } + + const memberId = parseInt(sessionStorage.getItem('member_id') ?? '0', 10); + const title = titles ?? ''; + + // const pythonDto = { + // url: sessionStorage.getItem('initialUrl') ?? '', + // email, + // title, + // memberId, + // categoryId: categoryId ?? 0, + // }; + + try { + // console.log({ index: selectedIndex, s3Url: selectedUrl, pythonDto }); + const response = await postHighlightSelection({ + index: selectedIndex, + s3Url: selectedUrl, + title, + memberId, + categoryId: categoryId ?? 0, + }); + + const videoId = response.videoId; + console.log('Video ID:', videoId); + + // videoId로 다운로드 URL 받기 + const extractResponse = await fetchVideoExtract(videoId); // videoId를 string으로 변환하여 전달 + + // URL을 통해 비디오 다운로드 (예시) + const link = document.createElement('a'); + link.href = extractResponse; + link.download = 'video.mp4'; + link.click(); + + alert('비디오 업로드 성공'); + console.log('Response:', response); + } catch (error) { + console.error('Error uploading video:', error); + alert('업로드 중 오류가 발생했습니다.'); } }; return ( - + - - + ); diff --git a/src/pages/auto/components/form/ConvertForm.tsx b/src/pages/auto/components/form/ConvertForm.tsx index f348536..c5df5a4 100644 --- a/src/pages/auto/components/form/ConvertForm.tsx +++ b/src/pages/auto/components/form/ConvertForm.tsx @@ -43,7 +43,7 @@ const ConvertForm = ({ url: values.url ?? '', }; // console.log('Form submitted with payload:', payload); - + sessionStorage.setItem('initialUrl', values.url ?? ''); setIsLoading(true); try { diff --git a/src/pages/auto/components/index.ts b/src/pages/auto/components/index.ts index ac48d4a..5fb363f 100644 --- a/src/pages/auto/components/index.ts +++ b/src/pages/auto/components/index.ts @@ -4,3 +4,5 @@ export * from './process'; export * from './field'; export * from './loading'; export * from './final'; +export * from './video'; +export * from './button';