RyuWonJun/eene_dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update task schema with show toggles and keywords

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
EENE Dashboard
2026-06-01 17:56:18 +09:00
parent 0a1cb3efe7
commit aeb2f29d4d
7 changed files with 141 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
backend/prisma/schema.prisma
View File

@@ -53,6 +53,10 @@ model Task {
startDate DateTime? startDate DateTime?
dueDate DateTime? dueDate DateTime?
showDate Boolean @default(true) showDate Boolean @default(true)
showDescription Boolean @default(true)
showStatus Boolean @default(true)
showIssue Boolean @default(true)
keywords String?
creatorId String creatorId String
assigneeId String? assigneeId String?
createdAt DateTime @default(now()) createdAt DateTime @default(now())

14
backend/src/routes/tasks.ts
View File

@@ -56,7 +56,8 @@ router.get('/:id', async (req, res, next) => {
router.post('/', async (req, res, next) => { router.post('/', async (req, res, next) => {
try { try {
const { title, description, status, priority, quarter, category, const { title, description, status, priority, quarter, category,
section, tag, taskType, progress, issueNote, startDate, dueDate, assigneeId, showDate } = section, tag, taskType, progress, issueNote, startDate, dueDate, assigneeId, showDate,
showDescription, showStatus, showIssue, keywords } =
req.body as Record<string, any>; req.body as Record<string, any>;
if (!title || !quarter) { if (!title || !quarter) {
@@ -79,6 +80,10 @@ router.post('/', async (req, res, next) => {
startDate: startDate ? new Date(startDate) : undefined, startDate: startDate ? new Date(startDate) : undefined,
dueDate: dueDate ? new Date(dueDate) : undefined, dueDate: dueDate ? new Date(dueDate) : undefined,
showDate: showDate !== undefined ? showDate === 'true' || showDate === true : true, showDate: showDate !== undefined ? showDate === 'true' || showDate === true : true,
showDescription: showDescription !== undefined ? showDescription === 'true' || showDescription === true : true,
showStatus: showStatus !== undefined ? showStatus === 'true' || showStatus === true : true,
showIssue: showIssue !== undefined ? showIssue === 'true' || showIssue === true : true,
keywords: keywords || null,
assigneeId: assigneeId || null, assigneeId: assigneeId || null,
creatorId: (req.body as Record<string, string>).creatorId ?? 'system', creatorId: (req.body as Record<string, string>).creatorId ?? 'system',
}, },
@@ -97,7 +102,8 @@ router.patch('/:id', async (req, res, next) => {
if (!existing) throw new AppError(404, '업무를 찾을 수 없습니다.'); if (!existing) throw new AppError(404, '업무를 찾을 수 없습니다.');
const { title, description, status, priority, quarter, category, const { title, description, status, priority, quarter, category,
section, tag, taskType, progress, issueNote, startDate, dueDate, assigneeId, showDate } = section, tag, taskType, progress, issueNote, startDate, dueDate, assigneeId, showDate,
showDescription, showStatus, showIssue, keywords } =
req.body as Record<string, any>; req.body as Record<string, any>;
const task = await prisma.task.update({ const task = await prisma.task.update({
@@ -118,6 +124,10 @@ router.patch('/:id', async (req, res, next) => {
...(dueDate !== undefined && { dueDate: dueDate ? new Date(dueDate) : null }), ...(dueDate !== undefined && { dueDate: dueDate ? new Date(dueDate) : null }),
...(assigneeId !== undefined && { assigneeId: assigneeId || null }), ...(assigneeId !== undefined && { assigneeId: assigneeId || null }),
...(showDate !== undefined && { showDate: showDate === true || showDate === 'true' }), ...(showDate !== undefined && { showDate: showDate === true || showDate === 'true' }),
...(showDescription !== undefined && { showDescription: showDescription === true || showDescription === 'true' }),
...(showStatus !== undefined && { showStatus: showStatus === true || showStatus === 'true' }),
...(showIssue !== undefined && { showIssue: showIssue === true || showIssue === 'true' }),
...(keywords !== undefined && { keywords: keywords || null }),
}, },
}); });

125
frontend/src/components/common/TaskModal.tsx
View File

@@ -2,8 +2,6 @@ import { useState } from 'react';
import { createPortal } from 'react-dom'; import { createPortal } from 'react-dom';
import type { Task } from '../../types'; import type { Task } from '../../types';
const TAG_OPTIONS = ['Growth', 'Policy', 'Performance', 'Culture', 'Asset', 'Space', 'Safety', 'Environment'];
const STATUS_OPTIONS = [ const STATUS_OPTIONS = [
{ value: 'TODO', label: '대기' }, { value: 'TODO', label: '대기' },
{ value: 'IN_PROGRESS', label: '진행' }, { value: 'IN_PROGRESS', label: '진행' },
@@ -24,6 +22,10 @@ export interface TaskFormData {
startDate: string; startDate: string;
dueDate: string; dueDate: string;
showDate: boolean; showDate: boolean;
showDescription: boolean;
showStatus: boolean;
showIssue: boolean;
keywords: string;
} }
interface TaskModalProps { interface TaskModalProps {
@@ -55,6 +57,10 @@ export function TaskModal({ mode, task, defaultSection = 'HR', defaultQuarter =
startDate: toDateInput(task?.startDate), startDate: toDateInput(task?.startDate),
dueDate: toDateInput(task?.dueDate), dueDate: toDateInput(task?.dueDate),
showDate: task?.showDate ?? true, showDate: task?.showDate ?? true,
showDescription: task?.showDescription ?? true,
showStatus: task?.showStatus ?? true,
showIssue: task?.showIssue ?? true,
keywords: task?.keywords ?? '',
}); });
const set = <K extends keyof TaskFormData>(field: K, value: TaskFormData[K]) => const set = <K extends keyof TaskFormData>(field: K, value: TaskFormData[K]) =>
@@ -106,7 +112,7 @@ export function TaskModal({ mode, task, defaultSection = 'HR', defaultQuarter =
/> />
</div> </div>
{/* 섹션 + 태그 */} {/* 섹션 + 업무유형 */}
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3">
<div> <div>
<label className="block text-sm font-bold text-gray-500 mb-1.5">섹션</label> <label className="block text-sm font-bold text-gray-500 mb-1.5">섹션</label>
@@ -123,23 +129,6 @@ export function TaskModal({ mode, task, defaultSection = 'HR', defaultQuarter =
))} ))}
</select> </select>
</div> </div>
<div>
<label className="block text-sm font-bold text-gray-500 mb-1.5">태그</label>
<select
value={form.tag}
onChange={(e) => set('tag', e.target.value)}
className="w-full border border-gray-200 rounded-xl px-4 py-2.5 outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-100 transition bg-white"
>
<option value="">선택 없음</option>
{TAG_OPTIONS.map((t) => (
<option key={t} value={t}>{t}</option>
))}
</select>
</div>
</div>
{/* 업무유형 + 상태 */}
<div className="grid grid-cols-2 gap-3">
<div> <div>
<label className="block text-sm font-bold text-gray-500 mb-1.5">업무 유형</label> <label className="block text-sm font-bold text-gray-500 mb-1.5">업무 유형</label>
<select <select
@@ -151,8 +140,23 @@ export function TaskModal({ mode, task, defaultSection = 'HR', defaultQuarter =
<option value="프로젝트">프로젝트</option> <option value="프로젝트">프로젝트</option>
</select> </select>
</div> </div>
</div>
{/* 상태 + 진행률 */}
<div className="grid grid-cols-2 gap-3">
<div> <div>
<label className="block text-sm font-bold text-gray-500 mb-1.5">상태</label> <div className="flex items-center justify-between mb-1.5">
<label className="text-sm font-bold text-gray-500">상태</label>
<label className="flex items-center gap-1.5 cursor-pointer select-none">
<input
type="checkbox"
checked={form.showStatus}
onChange={(e) => set('showStatus', e.target.checked)}
className="w-4 h-4 accent-blue-500 cursor-pointer"
/>
<span className="text-xs font-semibold text-gray-400">카드 표시</span>
</label>
</div>
<select <select
value={form.status} value={form.status}
onChange={(e) => set('status', e.target.value)} onChange={(e) => set('status', e.target.value)}
@@ -163,28 +167,20 @@ export function TaskModal({ mode, task, defaultSection = 'HR', defaultQuarter =
))} ))}
</select> </select>
</div> </div>
</div> <div>
<label className="block text-sm font-bold text-gray-500 mb-1.5">
{/* 진행률 */} 진행률
<div> <span className="ml-2 font-black text-gray-800">{form.progress}%</span>
<label className="block text-sm font-bold text-gray-500 mb-1.5"> </label>
진행률 <div className="flex items-center gap-3">
<span className="ml-2 font-black text-gray-800">{form.progress}%</span> <input
</label> type="range"
<div className="flex items-center gap-3"> min={0}
<input max={100}
type="range" step={5}
min={0} value={form.progress}
max={100} onChange={(e) => set('progress', Number(e.target.value))}
step={5} className="flex-1 accent-blue-500"
value={form.progress}
onChange={(e) => set('progress', Number(e.target.value))}
className="flex-1 accent-blue-500"
/>
<div className="w-24 h-3 bg-gray-100 rounded-full overflow-hidden">
<div
className={`h-3 ${progressColor} rounded-full transition-all`}
style={{ width: `${form.progress}%` }}
/> />
</div> </div>
</div> </div>
@@ -192,13 +188,35 @@ export function TaskModal({ mode, task, defaultSection = 'HR', defaultQuarter =
{/* 내용 */} {/* 내용 */}
<div> <div>
<label className="block text-sm font-bold text-gray-500 mb-1.5">내용</label> <div className="flex items-center justify-between mb-1.5">
<label className="text-sm font-bold text-gray-500">내용</label>
<label className="flex items-center gap-1.5 cursor-pointer select-none">
<input
type="checkbox"
checked={form.showDescription}
onChange={(e) => set('showDescription', e.target.checked)}
className="w-4 h-4 accent-blue-500 cursor-pointer"
/>
<span className="text-xs font-semibold text-gray-400">카드 표시</span>
</label>
</div>
<textarea <textarea
value={form.description} value={form.description}
onChange={(e) => set('description', e.target.value)} onChange={(e) => set('description', e.target.value)}
rows={4} rows={3}
className="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-base outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-100 resize-none transition" className="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-base outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-100 resize-none transition"
placeholder="내용을 한 줄씩 입력하세요 (줄바꿈으로 구분)" placeholder="내용을 입력하세요"
/>
</div>
{/* 키워드 */}
<div>
<label className="block text-sm font-bold text-gray-500 mb-1.5">키워드 (콤마로 구분)</label>
<input
value={form.keywords}
onChange={(e) => set('keywords', e.target.value)}
className="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-base outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-100 transition"
placeholder="예: 인사정보, ERP, 입퇴사 분석"
/> />
</div> </div>
@@ -213,7 +231,7 @@ export function TaskModal({ mode, task, defaultSection = 'HR', defaultQuarter =
onChange={(e) => set('showDate', e.target.checked)} onChange={(e) => set('showDate', e.target.checked)}
className="w-4 h-4 accent-blue-500 cursor-pointer" className="w-4 h-4 accent-blue-500 cursor-pointer"
/> />
<span className="text-sm font-semibold text-gray-500">카드에 기간 표시</span> <span className="text-xs font-semibold text-gray-400">카드 표시</span>
</label> </label>
</div> </div>
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3">
@@ -234,7 +252,18 @@ export function TaskModal({ mode, task, defaultSection = 'HR', defaultQuarter =
{/* 이슈 메모 */} {/* 이슈 메모 */}
<div> <div>
<label className="block text-sm font-bold text-gray-500 mb-1.5">이슈 메모</label> <div className="flex items-center justify-between mb-1.5">
<label className="text-sm font-bold text-gray-500">이슈 메모</label>
<label className="flex items-center gap-1.5 cursor-pointer select-none">
<input
type="checkbox"
checked={form.showIssue}
onChange={(e) => set('showIssue', e.target.checked)}
className="w-4 h-4 accent-blue-500 cursor-pointer"
/>
<span className="text-xs font-semibold text-gray-400">카드 표시</span>
</label>
</div>
<input <input
value={form.issueNote} value={form.issueNote}
onChange={(e) => set('issueNote', e.target.value)} onChange={(e) => set('issueNote', e.target.value)}

6
frontend/src/components/dashboard/DepartmentColumn.tsx
View File

@@ -183,6 +183,7 @@ export function DepartmentColumn({ title: initialTitle, titleEn, subtitle: initi
const handleListContextMenu = (e: React.MouseEvent) => { const handleListContextMenu = (e: React.MouseEvent) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); // 카드에서 올라온 이벤트가 아니면 여기서 처리
setCtxMenu({ x: e.clientX, y: e.clientY, type: 'list' }); setCtxMenu({ x: e.clientX, y: e.clientY, type: 'list' });
}; };
@@ -194,7 +195,6 @@ export function DepartmentColumn({ title: initialTitle, titleEn, subtitle: initi
create.mutate({ create.mutate({
title: data.title, title: data.title,
section: data.section || null, section: data.section || null,
tag: data.tag || null,
taskType: data.taskType || null, taskType: data.taskType || null,
status: data.status as Task['status'], status: data.status as Task['status'],
progress: data.progress, progress: data.progress,
@@ -203,6 +203,10 @@ export function DepartmentColumn({ title: initialTitle, titleEn, subtitle: initi
startDate: data.startDate || null, startDate: data.startDate || null,
dueDate: data.dueDate || null, dueDate: data.dueDate || null,
showDate: data.showDate, showDate: data.showDate,
showDescription: data.showDescription,
showStatus: data.showStatus,
showIssue: data.showIssue,
keywords: data.keywords || null,
quarter: data.quarter, quarter: data.quarter,
priority: 'MEDIUM', priority: 'MEDIUM',
creatorId: 'system', creatorId: 'system',

34
frontend/src/components/dashboard/TaskCard.tsx
View File

@@ -110,6 +110,7 @@ export function TaskCard({
const handleContextMenu = (e: React.MouseEvent) => { const handleContextMenu = (e: React.MouseEvent) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
// 뷰포트 내 좌표 계산
setCtxMenu({ x: e.clientX, y: e.clientY }); setCtxMenu({ x: e.clientX, y: e.clientY });
}; };
@@ -117,7 +118,6 @@ export function TaskCard({
create.mutate({ create.mutate({
title: data.title, title: data.title,
section: data.section || null, section: data.section || null,
tag: data.tag || null,
taskType: data.taskType || null, taskType: data.taskType || null,
status: data.status, status: data.status,
progress: data.progress, progress: data.progress,
@@ -126,6 +126,10 @@ export function TaskCard({
startDate: data.startDate || null, startDate: data.startDate || null,
dueDate: data.dueDate || null, dueDate: data.dueDate || null,
showDate: data.showDate, showDate: data.showDate,
showDescription: data.showDescription,
showStatus: data.showStatus,
showIssue: data.showIssue,
keywords: data.keywords || null,
quarter: data.quarter, quarter: data.quarter,
priority: 'MEDIUM', priority: 'MEDIUM',
creatorId: 'system', creatorId: 'system',
@@ -137,7 +141,6 @@ export function TaskCard({
patch.mutate({ patch.mutate({
title: data.title, title: data.title,
section: data.section || null, section: data.section || null,
tag: data.tag || null,
taskType: data.taskType || null, taskType: data.taskType || null,
status: data.status, status: data.status,
progress: data.progress, progress: data.progress,
@@ -146,6 +149,10 @@ export function TaskCard({
startDate: data.startDate || null, startDate: data.startDate || null,
dueDate: data.dueDate || null, dueDate: data.dueDate || null,
showDate: data.showDate, showDate: data.showDate,
showDescription: data.showDescription,
showStatus: data.showStatus,
showIssue: data.showIssue,
keywords: data.keywords || null,
}); });
setModalMode(null); setModalMode(null);
}; };
@@ -198,20 +205,33 @@ export function TaskCard({
? `${task.startDate ? fmtDate(task.startDate) : '?'} ~ ${task.dueDate ? fmtDate(task.dueDate) : '?'}` ? `${task.startDate ? fmtDate(task.startDate) : '?'} ~ ${task.dueDate ? fmtDate(task.dueDate) : '?'}`
: ''} : ''}
</span> </span>
<span className={`shrink-0 rounded-full px-2.5 py-0.5 text-sm font-black shadow-sm ${STATUS_STYLE[task.status]}`}> {task.showStatus && (
{STATUS_LABEL[task.status]} <span className={`shrink-0 rounded-full px-2.5 py-0.5 text-sm font-black shadow-sm ${STATUS_STYLE[task.status]}`}>
</span> {STATUS_LABEL[task.status]}
</span>
)}
</div> </div>
{/* ── 키워드 ── */}
{task.keywords && (
<div className="mt-1.5 flex flex-wrap gap-1.5">
{task.keywords.split(',').map((kw, i) => (
<span key={i} className="px-2 py-0.5 bg-slate-100 text-slate-600 text-sm font-bold rounded-md border border-slate-200/60">
{kw.trim()}
</span>
))}
</div>
)}
{/* ── description ── */} {/* ── description ── */}
{task.description && ( {task.showDescription && task.description && (
<div className="mt-2 truncate text-2xl text-slate-700"> <div className="mt-2 truncate text-2xl text-slate-700">
{task.description} {task.description}
</div> </div>
)} )}
{/* ── 이슈 메모 ── */} {/* ── 이슈 메모 ── */}
{task.issueNote && ( {task.showIssue && task.issueNote && (
<div className="mt-1.5 flex min-w-0 gap-2 rounded-xl bg-red-50/80 px-2 py-1 text-2xl text-red-500"> <div className="mt-1.5 flex min-w-0 gap-2 rounded-xl bg-red-50/80 px-2 py-1 text-2xl text-red-500">
<span className="shrink-0">▶</span> <span className="shrink-0">▶</span>
<span className="truncate">{task.issueNote}</span> <span className="truncate">{task.issueNote}</span>

14
frontend/src/components/dashboard/TaskManager.tsx
View File

@@ -59,8 +59,14 @@ export function TaskManager({ tasks, sectionOptions, quarter, onClose }: TaskMan
taskType: data.taskType || null, status: data.status, progress: data.progress, taskType: data.taskType || null, status: data.status, progress: data.progress,
description: data.description || null, issueNote: data.issueNote || null, description: data.description || null, issueNote: data.issueNote || null,
startDate: data.startDate || null, dueDate: data.dueDate || null, startDate: data.startDate || null, dueDate: data.dueDate || null,
showDate: data.showDate, showDate: data.showDate,
quarter: data.quarter, priority: 'MEDIUM', creatorId: 'system', showDescription: data.showDescription,
showStatus: data.showStatus,
showIssue: data.showIssue,
keywords: data.keywords || null,
quarter: data.quarter,
priority: 'MEDIUM',
creatorId: 'system',
}); });
setModalMode(null); setModalMode(null);
}; };
@@ -75,6 +81,10 @@ export function TaskManager({ tasks, sectionOptions, quarter, onClose }: TaskMan
description: data.description || null, issueNote: data.issueNote || null, description: data.description || null, issueNote: data.issueNote || null,
startDate: data.startDate || null, dueDate: data.dueDate || null, startDate: data.startDate || null, dueDate: data.dueDate || null,
showDate: data.showDate, showDate: data.showDate,
showDescription: data.showDescription,
showStatus: data.showStatus,
showIssue: data.showIssue,
keywords: data.keywords || null,
}, },
}); });
setModalMode(null); setModalMode(null);

4
frontend/src/types/index.ts
View File

@@ -28,6 +28,10 @@ export interface Task {
startDate: string | null; startDate: string | null;
dueDate: string | null; dueDate: string | null;
showDate: boolean; showDate: boolean;
showDescription: boolean;
showStatus: boolean;
showIssue: boolean;
keywords: string | null;
creatorId: string; creatorId: string;
assigneeId: string | null; assigneeId: string | null;
createdAt: string; createdAt: string;