75 lines
2.5 KiB
TypeScript
75 lines
2.5 KiB
TypeScript
import { createPortal } from 'react-dom';
|
|
import { X, Trash2 } from 'lucide-react';
|
|
import { NoteItem } from '@/types';
|
|
|
|
interface NoteViewModalProps {
|
|
isOpen: boolean;
|
|
note: NoteItem | null;
|
|
onClose: () => void;
|
|
onEdit: (note: NoteItem) => void;
|
|
onDelete?: (note: NoteItem) => void;
|
|
}
|
|
|
|
export function NoteViewModal({ isOpen, note, onClose, onEdit, onDelete }: NoteViewModalProps) {
|
|
if (!isOpen || !note) return null;
|
|
|
|
const handleDelete = () => {
|
|
if (window.confirm('정말 삭제하시겠습니까?')) {
|
|
onDelete?.(note);
|
|
}
|
|
};
|
|
|
|
return createPortal(
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm">
|
|
<div className="dialog-container rounded-2xl w-full max-w-2xl max-h-[80vh] overflow-hidden transition-all duration-300">
|
|
{/* 헤더 */}
|
|
<div className="dialog-header flex items-center justify-between px-6 py-4">
|
|
<h2 className="dialog-title">{note.title || '제목 없음'}</h2>
|
|
<button
|
|
onClick={onClose}
|
|
className="text-text-secondary hover:text-text-primary transition-colors"
|
|
>
|
|
<X className="w-6 h-6" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* 본문 - 메모 내용만 표시 */}
|
|
<div className="overflow-y-auto max-h-[calc(80vh-140px)] p-6">
|
|
<div className="bg-white/10 border border-white/20 rounded-lg p-4 text-white whitespace-pre-wrap min-h-[300px]">
|
|
{note.description || '내용이 없습니다.'}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 하단 버튼 */}
|
|
<div className="dialog-footer flex items-center justify-between px-6 py-4">
|
|
<button
|
|
onClick={handleDelete}
|
|
className="px-4 py-2 rounded-lg bg-danger-500 hover:bg-danger-600 text-white transition-colors flex items-center gap-2"
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
삭제
|
|
</button>
|
|
<div className="flex items-center gap-3">
|
|
<button
|
|
onClick={onClose}
|
|
className="px-4 py-2 rounded-lg bg-white/10 hover:bg-white/20 text-white transition-colors"
|
|
>
|
|
닫기
|
|
</button>
|
|
<button
|
|
onClick={() => {
|
|
onClose();
|
|
onEdit(note);
|
|
}}
|
|
className="px-4 py-2 bg-success-500 hover:bg-success-600 text-white rounded-lg transition-colors"
|
|
>
|
|
편집
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>,
|
|
document.body
|
|
);
|
|
}
|