# Phase 2: 레이아웃 컴포넌트 구현 계획

> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.

**Goal:** 접힘 가능한 사이드바, 새로운 헤더, 모바일 반응형 레이아웃을 구현한다.

**Architecture:** App Router의 (dashboard) 라우트 그룹을 사용하여 인증된 페이지에 공통 레이아웃을 적용한다.

**Tech Stack:** Next.js 16, React 19, shadcn/ui, Lucide Icons, next-themes

---

## Task 1: 사이드바 컴포넌트 생성

**Files:**
- Create: `frontend/src/components/layout/new-sidebar.tsx`

**Code:**
```typescript
"use client";

import * as React from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  LayoutDashboard,
  Briefcase,
  TrendingUp,
  FlaskConical,
  Database,
  ChevronLeft,
  ChevronRight,
} from "lucide-react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { ThemeToggle } from "@/components/ui/theme-toggle";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";

const navItems = [
  { href: "/", label: "대시보드", icon: LayoutDashboard },
  { href: "/portfolio", label: "포트폴리오", icon: Briefcase },
  { href: "/strategy", label: "전략", icon: TrendingUp },
  { href: "/backtest", label: "백테스트", icon: FlaskConical },
  { href: "/admin/data", label: "데이터 관리", icon: Database },
];

interface SidebarProps {
  collapsed: boolean;
  onToggle: () => void;
}

export function Sidebar({ collapsed, onToggle }: SidebarProps) {
  const pathname = usePathname();

  return (
    <TooltipProvider delayDuration={0}>
      <aside
        className={cn(
          "flex h-screen flex-col border-r bg-card transition-all duration-300",
          collapsed ? "w-16" : "w-64"
        )}
      >
        {/* Logo */}
        <div className="flex h-14 items-center border-b px-4">
          {!collapsed && (
            <span className="text-lg font-semibold">Galaxy-PO</span>
          )}
          {collapsed && <span className="text-lg font-semibold">G</span>}
        </div>

        {/* Navigation */}
        <nav className="flex-1 space-y-1 p-2">
          {navItems.map((item) => {
            const isActive = pathname === item.href;
            const Icon = item.icon;

            const linkContent = (
              <Link
                href={item.href}
                className={cn(
                  "flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors",
                  isActive
                    ? "bg-primary text-primary-foreground"
                    : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
                )}
              >
                <Icon className="h-5 w-5 shrink-0" />
                {!collapsed && <span>{item.label}</span>}
              </Link>
            );

            if (collapsed) {
              return (
                <Tooltip key={item.href}>
                  <TooltipTrigger asChild>{linkContent}</TooltipTrigger>
                  <TooltipContent side="right">{item.label}</TooltipContent>
                </Tooltip>
              );
            }

            return <div key={item.href}>{linkContent}</div>;
          })}
        </nav>

        {/* Footer */}
        <div className="border-t p-2 space-y-2">
          <div className={cn("flex", collapsed ? "justify-center" : "px-2")}>
            <ThemeToggle />
          </div>
          <Button
            variant="ghost"
            size="sm"
            onClick={onToggle}
            className="w-full"
          >
            {collapsed ? (
              <ChevronRight className="h-4 w-4" />
            ) : (
              <>
                <ChevronLeft className="h-4 w-4 mr-2" />
                접기
              </>
            )}
          </Button>
        </div>
      </aside>
    </TooltipProvider>
  );
}
```

**Commit:** `feat(frontend): add new Sidebar component with collapse support`

---

## Task 2: 헤더 컴포넌트 생성

**Files:**
- Create: `frontend/src/components/layout/new-header.tsx`

