create-arete-workspace 0.2.0

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

@@ -0,0 +1,122 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import {
+  Home,
+  CheckSquare,
+  StickyNote,
+  Target,
+  Menu,
+  Layers,
+  FolderKanban,
+  RotateCcw,
+  BookMarked,
+  CalendarDays,
+  BookOpen,
+  Timer,
+  X,
+  Mic,
+} from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { useState } from 'react'
+
+const NAV_ITEMS = [
+  { href: '/', label: '홈', icon: Home },
+  { href: '/tasks', label: '할일', icon: CheckSquare },
+  { href: '/notes', label: '노트', icon: StickyNote },
+  { href: '/goals', label: '목표', icon: Target },
+]
+
+// No duplicate '/' — Dashboard is already in NAV_ITEMS as '홈'
+const MORE_ITEMS = [
+  { href: '/areas', label: '영역', icon: Layers },
+  { href: '/projects', label: '프로젝트', icon: FolderKanban },
+  { href: '/routines', label: '루틴', icon: RotateCcw },
+  { href: '/books', label: '독서', icon: BookMarked },
+  { href: '/calendar', label: '캘린더', icon: CalendarDays },
+  { href: '/focus', label: '포커스', icon: Timer },
+  { href: '/review', label: '계획 & 회고', icon: BookOpen },
+  { href: '/voice', label: 'Eve 보이스', icon: Mic },
+]
+
+function isNavActive(href: string, pathname: string) {
+  return href === '/' ? pathname === '/' : pathname.startsWith(href)
+}
+
+export function MobileBottomNav() {
+  const pathname = usePathname()
+  const [showMore, setShowMore] = useState(false)
+
+  return (
+    <>
+      {/* More menu overlay */}
+      {showMore && (
+        <div className="fixed inset-0 z-40 md:hidden">
+          <div className="absolute inset-0 bg-black/60" onClick={() => setShowMore(false)} />
+          <div className="absolute bottom-16 left-0 right-0 bg-background border-t border-border rounded-t-xl p-4 animate-in slide-in-from-bottom-4">
+            <div className="flex items-center justify-between mb-3">
+              <span className="text-sm font-medium">메뉴</span>
+              <button onClick={() => setShowMore(false)} className="p-1">
+                <X className="w-4 h-4" />
+              </button>
+            </div>
+            <div className="grid grid-cols-4 gap-3">
+              {MORE_ITEMS.map(item => {
+                const Icon = item.icon
+                const isActive = isNavActive(item.href, pathname)
+                return (
+                  <Link
+                    key={item.href}
+                    href={item.href}
+                    onClick={() => setShowMore(false)}
+                    className={cn(
+                      'flex flex-col items-center gap-1 py-2 rounded-lg text-xs transition-colors',
+                      isActive ? 'text-primary bg-primary/10' : 'text-muted-foreground'
+                    )}
+                  >
+                    <Icon className="w-5 h-5" />
+                    {item.label}
+                  </Link>
+                )
+              })}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Bottom nav bar */}
+      <nav className="fixed bottom-0 left-0 right-0 z-30 md:hidden bg-background border-t border-border">
+        <div className="flex items-center justify-around h-14 px-2">
+          {NAV_ITEMS.map(item => {
+            const Icon = item.icon
+            const isActive = isNavActive(item.href, pathname)
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                className={cn(
+                  'flex flex-col items-center gap-0.5 py-1 px-3 rounded-lg text-[10px] transition-colors',
+                  isActive ? 'text-primary' : 'text-muted-foreground'
+                )}
+              >
+                <Icon className={cn('w-5 h-5', isActive && 'stroke-[2.5]')} />
+                {item.label}
+              </Link>
+            )
+          })}
+          <button
+            onClick={() => setShowMore(v => !v)}
+            className={cn(
+              'flex flex-col items-center gap-0.5 py-1 px-3 rounded-lg text-[10px] transition-colors',
+              showMore ? 'text-primary' : 'text-muted-foreground'
+            )}
+          >
+            <Menu className={cn('w-5 h-5', showMore && 'stroke-[2.5]')} />
+            메뉴
+          </button>
+        </div>
+      </nav>
+    </>
+  )
+}

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

