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,16 +122,40 @@ export default function ImageUploadFileForm({
               className={cn('flex items-center justify-between p-1')}
             >
               <span className="truncate">{file.webkitRelativePath || file.name}</span>
-              <button
+              {isUploading ? (
-                className={'cursor-pointer p-2'}
+                <div className="p-2">
-                onClick={() => handleRemoveFile(index)}
+                  {isUploaded ? (
-              >
+                    <CircleCheckBig
-                <X
+                      className="stroke-green-500"
-                  color="red"
+                      size={20}
-                  size={16}
+                      strokeWidth="2"
-                  strokeWidth="2"
+                    />
-                />
+                  ) : isFailed ? (
-              </button>
+                    <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)}
+                >
+                  <X
+                    color="red"
+                    size={16}
+                    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,16 +107,40 @@ export default function ImageUploadFolderForm({ onClose, projectId }: { onClose:
               className={cn('flex items-center justify-between p-1')}
             >
               <span className="truncate">{file.webkitRelativePath || file.name}</span>
-              <button
+              {isUploading ? (
-                className={'cursor-pointer p-2'}
+                <div className="p-2">
-                onClick={() => handleRemoveFile(index)}
+                  {isUploaded ? (
-              >
+                    <CircleCheckBig
-                <X
+                      className="stroke-green-500"
-                  color="red"
+                      size={20}
-                  size={16}
+                      strokeWidth="2"
-                  strokeWidth="2"
+                    />
-                />
+                  ) : isFailed ? (
-              </button>
+                    <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)}
+                >
+                  <X
+                    color="red"
+                    size={16}
+                    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,16 +105,40 @@ 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>
-          <button
+          {isUploading ? (
-            className={'cursor-pointer p-2'}
+            <div className="p-2">
-            onClick={() => handleRemoveFile()}
+              {isUploaded ? (
-          >
+                <CircleCheckBig
-            <X
+                  className="stroke-green-500"
-              color="red"
+                  size={20}
-              size={16}
+                  strokeWidth="2"
-              strokeWidth="2"
+                />
-            />
+              ) : isFailed ? (
-          </button>
+                <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()}
+            >
+              <X
+                color="red"
+                size={16}
+                strokeWidth="2"
+              />
+            </button>
+          )}
         </div>
       )}
       {isUploading ? (