**Code:**
```typescript
"use client";

import * as React from "react";
import { usePathname } from "next/navigation";
import { Menu, LogOut } from "lucide-react";
import { Button } from "@/components/ui/button";
import { api } from "@/lib/api";
import { useRouter } from "next/navigation";

const pageTitles: Record<string, string> = {
  "/": "대시보드",
  "/portfolio": "포트폴리오",
  "/portfolio/new": "새 포트폴리오",
  "/strategy": "퀀트 전략",
  "/strategy/multi-factor": "멀티팩터 전략",
  "/strategy/quality": "슈퍼 퀄리티 전략",
  "/strategy/value-momentum": "밸류-모멘텀 전략",
  "/backtest": "백테스트",
  "/admin/data": "데이터 관리",
};

interface HeaderProps {
  onMenuClick?: () => void;
  showMenuButton?: boolean;
  username?: string;
}

export function Header({ onMenuClick, showMenuButton, username }: HeaderProps) {
  const pathname = usePathname();
  const router = useRouter();

  const getPageTitle = () => {
    if (pageTitles[pathname]) {
      return pageTitles[pathname];
    }
    if (pathname.startsWith("/portfolio/") && pathname.includes("/rebalance")) {
      return "리밸런싱";
    }
    if (pathname.startsWith("/portfolio/") && pathname.includes("/history")) {
      return "히스토리";
    }
    if (pathname.startsWith("/portfolio/")) {
      return "포트폴리오 상세";
    }
    if (pathname.startsWith("/backtest/")) {
      return "백테스트 결과";
    }
    return "Galaxy-PO";
  };

  const handleLogout = () => {
    api.logout();
    router.push("/login");
  };

  return (
    <header className="flex h-14 items-center justify-between border-b bg-card px-4">
      <div className="flex items-center gap-4">
        {showMenuButton && (
          <Button variant="ghost" size="icon" onClick={onMenuClick}>
            <Menu className="h-5 w-5" />
          </Button>
        )}
        <h1 className="text-lg font-semibold">{getPageTitle()}</h1>
      </div>

      <div className="flex items-center gap-4">
        {username && (
          <span className="text-sm text-muted-foreground">{username}</span>
        )}
        <Button variant="ghost" size="icon" onClick={handleLogout}>
          <LogOut className="h-5 w-5" />
        </Button>
      </div>
    </header>
  );
}
```

**Commit:** `feat(frontend): add new Header component`

---

## Task 3: 대시보드 레이아웃 생성

**Files:**
- Create: `frontend/src/components/layout/dashboard-layout.tsx`

**Code:**
```typescript
"use client";

import * as React from "react";
import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import { Sidebar } from "@/components/layout/new-sidebar";
import { Header } from "@/components/layout/new-header";
import { Sheet, SheetContent } from "@/components/ui/sheet";
import { api } from "@/lib/api";

interface DashboardLayoutProps {
  children: React.ReactNode;
}

export function DashboardLayout({ children }: DashboardLayoutProps) {
  const [collapsed, setCollapsed] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  const [username, setUsername] = useState<string | undefined>();
  const [loading, setLoading] = useState(true);
  const router = useRouter();

  useEffect(() => {
    const checkAuth = async () => {
      try {
        const user = await api.getCurrentUser();
        setUsername(user.username);
      } catch {
        router.push("/login");
      } finally {
        setLoading(false);
      }
    };
    checkAuth();
  }, [router]);

  if (loading) {
    return (
      <div className="flex h-screen items-center justify-center">
        <div className="text-muted-foreground">로딩 중...</div>
      </div>
    );
  }

  return (
    <div className="flex h-screen bg-background">
      {/* Desktop Sidebar */}
      <div className="hidden md:block">
        <Sidebar collapsed={collapsed} onToggle={() => setCollapsed(!collapsed)} />
      </div>

      {/* Mobile Sidebar */}
      <Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
        <SheetContent side="left" className="w-64 p-0">
          <Sidebar collapsed={false} onToggle={() => setMobileOpen(false)} />
        </SheetContent>
      </Sheet>

      {/* Main Content */}
      <div className="flex flex-1 flex-col overflow-hidden">
        <Header
          onMenuClick={() => setMobileOpen(true)}
          showMenuButton={true}
          username={username}
        />
        <main className="flex-1 overflow-auto p-6">{children}</main>
      </div>
    </div>
  );
}
```

