@kmgeon/taskflow 0.1.3

package/src/features/kanban/components/KanbanBoard.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import {
+  DndContext,
+  DragOverlay,
+  PointerSensor,
+  KeyboardSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+  type DragStartEvent,
+} from "@dnd-kit/core";
+import { useState } from "react";
+import { KanbanColumn } from "./KanbanColumn";
+import { TaskCard } from "./TaskCard";
+import { ProgressCard } from "./ProgressCard";
+import { KanbanSkeleton } from "./KanbanSkeleton";
+import { KanbanError } from "./KanbanError";
+import { useTasksQuery, useSetStatusMutation } from "../hooks/useTasksQuery";
+import { useTaskSse } from "../hooks/useTaskSse";
+import { groupByStatus, COLUMN_ORDER } from "../lib/kanban-utils";
+import type { Task, TaskStatus } from "@/features/taskflow/types";
+import { TASK_STATUSES } from "@/features/taskflow/types";
+
+export function KanbanBoard() {
+  const { data: tasks, isLoading, isError, error, refetch } = useTasksQuery();
+  const mutation = useSetStatusMutation();
+  const [activeTask, setActiveTask] = useState<Task | null>(null);
+  useTaskSse();
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 8 } }),
+    useSensor(KeyboardSensor),
+  );
+
+  if (isLoading) return <KanbanSkeleton />;
+  if (isError) return <KanbanError message={error?.message} onRetry={() => refetch()} />;
+
+  const allTasks = tasks ?? [];
+  const columns = groupByStatus(allTasks);
+
+  function handleDragStart(event: DragStartEvent) {
+    const task = event.active.data.current?.task as Task | undefined;
+    setActiveTask(task ?? null);
+  }
+
+  function handleDragEnd(event: DragEndEvent) {
+    setActiveTask(null);
+
+    const { active, over } = event;
+    if (!over) return;
+
+    const taskId = String(active.id);
+    const newStatus = String(over.id) as TaskStatus;
+
+    if (!(TASK_STATUSES as readonly string[]).includes(newStatus)) return;
+
+    const task = allTasks.find((t) => t.id === taskId);
+    if (!task || task.status === newStatus) return;
+
+    mutation.mutate({ id: taskId, to: newStatus });
+  }
+
+  return (
+    <div className="flex h-full flex-col">
+      {/* Board header */}
+      <div className="flex items-center justify-between border-b border-border px-6 py-4">
+        <div>
+          <h1 className="text-xl font-semibold text-foreground">칸반 보드</h1>
+          <p className="mt-0.5 text-sm text-muted-foreground">
+            {allTasks.length}개의 태스크
+          </p>
+        </div>
+        <div className="w-64">
+          <ProgressCard tasks={allTasks} />
+        </div>
+      </div>
+
+      {/* Board columns */}
+      <DndContext
+        sensors={sensors}
+        onDragStart={handleDragStart}
+        onDragEnd={handleDragEnd}
+      >
+        <div className="flex flex-1 gap-4 overflow-x-auto p-6">
+          {COLUMN_ORDER.map((status) => (
+            <KanbanColumn
+              key={status}
+              status={status}
+              tasks={columns[status]}
+            />
+          ))}
+        </div>
+
+        <DragOverlay>
+          {activeTask ? (
+            <div className="w-[264px]">
+              <TaskCard task={activeTask} />
+            </div>
+          ) : null}
+        </DragOverlay>
+      </DndContext>
+    </div>
+  );
+}

