Feat: #BBB-130 기술 서적 스터디 해설 영상 업로드 버튼 구현

components/study/button/video-upload-button.tsx

@@ -0,0 +1,115 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Button } from '@/components/ui/button/button';
+import { Upload } from 'lucide-react';
+import {
+  completeMultipartUpload,
+  generatePresignedUrl,
+  generateUploadId,
+  uploadVideo
+} from '@/lib/api/video/video-upload';
+import checkVideoUploadStatus from '@/lib/api/study/check-video-upload-status';
+import { toast } from 'react-toastify';
+import { useRecoilState } from 'recoil';
+import { userState } from '@/recoil/userAtom';
+import { BookRound } from '@/types/study/study-detail';
+import { VideoUploadButtonProps } from '@/types/study/video-upload-button';
+
+export default function VideoUploadButton({
+  studyType,
+  studyId,
+  round
+}: VideoUploadButtonProps) {
+  const [myData, setMyData] = useRecoilState(userState);
+  const [myAssignmentId, setMyAssignmentId] = useState<number>();
+  const [file, setFile] = useState<File | null>(null);
+
+  useEffect(() => {
+    if (studyType === 'BOOK' && myData) {
+      const BookRound = round as BookRound;
+      setMyAssignmentId(BookRound.users[myData.id].assignmentId);
+    }
+  }, [studyType, myData, round]);
+
+  if (myAssignmentId == null) return null;
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files && event.target.files[0]) {
+      setFile(event.target.files[0]);
+    }
+  };
+
+  const handleUpload = async () => {
+    if (file == null) return;
+
+    const completedParts = [];
+    const respose = await generateUploadId(studyId, myAssignmentId);
+    const uploadId = respose.data.uploadId;
+
+    const partSize = 5 * 1024 * 1024;
+    const totalParts = Math.ceil(file.size / partSize);
+    for (let partNumber = 1; partNumber <= totalParts; partNumber++) {
+      const start = (partNumber - 1) * partSize;
+      const end = Math.min(start + partSize, file.size + 1);
+      const chunk = file.slice(start, end);
+      const response = await generatePresignedUrl(
+        uploadId,
+        partNumber,
+        chunk.size,
+        studyId,
+        myAssignmentId
+      );
+      const presignedUrl = response.data.presignedUrl;
+      const result = await uploadVideo(presignedUrl, chunk);
+      const eTag = result.headers.etag;
+      completedParts.push({ partNumber, eTag });
+    }
+
+    const completeResponse = await completeMultipartUpload(
+      uploadId,
+      completedParts,
+      studyId,
+      myAssignmentId
+    );
+
+    if (completeResponse.status === 200) {
+      console.log(myAssignmentId);
+      checkVideoUploadStatus(studyId, myAssignmentId).then((response) => {
+        if (response.status === 200) {
+          toast.success('업로드에 성공했습니다.');
+        } else {
+          toast.error('업로드에 실패했습니다.');
+        }
+      });
+    } else {
+      toast.error('업로드에 실패했습니다.');
+    }
+    setFile(null);
+  };
+
+  return (
+    <div className="flex justify-end space-x-2 flex-shrink-0">
+      <input
+        type="file"
+        id="assignment-upload"
+        className="sr-only"
+        onChange={handleFileChange}
+        accept=".mp4,.mov,.avi,.mkv,.wmv,.flv,.webm"
+      />
+      <label htmlFor="assignment-upload" className="cursor-pointer">
+        <Button size="sm" variant="outline" asChild>
+          <span>
+            <Upload className="w-4 h-4 mr-2" />
+            {file ? file.name : '과제 업로드'}
+          </span>
+        </Button>
+      </label>
+      {file && (
+        <Button size="sm" onClick={handleUpload}>
+          업로드
+        </Button>
+      )}
+    </div>
+  );
+}

components/study/dashboard/dashboard.tsx

@@ -27,6 +27,7 @@ import { useParams } from 'next/navigation';
 import { useRecoilState } from 'recoil';
 import FeedbackDialog from '../feedback-dialog';
 import { BookRow } from './book-row';
