feat: PresentationVideoDeleteModal 사용

- #48
Project-Boated · Oct 10, 2022 · 8383be0 · 8383be0
1 parent abcc12b
commit 8383be0
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 10 deletions.
diff --git a/components/project/PresentationVideo/index.tsx b/components/project/PresentationVideo/index.tsx
@@ -1,24 +1,30 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { useQuery } from 'react-query';
 import { useRouter } from 'next/router';
 import { AxiosError } from 'axios';
 
 import { deleteProjectsVideo, getProjectsVideo } from '@/lib/api/projects';
 import * as queryKeys from '@/lib/constants/queryKeys';
 
+import useModal from '@/hooks/useModal';
+
 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';
 
+import PresentationVideoDeleteModal from '@/components/Modal/PresentationVideoDeleteModal';
+
 import * as Styled from './style';
 
 const PresentationVideo = () => {
   const router = useRouter();
   const projectId = parseInt(router.query.id as string, 10);
 
+  const { isShowModal, closeModal, openModal } = useModal();
+
   const { data, isLoading, remove, refetch } = useQuery(
     `${queryKeys.PROJECTS_VIDEO}/${projectId}`,
     () => getProjectsVideo(projectId),
@@ -33,6 +39,7 @@ const PresentationVideo = () => {
       await deleteProjectsVideo(projectId);
       remove();
       refetch();
+      closeModal();
     } catch (e: unknown) {
       const error = e as AxiosError;
       alert(JSON.stringify(error.response?.data.message));
@@ -41,22 +48,30 @@ const PresentationVideo = () => {
 
   return (
     <Styled.Container>
+      {isShowModal && (
+        <PresentationVideoDeleteModal closeModal={closeModal} handleVideoDeleteButton={handleVideoDeleteButton} />
+      )}
       <Styled.H1>발표 영상</Styled.H1>
       <Styled.PresentationContainer>
         {isLoading && <Styled.LoadingWrapper>Loading...</Styled.LoadingWrapper>}
         {!data && !isLoading && <FileDragDropInput />}
         {data && <Styled.PresentationVideo src={`/api/projects/${projectId}/video`} controls autoPlay={false} />}
         <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.ButtonContainer>
+        {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={openModal}>
+              삭제하기
+            </Button>
+          </Styled.VideoInfoContainer>
+        )}
+        <Button width={200} height={53} borderRadius={6}>
+          저장하기
+        </Button>
+      </Styled.ButtonContainer>
     </Styled.Container>
   );
 };

diff --git a/components/project/PresentationVideo/style.ts b/components/project/PresentationVideo/style.ts
@@ -3,6 +3,8 @@ import styled from 'styled-components';
 import { boxDesign } from '@/styles/common';
 
 export const Container = styled.div`
+  position: relative;
+
   display: flex;
   flex-direction: column;
 
@@ -61,3 +63,21 @@ export const LoadingWrapper = styled.div`
   justify-content: center;
   align-items: center;
 `;
+
+export const ButtonContainer = styled.div`
+  position: relative;
+
+  & > button {
+    position: absolute;
+
+    top: 0;
+    right: 0;
+  }
+`;
+
+export const SaveWrapper = styled.div`
+  position: absolute;
+
+  right: 0;
+  bottom: 0;
+`;