create-arete-workspace 0.2.0

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

@@ -0,0 +1,154 @@
+'use client'
+
+import { Card, CardContent } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { GripVertical, Calendar as CalendarIcon, Sparkles, Check } from 'lucide-react'
+import type { Task } from '@/types'
+import { forwardRef, useEffect, useRef, useState } from 'react'
+
+const LS_KEY = 'mc_delegated_task_ids'
+
+function loadDelegated(): Set<string> {
+  try {
+    return new Set(JSON.parse(localStorage.getItem(LS_KEY) ?? '[]'))
+  } catch {
+    return new Set()
+  }
+}
+
+function markDelegated(taskId: string) {
+  try {
+    const s = loadDelegated()
+    s.add(taskId)
+    localStorage.setItem(LS_KEY, JSON.stringify([...s]))
+  } catch { /* ignore */ }
+}
+
+const PRIORITY_COLORS: Record<string, string> = {
+  urgent: 'border-gatsaeng-red text-gatsaeng-red',
+  high: 'border-gatsaeng-amber text-gatsaeng-amber',
+  medium: 'border-primary text-primary',
+  low: 'border-muted-foreground text-muted-foreground',
+}
+
+const ENERGY_LABELS: Record<string, string> = {
+  high: '⚡ High',
+  medium: '🔋 Med',
+  low: '🪫 Low',
+}
+
+interface TaskCardProps {
+  task: Task
+  onClick?: () => void
+  isDragging?: boolean
+  dragHandleProps?: Record<string, unknown>
+  style?: React.CSSProperties
+}
+
+export const TaskCard = forwardRef<HTMLDivElement, TaskCardProps>(
+  function TaskCard({ task, onClick, isDragging, dragHandleProps, style }, ref) {
+    const [delegateState, setDelegateState] = useState<'idle' | 'loading' | 'done' | 'error'>(
+      () => typeof window !== 'undefined' && loadDelegated().has(task.id) ? 'done' : 'idle'
+    )
+    const errorTimerRef = useRef<ReturnType<typeof setTimeout>>(null)
+
+    useEffect(() => {
+      return () => { if (errorTimerRef.current) clearTimeout(errorTimerRef.current) }
+    }, [])
+
+    async function handleDelegate(e: React.MouseEvent) {
+      e.stopPropagation()
+      if (delegateState === 'done' || delegateState === 'loading') return
+      setDelegateState('loading')
+      try {
+        const res = await fetch('/api/delegate-to-mc', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            taskId: task.id,
+            title: task.title,
+            description: task.description ?? '',
+            priority: task.priority,
+          }),
+        })
+        if (!res.ok) throw new Error('delegate failed')
+        markDelegated(task.id)
+        setDelegateState('done')
+      } catch {
+        setDelegateState('error')
+        errorTimerRef.current = setTimeout(() => setDelegateState('idle'), 1500)
+      }
+    }
+
+    return (
+      <div ref={ref} style={style}>
+        <Card
+          className={`transition-colors cursor-pointer ${
+            isDragging ? 'opacity-50 border-primary' : 'hover:border-primary/30'
+          }`}
+          onClick={onClick}
+        >
+          <CardContent className="py-3 px-3">
+            <div className="flex items-start gap-2">
+              {dragHandleProps && (
+                <button {...dragHandleProps} className="mt-0.5 text-muted-foreground hover:text-foreground cursor-grab active:cursor-grabbing">
+                  <GripVertical className="w-3.5 h-3.5" />
+                </button>
+              )}
+              <div className="flex-1 min-w-0">
+                <div className="text-sm text-foreground">{task.title}</div>
+                {task.description && (
+                  <p className="text-xs text-muted-foreground mt-1 line-clamp-2">{task.description}</p>
+                )}
+                <div className="flex flex-wrap gap-1.5 mt-2">
+                  <Badge variant="outline" className={`text-[10px] px-1.5 py-0 ${PRIORITY_COLORS[task.priority]}`}>
+                    {task.priority}
+                  </Badge>
+                  {task.energy_required && (
+                    <Badge variant="outline" className="text-[10px] px-1.5 py-0">
+                      {ENERGY_LABELS[task.energy_required]}
+                    </Badge>
+                  )}
+                  {task.tag && (
+                    <Badge variant="outline" className="text-[10px] px-1.5 py-0">
+                      {task.tag}
+                    </Badge>
+                  )}
+                </div>
+                {task.due_date && (
+                  <div className="flex items-center gap-1 mt-1.5 text-[10px] text-muted-foreground">
+                    <CalendarIcon className="w-3 h-3" />
+                    {task.due_date.slice(0, 10)}
+                  </div>
+                )}
+                <div className="flex justify-end mt-1.5">
+                  <button
+                    onClick={handleDelegate}
+                    disabled={delegateState === 'done' || delegateState === 'loading'}
+                    className={`flex items-center gap-0.5 text-[10px] transition-colors ${
+                      delegateState === 'done'
+                        ? 'text-green-500'
+                        : delegateState === 'error'
+                          ? 'text-gatsaeng-red'
+                          : 'text-muted-foreground hover:text-gatsaeng-purple'
+                    } disabled:cursor-default`}
+                  >
+                    {delegateState === 'done' ? (
+                      <><Check className="w-3 h-3" /> MC 위임됨</>
+                    ) : delegateState === 'error' ? (
+                      '위임 실패'
+                    ) : delegateState === 'loading' ? (
+                      <><Sparkles className="w-3 h-3 animate-pulse" /> 위임 중…</>
+                    ) : (
+                      <><Sparkles className="w-3 h-3" /> Eve 위임</>
+                    )}
+                  </button>
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    )
+  }
+)

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

