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:
2026-03-11 13:46:59 +09:00
parent 4717bb3a1a
commit 7867bd39ca
4 changed files with 18 additions and 13 deletions

View File

@@ -4,6 +4,8 @@ Last Updated: 2026-03-11
## DONE ## DONE
- `/space` stage 배경 overscan 보정:
- pan 애니메이션 중 가장자리 빈틈이 드러나지 않도록 stage background layer를 `-inset-8`로 확장
- `/space` 배경 asset 해석 안정화: - `/space` 배경 asset 해석 안정화:
- media manifest scene key를 scene alias까지 정규화해 `green-forest``forest`를 동일 asset으로 해석 - media manifest scene key를 scene alias까지 정규화해 `green-forest``forest`를 동일 asset으로 해석
- scene/sound asset에 `source(fallback|remote)` 메타를 추가해 실제 fallback 사용 여부를 구분 가능하게 정리 - scene/sound asset에 `source(fallback|remote)` 메타를 추가해 실제 fallback 사용 여부를 구분 가능하게 정리
@@ -163,6 +165,7 @@ Last Updated: 2026-03-11
## RISKS ## RISKS
- stage background overscan으로 좁은 화면에서 배경 crop이 조금 더 강하게 느껴질 수 있어 실기기 확인이 필요하다
- remote manifest 실패 시 원인 진단은 가능해졌지만, 사용자용 복구 액션 UI는 아직 없다 - remote manifest 실패 시 원인 진단은 가능해졌지만, 사용자용 복구 액션 UI는 아직 없다
- alias 목록에 없는 legacy scene id가 추가되면 같은 fallback 문제가 재발할 수 있다 - alias 목록에 없는 legacy scene id가 추가되면 같은 fallback 문제가 재발할 수 있다
- `npm run build`는 네트워크 제한 시 Google Font fetch 실패 가능 - `npm run build`는 네트워크 제한 시 Google Font fetch 실패 가능

View File

@@ -20,6 +20,8 @@ Last Updated: 2026-03-11
## 최근 세션 상태 ## 최근 세션 상태
- `/space` stage 배경을 overscan으로 보정했다.
- background layer를 `-inset-8`로 확장해 pan 애니메이션 중 가장자리 빈틈 노출을 줄였다.
- `/space` 배경 asset 해석을 보강했다. - `/space` 배경 asset 해석을 보강했다.
- media manifest scene key를 alias-aware 하게 정규화해 `green-forest``forest`를 같은 scene asset으로 읽는다. - media manifest scene key를 alias-aware 하게 정규화해 `green-forest``forest`를 같은 scene asset으로 읽는다.
- scene/sound asset에 `source(fallback|remote)` 메타를 추가해 remote 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는 아직 없다. - remote manifest 실패 시 원인 진단은 가능하지만, 사용자용 복구 CTA는 아직 없다.
- alias 목록에 없는 legacy scene id가 다시 들어오면 scene fallback 문제가 재발할 수 있다. - alias 목록에 없는 legacy scene id가 다시 들어오면 scene fallback 문제가 재발할 수 있다.
- 네트워크 제한 환경에서는 `npm run build` 시 Google Fonts fetch 실패 가능 - 네트워크 제한 환경에서는 `npm run build` 시 Google Fonts fetch 실패 가능

View File

@@ -17,22 +17,21 @@
## 작업 1 ## 작업 1
- 제목: Space 배경 asset 해석 안정화 - forest R2 배경 fallback 제거 - 제목: Space 배경 QA - forest / green-forest manifest 변형 검증
- 목적: - 목적:
- `/space`에서 `forest` 배경이 R2 asset 대신 기본 이미지로 조용히 fallback 되는 원인을 제거한다. - 최근 적용한 scene alias/fallback 보강이 실제 브라우저에서 기대대로 동작하는지 확인한다.
- scene asset miss가 나도 원인을 코드상 추적 가능하게 만들어 재발을 막는다. - `forest``green-forest` 두 manifest 변형 모두에서 같은 배경이 표시되는지 검증한다.
- 변경 범위: - 변경 범위:
- media manifest의 scene asset key를 scene alias까지 고려해 해석하도록 보강 - 로컬 또는 스테이징 환경에서 `/space?scene=forest` 진입 확인
- `/space` 배경이 scene asset miss 또는 manifest load 실패 시 조용히 기본 이미지로만 끝나지 않도록 진단 정보 추가 - manifest의 `sceneId=forest` / `sceneId=green-forest` 두 경우 모두 동일 배경 적용 확인
- 기존 sound playback 동작과 UI 흐름은 유지 - manifest 실패 시 HUD 메시지/console 진단 로그 노출 확인
- 제외 범위: - 제외 범위:
- 백엔드 manifest 스키마 변경 금지 - 추가 코드 수정 금지
- R2 업로드 파이프라인 수정 금지 - R2 업로드 파이프라인 수정 금지
- focus timer / session / audio 동작 변경 금지
- 완료 조건: - 완료 조건:
- `forest``green-forest` 어느 key로 scene asset이 내려와도 `/space`에서 같은 asset을 찾는다. - 두 scene key 변형 모두에서 같은 forest 배경이 노출된다.
- remote manifest를 못 읽는 경우 원인을 코드상 드러낼 수 있다. - manifest 실패 시 조용한 fallback만 남지 않고 진단 정보가 확인된다.
- 검증: - 검증:
- `npx tsc --noEmit` - 브라우저 수동 확인
- 커밋 힌트: - 커밋 힌트:
- fix(space): 배경 asset fallback 경로와 scene alias 해석 보강 - chore(qa): space 배경 alias/fallback 브라우저 검증

View File

@@ -833,7 +833,7 @@ export const SpaceWorkspaceWidget = () => {
<div className="relative h-dvh overflow-hidden text-white"> <div className="relative h-dvh overflow-hidden text-white">
<div <div
aria-hidden 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)} style={getSceneStageBackgroundStyle(selectedScene, selectedSceneAsset)}
/> />