create-arete-workspace 0.2.0

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

@@ -0,0 +1,215 @@
+'use client'
+
+import { use } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { useGoals } from '@/hooks/useGoals'
+import { useProjects } from '@/hooks/useProjects'
+import { useNotes } from '@/hooks/useNotes'
+import { DDayBadge } from '@/components/tasks/DDayBadge'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { Progress } from '@/components/ui/progress'
+import { Button } from '@/components/ui/button'
+import Link from 'next/link'
+import {
+  ArrowLeft,
+  Target,
+  FolderKanban,
+  StickyNote,
+  RotateCcw,
+} from 'lucide-react'
+import type { Area, Routine } from '@/types'
+
+export default function AreaDetailPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = use(params)
+
+  const { data: area, isLoading } = useQuery({
+    queryKey: ['areas', id],
+    queryFn: async (): Promise<Area> => {
+      const res = await fetch(`/api/areas/${id}`)
+      return res.json()
+    },
+  })
+
+  const { data: goals = [] } = useGoals()
+  const { data: projects = [] } = useProjects()
+  const { data: notes = [] } = useNotes(undefined, id)
+  const { data: routines = [] } = useQuery({
+    queryKey: ['routines'],
+    queryFn: async (): Promise<Routine[]> => {
+      const res = await fetch('/api/routines')
+      return res.json()
+    },
+  })
+
+  const areaGoals = goals.filter(g => g.area_id === id)
+  const areaProjects = projects.filter(p => areaGoals.some(g => g.linked_projects?.includes(p.id)) || p.goal_id && areaGoals.some(g => g.id === p.goal_id))
+  const areaRoutines = routines.filter(r => r.area_id === id || r.goal_id && areaGoals.some(g => g.id === r.goal_id))
+
+  if (isLoading) {
+    return (
+      <div className="max-w-4xl mx-auto space-y-4">
+        {[1, 2, 3].map(i => <div key={i} className="h-24 bg-card rounded-lg animate-pulse" />)}
+      </div>
+    )
+  }
+
+  if (!area) {
+    return (
+      <div className="max-w-4xl mx-auto text-center py-12 text-muted-foreground">
+        영역을 찾을 수 없습니다
+      </div>
+    )
+  }
+
+  return (
+    <div className="max-w-4xl mx-auto">
+      <Link href="/areas" className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground mb-4">
+        <ArrowLeft className="w-4 h-4" /> 영역 목록
+      </Link>
+
+      <div className="flex items-center gap-3 mb-8">
+        <span className="text-3xl">{area.icon}</span>
+        <div>
+          <h1 className="text-2xl font-bold text-foreground">{area.title}</h1>
+          <p className="text-sm text-muted-foreground">
+            목표 {areaGoals.length} · 프로젝트 {areaProjects.length} · 루틴 {areaRoutines.length} · 노트 {notes.length}
+          </p>
+        </div>
+      </div>
+
+      <div className="space-y-8">
+        {/* Goals */}
+        <section>
+          <div className="flex items-center gap-2 mb-3">
+            <Target className="w-4 h-4 text-muted-foreground" />
+            <h2 className="text-sm font-medium">목표</h2>
+            <Badge variant="outline" className="text-[10px]">{areaGoals.length}</Badge>
+          </div>
+          {areaGoals.length === 0 ? (
+            <p className="text-xs text-muted-foreground pl-6">연결된 목표가 없습니다</p>
+          ) : (
+            <div className="space-y-2">
+              {areaGoals.map(goal => {
+                const progress = goal.target_value && goal.current_value !== undefined
+                  ? Math.round(((goal.current_value ?? 0) / goal.target_value) * 100)
+                  : null
+                return (
+                  <Link key={goal.id} href={`/goals/${goal.id}`}>
+                    <Card className="hover:border-primary/30 transition-colors">
+                      <CardContent className="py-3 px-4">
+                        <div className="flex items-center gap-3">
+                          <div className="w-3 h-3 rounded-full flex-shrink-0" style={{ backgroundColor: goal.color }} />
+                          <div className="flex-1 min-w-0">
+                            <div className="flex items-center gap-2">
+                              <span className="text-sm font-medium truncate">{goal.title}</span>
+                              <Badge variant="outline" className="text-[10px]">{goal.status}</Badge>
+                            </div>
+                            {progress !== null && (
+                              <div className="flex items-center gap-2 mt-1.5">
+                                <Progress value={progress} className="h-1.5 flex-1" />
+                                <span className="text-[10px] text-muted-foreground tabular-nums">{progress}%</span>
+                              </div>
+                            )}
+                          </div>
+                          {goal.due_date && <DDayBadge dueDate={goal.due_date} />}
+                        </div>
+                      </CardContent>
+                    </Card>
+                  </Link>
+                )
+              })}
+            </div>
+          )}
+        </section>
+
+        {/* Projects */}
+        <section>
+          <div className="flex items-center gap-2 mb-3">
+            <FolderKanban className="w-4 h-4 text-muted-foreground" />
+            <h2 className="text-sm font-medium">프로젝트</h2>
+            <Badge variant="outline" className="text-[10px]">{areaProjects.length}</Badge>
+          </div>
+          {areaProjects.length === 0 ? (
+            <p className="text-xs text-muted-foreground pl-6">연결된 프로젝트가 없습니다</p>
+          ) : (
+            <div className="space-y-2">
+              {areaProjects.map(project => (
+                <Link key={project.id} href={`/projects/${project.id}`}>
+                  <Card className="hover:border-primary/30 transition-colors">
+                    <CardContent className="py-3 px-4">
+                      <div className="flex items-center gap-3">
+                        <div className="w-3 h-3 rounded-full flex-shrink-0" style={{ backgroundColor: project.color }} />
+                        <span className="text-sm font-medium truncate flex-1">{project.title}</span>
+                        <Badge variant="outline" className="text-[10px]">{project.status}</Badge>
+                        {project.due_date && <DDayBadge dueDate={project.due_date} />}
+                      </div>
+                    </CardContent>
+                  </Card>
+                </Link>
+              ))}
+            </div>
+          )}
+        </section>
+
+        {/* Routines */}
+        <section>
+          <div className="flex items-center gap-2 mb-3">
+            <RotateCcw className="w-4 h-4 text-muted-foreground" />
+            <h2 className="text-sm font-medium">루틴</h2>
+            <Badge variant="outline" className="text-[10px]">{areaRoutines.length}</Badge>
+          </div>
+          {areaRoutines.length === 0 ? (
+            <p className="text-xs text-muted-foreground pl-6">연결된 루틴이 없습니다</p>
+          ) : (
+            <div className="space-y-2">
+              {areaRoutines.map(routine => (
+                <Card key={routine.id}>
+                  <CardContent className="py-3 px-4">
+                    <div className="flex items-center gap-3">
+                      <RotateCcw className="w-4 h-4 text-muted-foreground flex-shrink-0" />
+                      <span className="text-sm font-medium truncate flex-1">{routine.title}</span>
+                      {routine.streak > 0 && (
+                        <Badge variant="outline" className="text-[10px]">🔥 {routine.streak}일</Badge>
+                      )}
+                      <Badge variant={routine.is_active ? 'default' : 'secondary'} className="text-[10px]">
+                        {routine.is_active ? '활성' : '중단'}
+                      </Badge>
+                    </div>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          )}
+        </section>
+
+        {/* Notes */}
+        <section>
+          <div className="flex items-center gap-2 mb-3">
+            <StickyNote className="w-4 h-4 text-muted-foreground" />
+            <h2 className="text-sm font-medium">노트</h2>
+            <Badge variant="outline" className="text-[10px]">{notes.length}</Badge>
+          </div>
+          {notes.length === 0 ? (
+            <p className="text-xs text-muted-foreground pl-6">연결된 노트가 없습니다</p>
+          ) : (
+            <div className="space-y-2">
+              {notes.map((note: { id: string; title: string; type: string; priority: number }) => (
+                <Card key={note.id}>
+                  <CardContent className="py-3 px-4">
+                    <div className="flex items-center gap-3">
+                      <StickyNote className="w-4 h-4 text-muted-foreground flex-shrink-0" />
+                      <span className="text-sm font-medium truncate flex-1">{note.title}</span>
+                      <Badge variant="outline" className="text-[10px]">P{note.priority}</Badge>
+                      <Badge variant="secondary" className="text-[10px]">{note.type}</Badge>
+                    </div>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          )}
+        </section>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,161 @@
+'use client'
+
+import { useState } from 'react'
+import { useAreas, useCreateArea, useDeleteArea } from '@/hooks/useAreas'
+import { useGoals } from '@/hooks/useGoals'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { Input } from '@/components/ui/input'
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
+import { Plus, Target, Layers, Trash2 } from 'lucide-react'
+import Link from 'next/link'
+import type { Area } from '@/types'
+
+const AREA_ICONS = ['💪', '💼', '📈', '🧠', '🎨', '❤️', '🌱', '📚']
+
+export default function AreasPage() {
+  const { data: areas = [], isLoading } = useAreas()
+  const { data: goals = [] } = useGoals()
+  const createArea = useCreateArea()
+  const deleteArea = useDeleteArea()
+
+  const [open, setOpen] = useState(false)
+  const [title, setTitle] = useState('')
+  const [icon, setIcon] = useState('💪')
+
+  const handleCreate = () => {
+    if (!title.trim() || createArea.isPending) return
+    createArea.mutate(
+      { title: title.trim(), icon, status: 'active', linked_goals: [] },
+      { onSuccess: () => { setOpen(false); setTitle(''); setIcon('💪') } }
+    )
+  }
+
+  const activeGoals = (areaId: string) =>
+    goals.filter(g => g.area_id === areaId && g.status === 'active')
+
+  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 flex items-center gap-2">
+            <Layers className="w-6 h-6" />
+            영역 (Areas)
+          </h1>
+          <p className="text-sm text-muted-foreground mt-1">
+            인생의 핵심 영역을 관리합니다
+          </p>
+        </div>
+        <Dialog open={open} onOpenChange={setOpen}>
+          <DialogTrigger asChild>
+            <Button size="sm" className="gap-1">
+              <Plus className="w-4 h-4" /> 영역 추가
+            </Button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>새 영역 추가</DialogTitle>
+            </DialogHeader>
+            <div className="space-y-4 mt-2">
+              <div>
+                <label className="text-sm text-muted-foreground">아이콘</label>
+                <div className="flex gap-2 mt-1">
+                  {AREA_ICONS.map(i => (
+                    <button
+                      key={i}
+                      onClick={() => setIcon(i)}
+                      className={`w-10 h-10 rounded-lg text-xl flex items-center justify-center transition-colors ${
+                        icon === i ? 'bg-primary/20 ring-2 ring-primary' : 'bg-card hover:bg-muted'
+                      }`}
+                    >
+                      {i}
+                    </button>
+                  ))}
+                </div>
+              </div>
+              <div>
+                <label className="text-sm text-muted-foreground">영역 이름</label>
+                <Input
+                  value={title}
+                  onChange={e => setTitle(e.target.value)}
+                  placeholder="예: 건강/커리어/마케팅"
+                  className="mt-1"
+                  onKeyDown={e => e.key === 'Enter' && handleCreate()}
+                />
+              </div>
+              <Button onClick={handleCreate} disabled={!title.trim() || createArea.isPending} className="w-full">
+                추가
+              </Button>
+            </div>
+          </DialogContent>
+        </Dialog>
+      </div>
+
+      {isLoading ? (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {[1, 2, 3].map(i => <div key={i} className="h-32 bg-card rounded-lg animate-pulse" />)}
+        </div>
+      ) : areas.length === 0 ? (
+        <Card>
+          <CardContent className="py-12 text-center text-muted-foreground">
+            아직 영역이 없습니다. 인생의 핵심 영역을 추가해보세요.
+          </CardContent>
+        </Card>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {areas.map(area => {
+            const linkedGoals = activeGoals(area.id)
+            return (
+              <Link key={area.id} href={`/areas/${area.id}`}>
+              <Card className="group hover:border-primary/30 transition-colors cursor-pointer">
+                <CardHeader className="pb-2">
+                  <CardTitle className="flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                      <span className="text-xl">{area.icon}</span>
+                      <span className="text-lg">{area.title}</span>
+                    </div>
+                    <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-7 w-7 text-muted-foreground hover:text-gatsaeng-red"
+                        onClick={(e) => { e.preventDefault(); deleteArea.mutate(area.id) }}
+                      >
+                        <Trash2 className="w-3.5 h-3.5" />
+                      </Button>
+                    </div>
+                  </CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <div className="flex items-center gap-1 text-xs text-muted-foreground mb-3">
+                    <Target className="w-3 h-3" />
+                    연결된 목표 {linkedGoals.length}개
+                  </div>
+                  {linkedGoals.length > 0 ? (
+                    <div className="space-y-2">
+                      {linkedGoals.map(g => (
+                        <Link key={g.id} href={`/goals/${g.id}`} className="flex items-center gap-2 text-sm hover:text-primary transition-colors">
+                          <div className="w-2 h-2 rounded-full" style={{ backgroundColor: g.color }} />
+                          <span className="truncate">{g.title}</span>
+                          {g.target_value && g.current_value !== undefined && (
+                            <Badge variant="outline" className="ml-auto text-[10px]">
+                              {Math.round(((g.current_value ?? 0) / g.target_value) * 100)}%
+                            </Badge>
+                          )}
+                        </Link>
+                      ))}
+                    </div>
+                  ) : (
+                    <p className="text-xs text-muted-foreground">연결된 목표가 없습니다.</p>
+                  )}
+                </CardContent>
+              </Card>
+              </Link>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,215 @@
+'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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { ArrowLeft, Trash2, Star } from 'lucide-react'
+import { useBook, useUpdateBook, useDeleteBook } from '@/hooks/useBooks'
+import { TiptapEditor } from '@/components/editor/TiptapEditor'
+import { PinButton } from '@/components/shared/PinButton'
+import { cn } from '@/lib/utils'
+import type { BookStatus } from '@/types'
+
+const STATUS_LABELS: Record<BookStatus, string> = {
+  reading: '읽는 중',
+  completed: '완독',
+  want_to_read: '읽고 싶은',
+  dropped: '중단',
+}
+
+const STATUS_COLORS: Record<BookStatus, string> = {
+  reading: 'border-gatsaeng-teal/30 text-gatsaeng-teal',
+  completed: 'border-primary/30 text-primary',
+  want_to_read: 'border-gatsaeng-amber/30 text-gatsaeng-amber',
+  dropped: 'border-muted-foreground/30 text-muted-foreground',
+}
+
+export default function BookDetailPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = use(params)
+  const router = useRouter()
+  const { data: book, isLoading } = useBook(id)
+  const updateBook = useUpdateBook()
+  const deleteBook = useDeleteBook()
+  const [editingTitle, setEditingTitle] = useState(false)
+  const [titleValue, setTitleValue] = useState('')
+
+  const handleTitleSave = useCallback(() => {
+    if (!book || !titleValue.trim()) return
+    if (titleValue !== book.title) {
+      updateBook.mutate({ id, title: titleValue })
+    }
+    setEditingTitle(false)
+  }, [id, book, titleValue, updateBook])
+
+  const handleContentSave = useCallback((markdown: string) => {
+    updateBook.mutate({ id, content: markdown })
+  }, [id, updateBook])
+
+  const handleDelete = () => {
+    if (!confirm('이 책을 삭제하시겠습니까?')) return
+    deleteBook.mutate(id, {
+      onSuccess: () => router.push('/books'),
+    })
+  }
+
+  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 (!book) {
+    return (
+      <div className="text-center py-20">
+        <p className="text-muted-foreground">책을 찾을 수 없습니다</p>
+        <Button variant="outline" className="mt-4" onClick={() => router.push('/books')}>
+          <ArrowLeft className="w-4 h-4 mr-2" /> 돌아가기
+        </Button>
+      </div>
+    )
+  }
+
+  const progress = book.total_pages && book.current_page
+    ? Math.round((book.current_page / book.total_pages) * 100)
+    : null
+
+  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('/books')}>
+          <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(book.title)
+                setEditingTitle(true)
+              }}
+              title="더블클릭하여 편집"
+            >
+              {book.title}
+            </h1>
+          )}
+          <p className="text-sm text-muted-foreground">{book.author}</p>
+        </div>
+        <PinButton type="book" id={id} title={book.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>
+
+      {/* Properties */}
+      <Card className="mb-6">
+        <CardContent className="py-4">
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="text-xs text-muted-foreground mb-1 block">상태</label>
+              <Select
+                value={book.status}
+                onValueChange={(v) => updateBook.mutate({ id, status: v as BookStatus })}
+              >
+                <SelectTrigger className="h-8 text-sm">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {Object.entries(STATUS_LABELS).map(([k, v]) => (
+                    <SelectItem key={k} value={k}>{v}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div>
+              <label className="text-xs text-muted-foreground mb-1 block">평점</label>
+              <div className="flex items-center gap-1">
+                {[1, 2, 3, 4, 5].map(n => (
+                  <button
+                    key={n}
+                    onClick={() => updateBook.mutate({ id, rating: n })}
+                    className="transition-colors"
+                  >
+                    <Star
+                      className={cn(
+                        'w-5 h-5',
+                        n <= (book.rating ?? 0)
+                          ? 'text-gatsaeng-amber fill-gatsaeng-amber'
+                          : 'text-muted-foreground/30'
+                      )}
+                    />
+                  </button>
+                ))}
+              </div>
+            </div>
+            <div>
+              <label className="text-xs text-muted-foreground mb-1 block">현재 페이지</label>
+              <Input
+                type="number"
+                value={book.current_page ?? ''}
+                onChange={(e) => updateBook.mutate({ id, current_page: Number(e.target.value) || 0 })}
+                className="h-8 text-sm"
+                placeholder="0"
+              />
+            </div>
+            <div>
+              <label className="text-xs text-muted-foreground mb-1 block">총 페이지</label>
+              <Input
+                type="number"
+                value={book.total_pages ?? ''}
+                onChange={(e) => updateBook.mutate({ id, total_pages: Number(e.target.value) || 0 })}
+                className="h-8 text-sm"
+                placeholder="0"
+              />
+            </div>
+          </div>
+
+          {/* Progress bar */}
+          {progress !== null && (
+            <div className="mt-4">
+              <div className="flex items-center justify-between text-xs text-muted-foreground mb-1">
+                <span>진행률</span>
+                <span>{progress}%</span>
+              </div>
+              <div className="h-2 bg-muted rounded-full overflow-hidden">
+                <div
+                  className="h-full bg-gatsaeng-teal rounded-full transition-all"
+                  style={{ width: `${Math.min(progress, 100)}%` }}
+                />
+              </div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Editor */}
+      <Card>
+        <CardContent className="p-0">
+          <TiptapEditor
+            content={book._content ?? ''}
+            onSave={handleContentSave}
+            placeholder="독서 노트를 작성하세요..."
+          />
+        </CardContent>
+      </Card>
+    </div>
+  )
+}