create-arete-workspace 0.2.0

package/packages/gatsaeng-os/src/components/projects/CalendarView.tsx

@@ -0,0 +1,152 @@
+'use client'
+
+import { useState, useMemo } from 'react'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+import type { Task } from '@/types'
+
+interface CalendarViewProps {
+  tasks: Task[]
+  onClickTask?: (task: Task) => void
+}
+
+function getDaysInMonth(year: number, month: number) {
+  return new Date(year, month + 1, 0).getDate()
+}
+
+function getFirstDayOfMonth(year: number, month: number) {
+  return new Date(year, month, 1).getDay()
+}
+
+const MONTH_NAMES = [
+  '1월', '2월', '3월', '4월', '5월', '6월',
+  '7월', '8월', '9월', '10월', '11월', '12월',
+]
+
+const DAY_NAMES = ['일', '월', '화', '수', '목', '금', '토']
+
+const STATUS_DOT: Record<string, string> = {
+  backlog: 'bg-muted-foreground',
+  todo: 'bg-primary',
+  doing: 'bg-gatsaeng-amber',
+  done: 'bg-gatsaeng-teal',
+}
+
+export function CalendarView({ tasks, onClickTask }: CalendarViewProps) {
+  const today = new Date()
+  const [year, setYear] = useState(today.getFullYear())
+  const [month, setMonth] = useState(today.getMonth())
+
+  const prev = () => {
+    if (month === 0) { setYear(y => y - 1); setMonth(11) }
+    else setMonth(m => m - 1)
+  }
+  const next = () => {
+    if (month === 11) { setYear(y => y + 1); setMonth(0) }
+    else setMonth(m => m + 1)
+  }
+
+  const daysInMonth = getDaysInMonth(year, month)
+  const firstDay = getFirstDayOfMonth(year, month)
+
+  const tasksByDate = useMemo(() => {
+    const map: Record<string, Task[]> = {}
+    tasks.forEach(task => {
+      if (task.due_date) {
+        const dateStr = task.due_date.slice(0, 10)
+        if (!map[dateStr]) map[dateStr] = []
+        map[dateStr].push(task)
+      }
+    })
+    return map
+  }, [tasks])
+
+  const todayStr = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`
+
+  return (
+    <div>
+      <div className="flex items-center justify-between mb-4">
+        <Button variant="ghost" size="icon" onClick={prev} className="h-8 w-8">
+          <ChevronLeft className="w-4 h-4" />
+        </Button>
+        <span className="text-sm font-medium">
+          {year}년 {MONTH_NAMES[month]}
+        </span>
+        <Button variant="ghost" size="icon" onClick={next} className="h-8 w-8">
+          <ChevronRight className="w-4 h-4" />
+        </Button>
+      </div>
+
+      <div className="grid grid-cols-7 gap-px bg-border rounded-lg overflow-hidden">
+        {DAY_NAMES.map(day => (
+          <div key={day} className="bg-secondary/30 px-2 py-1.5 text-center text-xs font-medium text-muted-foreground">
+            {day}
+          </div>
+        ))}
+
+        {Array.from({ length: firstDay }).map((_, i) => (
+          <div key={`empty-${i}`} className="bg-card/50 min-h-[80px]" />
+        ))}
+
+        {Array.from({ length: daysInMonth }).map((_, i) => {
+          const day = i + 1
+          const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`
+          const dayTasks = tasksByDate[dateStr] || []
+          const isToday = dateStr === todayStr
+
+          return (
+            <div
+              key={day}
+              className={`bg-card min-h-[80px] p-1.5 ${
+                isToday ? 'ring-1 ring-primary ring-inset' : ''
+              }`}
+            >
+              <div className={`text-xs mb-1 ${
+                isToday ? 'text-primary font-bold' : 'text-muted-foreground'
+              }`}>
+                {day}
+              </div>
+              <div className="space-y-0.5">
+                {dayTasks.slice(0, 3).map(task => (
+                  <button
+                    key={task.id}
+                    onClick={() => onClickTask?.(task)}
+                    className="w-full text-left flex items-center gap-1 px-1 py-0.5 rounded text-[10px] hover:bg-secondary/50 transition-colors truncate"
+                  >
+                    <div className={`w-1.5 h-1.5 rounded-full flex-shrink-0 ${STATUS_DOT[task.status]}`} />
+                    <span className="truncate">{task.title}</span>
+                  </button>
+                ))}
+                {dayTasks.length > 3 && (
+                  <div className="text-[10px] text-muted-foreground px-1">
+                    +{dayTasks.length - 3}
+                  </div>
+                )}
+              </div>
+            </div>
+          )
+        })}
+      </div>
+
+      {/* Tasks without due dates */}
+      {tasks.filter(t => !t.due_date).length > 0 && (
+        <div className="mt-4">
+          <div className="text-xs text-muted-foreground mb-2">마감일 미설정</div>
+          <div className="flex flex-wrap gap-1">
+            {tasks.filter(t => !t.due_date).map(task => (
+              <Badge
+                key={task.id}
+                variant="outline"
+                className="text-[10px] cursor-pointer hover:bg-secondary/50"
+                onClick={() => onClickTask?.(task)}
+              >
+                {task.title}
+              </Badge>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/packages/gatsaeng-os/src/components/projects/KanbanView.tsx

@@ -0,0 +1,180 @@
+'use client'
+
+import { useState } from 'react'
+import {
+  DndContext,
+  DragOverlay,
+  closestCorners,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  type DragStartEvent,
+  type DragEndEvent,
+  type DragOverEvent,
+} from '@dnd-kit/core'
+import {
+  SortableContext,
+  verticalListSortingStrategy,
+  useSortable,
+} from '@dnd-kit/sortable'
+import { useDroppable } from '@dnd-kit/core'
+import { CSS } from '@dnd-kit/utilities'
+import { Badge } from '@/components/ui/badge'
+import { TaskCard } from './TaskCard'
+import type { Task, TaskStatus } from '@/types'
+
+const COLUMNS: { key: TaskStatus; title: string; color: string }[] = [
+  { key: 'backlog', title: 'Backlog', color: '#8b949e' },
+  { key: 'todo', title: 'To Do', color: '#58a6ff' },
+  { key: 'doing', title: 'Doing', color: '#f5a623' },
+  { key: 'done', title: 'Done', color: '#00d4aa' },
+]
+
+interface KanbanViewProps {
+  tasks: Task[]
+  onUpdateTask: (data: { id: string; status: TaskStatus; position: number }) => void
+}
+
+function SortableTaskCard({ task }: { task: Task }) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: task.id,
+    data: { task },
+  })
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  }
+
+  return (
+    <TaskCard
+      ref={setNodeRef}
+      task={task}
+      isDragging={isDragging}
+      dragHandleProps={{ ...attributes, ...listeners }}
+      style={style}
+    />
+  )
+}
+
+function KanbanColumn({ column, tasks }: { column: typeof COLUMNS[number]; tasks: Task[] }) {
+  const { setNodeRef, isOver } = useDroppable({ id: column.key })
+
+  return (
+    <div
+      ref={setNodeRef}
+      className={`flex-1 min-w-[240px] rounded-lg p-2 transition-colors ${
+        isOver ? 'bg-primary/5 ring-1 ring-primary/20' : ''
+      }`}
+    >
+      <div className="flex items-center gap-2 mb-3 px-1">
+        <div className="w-2 h-2 rounded-full" style={{ backgroundColor: column.color }} />
+        <span className="text-sm font-medium text-muted-foreground uppercase tracking-wider">
+          {column.title}
+        </span>
+        <Badge variant="outline" className="text-xs ml-auto">{tasks.length}</Badge>
+      </div>
+      <SortableContext items={tasks.map(t => t.id)} strategy={verticalListSortingStrategy}>
+        <div className="space-y-2 min-h-[100px]">
+          {tasks.map(task => (
+            <SortableTaskCard key={task.id} task={task} />
+          ))}
+        </div>
+      </SortableContext>
+    </div>
+  )
+}
+
+export function KanbanView({ tasks, onUpdateTask }: KanbanViewProps) {
+  const [activeTask, setActiveTask] = useState<Task | null>(null)
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+    useSensor(KeyboardSensor)
+  )
+
+  const tasksByColumn = COLUMNS.reduce(
+    (acc, col) => {
+      acc[col.key] = tasks.filter(t => t.status === col.key).sort((a, b) => a.position - b.position)
+      return acc
+    },
+    {} as Record<TaskStatus, Task[]>
+  )
+
+  function handleDragStart(event: DragStartEvent) {
+    const task = tasks.find(t => t.id === event.active.id)
+    if (task) setActiveTask(task)
+  }
+
+  function findColumn(id: string): TaskStatus | undefined {
+    // Check if the id is a column key
+    if (COLUMNS.some(c => c.key === id)) return id as TaskStatus
+    // Otherwise find which column contains this task
+    const task = tasks.find(t => t.id === id)
+    return task?.status
+  }
+
+  function handleDragOver(event: DragOverEvent) {
+    const { active, over } = event
+    if (!over) return
+
+    const activeColumn = findColumn(active.id as string)
+    const overColumn = findColumn(over.id as string)
+
+    if (!activeColumn || !overColumn || activeColumn === overColumn) return
+
+    // Moving to a new column
+    const task = tasks.find(t => t.id === active.id)
+    if (task) {
+      const targetTasks = tasksByColumn[overColumn]
+      onUpdateTask({
+        id: task.id,
+        status: overColumn,
+        position: targetTasks.length,
+      })
+    }
+  }
+
+  function handleDragEnd(event: DragEndEvent) {
+    setActiveTask(null)
+    const { active, over } = event
+    if (!over) return
+
+    const overColumn = findColumn(over.id as string)
+    if (!overColumn) return
+
+    const task = tasks.find(t => t.id === active.id)
+    if (!task) return
+
+    // Calculate new position
+    const columnTasks = tasksByColumn[overColumn].filter(t => t.id !== task.id)
+    const overIndex = columnTasks.findIndex(t => t.id === over.id)
+    const newPosition = overIndex >= 0 ? overIndex : columnTasks.length
+
+    onUpdateTask({
+      id: task.id,
+      status: overColumn,
+      position: newPosition,
+    })
+  }
+
+  return (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCorners}
+      onDragStart={handleDragStart}
+      onDragOver={handleDragOver}
+      onDragEnd={handleDragEnd}
+    >
+      <div className="flex gap-4 overflow-x-auto pb-4">
+        {COLUMNS.map(col => (
+          <KanbanColumn key={col.key} column={col} tasks={tasksByColumn[col.key]} />
+        ))}
+      </div>
+      <DragOverlay>
+        {activeTask && <TaskCard task={activeTask} isDragging />}
+      </DragOverlay>
+    </DndContext>
+  )
+}

