Merge branch 'fe/fix/image-upload' into 'fe/develop'

Fix: 이미지 업로드 시 같은 파일이 다시 선택 안되는 현상 수정, 이미지 업로드 시작 후 제거 버튼 대신 상태 아이콘 나오도록 변경

See merge request s11-s-project/S11P21S002!166

frontend/src/components/ImageUploadFileModal/ImageUploadFileForm.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { Button } from '../ui/button';
 import { cn } from '@/lib/utils';
 import useAuthStore from '@/stores/useAuthStore';
-import { X } from 'lucide-react';
+import { CircleCheckBig, CircleDashed, CircleX, X } from 'lucide-react';
 import useUploadImageFileQuery from '@/queries/projects/useUploadImageFileQuery';
 
 export default function ImageUploadFileForm({
@@ -40,6 +40,8 @@ export default function ImageUploadFileForm({
 
       setFiles((prevFiles) => [...prevFiles, ...newImages]);
     }
+
+    event.target.value = '';
   };
 
   const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
@@ -120,6 +122,29 @@ export default function ImageUploadFileForm({
               className={cn('flex items-center justify-between p-1')}
             >
               <span className="truncate">{file.webkitRelativePath || file.name}</span>
+              {isUploading ? (
+                <div className="p-2">
+                  {isUploaded ? (
+                    <CircleCheckBig
+                      className="stroke-green-500"
+                      size={20}
+                      strokeWidth="2"
+                    />
+                  ) : isFailed ? (
+                    <CircleX
+                      className="stroke-red-500"
+                      size={20}
+                      strokeWidth="2"
+                    />
+                  ) : (
+                    <CircleDashed
+                      className="stroke-gray-500"
+                      size={20}
+                      strokeWidth="2"
+                    />
+                  )}
+                </div>
+              ) : (
                 <button
                   className={'cursor-pointer p-2'}
                   onClick={() => handleRemoveFile(index)}
@@ -130,6 +155,7 @@ export default function ImageUploadFileForm({
                     strokeWidth="2"
                   />
                 </button>
+              )}
             </li>
           ))}
         </ul>

frontend/src/components/ImageUploadFolderModal/ImageUploadFolderForm.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { Button } from '../ui/button';
 import { cn } from '@/lib/utils';
 import useAuthStore from '@/stores/useAuthStore';
-import { X } from 'lucide-react';
+import { CircleCheckBig, CircleDashed, CircleX, X } from 'lucide-react';
 import useUploadImageFolderQuery from '@/queries/projects/useUploadImageFolderQuery';
 
 export default function ImageUploadFolderForm({ onClose, projectId }: { onClose: () => void; projectId: number }) {
@@ -27,6 +27,8 @@ export default function ImageUploadFolderForm({ onClose, projectId }: { onClose:
     if (newFiles) {
       setFiles((prevFiles) => [...prevFiles, ...Array.from(newFiles)]);
     }
+
+    event.target.value = '';
   };
 
   const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
@@ -105,6 +107,29 @@ export default function ImageUploadFolderForm({ onClose, projectId }: { onClose:
               className={cn('flex items-center justify-between p-1')}
             >
               <span className="truncate">{file.webkitRelativePath || file.name}</span>
+              {isUploading ? (
+                <div className="p-2">
+                  {isUploaded ? (
+                    <CircleCheckBig
+                      className="stroke-green-500"
+                      size={20}
+                      strokeWidth="2"
+                    />
+                  ) : isFailed ? (
+                    <CircleX
+                      className="stroke-red-500"
+                      size={20}
+                      strokeWidth="2"
+                    />
+                  ) : (
+                    <CircleDashed
+                      className="stroke-gray-500"
+                      size={20}
+                      strokeWidth="2"
+                    />
+                  )}
+                </div>
+              ) : (
                 <button
                   className={'cursor-pointer p-2'}
                   onClick={() => handleRemoveFile(index)}
@@ -115,6 +140,7 @@ export default function ImageUploadFolderForm({ onClose, projectId }: { onClose:
                     strokeWidth="2"
                   />
                 </button>
+              )}
             </li>
           ))}
         </ul>

frontend/src/components/ImageUploadZipModal/ImageUploadZipForm.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { Button } from '../ui/button';
 import { cn } from '@/lib/utils';
 import useAuthStore from '@/stores/useAuthStore';
-import { X } from 'lucide-react';
+import { CircleCheckBig, CircleDashed, CircleX, X } from 'lucide-react';
 import useUploadImageZipQuery from '@/queries/projects/useUploadImageZipQuery';
 
 export default function ImageUploadZipForm({ onClose, projectId }: { onClose: () => void; projectId: number }) {
@@ -27,6 +27,8 @@ export default function ImageUploadZipForm({ onClose, projectId }: { onClose: ()
     if (newFiles) {
       setFile(newFiles[0]);
     }
+
+    event.target.value = '';
   };
 
   const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
@@ -103,6 +105,29 @@ export default function ImageUploadZipForm({ onClose, projectId }: { onClose: ()
       {file && (
         <div className={'flex items-center justify-between p-1'}>
           <span className="truncate">{file.webkitRelativePath || file.name}</span>
+          {isUploading ? (
+            <div className="p-2">
+              {isUploaded ? (
+                <CircleCheckBig
+                  className="stroke-green-500"
+                  size={20}
+                  strokeWidth="2"
+                />
+              ) : isFailed ? (
+                <CircleX
+                  className="stroke-red-500"
+                  size={20}
+                  strokeWidth="2"
+                />
+              ) : (
+                <CircleDashed
+                  className="stroke-gray-500"
+                  size={20}
+                  strokeWidth="2"
+                />
+              )}
+            </div>
+          ) : (
             <button
               className={'cursor-pointer p-2'}
               onClick={() => handleRemoveFile()}
@@ -113,6 +138,7 @@ export default function ImageUploadZipForm({ onClose, projectId }: { onClose: ()
                 strokeWidth="2"
               />
             </button>
+          )}
         </div>
       )}
       {isUploading ? (