**Commit:** `feat(frontend): add DashboardLayout with responsive sidebar`

---

## Task 4: 페이지에 레이아웃 적용

**Files:**
- Modify: `frontend/src/app/page.tsx`

**Code:**
```typescript
"use client";

import { DashboardLayout } from "@/components/layout/dashboard-layout";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Wallet, TrendingUp, Briefcase, RefreshCw } from "lucide-react";

export default function DashboardPage() {
  return (
    <DashboardLayout>
      <div className="space-y-6">
        <h2 className="text-2xl font-bold">대시보드</h2>

        {/* Summary Cards */}
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between pb-2">
              <CardTitle className="text-sm font-medium">총 자산</CardTitle>
              <Wallet className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">₩0</div>
              <p className="text-xs text-muted-foreground">데이터 없음</p>
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="flex flex-row items-center justify-between pb-2">
              <CardTitle className="text-sm font-medium">총 수익률</CardTitle>
              <TrendingUp className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">0%</div>
              <p className="text-xs text-muted-foreground">데이터 없음</p>
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="flex flex-row items-center justify-between pb-2">
              <CardTitle className="text-sm font-medium">포트폴리오</CardTitle>
              <Briefcase className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">0개</div>
              <p className="text-xs text-muted-foreground">포트폴리오 없음</p>
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="flex flex-row items-center justify-between pb-2">
              <CardTitle className="text-sm font-medium">리밸런싱</CardTitle>
              <RefreshCw className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">0개</div>
              <p className="text-xs text-muted-foreground">리밸런싱 필요 없음</p>
            </CardContent>
          </Card>
        </div>

        {/* Placeholder for charts */}
        <div className="grid gap-4 md:grid-cols-2">
          <Card className="col-span-1">
            <CardHeader>
              <CardTitle>자산 추이</CardTitle>
            </CardHeader>
            <CardContent className="h-[300px] flex items-center justify-center text-muted-foreground">
              차트 영역 (Phase 3에서 구현)
            </CardContent>
          </Card>

          <Card className="col-span-1">
            <CardHeader>
              <CardTitle>섹터 배분</CardTitle>
            </CardHeader>
            <CardContent className="h-[300px] flex items-center justify-center text-muted-foreground">
              차트 영역 (Phase 3에서 구현)
            </CardContent>
          </Card>
        </div>
      </div>
    </DashboardLayout>
  );
}
```

**Commit:** `feat(frontend): apply DashboardLayout to main page`

---

## Task 5: 포트폴리오 목록 페이지에 레이아웃 적용

**Files:**
- Modify: `frontend/src/app/portfolio/page.tsx`

Read the existing file and wrap content with DashboardLayout, update styling to use shadcn/ui components.

**Commit:** `feat(frontend): apply DashboardLayout to portfolio list page`

---

## Task 6: 나머지 페이지에 레이아웃 적용

**Files to modify:**
- `frontend/src/app/portfolio/new/page.tsx`
- `frontend/src/app/portfolio/[id]/page.tsx`
- `frontend/src/app/strategy/page.tsx`
- `frontend/src/app/backtest/page.tsx`
- `frontend/src/app/admin/data/page.tsx`

For each page, wrap existing content with DashboardLayout.

**Commit:** `feat(frontend): apply DashboardLayout to all pages`

---

## Task 7: 로그인 페이지 스타일 개선

**Files:**
- Modify: `frontend/src/app/login/page.tsx`

Update to use shadcn/ui components (Card, Input, Button, Label).

**Commit:** `feat(frontend): improve login page styling with shadcn/ui`

---

## Task 8: 빌드 및 검증

Run build and verify all pages work correctly.

**Commit:** Final cleanup if needed