@@ -0,0 +1,128 @@
+'use client'
+
+import { useState } from 'react'
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Plus } from 'lucide-react'
+import { useGoals } from '@/hooks/useGoals'
+import type { Task, TaskStatus, TaskPriority, EnergyLevel } from '@/types'
+
+interface TaskFormProps {
+  projectId: string
+  defaultStatus?: TaskStatus
+  onSubmit: (data: Partial<Task>) => Promise<void>
+}
+
+export function TaskForm({ projectId, defaultStatus = 'backlog', onSubmit }: TaskFormProps) {
+  const [open, setOpen] = useState(false)
+  const { data: goals } = useGoals()
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    const form = new FormData(e.currentTarget)
+    const goalIds = form.get('goal_id') ? [form.get('goal_id') as string] : undefined
+    await onSubmit({
+      project_id: projectId,
+      title: form.get('title') as string,
+      description: (form.get('description') as string) || undefined,
+      status: (form.get('status') as TaskStatus) || defaultStatus,
+      priority: (form.get('priority') as TaskPriority) || 'medium',
+      energy_required: (form.get('energy_required') as EnergyLevel) || undefined,
+      tag: (form.get('tag') as string) || undefined,
+      due_date: (form.get('due_date') as string) || undefined,
+      goal_ids: goalIds,
+    })
+    setOpen(false)
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button size="sm" className="bg-gatsaeng-amber hover:bg-gatsaeng-amber/80 text-black">
+          <Plus className="w-4 h-4 mr-1" /> 태스크 추가
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="max-w-lg">
+        <DialogHeader>
+          <DialogTitle>태스크 만들기</DialogTitle>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <Label>제목</Label>
+            <Input name="title" required placeholder="태스크 제목" />
+          </div>
+          <div>
+            <Label>설명</Label>
+            <Input name="description" placeholder="태스크 설명 (선택)" />
+          </div>
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <Label>상태</Label>
+              <Select name="status" defaultValue={defaultStatus}>
+                <SelectTrigger><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>
+            </div>
+            <div>
+              <Label>우선순위</Label>
+              <Select name="priority" defaultValue="medium">
+                <SelectTrigger><SelectValue /></SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="urgent">긴급</SelectItem>
+                  <SelectItem value="high">높음</SelectItem>
+                  <SelectItem value="medium">보통</SelectItem>
+                  <SelectItem value="low">낮음</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <Label>에너지 요구</Label>
+              <Select name="energy_required">
+                <SelectTrigger><SelectValue placeholder="선택" /></SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="high">높음 ⚡</SelectItem>
+                  <SelectItem value="medium">보통 🔋</SelectItem>
+                  <SelectItem value="low">낮음 🪫</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div>
+              <Label>마감일</Label>
+              <Input name="due_date" type="date" />
+            </div>
+          </div>
+          <div>
+            <Label>태그</Label>
+            <Input name="tag" placeholder="예: frontend, design, bug" />
+          </div>
+          {(goals ?? []).length > 0 && (
+            <div>
+              <Label>연결 목표</Label>
+              <Select name="goal_id">
+                <SelectTrigger><SelectValue placeholder="목표 선택 (선택)" /></SelectTrigger>
+                <SelectContent>
+                  {(goals ?? []).map(goal => (
+                    <SelectItem key={goal.id} value={goal.id}>{goal.title}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          )}
+          <Button type="submit" className="w-full bg-gatsaeng-amber hover:bg-gatsaeng-amber/80 text-black">
+            태스크 생성
+          </Button>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}

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

@@ -0,0 +1,40 @@
+'use client'
+
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
+import { LayoutGrid, Table, Calendar, List } from 'lucide-react'
+import type { ViewType } from '@/types'
+
+const VIEWS: { value: ViewType; icon: React.ReactNode; label: string }[] = [
+  { value: 'kanban', icon: <LayoutGrid className="w-4 h-4" />, label: 'Kanban' },
+  { value: 'table', icon: <Table className="w-4 h-4" />, label: 'Table' },
+  { value: 'list', icon: <List className="w-4 h-4" />, label: 'List' },
+  { value: 'calendar', icon: <Calendar className="w-4 h-4" />, label: 'Calendar' },
+]
+
+interface ViewSwitcherProps {
+  value: ViewType
+  onChange: (view: ViewType) => void
+}
+
+export function ViewSwitcher({ value, onChange }: ViewSwitcherProps) {
+  return (
+    <ToggleGroup
+      type="single"
+      value={value}
+      onValueChange={(v) => v && onChange(v as ViewType)}
+      className="bg-secondary/50 p-0.5 rounded-md"
+    >
+      {VIEWS.map(view => (
+        <ToggleGroupItem
+          key={view.value}
+          value={view.value}
+          aria-label={view.label}
+          className="px-2.5 py-1.5 text-xs gap-1.5 data-[state=on]:bg-card data-[state=on]:text-foreground"
+        >
+          {view.icon}
+          <span className="hidden sm:inline">{view.label}</span>
+        </ToggleGroupItem>
+      ))}
+    </ToggleGroup>
+  )
+}

package/packages/gatsaeng-os/src/components/search/GlobalSearch.tsx

@@ -0,0 +1,179 @@
+'use client'
+
+import { useEffect, useState, useMemo } from 'react'
+import { useRouter } from 'next/navigation'
+import {
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+} from '@/components/ui/command'
+import {
+  StickyNote,
+  CheckSquare,
+  Target,
+  FolderKanban,
+  BookMarked,
+  LayoutDashboard,
+  Layers,
+  RotateCcw,
+  CalendarDays,
+  Timer,
+  BookOpen,
+} from 'lucide-react'
+import { useNotes } from '@/hooks/useNotes'
+import { useTasks } from '@/hooks/useProjects'
+import { useGoals } from '@/hooks/useGoals'
+import { useProjects } from '@/hooks/useProjects'
+import { useBooks } from '@/hooks/useBooks'
+
+const PAGES = [
+  { href: '/', label: '대시보드', icon: LayoutDashboard },
+  { href: '/areas', label: '영역', icon: Layers },
+  { href: '/goals', label: '목표', icon: Target },
+  { href: '/projects', label: '프로젝트', icon: FolderKanban },
+  { href: '/tasks', label: '할일', icon: CheckSquare },
+  { href: '/routines', label: '루틴', icon: RotateCcw },
+  { href: '/notes', label: '노트', icon: StickyNote },
+  { href: '/books', label: '독서', icon: BookMarked },
+  { href: '/calendar', label: '캘린더', icon: CalendarDays },
+  { href: '/focus', label: '포커스', icon: Timer },
+  { href: '/review', label: '계획 & 회고', icon: BookOpen },
+]
+
+export function GlobalSearch() {
+  const [open, setOpen] = useState(false)
+  const router = useRouter()
+
+  // Keyboard shortcut
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault()
+        setOpen(prev => !prev)
+      }
+    }
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [])
+
+  // Data queries - only fetch when dialog is open
+  const { data: notes = [] } = useNotes()
+  const { data: tasks = [] } = useTasks()
+  const { data: goals = [] } = useGoals()
+  const { data: projects = [] } = useProjects()
+  const { data: books = [] } = useBooks()
+
+  const handleSelect = (href: string) => {
+    setOpen(false)
+    router.push(href)
+  }
+
+  return (
+    <CommandDialog
+      open={open}
+      onOpenChange={setOpen}
+      title="검색"
+      description="페이지, 노트, 할일, 목표를 검색하세요"
+      showCloseButton={false}
+    >
+      <CommandInput placeholder="검색..." />
+      <CommandList>
+        <CommandEmpty>검색 결과가 없습니다</CommandEmpty>
+
+        <CommandGroup heading="페이지">
+          {PAGES.map(page => {
+            const Icon = page.icon
+            return (
+              <CommandItem
+                key={page.href}
+                value={`page-${page.label}`}
+                onSelect={() => handleSelect(page.href)}
+              >
+                <Icon className="w-4 h-4 mr-2" />
+                {page.label}
+              </CommandItem>
+            )
+          })}
+        </CommandGroup>
+
+        {notes.length > 0 && (
+          <CommandGroup heading="노트">
+            {notes.map(note => (
+              <CommandItem
+                key={note.id}
+                value={`note-${note.title}`}
+                onSelect={() => handleSelect(`/notes/${note.id}`)}
+              >
+                <StickyNote className="w-4 h-4 mr-2" />
+                {note.title}
+              </CommandItem>
+            ))}
+          </CommandGroup>
+        )}
+
+        {tasks.length > 0 && (
+          <CommandGroup heading="할일">
+            {tasks.map(task => (
+              <CommandItem
+                key={task.id}
+                value={`task-${task.title}`}
+                onSelect={() => handleSelect(`/tasks/${task.id}`)}
+              >
+                <CheckSquare className="w-4 h-4 mr-2" />
+                {task.title}
+              </CommandItem>
+            ))}
+          </CommandGroup>
+        )}
+
+        {goals.length > 0 && (
+          <CommandGroup heading="목표">
+            {goals.map(goal => (
+              <CommandItem
+                key={goal.id}
+                value={`goal-${goal.title}`}
+                onSelect={() => handleSelect(`/goals/${goal.id}`)}
+              >
+                <Target className="w-4 h-4 mr-2" />
+                {goal.title}
+              </CommandItem>
+            ))}
+          </CommandGroup>
+        )}
+
+        {projects.length > 0 && (
+          <CommandGroup heading="프로젝트">
+            {projects.map(project => (
+              <CommandItem
+                key={project.id}
+                value={`project-${project.title}`}
+                onSelect={() => handleSelect(`/projects/${project.id}`)}
+              >
+                <FolderKanban className="w-4 h-4 mr-2" />
+                {project.title}
+              </CommandItem>
+            ))}
+          </CommandGroup>
+        )}
+
+        {books.length > 0 && (
+          <CommandGroup heading="독서">
+            {books.map(book => (
+              <CommandItem
+                key={book.id}
+                value={`book-${book.title} ${book.author}`}
+                onSelect={() => handleSelect(`/books/${book.id}`)}
+              >
+                <BookMarked className="w-4 h-4 mr-2" />
+                {book.title}
+              </CommandItem>
+            ))}
+          </CommandGroup>
+        )}
+      </CommandList>
+    </CommandDialog>
+  )
+}