@@ -0,0 +1,29 @@
+'use client'
+
+import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet'
+import { Button } from '@/components/ui/button'
+import { Menu } from 'lucide-react'
+import { Sidebar } from './Sidebar'
+import { useState } from 'react'
+
+export function MobileSidebar() {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <Button variant="ghost" size="icon" className="md:hidden h-8 w-8">
+          <Menu className="w-5 h-5" />
+        </Button>
+      </SheetTrigger>
+      <SheetContent side="left" className="p-0 w-56">
+        <div onClick={(e) => {
+          // Close only when navigating (Link click), not for buttons/inputs
+          if ((e.target as HTMLElement).closest('a')) setOpen(false)
+        }}>
+          <Sidebar />
+        </div>
+      </SheetContent>
+    </Sheet>
+  )
+}

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

@@ -0,0 +1,142 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname, useRouter } from 'next/navigation'
+import { useTheme } from 'next-themes'
+import { cn } from '@/lib/utils'
+import { ENTITY_ROUTES } from '@/lib/routes'
+import { useFavoritesStore } from '@/stores/favoritesStore'
+import {
+  LayoutDashboard,
+  Target,
+  FolderKanban,
+  RotateCcw,
+  BookOpen,
+  BookMarked,
+  CalendarDays,
+  Layers,
+  Sun,
+  Moon,
+  Monitor,
+  CheckSquare,
+  StickyNote,
+  LogOut,
+  Star,
+  Mic,
+} from 'lucide-react'
+
+const SIDEBAR_ITEMS = [
+  { href: '/', label: '대시보드', icon: LayoutDashboard },
+  { href: '/areas', label: '영역', icon: Layers },
+  { href: '/goals', label: '목표', icon: Target },
+  { href: '/projects', label: '프로젝트', icon: FolderKanban },
+  { href: '/tasks', label: '할일', icon: CheckSquare },
+  { href: '/routines', label: '루틴', icon: RotateCcw },
+  { href: '/notes', label: '노트', icon: StickyNote },
+  { href: '/books', label: '독서', icon: BookMarked },
+  { href: '/calendar', label: '캘린더', icon: CalendarDays },
+  { href: '/review', label: '계획 & 회고', icon: BookOpen },
+  { href: '/voice', label: 'Eve 보이스', icon: Mic },
+]
+
+const THEME_OPTIONS = [
+  { value: 'light', icon: Sun, label: 'Light' },
+  { value: 'dark', icon: Moon, label: 'Dark' },
+  { value: 'system', icon: Monitor, label: 'Auto' },
+] as const
+
+export function Sidebar() {
+  const pathname = usePathname()
+  const router = useRouter()
+  const { theme, setTheme } = useTheme()
+  const favorites = useFavoritesStore(s => s.favorites)
+
+  const handleLogout = async () => {
+    await fetch('/api/auth/logout', { method: 'POST' })
+    router.push('/login')
+  }
+
+  return (
+    <aside className="w-56 h-full border-r border-border bg-background flex flex-col">
+      <div className="p-4 flex-1 overflow-y-auto">
+        <div className="font-mono text-[10px] uppercase tracking-[0.15em] text-muted-foreground mb-3">
+          Navigation
+        </div>
+        <nav className="space-y-1">
+          {SIDEBAR_ITEMS.map(item => {
+            const Icon = item.icon
+            const isActive = pathname === item.href
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                className={cn(
+                  'flex items-center gap-3 px-3 py-2 rounded-md text-sm transition-colors',
+                  isActive
+                    ? 'bg-card text-primary'
+                    : 'text-muted-foreground hover:text-foreground hover:bg-card'
+                )}
+              >
+                <Icon className="w-4 h-4" />
+                {item.label}
+              </Link>
+            )
+          })}
+        </nav>
+
+        {favorites.length > 0 && (
+          <>
+            <div className="font-mono text-[10px] uppercase tracking-[0.15em] text-muted-foreground mt-6 mb-3">
+              Favorites
+            </div>
+            <div className="space-y-1">
+              {favorites.map(fav => (
+                <Link
+                  key={`${fav.type}-${fav.id}`}
+                  href={`${ENTITY_ROUTES[fav.type] ?? ''}/${fav.id}`}
+                  className="flex items-center gap-3 px-3 py-1.5 rounded-md text-sm text-muted-foreground hover:text-foreground hover:bg-card transition-colors"
+                >
+                  <Star className="w-3.5 h-3.5 text-gatsaeng-amber fill-gatsaeng-amber" />
+                  <span className="truncate">{fav.title}</span>
+                </Link>
+              ))}
+            </div>
+          </>
+        )}
+      </div>
+
+      <div className="p-4 border-t border-border space-y-3">
+        <div className="flex items-center gap-1 rounded-md bg-muted p-1">
+          {THEME_OPTIONS.map(opt => {
+            const Icon = opt.icon
+            return (
+              <button
+                key={opt.value}
+                onClick={() => setTheme(opt.value)}
+                className={cn(
+                  'flex-1 flex items-center justify-center gap-1 rounded-sm px-2 py-1 text-xs transition-colors',
+                  theme === opt.value
+                    ? 'bg-background text-foreground shadow-sm'
+                    : 'text-muted-foreground hover:text-foreground'
+                )}
+                title={opt.label}
+              >
+                <Icon className="w-3.5 h-3.5" />
+              </button>
+            )
+          })}
+        </div>
+        <button
+          onClick={handleLogout}
+          className="flex items-center gap-2 w-full px-2 py-1.5 rounded-md text-xs text-muted-foreground hover:text-gatsaeng-red hover:bg-gatsaeng-red/10 transition-colors"
+        >
+          <LogOut className="w-3.5 h-3.5" />
+          로그아웃
+        </button>
+        <div className="text-xs text-muted-foreground">
+          갓생 OS v0.1
+        </div>
+      </div>
+    </aside>
+  )
+}

