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:
2026-02-28 23:12:54 +09:00
parent 313ef88961
commit 23f103c7b7
8 changed files with 79 additions and 45 deletions

View File

@@ -10,16 +10,16 @@ const StatSection = ({
}) => {
return (
<section className="space-y-3">
<h2 className="text-lg font-semibold text-white">{title}</h2>
<h2 className="text-lg font-semibold text-brand-dark">{title}</h2>
<div className="grid gap-3 sm:grid-cols-3">
{items.map((item) => (
<article
key={item.id}
className="rounded-xl border border-white/16 bg-white/8 p-4"
className="rounded-xl border border-brand-dark/10 bg-white/80 p-4 backdrop-blur-sm"
>
<p className="text-xs text-white/62">{item.label}</p>
<p className="mt-2 text-xl font-semibold text-white">{item.value}</p>
<p className="mt-1 text-xs text-sky-200">{item.delta}</p>
<p className="text-xs text-brand-dark/58">{item.label}</p>
<p className="mt-2 text-xl font-semibold text-brand-dark">{item.value}</p>
<p className="mt-1 text-xs text-brand-primary/90">{item.delta}</p>
</article>
))}
</div>
@@ -29,13 +29,13 @@ const StatSection = ({
export const StatsOverviewWidget = () => {
return (
<div className="min-h-screen bg-[radial-gradient(circle_at_20%_0%,rgba(56,189,248,0.18),transparent_45%),linear-gradient(170deg,#020617_0%,#0f172a_52%,#111827_100%)] text-white">
<div className="min-h-screen bg-[radial-gradient(circle_at_18%_0%,rgba(167,204,237,0.45),transparent_50%),radial-gradient(circle_at_88%_8%,rgba(191,219,254,0.4),transparent_42%),linear-gradient(170deg,#f8fafc_0%,#eef4fb_52%,#e9f1fa_100%)] text-brand-dark">
<div className="mx-auto w-full max-w-6xl 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">Stats</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>
@@ -46,10 +46,10 @@ export const StatsOverviewWidget = () => {
<StatSection title="최근 7일" items={WEEKLY_STATS} />
<section className="space-y-3">
<h2 className="text-lg font-semibold text-white"> </h2>
<div className="rounded-xl border border-dashed border-white/25 bg-white/5 p-5">
<div className="h-52 rounded-lg border border-white/10 bg-[linear-gradient(180deg,rgba(148,163,184,0.08),rgba(148,163,184,0.02))]" />
<p className="mt-3 text-xs text-white/60"> </p>
<h2 className="text-lg font-semibold text-brand-dark"> </h2>
<div className="rounded-xl border border-dashed border-brand-dark/18 bg-white/65 p-5">
<div className="h-52 rounded-lg border border-brand-dark/12 bg-[linear-gradient(180deg,rgba(148,163,184,0.15),rgba(148,163,184,0.04))]" />
<p className="mt-3 text-xs text-brand-dark/56"> </p>
</div>
</section>
</div>