diff --git a/memory/project_status.md b/memory/project_status.md index 0641398..b575a7a 100644 --- a/memory/project_status.md +++ b/memory/project_status.md @@ -1,6 +1,26 @@ # D3RO-VOICE 프로젝트 현황 -> 마지막 갱신: 2026-07-21 (Whisper large-v3-turbo 전환 + 온보딩 2단계 부트스트랩) +> 마지막 갱신: 2026-07-22 (TiltCard 3D 틸트 + 빛 반사 효과) + +## TiltCard — 3D 틸트 + 커서 추종 빛 반사 효과 (2026-07-22 /design-taste-frontend + /refactor-wave) ✅ + +대시보드 카드에 마우스를 올리면 **커서를 따라 3D로 미세 기울임 + 커서 위치에서 빛이 반사되는 스페큘러 하이라이트**가 흐르도록 프리미엄 물리감 추가. 정적이던 Midnight Glass v2 글래스 카드에 깊이. + +- **기법(웹 리서치)**: 부모 perspective 대신 요소 자신의 `transform: perspective(900px) rotateX(var) rotateY(var)` (Chromium 단일 요소 틸트). 스페큘러는 커서 %→CSS 변수를 `radial-gradient(circle at var(--mx) var(--my), …)`에 주입해 이동. 라이브러리 없이 네이티브 pointer 이벤트 + `ref.style.setProperty`(리렌더 0, 60fps). 참고: frontend.fyi/CSS-Tricks/armandocanals. +- **theme.ts**: `glass.specular` 토큰 추가(rgba 색 — geometry는 컴포넌트가 소유해야 커서가 하이라이트를 움직일 수 있음). RawTheme 인터페이스 + 6개 RAW 테마 + buildCssVars + d3roPalette (9곳). 색은 테마별 톤 파생(dark `rgba(180,205,255,0.22)`, light `rgba(255,255,255,0.5)` 등). +- **TiltCard.tsx (신규 DS)**: MetalCard 표면 레시피(동일 토큰) 복제 + 3D 틸트 + 스페큘러. 구조 — 루트 Box(perspective/transform/표면/blur/시인 `::before`/헤어라인 링 `::after`/overflow) + 자식 span.d3-tilt-spotlight(커서 추종, z1, mixBlendMode screen, `:hover` opacity 0→1) + 콘텐츠 Box(z2). `useTiltCard` 훅 인라인(ref+CSS 변수 갱신). 핵심 디테일: `pointerleave`에서 변수 중립 리셋(0deg/50%) 후 data 속성 제거 → 복귀 트랜지션(리셋 안 하면 마지막 각도에 고정). Props: `maxTilt`(기본 8)·`spotlight`(기본 true) + BoxProps. +- **reduced-motion 완전 존중**: `useEffect`로 matchMedia 구독 → reduceRef 게이트로 틸트/추종 no-op, `@media`에서 `transform:none`·`transition:none`. OS 토글에도 즉시 반응(theme-mode-context 패턴 차용). +- **대시보드 적용(모션 동기 부여된 곳만)**: 히어로 카드 + 4개 스탯 타일(타일 maxTilt=6). 나머지 5개 섹션(백엔드/사용량/자막/시스템상태/파일전사/히스토리)은 데이터 밀집·드롭존·리스트라 MetalCard 유지(틸트 = unmotivated slop 회피). +- 검증: desktop `tsc --noEmit` EXIT 0, 변경 파일 eslint clean. (전체 `npm run lint`은 기존 `apps/mobile-rn/.eslintrc.js`의 `@react-native` 설정 누락으로 별도 이슈 — 본 변경 무관.) +- 커밋 3건 분리(theme / TiltCard+export / dashboard) + docs(memory). +- 후보: 다른 페이지 히어로 카드 확장, spotlight 반경·maxTilt 페이지별 튜닝. + +## 스킬 이식: harness-gate + refactor-wave (2026-07-21 /goal) ✅ + +HaramLog에서 범용 워크플로우 스킬 2종을 D3RO에 맞게 커스터마이징해 이식 (`.claude/skills/`): +- **harness-gate**: 지속 규칙 발언("이제부터~", "항상~") 감지 시 규칙 SSOT 3계층(CLAUDE.md 코딩 규칙 / settings.json 강제 규칙 훅 / memory 피드백) 중 갱신 위치를 게이트. L1↔L2 중복 규칙 동기화 주의점 포함. +- **refactor-wave**: 정책(docs/REFACTOR_POLICY.md) 합의 → 공격적 감사(3 에이전트) → 파일 비충돌 워크스트림 병렬(WS1 토큰/WS2 메인/WS3 렌더러/WS4 i18n/WS5 빌드) → 분리 커밋 → 보고서. HaramLog wave 1~10 학습 중 범용 인사이트 6개(P1~P6) 이식, 검증은 npm typecheck/lint/test 체계로 치환. +- 조사 결과: vignette 스킬 없음, GlassDeck 13종·RFS 디자인 계열 전부 글로벌(~/.claude/skills)과 중복, RFS 나머지는 Unity/RFS 전용이라 제외. HaramLog의 implement-phase/test-and-commit은 D3RO 기존 버전이 더 우수해 유지. ## 받아쓰기 파이프라인 4버그 수정 + 실시간 부분 전사 (2026-07-21 /goal) ✅