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

Design: ImageUploadModal 디자인 일관성 강화 - S11P21S002-69

Browse Source
This commit is contained in:
정현조 2024-08-28 09:56:27 +09:00
parent e30d88c2be
commit e746491e44
1 changed files with 46 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
frontend/src/components/ImageUploadModal/index.tsx
View File

@ -65,51 +65,54 @@ export default function ImageUploadModal({ title, buttonText, onClose }: ImageUp
};
return (
<div className="mx-auto w-[610px]">
<div className={cn('relative flex flex-col gap-5 rounded-2xl border border-gray-200 bg-white p-5 shadow-md')}>
<div className="flex items-center justify-between">
<span className="font-sans text-2xl font-bold leading-tight text-gray-1000">{title}</span>
<CloseButton onClick={handleClose} />
</div>
<div className="flex flex-col gap-5">
<div className="flex justify-center">
<div
className={cn(
'relative flex h-44 w-full max-w-[570px] cursor-pointer items-center justify-center rounded-lg border-2 border-dashed border-primary bg-gray-100 p-5 text-center'
)}
onDrop={handleDrop}
onDragOver={handleDragOver}
>
<input
type="file"
multiple
className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
onChange={handleFilesUpload}
/>
<p className="font-sans text-base font-normal leading-relaxed text-gray-500">
파일을 업로드하려면 클릭하거나
<br />
드래그하여 파일을 여기에 놓으세요
</p>
</div>
</div>
{files.length > 0 && (
<div>
<FileList
files={files}
onRemoveFile={(index) => setFiles(files.filter((_, i) => i !== index))}
/>
</div>
)}
</div>
<div className="flex w-[610px] flex-col gap-10 rounded-3xl border px-10 py-5 shadow-lg">
<header className="flex items-center justify-between">
<h1 className="small-title">{title}</h1>
<button
className="flex items-center justify-center w-8 h-8"
onClick={handleClose}
>
<CloseButton />
</button>
</header>
<div className="flex flex-col gap-5">
<div className="flex justify-center">
<Button
isActive={files.length > 0 && !isUploading}
text={isUploading ? `업로드 중... (${uploadProgress}%)` : buttonText}
onClick={handleUpload}
progress={uploadProgress}
/>
<div
className={cn(
'relative flex h-44 w-full max-w-[570px] cursor-pointer items-center justify-center rounded-lg border-2 border-dashed border-primary bg-gray-100 p-5 text-center'
)}
onDrop={handleDrop}
onDragOver={handleDragOver}
>
<input
type="file"
multiple
className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
onChange={handleFilesUpload}
/>
<p className="font-sans text-base font-normal leading-relaxed text-gray-500">
파일을 업로드하려면 클릭하거나
<br />
드래그하여 파일을 여기에 놓으세요
</p>
</div>
</div>
{files.length > 0 && (
<div>
<FileList
files={files}
onRemoveFile={(index) => setFiles(files.filter((_, i) => i !== index))}
/>
</div>
)}
</div>
<div className="flex justify-center">
<Button
isActive={files.length > 0 && !isUploading}
text={isUploading ? `업로드 중... (${uploadProgress}%)` : buttonText}
onClick={handleUpload}
progress={uploadProgress}
/>
</div>
</div>
);