Update task schema with show toggles and keywords

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-01 17:56:18 +09:00
parent 0a1cb3efe7
commit aeb2f29d4d
7 changed files with 141 additions and 60 deletions
--- a/backend/prisma/schema.prisma
+++ b/backend/prisma/schema.prisma
@@ -53,6 +53,10 @@ model Task {
  startDate   DateTime?
  dueDate     DateTime?
  showDate    Boolean   @default(true)
+  showDescription Boolean @default(true)
+  showStatus      Boolean @default(true)
+  showIssue       Boolean @default(true)
+  keywords        String?
  creatorId   String
  assigneeId  String?
  createdAt   DateTime   @default(now())
--- a/backend/src/routes/tasks.ts
+++ b/backend/src/routes/tasks.ts
@@ -56,7 +56,8 @@ router.get('/:id', async (req, res, next) => {
 router.post('/', async (req, res, next) => {
  try {
    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>;

    if (!title || !quarter) {
@@ -79,6 +80,10 @@ router.post('/', async (req, res, next) => {
        startDate: startDate ? new Date(startDate) : undefined,
        dueDate: dueDate ? new Date(dueDate) : undefined,
        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,
        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, '업무를 찾을 수 없습니다.');

    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>;

    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 }),
        ...(assigneeId !== undefined && { assigneeId: assigneeId || null }),
        ...(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 }),
      },
    });

--- a/frontend/src/components/common/TaskModal.tsx
+++ b/frontend/src/components/common/TaskModal.tsx
@@ -2,8 +2,6 @@ import { useState } from 'react';
 import { createPortal } from 'react-dom';
 import type { Task } from '../../types';

-const TAG_OPTIONS = ['Growth', 'Policy', 'Performance', 'Culture', 'Asset', 'Space', 'Safety', 'Environment'];
-
 const STATUS_OPTIONS = [
  { value: 'TODO',        label: '대기' },
  { value: 'IN_PROGRESS', label: '진행' },
@@ -24,6 +22,10 @@ export interface TaskFormData {
  startDate: string;
  dueDate: string;
  showDate: boolean;
+  showDescription: boolean;
+  showStatus: boolean;
+  showIssue: boolean;
+  keywords: string;
 }

 interface TaskModalProps {
@@ -55,6 +57,10 @@ export function TaskModal({ mode, task, defaultSection = 'HR', defaultQuarter =
    startDate:   toDateInput(task?.startDate),
    dueDate:     toDateInput(task?.dueDate),
    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]) =>
@@ -106,7 +112,7 @@ export function TaskModal({ mode, task, defaultSection = 'HR', defaultQuarter =
            />
          </div>

-          {/* 섹션 + 태그 */}
+          {/* 섹션 + 업무유형 */}
          <div className="grid grid-cols-2 gap-3">
            <div>
              <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>
            </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>
              <label className="block text-sm font-bold text-gray-500 mb-1.5">업무 유형</label>
              <select
@@ -151,8 +140,23 @@ export function TaskModal({ mode, task, defaultSection = 'HR', defaultQuarter =
                <option value="프로젝트">프로젝트</option>
              </select>
            </div>
+          </div>
+
+          {/* 상태 + 진행률 */}
+          <div className="grid grid-cols-2 gap-3">
            <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
                value={form.status}
                onChange={(e) => set('status', e.target.value)}
@@ -163,28 +167,20 @@ export function TaskModal({ mode, task, defaultSection = 'HR', defaultQuarter =
                ))}
              </select>
            </div>
-          </div>
-
-          {/* 진행률 */}
-          <div>
-            <label className="block text-sm font-bold text-gray-500 mb-1.5">
-              진행률
-              <span className="ml-2 font-black text-gray-800">{form.progress}%</span>
-            </label>
-            <div className="flex items-center gap-3">
-              <input
-                type="range"
-                min={0}
-                max={100}
-                step={5}
-                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>
+              <label className="block text-sm font-bold text-gray-500 mb-1.5">
+                진행률
+                <span className="ml-2 font-black text-gray-800">{form.progress}%</span>
+              </label>
+              <div className="flex items-center gap-3">
+                <input
+                  type="range"
+                  min={0}
+                  max={100}
+                  step={5}
+                  value={form.progress}
+                  onChange={(e) => set('progress', Number(e.target.value))}
+                  className="flex-1 accent-blue-500"
                />
              </div>
            </div>
@@ -192,13 +188,35 @@ export function TaskModal({ mode, task, defaultSection = 'HR', defaultQuarter =

          {/* 내용 */}
          <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
              value={form.description}
              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"
-              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>

@@ -213,7 +231,7 @@ export function TaskModal({ mode, task, defaultSection = 'HR', defaultQuarter =
                  onChange={(e) => set('showDate', e.target.checked)}
                  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>
            </div>
            <div className="grid grid-cols-2 gap-3">
@@ -234,7 +252,18 @@ export function TaskModal({ mode, task, defaultSection = 'HR', defaultQuarter =

          {/* 이슈 메모 */}
          <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
              value={form.issueNote}
              onChange={(e) => set('issueNote', e.target.value)}
--- a/frontend/src/components/dashboard/DepartmentColumn.tsx
+++ b/frontend/src/components/dashboard/DepartmentColumn.tsx
@@ -183,6 +183,7 @@ export function DepartmentColumn({ title: initialTitle, titleEn, subtitle: initi

  const handleListContextMenu = (e: React.MouseEvent) => {
    e.preventDefault();
+    e.stopPropagation(); // 카드에서 올라온 이벤트가 아니면 여기서 처리
    setCtxMenu({ x: e.clientX, y: e.clientY, type: 'list' });
  };

@@ -194,7 +195,6 @@ export function DepartmentColumn({ title: initialTitle, titleEn, subtitle: initi
    create.mutate({
      title:       data.title,
      section:     data.section || null,
-      tag:         data.tag || null,
      taskType:    data.taskType || null,
      status:      data.status as Task['status'],
      progress:    data.progress,
@@ -203,6 +203,10 @@ export function DepartmentColumn({ title: initialTitle, titleEn, subtitle: initi
      startDate:   data.startDate || null,
      dueDate:     data.dueDate || null,
      showDate:    data.showDate,
+      showDescription: data.showDescription,
+      showStatus:  data.showStatus,
+      showIssue:   data.showIssue,
+      keywords:    data.keywords || null,
      quarter:     data.quarter,
      priority:    'MEDIUM',
      creatorId:   'system',
--- a/frontend/src/components/dashboard/TaskCard.tsx
+++ b/frontend/src/components/dashboard/TaskCard.tsx
@@ -110,6 +110,7 @@ export function TaskCard({
  const handleContextMenu = (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
+    // 뷰포트 내 좌표 계산
    setCtxMenu({ x: e.clientX, y: e.clientY });
  };

@@ -117,7 +118,6 @@ export function TaskCard({
    create.mutate({
      title:       data.title,
      section:     data.section || null,
-      tag:         data.tag || null,
      taskType:    data.taskType || null,
      status:      data.status,
      progress:    data.progress,
@@ -126,6 +126,10 @@ export function TaskCard({
      startDate:   data.startDate || null,
      dueDate:     data.dueDate || null,
      showDate:    data.showDate,
+      showDescription: data.showDescription,
+      showStatus:  data.showStatus,
+      showIssue:   data.showIssue,
+      keywords:    data.keywords || null,
      quarter:     data.quarter,
      priority:    'MEDIUM',
      creatorId:   'system',
@@ -137,7 +141,6 @@ export function TaskCard({
    patch.mutate({
      title:       data.title,
      section:     data.section || null,
-      tag:         data.tag || null,
      taskType:    data.taskType || null,
      status:      data.status,
      progress:    data.progress,
@@ -146,6 +149,10 @@ export function TaskCard({
      startDate:   data.startDate || null,
      dueDate:     data.dueDate || null,
      showDate:    data.showDate,
+      showDescription: data.showDescription,
+      showStatus:  data.showStatus,
+      showIssue:   data.showIssue,
+      keywords:    data.keywords || null,
    });
    setModalMode(null);
  };
@@ -198,20 +205,33 @@ export function TaskCard({
              ? `${task.startDate ? fmtDate(task.startDate) : '?'} ~ ${task.dueDate ? fmtDate(task.dueDate) : '?'}`
              : ''}
          </span>
-          <span className={`shrink-0 rounded-full px-2.5 py-0.5 text-sm font-black shadow-sm ${STATUS_STYLE[task.status]}`}>
-            {STATUS_LABEL[task.status]}
-          </span>
+          {task.showStatus && (
+            <span className={`shrink-0 rounded-full px-2.5 py-0.5 text-sm font-black shadow-sm ${STATUS_STYLE[task.status]}`}>
+              {STATUS_LABEL[task.status]}
+            </span>
+          )}
        </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 ── */}
-        {task.description && (
+        {task.showDescription && task.description && (
          <div className="mt-2 truncate text-2xl text-slate-700">
            {task.description}
          </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">
            <span className="shrink-0">▶</span>
            <span className="truncate">{task.issueNote}</span>
--- a/frontend/src/components/dashboard/TaskManager.tsx
+++ b/frontend/src/components/dashboard/TaskManager.tsx
@@ -59,8 +59,14 @@ export function TaskManager({ tasks, sectionOptions, quarter, onClose }: TaskMan
      taskType: data.taskType || null, status: data.status, progress: data.progress,
      description: data.description || null, issueNote: data.issueNote || null,
      startDate: data.startDate || null, dueDate: data.dueDate || null,
-      showDate: data.showDate,
-      quarter: data.quarter, priority: 'MEDIUM', creatorId: 'system',
+      showDate:    data.showDate,
+      showDescription: data.showDescription,
+      showStatus:  data.showStatus,
+      showIssue:   data.showIssue,
+      keywords:    data.keywords || null,
+      quarter:     data.quarter,
+      priority:    'MEDIUM',
+      creatorId:   'system',
    });
    setModalMode(null);
  };
@@ -75,6 +81,10 @@ export function TaskManager({ tasks, sectionOptions, quarter, onClose }: TaskMan
        description: data.description || null, issueNote: data.issueNote || null,
        startDate: data.startDate || null, dueDate: data.dueDate || null,
        showDate: data.showDate,
+        showDescription: data.showDescription,
+        showStatus: data.showStatus,
+        showIssue: data.showIssue,
+        keywords: data.keywords || null,
      },
    });
    setModalMode(null);
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -28,6 +28,10 @@ export interface Task {
  startDate: string | null;
  dueDate: string | null;
  showDate: boolean;
+  showDescription: boolean;
+  showStatus: boolean;
+  showIssue: boolean;
+  keywords: string | null;
  creatorId: string;
  assigneeId: string | null;
  createdAt: string;