) {
return (
);
}
```
```tsx
// frontend/components/SegmentToggle.tsx — 칸반/리스트(캘린더는 post-MVP) (Phase 3 사용)
import { Icon } from "./Icon";
import type { IconName } from "./icons/paths";
export type SegOption = { id: string; label: string; icon?: IconName };
export function SegmentToggle({
options, value, onChange,
}: { options: SegOption[]; value: string; onChange: (id: string) => void }) {
return (
{options.map((o) => (
))}
);
}
```
```tsx
// frontend/components/Avatar.tsx
type Tone = "blue" | "violet" | "green" | "coral" | "amber";
export function Avatar({
initial, tone = "blue", label,
}: { initial: string; tone?: Tone; label?: string }) {
return {initial}
;
}
```
> Phase 3에서 `SegmentToggle`은 옵션 `[{id:"kanban",label:"칸반",icon:"grid"},{id:"list",label:"리스트",icon:"check"}]`로 소비한다(캘린더는 post-MVP placeholder). `Avatar`의 tone은 person.color(phase-2 시드: jiwoo=blue, hyunwoo=violet, minseo=green, jaeho=coral, sua=oklch)와 매핑된다(sua는 인라인 style로 처리).
### 3.9 SubRail 컴포넌트
원본 `shell.jsx`의 `SubRail`(100~120행)을 TS로 옮긴다. 아이템은 일반 항목 `{id,icon,label,dot?}` 또는 구분자 `{sep:true}`.
```tsx
// frontend/components/SubRail.tsx
"use client";
import { Icon } from "./Icon";
import type { IconName } from "./icons/paths";
export type RailItem =
| { sep: true }
| { sep?: false; id: string; icon: IconName; label: string; dot?: boolean };
export function SubRail({
items, active, onPick,
}: { items: RailItem[]; active: string; onPick: (id: string) => void }) {
return (
);
}
```
> SubRail은 MVP에서 **작업 페이지(Phase 3)** 가 선택적으로 사용한다. 이번 phase에서는 컴포넌트만 완성하고 라우트 연결은 하지 않는다.
### 3.10 라우팅: placeholder + 리다이렉트 + MVP 스텁
#### `/` → `/dashboard` 리다이렉트
```tsx
// frontend/app/page.tsx
import { redirect } from "next/navigation";
export default function Home() {
redirect("/dashboard");
}
```
#### "준비 중" 공용 컴포넌트
```tsx
// frontend/components/Placeholder.tsx
import { GlassCard } from "./GlassCard";
import { Icon } from "./Icon";
import type { IconName } from "./icons/paths";
export function Placeholder({ title, icon }: { title: string; icon: IconName }) {
return (
{title}
준비 중이에요. 이 화면은 곧 아리가 채워둘게요.
);
}
```
> 문구 "준비 중이에요. 이 화면은 곧 아리가 채워둘게요."는 제품 철학("할까요?"가 아니라 "이미 해뒀어요")의 톤을 따른 한국어 마이크로카피다.
#### 10개 placeholder 페이지 (route group `(placeholder)` — URL에 영향 없음)
```tsx
// frontend/app/(placeholder)/approvals/page.tsx
import { Placeholder } from "@/components/Placeholder";
export default function Page() { return ; }
```
나머지 9개도 동일 패턴:
| 파일 | title | icon |
| --- | --- | --- |
| `(placeholder)/automation/page.tsx` | 자동화 | zap |
| `(placeholder)/journey/page.tsx` | 여정 | route |
| `(placeholder)/calendar/page.tsx` | 일정 | cal |
| `(placeholder)/mail/page.tsx` | 메일 | mail |
| `(placeholder)/notifications/page.tsx` | 알림 | bell |
| `(placeholder)/research/page.tsx` | 리서치 | brain |
| `(placeholder)/trip/page.tsx` | 여행 | send |
| `(placeholder)/life/page.tsx` | 라이프 | heart |
| `(placeholder)/wrap/page.tsx` | 하루 마감 | moon |
#### MVP 3개 스텁 (Phase 3~5에서 본 구현으로 교체)
```tsx
// frontend/app/tasks/page.tsx (스텁)
export default function Page() {
return 작업
;
}
// dashboard/page.tsx, inbox/page.tsx 동일 패턴 ("대시보드", "인박스")
```
> 스텁은 셸/내비/테마 검증을 위한 최소 콘텐츠다. **Phase 3는 phase-3-tasks.md, Phase 4는 phase-4-inbox.md, Phase 5는 phase-5-dashboard.md**에서 이 페이지들을 본 구현으로 대체한다.
---
## 4. 데이터/타입/API 계약 (이 phase 관련)
이 phase는 **백엔드 호출이 없다**(셸은 정적/클라이언트 only). 관련 타입은 내비/아이콘/톤뿐이다.
```ts
// frontend/lib/types.ts (이 phase에서 추가되는 부분만)
export type Tone = "blue" | "violet" | "coral" | "green" | "amber" | "ink" | "faint";
export type { IconName } from "@/components/icons/paths";
export type { NavItem } from "@/lib/nav";
```
> `Tone` 값 집합은 CONTRACT 명세(`blue|violet|coral|green|amber|ink|faint`)와 정확히 일치한다. phase-2의 `backend/app/schemas.py`의 tone 필드와 1:1 대응한다. 배지 정적값(appr=3, task=4, noti=6)은 phase-5에서 `GET /api/dashboard` 응답의 `badges:{appr,task,noti}`로 대체 가능한 지점임을 코드 주석으로 표시한다.
API 응답 형태(참고, phase-5에서 실제 사용):
```json
{
"badges": { "appr": 3, "task": 4, "noti": 6 }
}
```
---
## 5. 디자인 충실도 노트 (정확 값 인용)
모두 `design-reference/assets/dash.css` / `shell.jsx` 라인 기준.
- **배경 그라데이션**: `linear-gradient(178deg, var(--bg-top) 0%, var(--bg-mid) 20%, var(--bg-bot) 100%)` + `background-attachment: fixed` (dash.css 82~83행). 각도 **178deg**(거의 수직, 미세 기울기) 보존.
- **한국어 타이포**: `letter-spacing: -0.011em; word-break: keep-all;` (dash.css 86~87행). 큰 제목은 `.ph-title { letter-spacing:-0.03em; font-family:var(--font-disp); font-size:clamp(30px,3.4vw,46px); }`(232~239행) — Phase 3~5 페이지 헤더에서 사용.
- **상단바**: 높이 **70px**, `gap:24px`, `position:sticky; top:0; z-index:40`, `backdrop-filter: blur(14px) saturate(150%)`(상단바 전용 blur, 카드 `--blur`와 다름). `margin:0 -26px; padding:0 30px`(102~115행).
- **브랜드 마크**: 40×40, `border-radius:12px`, `background:var(--fill)`, 아이콘 색 `var(--coral)`, 우상단 코럴 점 9×9 `border:2px solid var(--bg-top)`(117~133행). 아이콘은 `spark`(별).
- **브랜드 텍스트**: `b` 15px/700, `span` 9.5px/700 uppercase letter-spacing 0.08em "AI LIFE OS"(134~140행).
- **메인 내비 링크**: 14px/500, `padding:9px 16px`, `border-radius:999px`, 아이콘 16×16. **active = 글래스 pill**: `background:var(--glass)` + `backdrop-filter:var(--blur)` + `box-shadow:var(--shadow-sm)` + `border:1px solid var(--glass-brd)` + 600 weight(147~169행).
- **배지**: 11px/700, `background:var(--coral)`, 흰 글자, `min-width:18px`, `padding:0 6px`(170~174행).
- **우측 액션 버튼 `.t-btn`**: 40×40 원형 글래스, 아이콘 18×18, hover `translateY(-1px)`. `.dot::after`는 우상단 7×7 코럴 점(176~196행).
- **아바타 `.t-ava`**: 40×40 원형, `linear-gradient(135deg, var(--coral), var(--violet))`, 흰 글자 15px/700, 내용 "지"(197~204행, data.js `user.initial`).
- **서브 레일 `.rail`**: `position:sticky; top:86px`, 버튼 44×44 `border-radius:13px`, 아이콘 19×19. hover=글래스, active=`var(--fill)` 채움+`var(--on-fill)`. 툴팁(`.tip`)은 위쪽 팝업 `var(--fill)` 배경, 12px/600, 화살표 5px(264~300행).
- **글래스 카드 `.card`**: `var(--glass)` + `--blur` + `border:1px solid var(--glass-brd)` + `border-radius:22px` + `box-shadow:var(--shadow), var(--glass-hi)` + `padding:20px`(309~321행).
- **포커스 링**: `:focus-visible { outline:2px solid var(--blue); outline-offset:2px; border-radius:6px; }`(91행) — 접근성 기준.
- **아이콘 stroke**: `viewBox 0 0 24 24`, `fill:none`, `stroke:currentColor`, `stroke-width:1.9`(기본), `linecap/linejoin:round`(shell.jsx 42~48행). path는 `"|"` 다중 분리.
- **다크 테마**: `[data-theme="dark"]`에서 배경/카드/잉크/라인/fill/그림자/글래스를 오버라이드(54~77행). 라임/액센트(blue·coral·green·violet·amber)는 **다크에서 그대로** — 절대 임의 변경 금지.
### 반응형 충실도
- `@media (max-width:1200px)`: 보드 4열→2열(Phase 5 보드용, 786~790행).
- `@media (max-width:720px)`: `.shell-page` 패딩 축소, 상단바 패딩/gap 축소, **원본은 `.mainnav{display:none}`** 이나 우리는 §6.4 결정에 따라 가로 스크롤 유지, `.rail`은 가로 배치로 전환(791~800행).
---
## 6. 상태 처리 & 엣지 케이스
### 6.1 로딩 / 하이드레이션
- **테마 FOUC**: `next-themes`의 인라인 스크립트가 첫 페인트 전 `data-theme`를 설정 → 깜빡임 없음. `` 필수.
- **테마 아이콘 미스매치**: `ThemeToggle`은 `mounted` 가드로 SSR(=light, moon)와 일치시킨 뒤 클라이언트에서 실제 테마 아이콘으로 전환. 가드 없으면 hydration mismatch 경고.
### 6.2 빈 / 에러
- **알 수 없는 라우트**: `app/not-found.tsx`를 두어 셸 안에서 "페이지를 찾을 수 없어요" 표시(선택). 셸은 layout이라 404에서도 Topbar가 유지됨.
- **아이콘 누락**: `Icon`이 콘솔 경고 + 빈 SVG로 폴백(§3.5) → 레이아웃 무너짐 방지. 테스트로 가드(§7).
- **localStorage 비활성(프라이빗 모드 등)**: `next-themes`가 내부적으로 try/catch → 저장 실패 시 세션 한정으로 동작, 크래시 없음.
### 6.3 오프라인
- 셸은 정적 자산 only이므로 오프라인에서도 렌더된다(폰트 CDN 미도달 시 system-ui 폴백, `--font-ui`/`--font-disp`/`--font-mono`의 폴백 체인이 보장). 방안 A(next/font self-host)면 Onest/DM Mono도 오프라인 동작.
### 6.4 결정 — 모바일 내비
원본은 720px 미만에서 `.mainnav{display:none}`이다. MVP에서는 **13항목 가로 스크롤을 유지**(이미 `overflow-x:auto`)하기로 결정한다. 근거: MVP 평가가 데스크톱 중심이지만, 내비 일관성(모든 페이지에서 13항목 접근)을 깨지 않는 편이 라우팅/테스트 단순화에 유리. 원본 `display:none` 규칙은 globals.css에서 주석 처리해 보존한다.
---
## 7. 테스팅 & 검증 (가장 중요)
### 7.1 실행 명령
```bash
# 프론트 단위/컴포넌트 (Vitest + React Testing Library)
cd frontend && pnpm test # 전체
cd frontend && pnpm test Icon # 특정 파일
cd frontend && pnpm test --coverage # 커버리지
# 접근성 (vitest-axe / jest-axe)
cd frontend && pnpm test a11y
# E2E (Playwright) — dev 서버 자동 기동 설정 시
cd frontend && pnpm playwright test playwright/shell.spec.ts
cd frontend && pnpm playwright test --headed # 시각 확인
# 타입/린트
cd frontend && pnpm tsc --noEmit && pnpm lint
```
> Vitest 환경은 `jsdom`, setup 파일에서 `@testing-library/jest-dom`과 `vitest-axe/extend-expect`를 import. `next/font`는 테스트에서 모킹(빈 객체 반환)하고, `next-themes`는 실제 사용(jsdom localStorage 동작)한다.
### 7.2 컴포넌트 렌더 테스트 (Vitest + RTL)
#### Icon — 누락 path 가드 + 다중 path 렌더
```tsx
// frontend/tests/Icon.test.tsx
import { render } from "@testing-library/react";
import { describe, it, expect, vi } from "vitest";
import { Icon } from "@/components/Icon";
import { PATHS } from "@/components/icons/paths";
describe("Icon", () => {
it("모든 글리프가 split된 path 개수만큼 를 그린다", () => {
for (const [name, d] of Object.entries(PATHS)) {
const { container, unmount } = render();
const expected = d.split("|").length;
expect(container.querySelectorAll("path").length).toBe(expected);
unmount();
}
});
it("stroke-width 기본값 1.9, viewBox 0 0 24 24", () => {
const { container } = render();
const svg = container.querySelector("svg")!;
expect(svg.getAttribute("stroke-width")).toBe("1.9");
expect(svg.getAttribute("viewBox")).toBe("0 0 24 24");
});
it("알 수 없는 이름은 경고 + 빈 svg 폴백(렌더 깨짐 방지)", () => {
const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
const { container } = render();
expect(container.querySelectorAll("path").length).toBe(0);
expect(container.querySelector("svg")).toBeTruthy();
expect(warn).toHaveBeenCalled();
warn.mockRestore();
});
it("핵심 글리프 13개(MAIN icon)가 PATHS에 존재한다", () => {
["grid","inbox","spark","zap","route","cal","check","mail","bell","brain","send","heart","moon"]
.forEach((n) => expect(PATHS).toHaveProperty(n));
});
});
```
#### Topbar — 13항목 렌더 + active 상태 + 배지
```tsx
// frontend/tests/Topbar.test.tsx
import { render, screen } from "@testing-library/react";
import { describe, it, expect, vi } from "vitest";
import { Topbar } from "@/components/Topbar";
vi.mock("next/navigation", () => ({ usePathname: () => "/tasks" }));
describe("Topbar", () => {
it("13개 메인 내비 항목을 렌더한다", () => {
render();
["대시보드","인박스","결재함","자동화","여정","일정","작업","메일","알림","리서치","여행","라이프","하루 마감"]
.forEach((label) => expect(screen.getByText(label)).toBeInTheDocument());
});
it("현재 경로(/tasks=작업)가 active 클래스 + aria-current=page", () => {
render();
const active = screen.getByRole("link", { name: /작업/ });
expect(active).toHaveClass("active");
expect(active).toHaveAttribute("aria-current", "page");
});
it("결재함=3, 작업=4, 알림=6 배지가 표시된다", () => {
render();
expect(screen.getByText("3")).toBeInTheDocument();
expect(screen.getByText("4")).toBeInTheDocument();
expect(screen.getByText("6")).toBeInTheDocument();
});
it("브랜드/아바타 텍스트와 우측 액션 aria-label", () => {
render();
expect(screen.getByText("아리")).toBeInTheDocument();
expect(screen.getByText("AI LIFE OS")).toBeInTheDocument();
expect(screen.getByText("지")).toBeInTheDocument(); // user.initial
expect(screen.getByLabelText("검색")).toBeInTheDocument();
expect(screen.getByLabelText("알림")).toBeInTheDocument();
expect(screen.getByLabelText("테마 전환")).toBeInTheDocument();
});
});
```
#### Badge — 변형/톤
```tsx
// frontend/tests/Badge.test.tsx
import { render, screen } from "@testing-library/react";
import { describe, it, expect } from "vitest";
import { Badge } from "@/components/Badge";
describe("Badge", () => {
it("기본 pill은 coral 톤", () => {
render(3);
const el = screen.getByText("3");
expect(el).toHaveClass("badge-pill");
expect(el).toHaveAttribute("data-tone", "coral");
});
it("count 변형은 차분한 카운트 스타일", () => {
render(8개);
expect(screen.getByText("8개")).toHaveClass("badge-count");
});
it("톤 지정", () => {
render(1);
expect(screen.getByText("1")).toHaveAttribute("data-tone", "green");
});
});
```
### 7.3 테마 토글 테스트 (data-theme & localStorage)
```tsx
// frontend/tests/ThemeToggle.test.tsx
import { render, screen, fireEvent, waitFor } from "@testing-library/react";
import { describe, it, expect, beforeEach } from "vitest";
import { ThemeProvider } from "@/components/ThemeProvider";
import { ThemeToggle } from "@/components/ThemeToggle";
function setup() {
return render();
}
describe("ThemeToggle", () => {
beforeEach(() => { localStorage.clear(); document.documentElement.removeAttribute("data-theme"); });
it("클릭 시 data-theme가 light↔dark로 토글", async () => {
setup();
const btn = screen.getByLabelText("테마 전환");
fireEvent.click(btn);
await waitFor(() => expect(document.documentElement.getAttribute("data-theme")).toBe("dark"));
fireEvent.click(btn);
await waitFor(() => expect(document.documentElement.getAttribute("data-theme")).toBe("light"));
});
it("선택이 localStorage(ari-theme)에 영속", async () => {
setup();
fireEvent.click(screen.getByLabelText("테마 전환"));
await waitFor(() => expect(localStorage.getItem("ari-theme")).toBe("dark"));
});
it("다크에서 sun, 라이트에서 moon 아이콘", async () => {
const { container } = setup();
// 초기 light → moon path 존재(첫 path가 moon의 'M21 12.8...')
await waitFor(() => expect(container.querySelector("svg")).toBeTruthy());
fireEvent.click(screen.getByLabelText("테마 전환"));
await waitFor(() => expect(document.documentElement.getAttribute("data-theme")).toBe("dark"));
// sun은 다중 path(8개), moon은 단일 path → path 수로 구분
expect(container.querySelectorAll("path").length).toBeGreaterThan(1);
});
});
```
### 7.4 라우팅 스모크 (Playwright)
```ts
// playwright/shell.spec.ts
import { test, expect } from "@playwright/test";
test("/ → /dashboard 리다이렉트", async ({ page }) => {
await page.goto("/");
await expect(page).toHaveURL(/\/dashboard$/);
});
test("13개 내비 항목이 모든 페이지에서 보인다", async ({ page }) => {
await page.goto("/tasks");
for (const label of ["대시보드","인박스","결재함","작업","하루 마감"]) {
await expect(page.getByRole("link", { name: new RegExp(label) })).toBeVisible();
}
});
test("placeholder 라우트는 '준비 중'을 보여준다", async ({ page }) => {
await page.goto("/research");
await expect(page.getByText("준비 중")).toBeVisible();
await expect(page.getByRole("heading", { name: "리서치" })).toBeVisible();
});
test("작업 라우트에서 '작업' 내비가 active", async ({ page }) => {
await page.goto("/tasks");
await expect(page.getByRole("link", { name: /작업/ })).toHaveClass(/active/);
});
test("테마 토글이 새로고침 후에도 유지된다", async ({ page }) => {
await page.goto("/dashboard");
await page.getByLabel("테마 전환").click();
await expect(page.locator("html")).toHaveAttribute("data-theme", "dark");
await page.reload();
await expect(page.locator("html")).toHaveAttribute("data-theme", "dark"); // localStorage 영속
});
```
### 7.5 접근성 (axe)
```tsx
// frontend/tests/a11y.test.tsx
import { render } from "@testing-library/react";
import { axe } from "vitest-axe";
import { describe, it, expect, vi } from "vitest";
import { Topbar } from "@/components/Topbar";
vi.mock("next/navigation", () => ({ usePathname: () => "/dashboard" }));
describe("a11y", () => {
it("Topbar에 axe 위반 없음", async () => {
const { container } = render();
expect(await axe(container)).toHaveNoViolations();
});
});
```
Playwright + axe(E2E 대비) 추가 검사:
```ts
// playwright/a11y.spec.ts (선택)
import { test, expect } from "@playwright/test";
import AxeBuilder from "@axe-core/playwright";
for (const theme of ["light", "dark"]) {
test(`axe — ${theme} 테마 대시보드`, async ({ page }) => {
await page.goto("/dashboard");
if (theme === "dark") {
await page.getByLabel("테마 전환").click();
await expect(page.locator("html")).toHaveAttribute("data-theme", "dark");
}
const results = await new AxeBuilder({ page })
.withTags(["wcag2a", "wcag2aa"]).analyze();
expect(results.violations).toEqual([]);
});
}
```
### 7.6 수동 QA 체크리스트 (라이트/다크 시각 비교)
| # | 점검 항목 | 통과 기준 |
| --- | --- | --- |
| 1 | 배경 그라데이션 | 상단 웜 크림(#f6efe7) → 하단 쿨 그레이(#e9ebed), 스크롤해도 고정(`fixed`) |
| 2 | 상단바 높이/위치 | 70px, sticky 상단 고정, 스크롤 시 blur 배경 유지 |
| 3 | 브랜드 | 차콜 라운드 마크 + 코럴 별 아이콘 + 우상단 코럴 점, "아리 / AI LIFE OS" |
| 4 | 내비 13항목 | 순서·라벨 원본 동일, 결재함3·작업4·알림6 코럴 배지 |
| 5 | active pill | 현재 페이지 항목만 글래스 pill(반투명+blur+shadow+테두리) |
| 6 | 우측 액션 | 검색/알림(점)/테마/아바타("지", 코럴→바이올렛 그라데이션) |
| 7 | 테마 토글 | 클릭 시 라이트↔다크 즉시 전환, 깜빡임 없음 |
| 8 | 테마 영속 | 다크로 두고 새로고침 → 다크 유지 |
| 9 | 테마 아이콘 | 라이트=달, 다크=해 |
| 10 | placeholder | 10개 라우트 모두 "준비 중" 카드 + 해당 제목 |
| 11 | 리다이렉트 | `/` 진입 시 `/dashboard` |
| 12 | 다크 토큰 | 다크에서 카드/잉크/라인/그림자 전환, 액센트(코럴 등) 색 유지 |
| 13 | 폰트 | 본문 Pretendard, 큰 제목 Onest, 숫자 DM Mono(`.mono`) |
| 14 | 한국어 줄바꿈 | 긴 한국어가 어절 단위로 줄바꿈(keep-all), 자간 -0.011em |
| 15 | 포커스 링 | Tab 이동 시 파란 outline(2px, blue) 보임 |
| 16 | 가로 스크롤(좁은 폭) | 1000px 이하에서 내비 가로 스크롤(스크롤바 숨김) |
| 17 | 반응형 | 1200px↓ 보드 2열, 720px↓ 패딩 축소·레일 가로 |
> 라이트/다크 캡처 비교: `pnpm playwright test --headed`로 `/dashboard`를 띄워 각 테마 스크린샷을 찍고 원본 `대시보드.html`(Live Server 등으로 오픈)과 픽셀 대조. 색은 DevTools color picker로 §3.1 HEX와 일치 확인.
### 7.7 통과 기준
- `pnpm test` 전부 green(Icon 글리프 수, Topbar active/배지, Badge, ThemeToggle 영속, a11y).
- `pnpm playwright test playwright/shell.spec.ts` 전부 green(리다이렉트, 내비 일관성, placeholder, active, 테마 영속).
- `pnpm tsc --noEmit` 0 에러, `pnpm lint` 0 에러.
- axe 위반 0건(라이트/다크 모두).
- 수동 QA 체크리스트 17항목 모두 통과.
---
## 8. 완료 기준 (Definition of Done)
- [ ] `styles/tokens.css`가 `dash.css` `:root` + `[data-theme=dark]`를 **값 그대로** 이식(전수 표 일치).
- [ ] `styles/globals.css`에 body 배경 그라데이션(178deg, fixed), `word-break:keep-all`, `letter-spacing:-0.011em`, `.ic`/`.mono`, 셸/레일 클래스 이식.
- [ ] Pretendard/Onest/DM Mono 적용(`--font-ui`/`--font-disp`/`--font-mono` 변수 바인딩, 폴백 체인).
- [ ] `next-themes`로 `data-theme` 토글 + `ari-theme` localStorage 영속 + FOUC 없음(`suppressHydrationWarning`).
- [ ] `ThemeToggle`이 라이트=달 / 다크=해 아이콘(원본 동작), `mounted` 가드.
- [ ] `components/Icon.tsx` + `icons/paths.ts`가 **MVP 페이지에서 사용하는 글리프 전체 목록**(§3.5: 내비/공통 + chev/star/flag/hash/folder/branch/video/list/file/user/msg/trash/grip/x/wand/radar/scale/link/bold/italic/quote)을 단일 출처로 포함, ``, 누락 가드.
- [ ] `Topbar`가 `MAIN` 13항목(배지 3/4/6) + 우측 액션 + 브랜드, 현재 라우트 active pill + `aria-current`.
- [ ] `layout.tsx`가 전 페이지 공통 셸 적용(`.shell-page` 컨테이너 + 상단바 음수 마진).
- [ ] `SubRail` 컴포넌트 완성(작업 페이지 추후 사용).
- [ ] 프리미티브 6종(GlassCard/Badge/Chip/Button[라임·필·글래스]/SegmentToggle/Avatar) 토큰 기반 구현.
- [ ] `/` → `/dashboard` 리다이렉트, MVP 3개 스텁(작업/인박스/대시보드), placeholder 10개 "준비 중".
- [ ] §7 테스트 전부 green + 수동 QA 17항목 통과 + axe 0건.
- [ ] 라이트/다크 캡처가 원본 `대시보드.html`과 색·라운드·그림자·blur 값에서 일치.
---
## 9. 다음 단계
- **phase-2-backend.md** — SQLite 데이터모델(person/folder/project/task/inbox_item/inbox_classification/...), Alembic 마이그레이션, 시드(REF `data.js`/`tasks-data.js`/`sinbox-data.js`/`approve-data.js`), REST API(`/api/tree`, `/api/tasks`, `/api/inbox`, `/api/dashboard` 등), Ollama 추상화(`llm/provider.py`), 분류/리스크 서비스. 이 phase의 `Tone`·필드명과 1:1 정합.
- 이후 페이지 구현은 **phase-3-tasks.md → phase-4-inbox.md → phase-5-dashboard.md** 순(대시보드가 다른 데이터를 집계하므로 마지막). 각 페이지는 본 phase의 셸·프리미티브·Icon·SegmentToggle·SubRail·Avatar를 그대로 소비한다.
- 전체 연합 흐름 통합/E2E/접근성/성능은 **phase-6-integration.md**.