style(custom-entry-modal): 커스텀 입장 모달 톤과 크기를 안정화

맥락:
- 커스텀 입장 모달이 허브 대비 과도하게 어두워 화면 톤 일관성이 떨어졌다.
- 탭(공간/사운드/타이머) 전환 시 본문 높이가 달라져 모달 외곽 크기가 흔들리는 UX 이슈가 있었다.

변경사항:
- Modal 오버레이/패널/헤더/푸터 스타일을 밝은 글래스 톤으로 조정해 허브 톤과 맞췄다.
- CustomEntryModal의 탭 콘텐츠 영역을 고정 높이 컨테이너로 변경해 탭 전환 시 모달 전체 크기가 변하지 않도록 했다.
- 공간/사운드/타이머 옵션 버튼과 커스텀 타이머 입력 필드를 밝은 팔레트로 재정의했다.
- Tabs 컴포넌트를 밝은 표면 톤에 맞게 보정했다.
- 세션 문서(90_current_state, session_brief)에 이번 작업 내용/리스크를 반영했다.

검증:
- npx tsc --noEmit

세션-상태: 커스텀 입장 모달의 밝은 톤 정렬 및 탭 전환 크기 고정 반영 완료
세션-다음: RoomSheet/도크 패널의 인원수 기반 표현을 분위기형 정보로 전환
세션-리스크: 모달 고정 높이 적용으로 작은 화면에서 탭 본문 내부 스크롤 의존도가 증가할 수 있음
This commit is contained in:
2026-02-28 23:29:17 +09:00
parent 105c5785b8
commit 3280df7aa1
5 changed files with 127 additions and 90 deletions

View File

@@ -52,6 +52,10 @@ Last Updated: 2026-02-28
- 허브 전역 오버레이를 밝은 워시 중심으로 조정하고 그레인 강도 축소
- `RoomPreviewCard` 내부 콘텐츠 영역에 반투명 패널을 추가해 배경 변동과 텍스트 대비를 분리
- `GlassCard` 표면을 조금 더 밝고 가벼운 글래스 톤으로 보정
- 커스텀 입장 모달 톤/레이아웃 안정화:
- 모달 표면/오버레이를 허브 밝은 톤과 유사한 저대비 글래스로 전환
- `공간/사운드/타이머` 탭 콘텐츠 영역을 고정 높이로 통일해 전환 시 모달 크기 흔들림 제거
- 탭/옵션 버튼과 입력 필드를 밝은 팔레트로 정리해 가독성 개선
- 몰입 모드 ON 시 `/space` 크롬 정리:
- 상단 `Current Room` 블록 숨김
- 우상단 허브 버튼 소형 아이콘화
@@ -85,6 +89,7 @@ Last Updated: 2026-02-28
- 안내 카피가 HUD 목표 문구와 교체 표시되므로 정보 밀도 균형 점검 필요
- 밝아진 배경 구간에서 일부 white 텍스트의 대비가 환경(디스플레이 밝기)에 따라 약해질 수 있음
- 배경 필터/블러 적용으로 저사양 환경에서 스크롤 시 미세한 페인팅 비용 증가 가능성 존재
- 모달 본문 고정 높이 적용으로 작은 화면에서 내부 스크롤 의존도가 이전보다 높아질 수 있음
## CHANGED FILES
@@ -141,6 +146,9 @@ Last Updated: 2026-02-28
- `src/shared/ui/GlassCard.tsx`
- `src/widgets/app-hub/ui/AppHubWidget.tsx`
- `src/features/room-select/ui/RoomPreviewCard.tsx`
- `src/shared/ui/Modal.tsx`
- `src/shared/ui/Tabs.tsx`
- `src/features/custom-entry-modal/ui/CustomEntryModal.tsx`
## QUICK VERIFY
@@ -150,3 +158,4 @@ Last Updated: 2026-02-28
4. `/space`: 몰입 모드 ON 시 상단 룸 블록 숨김 + 레일 미니화 + HUD 저대비 적용
5. `/app`: 콘솔에 `button cannot be a descendant of button` hydration 에러가 재발하지 않음
6. `/app`: 숲/벽난로처럼 텍스처가 많은 룸 선택 시에도 카드 내부 텍스트 시인성이 유지됨
7. 커스텀 입장 모달 탭 전환(공간/사운드/타이머) 시 외곽 모달 크기가 유지됨