style(app-theme): landing 이후 앱 배경 톤을 밝은 무드로 조정
맥락: - /landing 이후 진입하는 앱 화면들의 배경이 전반적으로 어두워 초기 인상과 톤 연속성이 떨어졌다. - 기존 감성/저자극 분위기를 유지하면서 배경 명도를 올려 부담을 낮출 필요가 있었다. 변경사항: - /app 허브 배경 오버레이를 밝은 그라디언트 중심으로 조정하고 grain 강도를 낮췄다. - 룸 카드 마스크 강도를 완화해 미리보기 이미지의 밝은 톤 노출을 늘렸다. - /space 배경 오버레이, 그레인, 비네팅 강도를 단계적으로 낮춰 전체 명도를 상향했다. - /space suspense fallback 배경을 라이트 그라디언트로 변경했다. - /stats, /settings 페이지를 라이트 팔레트 기반 배경/패널 스타일로 전환했다. - 세션 복구 문서(90_current_state, session_brief)에 이번 변경과 리스크를 반영했다. 검증: - npx tsc --noEmit 세션-상태: /landing 이후 앱 플로우 배경이 밝은 톤으로 정리됨 세션-다음: RoomSheet/도크 패널의 인원수 기반 표현을 분위기형 정보로 전환 세션-리스크: 밝은 배경 구간에서 일부 white 텍스트 대비가 약해질 수 있어 기기별 시인성 점검 필요
This commit is contained in:
@@ -17,24 +17,24 @@ export const SettingsPanelWidget = () => {
|
||||
>(DEFAULT_PRESET_OPTIONS[0].id);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[radial-gradient(circle_at_80%_0%,rgba(34,211,238,0.16),transparent_48%),linear-gradient(170deg,#020617_0%,#111827_54%,#0f172a_100%)] text-white">
|
||||
<div className="min-h-screen bg-[radial-gradient(circle_at_82%_0%,rgba(167,204,237,0.42),transparent_50%),radial-gradient(circle_at_12%_8%,rgba(191,219,254,0.4),transparent_46%),linear-gradient(170deg,#f8fafc_0%,#eef4fb_54%,#e8f1fa_100%)] text-brand-dark">
|
||||
<div className="mx-auto w-full max-w-4xl px-4 pb-10 pt-6 sm:px-6">
|
||||
<header className="mb-6 flex items-center justify-between rounded-xl border border-white/12 bg-white/6 px-4 py-3">
|
||||
<header className="mb-6 flex items-center justify-between rounded-xl border border-brand-dark/12 bg-white/72 px-4 py-3 backdrop-blur-sm">
|
||||
<h1 className="text-xl font-semibold">Settings</h1>
|
||||
<Link
|
||||
href="/app"
|
||||
className="rounded-lg border border-white/24 px-3 py-1.5 text-xs text-white/85 transition hover:bg-white/10"
|
||||
className="rounded-lg border border-brand-dark/16 px-3 py-1.5 text-xs text-brand-dark/82 transition hover:bg-white/90"
|
||||
>
|
||||
허브로
|
||||
</Link>
|
||||
</header>
|
||||
|
||||
<div className="space-y-4">
|
||||
<section className="rounded-xl border border-white/15 bg-white/8 p-4">
|
||||
<section className="rounded-xl border border-brand-dark/12 bg-white/78 p-4 backdrop-blur-sm">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<h2 className="text-base font-semibold text-white">Reduce Motion</h2>
|
||||
<p className="mt-1 text-sm text-white/70">
|
||||
<h2 className="text-base font-semibold text-brand-dark">Reduce Motion</h2>
|
||||
<p className="mt-1 text-sm text-brand-dark/64">
|
||||
전환 애니메이션을 최소화합니다. (UI 토글 목업)
|
||||
</p>
|
||||
</div>
|
||||
@@ -46,13 +46,13 @@ export const SettingsPanelWidget = () => {
|
||||
className={cn(
|
||||
'inline-flex w-16 items-center rounded-full border px-1 py-1 transition-colors',
|
||||
reduceMotion
|
||||
? 'border-sky-200/70 bg-sky-300/28'
|
||||
: 'border-white/30 bg-white/10',
|
||||
? 'border-brand-primary/45 bg-brand-soft/60'
|
||||
: 'border-brand-dark/20 bg-white/85',
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
'h-5 w-5 rounded-full bg-white transition-transform duration-200 motion-reduce:transition-none',
|
||||
'h-5 w-5 rounded-full bg-white shadow-sm transition-transform duration-200 motion-reduce:transition-none',
|
||||
reduceMotion ? 'translate-x-9' : 'translate-x-0',
|
||||
)}
|
||||
/>
|
||||
@@ -60,9 +60,9 @@ export const SettingsPanelWidget = () => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="rounded-xl border border-white/15 bg-white/8 p-4">
|
||||
<h2 className="text-base font-semibold text-white">알림 강도</h2>
|
||||
<p className="mt-1 text-sm text-white/70">집중 시작/종료 신호의 존재감을 선택합니다.</p>
|
||||
<section className="rounded-xl border border-brand-dark/12 bg-white/78 p-4 backdrop-blur-sm">
|
||||
<h2 className="text-base font-semibold text-brand-dark">알림 강도</h2>
|
||||
<p className="mt-1 text-sm text-brand-dark/64">집중 시작/종료 신호의 존재감을 선택합니다.</p>
|
||||
<div className="mt-3 flex flex-wrap gap-2">
|
||||
{NOTIFICATION_INTENSITY_OPTIONS.map((option) => (
|
||||
<button
|
||||
@@ -72,8 +72,8 @@ export const SettingsPanelWidget = () => {
|
||||
className={cn(
|
||||
'rounded-full border px-3 py-1.5 text-xs transition-colors',
|
||||
notificationIntensity === option
|
||||
? 'border-sky-200/80 bg-sky-300/25 text-sky-50'
|
||||
: 'border-white/24 bg-white/8 text-white/82 hover:bg-white/14',
|
||||
? 'border-brand-primary/45 bg-brand-soft/60 text-brand-dark'
|
||||
: 'border-brand-dark/18 bg-white/75 text-brand-dark/78 hover:bg-white',
|
||||
)}
|
||||
>
|
||||
{option}
|
||||
@@ -82,9 +82,9 @@ export const SettingsPanelWidget = () => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="rounded-xl border border-white/15 bg-white/8 p-4">
|
||||
<h2 className="text-base font-semibold text-white">기본 프리셋</h2>
|
||||
<p className="mt-1 text-sm text-white/70">입장 시 자동 선택될 추천 세트를 고릅니다.</p>
|
||||
<section className="rounded-xl border border-brand-dark/12 bg-white/78 p-4 backdrop-blur-sm">
|
||||
<h2 className="text-base font-semibold text-brand-dark">기본 프리셋</h2>
|
||||
<p className="mt-1 text-sm text-brand-dark/64">입장 시 자동 선택될 추천 세트를 고릅니다.</p>
|
||||
<div className="mt-3 space-y-2">
|
||||
{DEFAULT_PRESET_OPTIONS.map((preset) => (
|
||||
<button
|
||||
@@ -94,8 +94,8 @@ export const SettingsPanelWidget = () => {
|
||||
className={cn(
|
||||
'w-full rounded-lg border px-3 py-2 text-left text-sm transition-colors',
|
||||
defaultPresetId === preset.id
|
||||
? 'border-sky-200/75 bg-sky-300/20 text-sky-50'
|
||||
: 'border-white/18 bg-white/5 text-white/85 hover:bg-white/10',
|
||||
? 'border-brand-primary/45 bg-brand-soft/58 text-brand-dark'
|
||||
: 'border-brand-dark/16 bg-white/72 text-brand-dark/82 hover:bg-white',
|
||||
)}
|
||||
>
|
||||
{preset.label}
|
||||
|
||||
Reference in New Issue
Block a user