+import VideoUploadButton from '@/components/study/button/video-upload-button';
 
 export default function StudyDashBoard({
   details,
@@ -43,7 +44,12 @@ export default function StudyDashBoard({
   if (studyType === StudyType.ALGORITHM) {
     return (
       <div className="mt-5 bg-background rounded-lg border p-6 w-full max-w-4xl h-full">
-        <DashBoardHeader round={round} setRound={setRound} details={details} />
+        <DashBoardHeader
+          studyId={studyId}
+          round={round}
+          setRound={setRound}
+          details={details}
+        />
         <AlgorithmDashBoardBody
           round={round as AlgorithmRound}
           studyId={studyId}
@@ -53,7 +59,12 @@ export default function StudyDashBoard({
   } else if (studyType === StudyType.BOOK) {
     return (
       <div className="mt-5 bg-background rounded-lg border p-6 w-full max-w-4xl h-full">
-        <DashBoardHeader round={round} setRound={setRound} details={details} />
+        <DashBoardHeader
+          studyId={studyId}
+          round={round as BookRound}
+          setRound={setRound}
+          details={details}
+        />
         <BookDashBoardBody round={round as BookRound} studyId={studyId} />
       </div>
     );
@@ -147,18 +158,29 @@ function BookDashBoardBody({
 }
 
 function DashBoardHeader({
+  studyId,
   round,
   setRound,
   details
 }: {
+  studyId: number;
   details: StudyDetails;
   round: Round;
   setRound: (round: Round) => void;
 }) {
   return (
     <div className="flex items-center justify-between mb-6">
       <h2 className="text-2xl font-bold">{details.name}</h2>
-      <SelectRound round={round} setRound={setRound} />
+      <div className="flex space-x-5">
+        {details.studyType === 'BOOK' ? (
+          <VideoUploadButton
+            studyType={details.studyType}
+            studyId={studyId}
+            round={round}
+          />
+        ) : null}
+        <SelectRound round={round} setRound={setRound} />
+      </div>
     </div>
   );
 }
@@ -187,7 +209,7 @@ function SelectRound({
   };
 
   return (
-    <div className="flex items-center w-1/5 justify-end">
+    <div className="flex items-center justify-end">
       <Select
         value={(round.idx + 1).toString()}
         onValueChange={handleRoundChange}

lib/api/study/check-video-upload-status.ts

@@ -0,0 +1,19 @@
+import axios from 'axios';
+import { getAuthenticationConfig } from '@/lib/utils';
+
+/**
+ * 해설 영상 업로드 완료 요청 API
+ *
+ * @param studyId
+ * @param assignmentId
+ */
+export default function checkVideoUploadStatus(
+  studyId: number,
+  assignmentId: number
+) {
+  return axios.post(
+    `${process.env.NEXT_PUBLIC_API_SERVER_URL}/api/v1/studies/${studyId}/upload-status`,
+    { assignmentId: assignmentId },
+    getAuthenticationConfig()
+  );
+}

lib/api/video/video-upload.ts

@@ -0,0 +1,70 @@
+import axios from 'axios';
+import { getAuthenticationConfig } from '@/lib/utils';
+
+/**
+ * AWS S3 multipart 업로드 id 생성 API
+ *
+ * @param studyId
+ * @param assignmentId
+ */
+export async function generateUploadId(studyId: number, assignmentId: number) {
+  return axios.post(
+    `${process.env.NEXT_PUBLIC_API_SERVER_URL}/api/v1/videos/initiate-upload`,
+    { studyId, assignmentId },
+    getAuthenticationConfig()
+  );
+}
+
+/**
+ * AWS S3 presigned url 생성 API
+ *
+ * @param uploadId
+ * @param partNumber
+ * @param partSize
+ * @param studyId
+ * @param assignmentId
+ */
+export async function generatePresignedUrl(
+  uploadId: string,
+  partNumber: number,
+  partSize: number,
+  studyId: number,
+  assignmentId: number
+) {
+  return axios.post(
+    `${process.env.NEXT_PUBLIC_API_SERVER_URL}/api/v1/videos/presigned-url`,
+    { uploadId, partNumber, partSize, studyId, assignmentId },
+    getAuthenticationConfig()
+  );
+}
+
+/**
+ * AWS S3에 비디오 업로드 API
+ *
+ * @param presignedUrl
+ * @param file
+ */
+export async function uploadVideo(presignedUrl: string, file: File | Blob) {
+  return axios.put(presignedUrl, file);
+}
+
+/**
+ * AWS S3 multipart 업로드 완료 요청 API
+ *
+ * @param uploadId
+ * @param parts
+ * @param studyId
+ * @param assignmentId
+ */
+export async function completeMultipartUpload(
+  uploadId: string,
+  parts: { partNumber: number; eTag: string }[],
+  studyId: number,
+  assignmentId: number
+) {
+  return axios.post(
+    `${process.env.NEXT_PUBLIC_API_SERVER_URL}/api/v1/videos/complete-upload`,
+    { uploadId, parts, studyId, assignmentId },
+    getAuthenticationConfig()
+  );
+}

types/study/video-upload-button.ts

@@ -0,0 +1,7 @@
+import { Round } from '@/types/study/study-detail';
+
+export interface VideoUploadButtonProps {
+  studyType: string;
+  studyId: number;
+  round: Round;
+}