package/packages/gatsaeng-os/src/components/onboarding/OnboardingFlow.tsx

@@ -0,0 +1,229 @@
+'use client'
+
+import { useState } from 'react'
+import { Card, CardContent } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { ChevronRight, ChevronLeft, Sparkles, Target, Brain, Clock, Rocket } from 'lucide-react'
+
+interface OnboardingData {
+  display_name: string
+  identity: string
+  core_value: string
+  peak_hours: string
+  first_goal: string
+}
+
+const STEPS = [
+  { icon: Sparkles, title: '환영합니다!', subtitle: '갓생 OS에 오신 것을 환영합니다' },
+  { icon: Brain, title: '정체성', subtitle: '어떤 사람이 되고 싶으세요?' },
+  { icon: Target, title: '핵심 가치', subtitle: '당신의 핵심 가치는?' },
+  { icon: Clock, title: '피크 타임', subtitle: '가장 에너지가 높은 시간대는?' },
+  { icon: Rocket, title: '첫 목표', subtitle: '시작할 첫 번째 목표를 정해보세요' },
+]
+
+const CORE_VALUES = ['성장', '자유', '관계', '건강', '재미', '안정', '창의']
+
+const PEAK_HOURS = [
+  { label: '새벽형 (5-8시)', value: 'early' },
+  { label: '오전형 (9-12시)', value: 'morning' },
+  { label: '오후형 (13-17시)', value: 'afternoon' },
+  { label: '야간형 (22-2시)', value: 'night' },
+]
+
+interface OnboardingFlowProps {
+  onComplete: (data: OnboardingData) => void
+}
+
+export function OnboardingFlow({ onComplete }: OnboardingFlowProps) {
+  const [step, setStep] = useState(0)
+  const [data, setData] = useState<OnboardingData>({
+    display_name: '',
+    identity: '',
+    core_value: '',
+    peak_hours: '',
+    first_goal: '',
+  })
+
+  const update = (key: keyof OnboardingData, value: string) => {
+    setData(prev => ({ ...prev, [key]: value }))
+  }
+
+  const canProceed = () => {
+    switch (step) {
+      case 0: return data.display_name.trim().length > 0
+      case 1: return data.identity.trim().length > 0
+      case 2: return data.core_value.length > 0
+      case 3: return data.peak_hours.length > 0
+      case 4: return data.first_goal.trim().length > 0
+      default: return false
+    }
+  }
+
+  const StepIcon = STEPS[step].icon
+
+  return (
+    <div className="min-h-screen bg-background flex items-center justify-center p-4">
+      <div className="w-full max-w-lg">
+        {/* Progress */}
+        <div className="flex gap-1.5 mb-8">
+          {STEPS.map((_, i) => (
+            <div
+              key={i}
+              className={`h-1 flex-1 rounded-full transition-colors ${
+                i <= step ? 'bg-gatsaeng-amber' : 'bg-muted'
+              }`}
+            />
+          ))}
+        </div>
+
+        <Card className="border-border/50">
+          <CardContent className="py-8 px-6">
+            <div className="flex items-center gap-3 mb-6">
+              <div className="w-10 h-10 rounded-lg bg-gatsaeng-amber/10 flex items-center justify-center">
+                <StepIcon className="w-5 h-5 text-gatsaeng-amber" />
+              </div>
+              <div>
+                <h2 className="text-lg font-bold text-foreground">{STEPS[step].title}</h2>
+                <p className="text-xs text-muted-foreground">{STEPS[step].subtitle}</p>
+              </div>
+            </div>
+
+            {step === 0 && (
+              <div className="space-y-4">
+                <div>
+                  <Label>이름 또는 닉네임</Label>
+                  <Input
+                    value={data.display_name}
+                    onChange={e => update('display_name', e.target.value)}
+                    placeholder="Drake"
+                    className="mt-1"
+                    autoFocus
+                  />
+                </div>
+                <p className="text-xs text-muted-foreground">
+                  뇌과학 기반 습관 시스템으로 갓생을 시작합니다. 5단계 설정을 완료하면 대시보드가 열립니다.
+                </p>
+              </div>
+            )}
+
+            {step === 1 && (
+              <div className="space-y-4">
+                <div>
+                  <Label>나는 _____ 사람이다</Label>
+                  <Input
+                    value={data.identity}
+                    onChange={e => update('identity', e.target.value)}
+                    placeholder="매일 성장하는"
+                    className="mt-1"
+                    autoFocus
+                  />
+                </div>
+                <p className="text-xs text-muted-foreground">
+                  Identity-based habits: 행동이 아닌 정체성에서 시작하면 습관이 오래 갑니다. (James Clear)
+                </p>
+              </div>
+            )}
+
+            {step === 2 && (
+              <div className="space-y-4">
+                <Label>당신의 핵심 가치를 선택하세요</Label>
+                <div className="grid grid-cols-4 gap-2">
+                  {CORE_VALUES.map(value => (
+                    <button
+                      key={value}
+                      onClick={() => update('core_value', value)}
+                      className={`px-3 py-2.5 rounded-md text-sm font-medium transition-colors ${
+                        data.core_value === value
+                          ? 'bg-gatsaeng-amber text-black'
+                          : 'bg-secondary text-muted-foreground hover:text-foreground'
+                      }`}
+                    >
+                      {value}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {step === 3 && (
+              <div className="space-y-4">
+                <Label>가장 집중이 잘 되는 시간대는?</Label>
+                <div className="grid grid-cols-2 gap-2">
+                  {PEAK_HOURS.map(ph => (
+                    <button
+                      key={ph.value}
+                      onClick={() => update('peak_hours', ph.value)}
+                      className={`px-3 py-3 rounded-md text-sm font-medium transition-colors ${
+                        data.peak_hours === ph.value
+                          ? 'bg-gatsaeng-purple text-white'
+                          : 'bg-secondary text-muted-foreground hover:text-foreground'
+                      }`}
+                    >
+                      {ph.label}
+                    </button>
+                  ))}
+                </div>
+                <p className="text-xs text-muted-foreground">
+                  Ultradian rhythm: 에너지 패턴을 파악하면 최적의 작업 배치가 가능합니다.
+                </p>
+              </div>
+            )}
+
+            {step === 4 && (
+              <div className="space-y-4">
+                <div>
+                  <Label>첫 목표를 입력하세요</Label>
+                  <Input
+                    value={data.first_goal}
+                    onChange={e => update('first_goal', e.target.value)}
+                    placeholder="영어 비즈니스 레벨 달성"
+                    className="mt-1"
+                    autoFocus
+                  />
+                </div>
+                <p className="text-xs text-muted-foreground">
+                  대시보드에서 목표 진행률과 Why Statement를 확인할 수 있습니다.
+                </p>
+              </div>
+            )}
+
+            {/* Navigation */}
+            <div className="flex items-center justify-between mt-8">
+              {step > 0 ? (
+                <Button variant="ghost" size="sm" onClick={() => setStep(s => s - 1)}>
+                  <ChevronLeft className="w-4 h-4 mr-1" /> 이전
+                </Button>
+              ) : <div />}
+
+              {step < STEPS.length - 1 ? (
+                <Button
+                  size="sm"
+                  disabled={!canProceed()}
+                  onClick={() => setStep(s => s + 1)}
+                  className="bg-gatsaeng-amber hover:bg-gatsaeng-amber/80 text-black"
+                >
+                  다음 <ChevronRight className="w-4 h-4 ml-1" />
+                </Button>
+              ) : (
+                <Button
+                  size="sm"
+                  disabled={!canProceed()}
+                  onClick={() => onComplete(data)}
+                  className="bg-gatsaeng-teal hover:bg-gatsaeng-teal/80 text-black"
+                >
+                  <Rocket className="w-4 h-4 mr-1" /> 갓생 시작!
+                </Button>
+              )}
+            </div>
+          </CardContent>
+        </Card>
+
+        <p className="text-center text-[10px] text-muted-foreground mt-4">
+          Step {step + 1} of {STEPS.length}
+        </p>
+      </div>
+    </div>
+  )
+}

package/packages/gatsaeng-os/src/components/onboarding/OnboardingGate.tsx

@@ -0,0 +1,78 @@
+'use client'
+
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { OnboardingFlow } from './OnboardingFlow'
+import type { Profile } from '@/types'
+
+const PEAK_HOURS_MAP: Record<string, number[]> = {
+  early: [5, 6, 7, 8],
+  morning: [9, 10, 11, 12],
+  afternoon: [13, 14, 15, 16, 17],
+  night: [22, 23, 0, 1, 2],
+}
+
+export function OnboardingGate({ children }: { children: React.ReactNode }) {
+  const queryClient = useQueryClient()
+
+  const { data: profile, isLoading } = useQuery({
+    queryKey: ['profile'],
+    queryFn: async (): Promise<Profile | null> => {
+      const res = await fetch('/api/profile')
+      if (!res.ok) return null
+      return res.json()
+    },
+  })
+
+  const setupProfile = useMutation({
+    mutationFn: async (data: {
+      display_name: string
+      identity: string
+      core_value: string
+      peak_hours: string
+      first_goal: string
+    }) => {
+      // Update profile
+      await fetch('/api/profile', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          display_name: data.display_name,
+          peak_hours: PEAK_HOURS_MAP[data.peak_hours] || [9, 10, 11],
+        }),
+      })
+
+      // Create first goal
+      if (data.first_goal) {
+        await fetch('/api/goals', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            title: data.first_goal,
+            type: 'quarterly',
+            core_value: data.core_value,
+            identity_statement: `나는 ${data.identity} 사람이다`,
+          }),
+        })
+      }
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['profile'] })
+      queryClient.invalidateQueries({ queryKey: ['goals'] })
+    },
+  })
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen bg-background flex items-center justify-center">
+        <div className="w-8 h-8 border-2 border-gatsaeng-amber border-t-transparent rounded-full animate-spin" />
+      </div>
+    )
+  }
+
+  // Show onboarding if profile has default name (never customized)
+  if (profile && profile.display_name === 'User') {
+    return <OnboardingFlow onComplete={(data) => setupProfile.mutate(data)} />
+  }
+
+  return <>{children}</>
+}