201 lines
8.5 KiB
TypeScript
201 lines
8.5 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { FolderPlus, FilePenLine, Trash2, X, AlertTriangle } from 'lucide-react';
|
|
|
|
// --- Create Folder Modal ---
|
|
interface CreateFolderModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
onConfirm: (name: string) => void;
|
|
}
|
|
|
|
export const CreateFolderModal: React.FC<CreateFolderModalProps> = ({ isOpen, onClose, onConfirm }) => {
|
|
const [folderName, setFolderName] = useState('');
|
|
const [error, setError] = useState('');
|
|
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
setFolderName('');
|
|
setError('');
|
|
// Auto focus hack
|
|
setTimeout(() => document.getElementById('new-folder-input')?.focus(), 50);
|
|
|
|
const handleKeyDown = (e: KeyboardEvent) => {
|
|
if (e.key === 'Escape') onClose();
|
|
};
|
|
window.addEventListener('keydown', handleKeyDown);
|
|
return () => window.removeEventListener('keydown', handleKeyDown);
|
|
}
|
|
}, [isOpen, onClose]);
|
|
|
|
const handleConfirm = () => {
|
|
if (!folderName.trim()) {
|
|
setError('폴더 이름을 입력해주세요.');
|
|
return;
|
|
}
|
|
onConfirm(folderName);
|
|
};
|
|
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/20 backdrop-blur-sm p-4">
|
|
<div className="bg-white border border-slate-200 rounded-lg shadow-xl w-full max-w-sm animate-in fade-in zoom-in-95 duration-200">
|
|
<div className="p-3 border-b border-slate-100 flex justify-between items-center bg-slate-50 rounded-t-lg">
|
|
<h3 className="text-sm font-bold text-slate-800 flex items-center gap-2">
|
|
<FolderPlus size={16} className="text-blue-500" /> 디렉토리 생성
|
|
</h3>
|
|
<button onClick={onClose}><X size={16} className="text-slate-400 hover:text-slate-600" /></button>
|
|
</div>
|
|
<div className="p-4 space-y-4">
|
|
<div>
|
|
<label className="block text-xs text-slate-500 mb-1">새 디렉토리 이름:</label>
|
|
<input
|
|
id="new-folder-input"
|
|
type="text"
|
|
value={folderName}
|
|
onChange={(e) => { setFolderName(e.target.value); setError(''); }}
|
|
onKeyDown={(e) => e.key === 'Enter' && handleConfirm()}
|
|
className={`w-full bg-white border rounded px-3 py-2 text-sm text-slate-800 focus:outline-none ${error ? 'border-red-500 focus:border-red-500' : 'border-slate-300 focus:border-blue-500'}`}
|
|
/>
|
|
{error && <p className="text-xs text-red-500 mt-1">{error}</p>}
|
|
</div>
|
|
<div className="flex justify-end gap-2">
|
|
<button onClick={onClose} className="px-3 py-1.5 text-xs text-slate-600 hover:text-slate-900 bg-slate-100 hover:bg-slate-200 rounded">취소</button>
|
|
<button onClick={handleConfirm} className="px-3 py-1.5 text-xs bg-blue-600 hover:bg-blue-500 text-white rounded shadow-md shadow-blue-500/20">확인</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// --- Rename Modal ---
|
|
interface RenameModalProps {
|
|
isOpen: boolean;
|
|
currentName: string;
|
|
onClose: () => void;
|
|
onConfirm: (newName: string) => void;
|
|
}
|
|
|
|
export const RenameModal: React.FC<RenameModalProps> = ({ isOpen, currentName, onClose, onConfirm }) => {
|
|
const [newName, setNewName] = useState('');
|
|
const [error, setError] = useState('');
|
|
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
setNewName(currentName);
|
|
setError('');
|
|
setTimeout(() => document.getElementById('rename-input')?.focus(), 50);
|
|
|
|
const handleKeyDown = (e: KeyboardEvent) => {
|
|
if (e.key === 'Escape') onClose();
|
|
};
|
|
window.addEventListener('keydown', handleKeyDown);
|
|
return () => window.removeEventListener('keydown', handleKeyDown);
|
|
}
|
|
}, [isOpen, currentName, onClose]);
|
|
|
|
const handleConfirm = () => {
|
|
if (!newName.trim()) {
|
|
setError('새 이름을 입력해주세요.');
|
|
return;
|
|
}
|
|
if (newName.trim() === currentName) {
|
|
setError('변경된 내용이 없습니다.');
|
|
return;
|
|
}
|
|
onConfirm(newName);
|
|
};
|
|
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/20 backdrop-blur-sm p-4">
|
|
<div className="bg-white border border-slate-200 rounded-lg shadow-xl w-full max-w-sm animate-in fade-in zoom-in-95 duration-200">
|
|
<div className="p-3 border-b border-slate-100 flex justify-between items-center bg-slate-50 rounded-t-lg">
|
|
<h3 className="text-sm font-bold text-slate-800 flex items-center gap-2">
|
|
<FilePenLine size={16} className="text-yellow-500" /> 이름 변경/이동
|
|
</h3>
|
|
<button onClick={onClose}><X size={16} className="text-slate-400 hover:text-slate-600" /></button>
|
|
</div>
|
|
<div className="p-4 space-y-4">
|
|
<div>
|
|
<label className="block text-xs text-slate-500 mb-1">현재 이름:</label>
|
|
<div className="text-sm text-slate-600 bg-slate-50 p-2 rounded border border-slate-200 mb-3 select-all">{currentName}</div>
|
|
|
|
<label className="block text-xs text-slate-500 mb-1">새 이름:</label>
|
|
<input
|
|
id="rename-input"
|
|
type="text"
|
|
value={newName}
|
|
onChange={(e) => { setNewName(e.target.value); setError(''); }}
|
|
onKeyDown={(e) => e.key === 'Enter' && handleConfirm()}
|
|
className={`w-full bg-white border rounded px-3 py-2 text-sm text-slate-800 focus:outline-none ${error ? 'border-red-500 focus:border-red-500' : 'border-slate-300 focus:border-blue-500'}`}
|
|
/>
|
|
{error && <p className="text-xs text-red-500 mt-1">{error}</p>}
|
|
</div>
|
|
<div className="flex justify-end gap-2">
|
|
<button onClick={onClose} className="px-3 py-1.5 text-xs text-slate-600 hover:text-slate-900 bg-slate-100 hover:bg-slate-200 rounded">취소</button>
|
|
<button onClick={handleConfirm} className="px-3 py-1.5 text-xs bg-blue-600 hover:bg-blue-500 text-white rounded shadow-md shadow-blue-500/20">확인</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// --- Delete Modal ---
|
|
interface DeleteModalProps {
|
|
isOpen: boolean;
|
|
fileCount: number;
|
|
fileNames: string[];
|
|
onClose: () => void;
|
|
onConfirm: () => void;
|
|
}
|
|
|
|
export const DeleteModal: React.FC<DeleteModalProps> = ({ isOpen, fileCount, fileNames, onClose, onConfirm }) => {
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
const handleKeyDown = (e: KeyboardEvent) => {
|
|
if (e.key === 'Escape') onClose();
|
|
};
|
|
window.addEventListener('keydown', handleKeyDown);
|
|
return () => window.removeEventListener('keydown', handleKeyDown);
|
|
}
|
|
}, [isOpen, onClose]);
|
|
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/20 backdrop-blur-sm p-4">
|
|
<div className="bg-white border border-slate-200 rounded-lg shadow-xl w-full max-w-sm animate-in fade-in zoom-in-95 duration-200">
|
|
<div className="p-3 border-b border-slate-100 flex justify-between items-center bg-slate-50 rounded-t-lg">
|
|
<h3 className="text-sm font-bold text-slate-800 flex items-center gap-2">
|
|
<Trash2 size={16} className="text-red-500" /> 파일 삭제
|
|
</h3>
|
|
<button onClick={onClose}><X size={16} className="text-slate-400 hover:text-slate-600" /></button>
|
|
</div>
|
|
<div className="p-4 space-y-4">
|
|
<div className="flex gap-3">
|
|
<div className="bg-red-50 p-2 rounded h-fit shrink-0">
|
|
<AlertTriangle size={24} className="text-red-500" />
|
|
</div>
|
|
<div className="text-sm text-slate-600 min-w-0">
|
|
<p className="mb-2">정말로 다음 {fileCount}개 항목을 삭제하시겠습니까?</p>
|
|
<ul className="list-disc list-inside text-xs text-slate-500 max-h-32 overflow-y-auto bg-slate-50 p-2 rounded border border-slate-200 mb-2">
|
|
{fileNames.map((name, i) => (
|
|
<li key={i} className="truncate">{name}</li>
|
|
))}
|
|
</ul>
|
|
<p className="text-xs text-red-500 font-semibold">이 작업은 되돌릴 수 없습니다.</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex justify-end gap-2">
|
|
<button onClick={onClose} className="px-3 py-1.5 text-xs text-slate-600 hover:text-slate-900 bg-slate-100 hover:bg-slate-200 rounded">취소</button>
|
|
<button onClick={onConfirm} className="px-3 py-1.5 text-xs bg-red-600 hover:bg-red-500 text-white rounded shadow-md shadow-red-500/20">삭제</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}; |