[feat/#235] ✨ Feat: 파일 업로드 방식 변경

kookmin-sw · Apr 14, 2024 · 64e4e2a · 64e4e2a
1 parent dcf2a94
commit 64e4e2a
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 52 deletions.
diff --git a/chatty-fe/src/app/(game)/create-room/_components/FileUploadBox.css.ts b/chatty-fe/src/app/(game)/create-room/_components/FileUploadBox.css.ts
@@ -38,6 +38,13 @@ export const container = recipe({
   },
 });
 
+export const uploadedFiles = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 10,
+  alignItems: 'center',
+});
+
 export const wrapper = style({
   display: 'flex',
   flexDirection: 'column',

diff --git a/chatty-fe/src/app/(game)/create-room/_components/FileUploadBox.tsx b/chatty-fe/src/app/(game)/create-room/_components/FileUploadBox.tsx
@@ -1,56 +1,61 @@
 'use client';
 import React, { useState } from 'react';
 import * as styles from './FileUploadBox.css';
-import { handleUpload } from '@/app/_lib/uploader';
+//import { handleUpload } from '@/app/_lib/uploader';
 import Image from 'next/image';
 
 type FileUploadBoxProps = {
-  setFileNames: React.Dispatch<React.SetStateAction<string[]>>;
+  setFiles: React.Dispatch<React.SetStateAction<File[]>>;
 };
 
-export default function FileUploadBox({ setFileNames }: FileUploadBoxProps) {
-  const [uploadProgress, setUploadProgress] = useState(0);
-  const [isUploading, setIsUploading] = useState(false);
+export default function FileUploadBox({ setFiles }: FileUploadBoxProps) {
+  //const [uploadProgress, setUploadProgress] = useState(0);
+  //const [isUploading, setIsUploading] = useState(false);
+  //const [fileNumber, setFileNumber] = useState(0);
+  //const [uploadedFileNumber, setUploadedFileNumber] = useState(1);
   const [isUploaded, setIsUploaded] = useState(false);
-  const [fileNumber, setFileNumber] = useState(0);
-  const [uploadedFileNumber, setUploadedFileNumber] = useState(1);
+  const [uploadedFileNames, setFileNames] = useState<string[]>([]);
+
+  // const onFileUpload = async (files: FileList) => {
+  //   await handleUpload(
+  //     files,
+  //     setUploadProgress,
+  //     setFileNumber,
+  //     setUploadedFileNumber,
+  //     setIsUploading,
+  //     setIsUploaded,
+  //     setFileNames,
+  //   );
+  // };
+
+  // const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  //   if (e.target.files) {
+  //     setFiles(Array.from(e.target.files));
+  //   }
+  // };
 
-  const onFileUpload = async (files: FileList) => {
-    await handleUpload(
-      files,
-      setUploadProgress,
-      setFileNumber,
-      setUploadedFileNumber,
-      setIsUploading,
-      setIsUploaded,
-      setFileNames,
-    );
-  };
   return (
     <div
       className={styles.container({
         isUploaded: isUploaded,
-        isUploading: isUploading,
       })}
       onDragOver={(e) => e.preventDefault()}
       onDrop={(e) => {
         e.preventDefault();
         if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
-          onFileUpload(e.dataTransfer.files);
-          e.dataTransfer.clearData();
+          setFiles(Array.from(e.dataTransfer.files));
         }
+        setFileNames(Array.from(e.dataTransfer.files).map((file) => file.name));
+        setIsUploaded(true);
       }}
     >
-      {isUploading ? (
-        <>
-          <div>업로드 중입니다...</div>
-          <div>
-            {uploadedFileNumber} / {fileNumber}
-          </div>
-          <div>{uploadProgress}%</div>
-        </>
-      ) : isUploaded ? (
-        <div>업로드 완료!</div>
+      {isUploaded ? (
+        <div className={styles.uploadedFiles}>
+          <div>업로드 완료!</div>
+          {uploadedFileNames.map((name) => (
+            <div key={name}>{name}</div>
+          ))}
+        </div>
       ) : (
         <>
           <div className={styles.wrapper}>

diff --git a/chatty-fe/src/app/(game)/create-room/page.tsx b/chatty-fe/src/app/(game)/create-room/page.tsx
@@ -16,7 +16,8 @@ export default function CreateRoom() {
     { id: '객관식', value: '단답형', label: '단답형' },
   ];
 
-  const [fileNames, setFileNames] = useState<string[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [files, setFiles] = useState<File[]>([]);
   const [title, setTitle] = useState('');
   const [description, setDescription] = useState('');
   const [numberOfParticipants, setNumberOfParticipants] = useState(0);
@@ -32,6 +33,7 @@ export default function CreateRoom() {
   };
 
   const onSubmit = async () => {
+    setIsLoading(true);
     try {
       const response = await postRoom(
         title,
@@ -40,7 +42,7 @@ export default function CreateRoom() {
         numberOfParticipants,
         password,
         problemType,
-        fileNames,
+        files,
       );
       console.log(response);
       if (response) {
@@ -49,6 +51,7 @@ export default function CreateRoom() {
     } catch (error) {
       console.error(error);
     }
+    setIsLoading(false);
   };
 
   return (
@@ -128,7 +131,8 @@ export default function CreateRoom() {
           <div className={styles.contentsWrapper}>
             <ContentsBox imgSrc="/images/paper_clip.svg" title="파일" />
             <div className={styles.titleWrapper}>
-              <FileUploadBox setFileNames={setFileNames} />
+              {/* <input type="file" onChange={handleFileChange} /> */}
+              <FileUploadBox setFiles={setFiles} />
             </div>
           </div>
 
@@ -159,7 +163,13 @@ export default function CreateRoom() {
         </div>
         <div className={styles.buttonContainer}>
           <div className={styles.buttonWrapper}>
-            <GradButton rounded onClick={onSubmit} fullWidth>
+            <GradButton
+              rounded
+              onClick={onSubmit}
+              fullWidth
+              isLoading={isLoading}
+              disabled={isLoading}
+            >
               생성하기
             </GradButton>
           </div>

diff --git a/chatty-fe/src/app/_api/createRoom.ts b/chatty-fe/src/app/_api/createRoom.ts
@@ -9,26 +9,29 @@ export const postRoom = async (
   playerLimitNum: number,
   code: string,
   type: string,
-  files: Array<string>,
+  files: File[],
 ) => {
   try {
-    const response = await client.post(
-      '/rooms',
-      {
-        name,
-        numOfQuiz,
-        timeLimit,
-        playerLimitNum,
-        code,
-        type,
-        files,
-      },
-      {
-        headers: {
-          Authorization: `Bearer ${useAuthStore.getState().accessToken}`,
-        },
+    const formData = new FormData();
+    formData.append('name', name);
+    formData.append('numOfQuiz', String(numOfQuiz));
+    formData.append('timeLimit', String(timeLimit));
+    formData.append('playerLimitNum', String(playerLimitNum));
+    formData.append('code', code);
+    formData.append('type', type);
+
+    // files를 하나씩 FormData에 추가
+    files.forEach((file) => {
+      formData.append(`files`, file);
+    });
+
+    const response = await client.post('/rooms', formData, {
+      headers: {
+        Authorization: `Bearer ${useAuthStore.getState().accessToken}`,
+        'Content-Type': 'multipart/form-data',
       },
-    );
+    });
+
     console.log(response.data);
     return response.data;
   } catch (error) {