);
}
```
> 원본 `App()` 은 자체 `topbar`/`theme` state 를 가졌지만, 우리 셸(`phase-1-design-system.md` Topbar + next-themes)이 이를 대체한다 — 페이지는 본문만 렌더한다. 원본 `MAIN` 13항목·badge(결재함3/작업4/알림6)는 셸에 이미 이식되어 있다(`overview.md` §5.3, §11.6). **여정은 `route` 아이콘으로 active**.
> **진입 애니메이션**: 원본은 `useEffect` 로 `ref.current.classList.add("entered")`. 우리는 컨테이너에 `entered` 를 즉시 부여하거나(SSR 후 hydration 시 1프레임 지연 부여) `@keyframes jxin`(0.5s)을 그대로 사용. `prefers-reduced-motion` 가드는 CSS 에 이미 존재.
#### 3.1.2 베지어 커넥터 보드 — `JourneyBoard.tsx`
원본 `Board()` 의 핵심: **DOM 위치를 실시간 측정해 SVG 베지어 곡선을 그린다.** 각 카드에 `ref` 를 붙여(`nodes.current[id]`), `getBoundingClientRect()` 로 시작/끝 좌표를 구해 cubic Bézier path 를 만든다. resize/폰트로드/탭변경에 대응하기 위해 `ResizeObserver` + `requestAnimationFrame` + `document.fonts.ready` 로 재계산한다.
원본 path 공식(그대로 이식):
```
x1 = a.right - boardLeft, y1 = a.top - boardTop + a.height/2 // from 카드의 오른쪽 중앙
x2 = b.left - boardLeft, y2 = b.top - boardTop + b.height/2 // to 카드의 왼쪽 중앙
dx = max(36, (x2 - x1) * 0.5)
d = `M${x1},${y1} C${x1+dx},${y1} ${x2-dx},${y2} ${x2},${y2}`
```
```tsx
// frontend/components/journey/JourneyBoard.tsx
"use client";
import { useRef, useState, useCallback, useLayoutEffect, useMemo } from "react";
import { JourneyColumn } from "./JourneyColumn";
import { FlowCard } from "./FlowCard";
import { FinishTile } from "./FinishTile";
import type { JourneyStage, JourneyCards, JourneyLink, JourneyPerson } from "@/lib/types";
type Props = {
stages: JourneyStage[];
cards: JourneyCards; // { s1:[], s2:[], s3:[], s4:[] }
links: JourneyLink[]; // [{ from, to, tone, dash }]
people: JourneyPerson[];
};
export function JourneyBoard({ stages, cards, links, people }: Props) {
const boardRef = useRef(null);
const nodes = useRef>({});
const [paths, setPaths] = useState([]);
const [size, setSize] = useState({ w: 0, h: 0 });
const [hover, setHover] = useState(null);
// 오전 집중(s2) 작업의 done 토글은 로컬 state (원본 toggle)
const [done, setDone] = useState>(
Object.fromEntries(cards.s2.map((c) => [c.node, !!c.done]))
);
const peopleById = useMemo(() => Object.fromEntries(people.map((p) => [p.id, p])), [people]);
const setNode = (id: string) => (el: HTMLElement | null) => { if (el) nodes.current[id] = el; };
const compute = useCallback(() => {
const board = boardRef.current;
if (!board) return;
const br = board.getBoundingClientRect();
const out: ComputedPath[] = [];
for (const lk of links) {
const a = nodes.current[lk.from], b = nodes.current[lk.to];
if (!a || !b) continue;
const ar = a.getBoundingClientRect(), bb = b.getBoundingClientRect();
const x1 = ar.right - br.left, y1 = ar.top - br.top + ar.height / 2;
const x2 = bb.left - br.left, y2 = bb.top - br.top + bb.height / 2;
const dx = Math.max(36, (x2 - x1) * 0.5);
out.push({
key: lk.from + ">" + lk.to, from: lk.from, to: lk.to,
color: `var(--${lk.tone})`, dash: lk.dash,
d: `M${x1},${y1} C${x1 + dx},${y1} ${x2 - dx},${y2} ${x2},${y2}`,
x1, y1, x2, y2,
});
}
setPaths(out);
setSize({ w: br.width, h: br.height });
}, [links]);
useLayoutEffect(() => {
compute();
const raf = requestAnimationFrame(compute);
const onR = () => compute();
window.addEventListener("resize", onR);
const ro = new ResizeObserver(compute);
if (boardRef.current) ro.observe(boardRef.current);
if (document.fonts?.ready) document.fonts.ready.then(compute);
return () => { cancelAnimationFrame(raf); window.removeEventListener("resize", onR); ro.disconnect(); };
}, [compute, done]);
// 이웃 맵(양방향) — 호버 강조용 (원본 neighbors)
const neighbors = useMemo(() => {
const m: Record> = {};
for (const l of links) {
(m[l.from] = m[l.from] || new Set()).add(l.to);
(m[l.to] = m[l.to] || new Set()).add(l.from);
}
return m;
}, [links]);
const isLit = (node: string) => !!hover && (node === hover || neighbors[hover]?.has(node));
const cls = (node: string, base: string) =>
base + (isLit(node) ? " lit" : "") + (hover && !isLit(node) ? " mute" : "");
const pathState = (p: ComputedPath) =>
!hover ? "" : (p.from === hover || p.to === hover) ? " on" : " off";
const on = (node: string) => ({
onMouseEnter: () => setHover(node), onMouseLeave: () => setHover(null),
});
const toggle = (node: string) => setDone((d) => ({ ...d, [node]: !d[node] }));
return (
{/* 1 — 아침 준비 (routine) */}
{cards.s1.map((c) => (
{c.title}
{c.meta}
{c.tag}
))}
{/* 2 — 오전 집중 (task, 체크 토글) */}
!done[t.node]).length}/4`}>
{cards.s2.map((t) => {
const pe = peopleById[t.who];
const d = done[t.node];
return (
{ e.stopPropagation(); toggle(t.node); }}>
{t.title}
{t.meta}
{pe.initial}
);
})}
{/* 3 — 오후 협업 (meet) */}
{cards.s3.map((e) => {
const pe = peopleById[e.who];
return (
{pe.initial}
{e.title}
{e.meta}
{e.soon ? 곧 :
{e.time}
}
);
})}
{/* 4 — 마무리 & 내일 (tile) */}
{cards.s4.map((t) => (
{t.tt}
{t.ts}
))}
);
}
type ComputedPath = {
key: string; from: string; to: string; color: string; dash?: boolean;
d: string; x1: number; y1: number; x2: number; y2: number;
};
```
> **tone 매핑 정본**: 원본 데이터(`journey-clean-data.js`)의 링크 색은 HEX(`C.blue` = `#4f72e0` 등) 였다. CONTRACT 의 tone 규약(`overview.md` §9.3)을 따라 백엔드는 **tone 키**(`blue|violet|coral|green|amber|ink|faint`)로 내려주고, 프론트가 `var(--${tone})` 로 변환한다. 원본 HEX→tone 키 대응: `#4f72e0→blue`, `#df7256→coral`, `#4e9b66→green`, `#8b6fd4→violet`, `#e0a23c→amber`, `#29241f→ink`. `ink` 단계 라벨 색만 원본처럼 `var(--ink)` 로 처리(원본 `s.c === J.C.ink ? "var(--ink)" : s.c`).
> **베지어 z-index 주의**(원본 CSS): `.jx-svg { position:absolute; inset:0; z-index:1; pointer-events:none; overflow:visible }`, `.jx-col { position:relative; z-index:2 }` — 선은 카드 아래, 카드는 클릭 가능. **누락 시 선이 카드를 덮어 호버가 안 먹음.**
#### 3.1.3 단계 컬럼 · 게이지 · 작업 테이블
```tsx
// frontend/components/journey/JourneyColumn.tsx (원본 Col)
export function JourneyColumn({ stage, count, children }: {
stage: { title: string; tone: string; n: string }; count?: string; children: React.ReactNode;
}) {
return (
{stage.title}{count || stage.n}
{children}
);
}
```
```tsx
// frontend/components/journey/Gauge.tsx (원본 Gauge — 반원 게이지)
const LEN = Math.PI * 64;
export function Gauge({ pct, tone, val, unit, label, sub }: {
pct: number; tone: string; val: string; unit: string; label: string; sub: string;
}) {
const color = tone === "ink" ? "var(--ink)" : `var(--${tone})`;
return (
{val}
{unit}
{label}
{sub}
);
}
```
```tsx
// frontend/components/journey/JourneyTable.tsx (원본 jtable)
import { Icon } from "@/components/Icon";
import type { JourneyRow, JourneyPerson } from "@/lib/types";
export function JourneyTable({ rows, people }: { rows: JourneyRow[]; people: JourneyPerson[] }) {
const by = Object.fromEntries(people.map((p) => [p.id, p]));
// 상태 chip 클래스: prog|review|done|sched (원본 .chip.* 그대로)
return (
작업
상태
시작
담당
{rows.map((r) => {
const pe = by[r.who];
return (
{r.title}
{r.statusLabel}
{r.startTime}
{pe.initial}
{pe.name}
);
})}
);
}
```
> **작업 테이블 ↔ 베지어 호버 연동(원본)**: 원본은 테이블 행 호버 시 `setHover(r.node)` 로 보드의 같은 `node` 카드/링크가 강조됐다(`tr.lit`). MVP+ 에서는 보드와 테이블이 분리 컴포넌트이므로, 호버 상태를 페이지 상위로 끌어올려(`useState` lift) `JourneyBoard` 와 `JourneyTable` 에 공유하거나, 1차 구현은 보드 내부 호버만 지원하고 테이블 행 호버는 **본인 행만 `.lit` 배경**(원본 `.jtable tbody tr.lit { background: var(--card-2) }`)으로 처리한다. 풀 연동은 선택적 향상(테스트 J-7).
### 3.2 하루 마감 페이지 (`/wrap`, 풀스크린)
원본 `REF/assets/wrap.jsx` / `wrap.css` / `wrap-data.js` 를 이식한다. **핵심 차이**: 하루 마감은 **공용 셸(Topbar 13항목)을 쓰지 않는다.** 자체 상단(`w-top`: ‹대시보드 백링크 + 시각)만 있고 `body.wrap-page` 배경(옅은 바이올렛/코럴 글로우)을 쓴다.
#### 3.2.1 전용 레이아웃 (Topbar 미렌더)
Next App Router 의 중첩 레이아웃으로 `/wrap` 만 셸을 제거한다.
```tsx
// frontend/app/wrap/layout.tsx
// 하루 마감은 풀스크린 — 공용 Topbar 를 렌더하지 않는다.
// 루트 layout.tsx 가 Topbar 를 항상 렌더한다면, 루트에서 pathname==="/wrap" 가드로 제외하거나
// route group 으로 분리한다. 아래는 body 클래스 부여 + 자체 컨테이너만.
import "@/styles/wrap.css";
export default function WrapLayout({ children }: { children: React.ReactNode }) {
return
{children}
;
// body.wrap-page 배경은 globals 에서 [data-route="wrap"] 또는 클래스로 적용(아래 §6.3).
}
```
> **셸 제거 구현 정본**: 루트 `app/layout.tsx` 가 `` 를 무조건 렌더한다면, (a) `/wrap` 을 별도 **route group**(`app/(fullscreen)/wrap/`)으로 빼서 그 그룹 layout 에는 Topbar 를 두지 않거나, (b) 루트 layout 에서 `usePathname()` 으로 `/wrap` 시 Topbar 를 숨긴다. 본 문서는 (a) route group 방식을 권장(셸 의존을 컴파일 타임에 끊음). `body.wrap-page` 는 그룹 layout 에서 `document.body.classList` 또는 ``(서버 컴포넌트면 metadata 불가하므로 클라이언트 effect)로 부여.
#### 3.2.2 하루 마감 페이지 본문
원본 `App()` 구조를 그대로 옮기되, 데이터는 `GET /api/wrap`, 상태(회고/수면/이월 되돌리기)는 localStorage + 선택적 백엔드 PUT.
```tsx
// frontend/app/wrap/page.tsx
"use client";
import { useWrap } from "@/lib/hooks/useWrap";
import { WrapHero } from "@/components/wrap/WrapHero";
import { WrapStats } from "@/components/wrap/WrapStats";
import { Highlights } from "@/components/wrap/Highlights";
import { Reflection } from "@/components/wrap/Reflection";
import { Rollover } from "@/components/wrap/Rollover";
import { TomorrowPreview } from "@/components/wrap/TomorrowPreview";
import { SleepMode } from "@/components/wrap/SleepMode";
import { Icon } from "@/components/Icon";
export default function WrapPage() {
const { data, isLoading, error, retry } = useWrap();
if (isLoading || !data) return ;
if (error) return ;
return (