jhynsoo/worlabel
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix: 이미지 업로드 시작 후 이미지 삭제 버튼 대신 이미지 상태 아이콘 보이도록 변경

Browse Source
This commit is contained in:
홍창기 2024-09-25 09:55:06 +09:00
parent a8637224b0
commit 50d73a1246
3 changed files with 105 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
frontend/src/components/ImageUploadFileModal/ImageUploadFileForm.tsx
View File

@ -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({
@ -122,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
className={'cursor-pointer p-2'}
onClick={() => handleRemoveFile(index)}
>
<X
color="red"
size={16}
strokeWidth="2"
/>
</button>
{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)}
>
<X
color="red"
size={16}
strokeWidth="2"
/>
</button>
)}
</li>
))}
</ul>

46
frontend/src/components/ImageUploadFolderModal/ImageUploadFolderForm.tsx
View File

@ -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 }) {
@ -107,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
className={'cursor-pointer p-2'}
onClick={() => handleRemoveFile(index)}
>
<X
color="red"
size={16}
strokeWidth="2"
/>
</button>
{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)}
>
<X
color="red"
size={16}
strokeWidth="2"
/>
</button>
)}
</li>
))}
</ul>

46
frontend/src/components/ImageUploadZipModal/ImageUploadZipForm.tsx
View File

@ -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 }) {
@ -105,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
className={'cursor-pointer p-2'}
onClick={() => handleRemoveFile()}
>
<X
color="red"
size={16}
strokeWidth="2"
/>
</button>
{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()}
>
<X
color="red"
size={16}
strokeWidth="2"
/>
</button>
)}
</div>
)}
{isUploading ? (