diff --git a/components/project/PresentationVideo/VideoDescription/index.tsx b/components/project/PresentationVideo/VideoDescription/index.tsx index f7b45a6..9408ddc 100644 --- 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>; +} + +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) => { + setDescription(e.target.value); + }, + [description], + ); + return ( 설명 (300자 이내) - + ); }; diff --git a/components/project/PresentationVideo/VideoDescription/style.ts b/components/project/PresentationVideo/VideoDescription/style.ts index fd74f53..74bc4d1 100644 --- 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 index 2868ab3..d86a751 100644 --- 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(''); + 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 ( {isShowModal && ( @@ -56,21 +67,23 @@ const PresentationVideo = () => { {isLoading && Loading...} {!data && !isLoading && } {data && } - + {data && ( - - - 파일 용량 : {Math.ceil(Number(data?.headers['content-length']) / 1000000)}MB - + + - + )} - );