Add Dashboard todo edit/delete/complete features and Note view count tracking

2025-12-02 15:03:51 +09:00
parent 6a2485176b
commit e82f86191a
25 changed files with 3512 additions and 324 deletions
--- a/Project/frontend/src/components/note/NoteViewModal.tsx
+++ b/Project/frontend/src/components/note/NoteViewModal.tsx
@@ -0,0 +1,74 @@
+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="bg-gray-900 rounded-2xl shadow-2xl w-full max-w-2xl max-h-[80vh] overflow-hidden border border-white/10">
+        {/* 헤더 */}
+        <div className="flex items-center justify-between px-6 py-4 border-b border-white/10">
+          <h2 className="text-xl font-bold text-white">{note.title || '제목 없음'}</h2>
+          <button
+            onClick={onClose}
+            className="text-white/50 hover:text-white 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="flex items-center justify-between px-6 py-4 border-t border-white/10 bg-white/5">
+          <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
+  );
+}