feat: shorts 데이터를 받아온 후 데이터를 추출할 때 임시 구현

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 (
+    <Button variant='default' type='button' onClick={handleInit}>
+      다시 추출하기
+    </Button>
+  );
+};
+
+export default InitBtn;

src/pages/auto/components/button/index.tsx

@@ -0,0 +1 @@
+export { default as InitBtn } from './InitBtn';

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<number, string> = {
+  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<fetchSelectHighlightResponseProps | null>(null);
+  const [selectedIndex, setSelectedIndex] = useState<number | null>(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 (
     <ShortContainer>
-      <LazyLoadImg image={{ src: conver_img, alt: '' }} />
-
+      <IFrameCardWrapper>
+        {urls.length > 0 ? (
+          urls.map(([index, url]) => (
+            <ShortsVideo
+              key={index}
+              url={url}
+              isSelected={selectedIndex === index}
+              onClick={() =>
+                handleVideoClick(index, url, title ?? '', categoryId ?? -1)
+              }
+            />
+          ))
+        ) : (
+          <SubText>No videos found</SubText>
+        )}
+      </IFrameCardWrapper>
       <TextContainer gap='80px'>
         <TextContainer gap='16px'>
           <MainTitle>{response?.dto?.title}</MainTitle>
-          <SubText>5JoSama</SubText>
-          <CategoryBox>Fashion</CategoryBox>
-        </TextContainer>
-        <TextContainer gap='8px'>
-          <MainTitle>Keywords</MainTitle>
-          <TextContainer>
-            <SubText>쇼핑</SubText>
-            <SubText>패션</SubText>
-            <SubText>쇼핑몰</SubText>
-            <SubText>옷</SubText>
-          </TextContainer>
+          <CategoryBox>{categoryName}</CategoryBox>
         </TextContainer>
       </TextContainer>
     </ShortContainer>
@@ -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 }>`

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<number | null>(null);
+  const [selectedUrl, setSelectedUrl] = useState<string | null>(null);
+  const [categoryId, setCategoryId] = useState<number | null>(null);
+  const [titles, setTitle] = useState<string | null>(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 (
     <ViewContainer>
-      <ConvertShorts />
+      <ConvertShorts onSelectVideo={handleSelectVideo} />
       <ButtonWrapper>
-        <Button variant='default' type='button'>
-          변환하기
-        </Button>
-        <Button variant='default' type='button' onClick={handleInit}>
-          다시 추출하기
+        <Button variant='default' type='button' onClick={handleUpload}>
+          추출하기 및 업로드
         </Button>
+        <InitBtn />
       </ButtonWrapper>
     </ViewContainer>
   );

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 {

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';