Add Dashboard todo edit/delete/complete features and Note view count tracking
This commit is contained in:
backuppc
283
Project/frontend/src/components/note/NoteEditModal.tsx
Normal file
283
Project/frontend/src/components/note/NoteEditModal.tsx
Normal file
@@ -0,0 +1,283 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { X, Save, User, Calendar } from 'lucide-react';
|
||||
import { NoteItem } from '@/types';
|
||||
import { comms } from '@/communication';
|
||||
|
||||
interface NoteEditModalProps {
|
||||
isOpen: boolean;
|
||||
editingItem: NoteItem | null;
|
||||
processing: boolean;
|
||||
onClose: () => void;
|
||||
onSave: (formData: {
|
||||
pdate: string;
|
||||
title: string;
|
||||
uid: string;
|
||||
description: string;
|
||||
share: boolean;
|
||||
guid: string;
|
||||
}) => void;
|
||||
initialEditMode?: boolean;
|
||||
}
|
||||
|
||||
export function NoteEditModal({
|
||||
isOpen,
|
||||
editingItem,
|
||||
processing,
|
||||
onClose,
|
||||
onSave,
|
||||
initialEditMode = false,
|
||||
}: NoteEditModalProps) {
|
||||
const [pdate, setPdate] = useState('');
|
||||
const [title, setTitle] = useState('');
|
||||
const [uid, setUid] = useState('');
|
||||
const [description, setDescription] = useState('');
|
||||
const [share, setShare] = useState(false);
|
||||
const [guid, setGuid] = useState('');
|
||||
const [isEditMode, setIsEditMode] = useState(false);
|
||||
|
||||
// 현재 로그인 사용자 정보 로드
|
||||
const [currentUserId, setCurrentUserId] = useState('');
|
||||
const [currentUserLevel, setCurrentUserLevel] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
const loadUserInfo = async () => {
|
||||
try {
|
||||
const loginStatus = await comms.checkLoginStatus();
|
||||
if (loginStatus.Success && loginStatus.IsLoggedIn && loginStatus.User) {
|
||||
setCurrentUserId(loginStatus.User.Id);
|
||||
setCurrentUserLevel(loginStatus.User.Level);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('로그인 정보 로드 오류:', error);
|
||||
}
|
||||
};
|
||||
loadUserInfo();
|
||||
}, []);
|
||||
|
||||
// 모달이 열릴 때 폼 데이터 초기화
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
if (editingItem) {
|
||||
// 기존 메모
|
||||
setPdate(editingItem.pdate ? editingItem.pdate.split('T')[0] : '');
|
||||
setTitle(editingItem.title || '');
|
||||
setUid(editingItem.uid || currentUserId);
|
||||
setDescription(editingItem.description || '');
|
||||
setShare(editingItem.share || false);
|
||||
setGuid(editingItem.guid || '');
|
||||
setIsEditMode(initialEditMode);
|
||||
} else {
|
||||
// 신규 메모 - 편집 모드로 시작
|
||||
setPdate(new Date().toISOString().split('T')[0]);
|
||||
setTitle('');
|
||||
setUid(currentUserId);
|
||||
setDescription('');
|
||||
setShare(false);
|
||||
setGuid('');
|
||||
setIsEditMode(true);
|
||||
}
|
||||
}
|
||||
}, [isOpen, editingItem, currentUserId, initialEditMode]);
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
onSave({ pdate, title, uid, description, share, guid });
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
// 권한 체크: 자신의 메모이거나 관리자만 수정 가능
|
||||
const canEdit = !editingItem || editingItem.uid === currentUserId || currentUserLevel >= 5;
|
||||
const canChangeUser = currentUserLevel >= 5;
|
||||
const canChangeShare = !editingItem || editingItem.uid === currentUserId;
|
||||
|
||||
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-5xl max-h-[90vh] 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">
|
||||
{!editingItem ? '새 메모 작성' : '메모 편집'}
|
||||
</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-white/50 hover:text-white transition-colors"
|
||||
>
|
||||
<X className="w-6 h-6" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 본문 - 좌우 레이아웃 */}
|
||||
<form onSubmit={handleSubmit} className="overflow-y-auto max-h-[calc(90vh-140px)]">
|
||||
<div className="flex gap-6 p-6">
|
||||
{/* 좌측 - 정보 영역 */}
|
||||
<div className="w-64 flex-shrink-0 space-y-4">
|
||||
{/* 날짜 */}
|
||||
<div>
|
||||
<label className="flex items-center text-sm font-medium text-white/70 mb-2">
|
||||
<Calendar className="w-4 h-4 mr-2" />
|
||||
날짜 {isEditMode && '*'}
|
||||
</label>
|
||||
{isEditMode ? (
|
||||
<input
|
||||
type="date"
|
||||
value={pdate}
|
||||
onChange={(e) => setPdate(e.target.value)}
|
||||
required
|
||||
disabled={!canEdit}
|
||||
className="w-full h-10 bg-white/20 border border-white/30 rounded-lg px-3 text-white text-sm focus:outline-none focus:ring-2 focus:ring-primary-400 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
/>
|
||||
) : (
|
||||
<div className="text-white text-sm">{pdate}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 작성자 */}
|
||||
<div>
|
||||
<label className="flex items-center text-sm font-medium text-white/70 mb-2">
|
||||
<User className="w-4 h-4 mr-2" />
|
||||
작성자 {isEditMode && '*'}
|
||||
</label>
|
||||
{isEditMode ? (
|
||||
<>
|
||||
<input
|
||||
type="text"
|
||||
value={uid}
|
||||
onChange={(e) => setUid(e.target.value)}
|
||||
required
|
||||
disabled={!canEdit || !canChangeUser}
|
||||
className="w-full h-10 bg-white/20 border border-white/30 rounded-lg px-3 text-white text-sm focus:outline-none focus:ring-2 focus:ring-primary-400 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
placeholder="사용자 ID"
|
||||
/>
|
||||
{!canChangeUser && (
|
||||
<p className="text-xs text-white/50 mt-1">
|
||||
관리자만 변경 가능
|
||||
</p>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<div className="text-white text-sm">{uid}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 공유 여부 */}
|
||||
<div>
|
||||
<label className="text-sm font-medium text-white/70 mb-2 block">
|
||||
공유 설정
|
||||
</label>
|
||||
{isEditMode ? (
|
||||
<>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="note-share"
|
||||
checked={share}
|
||||
onChange={(e) => setShare(e.target.checked)}
|
||||
disabled={!canEdit || !canChangeShare}
|
||||
className="w-4 h-4 bg-white/20 border border-white/30 rounded focus:ring-2 focus:ring-primary-400 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
/>
|
||||
<label htmlFor="note-share" className="text-sm text-white/70 cursor-pointer">
|
||||
공유
|
||||
</label>
|
||||
</div>
|
||||
{!canChangeShare && (
|
||||
<p className="text-xs text-white/50 mt-1">
|
||||
본인 메모만 변경 가능
|
||||
</p>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<div className="text-white text-sm">{share ? '공유됨' : '비공유'}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{!canEdit && isEditMode && (
|
||||
<div className="bg-red-500/20 border border-red-500/50 rounded-lg p-3 text-red-300 text-xs">
|
||||
타인의 자료는 수정할 수 없습니다.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 우측 - 제목 및 내용 영역 */}
|
||||
<div className="flex-1 space-y-4">
|
||||
{/* 제목 */}
|
||||
<div>
|
||||
<label className="text-sm font-medium text-white/70 mb-2 block">
|
||||
제목 {isEditMode && '*'}
|
||||
</label>
|
||||
{isEditMode ? (
|
||||
<input
|
||||
type="text"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
required
|
||||
disabled={!canEdit}
|
||||
className="w-full h-10 bg-white/20 border border-white/30 rounded-lg px-3 text-white focus:outline-none focus:ring-2 focus:ring-primary-400 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
placeholder="메모 제목을 입력하세요"
|
||||
/>
|
||||
) : (
|
||||
<div className="text-white text-lg font-semibold">{title}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 내용 */}
|
||||
<div className="flex-1">
|
||||
<label className="text-sm font-medium text-white/70 mb-2 block">
|
||||
내용
|
||||
</label>
|
||||
{isEditMode ? (
|
||||
<textarea
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
disabled={!canEdit}
|
||||
rows={18}
|
||||
className="w-full bg-white/20 border border-white/30 rounded-lg p-3 text-white focus:outline-none focus:ring-2 focus:ring-primary-400 disabled:opacity-50 disabled:cursor-not-allowed resize-none"
|
||||
placeholder="메모 내용을 입력하세요"
|
||||
/>
|
||||
) : (
|
||||
<div className="bg-white/10 border border-white/20 rounded-lg p-4 text-white whitespace-pre-wrap min-h-[400px]">
|
||||
{description || '내용이 없습니다.'}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{/* 하단 버튼 */}
|
||||
<div className="flex items-center justify-end gap-3 px-6 py-4 border-t border-white/10 bg-white/5">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="px-4 py-2 rounded-lg bg-white/10 hover:bg-white/20 text-white transition-colors"
|
||||
disabled={processing}
|
||||
>
|
||||
닫기
|
||||
</button>
|
||||
{isEditMode && canEdit && (
|
||||
<button
|
||||
type="submit"
|
||||
onClick={handleSubmit}
|
||||
disabled={processing}
|
||||
className="px-4 py-2 rounded-lg bg-primary-500 hover:bg-primary-600 text-white transition-colors flex items-center disabled:opacity-50"
|
||||
>
|
||||
{processing ? (
|
||||
<>
|
||||
<div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin mr-2"></div>
|
||||
처리 중...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Save className="w-4 h-4 mr-2" />
|
||||
저장
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
document.body
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user