feat: presentation 페이지 완성

- #48
Project-Boated · Oct 1, 2022 · e8f6773 · e8f6773
1 parent b658238
commit e8f6773
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 9 deletions.
diff --git a/components/project/PresentationVideo/index.tsx b/components/project/PresentationVideo/index.tsx
@@ -19,7 +19,7 @@ const PresentationVideo = () => {
   const router = useRouter();
   const projectId = parseInt(router.query.id as string, 10);
 
-  const { data, isLoading, remove, refetch, isError, isFetched, isFetching } = useQuery(
+  const { data, isLoading, remove, refetch } = useQuery(
     `${queryKeys.PROJECTS_VIDEO}/${projectId}`,
     () => getProjectsVideo(projectId),
     {
@@ -45,12 +45,7 @@ const PresentationVideo = () => {
       <Styled.PresentationContainer>
         {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 />
-        )} */}
+        {data && <Styled.PresentationVideo src={`/api/projects/${projectId}/video`} controls autoPlay={false} />}
         <VideoDescription />
       </Styled.PresentationContainer>
       {data && (

diff --git a/lib/api/projects.ts b/lib/api/projects.ts
@@ -1,3 +1,4 @@
+import client from '@/lib/api/client';
 import { Blob } from 'buffer';
 import request from './request';
 
@@ -166,5 +167,8 @@ export const deleteProjectsKanbanTaskLike = ({ projectId, taskId }: PostProjects
 export const putProjectsVideo = ({ videoFormData, projectId }: PutProjectsVieoRequestProps) =>
   request('PUT', projectsUrl.projectsVideoUpload(projectId), videoFormData);
 
+// response Header에 접근하기 위해  request 대신 client 사용
 export const getProjectsVideo = (projectId: number) =>
-  request<Blob>('GET', projectsUrl.projectsVideoUpload(projectId)).then((res) => res.data);
+  client.get(projectsUrl.projectsVideoUpload(projectId)).then((res) => res);
+
+export const deleteProjectsVideo = (projectId: number) => request('DELETE', projectsUrl.projectsVideoUpload(projectId));
diff --git a/pages/project/[id]/presentation.tsx b/pages/project/[id]/presentation.tsx
@@ -1,7 +1,21 @@
 import React from 'react';
 
+import AppLayoutMain from '@/components/common/Layout/AppLayoutMain';
+
+import PresentationVideo from '@/components/project/PresentationVideo';
+import Sidebar from '@/components/project/Sidebar';
+
+import * as Styled from '@/styles/pages/Project/presentation';
+
 const PresentationPage = () => {
-  return <div>PresentationPage</div>;
+  return (
+    <AppLayoutMain height="100vh" bottom="-45vh">
+      <Styled.Container>
+        <Sidebar />
+        <PresentationVideo />
+      </Styled.Container>
+    </AppLayoutMain>
+  );
 };
 
 export default PresentationPage;
diff --git a/styles/pages/Project/presentation.ts b/styles/pages/Project/presentation.ts
@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  display: flex;
+
+  width: 1313px;
+
+  margin-top: 350px;
+
+  & > :nth-child(2) {
+    margin: 0 11px 0 15px;
+  }
+`;