web (Vite+React19+TS, Cloudflare Pages 배포): - 디자인토큰(세이지틸/테라코타 SSOT), 앱셸, 공통 UI 프리미티브 - 7화면: 로그인/학습자홈/상담세션/회기리뷰/교수자/관리자/설정 - ClientAvatar: SVG 반구상 흉상 4상태 + RMS 립싱크 + 6파라미터 정서 - 회기리뷰는 외부 레퍼런스 디자인을 Vignette 토큰으로 리스킨 api (FastAPI): - 게이트웨이 /v1/generate·/v1/stream 어댑터(상주풀/EngineSession 보존) - services: 페르소나 L0~L6 빌더 / 결정론 상태머신 / 가드레일 / 턴 오케스트레이터 / 회기간 메모리 / 평가AI / 음성 / RAG - store: DB off 폴백(in-memory), sessions 실구현 검증: - web: node22 tsc+vite build 통과(node23 segfault 회피), Pages 배포 200 - api: app.main import 통과 - 핫픽스: Topbar initials undefined-safe (undefined.trim 크래시) - E2E: 서연(P1) 상담 1턴 — 좋은/나쁜 상담에 차등 반응 실증
26 lines
711 B
TypeScript
26 lines
711 B
TypeScript
import type { HTMLAttributes, ReactNode } from "react";
|
|
|
|
export interface CardProps extends HTMLAttributes<HTMLDivElement> {
|
|
/** 그림자 제거(헤어라인만) */
|
|
flat?: boolean;
|
|
/** accent-tint 배경 강조 패널 (좌측바 대신 틴트) */
|
|
tint?: boolean;
|
|
children?: ReactNode;
|
|
}
|
|
|
|
/** 카드: 헤어라인 + 미세 그림자. 상단 강조선 금지. radius 8px. §7.3 */
|
|
export function Card({ flat, tint, className, children, ...rest }: CardProps) {
|
|
const cls = [
|
|
"vg-card",
|
|
flat ? "vg-card--flat" : "",
|
|
tint ? "vg-card--tint" : "",
|
|
className ?? "",
|
|
]
|
|
.filter(Boolean)
|
|
.join(" ");
|
|
return (
|
|
<div className={cls} {...rest}>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|