create-arete-workspace 0.2.0

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

@@ -0,0 +1,268 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { useBooks, useCreateBook, useUpdateBook, useDeleteBook } from '@/hooks/useBooks'
+import { useGoals } from '@/hooks/useGoals'
+import { Card, CardContent } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+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 { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { BookOpen, Plus, Star, Trash2, Minus } from 'lucide-react'
+import type { Book, BookStatus } from '@/types'
+
+const STATUS_LABELS: Record<BookStatus, string> = {
+  reading: '읽는 중',
+  want_to_read: '읽고 싶은',
+  completed: '완료',
+  dropped: '중단',
+}
+
+const STATUS_COLORS: Record<BookStatus, string> = {
+  reading: 'border-gatsaeng-teal text-gatsaeng-teal',
+  want_to_read: 'border-primary text-primary',
+  completed: 'border-gatsaeng-amber text-gatsaeng-amber',
+  dropped: 'border-muted-foreground text-muted-foreground',
+}
+
+export default function BooksPage() {
+  const router = useRouter()
+  const { data: books, isLoading } = useBooks()
+  const { data: goals } = useGoals()
+  const createBook = useCreateBook()
+  const updateBook = useUpdateBook()
+  const deleteBook = useDeleteBook()
+  const [open, setOpen] = useState(false)
+  const [tab, setTab] = useState<string>('all')
+
+  const filtered = (books ?? []).filter(b => tab === 'all' || b.status === tab)
+  const counts = {
+    all: (books ?? []).length,
+    reading: (books ?? []).filter(b => b.status === 'reading').length,
+    want_to_read: (books ?? []).filter(b => b.status === 'want_to_read').length,
+    completed: (books ?? []).filter(b => b.status === 'completed').length,
+  }
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    const form = new FormData(e.currentTarget)
+    await createBook.mutateAsync({
+      title: form.get('title') as string,
+      author: form.get('author') as string,
+      total_pages: Number(form.get('total_pages')) || undefined,
+      goal_id: (form.get('goal_id') as string) || undefined,
+      status: 'want_to_read',
+    })
+    setOpen(false)
+  }
+
+  const handleStatusChange = (book: Book, status: BookStatus) => {
+    const updates: Partial<Book> & { id: string } = { id: book.id, status }
+    if (status === 'reading' && !book.started_at) {
+      updates.started_at = new Date().toISOString()
+    }
+    if (status === 'completed') {
+      updates.finished_at = new Date().toISOString()
+      if (book.total_pages) updates.current_page = book.total_pages
+    }
+    updateBook.mutate(updates)
+  }
+
+  const handlePageUpdate = (book: Book, delta: number) => {
+    const newPage = Math.max(0, Math.min(book.total_pages ?? 9999, (book.current_page ?? 0) + delta))
+    updateBook.mutate({ id: book.id, current_page: newPage })
+  }
+
+  const handleRating = (book: Book, rating: number) => {
+    updateBook.mutate({ id: book.id, rating })
+  }
+
+  const handleDelete = (id: string) => {
+    if (!confirm('이 책을 삭제하시겠습니까?')) return
+    deleteBook.mutate(id)
+  }
+
+  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-gatsaeng-amber hover:bg-gatsaeng-amber/80 text-black">
+              <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>
+                <Label>저자</Label>
+                <Input name="author" required placeholder="저자 이름" />
+              </div>
+              <div>
+                <Label>전체 페이지</Label>
+                <Input name="total_pages" type="number" placeholder="300" />
+              </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>
+      </div>
+
+      <Tabs value={tab} onValueChange={setTab} className="mb-6">
+        <TabsList>
+          <TabsTrigger value="all">전체 ({counts.all})</TabsTrigger>
+          <TabsTrigger value="reading">읽는 중 ({counts.reading})</TabsTrigger>
+          <TabsTrigger value="want_to_read">읽고 싶은 ({counts.want_to_read})</TabsTrigger>
+          <TabsTrigger value="completed">완료 ({counts.completed})</TabsTrigger>
+        </TabsList>
+      </Tabs>
+
+      {isLoading ? (
+        <div className="space-y-3">
+          {[1, 2, 3].map(i => <div key={i} className="h-24 bg-card rounded-lg animate-pulse" />)}
+        </div>
+      ) : filtered.length === 0 ? (
+        <Card>
+          <CardContent className="py-12 text-center text-muted-foreground">
+            {tab === 'all' ? '아직 등록된 책이 없습니다' : `${STATUS_LABELS[tab as BookStatus]} 책이 없습니다`}
+          </CardContent>
+        </Card>
+      ) : (
+        <div className="space-y-3">
+          {filtered.map(book => {
+            const progress = book.total_pages
+              ? Math.min(100, Math.round(((book.current_page ?? 0) / book.total_pages) * 100))
+              : null
+            return (
+              <Card
+                key={book.id}
+                className="hover:border-primary/30 transition-colors cursor-pointer"
+                onClick={() => router.push(`/books/${book.id}`)}
+              >
+                <CardContent className="py-4">
+                  <div className="flex items-start gap-4">
+                    <div className="w-10 h-14 rounded bg-card border border-border flex items-center justify-center flex-shrink-0">
+                      <BookOpen className="w-5 h-5 text-muted-foreground" />
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2 mb-1">
+                        <h3 className="text-sm font-semibold text-foreground truncate">{book.title}</h3>
+                        <Badge variant="outline" className={STATUS_COLORS[book.status]}>
+                          {STATUS_LABELS[book.status]}
+                        </Badge>
+                      </div>
+                      <div className="text-xs text-muted-foreground mb-2">{book.author}</div>
+
+                      {/* Progress bar for reading books */}
+                      {book.status === 'reading' && book.total_pages && (
+                        <div className="flex items-center gap-2 mb-2">
+                          <div className="flex-1 h-1.5 bg-muted rounded-full overflow-hidden">
+                            <div
+                              className="h-full bg-gatsaeng-teal rounded-full transition-all"
+                              style={{ width: `${progress}%` }}
+                            />
+                          </div>
+                          <span className="text-xs text-muted-foreground min-w-[60px] text-right">
+                            {book.current_page ?? 0}/{book.total_pages}p
+                          </span>
+                          <div className="flex items-center gap-1">
+                            <Button
+                              variant="ghost" size="icon"
+                              className="h-6 w-6"
+                              onClick={(e) => { e.stopPropagation(); handlePageUpdate(book, -10) }}
+                            >
+                              <Minus className="w-3 h-3" />
+                            </Button>
+                            <Button
+                              variant="ghost" size="icon"
+                              className="h-6 w-6"
+                              onClick={(e) => { e.stopPropagation(); handlePageUpdate(book, 10) }}
+                            >
+                              <Plus className="w-3 h-3" />
+                            </Button>
+                          </div>
+                        </div>
+                      )}
+
+                      {/* Rating for completed books */}
+                      {book.status === 'completed' && (
+                        <div className="flex items-center gap-1 mb-2" onClick={e => e.stopPropagation()}>
+                          {[1, 2, 3, 4, 5].map(s => (
+                            <button
+                              key={s}
+                              onClick={() => handleRating(book, s)}
+                              className="p-0"
+                            >
+                              <Star
+                                className={`w-4 h-4 ${s <= (book.rating ?? 0)
+                                  ? 'fill-gatsaeng-amber text-gatsaeng-amber'
+                                  : 'text-muted-foreground'}`}
+                              />
+                            </button>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+
+                    <div className="flex items-center gap-1 flex-shrink-0" onClick={e => e.stopPropagation()}>
+                      <Select
+                        value={book.status}
+                        onValueChange={(v) => handleStatusChange(book, v as BookStatus)}
+                      >
+                        <SelectTrigger className="h-7 text-xs w-24">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="want_to_read">읽고 싶은</SelectItem>
+                          <SelectItem value="reading">읽는 중</SelectItem>
+                          <SelectItem value="completed">완료</SelectItem>
+                          <SelectItem value="dropped">중단</SelectItem>
+                        </SelectContent>
+                      </Select>
+                      <Button
+                        variant="ghost" size="icon"
+                        className="h-7 w-7 text-muted-foreground hover:text-gatsaeng-red"
+                        onClick={() => handleDelete(book.id)}
+                      >
+                        <Trash2 className="w-3.5 h-3.5" />
+                      </Button>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,379 @@
+'use client'
+
+import { useState, useMemo } from 'react'
+import { useCalendarEvents, useCreateCalendarEvent, useDeleteCalendarEvent } from '@/hooks/useCalendar'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Card, CardContent } from '@/components/ui/card'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { CalendarDays, Plus, ChevronLeft, ChevronRight, Trash2, Clock, MapPin } from 'lucide-react'
+import type { CalendarEvent, CalendarCategory } from '@/types'
+
+const DAY_NAMES = ['일', '월', '화', '수', '목', '금', '토']
+
+const CATEGORY_COLORS: Record<CalendarCategory, string> = {
+  work: 'bg-primary/20 text-primary border-primary/30',
+  personal: 'bg-gatsaeng-amber/20 text-gatsaeng-amber border-gatsaeng-amber/30',
+  health: 'bg-gatsaeng-teal/20 text-gatsaeng-teal border-gatsaeng-teal/30',
+  study: 'bg-gatsaeng-purple/20 text-gatsaeng-purple border-gatsaeng-purple/30',
+  social: 'bg-pink-500/20 text-pink-400 border-pink-500/30',
+  other: 'bg-muted text-muted-foreground border-border',
+}
+
+const CATEGORY_LABELS: Record<CalendarCategory, string> = {
+  work: '업무',
+  personal: '개인',
+  health: '건강',
+  study: '학습',
+  social: '사교',
+  other: '기타',
+}
+
+function formatDate(d: Date) {
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
+}
+
+function getWeekDates(baseDate: Date) {
+  const day = baseDate.getDay()
+  const monday = new Date(baseDate)
+  monday.setDate(baseDate.getDate() - ((day + 6) % 7))
+  return Array.from({ length: 7 }, (_, i) => {
+    const d = new Date(monday)
+    d.setDate(monday.getDate() + i)
+    return d
+  })
+}
+
+function getMonthGrid(year: number, month: number) {
+  const firstDay = new Date(year, month, 1)
+  const lastDay = new Date(year, month + 1, 0)
+  const startOffset = (firstDay.getDay() + 6) % 7 // Monday=0
+  const dates: (Date | null)[] = []
+  for (let i = 0; i < startOffset; i++) dates.push(null)
+  for (let d = 1; d <= lastDay.getDate(); d++) dates.push(new Date(year, month, d))
+  while (dates.length % 7 !== 0) dates.push(null)
+  return dates
+}
+
+function EventCard({ event, onDelete }: { event: CalendarEvent; onDelete: (id: string) => void }) {
+  return (
+    <div
+      className={`rounded px-1.5 py-1 text-[10px] leading-tight border group relative ${
+        CATEGORY_COLORS[event.category ?? 'other']
+      }`}
+      onClick={(e) => e.stopPropagation()}
+    >
+      <div className="font-medium truncate">{event.title}</div>
+      {event.time_start && (
+        <div className="flex items-center gap-0.5 opacity-70">
+          <Clock className="w-2.5 h-2.5" />
+          {event.time_start}{event.time_end ? `–${event.time_end}` : ''}
+        </div>
+      )}
+      {event.location && (
+        <div className="flex items-center gap-0.5 opacity-70">
+          <MapPin className="w-2.5 h-2.5" />
+          <span className="truncate">{event.location}</span>
+        </div>
+      )}
+      <button
+        className="absolute top-0.5 right-0.5 opacity-0 group-hover:opacity-100 transition-opacity"
+        onClick={() => onDelete(event.id)}
+      >
+        <Trash2 className="w-3 h-3 text-gatsaeng-red" />
+      </button>
+    </div>
+  )
+}
+
+export default function CalendarPage() {
+  const [viewMode, setViewMode] = useState<'week' | 'month'>('week')
+  const [weekOffset, setWeekOffset] = useState(0)
+  const [monthOffset, setMonthOffset] = useState(0)
+  const [open, setOpen] = useState(false)
+  const [selectedDate, setSelectedDate] = useState<string | null>(null)
+
+  const createEvent = useCreateCalendarEvent()
+  const deleteEvent = useDeleteCalendarEvent()
+  const today = formatDate(new Date())
+
+  // Week view dates
+  const weekBase = useMemo(() => {
+    const d = new Date()
+    d.setDate(d.getDate() + weekOffset * 7)
+    return d
+  }, [weekOffset])
+  const weekDates = useMemo(() => getWeekDates(weekBase), [weekBase])
+
+  // Month view dates
+  const monthDate = useMemo(() => {
+    const d = new Date()
+    d.setMonth(d.getMonth() + monthOffset)
+    return d
+  }, [monthOffset])
+  const monthGrid = useMemo(() => getMonthGrid(monthDate.getFullYear(), monthDate.getMonth()), [monthDate])
+
+  // Calculate range for query
+  const rangeStart = useMemo(() => {
+    if (viewMode === 'week') return formatDate(weekDates[0])
+    const first = monthGrid.find(d => d !== null)
+    return first ? formatDate(first) : formatDate(new Date(monthDate.getFullYear(), monthDate.getMonth(), 1))
+  }, [viewMode, weekDates, monthGrid, monthDate])
+
+  const rangeEnd = useMemo(() => {
+    if (viewMode === 'week') return formatDate(weekDates[6])
+    const nonNull = monthGrid.filter((d): d is Date => d !== null)
+    const last = nonNull[nonNull.length - 1]
+    return last ? formatDate(last) : formatDate(new Date(monthDate.getFullYear(), monthDate.getMonth() + 1, 0))
+  }, [viewMode, weekDates, monthGrid, monthDate])
+
+  const { data: events = [], isLoading } = useCalendarEvents(rangeStart, rangeEnd)
+
+  const eventsByDate = useMemo(() => {
+    const map: Record<string, CalendarEvent[]> = {}
+    for (const e of events) {
+      if (!map[e.date]) map[e.date] = []
+      map[e.date].push(e)
+    }
+    return map
+  }, [events])
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    const form = new FormData(e.currentTarget)
+    await createEvent.mutateAsync({
+      title: form.get('title') as string,
+      date: (form.get('date') as string) || selectedDate || today,
+      time_start: (form.get('time_start') as string) || undefined,
+      time_end: (form.get('time_end') as string) || undefined,
+      category: (form.get('category') as CalendarCategory) || 'other',
+      location: (form.get('location') as string) || undefined,
+      description: (form.get('description') as string) || undefined,
+      all_day: !(form.get('time_start') as string),
+      created_by: 'user',
+    })
+    setOpen(false)
+    setSelectedDate(null)
+  }
+
+  const handleDelete = (id: string) => {
+    if (!confirm('이 일정을 삭제하시겠습니까?')) return
+    deleteEvent.mutate(id)
+  }
+
+  const handlePrev = () => viewMode === 'week' ? setWeekOffset(w => w - 1) : setMonthOffset(m => m - 1)
+  const handleNext = () => viewMode === 'week' ? setWeekOffset(w => w + 1) : setMonthOffset(m => m + 1)
+  const handleToday = () => { setWeekOffset(0); setMonthOffset(0) }
+
+  const navLabel = viewMode === 'week'
+    ? `${weekDates[0].getMonth() + 1}/${weekDates[0].getDate()} — ${weekDates[6].getMonth() + 1}/${weekDates[6].getDate()}`
+    : `${monthDate.getFullYear()}년 ${monthDate.getMonth() + 1}월`
+
+  const showTodayBtn = viewMode === 'week' ? weekOffset !== 0 : monthOffset !== 0
+
+  return (
+    <div className="max-w-5xl 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>
+        <div className="flex items-center gap-2">
+          <Tabs value={viewMode} onValueChange={(v) => setViewMode(v as 'week' | 'month')}>
+            <TabsList>
+              <TabsTrigger value="week">주간</TabsTrigger>
+              <TabsTrigger value="month">월간</TabsTrigger>
+            </TabsList>
+          </Tabs>
+          <Dialog open={open} onOpenChange={setOpen}>
+            <DialogTrigger asChild>
+              <Button className="bg-gatsaeng-amber hover:bg-gatsaeng-amber/80 text-black">
+                <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>
+                    <Input name="date" type="date" defaultValue={selectedDate || today} />
+                  </div>
+                  <div>
+                    <Label>카테고리</Label>
+                    <Select name="category" defaultValue="other">
+                      <SelectTrigger><SelectValue /></SelectTrigger>
+                      <SelectContent>
+                        {(Object.keys(CATEGORY_LABELS) as CalendarCategory[]).map(cat => (
+                          <SelectItem key={cat} value={cat}>{CATEGORY_LABELS[cat]}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <Label>시작 시간</Label>
+                    <Input name="time_start" type="time" />
+                  </div>
+                  <div>
+                    <Label>종료 시간</Label>
+                    <Input name="time_end" type="time" />
+                  </div>
+                </div>
+                <div>
+                  <Label>장소</Label>
+                  <Input name="location" placeholder="장소 (선택)" />
+                </div>
+                <div>
+                  <Label>메모</Label>
+                  <Input name="description" placeholder="메모 (선택)" />
+                </div>
+                <Button type="submit" className="w-full bg-gatsaeng-amber hover:bg-gatsaeng-amber/80 text-black">
+                  추가
+                </Button>
+              </form>
+            </DialogContent>
+          </Dialog>
+        </div>
+      </div>
+
+      {/* Navigation */}
+      <div className="flex items-center justify-between mb-4">
+        <Button variant="ghost" size="icon" onClick={handlePrev}>
+          <ChevronLeft className="w-4 h-4" />
+        </Button>
+        <div className="flex items-center gap-2">
+          <CalendarDays className="w-4 h-4 text-muted-foreground" />
+          <span className="text-sm font-medium">{navLabel}</span>
+          {showTodayBtn && (
+            <Button variant="ghost" size="sm" className="text-xs h-6" onClick={handleToday}>
+              오늘
+            </Button>
+          )}
+        </div>
+        <Button variant="ghost" size="icon" onClick={handleNext}>
+          <ChevronRight className="w-4 h-4" />
+        </Button>
+      </div>
+
+      {/* Calendar grid */}
+      {isLoading ? (
+        <div className="grid grid-cols-7 gap-2">
+          {Array.from({ length: viewMode === 'week' ? 7 : 35 }, (_, i) => (
+            <div key={i} className={`${viewMode === 'week' ? 'h-40' : 'h-24'} bg-card rounded-lg animate-pulse`} />
+          ))}
+        </div>
+      ) : viewMode === 'week' ? (
+        /* Weekly view */
+        <div className="grid grid-cols-7 gap-2">
+          {weekDates.map((date, i) => {
+            const dateStr = formatDate(date)
+            const dayEvents = eventsByDate[dateStr] || []
+            const isToday = dateStr === today
+            const isWeekend = i >= 5
+
+            return (
+              <div
+                key={dateStr}
+                className={`min-h-[160px] rounded-lg border p-2 transition-colors cursor-pointer hover:border-primary/50 ${
+                  isToday ? 'border-gatsaeng-amber/50 bg-gatsaeng-amber/5' : 'border-border bg-card'
+                }`}
+                onClick={() => { setSelectedDate(dateStr); setOpen(true) }}
+              >
+                <div className="flex items-center justify-between mb-2">
+                  <span className={`text-xs font-medium ${isWeekend ? 'text-gatsaeng-red' : 'text-muted-foreground'}`}>
+                    {DAY_NAMES[date.getDay()]}
+                  </span>
+                  <span className={`text-sm font-bold ${isToday ? 'text-gatsaeng-amber' : 'text-foreground'}`}>
+                    {date.getDate()}
+                  </span>
+                </div>
+                <div className="space-y-1">
+                  {dayEvents.map(event => (
+                    <EventCard key={event.id} event={event} onDelete={handleDelete} />
+                  ))}
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      ) : (
+        /* Monthly view */
+        <>
+          <div className="grid grid-cols-7 gap-px mb-1">
+            {['월', '화', '수', '목', '금', '토', '일'].map(d => (
+              <div key={d} className={`text-center text-[10px] font-medium py-1 ${
+                d === '토' || d === '일' ? 'text-gatsaeng-red' : 'text-muted-foreground'
+              }`}>
+                {d}
+              </div>
+            ))}
+          </div>
+          <div className="grid grid-cols-7 gap-1">
+            {monthGrid.map((date, i) => {
+              if (!date) return <div key={`empty-${i}`} className="min-h-[90px]" />
+              const dateStr = formatDate(date)
+              const dayEvents = eventsByDate[dateStr] || []
+              const isToday = dateStr === today
+              const dayOfWeek = (i % 7)
+              const isWeekend = dayOfWeek >= 5
+
+              return (
+                <div
+                  key={dateStr}
+                  className={`min-h-[90px] rounded-md border p-1 transition-colors cursor-pointer hover:border-primary/50 ${
+                    isToday ? 'border-gatsaeng-amber/50 bg-gatsaeng-amber/5' : 'border-border/50 bg-card'
+                  }`}
+                  onClick={() => { setSelectedDate(dateStr); setOpen(true) }}
+                >
+                  <div className={`text-xs font-bold mb-1 ${
+                    isToday ? 'text-gatsaeng-amber' : isWeekend ? 'text-gatsaeng-red/70' : 'text-foreground'
+                  }`}>
+                    {date.getDate()}
+                  </div>
+                  <div className="space-y-0.5">
+                    {dayEvents.slice(0, 3).map(event => (
+                      <div
+                        key={event.id}
+                        className={`rounded px-1 py-0.5 text-[9px] leading-tight truncate border ${
+                          CATEGORY_COLORS[event.category ?? 'other']
+                        }`}
+                        onClick={(e) => e.stopPropagation()}
+                        title={`${event.title}${event.time_start ? ` ${event.time_start}` : ''}`}
+                      >
+                        {event.title}
+                      </div>
+                    ))}
+                    {dayEvents.length > 3 && (
+                      <div className="text-[9px] text-muted-foreground pl-1">+{dayEvents.length - 3}</div>
+                    )}
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        </>
+      )}
+
+      {/* Legend */}
+      <div className="flex gap-3 mt-4 flex-wrap">
+        {(Object.keys(CATEGORY_LABELS) as CalendarCategory[]).map(cat => (
+          <div key={cat} className="flex items-center gap-1.5">
+            <div className={`w-2.5 h-2.5 rounded-sm ${CATEGORY_COLORS[cat].split(' ')[0]}`} />
+            <span className="text-[10px] text-muted-foreground">{CATEGORY_LABELS[cat]}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,30 @@
+'use client'
+
+import { useEffect } from 'react'
+
+export default function DashboardError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  useEffect(() => {
+    console.error('[DashboardError]', error)
+  }, [error])
+
+  return (
+    <div className="flex flex-col items-center justify-center h-full gap-4 p-8">
+      <h2 className="text-lg font-bold text-red-500">Dashboard Error</h2>
+      <p className="text-xs text-red-400 bg-red-950/30 p-4 rounded-lg max-w-lg overflow-auto">
+        {error.message}
+      </p>
+      <button
+        onClick={reset}
+        className="px-4 py-2 rounded bg-primary text-primary-foreground text-sm"
+      >
+        다시 시도
+      </button>
+    </div>
+  )
+}