package/src/features/kanban/components/KanbanColumn.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { useDroppable } from "@dnd-kit/core";
+import { cn } from "@/lib/utils";
+import { TaskCard } from "./TaskCard";
+import { STATUS_CONFIG } from "../lib/kanban-utils";
+import type { Task, TaskStatus } from "@/features/taskflow/types";
+
+type KanbanColumnProps = {
+  status: TaskStatus;
+  tasks: Task[];
+};
+
+export function KanbanColumn({ status, tasks }: KanbanColumnProps) {
+  const { setNodeRef, isOver } = useDroppable({ id: status });
+  const config = STATUS_CONFIG[status];
+
+  return (
+    <div className="flex w-[280px] shrink-0 flex-col" role="group" aria-label={`${config.label} 컬럼`}>
+      {/* Column header */}
+      <div className="flex items-center gap-2 px-1 pb-3">
+        <div className={cn("h-2.5 w-2.5 rounded-full", config.dotColor)} />
+        <span className="text-sm font-semibold text-foreground">
+          {config.label}
+        </span>
+        <span className="flex h-5 min-w-5 items-center justify-center rounded-full bg-muted px-1.5 text-xs text-muted-foreground">
+          {tasks.length}
+        </span>
+      </div>
+
+      {/* Task list — droppable zone */}
+      <div
+        ref={setNodeRef}
+        className={cn(
+          "flex flex-1 flex-col gap-2 rounded-lg p-2 transition-colors",
+          isOver ? "bg-accent/20 ring-2 ring-accent/40" : "bg-muted/30",
+        )}
+        role="list"
+        aria-label={`${config.label} 태스크 목록`}
+      >
+        {tasks.length === 0 ? (
+          <p className="py-8 text-center text-xs text-muted-foreground">
+            태스크 없음
+          </p>
+        ) : (
+          tasks.map((task) => <TaskCard key={task.id} task={task} />)
+        )}
+      </div>
+    </div>
+  );
+}

package/src/features/kanban/components/KanbanError.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { AlertTriangle, RefreshCw } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+type KanbanErrorProps = {
+  message?: string;
+  onRetry?: () => void;
+};
+
+export function KanbanError({ message, onRetry }: KanbanErrorProps) {
+  return (
+    <div className="flex h-full flex-col items-center justify-center gap-4 p-8">
+      <AlertTriangle className="h-12 w-12 text-destructive" />
+      <div className="text-center">
+        <h2 className="text-lg font-semibold text-foreground">오류가 발생했습니다</h2>
+        <p className="mt-1 text-sm text-muted-foreground">
+          {message ?? "태스크를 불러오는 중 문제가 발생했습니다."}
+        </p>
+      </div>
+      {onRetry && (
+        <Button variant="outline" size="sm" onClick={onRetry}>
+          <RefreshCw className="mr-2 h-4 w-4" />
+          다시 시도
+        </Button>
+      )}
+    </div>
+  );
+}

