feat VideoDesciprtion 기능 완성

- #48
Project-Boated · Oct 13, 2022 · 07b330e · 07b330e
1 parent 1c6d500
commit 07b330e
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 16 deletions.
diff --git a/components/project/PresentationVideo/VideoDescription/index.tsx b/components/project/PresentationVideo/VideoDescription/index.tsx
@@ -1,18 +1,53 @@
-import React from 'react';
+import React, { useCallback, useEffect } from 'react';
+import { useQuery } from 'react-query';
+import { useRouter } from 'next/router';
+
+import { getProjectsVideoDescription } from '@/lib/api/projects';
+import * as queryKeys from '@/lib/constants/queryKeys';
 
 import Icon from '@/components/atoms/Icon';
 import Text from '@/components/atoms/Text';
 
 import * as Styled from './style';
 
-const VideoDescription = () => {
+export interface VideoDescription {
+  description: string;
+  setDescription: React.Dispatch<React.SetStateAction<string>>;
+}
+
+const VideoDescription = ({ description, setDescription }: VideoDescription) => {
+  const router = useRouter();
+  const projectId = parseInt(router.query.id as string, 10);
+
+  const { data, isLoading } = useQuery(
+    `${queryKeys.PROJECTS_VIDEO_DESCRIPTION}/${projectId}`,
+    () => getProjectsVideoDescription(projectId),
+    {
+      refetchOnWindowFocus: false,
+      retry: 1,
+    },
+  );
+
+  useEffect(() => {
+    if (data && !isLoading) {
+      setDescription(data.description);
+    }
+  }, [isLoading]);
+
+  const handleTextareaChange = useCallback(
+    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      setDescription(e.target.value);
+    },
+    [description],
+  );
+
   return (
     <Styled.Container>
       <Styled.TitleContainer>
         <Icon width={20} height={20} icon="BoatedSymbol" />
         <Text>설명 (300자 이내)</Text>
       </Styled.TitleContainer>
-      <Styled.DescriptionTextarea />
+      <Styled.DescriptionTextarea value={description} onChange={handleTextareaChange} />
     </Styled.Container>
   );
 };

diff --git a/components/project/PresentationVideo/VideoDescription/style.ts b/components/project/PresentationVideo/VideoDescription/style.ts
@@ -16,9 +16,16 @@ export const TitleContainer = styled.div`
   gap: 15px;
 `;
 
-export const DescriptionTextarea = styled.div`
+export const DescriptionTextarea = styled.textarea`
   width: 999px;
   height: 139px;
 
+  resize: none;
+
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 20px;
+  font-family: 'Noto Sans KR';
+
   ${boxDesign()};
 `;
diff --git a/components/project/PresentationVideo/index.tsx b/components/project/PresentationVideo/index.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useQuery } from 'react-query';
 import { useRouter } from 'next/router';
 import { AxiosError } from 'axios';
 
-import { deleteProjectsVideo, getProjectsVideo } from '@/lib/api/projects';
+import { deleteProjectsVideo, getProjectsVideo, putProjectsVideoDescription } from '@/lib/api/projects';
 import * as queryKeys from '@/lib/constants/queryKeys';
 
 import useModal from '@/hooks/useModal';
@@ -23,6 +23,8 @@ const PresentationVideo = () => {
   const router = useRouter();
   const projectId = parseInt(router.query.id as string, 10);
 
+  const [description, setDescription] = useState<string>('');
+
   const { isShowModal, closeModal, openModal } = useModal();
 
   const { data, isLoading, remove, refetch } = useQuery(
@@ -46,6 +48,15 @@ const PresentationVideo = () => {
     }
   };
 
+  const handleVideoDescriptionButton = async () => {
+    try {
+      await putProjectsVideoDescription({ projectId, description });
+    } catch (e: unknown) {
+      const error = e as AxiosError;
+      alert(JSON.stringify(error.response?.data.message));
+    }
+  };
+
   return (
     <Styled.Container>
       {isShowModal && (
@@ -56,21 +67,23 @@ const PresentationVideo = () => {
         {isLoading && <Styled.LoadingWrapper>Loading...</Styled.LoadingWrapper>}
         {!data && !isLoading && <FileDragDropInput />}
         {data && <Styled.PresentationVideo src={`/api/projects/${projectId}/video`} controls autoPlay={false} />}
-        <VideoDescription />
+        <VideoDescription description={description} setDescription={setDescription} />
       </Styled.PresentationContainer>
       <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}>
-              삭제하기
+          <>
+            <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} onClick={handleVideoDescriptionButton}>
+              저장하기
             </Button>
-          </Styled.VideoInfoContainer>
+          </>
         )}
-        <Button width={200} height={53} borderRadius={6}>
-          저장하기
-        </Button>
       </Styled.ButtonContainer>
     </Styled.Container>
   );