'use client'; import { useState } from 'react'; interface Task { id: number; title: string; priority: 'low' | 'medium' | 'high'; assignee: string; } interface Column { id: string; title: string; tasks: Task[]; } export default function KanbanSimpleDemo() { const [columns, setColumns] = useState([ { id: 'todo', title: 'To Do', tasks: [ { id: 1, title: 'UI 디자인 검토', priority: 'high', assignee: '김철수' }, { id: 2, title: 'API 연동', priority: 'medium', assignee: '이영희' }, ], }, { id: 'progress', title: 'In Progress', tasks: [ { id: 3, title: '로그인 기능 구현', priority: 'high', assignee: '박지민' }, ], }, { id: 'review', title: 'Review', tasks: [ { id: 4, title: '테스트 코드 작성', priority: 'low', assignee: '최수진' }, ], }, { id: 'done', title: 'Done', tasks: [ { id: 5, title: '프로젝트 세팅', priority: 'medium', assignee: '김철수' }, ], }, ]); const priorityColors = { low: 'bg-green-100 text-green-700', medium: 'bg-yellow-100 text-yellow-700', high: 'bg-red-100 text-red-700', }; return (

프로젝트 보드

{columns.map((column) => (

{column.title}

{column.tasks.length}

{column.tasks.map((task) => (

{task.title}

{task.priority}

{task.assignee[0]}

{task.assignee}

))}

); }

Kanban Simple

프로젝트 보드

To Do

UI 디자인 검토

API 연동

In Progress

로그인 기능 구현

Review

테스트 코드 작성

Done

프로젝트 세팅