From 3280df7aa116fc4c79f9adcb992c4eb588488198 Mon Sep 17 00:00:00 2001 From: corpi Date: Sat, 28 Feb 2026 23:29:17 +0900 Subject: [PATCH] =?UTF-8?q?style(custom-entry-modal):=20=EC=BB=A4=EC=8A=A4?= =?UTF-8?q?=ED=85=80=20=EC=9E=85=EC=9E=A5=20=EB=AA=A8=EB=8B=AC=20=ED=86=A4?= =?UTF-8?q?=EA=B3=BC=20=ED=81=AC=EA=B8=B0=EB=A5=BC=20=EC=95=88=EC=A0=95?= =?UTF-8?q?=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 맥락: - 커스텀 입장 모달이 허브 대비 과도하게 어두워 화면 톤 일관성이 떨어졌다. - 탭(공간/사운드/타이머) 전환 시 본문 높이가 달라져 모달 외곽 크기가 흔들리는 UX 이슈가 있었다. 변경사항: - Modal 오버레이/패널/헤더/푸터 스타일을 밝은 글래스 톤으로 조정해 허브 톤과 맞췄다. - CustomEntryModal의 탭 콘텐츠 영역을 고정 높이 컨테이너로 변경해 탭 전환 시 모달 전체 크기가 변하지 않도록 했다. - 공간/사운드/타이머 옵션 버튼과 커스텀 타이머 입력 필드를 밝은 팔레트로 재정의했다. - Tabs 컴포넌트를 밝은 표면 톤에 맞게 보정했다. - 세션 문서(90_current_state, session_brief)에 이번 작업 내용/리스크를 반영했다. 검증: - npx tsc --noEmit 세션-상태: 커스텀 입장 모달의 밝은 톤 정렬 및 탭 전환 크기 고정 반영 완료 세션-다음: RoomSheet/도크 패널의 인원수 기반 표현을 분위기형 정보로 전환 세션-리스크: 모달 고정 높이 적용으로 작은 화면에서 탭 본문 내부 스크롤 의존도가 증가할 수 있음 --- docs/90_current_state.md | 9 + docs/session_brief.md | 4 + .../ui/CustomEntryModal.tsx | 182 ++++++++++-------- src/shared/ui/Modal.tsx | 16 +- src/shared/ui/Tabs.tsx | 6 +- 5 files changed, 127 insertions(+), 90 deletions(-) diff --git a/docs/90_current_state.md b/docs/90_current_state.md index 6e52c49..f1857b8 100644 --- a/docs/90_current_state.md +++ b/docs/90_current_state.md @@ -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. 커스텀 입장 모달 탭 전환(공간/사운드/타이머) 시 외곽 모달 크기가 유지됨 diff --git a/docs/session_brief.md b/docs/session_brief.md index 4f2f706..990abef 100644 --- a/docs/session_brief.md +++ b/docs/session_brief.md @@ -45,6 +45,9 @@ Last Updated: 2026-02-28 - 허브 배경에 blur + 밝기 보정 + 저채도 필터를 적용해 배경 복잡도를 낮췄다. - 전역 오버레이를 밝은 워시 중심으로 조정하고 그레인 강도를 낮췄다. - `RoomPreviewCard` 내부에 반투명 정보 패널을 추가해 텍스트 대비를 안정화했다. +- 커스텀 입장 모달을 허브 톤과 맞춰 밝게 정리했다. + - `공간/사운드/타이머` 탭 콘텐츠 영역을 고정 높이로 바꿔 전환 시 모달 크기 변화가 없게 했다. + - 탭/옵션/입력 필드 스타일을 밝은 팔레트 기준으로 통일했다. - 몰입 모드 ON 시 상단 룸 블록 숨김, 레일 미니화, HUD 저대비, 비네팅 강화가 적용된다. - 이후 작업은 `docs/work.md`를 기준으로 실행한다. @@ -58,6 +61,7 @@ Last Updated: 2026-02-28 - HUD 안내 문구와 목표 문구가 교체 노출되므로 정보 우선순위 점검이 필요함 - 밝은 배경 구간에서 white 텍스트 대비가 낮아질 수 있어 기기별 시인성 점검이 필요함 - 배경 blur/filter 적용으로 저사양 환경에서 렌더링 비용이 소폭 증가할 수 있음 +- 모달 고정 높이로 인해 작은 화면에서는 탭 본문 내부 스크롤 사용 빈도가 늘 수 있음 ## 상세 원문 위치 diff --git a/src/features/custom-entry-modal/ui/CustomEntryModal.tsx b/src/features/custom-entry-modal/ui/CustomEntryModal.tsx index b6771e8..dfeba61 100644 --- a/src/features/custom-entry-modal/ui/CustomEntryModal.tsx +++ b/src/features/custom-entry-modal/ui/CustomEntryModal.tsx @@ -2,7 +2,8 @@ import { ROOM_THEMES } from '@/entities/room'; import { SOUND_PRESETS, TIMER_PRESETS } from '@/entities/session'; -import { Button, Chip, Modal, Tabs } from '@/shared/ui'; +import { Button, Modal, Tabs } from '@/shared/ui'; +import { cn } from '@/shared/lib/cn'; import { type CustomEntrySelection, useCustomEntryForm, @@ -64,95 +65,118 @@ export const CustomEntryModal = ({
- +
} >
setActiveTab(value as 'theme' | 'sound' | 'timer')} /> - {activeTab === 'theme' ? ( -
- {ROOM_THEMES.map((room) => ( - - ))} -
- ) : null} - - {activeTab === 'sound' ? ( -
- {SOUND_PRESETS.map((preset) => ( - setSelectedSoundId(preset.id)} - > - {preset.label} - - ))} -
- ) : null} - - {activeTab === 'timer' ? ( -
-
- {TIMER_PRESETS.map((preset) => ( - setSelectedTimerId(preset.id)} - > - {preset.label} - - ))} -
- - {selectedTimerId === 'custom' ? ( -
- - - +
+ {activeTab === 'theme' ? ( +
+
+ {ROOM_THEMES.map((room) => ( + + ))}
- ) : null} -
- ) : null} +
+ ) : null} + + {activeTab === 'sound' ? ( +
+
+ {SOUND_PRESETS.map((preset) => ( + + ))} +
+
+ ) : null} + + {activeTab === 'timer' ? ( +
+
+
+ {TIMER_PRESETS.map((preset) => ( + + ))} +
+ + {selectedTimerId === 'custom' ? ( +
+ + + +
+ ) : null} +
+
+ ) : null} +
); diff --git a/src/shared/ui/Modal.tsx b/src/shared/ui/Modal.tsx index c0f4641..b5ad261 100644 --- a/src/shared/ui/Modal.tsx +++ b/src/shared/ui/Modal.tsx @@ -52,7 +52,7 @@ export const Modal = ({ type="button" aria-label="모달 닫기" onClick={onClose} - className="absolute inset-0 bg-slate-950/78 backdrop-blur-sm" + className="absolute inset-0 bg-slate-900/52 backdrop-blur-[2px]" />
-
+
-

+

{title}

{description ? ( -

{description}

+

{description}

) : null}
-
{children}
+
{children}
{footer ? ( -
{footer}
+
{footer}
) : null}
diff --git a/src/shared/ui/Tabs.tsx b/src/shared/ui/Tabs.tsx index a2ef9e4..ca927db 100644 --- a/src/shared/ui/Tabs.tsx +++ b/src/shared/ui/Tabs.tsx @@ -15,7 +15,7 @@ interface TabsProps { export const Tabs = ({ value, options, onChange }: TabsProps) => { return ( -
+
{options.map((option) => (