24b1b7a6e1
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턴 — 좋은/나쁜 상담에 차등 반응 실증
45 lines
1.8 KiB
TypeScript
45 lines
1.8 KiB
TypeScript
/* =====================================================================
|
|
AuraLayer — 내담자 뒤 호흡하는 광배(aura)
|
|
§4.4: 광배 펄스 opacity ±0.04~0.08, 5~6s. speaking 때만 오디오 동기(미세).
|
|
§4.5: 정서별 색조(세이지/청회색/차가운 청/중립 회색).
|
|
transform/opacity 만 애니메이션. radial-gradient 로 은은하게.
|
|
|
|
── Rive 2차 교체 지점 ── 광배는 SVG/CSS 로 유지해도 무방(배경 레이어).
|
|
===================================================================== */
|
|
|
|
import type { AvatarState } from "./persona";
|
|
|
|
interface AuraLayerProps {
|
|
/** 광배 색조 (CSS 색) */
|
|
hue: string;
|
|
/** 기본 opacity */
|
|
opacity: number;
|
|
/** 채도 가중(연령대 생기) */
|
|
saturation: number;
|
|
state: AvatarState;
|
|
/** speaking 시 입 열림(0~1) — 광배 미세 약동 동기 */
|
|
mouth: number;
|
|
/** reduced-motion 이면 펄스 정지 */
|
|
reduced: boolean;
|
|
}
|
|
|
|
export function AuraLayer({ hue, opacity, saturation, state, mouth, reduced }: AuraLayerProps) {
|
|
// speaking 일 때만 입 열림에 미세 동기(0.04~0.12 범위 추가). 그 외엔 CSS 호흡 펄스.
|
|
const speakBoost = state === "speaking" ? mouth * 0.06 : 0;
|
|
const finalOpacity = Math.min(0.16, (opacity + speakBoost) * saturation);
|
|
|
|
return (
|
|
<span
|
|
className={"vg-avatar__aura" + (reduced ? " is-reduced" : "")}
|
|
aria-hidden="true"
|
|
style={{
|
|
// 색 면적은 작게(68% 안쪽에서 사라짐) — 산만 방지
|
|
background: `radial-gradient(circle, color-mix(in srgb, ${hue} ${Math.round(
|
|
finalOpacity * 100,
|
|
)}%, transparent) 0%, transparent 68%)`,
|
|
// speaking 일 때 호흡 펄스를 살짝 빠르게(발화 리듬감)
|
|
animationDuration: state === "speaking" ? "5s" : "6s",
|
|
}}
|
|
/>
|
|
);
|
|
}
|