package/packages/gatsaeng-os/src/components/shared/InlineEdit.tsx

@@ -0,0 +1,77 @@
+'use client'
+
+import { useState, useRef, useEffect } from 'react'
+import { cn } from '@/lib/utils'
+
+interface InlineEditProps {
+  value: string
+  onSave: (newValue: string) => void
+  className?: string
+  inputClassName?: string
+  placeholder?: string
+}
+
+export function InlineEdit({
+  value,
+  onSave,
+  className,
+  inputClassName,
+  placeholder = '입력...',
+}: InlineEditProps) {
+  const [editing, setEditing] = useState(false)
+  const [editValue, setEditValue] = useState(value)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    if (editing && inputRef.current) {
+      inputRef.current.focus()
+      inputRef.current.select()
+    }
+  }, [editing])
+
+  const handleSave = () => {
+    const trimmed = editValue.trim()
+    if (trimmed && trimmed !== value) {
+      onSave(trimmed)
+    }
+    setEditing(false)
+  }
+
+  const handleCancel = () => {
+    setEditValue(value)
+    setEditing(false)
+  }
+
+  if (editing) {
+    return (
+      <input
+        ref={inputRef}
+        value={editValue}
+        onChange={(e) => setEditValue(e.target.value)}
+        onBlur={handleSave}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') handleSave()
+          if (e.key === 'Escape') handleCancel()
+        }}
+        className={cn(
+          'bg-transparent border-b border-primary/50 outline-none px-0 py-0.5',
+          inputClassName
+        )}
+        placeholder={placeholder}
+      />
+    )
+  }
+
+  return (
+    <span
+      className={cn('cursor-pointer hover:text-primary/80 transition-colors', className)}
+      onDoubleClick={() => {
+        setEditValue(value)
+        setEditing(true)
+      }}
+      title="더블클릭하여 편집"
+    >
+      {value}
+    </span>
+  )
+}

