create-arete-workspace 0.2.0

package/packages/gatsaeng-os/src/components/dashboard/RoutineChecklist.tsx

@@ -0,0 +1,81 @@
+'use client'
+
+import { WidgetWrapper } from './WidgetWrapper'
+import { Checkbox } from '@/components/ui/checkbox'
+import { Badge } from '@/components/ui/badge'
+import { RotateCcw } from 'lucide-react'
+import { useRoutines, useToggleRoutine } from '@/hooks/useRoutines'
+import { cn } from '@/lib/utils'
+import type { RoutineWithStatus } from '@/types'
+
+export function RoutineChecklist() {
+  const { chains, isLoading } = useRoutines()
+  const toggleMutation = useToggleRoutine()
+
+  const handleToggle = (routine: RoutineWithStatus) => {
+    toggleMutation.mutate({
+      routineId: routine.id,
+      completed: routine.completed_today,
+    })
+  }
+
+  if (isLoading) {
+    return (
+      <WidgetWrapper title="오늘의 루틴" icon={<RotateCcw className="w-4 h-4" />}>
+        <div className="space-y-3">
+          {[1, 2, 3].map(i => (
+            <div key={i} className="h-8 bg-muted rounded animate-pulse" />
+          ))}
+        </div>
+      </WidgetWrapper>
+    )
+  }
+
+  return (
+    <WidgetWrapper title="오늘의 루틴" icon={<RotateCcw className="w-4 h-4" />}>
+      {chains.length === 0 ? (
+        <p className="text-sm text-muted-foreground">루틴을 추가해보세요</p>
+      ) : (
+        <div className="space-y-4">
+          {chains.map((chain) => (
+            <div key={chain.map(r => r.id).join('-')} className="space-y-1">
+              {chain.map((routine, i) => (
+                <div
+                  key={routine.id}
+                  className={cn(
+                    'flex items-center gap-3 px-3 py-2 rounded-md transition-colors',
+                    routine.completed_today ? 'bg-gatsaeng-teal/10' : 'hover:bg-card'
+                  )}
+                >
+                  {i > 0 && (
+                    <div className="w-4 flex justify-center">
+                      <div className="w-px h-3 bg-border -mt-4" />
+                    </div>
+                  )}
+                  <Checkbox
+                    checked={routine.completed_today}
+                    onCheckedChange={() => handleToggle(routine)}
+                  />
+                  <span className={cn(
+                    'text-sm flex-1',
+                    routine.completed_today && 'line-through text-muted-foreground'
+                  )}>
+                    {routine.title}
+                  </span>
+                  {routine.trigger_cue && (
+                    <span className="text-xs text-muted-foreground">{routine.trigger_cue}</span>
+                  )}
+                  {routine.streak > 0 && (
+                    <Badge variant="outline" className="text-gatsaeng-amber border-gatsaeng-amber/30 text-xs">
+                      {routine.streak}일
+                    </Badge>
+                  )}
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+      )}
+    </WidgetWrapper>
+  )
+}

package/packages/gatsaeng-os/src/components/dashboard/TimingWidget.tsx

@@ -0,0 +1,86 @@
+'use client'
+
+import { useCurrentTiming } from '@/hooks/useTiming'
+import { WidgetWrapper } from './WidgetWrapper'
+import { Compass } from 'lucide-react'
+import { Badge } from '@/components/ui/badge'
+
+const RATING_LABELS = ['', '주의', '신중', '보통', '유리', '최적']
+const RATING_COLORS = ['', 'text-gatsaeng-red', 'text-gatsaeng-amber', 'text-muted-foreground', 'text-gatsaeng-teal', 'text-primary']
+
+export function TimingWidget() {
+  const { data: timing, isLoading } = useCurrentTiming()
+
+  if (isLoading) {
+    return (
+      <WidgetWrapper title="이달의 운기" icon={<Compass className="w-4 h-4 text-gatsaeng-purple" />}>
+        <div className="h-24 bg-muted/30 rounded animate-pulse" />
+      </WidgetWrapper>
+    )
+  }
+
+  if (!timing) {
+    return (
+      <WidgetWrapper title="이달의 운기" icon={<Compass className="w-4 h-4 text-gatsaeng-purple" />}>
+        <p className="text-sm text-muted-foreground">타이밍 데이터가 없습니다.</p>
+      </WidgetWrapper>
+    )
+  }
+
+  return (
+    <WidgetWrapper title="이달의 운기" icon={<Compass className="w-4 h-4 text-gatsaeng-purple" />}>
+      <div className="space-y-3">
+        {/* Header: pillar + rating */}
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <span className="text-lg font-bold">{timing.pillar}</span>
+            <span className="text-xs text-muted-foreground">
+              {timing.heavenly_stem} {timing.earthly_branch}
+            </span>
+          </div>
+          <Badge
+            variant="outline"
+            className={`${RATING_COLORS[timing.rating] ?? ''} border-current`}
+          >
+            {RATING_LABELS[timing.rating] ?? '?'} ({timing.rating}/5)
+          </Badge>
+        </div>
+
+        {/* Theme */}
+        <div className="text-sm">
+          <span className="text-muted-foreground">테마:</span>{' '}
+          <span className="text-foreground font-medium">{timing.theme}</span>
+        </div>
+
+        {/* Insight */}
+        <p className="text-xs text-muted-foreground leading-relaxed">{timing.insight}</p>
+
+        {/* Action guide */}
+        {timing.action_guide?.length > 0 && (
+          <div className="space-y-1">
+            <div className="text-[10px] uppercase tracking-wider text-muted-foreground">실행 가이드</div>
+            {timing.action_guide.map((a, i) => (
+              <div key={i} className="text-xs text-foreground flex items-start gap-1.5">
+                <span className="text-gatsaeng-teal mt-0.5">•</span>
+                {a}
+              </div>
+            ))}
+          </div>
+        )}
+
+        {/* Caution */}
+        {(timing.caution?.length ?? 0) > 0 && (
+          <div className="space-y-1">
+            <div className="text-[10px] uppercase tracking-wider text-gatsaeng-amber">주의</div>
+            {timing.caution!.map((c, i) => (
+              <div key={i} className="text-xs text-muted-foreground flex items-start gap-1.5">
+                <span className="text-gatsaeng-amber mt-0.5">!</span>
+                {c}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </WidgetWrapper>
+  )
+}

package/packages/gatsaeng-os/src/components/dashboard/WidgetCustomizer.tsx

@@ -0,0 +1,95 @@
+'use client'
+
+import { useState } from 'react'
+import { useDashboardStore } from '@/stores/dashboardStore'
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet'
+import { Button } from '@/components/ui/button'
+import { Checkbox } from '@/components/ui/checkbox'
+import { Settings2, GripVertical } from 'lucide-react'
+import type { WidgetId } from '@/types'
+
+const WIDGET_INFO: Partial<Record<WidgetId, { label: string; description: string }>> = {
+  routine: { label: '루틴 체크리스트', description: '오늘의 습관 체인' },
+  goals: { label: '목표 링', description: '목표별 진행률 링 차트' },
+  heatmap: { label: '활동 히트맵', description: '일간 활동 기록' },
+  timer: { label: '포커스 타이머', description: '집중 세션 타이머' },
+  zeigarnik: { label: 'Zeigarnik 패널', description: '미완료 항목 알림 바' },
+  energy: { label: '에너지 트래커', description: '시간대별 에너지 기록' },
+  kanban: { label: '퀵 칸반', description: '태스크 칸반 미니뷰' },
+  dday: { label: 'D-day 현황', description: '마일스톤 D-day 카운터' },
+  proactive: { label: '코칭 알림', description: '사주 + 갓생 패턴 감지 알림' },
+}
+
+export function WidgetCustomizer() {
+  const { activeWidgets, toggleWidget, reorderWidgets } = useDashboardStore()
+  const [open, setOpen] = useState(false)
+  const [dragItem, setDragItem] = useState<number | null>(null)
+
+  const allWidgets: WidgetId[] = ['proactive', 'zeigarnik', 'routine', 'goals', 'timer', 'energy', 'heatmap', 'kanban', 'dday']
+
+  const handleDragStart = (index: number) => {
+    setDragItem(index)
+  }
+
+  const handleDragOver = (e: React.DragEvent, index: number) => {
+    e.preventDefault()
+    if (dragItem === null || dragItem === index) return
+
+    const newOrder = [...activeWidgets]
+    const [removed] = newOrder.splice(dragItem, 1)
+    newOrder.splice(index, 0, removed)
+    reorderWidgets(newOrder)
+    setDragItem(index)
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <Button variant="outline" size="sm" className="gap-1.5">
+          <Settings2 className="w-3.5 h-3.5" />
+          <span className="hidden sm:inline">커스터마이즈</span>
+        </Button>
+      </SheetTrigger>
+      <SheetContent>
+        <SheetHeader>
+          <SheetTitle>위젯 설정</SheetTitle>
+        </SheetHeader>
+        <div className="mt-6 space-y-1">
+          <p className="text-xs text-muted-foreground mb-3">위젯을 켜고/끄거나 드래그하여 순서를 변경하세요</p>
+
+          {allWidgets.map((widgetId, index) => {
+            const info = WIDGET_INFO[widgetId]
+            const isActive = activeWidgets.includes(widgetId)
+            const activeIndex = activeWidgets.indexOf(widgetId)
+
+            return (
+              <div
+                key={widgetId}
+                draggable={isActive}
+                onDragStart={() => isActive && handleDragStart(activeIndex)}
+                onDragOver={(e) => isActive && handleDragOver(e, activeIndex)}
+                onDragEnd={() => setDragItem(null)}
+                className={`flex items-center gap-3 p-3 rounded-md transition-colors ${
+                  isActive ? 'bg-card' : 'opacity-60'
+                } ${dragItem === activeIndex ? 'opacity-50' : ''}`}
+              >
+                {isActive && (
+                  <GripVertical className="w-3.5 h-3.5 text-muted-foreground cursor-grab flex-shrink-0" />
+                )}
+                {!isActive && <div className="w-3.5" />}
+                <Checkbox
+                  checked={isActive}
+                  onCheckedChange={() => toggleWidget(widgetId)}
+                />
+                <div className="flex-1 min-w-0">
+                  <div className="text-sm font-medium">{info?.label}</div>
+                  <div className="text-[10px] text-muted-foreground">{info?.description}</div>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </SheetContent>
+    </Sheet>
+  )
+}

package/packages/gatsaeng-os/src/components/dashboard/WidgetWrapper.tsx

@@ -0,0 +1,33 @@
+'use client'
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+
+interface WidgetWrapperProps {
+  title: string
+  icon?: React.ReactNode
+  children: React.ReactNode
+  className?: string
+  widgetId?: string
+  /** When true, renders without Card wrapper (used inside cockpit grid which has its own frame) */
+  compact?: boolean
+}
+
+export function WidgetWrapper({ title, icon, children, className, widgetId, compact }: WidgetWrapperProps) {
+  if (compact) {
+    return <div className={className}>{children}</div>
+  }
+
+  return (
+    <Card className={className} id={widgetId ? `widget-${widgetId}` : undefined}>
+      <CardHeader className="pb-3">
+        <CardTitle className="text-sm font-medium flex items-center gap-2">
+          {icon}
+          {title}
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        {children}
+      </CardContent>
+    </Card>
+  )
+}

package/packages/gatsaeng-os/src/components/dashboard/ZeigarnikPanel.tsx

@@ -0,0 +1,43 @@
+'use client'
+
+import { AlertCircle } from 'lucide-react'
+import { useRoutines } from '@/hooks/useRoutines'
+import { useTasks } from '@/hooks/useProjects'
+
+export function ZeigarnikPanel() {
+  const { routines } = useRoutines()
+  const { data: allTasks } = useTasks()
+
+  const incompleteRoutines = routines.filter(r => !r.completed_today)
+  const urgentTasks = (allTasks ?? []).filter(
+    t => t.status !== 'done' && (t.priority === 'urgent' || t.priority === 'high')
+  )
+
+  const totalIncomplete = incompleteRoutines.length + urgentTasks.length
+
+  if (totalIncomplete === 0) {
+    return (
+      <div className="w-full flex items-center justify-center p-4 text-center">
+        <div>
+          <div className="text-2xl mb-1">&#10003;</div>
+          <p className="text-xs text-muted-foreground">모두 완료!</p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="w-full bg-gatsaeng-red/10 border border-gatsaeng-red/30 rounded-lg px-4 py-3 flex items-center gap-3">
+      <AlertCircle className="w-4 h-4 text-gatsaeng-red shrink-0" />
+      <span className="text-sm text-foreground">
+        <strong className="text-gatsaeng-red">{totalIncomplete}개</strong>의 미완성 항목이 기다리고 있습니다
+        {incompleteRoutines.length > 0 && (
+          <span className="text-muted-foreground"> — 루틴 {incompleteRoutines.length}개</span>
+        )}
+        {urgentTasks.length > 0 && (
+          <span className="text-muted-foreground"> — 긴급 태스크 {urgentTasks.length}개</span>
+        )}
+      </span>
+    </div>
+  )
+}

package/packages/gatsaeng-os/src/components/editor/EditorToolbar.tsx

@@ -0,0 +1,186 @@
+'use client'
+
+import type { Editor } from '@tiptap/react'
+import {
+  Bold,
+  Italic,
+  Strikethrough,
+  Heading1,
+  Heading2,
+  Heading3,
+  List,
+  ListOrdered,
+  ListChecks,
+  Code,
+  Link,
+  Minus,
+  Undo,
+  Redo,
+} from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { useCallback } from 'react'
+
+interface EditorToolbarProps {
+  editor: Editor | null
+}
+
+function ToolbarButton({
+  onClick,
+  isActive,
+  children,
+  title,
+}: {
+  onClick: () => void
+  isActive?: boolean
+  children: React.ReactNode
+  title: string
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      title={title}
+      className={cn(
+        'p-1.5 rounded-md transition-colors',
+        isActive
+          ? 'bg-primary/10 text-primary'
+          : 'text-muted-foreground hover:text-foreground hover:bg-muted'
+      )}
+    >
+      {children}
+    </button>
+  )
+}
+
+function Separator() {
+  return <div className="w-px h-5 bg-border mx-1" />
+}
+
+export function EditorToolbar({ editor }: EditorToolbarProps) {
+  const setLink = useCallback(() => {
+    if (!editor) return
+    const prev = editor.getAttributes('link').href
+    const url = window.prompt('URL', prev ?? '')
+    if (url === null) return
+    if (url === '') {
+      editor.chain().focus().extendMarkRange('link').unsetLink().run()
+      return
+    }
+    editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run()
+  }, [editor])
+
+  if (!editor) return null
+
+  const iconSize = 'w-4 h-4'
+
+  return (
+    <div className="flex items-center gap-0.5 flex-wrap px-3 py-2 border-b border-border bg-muted/30">
+      {/* Undo/Redo */}
+      <ToolbarButton onClick={() => editor.chain().focus().undo().run()} title="Undo">
+        <Undo className={iconSize} />
+      </ToolbarButton>
+      <ToolbarButton onClick={() => editor.chain().focus().redo().run()} title="Redo">
+        <Redo className={iconSize} />
+      </ToolbarButton>
+
+      <Separator />
+
+      {/* Text formatting */}
+      <ToolbarButton
+        onClick={() => editor.chain().focus().toggleBold().run()}
+        isActive={editor.isActive('bold')}
+        title="Bold"
+      >
+        <Bold className={iconSize} />
+      </ToolbarButton>
+      <ToolbarButton
+        onClick={() => editor.chain().focus().toggleItalic().run()}
+        isActive={editor.isActive('italic')}
+        title="Italic"
+      >
+        <Italic className={iconSize} />
+      </ToolbarButton>
+      <ToolbarButton
+        onClick={() => editor.chain().focus().toggleStrike().run()}
+        isActive={editor.isActive('strike')}
+        title="Strikethrough"
+      >
+        <Strikethrough className={iconSize} />
+      </ToolbarButton>
+      <ToolbarButton
+        onClick={() => editor.chain().focus().toggleCode().run()}
+        isActive={editor.isActive('code')}
+        title="Inline Code"
+      >
+        <Code className={iconSize} />
+      </ToolbarButton>
+
+      <Separator />
+
+      {/* Headings */}
+      <ToolbarButton
+        onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
+        isActive={editor.isActive('heading', { level: 1 })}
+        title="Heading 1"
+      >
+        <Heading1 className={iconSize} />
+      </ToolbarButton>
+      <ToolbarButton
+        onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
+        isActive={editor.isActive('heading', { level: 2 })}
+        title="Heading 2"
+      >
+        <Heading2 className={iconSize} />
+      </ToolbarButton>
+      <ToolbarButton
+        onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
+        isActive={editor.isActive('heading', { level: 3 })}
+        title="Heading 3"
+      >
+        <Heading3 className={iconSize} />
+      </ToolbarButton>
+
+      <Separator />
+
+      {/* Lists */}
+      <ToolbarButton
+        onClick={() => editor.chain().focus().toggleBulletList().run()}
+        isActive={editor.isActive('bulletList')}
+        title="Bullet List"
+      >
+        <List className={iconSize} />
+      </ToolbarButton>
+      <ToolbarButton
+        onClick={() => editor.chain().focus().toggleOrderedList().run()}
+        isActive={editor.isActive('orderedList')}
+        title="Ordered List"
+      >
+        <ListOrdered className={iconSize} />
+      </ToolbarButton>
+      <ToolbarButton
+        onClick={() => editor.chain().focus().toggleTaskList().run()}
+        isActive={editor.isActive('taskList')}
+        title="Task List"
+      >
+        <ListChecks className={iconSize} />
+      </ToolbarButton>
+
+      <Separator />
+
+      {/* Link & HR */}
+      <ToolbarButton
+        onClick={setLink}
+        isActive={editor.isActive('link')}
+        title="Link"
+      >
+        <Link className={iconSize} />
+      </ToolbarButton>
+      <ToolbarButton
+        onClick={() => editor.chain().focus().setHorizontalRule().run()}
+        title="Horizontal Rule"
+      >
+        <Minus className={iconSize} />
+      </ToolbarButton>
+    </div>
+  )
+}

package/packages/gatsaeng-os/src/components/editor/TiptapEditor.tsx

@@ -0,0 +1,114 @@
+'use client'
+
+import { useEditor, EditorContent } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+import Placeholder from '@tiptap/extension-placeholder'
+import LinkExtension from '@tiptap/extension-link'
+import TaskList from '@tiptap/extension-task-list'
+import TaskItem from '@tiptap/extension-task-item'
+import { useEffect, useRef, useCallback } from 'react'
+import { EditorToolbar } from './EditorToolbar'
+import { markdownToHtml, htmlToMarkdown } from '@/lib/editor/markdown'
+
+interface TiptapEditorProps {
+  content: string // markdown string from vault
+  onSave: (markdown: string) => void
+  placeholder?: string
+  autoSaveMs?: number // debounce ms, 0 = manual only
+  className?: string
+  readOnly?: boolean
+}
+
+export function TiptapEditor({
+  content,
+  onSave,
+  placeholder = '내용을 입력하세요...',
+  autoSaveMs = 3000,
+  className,
+  readOnly = false,
+}: TiptapEditorProps) {
+  const saveTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const lastSavedRef = useRef(content)
+  const isInitialRef = useRef(true)
+
+  const handleSave = useCallback(
+    (html: string) => {
+      const md = htmlToMarkdown(html)
+      if (md !== lastSavedRef.current) {
+        lastSavedRef.current = md
+        onSave(md)
+      }
+    },
+    [onSave]
+  )
+
+  const editor = useEditor({
+    extensions: [
+      StarterKit.configure({
+        heading: { levels: [1, 2, 3] },
+      }),
+      Placeholder.configure({ placeholder }),
+      LinkExtension.configure({
+        openOnClick: false,
+        HTMLAttributes: { class: 'text-primary underline cursor-pointer' },
+      }),
+      TaskList,
+      TaskItem.configure({ nested: true }),
+    ],
+    content: markdownToHtml(content),
+    editable: !readOnly,
+    editorProps: {
+      attributes: {
+        class:
+          'prose prose-sm dark:prose-invert max-w-none focus:outline-none min-h-[200px] px-4 py-3',
+      },
+    },
+    onUpdate: ({ editor: ed }) => {
+      if (isInitialRef.current) {
+        isInitialRef.current = false
+        return
+      }
+      if (autoSaveMs > 0) {
+        if (saveTimeoutRef.current) clearTimeout(saveTimeoutRef.current)
+        saveTimeoutRef.current = setTimeout(() => {
+          handleSave(ed.getHTML())
+        }, autoSaveMs)
+      }
+    },
+    onBlur: ({ editor: ed }) => {
+      // save immediately on blur
+      if (saveTimeoutRef.current) {
+        clearTimeout(saveTimeoutRef.current)
+        saveTimeoutRef.current = null
+      }
+      handleSave(ed.getHTML())
+    },
+  })
+
+  // Update content when prop changes externally
+  useEffect(() => {
+    if (editor && content !== lastSavedRef.current) {
+      const html = markdownToHtml(content)
+      const currentHtml = editor.getHTML()
+      if (html !== currentHtml) {
+        isInitialRef.current = true
+        editor.commands.setContent(html)
+        lastSavedRef.current = content
+      }
+    }
+  }, [content, editor])
+
+  // Cleanup timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (saveTimeoutRef.current) clearTimeout(saveTimeoutRef.current)
+    }
+  }, [])
+
+  return (
+    <div className={className}>
+      {!readOnly && <EditorToolbar editor={editor} />}
+      <EditorContent editor={editor} />
+    </div>
+  )
+}

package/packages/gatsaeng-os/src/components/layout/Header.tsx

@@ -0,0 +1,47 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { cn } from '@/lib/utils'
+import { MobileSidebar } from './MobileSidebar'
+
+const NAV_ITEMS = [
+  { href: '/', label: '대시보드' },
+  { href: '/goals', label: '목표' },
+  { href: '/projects', label: '프로젝트' },
+  { href: '/routines', label: '루틴' },
+  { href: '/review', label: '회고' },
+]
+
+export function Header() {
+  const pathname = usePathname()
+
+  return (
+    <header className="flex items-center justify-between px-4 md:px-6 py-3 border-b border-border bg-card dark:bg-[#010409]">
+      <div className="flex items-center gap-3">
+        <MobileSidebar />
+        <div className="font-mono font-bold text-lg flex items-center tracking-wider">
+          <span className="text-primary mr-1.5">GS</span>
+          <span className="text-foreground text-[11px] font-semibold border-l border-border pl-3 uppercase tracking-[0.2em] hidden sm:inline">
+            GATSAENG OS
+          </span>
+        </div>
+      </div>
+      <nav className="hidden md:flex gap-8 text-sm font-medium">
+        {NAV_ITEMS.map(item => (
+          <Link
+            key={item.href}
+            href={item.href}
+            className={cn(
+              'text-muted-foreground hover:text-primary transition-colors py-1',
+              pathname === item.href && 'text-primary border-b-2 border-primary'
+            )}
+          >
+            {item.label}
+          </Link>
+        ))}
+      </nav>
+      <div className="w-8 md:w-48" />
+    </header>
+  )
+}