From b46a43be41e70262c032abf0373594b79db46f43 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=ED=98=84=EC=A1=B0?= <j96263732@gmail.com>
Date: Sat, 5 Oct 2024 13:51:33 +0900
Subject: [PATCH] =?UTF-8?q?Refactor:=20=EC=97=85=EB=A1=9C=EB=93=9C=20?=
 =?UTF-8?q?=EB=B6=80=EB=B6=84=20=ED=86=B5=ED=95=A9=20=EB=AA=A8=EB=8B=AC=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ImageUploadModal/ImageUploadForm.tsx      | 271 ++++++++++++++++++
 .../src/components/ImageUploadModal/index.tsx |  70 +++++
 2 files changed, 341 insertions(+)
 create mode 100644 frontend/src/components/ImageUploadModal/ImageUploadForm.tsx
 create mode 100644 frontend/src/components/ImageUploadModal/index.tsx

diff --git a/frontend/src/components/ImageUploadModal/ImageUploadForm.tsx b/frontend/src/components/ImageUploadModal/ImageUploadForm.tsx
new file mode 100644
index 0000000..610cca7
--- /dev/null
+++ b/frontend/src/components/ImageUploadModal/ImageUploadForm.tsx
@@ -0,0 +1,271 @@
+import { useState, useEffect } from 'react';
+import { Button } from '../ui/button';
+import { cn } from '@/lib/utils';
+import useAuthStore from '@/stores/useAuthStore';
+import { CircleCheckBig, CircleDashed, CircleX, X } from 'lucide-react';
+import { FixedSizeList } from 'react-window';
+import { UseMutationResult } from '@tanstack/react-query';
+import { UploadZipParams, UploadFolderParams } from '@/types/uploadTypes';
+
+interface UploadFormProps {
+  onClose: () => void;
+  onRefetch?: () => void;
+  onFileCount: (fileCount: number) => void;
+  projectId: number;
+  folderId: number;
+  isFolderUpload?: boolean;
+  isZipUpload?: boolean;
+  isFolderBackendUpload?: boolean;
+  uploadImageZipMutation: UseMutationResult<unknown, Error, UploadZipParams, unknown>;
+  uploadImageFolderFileMutation: UseMutationResult<unknown, Error, UploadFolderParams, unknown>;
+  uploadImageFileMutation: UseMutationResult<unknown, Error, UploadFolderParams, unknown>;
+  uploadImageFolderMutation: UseMutationResult<unknown, Error, UploadFolderParams, unknown>;
+}
+
+export default function ImageUploadForm({
+  onClose,
+  onRefetch,
+  onFileCount,
+  projectId,
+  folderId,
+  isFolderUpload = false,
+  isZipUpload = false,
+  isFolderBackendUpload = false,
+  uploadImageZipMutation,
+  uploadImageFolderFileMutation,
+  uploadImageFileMutation,
+  uploadImageFolderMutation,
+}: UploadFormProps) {
+  const profile = useAuthStore((state) => state.profile);
+  const memberId = profile?.id || 0;
+
+  const [files, setFiles] = useState<File[]>([]);
+  const [inputKey, setInputKey] = useState<number>(0);
+  const [isDragging, setIsDragging] = useState<boolean>(false);
+  const [isUploading, setIsUploading] = useState<boolean>(false);
+  const [isUploaded, setIsUploaded] = useState<boolean>(false);
+  const [isFailed, setIsFailed] = useState<boolean>(false);
+  const [progress, setProgress] = useState<number>(0);
+
+  const handleClose = () => {
+    onClose();
+    setFiles([]);
+    setInputKey((prevKey) => prevKey + 1);
+    setIsUploading(false);
+    setIsUploaded(false);
+    setIsFailed(false);
+    setProgress(0);
+  };
+
+  const handleRefetch = () => {
+    if (onRefetch) {
+      onRefetch();
+    }
+  };
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newFiles = event.target.files;
+
+    if (newFiles) {
+      setFiles((prevFiles) => [...prevFiles, ...Array.from(newFiles)]);
+    }
+
+    event.target.value = '';
+  };
+
+  const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setIsDragging(true);
+  };
+
+  const handleDragLeave = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setIsDragging(false);
+  };
+
+  const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setIsDragging(false);
+    const droppedFiles = event.dataTransfer.files;
+    if (droppedFiles) {
+      setFiles((prevFiles) => [...prevFiles, ...Array.from(droppedFiles)]);
+    }
+  };
+
+  const handleRemoveFile = (index: number) => {
+    if (isFolderUpload) {
+      setFiles([]);
+      setInputKey((prevKey) => prevKey + 1);
+    } else {
+      setFiles(files.filter((_, i) => i !== index));
+    }
+  };
+
+  const handleUpload = () => {
+    if (files.length > 0) {
+      setIsUploading(true);
+      setIsUploaded(false);
+      setIsFailed(false);
+
+      const progressCallback = (progress: number) => {
+        setProgress(progress);
+      };
+
+      if (isZipUpload) {
+        const variables: UploadZipParams = {
+          memberId,
+          projectId,
+          folderId,
+          file: files[0],
+          progressCallback,
+        };
+        uploadImageZipMutation.mutate(variables, {
+          onSuccess: () => {
+            handleRefetch();
+            setIsUploaded(true);
+          },
+          onError: () => {
+            setIsFailed(true);
+          },
+        });
+      } else {
+        const variables: UploadFolderParams = {
+          memberId,
+          projectId,
+          folderId,
+          files,
+          progressCallback,
+        };
+        const mutation = isFolderBackendUpload
+          ? uploadImageFolderMutation
+          : isFolderUpload
+            ? uploadImageFolderFileMutation
+            : uploadImageFileMutation;
+
+        mutation.mutate(variables, {
+          onSuccess: () => {
+            handleRefetch();
+            setIsUploaded(true);
+          },
+          onError: () => {
+            setIsFailed(true);
+          },
+        });
+      }
+    }
+  };
+
+  useEffect(() => {
+    onFileCount(files.length);
+  }, [files, onFileCount]);
+
+  return (
+    <div className="flex flex-col gap-5">
+      {!isUploading && (
+        <div
+          className={cn(
+            'relative flex h-[200px] w-full cursor-pointer items-center justify-center rounded-lg border-2 text-center',
+            isDragging ? 'border-solid border-primary bg-blue-200' : 'border-dashed border-gray-500 bg-gray-100'
+          )}
+          onDragOver={handleDragOver}
+          onDragLeave={handleDragLeave}
+          onDrop={handleDrop}
+        >
+          <input
+            key={inputKey}
+            type="file"
+            {...(isFolderUpload ? { webkitdirectory: '' } : { multiple: !isZipUpload })}
+            accept={isZipUpload ? '.zip' : undefined}
+            className="absolute inset-0 h-full w-full cursor-pointer opacity-0"
+            onChange={handleChange}
+          />
+          {isDragging ? (
+            <p className="text-primary">
+              {isFolderUpload ? '드래그한 폴더를 여기에 놓으세요' : '드래그한 파일을 여기에 놓으세요'}
+            </p>
+          ) : (
+            <p className="text-gray-500">
+              {isFolderUpload
+                ? '폴더를 업로드하려면 여기를 클릭하거나 폴더를 드래그하여 여기에 놓으세요'
+                : '파일을 업로드하려면 여기를 클릭하거나 파일을 드래그하여 여기에 놓으세요'}
+            </p>
+          )}
+        </div>
+      )}
+      {files.length > 0 && (
+        <ul className="m-0 max-h-[260px] list-none overflow-y-auto p-0">
+          <FixedSizeList
+            height={260}
+            itemCount={files.length}
+            itemSize={40}
+            width="100%"
+          >
+            {({ index, style }) => (
+              <li
+                key={index}
+                className="flex items-center justify-between p-1"
+                style={style}
+              >
+                <span className="truncate">{files[index].webkitRelativePath || files[index].name}</span>
+                {isUploading ? (
+                  <div className="p-2">
+                    {isUploaded ? (
+                      <CircleCheckBig
+                        className="stroke-green-500"
+                        size={16}
+                        strokeWidth="2"
+                      />
+                    ) : isFailed ? (
+                      <CircleX
+                        className="stroke-red-500"
+                        size={16}
+                        strokeWidth="2"
+                      />
+                    ) : (
+                      <CircleDashed
+                        className="stroke-gray-500"
+                        size={16}
+                        strokeWidth="2"
+                      />
+                    )}
+                  </div>
+                ) : (
+                  <button
+                    className="cursor-pointer p-2"
+                    onClick={() => handleRemoveFile(index)}
+                  >
+                    <X
+                      color="red"
+                      size={16}
+                      strokeWidth="2"
+                    />
+                  </button>
+                )}
+              </li>
+            )}
+          </FixedSizeList>
+        </ul>
+      )}
+      {isUploading ? (
+        <Button
+          onClick={handleClose}
+          variant={isFailed ? 'red' : 'blue'}
+          disabled={!isUploaded && !isFailed}
+        >
+          {isFailed ? '업로드 실패 (닫기)' : isUploaded ? '업로드 완료 (닫기)' : `업로드 중... ${progress}%`}
+        </Button>
+      ) : (
+        <Button
+          onClick={handleUpload}
+          variant="blue"
+          disabled={files.length === 0}
+        >
+          업로드
+        </Button>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/components/ImageUploadModal/index.tsx b/frontend/src/components/ImageUploadModal/index.tsx
new file mode 100644
index 0000000..82a9d9f
--- /dev/null
+++ b/frontend/src/components/ImageUploadModal/index.tsx
@@ -0,0 +1,70 @@
+import React from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTrigger } from '../ui/dialogCustom';
+import { Plus } from 'lucide-react';
+import ImageUploadForm from './ImageUploadForm';
+import useUploadImageFileQuery from '@/queries/projects/useUploadImageFileQuery';
+import useUploadImageFolderFileQuery from '@/queries/projects/useUploadImageFolderFileQuery';
+import useUploadImageZipQuery from '@/queries/projects/useUploadImageZipQuery';
+import useUploadImageFolderQuery from '@/queries/projects/useUploadImageFolderQuery';
+
+interface ImageUploadModalProps {
+  projectId: number;
+  folderId: number;
+  isFolderUpload?: boolean;
+  isZipUpload?: boolean;
+  isFolderBackendUpload?: boolean;
+}
+
+export default function ImageUploadModal({
+  projectId,
+  folderId,
+  isFolderUpload = false,
+  isZipUpload = false,
+  isFolderBackendUpload = false,
+}: ImageUploadModalProps) {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [fileCount, setFileCount] = React.useState<number>(0);
+
+  const handleOpen = () => setIsOpen(true);
+  const handleClose = () => setIsOpen(false);
+  const handleFileCount = (fileCount: number) => {
+    setFileCount(fileCount);
+  };
+
+  const uploadImageZipMutation = useUploadImageZipQuery();
+  const uploadImageFolderFileMutation = useUploadImageFolderFileQuery();
+  const uploadImageFileMutation = useUploadImageFileQuery();
+  const uploadImageFolderMutation = useUploadImageFolderQuery();
+
+  return (
+    <Dialog
+      open={isOpen}
+      onOpenChange={setIsOpen}
+    >
+      <DialogTrigger asChild>
+        <button
+          className="flex items-center justify-center p-2"
+          onClick={handleOpen}
+        >
+          <Plus size={20} />
+        </button>
+      </DialogTrigger>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader title={fileCount > 0 ? `파일 업로드 (${fileCount})` : '파일 업로드'} />
+        <ImageUploadForm
+          onClose={handleClose}
+          onFileCount={handleFileCount}
+          projectId={projectId}
+          folderId={folderId}
+          isFolderUpload={isFolderUpload}
+          isZipUpload={isZipUpload}
+          isFolderBackendUpload={isFolderBackendUpload}
+          uploadImageZipMutation={uploadImageZipMutation}
+          uploadImageFolderFileMutation={uploadImageFolderFileMutation}
+          uploadImageFileMutation={uploadImageFileMutation}
+          uploadImageFolderMutation={uploadImageFolderMutation}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+}