package/packages/gatsaeng-os/src/components/shared/PinButton.tsx

@@ -0,0 +1,42 @@
+'use client'
+
+import { Star } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { useFavoritesStore, type FavoriteType } from '@/stores/favoritesStore'
+
+interface PinButtonProps {
+  type: FavoriteType
+  id: string
+  title: string
+  className?: string
+  size?: number
+}
+
+export function PinButton({ type, id, title, className, size = 16 }: PinButtonProps) {
+  const { toggle, isFavorite } = useFavoritesStore()
+  const pinned = isFavorite(type, id)
+
+  return (
+    <button
+      type="button"
+      onClick={(e) => {
+        e.stopPropagation()
+        e.preventDefault()
+        toggle({ type, id, title })
+      }}
+      className={cn(
+        'transition-colors',
+        pinned
+          ? 'text-gatsaeng-amber'
+          : 'text-muted-foreground/40 hover:text-gatsaeng-amber/70',
+        className
+      )}
+      title={pinned ? '즐겨찾기 해제' : '즐겨찾기'}
+    >
+      <Star
+        style={{ width: size, height: size }}
+        className={cn(pinned && 'fill-current')}
+      />
+    </button>
+  )
+}

package/packages/gatsaeng-os/src/components/tasks/DDayBadge.tsx