package/packages/gatsaeng-os/src/components/projects/ListView.tsx

@@ -0,0 +1,82 @@
+'use client'
+
+import { Checkbox } from '@/components/ui/checkbox'
+import { Badge } from '@/components/ui/badge'
+import type { Task, TaskStatus } from '@/types'
+
+const STATUS_ICONS: Record<string, string> = {
+  backlog: '○',
+  todo: '◐',
+  doing: '◑',
+  done: '●',
+}
+
+interface ListViewProps {
+  tasks: Task[]
+  onUpdateTask: (data: { id: string; status: TaskStatus }) => void
+}
+
+export function ListView({ tasks, onUpdateTask }: ListViewProps) {
+  const grouped = {
+    doing: tasks.filter(t => t.status === 'doing'),
+    todo: tasks.filter(t => t.status === 'todo'),
+    backlog: tasks.filter(t => t.status === 'backlog'),
+    done: tasks.filter(t => t.status === 'done'),
+  }
+
+  const sections = [
+    { key: 'doing', title: '진행중', tasks: grouped.doing },
+    { key: 'todo', title: '할 일', tasks: grouped.todo },
+    { key: 'backlog', title: '백로그', tasks: grouped.backlog },
+    { key: 'done', title: '완료', tasks: grouped.done },
+  ]
+
+  return (
+    <div className="space-y-6">
+      {sections.map(section => (
+        section.tasks.length > 0 && (
+          <div key={section.key}>
+            <div className="flex items-center gap-2 mb-2">
+              <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                {section.title}
+              </span>
+              <Badge variant="outline" className="text-xs">{section.tasks.length}</Badge>
+            </div>
+            <div className="space-y-1">
+              {section.tasks.map(task => (
+                <div
+                  key={task.id}
+                  className="flex items-center gap-3 py-2 px-3 rounded-md hover:bg-secondary/30 transition-colors group"
+                >
+                  <Checkbox
+                    checked={task.status === 'done'}
+                    onCheckedChange={(checked) => {
+                      onUpdateTask({
+                        id: task.id,
+                        status: checked ? 'done' : 'todo',
+                      })
+                    }}
+                  />
+                  <span className={`text-sm flex-1 ${task.status === 'done' ? 'line-through text-muted-foreground' : ''}`}>
+                    {task.title}
+                  </span>
+                  <div className="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                    <Badge variant="outline" className="text-[10px]">{task.priority}</Badge>
+                    {task.due_date && (
+                      <span className="text-[10px] text-muted-foreground">{task.due_date.slice(0, 10)}</span>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )
+      ))}
+      {tasks.length === 0 && (
+        <div className="text-center text-muted-foreground py-8 text-sm">
+          아직 태스크가 없습니다
+        </div>
+      )}
+    </div>
+  )
+}

package/packages/gatsaeng-os/src/components/projects/TableView.tsx

@@ -0,0 +1,206 @@
+'use client'
+
+import { useState, useMemo } from 'react'
+import { Badge } from '@/components/ui/badge'
+import { Input } from '@/components/ui/input'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { ArrowUpDown, Search } from 'lucide-react'
+import type { Task, TaskStatus, TaskPriority } from '@/types'
+
+const STATUS_COLORS: Record<string, string> = {
+  backlog: 'text-muted-foreground',
+  todo: 'text-primary',
+  doing: 'text-gatsaeng-amber',
+  done: 'text-gatsaeng-teal',
+}
+
+const PRIORITY_ORDER: Record<string, number> = {
+  urgent: 0,
+  high: 1,
+  medium: 2,
+  low: 3,
+}
+
+type SortKey = 'title' | 'status' | 'priority' | 'due_date'
+type SortDir = 'asc' | 'desc'
+
+interface TableViewProps {
+  tasks: Task[]
+  onClickTask?: (task: Task) => void
+  onUpdateTask: (data: { id: string; status: TaskStatus }) => void
+}
+
+export function TableView({ tasks, onClickTask, onUpdateTask }: TableViewProps) {
+  const [search, setSearch] = useState('')
+  const [statusFilter, setStatusFilter] = useState<string>('all')
+  const [priorityFilter, setPriorityFilter] = useState<string>('all')
+  const [sortKey, setSortKey] = useState<SortKey>('priority')
+  const [sortDir, setSortDir] = useState<SortDir>('asc')
+
+  const toggleSort = (key: SortKey) => {
+    if (sortKey === key) {
+      setSortDir(d => d === 'asc' ? 'desc' : 'asc')
+    } else {
+      setSortKey(key)
+      setSortDir('asc')
+    }
+  }
+
+  const filtered = useMemo(() => {
+    let result = tasks
+
+    if (search) {
+      const q = search.toLowerCase()
+      result = result.filter(t => t.title.toLowerCase().includes(q) || t.tag?.toLowerCase().includes(q))
+    }
+    if (statusFilter !== 'all') {
+      result = result.filter(t => t.status === statusFilter)
+    }
+    if (priorityFilter !== 'all') {
+      result = result.filter(t => t.priority === priorityFilter)
+    }
+
+    result = [...result].sort((a, b) => {
+      const dir = sortDir === 'asc' ? 1 : -1
+      switch (sortKey) {
+        case 'title':
+          return dir * a.title.localeCompare(b.title)
+        case 'status': {
+          const order = ['backlog', 'todo', 'doing', 'done']
+          return dir * (order.indexOf(a.status) - order.indexOf(b.status))
+        }
+        case 'priority':
+          return dir * (PRIORITY_ORDER[a.priority] - PRIORITY_ORDER[b.priority])
+        case 'due_date':
+          return dir * ((a.due_date ?? '').localeCompare(b.due_date ?? ''))
+        default:
+          return 0
+      }
+    })
+
+    return result
+  }, [tasks, search, statusFilter, priorityFilter, sortKey, sortDir])
+
+  const SortHeader = ({ label, sortKeyName }: { label: string; sortKeyName: SortKey }) => (
+    <button
+      onClick={() => toggleSort(sortKeyName)}
+      className="flex items-center gap-1 text-xs font-medium text-muted-foreground uppercase tracking-wider hover:text-foreground transition-colors"
+    >
+      {label}
+      <ArrowUpDown className={`w-3 h-3 ${sortKey === sortKeyName ? 'text-primary' : ''}`} />
+    </button>
+  )
+
+  return (
+    <div>
+      <div className="flex gap-2 mb-4">
+        <div className="relative flex-1 max-w-xs">
+          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" />
+          <Input
+            value={search}
+            onChange={e => setSearch(e.target.value)}
+            placeholder="검색..."
+            className="pl-8 h-8 text-sm"
+          />
+        </div>
+        <Select value={statusFilter} onValueChange={setStatusFilter}>
+          <SelectTrigger className="w-28 h-8 text-xs"><SelectValue /></SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">전체 상태</SelectItem>
+            <SelectItem value="backlog">Backlog</SelectItem>
+            <SelectItem value="todo">To Do</SelectItem>
+            <SelectItem value="doing">Doing</SelectItem>
+            <SelectItem value="done">Done</SelectItem>
+          </SelectContent>
+        </Select>
+        <Select value={priorityFilter} onValueChange={setPriorityFilter}>
+          <SelectTrigger className="w-28 h-8 text-xs"><SelectValue /></SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">전체 우선</SelectItem>
+            <SelectItem value="urgent">긴급</SelectItem>
+            <SelectItem value="high">높음</SelectItem>
+            <SelectItem value="medium">보통</SelectItem>
+            <SelectItem value="low">낮음</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className="border border-border rounded-lg overflow-hidden">
+        <table className="w-full">
+          <thead>
+            <tr className="border-b border-border bg-secondary/30">
+              <th className="text-left px-4 py-2.5">
+                <SortHeader label="제목" sortKeyName="title" />
+              </th>
+              <th className="text-left px-4 py-2.5 w-24">
+                <SortHeader label="상태" sortKeyName="status" />
+              </th>
+              <th className="text-left px-4 py-2.5 w-24">
+                <SortHeader label="우선순위" sortKeyName="priority" />
+              </th>
+              <th className="text-left px-4 py-2.5 w-20">
+                <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">에너지</span>
+              </th>
+              <th className="text-left px-4 py-2.5 w-28">
+                <SortHeader label="마감일" sortKeyName="due_date" />
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {filtered.length === 0 ? (
+              <tr>
+                <td colSpan={5} className="px-4 py-8 text-center text-muted-foreground text-sm">
+                  {search || statusFilter !== 'all' || priorityFilter !== 'all'
+                    ? '필터에 맞는 태스크가 없습니다'
+                    : '아직 태스크가 없습니다'}
+                </td>
+              </tr>
+            ) : (
+              filtered.map(task => (
+                <tr
+                  key={task.id}
+                  className="border-b border-border/50 last:border-0 hover:bg-secondary/20 transition-colors cursor-pointer"
+                  onClick={() => onClickTask?.(task)}
+                >
+                  <td className="px-4 py-2.5">
+                    <div className="text-sm">{task.title}</div>
+                    {task.tag && (
+                      <Badge variant="outline" className="text-[10px] mt-1">{task.tag}</Badge>
+                    )}
+                  </td>
+                  <td className="px-4 py-2.5">
+                    <Select
+                      value={task.status}
+                      onValueChange={(v) => {
+                        onUpdateTask({ id: task.id, status: v as TaskStatus })
+                      }}
+                    >
+                      <SelectTrigger className={`h-7 text-xs w-20 border-0 bg-transparent ${STATUS_COLORS[task.status]}`}>
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="backlog">Backlog</SelectItem>
+                        <SelectItem value="todo">To Do</SelectItem>
+                        <SelectItem value="doing">Doing</SelectItem>
+                        <SelectItem value="done">Done</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </td>
+                  <td className="px-4 py-2.5">
+                    <Badge variant="outline" className="text-[10px]">{task.priority}</Badge>
+                  </td>
+                  <td className="px-4 py-2.5 text-xs text-muted-foreground">
+                    {task.energy_required ?? '—'}
+                  </td>
+                  <td className="px-4 py-2.5 text-xs text-muted-foreground">
+                    {task.due_date?.slice(0, 10) ?? '—'}
+                  </td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}