create-arete-workspace 0.2.0

package/packages/gatsaeng-os/src/app/(dashboard)/notes/[id]/page.tsx

@@ -0,0 +1,147 @@
+'use client'
+
+import { use, useState, useCallback } from 'react'
+import { useRouter } from 'next/navigation'
+import { Card, CardContent } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { Input } from '@/components/ui/input'
+import { ArrowLeft, Trash2 } from 'lucide-react'
+import { useNote, useUpdateNote, useDeleteNote } from '@/hooks/useNotes'
+import { TiptapEditor } from '@/components/editor/TiptapEditor'
+import { PinButton } from '@/components/shared/PinButton'
+import type { NoteType, NotePriority } from '@/types'
+
+const TYPE_LABELS: Record<NoteType, string> = {
+  note: '노트',
+  file: '파일',
+  reference: '레퍼런스',
+  link: '링크',
+}
+
+const PRIORITY_COLORS: Record<NotePriority, string> = {
+  1: 'border-gatsaeng-red/30 text-gatsaeng-red',
+  2: 'border-gatsaeng-amber/30 text-gatsaeng-amber',
+  3: 'border-gatsaeng-teal/30 text-gatsaeng-teal',
+}
+
+export default function NoteDetailPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = use(params)
+  const router = useRouter()
+  const { data: note, isLoading } = useNote(id)
+  const updateNote = useUpdateNote()
+  const deleteNote = useDeleteNote()
+  const [editingTitle, setEditingTitle] = useState(false)
+  const [titleValue, setTitleValue] = useState('')
+
+  const handleTitleSave = useCallback(() => {
+    if (!note || !titleValue.trim()) return
+    if (titleValue !== note.title) {
+      updateNote.mutate({ id, title: titleValue })
+    }
+    setEditingTitle(false)
+  }, [id, note, titleValue, updateNote])
+
+  const handleContentSave = useCallback((markdown: string) => {
+    updateNote.mutate({ id, content: markdown })
+  }, [id, updateNote])
+
+  const handleDelete = () => {
+    if (!confirm('이 노트를 삭제하시겠습니까?')) return
+    deleteNote.mutate(id, {
+      onSuccess: () => router.push('/notes'),
+    })
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary" />
+      </div>
+    )
+  }
+
+  if (!note) {
+    return (
+      <div className="text-center py-20">
+        <p className="text-muted-foreground">노트를 찾을 수 없습니다</p>
+        <Button variant="outline" className="mt-4" onClick={() => router.push('/notes')}>
+          <ArrowLeft className="w-4 h-4 mr-2" /> 돌아가기
+        </Button>
+      </div>
+    )
+  }
+
+  return (
+    <div className="max-w-3xl mx-auto">
+      {/* Header */}
+      <div className="flex items-center gap-3 mb-6">
+        <Button variant="ghost" size="icon" onClick={() => router.push('/notes')}>
+          <ArrowLeft className="w-5 h-5" />
+        </Button>
+        <div className="flex-1 min-w-0">
+          {editingTitle ? (
+            <Input
+              value={titleValue}
+              onChange={(e) => setTitleValue(e.target.value)}
+              onBlur={handleTitleSave}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') handleTitleSave()
+                if (e.key === 'Escape') setEditingTitle(false)
+              }}
+              autoFocus
+              className="text-2xl font-bold h-auto py-1"
+            />
+          ) : (
+            <h1
+              className="text-2xl font-bold text-foreground cursor-pointer hover:text-primary/80 transition-colors truncate"
+              onDoubleClick={() => {
+                setTitleValue(note.title)
+                setEditingTitle(true)
+              }}
+              title="더블클릭하여 편집"
+            >
+              {note.title}
+            </h1>
+          )}
+        </div>
+        <PinButton type="note" id={id} title={note.title} size={20} />
+        <Button variant="ghost" size="icon" onClick={handleDelete} className="text-muted-foreground hover:text-gatsaeng-red">
+          <Trash2 className="w-4 h-4" />
+        </Button>
+      </div>
+
+      {/* Meta */}
+      <div className="flex items-center gap-2 mb-6 flex-wrap">
+        <Badge variant="outline">{TYPE_LABELS[note.type] ?? note.type}</Badge>
+        <Badge variant="outline" className={PRIORITY_COLORS[note.priority]}>
+          P{note.priority}
+        </Badge>
+        {note.url && (
+          <a
+            href={note.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-xs text-primary hover:underline truncate max-w-xs"
+          >
+            {note.url}
+          </a>
+        )}
+        <span className="text-xs text-muted-foreground ml-auto">
+          {note.created_at?.slice(0, 10)}
+        </span>
+      </div>
+
+      {/* Editor */}
+      <Card>
+        <CardContent className="p-0">
+          <TiptapEditor
+            content={note._content ?? ''}
+            onSave={handleContentSave}
+            placeholder="노트 내용을 입력하세요..."
+          />
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

package/packages/gatsaeng-os/src/app/(dashboard)/notes/page.tsx

@@ -0,0 +1,254 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { useNotes, useCreateNote, useDeleteNote } from '@/hooks/useNotes'
+import { useAreas } from '@/hooks/useAreas'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent } from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Badge } from '@/components/ui/badge'
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
+import { StickyNote, FileText, BookOpen, Link2, Plus, Trash2, ExternalLink } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import type { NoteType } from '@/types'
+
+const TYPE_CONFIG: Record<NoteType, { label: string; icon: typeof StickyNote; color: string }> = {
+  note: { label: '노트', icon: StickyNote, color: 'bg-primary/10 text-primary border-primary/30' },
+  file: { label: '파일', icon: FileText, color: 'bg-gatsaeng-amber/10 text-gatsaeng-amber border-gatsaeng-amber/30' },
+  reference: { label: '레퍼런스', icon: BookOpen, color: 'bg-gatsaeng-teal/10 text-gatsaeng-teal border-gatsaeng-teal/30' },
+  link: { label: '링크', icon: Link2, color: 'bg-gatsaeng-purple/10 text-gatsaeng-purple border-gatsaeng-purple/30' },
+}
+
+const PRIORITY_COLORS: Record<number, string> = {
+  1: 'bg-gatsaeng-red text-white',
+  2: 'bg-gatsaeng-amber text-black',
+  3: 'bg-muted text-muted-foreground',
+}
+
+export default function NotesPage() {
+  const [tab, setTab] = useState<string>('all')
+  const [open, setOpen] = useState(false)
+  const { data: notes = [], isLoading } = useNotes(tab === 'all' ? undefined : tab as NoteType)
+  const { data: areas = [] } = useAreas()
+  const createNote = useCreateNote()
+  const deleteNote = useDeleteNote()
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    const form = new FormData(e.currentTarget)
+    await createNote.mutateAsync({
+      title: form.get('title') as string,
+      type: (form.get('type') as NoteType) || 'note',
+      priority: (Number(form.get('priority')) || 2) as 1 | 2 | 3,
+      area_id: (form.get('area_id') as string) || undefined,
+      url: (form.get('url') as string) || undefined,
+      content: (form.get('content') as string) || undefined,
+    })
+    setOpen(false)
+  }
+
+  const handleDelete = (id: string, title: string) => {
+    if (!confirm(`"${title}" 노트를 삭제하시겠습니까?`)) return
+    deleteNote.mutate(id)
+  }
+
+  const grouped = {
+    note: notes.filter(n => n.type === 'note'),
+    file: notes.filter(n => n.type === 'file'),
+    reference: notes.filter(n => n.type === 'reference'),
+    link: notes.filter(n => n.type === 'link'),
+  }
+
+  return (
+    <div className="max-w-4xl mx-auto">
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h1 className="text-2xl font-bold text-foreground">노트</h1>
+          <p className="text-sm text-muted-foreground mt-1">노트, 파일, 레퍼런스, 링크 관리</p>
+        </div>
+        <Dialog open={open} onOpenChange={setOpen}>
+          <DialogTrigger asChild>
+            <Button className="bg-primary hover:bg-primary/80">
+              <Plus className="w-4 h-4 mr-2" /> 노트 추가
+            </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 className="grid grid-cols-2 gap-4">
+                <div>
+                  <Label>유형</Label>
+                  <Select name="type" defaultValue="note">
+                    <SelectTrigger><SelectValue /></SelectTrigger>
+                    <SelectContent>
+                      {(Object.keys(TYPE_CONFIG) as NoteType[]).map(t => (
+                        <SelectItem key={t} value={t}>{TYPE_CONFIG[t].label}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div>
+                  <Label>우선순위</Label>
+                  <Select name="priority" defaultValue="2">
+                    <SelectTrigger><SelectValue /></SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="1">P1 (높음)</SelectItem>
+                      <SelectItem value="2">P2 (보통)</SelectItem>
+                      <SelectItem value="3">P3 (낮음)</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+              <div>
+                <Label>영역 (선택)</Label>
+                <Select name="area_id">
+                  <SelectTrigger><SelectValue placeholder="없음" /></SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="">없음</SelectItem>
+                    {areas.map((a: { id: string; title: string }) => (
+                      <SelectItem key={a.id} value={a.id}>{a.title}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div>
+                <Label>URL (링크/레퍼런스)</Label>
+                <Input name="url" type="url" placeholder="https://..." />
+              </div>
+              <div>
+                <Label>내용</Label>
+                <textarea
+                  name="content"
+                  placeholder="마크다운 내용..."
+                  className="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+                  rows={4}
+                />
+              </div>
+              <Button type="submit" className="w-full">추가</Button>
+            </form>
+          </DialogContent>
+        </Dialog>
+      </div>
+
+      <Tabs value={tab} onValueChange={setTab} className="mb-6">
+        <TabsList>
+          <TabsTrigger value="all">전체 ({notes.length})</TabsTrigger>
+          <TabsTrigger value="note">노트</TabsTrigger>
+          <TabsTrigger value="file">파일</TabsTrigger>
+          <TabsTrigger value="reference">레퍼런스</TabsTrigger>
+          <TabsTrigger value="link">링크</TabsTrigger>
+        </TabsList>
+      </Tabs>
+
+      {isLoading ? (
+        <div className="space-y-3">
+          {[1, 2, 3].map(i => <div key={i} className="h-16 bg-card rounded-lg animate-pulse" />)}
+        </div>
+      ) : notes.length === 0 ? (
+        <Card>
+          <CardContent className="py-12 text-center text-muted-foreground">
+            노트를 추가하세요
+          </CardContent>
+        </Card>
+      ) : tab === 'all' ? (
+        // Grouped view when showing all
+        <div className="space-y-6">
+          {(Object.keys(TYPE_CONFIG) as NoteType[]).map(type => {
+            const items = grouped[type]
+            if (items.length === 0) return null
+            const config = TYPE_CONFIG[type]
+            const Icon = config.icon
+            return (
+              <div key={type}>
+                <div className="flex items-center gap-2 mb-3">
+                  <Icon className="w-4 h-4 text-muted-foreground" />
+                  <span className="text-sm font-medium">{config.label}</span>
+                  <Badge variant="outline" className="text-[10px]">{items.length}</Badge>
+                </div>
+                <div className="space-y-2">
+                  {items.map(note => (
+                    <NoteCard key={note.id} note={note} areas={areas} onDelete={handleDelete} />
+                  ))}
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      ) : (
+        // Flat list for filtered view
+        <div className="space-y-2">
+          {notes.map(note => (
+            <NoteCard key={note.id} note={note} areas={areas} onDelete={handleDelete} />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function NoteCard({ note, areas, onDelete }: {
+  note: { id: string; title: string; type: NoteType; priority: number; area_id?: string; url?: string; created_at: string }
+  areas: { id: string; title: string }[]
+  onDelete: (id: string, title: string) => void
+}) {
+  const router = useRouter()
+  const config = TYPE_CONFIG[note.type]
+  const Icon = config.icon
+  const area = areas.find(a => a.id === note.area_id)
+
+  return (
+    <Card
+      className="group hover:border-primary/30 transition-colors cursor-pointer"
+      onClick={() => router.push(`/notes/${note.id}`)}
+    >
+      <CardContent className="py-3 px-4">
+        <div className="flex items-center gap-3">
+          <div className={cn('w-8 h-8 rounded-md flex items-center justify-center border', config.color)}>
+            <Icon className="w-4 h-4" />
+          </div>
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-2">
+              <Badge className={cn('text-[10px] px-1.5 py-0', PRIORITY_COLORS[note.priority])}>
+                P{note.priority}
+              </Badge>
+              <span className="text-sm font-medium truncate">{note.title}</span>
+            </div>
+            <div className="flex items-center gap-2 mt-0.5">
+              {area && (
+                <span className="text-[10px] text-muted-foreground">{area.title}</span>
+              )}
+              {note.url && (
+                <a
+                  href={note.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-[10px] text-primary flex items-center gap-0.5 hover:underline"
+                  onClick={e => e.stopPropagation()}
+                >
+                  <ExternalLink className="w-2.5 h-2.5" />
+                  <span className="truncate max-w-[200px]">{note.url}</span>
+                </a>
+              )}
+            </div>
+          </div>
+          <button
+            onClick={(e) => { e.stopPropagation(); onDelete(note.id, note.title) }}
+            className="opacity-0 group-hover:opacity-100 transition-opacity p-1 hover:bg-destructive/10 rounded"
+          >
+            <Trash2 className="w-3.5 h-3.5 text-gatsaeng-red" />
+          </button>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

package/packages/gatsaeng-os/src/app/(dashboard)/page.tsx

@@ -0,0 +1,26 @@
+'use client'
+
+import { DashboardGrid } from '@/components/dashboard/DashboardGrid'
+import { WidgetCustomizer } from '@/components/dashboard/WidgetCustomizer'
+
+export default function DashboardPage() {
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex items-center justify-between mb-5">
+        <div>
+          <h1 className="text-xl font-bold text-foreground">
+            대시보드
+          </h1>
+          <p className="text-xs text-muted-foreground mt-0.5">
+            갓생 Mission Control
+          </p>
+        </div>
+        <WidgetCustomizer />
+      </div>
+
+      <div className="flex-1 overflow-auto">
+        <DashboardGrid />
+      </div>
+    </div>
+  )
+}

package/packages/gatsaeng-os/src/app/(dashboard)/projects/[id]/page.tsx

@@ -0,0 +1,86 @@
+'use client'
+
+import { use, useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { useTasks, useCreateTask, useUpdateTask } from '@/hooks/useProjects'
+import { ViewSwitcher } from '@/components/projects/ViewSwitcher'
+import { TaskForm } from '@/components/projects/TaskForm'
+import { KanbanView } from '@/components/projects/KanbanView'
+import { TableView } from '@/components/projects/TableView'
+import { ListView } from '@/components/projects/ListView'
+import { CalendarView } from '@/components/projects/CalendarView'
+import { Badge } from '@/components/ui/badge'
+import { ArrowLeft } from 'lucide-react'
+import Link from 'next/link'
+import type { Project, Task, ViewType, TaskStatus } from '@/types'
+
+export default function ProjectDetailPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = use(params)
+
+  const { data: project } = useQuery({
+    queryKey: ['project', id],
+    queryFn: async (): Promise<Project> => {
+      const res = await fetch(`/api/projects/${id}`)
+      return res.json()
+    },
+  })
+
+  const { data: tasks } = useTasks(id)
+  const createTask = useCreateTask()
+  const updateTask = useUpdateTask()
+
+  const [view, setView] = useState<ViewType>(project?.default_view ?? 'kanban')
+
+  const handleCreateTask = async (data: Partial<Task>) => {
+    await createTask.mutateAsync(data)
+  }
+
+  const handleUpdateTask = (data: { id: string; status: TaskStatus; position?: number }) => {
+    updateTask.mutate(data)
+  }
+
+  const allTasks = tasks ?? []
+
+  return (
+    <div className="max-w-6xl mx-auto">
+      <div className="mb-6">
+        <Link href="/projects" className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors mb-3">
+          <ArrowLeft className="w-3.5 h-3.5" />
+          프로젝트 목록
+        </Link>
+        <div className="flex items-center justify-between flex-wrap gap-3">
+          <div>
+            <div className="flex items-center gap-3">
+              <h1 className="text-2xl font-bold text-foreground">{project?.title ?? '...'}</h1>
+              {project && <Badge variant="outline">{project.status}</Badge>}
+            </div>
+            {project?.description && (
+              <p className="text-sm text-muted-foreground mt-1">{project.description}</p>
+            )}
+          </div>
+          <div className="flex items-center gap-3">
+            <ViewSwitcher value={view} onChange={setView} />
+            <TaskForm
+              projectId={id}
+              defaultStatus={view === 'kanban' ? 'backlog' : 'todo'}
+              onSubmit={handleCreateTask}
+            />
+          </div>
+        </div>
+      </div>
+
+      {view === 'kanban' && (
+        <KanbanView tasks={allTasks} onUpdateTask={handleUpdateTask} />
+      )}
+      {view === 'table' && (
+        <TableView tasks={allTasks} onUpdateTask={handleUpdateTask} />
+      )}
+      {view === 'list' && (
+        <ListView tasks={allTasks} onUpdateTask={handleUpdateTask} />
+      )}
+      {view === 'calendar' && (
+        <CalendarView tasks={allTasks} />
+      )}
+    </div>
+  )
+}