@@ -0,0 +1,34 @@
+import { cn } from '@/lib/utils'
+
+interface DDayBadgeProps {
+  dueDate: string
+  className?: string
+}
+
+export function DDayBadge({ dueDate, className }: DDayBadgeProps) {
+  const today = new Date()
+  today.setHours(0, 0, 0, 0)
+  const due = new Date(dueDate)
+  due.setHours(0, 0, 0, 0)
+  const diff = Math.ceil((due.getTime() - today.getTime()) / (1000 * 60 * 60 * 24))
+
+  const label = diff === 0 ? 'D-Day' : diff > 0 ? `D-${diff}` : `D+${Math.abs(diff)}`
+
+  const color = diff < 0
+    ? 'bg-gatsaeng-red/20 text-gatsaeng-red border-gatsaeng-red/30'
+    : diff <= 3
+    ? 'bg-gatsaeng-red/10 text-gatsaeng-red border-gatsaeng-red/20'
+    : diff <= 7
+    ? 'bg-gatsaeng-amber/10 text-gatsaeng-amber border-gatsaeng-amber/20'
+    : 'bg-muted text-muted-foreground border-border'
+
+  return (
+    <span className={cn(
+      'inline-flex items-center rounded-md border px-1.5 py-0.5 text-[10px] font-bold tabular-nums',
+      color,
+      className
+    )}>
+      {label}
+    </span>
+  )
+}