feat: PresentationVideo WIP

#48
Project-Boated · Oct 10, 2022 · 52a03a4 · 52a03a4
1 parent 0c12d67
commit 52a03a4
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 17 deletions.
diff --git a/components/project/PresentationVideo/index.tsx b/components/project/PresentationVideo/index.tsx
@@ -1,10 +1,15 @@
 import React, { useEffect, useState } from 'react';
 import { useQuery } from 'react-query';
 import { useRouter } from 'next/router';
+import { AxiosError } from 'axios';
 
-import { getProjectsKanban, getProjectsVideo } from '@/lib/api/projects';
+import { deleteProjectsVideo, getProjectsVideo } from '@/lib/api/projects';
 import * as queryKeys from '@/lib/constants/queryKeys';
 
+import Icon from '@/components/atoms/Icon';
+import Text from '@/components/atoms/Text';
+import Button from '@/components/atoms/Button';
+
 import VideoDescription from '@/components/project/PresentationVideo/VideoDescription';
 import FileDragDropInput from '@/components/project/PresentationVideo/FileDragDropInput';
 
@@ -14,30 +19,49 @@ const PresentationVideo = () => {
   const router = useRouter();
   const projectId = parseInt(router.query.id as string, 10);
 
-  const [videoFile, setVideoFile] = useState<File>();
-
-  const { data } = useQuery(`${queryKeys.PROJECTS_VIDEO}/${projectId}`, () => getProjectsVideo(projectId));
-
-  useEffect(() => {
-    console.log(data);
-    // const reader = new FileReader();
-
-    // if (data) {
-    //   const blob = new Blob([new ArrayBuffer(data)], { type: 'video/mp4' });
-    //   console.log(blob);
+  const { data, isLoading, remove, refetch, isError, isFetched, isFetching } = useQuery(
+    `${queryKeys.PROJECTS_VIDEO}/${projectId}`,
+    () => getProjectsVideo(projectId),
+    {
+      refetchOnWindowFocus: false,
+      retry: 1,
+    },
+  );
 
-    // reader.readAsDataURL(data);
-    // }
-  }, [data]);
+  const handleVideoDeleteButton = async () => {
+    try {
+      await deleteProjectsVideo(projectId);
+      remove();
+      refetch();
+    } catch (e: unknown) {
+      const error = e as AxiosError;
+      alert(JSON.stringify(error.response?.data.message));
+    }
+  };
 
   return (
     <Styled.Container>
       <Styled.H1>발표 영상</Styled.H1>
       <Styled.PresentationContainer>
-        <FileDragDropInput videoFile={videoFile} setVideoFile={setVideoFile} projectId={projectId} />
-        {/* <video src={data} /> */}
+        {isLoading && <Styled.LoadingWrapper>Loading...</Styled.LoadingWrapper>}
+        {!data && !isLoading && <FileDragDropInput />}
+        {data && <Styled.PresentationVideo src="/api/projects/5/video" controls autoPlay={false} />}
+        {/* {data ? (
+          <Styled.PresentationVideo src="/api/projects/5/video" controls autoPlay={false} />
+        ) : (
+          <FileDragDropInput />
+        )} */}
         <VideoDescription />
       </Styled.PresentationContainer>
+      {data && (
+        <Styled.VideoInfoContainer>
+          <Icon width={20} height={20} icon="BoatedSymbol" />
+          <Text>파일 용량 : {Math.ceil(Number(data?.headers['content-length']) / 1000000)}MB</Text>
+          <Button width={86} height={32} borderRadius={26} onClick={handleVideoDeleteButton}>
+            삭제하기
+          </Button>
+        </Styled.VideoInfoContainer>
+      )}
     </Styled.Container>
   );
 };

diff --git a/components/project/PresentationVideo/style.ts b/components/project/PresentationVideo/style.ts
@@ -27,3 +27,37 @@ export const H1 = styled.h1`
   font-size: 20px;
   line-height: 28px;
 `;
+
+export const PresentationVideo = styled.video`
+  width: 999px;
+  height: 488px;
+`;
+
+export const VideoInfoContainer = styled.div`
+  width: 278px;
+  height: 53px;
+
+  padding: 0 12px;
+
+  display: flex;
+  align-items: center;
+
+  ${boxDesign()};
+
+  & > span {
+    margin-left: 8px;
+  }
+
+  & > button {
+    margin-left: 20px;
+  }
+`;
+
+export const LoadingWrapper = styled.div`
+  width: 999px;
+  height: 488px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;