style(space): stage 배경 overscan과 문서 상태 갱신
맥락: - space stage 배경 pan 애니메이션 중 가장자리 빈틈이 보일 수 있었다. - 관련 코드와 세션 문서 상태를 함께 맞춰둘 필요가 있었다. 변경사항: - SpaceWorkspaceWidget 의 stage background layer 를 로 확장했다. - 90_current_state, session_brief 에 overscan 보정과 관련 리스크를 반영했다. - work.md 를 다음 브라우저 QA 작업 기준으로 갱신했다. 검증: - npx tsc --noEmit 세션-상태: stage 배경 overscan 보정과 문서 정리를 마쳤다. 세션-다음: forest/green-forest manifest 변형을 실제 브라우저에서 QA 한다. 세션-리스크: overscan 으로 좁은 화면에서 배경 crop 체감이 조금 더 커질 수 있다.
This commit is contained in:
@@ -4,6 +4,8 @@ Last Updated: 2026-03-11
|
||||
|
||||
## DONE
|
||||
|
||||
- `/space` stage 배경 overscan 보정:
|
||||
- pan 애니메이션 중 가장자리 빈틈이 드러나지 않도록 stage background layer를 `-inset-8`로 확장
|
||||
- `/space` 배경 asset 해석 안정화:
|
||||
- media manifest scene key를 scene alias까지 정규화해 `green-forest`와 `forest`를 동일 asset으로 해석
|
||||
- scene/sound asset에 `source(fallback|remote)` 메타를 추가해 실제 fallback 사용 여부를 구분 가능하게 정리
|
||||
@@ -163,6 +165,7 @@ Last Updated: 2026-03-11
|
||||
|
||||
## RISKS
|
||||
|
||||
- stage background overscan으로 좁은 화면에서 배경 crop이 조금 더 강하게 느껴질 수 있어 실기기 확인이 필요하다
|
||||
- remote manifest 실패 시 원인 진단은 가능해졌지만, 사용자용 복구 액션 UI는 아직 없다
|
||||
- alias 목록에 없는 legacy scene id가 추가되면 같은 fallback 문제가 재발할 수 있다
|
||||
- `npm run build`는 네트워크 제한 시 Google Font fetch 실패 가능
|
||||
|
||||
@@ -20,6 +20,8 @@ Last Updated: 2026-03-11
|
||||
|
||||
## 최근 세션 상태
|
||||
|
||||
- `/space` stage 배경을 overscan으로 보정했다.
|
||||
- background layer를 `-inset-8`로 확장해 pan 애니메이션 중 가장자리 빈틈 노출을 줄였다.
|
||||
- `/space` 배경 asset 해석을 보강했다.
|
||||
- media manifest scene key를 alias-aware 하게 정규화해 `green-forest`와 `forest`를 같은 scene asset으로 읽는다.
|
||||
- scene/sound asset에 `source(fallback|remote)` 메타를 추가해 remote asset 사용 여부를 코드에서 바로 식별할 수 있다.
|
||||
@@ -118,6 +120,7 @@ Last Updated: 2026-03-11
|
||||
|
||||
## 리스크
|
||||
|
||||
- stage background overscan으로 좁은 화면에서 배경 crop 체감이 조금 더 커질 수 있다.
|
||||
- remote manifest 실패 시 원인 진단은 가능하지만, 사용자용 복구 CTA는 아직 없다.
|
||||
- alias 목록에 없는 legacy scene id가 다시 들어오면 scene fallback 문제가 재발할 수 있다.
|
||||
- 네트워크 제한 환경에서는 `npm run build` 시 Google Fonts fetch 실패 가능
|
||||
|
||||
23
docs/work.md
23
docs/work.md
@@ -17,22 +17,21 @@
|
||||
|
||||
## 작업 1
|
||||
|
||||
- 제목: Space 배경 asset 해석 안정화 - forest R2 배경 fallback 제거
|
||||
- 제목: Space 배경 QA - forest / green-forest manifest 변형 검증
|
||||
- 목적:
|
||||
- `/space`에서 `forest` 배경이 R2 asset 대신 기본 이미지로 조용히 fallback 되는 원인을 제거한다.
|
||||
- scene asset miss가 나도 원인을 코드상 추적 가능하게 만들어 재발을 막는다.
|
||||
- 최근 적용한 scene alias/fallback 보강이 실제 브라우저에서 기대대로 동작하는지 확인한다.
|
||||
- `forest`와 `green-forest` 두 manifest 변형 모두에서 같은 배경이 표시되는지 검증한다.
|
||||
- 변경 범위:
|
||||
- media manifest의 scene asset key를 scene alias까지 고려해 해석하도록 보강
|
||||
- `/space` 배경이 scene asset miss 또는 manifest load 실패 시 조용히 기본 이미지로만 끝나지 않도록 진단 정보 추가
|
||||
- 기존 sound playback 동작과 UI 흐름은 유지
|
||||
- 로컬 또는 스테이징 환경에서 `/space?scene=forest` 진입 확인
|
||||
- manifest의 `sceneId=forest` / `sceneId=green-forest` 두 경우 모두 동일 배경 적용 확인
|
||||
- manifest 실패 시 HUD 메시지/console 진단 로그 노출 확인
|
||||
- 제외 범위:
|
||||
- 백엔드 manifest 스키마 변경 금지
|
||||
- 추가 코드 수정 금지
|
||||
- R2 업로드 파이프라인 수정 금지
|
||||
- focus timer / session / audio 동작 변경 금지
|
||||
- 완료 조건:
|
||||
- `forest`와 `green-forest` 어느 key로 scene asset이 내려와도 `/space`에서 같은 asset을 찾는다.
|
||||
- remote manifest를 못 읽는 경우 원인을 코드상 드러낼 수 있다.
|
||||
- 두 scene key 변형 모두에서 같은 forest 배경이 노출된다.
|
||||
- manifest 실패 시 조용한 fallback만 남지 않고 진단 정보가 확인된다.
|
||||
- 검증:
|
||||
- `npx tsc --noEmit`
|
||||
- 브라우저 수동 확인
|
||||
- 커밋 힌트:
|
||||
- fix(space): 배경 asset fallback 경로와 scene alias 해석 보강
|
||||
- chore(qa): space 배경 alias/fallback 브라우저 검증
|
||||
|
||||
@@ -833,7 +833,7 @@ export const SpaceWorkspaceWidget = () => {
|
||||
<div className="relative h-dvh overflow-hidden text-white">
|
||||
<div
|
||||
aria-hidden
|
||||
className="absolute inset-0 bg-cover bg-center will-change-transform animate-[space-stage-pan_42s_ease-in-out_infinite_alternate] motion-reduce:animate-none"
|
||||
className="absolute -inset-8 bg-cover bg-center will-change-transform animate-[space-stage-pan_42s_ease-in-out_infinite_alternate] motion-reduce:animate-none"
|
||||
style={getSceneStageBackgroundStyle(selectedScene, selectedSceneAsset)}
|
||||
/>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user