Feat : 추가된 이미지업로드모달 수정- S11P21S002-69
This commit is contained in:
정현조
parent
16b72a3f08
commit
9b1b3771f7
@ -1,3 +1,6 @@
|
||||
import * as React from 'react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface ButtonProps {
|
||||
isActive: boolean;
|
||||
text: string;
|
||||
@ -10,7 +13,12 @@ export default function Button({ isActive, text, onClick, progress = 0 }: Button
|
||||
|
||||
return (
|
||||
<button
|
||||
className={`relative flex h-12 w-full items-center justify-center rounded-lg border-2 px-5 py-2.5 transition-all duration-300 ${isActive ? 'cursor-pointer border-primary bg-primary text-white' : 'cursor-not-allowed border-gray-200 bg-gray-100 text-gray-500'}`}
|
||||
className={cn(
|
||||
'relative flex h-12 w-full items-center justify-center rounded-lg border-2 px-5 py-2.5 transition-all duration-300',
|
||||
isActive
|
||||
? 'cursor-pointer border-primary bg-primary text-white'
|
||||
: 'cursor-not-allowed border-gray-200 bg-gray-100 text-gray-500'
|
||||
)}
|
||||
disabled={!isActive}
|
||||
onClick={isActive ? onClick : undefined}
|
||||
style={{ '--progress-width': `${progress}%` } as React.CSSProperties}
|
||||
|
||||
@ -1,20 +1,28 @@
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface CloseButtonProps {
|
||||
color?: string;
|
||||
onClick?: () => void;
|
||||
className?: string; // 추가된 prop
|
||||
className?: string;
|
||||
size?: number;
|
||||
}
|
||||
|
||||
export default function CloseButton({ color = 'currentColor', onClick, className }: CloseButtonProps): JSX.Element {
|
||||
export default function CloseButton({
|
||||
color = 'currentColor',
|
||||
onClick,
|
||||
className,
|
||||
size = 32,
|
||||
}: CloseButtonProps): JSX.Element {
|
||||
return (
|
||||
<button
|
||||
className={`cursor-pointer border-none bg-none p-1 ${className}`}
|
||||
className={cn('cursor-pointer border-none bg-none p-1', className)}
|
||||
onClick={onClick}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox={`0 0 ${size} ${size}`}
|
||||
fill="none"
|
||||
stroke={color}
|
||||
strokeWidth="2"
|
||||
@ -22,16 +30,16 @@ export default function CloseButton({ color = 'currentColor', onClick, className
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<line
|
||||
x1="18"
|
||||
y1="6"
|
||||
x2="6"
|
||||
y2="18"
|
||||
x1={size * 0.75}
|
||||
y1={size * 0.25}
|
||||
x2={size * 0.25}
|
||||
y2={size * 0.75}
|
||||
></line>
|
||||
<line
|
||||
x1="6"
|
||||
y1="6"
|
||||
x2="18"
|
||||
y2="18"
|
||||
x1={size * 0.25}
|
||||
y1={size * 0.25}
|
||||
x2={size * 0.75}
|
||||
y2={size * 0.75}
|
||||
></line>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import { cn } from '@/lib/utils';
|
||||
import CloseButton from './CloseButton';
|
||||
|
||||
interface FileListProps {
|
||||
@ -12,11 +13,12 @@ export default function FileList({ files, onRemoveFile }: FileListProps): JSX.El
|
||||
{files.map((file, index) => (
|
||||
<li
|
||||
key={index}
|
||||
className="flex items-center justify-between px-4 py-2"
|
||||
className={cn('flex items-center justify-between px-4 py-2')}
|
||||
>
|
||||
<span className="truncate">{file.name}</span>
|
||||
<CloseButton
|
||||
color="red"
|
||||
size={16}
|
||||
onClick={() => onRemoveFile(index)}
|
||||
/>
|
||||
</li>
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import '@/index.css';
|
||||
import ImageUploadModal from './index';
|
||||
import { useState } from 'react';
|
||||
import ImageUploadModal from './index';
|
||||
|
||||
export default {
|
||||
title: 'Modal/ImageUploadModal',
|
||||
@ -24,57 +23,3 @@ export const Default = () => {
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
export const WithFiles = () => {
|
||||
const [isModalOpen, setIsModalOpen] = useState(true);
|
||||
|
||||
const handleClose = () => {
|
||||
setIsModalOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
isModalOpen && (
|
||||
<ImageUploadModal
|
||||
title="파일 업로드"
|
||||
buttonText="업로드"
|
||||
onClose={handleClose}
|
||||
/>
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
export const Uploading = () => {
|
||||
const [isModalOpen, setIsModalOpen] = useState(true);
|
||||
|
||||
const handleClose = () => {
|
||||
setIsModalOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
isModalOpen && (
|
||||
<ImageUploadModal
|
||||
title="파일 업로드"
|
||||
buttonText="업로드 중..."
|
||||
onClose={handleClose}
|
||||
/>
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
export const UploadComplete = () => {
|
||||
const [isModalOpen, setIsModalOpen] = useState(true);
|
||||
|
||||
const handleClose = () => {
|
||||
setIsModalOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
isModalOpen && (
|
||||
<ImageUploadModal
|
||||
title="파일 업로드 완료"
|
||||
buttonText="다른 파일 업로드"
|
||||
onClose={handleClose}
|
||||
/>
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
import * as React from 'react';
|
||||
import { useState } from 'react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import CloseButton from './CloseButton';
|
||||
import Button from './Button';
|
||||
import FileList from './FileList';
|
||||
@ -64,7 +66,7 @@ export default function ImageUploadModal({ title, buttonText, onClose }: ImageUp
|
||||
|
||||
return (
|
||||
<div className="mx-auto w-[610px]">
|
||||
<div className="relative flex flex-col gap-5 rounded-2xl border border-gray-200 bg-white p-5 shadow-md">
|
||||
<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} />
|
||||
@ -72,14 +74,16 @@ export default function ImageUploadModal({ title, buttonText, onClose }: ImageUp
|
||||
<div className="flex flex-col gap-5">
|
||||
<div className="flex justify-center">
|
||||
<div
|
||||
className="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"
|
||||
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 h-full w-full cursor-pointer opacity-0"
|
||||
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">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user