package/src/features/kanban/components/KanbanSkeleton.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { COLUMN_ORDER, STATUS_CONFIG } from "../lib/kanban-utils";
+
+function SkeletonCard() {
+  return (
+    <div className="animate-pulse rounded-lg border border-border/40 bg-card p-3">
+      <div className="h-4 w-3/4 rounded bg-muted" />
+      <div className="mt-2 flex gap-2">
+        <div className="h-3 w-12 rounded bg-muted" />
+        <div className="h-3 w-8 rounded bg-muted" />
+      </div>
+    </div>
+  );
+}
+
+export function KanbanSkeleton() {
+  return (
+    <div className="flex h-full flex-col">
+      <div className="flex items-center justify-between border-b border-border px-6 py-4">
+        <div>
+          <div className="h-6 w-32 animate-pulse rounded bg-muted" />
+          <div className="mt-1 h-4 w-24 animate-pulse rounded bg-muted" />
+        </div>
+      </div>
+
+      <div className="flex flex-1 gap-4 overflow-x-auto p-6">
+        {COLUMN_ORDER.map((status) => (
+          <div key={status} className="flex w-[280px] shrink-0 flex-col">
+            <div className="flex items-center gap-2 px-1 pb-3">
+              <div className={`h-2.5 w-2.5 rounded-full ${STATUS_CONFIG[status].dotColor}`} />
+              <span className="text-sm font-semibold text-foreground">
+                {STATUS_CONFIG[status].label}
+              </span>
+            </div>
+            <div className="flex flex-1 flex-col gap-2 rounded-lg bg-muted/30 p-2">
+              <SkeletonCard />
+              <SkeletonCard />
+              <SkeletonCard />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/features/kanban/components/ProgressCard.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { Card } from "@/components/ui/card";
+import { CheckCircle2, ListTodo } from "lucide-react";
+import { computeProgress, groupByStatus } from "../lib/kanban-utils";
+import type { Task } from "@/features/taskflow/types";
+
+type ProgressCardProps = {
+  tasks: Task[];
+};
+
+export function ProgressCard({ tasks }: ProgressCardProps) {
+  const progress = computeProgress(tasks);
+  const columns = groupByStatus(tasks);
+  const doneCount = columns.Done.length;
+
+  return (
+    <Card className="flex items-center gap-4 border-border/60 px-4 py-3">
+      <div className="flex items-center gap-2">
+        <CheckCircle2 className="h-4 w-4 text-green-500" />
+        <span className="text-sm font-medium text-foreground">{progress}%</span>
+      </div>
+
+      <div className="h-2 flex-1 overflow-hidden rounded-full bg-muted">
+        <div
+          className="h-full rounded-full bg-green-500 transition-all duration-300"
+          style={{ width: `${progress}%` }}
+          role="progressbar"
+          aria-valuenow={progress}
+          aria-valuemin={0}
+          aria-valuemax={100}
+          aria-label={`완료율 ${progress}%`}
+        />
+      </div>
+
+      <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+        <ListTodo className="h-3.5 w-3.5" />
+        <span>{doneCount}/{tasks.length}</span>
+      </div>
+    </Card>
+  );
+}

package/src/features/kanban/components/TaskCard.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { useDraggable } from "@dnd-kit/core";
+import { Card } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { GripVertical } from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { Task } from "@/features/taskflow/types";
+
+type TaskCardProps = {
+  task: Task;
+};
+
+function priorityBadge(priority: number) {
+  if (priority >= 8) return { label: "High", className: "bg-red-500/15 text-red-600 dark:text-red-400 border-red-500/20" };
+  if (priority >= 5) return { label: "Med", className: "bg-yellow-500/15 text-yellow-600 dark:text-yellow-400 border-yellow-500/20" };
+  return { label: "Low", className: "bg-green-500/15 text-green-600 dark:text-green-400 border-green-500/20" };
+}
+
+export function TaskCard({ task }: TaskCardProps) {
+  const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({
+    id: task.id,
+    data: { task },
+  });
+
+  const style = transform
+    ? { transform: `translate(${transform.x}px, ${transform.y}px)` }
+    : undefined;
+
+  const badge = priorityBadge(task.priority);
+
+  return (
+    <Card
+      ref={setNodeRef}
+      style={style}
+      className={cn(
+        "border-border/60 p-3 transition-colors hover:border-accent/40 hover:bg-muted/50",
+        isDragging && "opacity-50 shadow-lg ring-2 ring-accent",
+      )}
+      role="listitem"
+      aria-label={`태스크: ${task.title}`}
+    >
+      <div className="flex items-start gap-2">
+        <button
+          className="mt-0.5 cursor-grab touch-none text-muted-foreground hover:text-foreground"
+          aria-label="드래그하여 상태 변경"
+          {...listeners}
+          {...attributes}
+        >
+          <GripVertical className="h-4 w-4" />
+        </button>
+        <div className="flex-1 min-w-0">
+          <p className="text-sm font-medium leading-snug text-foreground truncate">
+            {task.title}
+          </p>
+          <div className="mt-2 flex items-center gap-2">
+            <span className="text-[11px] font-mono text-muted-foreground">
+              #{task.id}
+            </span>
+            <Badge
+              variant="outline"
+              className={cn("px-1.5 py-0 text-[10px]", badge.className)}
+            >
+              {badge.label}
+            </Badge>
+            {task.dependencies.length > 0 && (
+              <span className="text-[10px] text-muted-foreground">
+                dep: {task.dependencies.length}
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+    </Card>
+  );
+}

package/src/features/kanban/components/__tests__/kanban-components.test.tsx

@@ -0,0 +1,86 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { KanbanError } from "../KanbanError";
+import { ProgressCard } from "../ProgressCard";
+import { KanbanSkeleton } from "../KanbanSkeleton";
+import type { Task } from "@/features/taskflow/types";
+
+const now = "2026-03-21T00:00:00.000Z";
+
+function makeTask(overrides: Partial<Task> = {}): Task {
+  return {
+    id: "001",
+    title: "Test task",
+    status: "Todo",
+    priority: 5,
+    dependencies: [],
+    createdAt: now,
+    updatedAt: now,
+    description: "",
+    ...overrides,
+  };
+}
+
+describe("KanbanError", () => {
+  it("should render error message", () => {
+    render(<KanbanError message="테스트 오류" />);
+    expect(screen.getByText("오류가 발생했습니다")).toBeInTheDocument();
+    expect(screen.getByText("테스트 오류")).toBeInTheDocument();
+  });
+
+  it("should render default message when none provided", () => {
+    render(<KanbanError />);
+    expect(screen.getByText("태스크를 불러오는 중 문제가 발생했습니다.")).toBeInTheDocument();
+  });
+
+  it("should render retry button when onRetry provided", () => {
+    const onRetry = vi.fn();
+    render(<KanbanError onRetry={onRetry} />);
+    const button = screen.getByText("다시 시도");
+    expect(button).toBeInTheDocument();
+    button.click();
+    expect(onRetry).toHaveBeenCalledOnce();
+  });
+
+  it("should not render retry button without onRetry", () => {
+    render(<KanbanError />);
+    expect(screen.queryByText("다시 시도")).not.toBeInTheDocument();
+  });
+});
+
+describe("ProgressCard", () => {
+  it("should show 0% for no tasks", () => {
+    render(<ProgressCard tasks={[]} />);
+    expect(screen.getByText("0%")).toBeInTheDocument();
+    expect(screen.getByText("0/0")).toBeInTheDocument();
+  });
+
+  it("should show correct progress", () => {
+    const tasks = [
+      makeTask({ id: "1", status: "Done" }),
+      makeTask({ id: "2", status: "Todo" }),
+      makeTask({ id: "3", status: "Done" }),
+      makeTask({ id: "4", status: "InProgress" }),
+    ];
+    render(<ProgressCard tasks={tasks} />);
+    expect(screen.getByText("50%")).toBeInTheDocument();
+    expect(screen.getByText("2/4")).toBeInTheDocument();
+  });
+
+  it("should have accessible progressbar", () => {
+    const tasks = [makeTask({ id: "1", status: "Done" })];
+    render(<ProgressCard tasks={tasks} />);
+    const progressbar = screen.getByRole("progressbar");
+    expect(progressbar).toHaveAttribute("aria-valuenow", "100");
+  });
+});
+
+describe("KanbanSkeleton", () => {
+  it("should render four column skeletons", () => {
+    render(<KanbanSkeleton />);
+    expect(screen.getByText("Todo")).toBeInTheDocument();
+    expect(screen.getByText("In Progress")).toBeInTheDocument();
+    expect(screen.getByText("Blocked")).toBeInTheDocument();
+    expect(screen.getByText("Done")).toBeInTheDocument();
+  });
+});

package/src/features/kanban/hooks/useTaskSse.ts

@@ -0,0 +1,66 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+
+const TASKS_KEY = ["tasks"];
+const RECONNECT_DELAY_MS = 3_000;
+const MAX_RECONNECT_DELAY_MS = 30_000;
+
+export function useTaskSse() {
+  const queryClient = useQueryClient();
+  const retryCount = useRef(0);
+
+  useEffect(() => {
+    let es: EventSource | null = null;
+    let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
+    let mounted = true;
+
+    function connect() {
+      if (!mounted) return;
+
+      es = new EventSource("/api/sse");
+
+      es.addEventListener("connected", () => {
+        retryCount.current = 0;
+      });
+
+      es.addEventListener("task-change", (e) => {
+        try {
+          const event = JSON.parse(e.data);
+          if (event.type === "created" || event.type === "deleted" || event.type === "index") {
+            queryClient.invalidateQueries({ queryKey: TASKS_KEY });
+          } else if (event.type === "updated" && event.id) {
+            queryClient.invalidateQueries({ queryKey: TASKS_KEY });
+          }
+        } catch {
+          // Malformed event — skip
+        }
+      });
+
+      es.onerror = () => {
+        es?.close();
+        es = null;
+        scheduleReconnect();
+      };
+    }
+
+    function scheduleReconnect() {
+      if (!mounted) return;
+      const delay = Math.min(
+        RECONNECT_DELAY_MS * 2 ** retryCount.current,
+        MAX_RECONNECT_DELAY_MS,
+      );
+      retryCount.current++;
+      reconnectTimer = setTimeout(connect, delay);
+    }
+
+    connect();
+
+    return () => {
+      mounted = false;
+      es?.close();
+      if (reconnectTimer) clearTimeout(reconnectTimer);
+    };
+  }, [queryClient]);
+}

package/src/features/kanban/hooks/useTasksQuery.ts

@@ -0,0 +1,52 @@
+"use client";
+
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { apiClient } from "@/lib/remote/api-client";
+import type { Task, TaskStatus } from "@/features/taskflow/types";
+
+const TASKS_KEY = ["tasks"] as const;
+
+async function fetchTasks(): Promise<Task[]> {
+  const { data } = await apiClient.get<Task[]>("/api/tasks");
+  return data;
+}
+
+async function setTaskStatus(id: string, to: TaskStatus): Promise<Task> {
+  const { data } = await apiClient.post<Task>(`/api/tasks/${id}/status`, { to });
+  return data;
+}
+
+export function useTasksQuery() {
+  return useQuery({
+    queryKey: TASKS_KEY,
+    queryFn: fetchTasks,
+  });
+}
+
+export function useSetStatusMutation() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ id, to }: { id: string; to: TaskStatus }) => setTaskStatus(id, to),
+    onMutate: async ({ id, to }) => {
+      await queryClient.cancelQueries({ queryKey: TASKS_KEY });
+      const previous = queryClient.getQueryData<Task[]>(TASKS_KEY);
+
+      queryClient.setQueryData<Task[]>(TASKS_KEY, (old) =>
+        old?.map((task) =>
+          task.id === id ? { ...task, status: to, updatedAt: new Date().toISOString() } : task,
+        ),
+      );
+
+      return { previous };
+    },
+    onError: (_err, _vars, context) => {
+      if (context?.previous) {
+        queryClient.setQueryData(TASKS_KEY, context.previous);
+      }
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: TASKS_KEY });
+    },
+  });
+}

package/src/features/kanban/lib/__tests__/kanban-utils.test.ts

@@ -0,0 +1,97 @@
+import { describe, it, expect } from "vitest";
+import { groupByStatus, computeProgress } from "../kanban-utils";
+import type { Task } from "@/features/taskflow/types";
+
+const now = "2026-03-21T00:00:00.000Z";
+
+function makeTask(overrides: Partial<Task> = {}): Task {
+  return {
+    id: "001",
+    title: "Test",
+    status: "Todo",
+    priority: 5,
+    dependencies: [],
+    createdAt: now,
+    updatedAt: now,
+    description: "",
+    ...overrides,
+  };
+}
+
+describe("groupByStatus", () => {
+  it("should group tasks into columns", () => {
+    const tasks = [
+      makeTask({ id: "1", status: "Todo" }),
+      makeTask({ id: "2", status: "InProgress" }),
+      makeTask({ id: "3", status: "Done" }),
+      makeTask({ id: "4", status: "Todo" }),
+      makeTask({ id: "5", status: "Blocked" }),
+    ];
+
+    const columns = groupByStatus(tasks);
+
+    expect(columns.Todo).toHaveLength(2);
+    expect(columns.InProgress).toHaveLength(1);
+    expect(columns.Blocked).toHaveLength(1);
+    expect(columns.Done).toHaveLength(1);
+  });
+
+  it("should return empty arrays for empty input", () => {
+    const columns = groupByStatus([]);
+    expect(columns.Todo).toHaveLength(0);
+    expect(columns.InProgress).toHaveLength(0);
+    expect(columns.Blocked).toHaveLength(0);
+    expect(columns.Done).toHaveLength(0);
+  });
+
+  it("should handle all tasks in one column", () => {
+    const tasks = [
+      makeTask({ id: "1", status: "Done" }),
+      makeTask({ id: "2", status: "Done" }),
+    ];
+    const columns = groupByStatus(tasks);
+    expect(columns.Done).toHaveLength(2);
+    expect(columns.Todo).toHaveLength(0);
+  });
+});
+
+describe("computeProgress", () => {
+  it("should return 0 for empty tasks", () => {
+    expect(computeProgress([])).toBe(0);
+  });
+
+  it("should return 100 when all done", () => {
+    const tasks = [
+      makeTask({ status: "Done" }),
+      makeTask({ status: "Done" }),
+    ];
+    expect(computeProgress(tasks)).toBe(100);
+  });
+
+  it("should return 0 when none done", () => {
+    const tasks = [
+      makeTask({ status: "Todo" }),
+      makeTask({ status: "InProgress" }),
+    ];
+    expect(computeProgress(tasks)).toBe(0);
+  });
+
+  it("should calculate percentage correctly", () => {
+    const tasks = [
+      makeTask({ status: "Done" }),
+      makeTask({ status: "Todo" }),
+      makeTask({ status: "InProgress" }),
+      makeTask({ status: "Done" }),
+    ];
+    expect(computeProgress(tasks)).toBe(50);
+  });
+
+  it("should round to nearest integer", () => {
+    const tasks = [
+      makeTask({ status: "Done" }),
+      makeTask({ status: "Todo" }),
+      makeTask({ status: "Todo" }),
+    ];
+    expect(computeProgress(tasks)).toBe(33);
+  });
+});